/* Multiple Backgrounds on body can be set with comma seperated list */
/* See: http://www.css3.info/preview/multiple-backgrounds/ */
/* STRUCTURE */
/*
The 'Mobile First' concept is applied.
All sections wrapped in '.wrapper-outer' which basically spans the full page.
These are then divided into sub classes:
.wrapper-header
.wrapper-nav-main
.wrapper-main
.wrapper-nav-footer
Each of these has within it '.wrapper-inner' to give the padding.
#NavSubMobile - only visible with smaller screen sizes.  Ensures the sub-navigation appears above the content.
*/

/* MAIN CONTAINERS -------------- */

/* Force iOS to NOT increase the font size when going from portrait to landscape mode.
Wrapped here just to traget iOS */
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
	html {
		-webkit-text-size-adjust: none;
	}
}

html{
	background-color:#fff;
}
body {
	font: normal 95%/1.5 'Droid Sans', Arial, Helvetica, sans-serif;
}

#PageWrapper{
	background-image:url(../images/main-bgd.jpg);
}

/* SECTION WRAPPERS ------------- */

.wrapper-outer {
}
.wrapper-inner {
	/* Overall max width for content area */
	max-width:1050px;
	margin:0 auto;
	width: 90%;
}
.wrapper-main {
	padding-top:2em;
}
.wrapper-quick-links .wrapper-inner,
.wrapper-search .wrapper-inner,
.wrapper-nav-main .wrapper-inner,
.wrapper-nav-footer .wrapper-inner{
	width:100%;
}

.desktop-only{
	display:none;
}
.mobile-only{
	display:block;
}

/* MISCELLANEOUS ---------------- */
#PrintLogo{
	display:none;
}
a{
	outline:none;
	color:#333;
	cursor:pointer;
}

/* HEADER ------------------ */

.wrapper-header{
	background:#fff url(../images/header-bgd.jpg);
}
#Logo{
	margin:5px auto;
	text-align:center;
}
#Logo img{
	width:140px;
}
#Logo-png{
	display:block;
}
#Logo-gif{
	display:none;
}

/* SLIDER ----------------- */

.wrapper-slider{
	padding-top:20px;
	background:#e0e0e0;
}
.wrapper-slider h2{
	margin-left:20px;
	color:#fff;
}

/* MOBILE QUICK LINKS ------------------ */

.quick-links{
	background:#000;
}
.quick-links ul{
	width:98%;
	margin:0 auto;
}
.quick-links li{
	float:left;
	width:33%;
	text-align:center;
}
.quick-links.nav li a{
	display:block;
	text-decoration:none;
}
.quick-links.nav li a span{
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3.25em;
	font-size: 0.95em;
	text-transform:uppercase;
	color:#fff;
	padding-left:30px;
}
.quick-links li.icon-home a span{
	background-image:url(../images/icons/home_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-menu a span{
	background-image:url(../images/icons/arrow_down_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-search a span{
	background-image:url(../images/icons/magnifier_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-top a span{
	background-image:url(../images/icons/arrow_up_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-back a span{
	background-image:url(../images/icons/arrow_left_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-menu-footer a span{
	background-image:url(../images/icons/arrow_up_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}

/* MAIN NAVIGATION (TOP) ---------- */

.wrapper-nav-main{
	background:#333;
}
#NavMain{
	display:none;
	/* Fix jumpiness with JQuery toggle by setting width */
	width:100%;
}
#NavMain.nav,
#NavMain.nav ul{
	margin:0 auto;
}
/* First link will be 'home' which we don't want on mobile view as already have primary home button */
#NavMain li.first{
	display:none;
}
#NavMain.nav li {
	list-style-type:none;
	background:#333;
}
#NavMain.nav li a{
	display:block;
	width:90%;
	margin:0 auto;
	text-decoration:none;
}
#NavMain.nav li a span{
	display:block;
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3.5em;
	font-size: 0.95em;
	text-transform:uppercase;
	color:#fff;
	padding-left:35px;
	background:url(../images/icons/video_play_12.png) no-repeat left center;
}
#NavMain.nav li:hover{
	background-color:#666;
}
#NavMain.nav li:hover a{
	color:#fff;
}
#NavMain.nav li a.current,
#NavMain.nav li a.section{
	color:#fff;
}
#NavMain.nav li.current,
#NavMain.nav li.section{
	background-color:#4f6908;
}

/* SEARCH ---------- */

#SearchBox{
	/* displayed via js toggle */
	display:none;
	background:#000;
	width:100%;
	margin:0 auto;
}

/* BREADCRUMBS -------------- */

#Breadcrumbs{
	font-size:1em;
	margin:0.3em 0 0.5em 0;
}
#Breadcrumbs p{
	width:100%;
	display:block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
	margin:0;
}
#Breadcrumbs a{
	line-height:1.4em;
	font-weight:bold;
	padding-right:4px;
}

/* SIDEBAR ------------------- */
/* Ths sidebar navigation is hidden on the default mobile view. Instead the navigation
in the NavSubMobile block becomes visible which is mobile friendly. */
#SideBar{
	margin-top:2em;
}
#SideBar .nav{
	display:none;
}
#SideBar .block ul,
#SideBar .block li{
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
}
#SideBar .block a{
	display:block;
	text-decoration:none;
	line-height:2.4em;
	border-bottom:solid 1px #ccc;
}

/* SUB NAVIGATION ------------------- */
/* Only visible with second level items and only on mobile view */

/* Visibility toggled with JS */
#NavSubMobile .nav ul{
	display:none;
	margin:0 auto;
}
#NavSubMobile .nav ul li{
	list-style-type:none;
	border-bottom:solid 1px #ccc;
}
#NavSubMobile .nav ul li a{
	display:block;
	text-decoration:none;
}
#NavSubMobile .nav ul li a span{
	display:block;
	color:#232428;
	line-height:3em;
	text-decoration:none;
	font-family: 'Oswald', arial, sans-serif;
	font-weight:400;
	line-height:3em;
	font-size: 1.1em;
	padding-left:35px;
	background:url(../images/icons/video_play_12.png) no-repeat left center;
}
#NavSubMobile .nav ul li li a{
	padding:0.25em 35px;
}
#NavSubMobile h3{
	margin:0;
	font-family: 'Oswald', arial, sans-serif;
	font-weight:400;
	font-size:1.15em;
	line-height:3em;
	letter-spacing:0 !important;
	background:url(../images/icons/arrow_down_24.png) no-repeat left center;
	border-bottom:solid 1px #ccc;
	padding-left:35px;
	cursor:pointer;
}

/* HOME EXTRA  --------------------- */

.three-column img{
	max-width:254px !important;
}

/* TAG SUMMARY --------------------- */

.wrapper-tag-summary{
	background:#8fa32b;
}
.wrapper-tag-summary .wrapper-inner{
	margin:0 auto;
}
#TagSummary{
	/* Fix jumpiness with JQuery toggle by setting width */
	display:none;
	width:100%;
	padding:10px 0px;
	margin-bottom:1em;
}
#TagSummary ul{
	margin:0 !important;
	padding:0 !important;
}
#TagSummary #TagColLeft{
	float:left;
	width:44%;
	margin-left:20px;
}
#TagSummary #TagColRight{
	float:right;
	width:44%;
	margin-right:10px;
}
#TagSummary ul li{
	margin:0 8% 0 0;
	list-style-type:none;
	line-height:1.8em;
	padding:0.5em 0;
}
#TagSummary ul li a{
	width:100%;
	display:block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
	text-decoration:none;
	color:#fff;
}
.js-toggle-tags{
	color:#fff;
	cursor:pointer;
	font-size:1.1em;
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	padding:0.4em 0 0.4em 0;
	background-repeat:no-repeat;
	background-position:left center;
	background-image:url(../images/icons/arrow_down_24.png);
	text-indent:35px;
}
.js-toggle-tags .hide{
	display:none;
}
.js-toggle-tags .show{
	display:inline;
}
.tag-summary-fixed{
	border:solid 1px #ccc;
}
.tag-summary-fixed a{ 
	color:#333 !important;
}

/* FOOTER NAVIGATION -------------------- */

#NavFooter{
	width:90%;
	margin:0 auto;
	text-align:center;
	color:#fff;
	padding:2em 0;
	font-family: 'Oswald', sans-serif;
	font-size:0.95em;
}
#NavFooter .nav ul{
	padding:0.2em 0;
	width:100%;
}
#NavFooter .nav li{
	display:inline;
	margin: 0 10px;
}
#NavFooter .nav li a{
	/* ie6 needs to have inlin applied here too. Others only need it on the li */
	display:inline;
	text-transform:uppercase;
	text-decoration:none;
	
}
#NavFooter small,
#NavFooter small a{
	color:#ddd !important;
}

/* MOBILE FOOTER MENU ---------- */
/* Toggled with JS */

#NavFooterMobile{
	display:none;
	/* Fix jumpiness with JQuery toggle by setting width */
	width:100%;
}
#NavFooterMobile.nav,
#NavFooterMobile.nav ul{
	margin:0 auto;
}
/* First link will be 'home' which we don't want on mobile view as already have primary home button */
#NavFooterMobile li.first{
	display:none;
}
#NavFooterMobile.nav li {
	list-style-type:none;
	background:#333;
}
#NavFooterMobile.nav li a{
	display:block;
	width:90%;
	margin:0 auto;
	text-decoration:none;
}
#NavFooterMobile.nav li a span{
	display:block;
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3.5em;
	font-size: 0.95em;
	text-transform:uppercase;
	color:#fff;
	padding-left:35px;
	background:url(../images/icons/video_play_12.png) no-repeat left center;
}
#NavFooterMobile.nav li:hover{
	background-color:#666;
}
#NavFooterMobile.nav li:hover a{
	color:#fff;
}
#NavFooterMobile.nav li a.current,
#NavFooterMobile.nav li a.section{
	color:#fff;
}
#NavFooterMobile.nav li.current,
#NavFooterMobile.nav li.section{
	background-color:#4f6908;
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 321px)
{
	
}
/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 481px)
{
	#Main {
		width:90%;
		margin:0 auto;
	}
	
	/* HEADER ---------- */
	
	.header{
		width:90%;
		margin:0 auto;
	}
	
	/* TAG SUMMARY ----------- */
	
	.wrapper-tag-summary .wrapper-inner{
		width:80%;
	}
	
	/* TOP NAVIGATION ---------- */
	
	#NavMain{
		margin:0 auto;
	}
	#NavMain.nav ul li a{
		width:80%;
	}
	#NavSubMobile{
		width:90%;
		margin:0 auto;
	}
	
	/* SLIDER ----------------- */
	
	.flexslider-container{
		width:90%;
		margin:0 auto;
	}
	
	/* BOTTOM NAV ------------------ */
	
	#NavFooter {
		width:90%;
		margin:0 auto;
	}
	#NavFooter img{
		padding: 0 5px;
	}
}
/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 769px)
{
	.desktop-only{	
		display:block;
	}
	.mobile-only{
		/* ie seems to need the important declaration here */
		display:none !important;
	}
	.wrapper-nav-main .wrapper-inner{
		width:90%;
	}
	
	/* HEADER ------------- */
	
	.wrapper-header{
		background:#fff url(../images/header-bgd.jpg);
		height:150px;
	}
	#HeaderStrip{
		background:url(../images/header-strip.png) repeat-x center 110px;
	}
	
	#Main{
		padding:1em 0 3em 0;
	}
	#Main .narrow{
		float:left;
		width:66%;
	}
	
	#Logo{
		position:relative; 
		z-index:2; /* relative positioning and z-index for IE to bring to top layer */
		margin:5px 0 0 0;
		text-align:left;
		
	}
	#Logo img{
		width:auto;
	}
	
	/* TOP NAVIGATION ---------- */
	
	.wrapper-nav-main{
		background:#333;
	}
	#NavMain{
		display:block;
		width:90%;
		background:#333;
	}
	/* First link will be 'home' which we DO want on desktop view (on mobile view we already have primary home button */
	#NavMain li.first{
		display:block;
	}
	#NavMain.nav ul li {
		float:left;
	}
	#NavMain.nav ul li.last {
		border-right:0;
	}
	#NavMain.nav ul li a{
		width:auto;
		line-height:1.9em;
		font-size: 1.0em;
		padding:0 20px;
	}
	#NavMain.nav ul li a span{
		padding-left:0;
		background-image:none;
	}
	
	/* SEARCH ---------- */
	
	/* Need to apply the z-index for containers as well for IE7 */
	.wrapper-search{
		position:relative;
		z-index:3;
		margin:0 auto;
	}
	.wrapper-search .wrapper-inner{
		position:relative;
		z-index:2;
		width:90%;
	}
	#SearchBox{
		display:block;
		position:absolute;
		right:0;
		top:-43px;
		z-index:1;
		background:transparent;
		width:400px;
	}
	
	/* SIDEBAR ----------------- */
	
	#SideBar{
		float:right;
		width:28%;
		margin-top:1em;
	}
	
	/* SIDEBAR NAV ----------------- */
	
	#SideBar .nav{
		display:block;
		width:100%;
		margin-bottom:1.5em;
	}
	#SideBar .nav ul,
	#SideBar .nav ul li{
		width:100%;
		padding:0;
		margin:0;
	}
	#SideBar .nav ul li{
		border-left:none;
		border-right:none;
		border-top:none;
		margin-bottom:3px;
		background-color:transparent;
		list-style-type:none;
		border-bottom:solid 1px #aaa;
	}
	#SideBar .nav ul li li{
		border-bottom:none;
	}
	#SideBar .nav ul li a{
		display:block;
		padding:6px 0;
		text-align:left;
		text-decoration:none;
		line-height:1.3em;
		font-size:1.1em;
		font-weight:200;
	}
	#SideBar .nav ul li a:hover{
		color:#95381c;
		margin-left:15px;
	}
	#SideBar .nav ul li li a{
		margin-left:20px;
		border:none;
		font-size:0.9em;
		border-bottom:solid 1px #ccc;
	}
	#SideBar .nav ul li li.last a{
		border-bottom:0;
	}
	#SideBar .nav a.current:hover{
		margin-left:0;
		color:#8fa32b;
	}
	#SideBar .nav a.current::before {
		content: "\00BB \0020"; /*Hexadecimal for Unicode Right Angle Quote and Space */
		display: inline;
		font-size:1.5em;
		color:#95381c;
	}
	
	/* SUB NAVIGATION -------------- */
	
	#NavSubMobile .nav{
		display:none;
	}
	
	/* BOTTOM NAV ---------------------- */
	
	#NavFooter .nav li{
		display:inline;
	}
	#NavFooter .nav a{
		color:#fff;
	}
	#NavFooter .nav a.current{
		color:#8fa32b !important;
	}
	
	/* COLUMNS ------------------ */
	
	/* TWO COLUMN */
	
	.two-column{
		width: 100%;
		padding:0;
		margin: 0 auto;
	}
	.two-column .two-column-left{
		float:left;
		width:45%;
		padding:0;
	}
	.two-column .two-column-right{
		float:right;
		width:45%;
		padding:0;
	}
	.two-column img{
		max-width:95% !important;
	}
	
	/* THREE COLUMN */
	
	.three-column{
		width: 100%;
		padding:0 0 0.5em 0;
		margin: 0 auto;
	}
	.three-column .three-column-left{
		float:left;
		width:28.1%;
		padding:0 0 0.5em 0;
		margin-right:7.5%;
	}
	.three-column .three-column-center{
		float:left;
		width:28.1%;
		padding:0 0 0.5em 0;
	}
	.three-column .three-column-right{
		float:left;
		width:28.1%;
		padding:0 0 0.5em 0;
		margin-left:7.5%;
	}
	.three-column img{
		max-width:95% !important;
	}
	
	.wrapper-nav-footer{
		background:#533019;
	}
	
	#TagSummary ul{
		float:left;
		width:24%;
		margin:0 !important;
	}
	#TagSummary a{
		font-size:1.1em;
	}
	#TagSummary #TagColLeft{
		float:none;
		width:auto;
	}
	#TagSummary #TagColRight{
		float:none;
		width:auto;
	}
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1025px)
{
	/* TOP NAVIGATION ---------- */
	#NavMain.nav ul li a{
		font-size: 1.1em;
		padding:0 22px;
	}
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1200px)
{
}

/* IE Specific ------ */
.ie6,
.ie7,
.ie8{
}
/* Fix the width for ie */
.ie6 .wrapper-inner {
	width:995px !important;
}
.ie6 .two-column img,
.ie6 .three-column img{
	width:95% !important;
}
/* Assume that if is in a column and floated either left or right that it will have text wrapping
so make it defualt to 50% width */
.ie6 .two-column img.left,
.ie6 .two-column img.right,
.ie6 .three-column img.left,
.ie6 .three-column img.right{
	width:35% !important;
}
/* Sidebar */
.ie6 #SideBar img{
	width:95% !important;
}
.ie6 #SideBar img.left,
.ie6 #SideBar img.right{
	width:45% !important;
}
.ie6 #SearchBox{
	top:-68px;
}
.ie7 #SearchBox{
	top:-62px;
}
/* Header Logo - PNG correct for ie6 */
.ie6 #Logo-png{
	display:none;
}
.ie6 #Logo-gif{
	display:block;
}
/* END IE Specific ------ */