@import url('reset.css');

html {}

body{
	background: url(../img/main_bg.jpg) repeat top left;
	color: #FF6600;
	height: 100%;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
}


/* BASIC HEADLINE TYPOGRAPHY */
h1{font-size: 18px;}
#sidebar h2, #sub-sidebar h2{font-size: 15px; font-weight: bold;}
h2{font-size: 17px; font-weight: bold;}
h3{font-size: 15px;}
h4{font-size: 14px;}
h5{font-size: 13px; font-weight: bold; text-transform: uppercase;}
h6{font-size: 12px; font-weight: bold; text-transform: uppercase;}

/* This adjusts the weight for the Cufon Font Elements - Bold or Normal */
#grid-content h2 {font-weight: normal;}
#sidebar h2, ul.navigation li, #sidebar h3{font-weight: bold;}



/* SIDEBAR */
#sidebar{	
	width: 285px; /* Adjusts the width of the sidebar... but also where the vGrid wrapper starts */
	float: left;
	margin: 0 15px 0 50px;
	height: 100%;
	position: fixed; /* Remove this to allow extra tall sidebars that scroll (not recommended as it's not tested across browsers) */
}
	
	#sidebar .logo{
		text-align: center;
		padding: 15px 0 15px 3px; /* Adjust the spacing of your logo here. */
	}

	#sidebar .navigation{
		background: url('../img/icons/t-1.png') repeat;
	}
	
		#sidebar .navigation>li{
			background: url('../img/dot.gif') repeat-x;
			padding: 10px 0 9px 25px;
			text-transform: uppercase;
			font-size: 15px;
		}
		
			#sidebar .navigation>li>ul{
				padding-left: 15px;
				display: none;
			}
			
			#sidebar .navigation>li>ul>li{
				padding-top: 5px;
				font-size: 13px;
			}

			#sidebar .navigation li a:link,
			#sidebar .navigation li a:visited{
				color: #0066CC;
			}
						
			/* This is your highlight color! */
			#sidebar .navigation li a:hover{
				color: #666666;
			}
			
			#sidebar .navigation li.current,
			#sidebar .navigation li.current a{
				color: #666666;
			}
			
	#sidebar .box{
		background: url('../img/icons/t-1.png') repeat;
		padding: 0;
	}
	
		#sidebar .box h3{
			text-transform: uppercase;
			color: #0066CC;
			font-size: 15px;
		}
		
		#sidebar .box ul li{
			background: url('../img/dot.gif') repeat-x;
		}
			
			#sidebar .box ul li ul li{
				background: url('../img/dot.gif') repeat-x;
			}
		
		#sidebar .box form.search{
		
		}
		
			#sidebar .box form.search p{
				float: left;
				line-height: 22px;
				margin-right: 5px;
			}
			
				#sidebar .box form.search p img{
					vertical-align: middle;
				}
			
			#sidebar .box form.search input{
				font: 12px 'Helvetica Neue';
				background: #494949;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px; 
				border-radius: 5px;
				color: #FFF;
			}
			
				#sidebar .box form.search input[type=text]{
					width: auto;
				}
			
			#sidebar .box form.search input.button{
				text-transform: uppercase;
				background: #2f2f2f;
				font-size: 10px;
				padding: 4px 7px 4px 7px;
				font-weight: bold;
			}
	
	#sidebar ul.widget-area li:first-child{
		background: none;
	}
	
	#sidebar ul.widget-area>li{
		padding: 15px 15px 15px 25px;
	}
	
	#sidebar ul.widget-area>li>ul>li{
		padding: 10px 0 10px 0;
	}
	
	#sidebar .list_widget h3{
		text-transform: inherit;
	}
		
	#sidebar .list_widget .icon{
	float: left;
	width: 190px;
	margin-top: 0;
	margin-right: 30px;
	margin-bottom: 0;
	margin-left: 0;
	height: 160px;
	}
	
	#sidebar .list_widget{
		padding-bottom: 7px !important;
	}			
	
	#sidebar .social{height: 16px; overflow: hidden;}

	#sidebar .social img{
		-moz-opacity:0.4;
		opacity:0.4;
		filter: alpha(opacity=40);
	}
	
	#sidebar .social img:hover{
		-moz-opacity:1;
		opacity:1;
		filter: alpha(opacity=100);
	} 
	
	#sidebar .close_dot{
		background: url('../img/dot.gif') repeat-x;
		display: block;
		height: 1px;
	}
	
	#sidebar .anchor{	
	vertical-align: bottom;
	}




/* CONTENT AREA & VGRID */
#content{
	padding-top: 50px;
	padding-left: 350px; /* Only Needed when the sidebar is positionally fixed. This is the "left padding". The amount should match the sidebar width more or less. */
}

#grid-content {
	overflow: hidden;
	height: 0;
}



/* CSS for the vGrid Elements */
/* Visit the end of the file to see how to manually lock a specific height/width for each module */

#grid-content li{
    background: url('../img/icons/t-1.png') repeat;
	width: auto; /* was 200px originally - now this is defined by the image size */
	height: auto; /* was 200px originally - now this is defined by the image size */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	border-radius: 5px;
	padding: 10px;
	display: block;
	margin: 5px;
}

/* This next line tells the module text when to "wrap". Set this to "auto" for grids to attempt sizing themselves dynamically (not recommended) */
#grid-content .module{width: 200px;}

	#grid-content li h2,
	#grid-content li h2 a{
		color: #000;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 3px;
	}
	
	#grid-content li .module p{
		font: italic 11px/15px Georgia;		
		color: #7f7f7f;
	}
	#grid-content li img{
		display: block;
		border: 1px solid #eaeae8;
		padding: 3px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}

#grid-content li h3 {
	line-height: 1.1em;
	margin: 0;
	padding: 0;
}
#grid-content li p {
	margin: 0;
	padding: 0;
}



/* CONTENT AREA for Non-GRID PAGES */
/* Note that quite a bit of the UI and other Typographical Styling for this section is located in reset.css */

.entry-container{width: 960px;}

#entry{
	background: url('../img/icons/t-1.png') repeat;
	float: left;
	width: 580px; /* This is the width of the entry column - You'll also need to adjust the ".entry-container" and "#sub-sidebar" to make heavy changes */
	height: auto; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	border-radius: 5px;
	padding: 30px;
	display: block;
	margin: 5px;
	z-index: 2;
}

#entry.full-width{
	width: 800px; 
	height: auto; 	
}

#entry, #sub-sidebar{
	line-height: 18px;
}

#entry h1{
	font-size:26px;
	color: #444;
}

#entry h2, #entry h3, #entry h4, #entry h5, #entry h6{
	margin-top: 20px;
	color: #666;
}  

hr {
    background-color: #DDD;
    background-image: url("../img/border_w.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: medium none #DDD;
    height: 2px;
    margin-bottom: 8px;
}

#entry .section-spacer{height: 600px;}

#sub-sidebar{
	background: #FBFBFB url(../img/main_bg.jpg) repeat top left; /* Override this in quick-styles.css */
	float: left;
	width: 260px; /* was 200px originally - now this is defined by the image size */
	height: auto; 
		-webkit-border-top-right-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomright: 5px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;	
	padding: 20px;
	display: block;
	border: 1px solid #ddd;
	margin: 65px 5px 5px -5px;
	z-index: 1;
}

#entry ul li, #sub-sidebar ul li ul li {
	list-style: none;
	background: transparent url(../img/ui/bullets/silver.gif) no-repeat 0
		.2em;
	padding-left: 20px;
}

#sub-sidebar ul li ul{padding: 3px 0;}

.widget-divider{height: 20px;}


.left_col{
	float: left;
	width: 70%;
}
.right_col{float: right; width: 44%;}
.clear{margin: 10px 0 !important; clear:both;}
.superquote{clear: both; margin: 40px 0; font-size: 26px; font-style: italic; font-family: Georgia; line-height: 34px; padding-left: 20px; }


/* AD 4x4 Block (with IE hacks for padding) */
#sub-sidebar ul.no-bullets li{
	list-style-type: none;
	background: none;
    margin-left: 0;
    padding-left: 0; 
    padding-right: 5px;   
    float: left;
}

#sub-sidebar ul.no-bullets li:nth-child(2n){
    padding-right: 0px;   
}

* html #sub-sidebar ul.no-bullets li {padding-right: 3px;   ;} /* for IE6 */
*+html #sub-sidebar ul.no-bullets li {padding-right: 3px;   ;} /* for IE7 */
#sub-sidebar ul.no-bullets li{padding-right: 3px\0/;} /* for IE8, going last */






/* !!! CSS CUSTOMIZATIONS !!!!!!!!!!!!!!!!!!!!! */
/* !!! CSS CUSTOMIZATIONS !!!!!!!!!!!!!!!!!!!!! */
/* !!! CSS CUSTOMIZATIONS !!!!!!!!!!!!!!!!!!!!! */
/* !!! These are mostly for advanced users... play around with these at your own peril, but have fun! !!!!!!!!!!!!!!!!!!!!! */

/* CSS Width / Height LOCKDOWN - Uncomment this when you want all grid images to be cropped uniformly. 
#grid-content li img{
	width: 200px !important; 
	height: 130px !important; 
	overflow: hidden;
	}
*/

/* CSS Width / Height LOCKDOWN - Uncomment this when you want all grid titles/descriptions to be cropped uniformly */
#grid-content .module {
	height: 49px !important;
	width: 300px; /* This can also be set to "200px !important" if you want to override any inline re-scaling. */
	overflow: hidden;
	}

	
	/* NO-TEXT Version - Apply this ".no-text" class to your "grid-content LI's" to use the "No-Text" version of the grids. */
#grid-content li.no-text .module {
	visibility: hidden !important; 
	height: 0px !important; 
	width: 0px !important; 
	padding: 0px !important; 
	margin: 0px !important; 
	overflow: hidden !important;
}

/* This is for the AJAX loader */
#loading{
	position: absolute;
	z-index: 999;
	width: 100px;
	text-align: center;
	left:55%;
	padding: 5px;
	background: #FFF;
	top: 40%;
	display: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	border: 1px solid #eaeae8;
	text-transform: uppercase;
	font-size: 11px;
}