/*
Theme Name: Joolu Template Store
Theme URI: http://joolu.com/
Description: Joolu's Theme store design.
Author: Jonathan
Author URI: http://joolu.com
Version: 4.0
*/

/*
Custom Field Settings.

ThemeDemo = This is the keyword for the Demo URL.
DocuURL   = This is the keyword for the Document URL.
BuyURL    = Use This keyword on the custom field for the Shopping cart URL.
Download  = Use This keyword on the custom field for the Download URL.
ThemeKeyword  = Custom Field for the Keywords.
ThemeDesc = Small description of theme.
*/


/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Bitter:400,700,400italic);

/* ================== Default Style ==================  */ 
h1,h2,h3,h4,h5,h6{
	margin-bottom:20px;
	font-weight:normal; 
	color:#12212f; 
	text-transform:capitalize; 
	letter-spacing:1px; 
	font-family: 'Bitter', serif;
	}
	
h1{ font-size: 30px; }
h2{ font-size: 25px; }
h3{ font-size: 20px; }
h4{ font-size: 18px; }
h5{ font-size: 16px; }
h6{ font-size: 13px; }

	
p{ 	color:#666666;
	line-height:1.6em;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:20px;
	}

a{ text-decoration:none; font-family:Arial, Helvetica, sans-serif}


/* ================== Style Classes ==================  */
.button { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.button{ background:#12212f; color:#FFFFFF; padding:15px; font-family: 'Bitter', serif; }
.button:hover{ background:#f8ca23; }
.alignleft { float: left; margin-right:20px; margin-bottom:10px; }
.alignright { float: right; margin-left:20px; margin-bottom:10px; }
.aligncenter {
	margin-left: auto;
	margin-right: auto;
	margin-bottom:10px;
	display: block;
	clear: both;
}





/* ================== Header Style ==================  */
.header{
	background:url(images/header.jpg) #f6d635 no-repeat left;
	width:100%;
	border-bottom:3px solid #12212f;
	}
	
.header h1{ font-size:40px;}
.header h2{font-size:30px; }


/* ================== Logo ==================  margin-left:15px; margin-right:15px; */
.logo{ width:200px; height:100px; float:left;  } 

/* ================== Nav Container ==================  */
nav{ float:right; margin-right:15px; margin-left:15px; padding-top:50px; display:inline }




/* ================== Welcome message ==================  */
.welcome h1{
	font-size:29px;
	line-height:1.4em;
	text-align:center;
	margin-bottom:5px;
	text-align:center;
	}
.welcome h2{
	font-size:20px;
	text-align:center;
	}
	
.welcome .button{ text-align:center; }


/* ================== Features ==================  */
.features{
	text-align:center;
	margin-bottom:50px;
	}
	
.features img{
	margin-bottom:20px;
	}
	
.features h3{
	font-size:25px;
	}
	
.features p{
	color:#666666;
	line-height:2em;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	}
	






/* ================== Footer ==================  */
#footer{
	width:100%;
	background:#12212f;
	padding-top:50px;
	padding-bottom:50px;
	}
	
#footer h4{
	font-size:25px;
	color:#FFFFFF;
	text-transform:uppercase;
	}
	
#footer p{
	color:#bfccd9;
	line-height:1.9em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	}
	
#footer p a{ color:#f8ca23; size:12px; }
#footer p a:hover{ color:#FFFFFF; }
	
#footer a{ color:#bfccd9; }
#footer a:hover{ color:#FFFFFF; }
	
#footer li{
	margin-bottom:15px;
	}

#footer li span{
	font-size:14px;
	padding-left:40px;
	padding-bottom:10px;
	padding-top:10px;
	}



/* ================== Themes Gallery ==================  */
.themes{ margin-bottom:50px; height:350px; }
.themes p{
	color:#666666;
	line-height:1.4em;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin-bottom:30px;
	}
.themes img{margin-bottom:20px; height:150px; width:280px;}
.themes h4{ text-align:center; }


/* ================== Theme Price Label ==================  */
.price-container{ height:150px; width:280px; position:absolute;}
.price-container-2{ width:450px; height:250px; position:absolute;}
.price-tag{ position:absolute; bottom:0; right:0; background:#f8ca23; padding:10px; }
.price-tag h5{ margin:0px; color:#FFFFFF; font-size:12px; font-weight:bold; }
.price-tag h3{ margin:0px; color:#FFFFFF; font-size:18px; }




/* ================== Theme Page ==================  */
#theme-title h1{
	font-size:29px;
	line-height:1.4em;
	}
	
#theme-title p{
	color:#666666;
	line-height:1.8em;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:0px;
	}
	
#theme-title a{ font-size:13px; margin-top:30px; }

#theme-title img{ width:450px; height:250px; }






/* ================== Blog Posts ==================  */
#blog-container{
	width:690px;
	margin-left:15px;
	margin-right:15px;
	float:left;
	}
	
#blog-container span{
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:0px;
	margin-bottom:30px;
	color:#999999;
	}
	
#blog-container h2{
	margin-bottom:100px;
	font-size:35px;
	}
	
#blog-container h3{
	margin-bottom:5px;
	font-size:25px;
	}
	

#blog-container p{
	margin-top:30px;
	margin-bottom:100px;
	}
	
#blog-container a{ color:#12212f; font-family: 'Bitter', serif; }
#blog-container a:hover{ text-decoration:underline; }




/* ================== Single Post Container ==================  */
#single-container{
	width:690px;
	margin-left:15px;
	margin-right:15px;
	float:left;
	}
	
#post-date{
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:0px;
	margin-bottom:50px;
	color:#999999;
	}

#single-title{ margin-bottom:5px; font-size:25px; }
	
	
	
/* ================== Blog Widget ==================  */
#widget-container{
	width:210px;
	margin-left:15px;
	margin-right:15px;
	float:left;
	font-size:13px;
	}
	
.widget-box{ margin-bottom:70px; }
	
#widget-container ul{
	list-style:square inside;
	list-style:url(images/list-arrow.png) inside;
	}
	
#widget-container li{
	padding-left:10px;
	padding-bottom:5px;
	padding-top:5px;
	border-bottom:1px dotted #999999;
	text-transform:uppercase;
	font-size:10px;
	}
	
#widget-container h4{
	font-weight:normal;
	font-size:18px;
	}
	
#widget-container a{
	font-family:Arial, Helvetica, sans-serif;
	color:#12212f;
	line-height:1.6em;
	}
	
#widget-container p{
	font-size:12px;
	line-height:1.6em;
	}
	
#widget-container a:hover{	text-decoration:underline; }




/* ================== Page and Documents ==================  */
.page-title{
	font-size:29px;
	line-height:1.4em;
	text-align:center;
	}
	


/* ================== Pagination ==================  */

#pagination-container{	width:600px; margin-left:15px; margin-right:15px; float:left; }
.pagination { clear:both; padding:20px 0; position:relative; font-size:11px; line-height:13px; text-shadow:none; margin:0 auto;}
.pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#707070; background: #DADADA; font-weight:bold;}
.pagination a:hover{color:#FFFFFF; background: #555555; }
.pagination .current{padding:6px 9px 5px 9px; background: #555555; color:#FFFFFF; }





/* ================== Typography ==================  */
.entry img{
  -webkit-box-shadow: 1px 1px 5px 1px #555555;
  box-shadow: 1px 1px 5px 1px #555555;
 }
.entry ul { margin-bottom:30px; font-family:Arial, Helvetica, sans-serif; list-style:url(images/list-arrow.png) inside; }
.entry li { margin-bottom:5px; margin-top:5px; font-size:14px; color:#666666; }
.entry a{ color:#333333; font-weight:bold; font-size:13px; }
.entry a:hover{ text-decoration:underline; }
.entry .su-spoiler-title{ font-family:Arial, Helvetica, sans-serif; color:#555555; font-size:12px; }

.entry .button{ color:#ffffff; }
.entry .button:hover{ color:#ffffff; text-decoration:none; }

/* Affiliate Banner Generator */

.forms{ width:520px; margin:0 auto; }

.forms input{ 
	padding:10px;
	padding-top:13px;
	padding-bottom:13px;
	width:300px; 
	margin-bottom:10px;
	margin-left:20px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #d8d8d8;
	-webkit-box-shadow: inset -1px 1px -1px 5px #EEEEEE;
	-moz-box-shadow:    inset -1px 1px -1px 5px #EEEEEE;
	box-shadow:         inset -1px 1px -1px 5px #EEEEEE;
	text-align:center;
	color:#a1a1a1;
	font-weight:bold;
	background:#f4f4f4;
	}
	
.forms button{ border:none; cursor:pointer; margin-top:30px; }

.forms p{ font-size:10px; text-align:left; margin-left:20px; }


.aff_banner{ margin-bottom:40px; text-align:center; }
.aff_banner img{ margin-bottom:20px; }
.aff_banner input{ 
	padding:10px;
	padding-top:13px;
	padding-bottom:13px;
	width:250px; 
	margin-bottom:10px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #d8d8d8;
	-webkit-box-shadow: inset -1px 1px -1px 5px #EEEEEE;
	-moz-box-shadow:    inset -1px 1px -1px 5px #EEEEEE;
	box-shadow:         inset -1px 1px -1px 5px #EEEEEE;
	text-align:center;
	color:#a1a1a1;
	font-weight:bold;
	background:#f4f4f4;
	 }

/* Recommended WordPress Hosting */
.host-table{padding:30px 0px 15px 15px;background:#e4e4e4;margin:30px 0px;width:960px;font-family: 'Open sans', sans-serif;line-height: 160%;}
.host-box{width:280px;background:#fff;float:left;margin-right:30px}
.host-box:hover{-webkit-box-shadow:0px 0px 8px 2px #ccc;box-shadow:0px 0px 8px 2px #ccc}
.host-box p{margin:0px 0px;padding:0px 0px}
.host-box p{display: block;color:#fff; margin:0;padding:0;font-family:'Open sans', sans-serif;color:#fff;}
.host-top{height:120px;position:relative}
.host-top .rank{font-size:100px;font-weight:900;position:absolute;left:30px;bottom:-12px;line-height:100%}
.host-name{color:#fff;}
.host-name{padding:20px 20px;background:#333;}
.host-name{color:#fff}
.host-name h2{margin:0px;padding:0px;font-size:24px; font-family: 'Open sans', sans-serif;font-weight:bold;color:#fff;}
.host-name p{font-size: 14px;font-style: normal; font-weight: normal;}
.host-price{padding:30px 20px;background:#555;color:#fff}


.price-left{width:120px;float:left;font-size:56px; font-family: 'Open sans', sans-serif;font-weight:normal; }
.price-left span{font-size:22px;display:block; height: 20px;}
.price-left p{margin:-10px 0px 0px 20px;padding:0px;font-size:56px;height: 20px;line-height:20px;font-style: normal;}
.price-right{float:left; font-family: 'Open sans', sans-serif;}
.price-right p{font-size:20px;margin-left:20px;font-weight: normal;}

.host-info h3{color:#222;font-weight:700;font-size:20px;padding:20px 0px 10px 20px;margin:0px}
span.subline{height:3px;width:50px;background:#222;display:block;margin:0px 0px 20px 20px}
ul.host-features{list-style:none;margin:0px 20px}
ul.host-features li{border-bottom:1px solid #ddd;padding-bottom:8px;padding-left:20px;margin-bottom:8px;background:url(http://joolu.com/wp-content/themes/joolu_v4/images/check.png) 0px 5px no-repeat;color:#888}
ul.host-features li.wpl{background:url(http://joolu.com/wp-content/themes/joolu_v4/images/wp.jpg)  0px 5px no-repeat}
.host-link{padding:20px 0px 30px 0px}
.host-link span{display:block;height:40px;line-height:40px;text-align:center;text- transform:uppercase; width:120px; margin:0px auto; color:#fff;background:#333;font-weight:600}
.motion .rank{color:#c72222}
.motion .host-name{background:#c72222}
.motion .host-price, .motion span.subline, .motion .host-link span{background:#ff2b2b}
.motion .host-top{background:#fff url(http://joolu.com/wp-content/themes/joolu_v4/images/motion.jpg) right bottom no-repeat}
.motion .host-link span:hover{background:#c72222}
.hub .rank{color:#dea658}
.hub .host-name{background:#dea658}
.hub .host-price, .hub span.subline, .hub .host-link span{background:#fcbc64}
.hub .host-top{background:#fff url(http://joolu.com/wp-content/themes/joolu_v4/images/hub.jpg) right bottom no-repeat}
.hub .host-link span:hover{background:#dea658}

.bluehost .rank{color:#4a6891}
.bluehost .host-name{background:#4a6891}
.bluehost .host-price, .bluehost span.subline, .bluehost .host-link span{background:#587bac}
.bluehost .host-top{background:#fff url(http://joolu.com/wp-content/themes/joolu_v4/images/blue.jpg) right bottom no-repeat}
.bluehost .host-link span:hover{background:#4a6891}.popular{margin:30px 0px}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:before,.clearfix:after{content:"\0020";display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}