/* **********  RESET browser settings  *********** */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;

}
a img, :link img, :visited img {border: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
q:before, q:after, blockquote:before, blockquote:after {content: "";}
/* **********  END RESET browser settings  *********** */

body, html {width:100%; height:100%;}

/* basic styling and commonly used classes */
body {
    background:#fff;
    font-family: 'Roboto',tahoma,lucida,verdana,helvetica,sans-serif;
    font-size: 13px;
    line-height: 20px;
    color:#000;
}

.bgwhite {background-color:#fff;}
.bgorange {background-color:#cb5307; color:#fff;}
.bggray {background-color:#ececec;}

.orange {color:#cb5307;}

h2 {font-size:22px; font-weight:700; margin-bottom:0.85em; letter-spacing:1px;}
h3 {font-size:18px; font-weight:700; margin-bottom:0.85em; letter-spacing:1px;}
h4 {font-size:15px; line-height:22px; color:#cb5307; font-weight:500; letter-spacing:1px; }
h5 {font-size:14px; line-height:16px;font-weight:700; }

p {margin-bottom: 15px;}

strong { font-weight:700;}
em {font-style:italic;}

.align-center {text-align:center;}

a, a:hover, a:focus {cursor:pointer;outline:none;}

a {color: #cb5307; text-decoration: none;}
a:hover {color:#ccc;}

ul {list-style-type:disc; margin:0 0 20px 17px; padding:0px;}

img{border:none;}
.clear {clear:both;display:block;font-size:0;line-height:0;}

.center {text-align:center;}

hr {
    border-top: 1px solid #cb5307;
}

img.shadow{-webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2);}
/* ********************************************** */


#main-container {width:1024px; height:768px; overflow:hidden; margin:0 auto; position:relative;
	-webkit-box-shadow: 0px 0px 8px 2px rgba(199,199,199,1);
	-moz-box-shadow: 0px 0px 8px 2px rgba(199,199,199,1);
	box-shadow: 0px 0px 8px 2px rgba(199,199,199,1);
}


/* ********  NAVIGATION  ********* */
#leftbar {position:absolute; left:0px; bottom:0px; width:21px; background-color:rgba(0,0,0,1.0); height:100%; z-index:1000;}

#leftnav {position:absolute; left:33px; top:12px; z-index: 4999;}
	#leftnav a.stories {background:url(../images/btn_stories.png) no-repeat center top; width:60px; font-size:10px; line-height:9px; color:#000; padding-top:43px; display:block; text-align:center; margin-bottom:10px; text-transform: uppercase; border:none; outline:none;}
	
	#leftnav .logo {position:absolute; left:77px; top:-5px; z-index: 4999;}
	
.slide-menu {position: absolute;
	top: 0;
	left: -300px;
	z-index: 5000;
	/*visibility: hidden;
	display:none;*/
	width: 300px;
	height: 100%;
	background:#363636;
}
	
.slide-menu a.close {width:19px; height:20px; display:block; position:absolute; top:5px; right:5px; background:url(../images/btn_menu_close.png) no-repeat; text-indent: -9999px;}
	
.slide-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slide-menu ul li {display:block; width:300px;}

.slide-menu h2 {
	margin: 0;
	padding: 1em;
	color: rgba(255,255,255,0.4);
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
	font-weight: 300;
	font-size: 2em;
}

.slide-menu ul li a {
	display: block;
	overflow:hidden;
	padding: 0.5em 1em 0.5em 2em;
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	color: #959595;
	font-size:13px;
	text-transform: uppercase;
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	letter-spacing: 1px;
	font-weight: 400;
}

.slide-menu ul li a img {margin-right:10px;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
float:left;}

.slide-menu ul li:first-child a {
	box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.slide-menu ul li a:hover {
	background: rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px rgba(0,0,0,0);
	color: #fff;
}
	
	

#rightnav {position:absolute; right:0px; bottom:0px; width:43px; background-color:rgba(0,0,0,1.0); height:100%; z-index:1000;}

#rightnav .links {position:absolute; top:41%; right:5px;z-index:10000;}

#rightnav a.next{
	width:35px;
	background:url(/images/btn_nextstory.png) center top no-repeat;
	font-size:10px; line-height:9px; color:#fff; padding-top:37px; display:block; text-align:center;
	margin-bottom:15px;
	text-transform: uppercase;
	}
#rightnav a.prev{
	width:35px;
	background:url(/images/btn_prevstory.png) center top no-repeat;
	font-size:10px; line-height:9px; color:#fff; padding-top:37px; display:block; text-align:center;
	text-transform: uppercase;
	}

.pagecontent {max-width:960px; margin:110px 0 0 21px; overflow:hidden; position:relative;}
	
/* ********************************************** */



/* COVER styles */
#cover #main-container {background:url(../images/background_cover.jpg) no-repeat #fff 21px 193px;}
#cover #cover-logo {position:absolute; top:50px; right:8.4960938%; }
#cover #orangebox {position:absolute; top:235px; left:100px; width:192px; height:146px; background-color:#cb5307;}
#cover #orangebox .copy {padding:27px 12px 0 14px; color:#fff; font-size:18px; line-height:22px; letter-spacing: 1px;}
#cover #orangebox .copy a { color:#fff; font-size:11px; line-height:18px; letter-spacing: normal;}
#cover #orangebox .copy a:hover {opacity:0.8;}
.link {position:absolute; left:100px;  bottom:10%;}
.link a.button {background-color:#fff; display:inline-block; width:auto; min-width:100px; border:1px solid #cb5307; color:#cb5307; font-size:13px; line-height:20px; padding:4px 10px; text-decoration: none; margin:0 15px 0 0;}

/* INTRO styles */
.white-logo {text-align:center;}

#intro1 .col1 {float:left; width:28.645833%; margin-right:4.6875%;}
	#intro1 .col1 .copy {margin:60px 0 0 28px; color:#fff; font:16px/24px 'Roboto',sans-serif; letter-spacing: 1px;}
	#intro1 .col1 .copy .big{font:24px/48px 'Roboto',sans-serif;}
	#intro1 .col1 .copy .huge{font:150px/120px 'museo_slab700'; letter-spacing: -10px;}


#intro1 .col2 {float:left; width:61.458333%;}
	#intro1 .col2 .copy {color:#fff; font:13px/18px 'Roboto',sans-serif;}
	#intro1 .col2 .copy .big{font:18px/18px 'Roboto',sans-serif;}
	#intro1 .col2 .copy div {margin:0 20px 0 50px;}
	#intro1 .col2 .copy div p{margin-left:20px;}
	
#intro2 .col1 {float:left; width:37.5%;}
	#intro2 .col1 .mag {margin:35px 0 0 37px;}
	#intro2 .col1 .mag img{-webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2);}


#intro2 .col2 {float:left; width:45.3125%;}
	#intro2 .col2 .copy {color:#fff; font:13px/18px 'Roboto',sans-serif; }
	#intro2 .col2 .copy h2 {color:#fff; font:22px/22px 'Roboto',sans-serif; font-weight:700; letter-spacing: 2px; margin-bottom:15px;}
	#intro2 .col2 .copy div {margin:0 0 0 35px;}
	#intro2 .col2 .copy .big{font:18px/20px 'Roboto',sans-serif; font-weight:700;}
	
	
	
/* ********** GENERAL SUBPAGE styles */	
.general .col1 {float:left; width:26.171875%; margin:10.742188% 0 0 2.0507812%;}
.general .col1 .num {margin-top:60px; text-align:center; font:240px/240px 'museo_slab500'; color:#fff}
.general .col1 .num2 {margin-top:60px; margin-left:0px; font:240px/240px 'museo_slab500'; color:#fff; letter-spacing:-10px}
.general .col1 .num3 {margin-top:60px; margin-left:0px; font:240px/240px 'museo_slab500'; color:#fff; letter-spacing:-28px}

.general .col2 {width:54.296875%; padding:0 15px 0 10px; overflow-y: auto; font-weight:500;
	position: absolute;
    left: 27.916667%;
    bottom: 0px;
    height: 100%;
    z-index: 1;
}

.general .col2 .copy {margin-top:110px;}
.general .col2 .copy .cols {overflow:hidden; margin-bottom:20px;}

.table-responsive { min-height: .01%; overflow-x: auto;}
.table {width: 100%;  max-width: 100%;  margin-bottom: 20px; border-spacing: 0;  border-collapse: collapse;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 3px 5px;
    line-height: 1.42857143;
    vertical-align: top;
}
.table>tbody>tr>th {font-weight:700; text-align: left; font-size:15px;}

a.button {display:inline-block; width:auto; min-width:100px; border:1px solid #cb5307; color:#cb5307; font-size:13px; line-height:20px; padding:4px 10px; text-decoration: none; margin:0 15px 0 0;}
a.button:hover {border-color:#ccc; color:#ccc;}


a.button-long {display:block; width:175px; border:1px solid #cb5307; color:#cb5307; font-size:13px; line-height:20px; padding:4px 10px; text-decoration: none; margin:0 15px 10px 0;}
a.button-long:hover {border-color:#ccc; color:#ccc;}

a.button-xlong {display:block; width:245px; border:1px solid #cb5307; color:#cb5307; font-size:11px; line-height:16px; padding:4px 10px; text-decoration: none; margin:0 15px 10px 0;}
a.button-xlong:hover {border-color:#ccc; color:#ccc;}

a.letterhead-link {font-size:11px; text-transform: uppercase; font-weight:300; color:#000;}
a.letterhead-link:hover {color:#ccc;}
a.letterhead-link.active {font-weight:500; color:#cb5307;}
	
/* ********************************* */		
	
	
/* 1 TYPOGRAPHY styles */
.cols .col-one-third {float:left; width:30%; padding-left:1.5%; border-left:2px solid #dedede; height:230px;}
.cols .col-one-third:first-child {border:none; padding-left:0;}
.cols .col-one-third h3 { font:18px/20px 'Roboto',sans-serif; font-weight:500; color:#cb5307; margin-bottom:12px;}
.cols .col-one-third .type {margin-bottom:20px; font:10px/12px 'Roboto',sans-serif; text-transform: uppercase; overflow:hidden;}
.cols .col-one-third .type img {float:left; padding:0 15px 0 0}


/* 2 COLOR styles */
.col-color {float:left; margin-right:3%; width:30%; }
.color-swatch {width:100%; height:20px; display:block; margin-bottom:8px;}
	.color-swatch.mercerorange{background-color:#cb5307;}
	.color-swatch.black{background-color:#000;}
	.color-swatch.beige{background-color:#ebdcb6;}
	
	.color-swatch.hex-ac1d4e{background-color:#ac1d4e;}
	.color-swatch.hex-4e2c83{background-color:#4e2c83;}
	.color-swatch.hex-283883{background-color:#283883;}
	.color-swatch.hex-3b8fcf{background-color:#3b8fcf;}
	.color-swatch.hex-148268{background-color:#148268;}
	.color-swatch.hex-6db644{background-color:#6db644;}
	.color-swatch.hex-cbc02c{background-color:#cbc02c;}
	.color-swatch.hex-b0a017{background-color:#b0a017;}

/* .color-black {width:140px; background:#000; margin-bottom:12px; display:block; } */


/* 3 WORDMARK styles */
.row-wordmark {padding:0 20px; font-weight:400;}
.row-wordmark img {}


/* 5 NAMEPLATES styles */
#hscroll {position:absolute; bottom:150px; left:21px; height:152px; width:960px; background:#fff; overflow-y:auto; overflow-x: scroll; z-index:50;}
#hscroll::-webkit-scrollbar {-webkit-appearance: none; height: 11px;}
#hscroll::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

#hscroll p {position:absolute; top:12px; left:30px; color:#cb5307;}
#hscroll .items {width:3852px; overflow:hidden; margin-top:40px;}
#hscroll .items img {float:left; margin:0 28px;}


/* 11 CO-BRANDING POLICY styles */
.cola {float:left; width: 300px; padding-right: 20px;}
.colb {float:left; width:227px; }
.colb img{ margin-top:30px; -webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2); box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.2);}

/* 12 STATIONARY styles */
#letterhead {float:right; width:329px; height:426px; overflow:hidden;}
#letterhead img {width:100%; height:auto;}


/* 13 COLLATERAL DESIGN styles */
#collateral .collage {position:relative; width:478px; height:378px; background:url(../13-collateral-design/images/collage.jpg) no-repeat; margin:0 auto; }
#collateral .collage .copy {position:absolute; top:40px; left:253px; width:160px; font-size:11px; line-height:14px; color:#cb5307; margin:0;}
#collateral .collage .copy a {font-size:13px; font-weight:700; color:#cb5307;}
#collateral .collage .copy a:hover {color:#ccc;}


/* 15 WEBSITE STANDARDS styles */
#web-standards #hscroll { bottom:100px; height:200px; overflow:hidden}
#web-standards #hscroll .items {width:100%; overflow:hidden; margin-top:22px;}
#web-standards #hscroll .items img {-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.3);}


/* 16 WEBSITE SCOPE styles */
#web-scope {font-weight:300;}
#web-scope .big {font-size:18px;}
#web-scope ol {list-style-type:lower-alpha;  margin:0 0 20px 27px; padding:0px;}

/* 19 TRADEMARK POLICY styles */
#trademark-policy {font-weight:300;}

/* 26 FAQs styles */
.accordion-toggle {cursor: pointer; color:#fff; background-color:#cb5307; padding:8px; margin-bottom:8px; font-size: 14px; font-weight:300;}
.accordion-toggle:before {content: "\25B6 \00a0 ";}
.accordion-toggle.open:before {content: "\25BC \00a0 ";}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

.accordion-content {font-size:12px; line-height:15px; font-weight:300; margin-left:25px;}


/* 28 QUICK REFERENCE GUIDE styles */
#qrg .col2{font-size:10px; line-height:12px;}
#qrg .cols {margin-bottom:6px;}
#qrg .table {margin-bottom:6px;}
#qrg .table>tbody>tr>td { padding: 0px 5px;}
#qrg .color-swatch {height:15px;}
#qrg .wordmark {display:block; text-align:right;}

#cobranding {line-height:18px;}



@font-face {
    font-family: 'museo_slab500';
    src: url('/css/fonts/Museo_Slab_500_2-webfont.eot');
    src: url('/css/fonts/Museo_Slab_500_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/Museo_Slab_500_2-webfont.woff2') format('woff2'),
         url('/css/fonts/Museo_Slab_500_2-webfont.woff') format('woff'),
         url('/css/fonts/Museo_Slab_500_2-webfont.ttf') format('truetype'),
         url('/css/fonts/Museo_Slab_500_2-webfont.svg#museo_slab500') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_slab700';
    src: url('/css/fonts/Museo_Slab_700-webfont.eot');
    src: url('/css/fonts/Museo_Slab_700-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/Museo_Slab_700-webfont.woff2') format('woff2'),
         url('/css/fonts/Museo_Slab_700-webfont.woff') format('woff'),
         url('/css/fonts/Museo_Slab_700-webfont.ttf') format('truetype'),
         url('/css/fonts/Museo_Slab_700-webfont.svg#museo_slab700') format('svg');
    font-weight: normal;
    font-style: normal;

}


@media screen  and (max-width: 979px) /* Tablet */ {
	
	#leftnav a.stories {width:60px; font-size:8px; line-height:8px;padding-top:43px; }
	#leftnav .logo {top:0; left:63px;}
	#leftnav .logo img {width:90px; height:auto;}
	.slide-menu ul li a { padding: 0.5em 1em 0.5em 2em; font-size: 11px;}
	
	#main-container {width:100% ;}
    #cover #main-container {width:100%;}
    
    .general .col1 {float:left; width:22.171875%; margin:10.742188% 0 0 2.5507812%;}
	.general .col2 {width:58.296875%; left: 24.916667%;}

	.general .col1 .num, .general .col1 .num2, .general .col1 .num3 {font:150px/150px 'museo_slab500'; letter-spacing: -10px; text-align:center;}
	.white-logo img {width:80%; height:auto;}
	
	#intro1 .col1 {float:left; width:28.645833%; margin-right:3%;}
	#intro1 .col1 .copy .huge{font:100px/100px 'museo_slab700';}
	#intro1 .col2 {float:left; width:55%;}
	
	#intro2 .col1 .mag {margin:35px 0 0 20px;}
	#intro2 .col1 .mag img {width:80%; height:auto;}
	
	.cols .col-one-third {height: 250px;}
	.cols .col-one-third h3 {font: 14px/16px 'Roboto',sans-serif;  margin-bottom: 10px;}
	.cols .col-one-third .type img {width:50%; height:auto;}
	.cols .col-one-third .type {margin-bottom: 10px;}
	
	#letterhead {float:right; width:200px; height:259px; overflow:hidden;}
	
	#qrg .wordmark img {width:250px; height:auto;}
}