/*
Tags: gray, black, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options
==============================
Table of Contents
============================== 
1.0 Typography
	1.1 Body
	1.2 Search
	1.3 Navigation
	1.4 Top content
	1.5 Main content
	1.6 Sidebar
	1.7 Footer
2.0 Body
3.0 Header
	3.1 Logo
	3.2 Search
4.0 Navigation
5.0 Top Content
	5.1 Featured posts
	5.2 Top 5 posts
6.0 Main Content
    6.1 Sections
    6.2 Articles
7.0 Sidebar
	7.1 Newsletter & All about
	7.2 Video tutorials
8.0 Footer
    8.1 Mobile button
    8.2 Content
    8.3 Copyright
==============================
*/


/*
==============================
	1.0 Fonts
==============================
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@font-face{
	font-family: 'Nobile-Light';
	src: url('../fonts/Nobile-Regular.ttf');
}
@font-face{
	font-family: 'Nobile';
	src: url('../fonts/Nobile-Medium.ttf');
}


/*
==============================
	1.1 Body
==============================
*/

body{
	font-family: 'Open Sans',Arial,sans-serif;
	font-weight: 400;
	line-height: 20px;
}

/*
==============================
	1.1 Search
==============================
*/

.search-location{
	color: #ffffff;
	font-size: 12px;
}
.search-location label{
	color: #aeaeae;
	font-size: 11px;
}


/*
==============================
	1.2 Navigation
==============================
*/
.navbar ul{
	letter-spacing: -4px;
}
.navbar li{
	letter-spacing: normal;
	height: 73px;
}
.navbar li a{
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-shadow: 0 -1px #111111;
	
}
.navbar li a span{
	color: #aeaeae;
	font-size: 11px;
	line-height: 13px;
	font-weight: 400;
	text-shadow: none;
}
.navbar ul ul li a{
	color: #ffffff;
	text-shadow: 0 1px #000000;
}
.navbar ul ul li a:hover{
	text-decoration: underline;
}
.navbar ul ul li span{
	color: #ef7716;
	text-shadow: 0 1px #000000;
}

/*
==============================
	1.3 Top content
==============================
*/

.banners a{
	font-family: 'Open Sans Condensed', sans-serif;
	color: #ffffff;
	font-size: 18px;
	line-height: 30px;
	text-shadow: 0 -1px #111111;
}
.right-banner a{
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	text-shadow: 0 2px #333333;
	letter-spacing: normal;
}
.top5, .top5 a{
	font-family: 'Open Sans', sans-serif;
}
.top5-title{
	color: #2b292b;
	font-size: 24px;
	line-height: 26px;
	font-weight: 700;
}
.top5-title span{
	color: #c1470f;
}
.top5 li a{
	color: #ffffff;
	font-size: 12px;
	letter-spacing: normal;
}
.top5 li span{
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 -1px #111111;
}
.top-categories li{
	text-align: center;
}
.top-categories li a{
	color: #313131;
}
.top-categories li a:hover{
	color: #c1470f;
}

/*
==============================
	1.4 Main content
==============================
*/

.section-title h2{
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
}
header, header a{
	color: #ffffff;
}
header a:hover{
	color: #ffffff;
	text-decoration: underline;
}
header .subtitle{
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
}
header .more{
	font-size: 12px;
	font-weight: 400;
	text-align: right;
}
.two-columns article{
	width: 300px;
	margin-right: 40px;
	border-radius: 3px;
	box-shadow: 0 2px 3px #bbbbbb;
	float: left;
}
.two-columns img{
	width: 300px;
	height: 176px;
	border-radius: 3px;
}
.two-columns article span{
	color: #000000;
	font-size: 14px;
}
.two-columns article p{
	color: #484547;
	font-size: 12px;
	font-weight: 300;
}
.two-columns article a{
	color: #ffffff;
	font-size: 12px;
	font-weight: 300;
	text-decoration: none;
	text-align: center;
}
.two-columns article h3{
	color: #000000;
	font-size: 14px;
}
.three-columns article a{
	color: #444e66;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/*
==============================
	1.5 Sidebar
==============================
*/

.newsletter span, .all-about span{
	color: #3e485e;
	font-weight: 300;
	font-size: 18px;
	text-align: left;
}
.newsletter p{
	color: #7f7f7f;
	font-family: 'Nobile-Light';
	font-size: 14px;
	text-align: justify;
}
.newsletter input[type=text]{
	color: #484547;
	font-family: 'Nobile';
	font-size: 14px;
	line-height: 26px;
	text-align: center;
}
.all-about a{
	color: #3e485e;
	font-family: 'Nobile';
	text-decoration: none;
	letter-spacing: -1px;
}
.tutorials span{
	font-size: 18px;
	color: #ffffff;
	font-weight: 300;
}
.tutorials a{
	font-size: 18px;
	font-family: 'Nobile';
	color: #ffffff;
	text-decoration: none
}


/*
==============================
	1.6 Footer
==============================
*/

.mobile-wrapper div a{
	color: #ffffff;
	font-size: 14px;
	font-family: 'Nobile';
	text-decoration: none;
}
.mobile-wrapper div a span{
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	line-height: 12px;
}

.footer-wrapper span{
	color: #f7f7f7;
	font-family: 'Nobile-Light';
	font-size: 18px;
	text-align: center; 
}
.footer-wrapper a{
	color: #ffffff;
	text-decoration: none;
}
.footer-wrapper a:hover{
	text-decoration: underline;
}
.footer-wrapper li{
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px; 
}
.copyright-wrapper .links{
	color: #ffffff;
	font-size: 12px;
	text-align: right;
}
.copyright-wrapper a{
	color: #ffffff;
	text-decoration: none;
}
.copyright-wrapper a:hover{
	text-decoration: underline;
}


/*
==============================
	2.0 Body
==============================
*/

body{
	background-color: #f7f7f7;
	margin: 0;
}
a, input{
	outline-style: none;
	border: none;
	border-color: transparent;
}
a, a:hover{
	text-decoration: none;
}
ul{
  padding: 0;
  margin: 0 0 10px 25px;
}
img, input{
	border: none;
}
.container {
  margin-right: auto;
  margin-left: auto;
  width: 960px;
}

.container:before, .container:after {
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}
.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

.left{
	float: left;
}
.right{
	float: right;
}
.clear{
	clear: both;
}


/*
==============================
	3.0 Header
==============================
*/

.header{
	background: url('../images/header-background.png') repeat-x;
	height: 150px;
}


/*
==============================
	3.1 Logo
==============================
*/

.logo{
	margin: 35px 0 0 10px;
	width: 231px;
	height: 99px;
}


/*
==============================
	3.2 Search
==============================
*/
.search{
	margin: 55px 0 0 70px;
	color: #fff;
}
.search-location{
	margin: 0 0 3px 25px; 
}
.search-location span{
	padding-right: 10px;
}
.search input{
	border: none;
}
.search label{
	display: inline;
}
.search input[type=radio]{
	display: none;
	outline: 0;
}
.search input[type=radio] + label{
	background: url('../images/search-radio.png') no-repeat left center;
	width: 16px;
	height: 16px;
	padding-left: 15px;
	margin-right: 15px;
	cursor: pointer;
}
.search input[type=radio]:checked + label{
	background: url('../images/search-radio-on.png') no-repeat left center;
}
.search-box{
	background: url('../images/search-input-background.png') repeat-x top left;
	height: 30px;
	margin: 0 20px;
}
.search-box .left{
	background: url('../images/search-input-left.png') no-repeat;
	width: 20px;
	height: 30px;
	margin-left: -20px;
}
.search-box .right{
	background: url('../images/search-input-right.png') no-repeat;
	width: 20px;
	height: 30px;
	margin-right: -20px;
}
.search-box input[type=text]{
	background: none;
	width: 410px;
	margin: 0 10px;
	padding: 6px 0;
}
.search-box input[type=submit]{
	background: url('../images/search-button.png') no-repeat;
	width: 13px;
	height: 12px;
	cursor: pointer;
}


/*
==============================
	4.0 Navigation
==============================
*/

.navigation{
	background: url('../images/nav-background.png') repeat-x;
	margin-top: -1px;
}
.navbar{
	margin-left: 10px;
	height: 100%;
}
.navbar ul{
	list-style: none;
	background: url('../images/nav-separator.png') no-repeat left top;
	margin: 0;
	height: 73px;
}
.navbar li{
	background: url('../images/nav-separator.png') no-repeat right top;
	float: left;
}
.navbar li:hover{
	background: url('../images/nav-background-hover.png') repeat-x;
}
.navbar li a img{
	padding: 3px 0 4px 0;
}
.navbar li a{
	padding: 19px 17px;
	text-decoration: none;	
	display: block;
}
.navbar li a span{
	display: block;
}
.navbar ul li ul{
	list-style: none;
	display: none;
	background: none;
}
.navbar ul li:hover > ul{
	background: #000000;
	opacity: 0.9;
	display: block;
	padding: 20px;
	position: absolute;
	z-index: 100;
	height: auto !important;
}
.navbar ul ul li{
	float: none;
	background: none;
	padding-bottom: 10px;
	height: auto !important;
}
.navbar ul ul li:hover{
	background: none;
}
.navbar ul ul li:last-child{
	padding-bottom: 0;
}
.navbar ul ul li a{
	padding: 0;
	display: inline-block;
}
.navbar ul ul li span{
	display: inline-block;
	padding-left: 5px;
}


/*
==============================
	5.0 Top content
==============================
*/

.site-main{
	width: 960px;
	margin: 40px auto;
}


/*
==============================
	5.1 Featured posts
==============================
*/
.featured{
	overflow: hidden;
	margin-bottom: 50px;
}
.featured .left-banners a{
	position: absolute;
	top: 115px;
	left: 0;
	padding: 0 16px 0 0;
	background: url('../images/top-bar-right.png') no-repeat top right;
}
.featured .left-banners a span{
	padding: 0 10px;
	background: #343434;
	height: 32px;
	display: block;
}
.featured .top-banner img, .featured .bottom-banner{
	width: 460px;
	height: 160px;
	border-radius: 3px;
}
.featured .left-banner{
	width: 180px;
	height: 329px;
	border-radius: 3px;
}
.banners{
	width: 670px;
	float: left;
	margin-left: 10px;
}
.left-banners{
	width: 460px;
	float: left;
}
.top-banner, .bottom-banner{
	position: relative;
}
.bottom-banner{
	margin-top: 8px;
}
.right-banner{
	width: auto;
	margin-left: 10px;
	position: relative;
}
.right-banner a{
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px 20px;
	background: none;
}


/*
==============================
	5.2 Top 5 posts
==============================
*/

.top5{
	width: 250px;
	float: right;
}
.top5 ul{
	list-style: none;
	margin: 15px 0 10px 0;
}
.top5 li{
	background: url('../images/top-button.png') no-repeat;
	margin-bottom: 15px;
	height: 27px;
}
.top5 li a{
	display: block;
	padding: 3px 0;
}
.top5 li span{
	padding: 0 20px 0 10px;
	float: left;
}
.top-categories{
	background: url('../images/top-arrow.png') no-repeat top center;
	float: left;
	margin-top: 10px;
}
.top-categories ul{
	list-style: none;
	margin-top: 40px;
}
.top-categories li{
	border: 1px solid #cbcbcb;
	border-radius: 3px;
	width: 78px;
	margin-right: 5px;
	background: none;
	float: left;
}
.top-categories li:last-child{
	margin-right: 0;
}

/*
==============================
	6.0 Main Content
==============================
*/

.content-area{
	float: left;
	width: 640px;
	margin: 0 10px;
}


/*
==============================
	6.1 Sections
==============================
*/

section h2, section h3{
	padding: 0;
	margin: 0;
}
.section-title{
	float: left;
	height: 41px;
	margin-bottom: 20px;
}
.news{
	background: url('../images/bar-background-news.png') no-repeat;
}
.reviews{
	background: url('../images/bar-background-reviews.png') no-repeat;
}
.articles{
	background: url('../images/bar-background.png') no-repeat;
}
header h2{
	padding: 7px 0 0 30px;
	width: 420px;
	float: left;
}
header .subtitle{
	display: block;
	float: left;
	padding-left: 30px;
	width: auto;
}
header .more{
	background: url('../images/bar-arrow.png') no-repeat center right;
	float: right;
	display: block;
	padding-right: 15px;
	margin: -10px 15px 0 0;
}


/*
==============================
	6.2 Articles
==============================
*/
.two-columns{
	margin-bottom: 30px;
	float: left;
}
.two-columns article{
	width: 300px;
	margin-right: 40px;
	border-radius: 3px;
	box-shadow: 0 2px 3px #bbbbbb;
	float: left;
}
.two-columns article:last-child{
	margin-right: 0;
}
.two-columns img{
	width: 300px;
	height: 175px;
	border-radius: 3px;
}
.two-columns article h3{
	padding: 15px 20px 0 20px;
}
.two-columns article p{
	padding: 0 20px;
	margin-top: 5px;
}
.two-columns article a{
	background: url('../images/read-more-button.png') no-repeat top center;
	width: 139px;
	height: 20px;
	display: block;
	margin: 15px auto 0 auto;
}
.three-columns article{
	float: left;
	margin-right: 80px;
	width: 134px;
	border-radius: 3px;
	box-shadow: 0 2px 3px #bbbbbb;
	padding: 13px;
}
.three-columns article:last-child{
	margin-right: 0;
}
.three-columns img{
	width: 134px;
	height: 100px;
	border-radius: 3px;
}
.three-columns article a{
	display: block;
	padding-top: 13px;
}


/*
==============================
	7.0 Sidebar
==============================
*/

.widget-area{
	float: left;
	width: 280px;
	margin: 0 10px;
}


/*
==============================
	7.1 Newsletter & All about
==============================
*/

.newsletter, .all-about{
	float: left;
	width: 248px;
	border: 1px solid #d7d7d7;
	border-radius: 3px;
	background-color: #ffffff;
	padding: 15px; 
	margin-bottom: 20px;
}
.newsletter p{
	display: block;
	padding-bottom: 15px;
}
.newsletter .e-mail{
	background: url('../images/newsletter-input.png') no-repeat top center;
	display: block;
	height: 33px;
	padding: 5px;
	margin-bottom: 5px;
}
.newsletter input[type=text]{
	width: 100%;
	line-height: 16px;
}
.newsletter input[type=submit]{
	width: 246px;
	height: 33px;
	cursor: pointer;
	background-image: url('images/buton_03.png');
	border: 1px solid #ba350e;
	border-bottom: 1px solid #ba350e;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	color: #ffffff;
}
.all-about a img{
	float: left;
	width: 43px;
	height: 43px;
	padding-right: 15px;
}
.all-about a{
	float: left;
	margin-top: 15px;
}


/*
==============================
	7.2 Video tutorials
==============================
*/

.tutorials{
	background-color: #d06113;
	border-radius: 3px;
	width: 250px;
	float: left;
	padding: 15px;
	margin-bottom: 22px;
}
.tutorials span{
	margin-bottom: 20px;
	display: block;
}
.tutorials a{
	display: block;
	margin-bottom: 17px;
}
.tutorials img{
	width: 246px;
	height: 92px;
	display: block;
	padding-bottom: 10px;
	position: relative;
}
.tutorials a:last-child{
	margin-bottom: 0;
}


/*
==============================
	8.0 Footer
==============================
*/

footer{
	background-color: #302e2f;
	margin-top: 40px;
}


/*
==============================
	8.1 Mobile button
==============================
*/

.mobile{
	background: url('images/footer-mobile-background.png') repeat-x top center;
	height: 65px;
	padding-bottom: 30px;
}
.mobile-wrapper{
	background: url('../images/footer-mobile-button-background.png') no-repeat top center;
	width: 966px;
	height: 65px;
	margin: 0 auto;
}
.mobile-wrapper div{
	width: 120px;
	height: 29px;
	margin: 0 auto;
	display: block;
}
.mobile-wrapper div a{
	background: url('../images/footer-mobile-icon.png') no-repeat top left;
	float: left;
	padding: 3px 0 0 40px;
	margin-top: 16px;
}
.mobile-wrapper div a img{
	width: 32px;
	height: 29px;
	opacity: 1;
	float: left;
	display: inline-block;
}
.mobile-wrapper div a span{
	opacity: 0.5;
	float: left;
}


/*
==============================
	8.2 Content
==============================
*/

.footer-wrapper{
	margin: 15px auto 0 auto;
	width: 940px;
	overflow: hidden;
}
.footer-wrapper div{
	float: left;
	width: 280px;
	margin: 0 50px 0 0;
} 
.footer-wrapper div:last-child{
	margin: 0 0 0 0;
}
.footer-wrapper span{
	background: url('../images/footer-title-underline.png') no-repeat bottom center;
	display: block;
	padding-bottom: 20px; 
}
.footer-wrapper ul{
	list-style: none;
}
.footer-wrapper a{
	display: block;
}
.footer-wrapper li{
	background: url('../images/footer-link-underline.png') no-repeat bottom left;
	padding: 8px 0 12px 0; 
}
.footer-wrapper li:last-child{
	background: none;
}


/*
==============================
	8.3 Copyright
==============================
*/

.copyright{
	background: url('../images/copyright-background.png') repeat-x;
	height: 89px;
	margin-top: 15px;
}
.copyright-wrapper{
	width: 940px;
	margin: 0 auto;
}
.copyright-wrapper .logo{
	float: left;
	margin: 7px 0 0 0;
	width: 184px;
	height: 72px;
}
.copyright-wrapper .links{
	float: right;
	margin-top: 40px;
}
.copyright-wrapper .links ul{
	list-style: none;
}
.copyright-wrapper .links li{
	display: inline-block;
}
.copyright-wrapper .links li + li:before{
	content: ' - ';
}