/* 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 'PT Sans', Arial, Helvetica, sans-serif;
}

#PageWrapper{
}
#PageWrapperInner{
	margin:0 auto;
	max-width:1200px;
}

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

.wrapper-outer {
}
.wrapper-inner {
	/* Overall max width for content area */
	max-width:1050px;
	margin:0 auto;
	width: 90%;
}
.wrapper-quick-links .wrapper-inner,
.wrapper-search .wrapper-inner,
.wrapper-nav-main .wrapper-inner{
	width:100%;
}
.wrapper-inner-top-nav{
	width:100%;
}
.wrapper-main .wrapper-inner{
	width:90%;
	background:#fff;
}
.wrapper-footer{
	background-image:url(/img/footer-bgd.jpg);
	background-position:left bottom;
	border-top:solid 1px #888;
}
.wrapper-nav-footer{
	background:#000;
}

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

#IndustryLinks{
	margin:0 auto;
	width:90%;
}
#IndustryLinks img{
	padding:10px;
}

/* MISCELLANEOUS ---------------- */

#PrintLogo{
	display:none;
}
a{
	outline:none;
	color:#91853e;
	cursor:pointer;
}

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

.wrapper-header{
	background-color:#000;
}
#Logo{
	margin:0px auto 10px auto;
}
#Logo img{
	width:280px;
	margin:0px auto;
}
#Logo img.ie6{
	display:none;
}

/* 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: 'Cardo', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3.25em;
	font-size: 1.0em;
	text-transform:uppercase;
	color:#fff;
	padding-left:30px;
}
.quick-links li.icon-home a span{
	background-image:url(/img/icons/home_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-menu a span{
	background-image:url(/img/icons/arrow_down_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-search a span{
	background-image:url(/img/icons/magnifier_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-top a span{
	background-image:url(/img/icons/arrow_up_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-back a span{
	background-image:url(/img/icons/arrow_left_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.quick-links li.icon-menu-footer a span{
	background-image:url(/img/icons/arrow_up_24.png);
	background-repeat:no-repeat;
	background-position:left center;
}

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

#NavMain{
	display:none;
	/* Fix jumpiness with JQuery toggle by setting width */
	width:100%;
	background-color:#333;
}
#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;
	border-bottom:solid 1px #444;
	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: 'Cardo', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3em;
	font-size: 0.95em;
	text-transform:uppercase;
	color:#fff;
	padding-left:35px;
	background:url(/img/icons/video_play_12.png) no-repeat left center;
}
#NavMain.nav li:hover{
	background-color:#777;
}
#NavMain.nav li:hover a{
	color:#fff;
}
#NavMain.nav li a.current,
#NavMain.nav li a.section{
	color:#fff;
}

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

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

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

#Breadcrumbs{
	display:block;
	font-size:1em;
	margin:0.3em 0 0 0;
	padding:20px 0 0 0;
}
#Breadcrumbs a{
	padding:0.5em 30px 0.5em 20px;
	line-height:1.4em;
	font-weight:bold;
	background:url(/img/icons/breadcrumb-bgd.png) no-repeat right center;
	text-decoration:none;
}

/* 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 .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: 'Cardo', sans-serif;
	font-weight:400;
	line-height:3em;
	font-size: 1.1em;
	padding-left:35px;
	background:url(/img/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: 'Cardo', sans-serif;
	font-weight:400;
	font-size:1.15em;
	line-height:3em;
	letter-spacing:0 !important;
	background:url(/img/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 --------------------- */

#TagSummary{
	/* Fix jumpiness with JQuery toggle by setting width */
	display:none;
	width:100%;
	padding:10px 0px;
	border:solid 1px #ccc;
	background-image: url(/img/bgnoise-light.png);
}
#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:#333;
}
.wrapper-tags{
	width:100%;
	padding-top:10px;
}
.js-toggle-tags{
	cursor:pointer;
	font-size:1em;
	font-weight:400;
	padding:0.6em 0 0.6em 0;
	background-repeat:no-repeat;
	margin:5px 0 0 5%;
	background-image:url(/img/icons/arrow_tag_down.png);
	background-position:left center;
}
.js-toggle-tags #TagsText{
	padding:0.5em 10px 0.5em 25px;
}
.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;
}

/* TRANSLATION LINKS -------------------- */

#TranslationLinks .odd{
	float:left;
	width:40%;
}
#TranslationLinks .even{
	float:right;
	width:40%;
}
#TranslationLinks a{
	display:block;
	padding:0.5em 0 0.5em 55px;
}
#TranslationLinks a.link-french{
	background:url(/img/icons/flag-french.gif) no-repeat left center;;
}
#TranslationLinks a.link-german{
	background:url(/img/icons/flag-german.gif) no-repeat left center;;
}
#TranslationLinks a.link-spain{
	background:url(/img/icons/flag-spain.gif) no-repeat left center;;
}
#TranslationLinks a.link-italian{
	background:url(/img/icons/flag-italian.gif) no-repeat left center;;
}

#Footer{
	padding-top:2.5em;
	width:90%;
	margin:0 auto;
}

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

#NavFooter{
	display:none;
}

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

#NavFooterMobile{
	display:none;
	/* Fix jumpiness with JQuery toggle by setting width */
	width:100%;
	background:#333;
}
#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;
	border-bottom:solid 1px #444;
	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: 'Cardo', sans-serif;
	font-weight:400;
	text-decoration:none;
	line-height:3em;
	font-size: 0.95em;
	text-transform:uppercase;
	color:#fff;
	padding-left:35px;
	background:url(/img/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:#999;
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 321px)
{
	
}
/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 481px)
{
	body {
		background-image:url(/img/main-bgd-dark.png);
	}
	
	#PageWrapperInner{
		background-image:url(/img/main-bgd.png);
	}
	#Main {
		width:90%;
		margin:0 auto;
	}
	
	/* HEADER ---------- */
	
	.header{
		width:90%;
		margin:0 auto;
	}
	#Logo img{
		width:auto;
	}
	
	/* TOP NAVIGATION ---------- */
	
	#NavMain{
		margin:0 auto;
	}
	#NavMain.nav ul li a{
		width:80%;
	}
	#NavSubMobile{
		width:90%;
		margin:0 auto;
	}
	#NavFooterMobile.nav ul li a{
		width:80%;
	}
	
	/* BREADCRUMBS ---------- */
	#Breadcrumbs{
		padding:20px 0 0 5%;
	}
	
	/* SLIDER ----------------- */
	
	.flexslider-container{
		width:90%;
		margin:0 auto;
	}
	
	/* TAG SUMMARY --------------------- */
	
	#TagSummary{
		/* Fix jumpiness with JQuery toggle by setting width */
		border-top:solid 1px #ccc;
		border-bottom:solid 1px #ccc;
		border-left:0;
		border-right:0;
	}
	
	/* BOTTOM NAV ------------------ */
	
	#NavFooter {
		width:90%;
		margin:0 auto;
	}
	#NavFooter img{
		padding: 0 5px;
	}
	
	/* FOOTER NAVIGATION -------------------- */
	
	#NavFooter{
		display:block;
		width:90%;
		margin:0 auto;
		text-align:center;
		padding:2em 0;
		font-family: 'Cardo', sans-serif;
		font-weight:400;
		font-size:0.98em;
		background:#000;
	}
	#NavFooter .nav ul{
		padding:0.2em 0;
	}
	#NavFooter .nav li{
		display:inline;
		margin-left:12px;
		margin-right:12px;
	}
	#NavFooter .nav li a{
		/* Need to apply inline here as well as li for ie6. Others don't need it */
		display:inline;
		color:#fff;
		text-transform:uppercase;
		text-decoration:none;
	}
	#NavFooter .nav a.current{
		color:#d6ccb5 !important;
	}
	#NavFooter small,
	#NavFooter small a{
		color:#ddd !important;
	}
	
	/* TRANSLATION LINKS -------------------- */
	
	#TranslationLinks{
		width:70%;
		margin:0 auto;
		padding:1em 0;
	}
	
}
/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 769px)
{
	#PageWrapper{
		padding-top:10px;
		padding-bottom:10px;
	}
	#PageWrapperInner{
		border:solid 10px #eee;
	}
	.wrapper-main {
		margin-top:-30px;
	}
	
	.desktop-only{	
		display:block !important;
	}
	.mobile-only{
		/* ie seems to need the important declaration here */
		display:none !important;
	}
	
	/* HEADER ------------- */
	
	.wrapper-header{
		background:#000 url(/img/header-bgd.jpg) no-repeat center center;
	}
	.header{
		height:242px;
	}
	#Main{
		padding:1em 0 3em 0;
	}
	#Logo{
		margin:0;
	}
	#Logo img{
		margin:0;
	}
	
	/* TOP NAVIGATION ---------- */
	
	#NavMain{
		display:block;
		width:100%;
		background:none;
	}
	#NavMain .top{
		margin:0 auto 4px auto;
		max-width:1050px;
	}
	#NavMain .top ul{
		width:90%;
		background: rgb(0, 0, 0); /* The Fallback */
		background: rgba(0, 0, 0, 0.7);
	}
	#NavMain.nav .top li {
		border-top:solid 2px #000;
		border-bottom:solid 2px #000;
	}
	#NavMain .bottom{
		background: rgb(145, 120, 62); /* The Fallback */
		background: rgba(145, 120, 62, 0.85);
		padding-bottom:30px;
		margin:0 auto;
	}
	#NavMain .bottom ul{
		font-size:0.9em;
		width:90%;
		max-width:1050px;
	}
	#NavMain ul{
	}
	/* 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;
		background:none;
		border:none;
	}
	#NavMain.nav ul li.last {
		border-right:0;
	}
	#NavMain.nav ul li a{
		width:auto;
		line-height:1.9em;
		font-size: 1.1em;
		padding:0 25px;
	}
	#NavMain.nav ul li a span{
		padding-left:0;
		background-image:none;
		color:#fff;
	}
	#NavMain.nav li:hover{
		background-color:#111;
	}
	#NavMain.nav .top li.current,
	#NavMain.nav .top li.section{
		border-top:solid 2px #fff;
		border-bottom:solid 2px #fff;
		background-color:#000;
	}
	#NavMain.nav .top li:hover,
	#NavMain.nav .top li:hover{
		border-top:solid 2px #999;
		border-bottom:solid 2px #999;
		background-color:#000;
	}
	#NavMain.nav .bottom li.current,
	#NavMain.nav .bottom li.section{
		background-color:#000;
	}
	
	/* BREADCRUMBS ---------- */
	.js-toggle-tags #Breadcrumbs{
		display:inline;
		padding:0 0 0 10px !important;
	}
	
	/* SEARCH ---------- */
	
	.wrapper-search{
		position:relative;
		top:-18px;
		margin:0 auto;
	}
	.wrapper-search .wrapper-inner{
		position:relative;
		width:85%;
	}
	#SearchBox{
		/*display:none;*/
		position:absolute;
		right:0;
		top:0;
		z-index:1;
		width:300px;
		display:block;
		background:transparent;
	}
	
	/* 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;
	}
	
	/* COLUMNS ------------------ */
	
	/* TWO COLUMN */
	
	.two-column{
		width: 100%;
		padding:0 0 2em 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;
	}
	
	/* TWO COLUMN EXTRAS*/
	
	.two-column .wide{
		width:70% !important;
	}
	.two-column .narrow{
		width:20% !important;
		padding-right:20px;
		border-right:solid 1px #fff;
	}
	
	/* 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;
	}
	
	#TagSummary {
		width:95%;
		padding-left:5%;
	}
	#TagSummary ul{
		float:left;
		width:24%;
		margin:0 !important;
	}
	#TagSummary a{
		font-size:1.0em;
	}
	#TagSummary #TagColLeft{
		float:none;
		width:auto;
	}
	#TagSummary #TagColRight{
		float:none;
		width:auto;
	}
	
	/* TRANSLATION LINKS -------------------- */
	
	#TranslationLinks{
		width:90%;
		text-align:center;
	}
	#TranslationLinks ul{
		padding:0;
	}
	#TranslationLinks li{
		display:inline;
		margin-right:20px;
	}
	#TranslationLinks li a{
		/* Need to apply inline here as well as li for ie6. Others don't need it */
		display:inline;
		text-transform:uppercase;
		text-decoration:none;
		font-family: 'Cardo', sans-serif;
		font-size:0.95em;
	}
	#TranslationLinks .odd{
		float:none;
		width:auto;
	}
	#TranslationLinks .even{
		float:none;
		width:auto;
	}
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 900px)
{
	#Main .narrow{
		float:left;
		width:61%;
	}
	.HomePage #Main .narrow{
		width:61%;
	}
	
	/* SIDEBAR ----------------- */
	
	#SideBar{
		float:right;
		width:33%;
	}
	.HomePage #SideBar{
		width:33%;
	}
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1000px)
{
	#Main .narrow{
		width:66%;
	}
	.HomePage #Main .narrow{
		width:61%;
	}
	
	/* TOP NAVIGATION ----------------- */
	
	#NavMain .bottom ul{
		width:72%;
	}
	
	/* SIDEBAR ----------------- */
	
	#SideBar{
		width:28%;
	}
	.HomePage #SideBar{
		width:33%;
	}
}

/* -------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1200px)
{
	#NavMain .top{
		width:90%;
		max-width:1050px;
	}
}

/* IE Specific ------ */
.ie6,
.ie7,
.ie8{
}
/* Fix the width for ie */
.ie6 #PageWrapper{
	width:995px;
	margin:0 auto;
	text-align:center
}
.ie6 #Logo img.ie6{
	display:block;
}
.ie6 #Logo img#Logo-png{
	display:none !important;
}
.ie6 #Main .narrow {
	width:510px; /* Need to fix width for overflow hidden to work in ie6 */
	overflow:hidden;
}
.ie6 .wrapper-outer {
	text-align:left;
}
.ie6 .wrapper-inner {
}
.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%;
}
.ie6 #SideBar img.left,
.ie6 #SideBar img.right{
	width:45% !important;
}
.ie6 .wrapper-search{
	top:-40px;
}
.ie7 .wrapper-search{
	top:-40px;
}
/* END IE Specific ------ */