/*  ---------------- YellowJackets ----------------
Copyright Lara Swanson - www.laraswanson.net
CSS for Homepage template and Secondary Page Template
    ---------------- YellowJackets ---------------- */

/*  ------------------ Typography ------------------ */
body {	background-color: #000;
		font-family: Arial, Verdana, sans-serif;				
		font-size: 14px; 
		line-height: 1.7em; 
		color: #fff; 											/* Main text (not links) color */
		background-image: url(images/bg.jpg); 					/* Background gradient for entire page */
		}
		
h1 { 	font-size: 1.5em; margin: 0 0 0.5em; 
		float: left; text-indent: -9999px; 
		background-image: url(images/jackets.gif); 				/* Main logo image */
		width: 530px; height: 200px; 							/* Size of main logo image */
		}
		
h2 {	font-size: 1.3em; margin: 2em 0 0.5em; 
		border-bottom: 1px #a6a6a6 solid; 						/* Border below secondary headers */
		}
		
h3 { 	font-size: 1.1em; margin: 2em 0 0.5em; 
		border-bottom: 1px #a6a6a6 solid; 						/* Border below tertiary headers */
		}
		
a, strong { color: #ffcc00; }									/* Link color and bold color */
p { margin: 1em 0; }											/* Paragraph spacing - for advanced users only */

#right ul { list-style-type: none; margin: 0px; padding: 0px; }	/* This is to make sure list items in the right column aren't bulleted */
	#right ul li { margin: 10px 0px; padding: 0px; }
	#right ul li img { border: 0px #000 solid; }				/* This ensures the social media buttons won't have a border around them */


/* --------------------- Layout -------------------- */
#wrapper { width: 960px; margin: 0px auto; }
#header { clear: both; margin-top: 20px; }						/* Layout for main header, including logo and navigation */
#content { clear: both; }										/* Layout for main content area, including slider and columns */
	#left { float: left; width: 640px; }						/* Left column */
	#right { float: right; width: 240px; }						/* Right column */
#slider { margin: 20px 0px 0px; padding: 0px; clear: both; float: left; }	/* Slider */


/*  ----- Fix Margins and Alignment for Images ----- */
#content img.right { margin: 5px 0px 5px 5px; border: 0px #000 solid; float: right; }
#content img.left { margin: 5px 5px 5px 0px; border: 0px #000 solid; float: left; }


/*  ----------------- Navigation ------------------ */
#nav { list-style-type: none; margin: 30px 0px 0px; padding: 0px; width: 310px; float: right; font-size: 20px; }
#nav li.main { padding: 5px 0px 5px 5px; margin: 5px 0px 5px 5px; width: 90px; float: left; text-align: center; }
#nav li.social { padding: 5px 0px 5px 5px; margin: 5px 0px 5px 5px; width: 50px; float: left; text-align: center; }
#nav li img { border: 0px #000 solid; }
#nav li a:link, #nav li a:visited { display: block; text-decoration: none; color: #a6a6a6; }
	#nav li a.current, #nav li a:hover { color: #ffcc00; }
	
	
/*  ----------------- Easy Slider ------------------ */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
        margin:0;
        padding:0;
        display:block;
        overflow:hidden;
        text-indent:-8000px;
        }
#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider img { border: 0px #000 solid; }
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:960px;
	height:300px;
	overflow:hidden; 
	}	
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	z-index:1000;
	}	
#nextBtn, #slider1next{ 
	left:640px;
	}														
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
	display:block;
	position:relative;
	width:30px;
	height:77px;
	background:url(js/images/btn_prev.gif) no-repeat 0 0;	
	}	
#nextBtn a, #slider1next a{ 
	background:url(js/images/btn_next.gif) no-repeat 0 0;	
	}	
	
/* numeric controls */	

ol#controls{
	margin:1em 0;
	padding:0;
	height:28px;	
	}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
	}
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#DAF3F8;
	color:#555;
	padding:0 10px;
	text-decoration:none;
	}
ol#controls li.current a{
	background:#5DC9E1;
	color:#fff;
	}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}