/* updated 2:04pm, 3/13/2012 */


/*
HTML5 Reset :: style.css
----------------------------------------------------------
We have learned much from/been inspired by/taken code where offered from: 

Eric Meyer					:: http://ericmeyer.com
HTML5 Doctor				:: http://html5doctor.com
and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article,aside,figure,footer,header,hgroup,nav,section {
	display: block;
}

/* Responsive images and other embedded objects
Note:   keeping IMG here will cause problems if you're using foreground images as sprites.
If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,object,embed {
	max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
html {
	-ms-overflow-y: scroll;
	overflow-y: scroll;
}

/* we use a lot of ULs that aren't bulleted.
don't forget to restore the bullets within content. */
ul {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

del {
	text-decoration: line-through;
}

abbr[title],dfn[title] {
	border-bottom: 1px dotted #000;
	cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

th {
	font-weight: bold;
	vertical-align: bottom;
}

td {
	font-weight: normal;
	vertical-align: top;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

input,select {
	vertical-align: middle;
}

pre {
	white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

input[type="radio"] {
	vertical-align: text-bottom;
}

input[type="checkbox"] {
	vertical-align: bottom;
	*vertical-align: baseline;
}

.ie6 input {
	vertical-align: text-bottom;
}

select,input,textarea {
	font: 99% sans-serif;
}

table {
	font-size: inherit;
	font: 100%;
}

/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover,a:active {
	outline: none;
}

small {
	font-size: 85%;
}

strong,th {
	font-weight: bold;
}

td,td img {
	vertical-align: top;
}

/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* standardize any monospaced elements */
pre,code,kbd,samp {
	font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,label,input[type=button],input[type=submit],button {
	cursor: pointer;
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,input,select,textarea {
	margin: 0;
}

/* make buttons play nice in IE */
button {
	width: auto;
	overflow: visible;
}

/* scale images in IE7 more attractively */
.ie7 img {
	-ms-interpolation-mode: bicubic;
}

/* prevent BG image flicker upon hover */
.ie6 html {
	filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

/* let's clear some floats */
.clearfix:before,
.clearfix:after {
	content: "020";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}

.hidden {
	visibility: hidden;
}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/
html {
	height: 100%;
	width: 100%;
}

/* new Linux-and Windows-friendly sans-serif font stack:   http://mky.be/fontstack */
body {
	height: 100%;
	width: 100%;
	font: normal 13px "Fedra Sans Screen Regular", Helmet, Freesans, sans-serif;
	background: #ccc;
	cursor: default;
}

/* Load Fonts Locally */
@font-face {
	font-family: "Fedra Sans Screen Regular";
	src: url("../fonts/WF-016407-001504-000449-1373433782.eot");
	src: url("../fonts/WF-016407-001504-000449-1373433782.eot?#iefix") format("embedded-opentype"), url("../fonts/WF-016407-001504-000449-1373433782.woff") format("woff"), url("../fonts/WF-016407-001504-000449-1373433782.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
}
@font-face {
	font-family: "Fedra Sans Screen Bold";
	src: url("../fonts/WF-016407-001504-000450-1373433782.eot");
	src: url("../fonts/WF-016407-001504-000450-1373433782.eot?#iefix") format("embedded-opentype"), url("../fonts/WF-016407-001504-000450-1373433782.woff") format("woff"), url("../fonts/WF-016407-001504-000450-1373433782.svg#typotheque_webfonts_service") format("svg");
	font-style: normal;
	font-weight: bold;
	font-stretch: normal;
}


html.no-touch body {
	background: rgb(204,204,204); /* Old browsers */
	/* we are ignoring old IE for performance reasons */
	background: -moz-linear-gradient(top, rgba(204,204,204,1) 10%, rgba(255,255,255,1) 65%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(204,204,204,1)), color-stop(65%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(204,204,204,1) 10%,rgba(255,255,255,1) 65%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(204,204,204,1) 10%,rgba(255,255,255,1) 65%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(204,204,204,1) 10%,rgba(255,255,255,1) 65%); /* IE10+ */
	background: linear-gradient(top, rgba(204,204,204,1) 10%,rgba(255,255,255,1) 65%); /* W3C */
}

/* using local fonts? make sure to read up on Paul Irish's
Bulletproof @font-face syntax:   http://mky.be/font-face/bulletproof/ */
/* we like off-black for text */
body,select,input,textarea {
	color: #333;
}

a {
	color: #023596;
}

/* Custom text-selection colors (remove any text shadows:   twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
	background: #999;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #999;
	color: #fff;
	text-shadow: none;
}

/* I don't like it when images are highlighted */
img::-moz-selection {
	background: transparent;
}

img::selection {
	background: transparent;
}

html {-webkit-text-size-adjust: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: transparent;} 

ins {
	background-color: #fcd700;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #fcd700;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

a.arrow {
	position: absolute;
	top: 50%;
	display: none;
	height: 36px;
	width: 36px;
	margin-top: -18px;

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;

	z-index: 200;
	
}

html.no-touch a.arrow {
	-webkit-transition: all .1s ease-in;
	-moz-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	-ms-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

a.arrowRight {
	display: none;
	right: 10px;
	background: url(../img/arrow_right.png) center center no-repeat;
}

a.arrowLeft {
	display: none;
	left: 10px;
	background: url(../img/arrow_left.png) center center no-repeat;
}

a.arrow:hover {
	background-color: #fff;
	background-color: rgba(255,255,255,.8);
}

html.touch a.arrow:hover {
	background-color: transparent;
}

nav.bottomNav {
	position: absolute;
	z-index: 100;
	bottom: 0;
	width: 100%;
	height: 38px;
	background: #000;
	text-align: center;
}

.trigger {
	position: absolute;
	top: 9px;
	height: 21px;
	width: 28px;
	z-index: 1000;
	display: none;
}

.trigger.flyout {
	left: 2%;
}

.trigger.thumbnails {
	right: 2%;
}

html.ieold .trigger.thumbnails {
	display: none;
}

.trigger a {
	display: block;
	height: 100%;
	background: transparent url(../img/icon_flyout.png) no-repeat;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: .8;
}

html.no-touch .trigger a {
	-webkit-transition: opacity .1s ease-in;
	-moz-transition: opacity .1s ease-in;
	-o-transition: opacity .1s ease-in;
	-ms-transition: opacity .1s ease-in;
	transition: opacity .1s ease-in;
}

.trigger.active a {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.trigger.thumbnails a {
	background-image: url(../img/icon_thumbnails.png);
}

.trigger a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.center-outer {
    display: table;
    position: static;
    width: 80%;
    height: 100%;
    padding-right:10%;
    padding-left:10%;
    
}
.center-middle {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    position: static;
    height: auto !important;
    float: none !important;
}
.center-inner {
    width: 100%;
    height: auto !important;
    float: none !important;
    text-align:left;
}


ul.dotNav {
	position: absolute;
	top: 100px;
	z-index: 100;
	height: 100%;
	width: 100%;
	background: #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	margin-left:12px;
}

html.ie6 ul.dotNav,
html.ie7 ul.dotNav {left: 0;}

html.no-touch ul.dotNav {
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	-ms-transition: all 1s ease-in;
	transition: all 1s ease-in;
}

ul.dotNav.active {
	top: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

ul.dotNav li {
	display: inline-block;
	height: 100%;
	margin-right: 24px;
	line-height: 38px;
}

html.ie6 ul.dotNav li,
html.ie7 ul.dotNav li {display: inline; margin-top: 9px;}

ul.dotNav a {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	background: #ccc;
	background: rgba(255,255,255,.3);

	-webkit-border-radius: 50px; /* px here for older iPads */
	-moz-border-radius: 50%;
	border-radius: 50%;
	vertical-align: middle;
}

html.no-touch ul.dotNav a {
	-webkit-transition: all .1s ease-in;
	-moz-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	-ms-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

ul.dotNav a:hover {
	background: #fff;
	background: rgba(255,255,255,.8);
}

ul.dotNav.yellow li.active a {
	background: #FFCB05;
}

ul.dotNav.green li.active a {
	background: #4b9d4c;
}

ul.dotNav.orange li.active a {
	background: #FF8013;
}

ul.dotNav.blue li.active a {
	background: #0072BC;
}

ul.dotNav.red li.active a {
	background: #ED1C24;
}

ul.dotNav.purple li.active a {
	background: #8F53A1;
}

#subnav{
	position: relative;
	
	height:105px;
	background: rgba(0, 0, 0, 0.8);

	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;

	top:50px;
}
#subnav.active {
	
	-webkit-transition: all .4s .7s ease-in-out;
	-moz-transition: all .4s .7s ease-in-out;
	-o-transition: all .4s .7s ease-in-out;
	-ms-transition: all .4s .7s ease-in-out;
	transition: all .4s .7s ease-in-out;

	top: -105px;
}
#subnav .subnav_group{
	position: relative;
	top:100%;

	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
#subnav .subnav_group.active {
}
#subnav li {
	display: inline-block;
	height: 100%;
	margin-right: 24px;

	position: relative;
	top: -46px;

}
#subnav li a {
	text-decoration: none;
	font-family: 'Fedra Sans Screen Regular', Helmet, Freesans, sans-serif;
	font-size:16px;
	color:#fff;

	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#subnav li a:hover {
	color:#aaa;
}
#subnav .yellow li.active a {
	color:#333;
}
#subnav .green li.active a {
	color:#4b9d4c;
}
#subnav .orange li.active a {
	color:#FF8013;
}
#subnav .red li.active a {
	color:#ED1C24;
}
#subnav .blue li.active a {
	color:#0072BC;
}
#subnav .purple li.active a {
	color:#8F53A1;
}


#subnav li a span{
	display:inline-block;
	position: relative;
	top:45%;
}

#subnav li a span{
	display:inline-block;
	position: relative;
	top:45%;
}

/*	CUSTOM HURRICAN ICONS	*/
/*#subnav #red_subnav_group{
	
}
#subnav #red_subnav_group span.bg{
	display:block;
	position: absolute;
	width:745px;
	height:10px;
	
	left: 50%;
	top:4px;
	margin-left:-12px;
}
#subnav #red_subnav_group span.inner-bg{
	border-top:2px solid #fff;
	display:block;
	position: relative;
	width:100%;
	left:-50%;
}


#subnav #red_subnav_group.active{
	top:35%;
}
#subnav #red_subnav_group li#subnav_1 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/one.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_1 a:hover span, #subnav #red_subnav_group li.active#subnav_1 a span{
	background-position: center bottom;
}

#subnav #red_subnav_group li#subnav_2 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/two.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_2 a:hover span, #subnav #red_subnav_group li.active#subnav_2 a span{
	background-position: center bottom;
}


#subnav #red_subnav_group li#subnav_3 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/three.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_3 a:hover span, #subnav #red_subnav_group li.active#subnav_3 a span{
	background-position: center bottom;
}

#subnav #red_subnav_group li#subnav_4 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/four.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_4 a:hover span, #subnav #red_subnav_group li.active#subnav_4 a span{
	background-position: center bottom;
}

#subnav #red_subnav_group li#subnav_5 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/five.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_5 a:hover span, #subnav #red_subnav_group li.active#subnav_5 a span{
	background-position: center bottom;
}

#subnav #red_subnav_group li#subnav_6 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/six.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_6 a:hover span, #subnav #red_subnav_group li.active#subnav_6 a span{
	background-position: center bottom;
}

#subnav #red_subnav_group li#subnav_7 a span{
	width:100px;
	height:105px;
	top:0px;
	text-indent: -9999px;
	background: url(../img/hurricanes/seven.png) center top no-repeat;
}
#subnav #red_subnav_group li#subnav_7 a:hover span, #subnav #red_subnav_group li.active#subnav_7 a span{
	background-position: center bottom;
}

*/




div.thumbNavHolder {
	position: absolute;
	
	bottom: -100px;
	left: 0;
	height: 72px;
	width: 100%;
	
	overflow: hidden;

	z-index: 200;
}

html.no-touch div.thumbNavHolder {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

div.thumbNavHolder.active {
	bottom: 38px;
}

ul.thumbNav {
	display: block;
	height: 72px;
	margin: 0 1px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

ul.thumbNav li {
	display: inline-block;
	width: 120px;
	height: 72px;
	background: #fff;
	background: rgba(255,255,255,.5);
	margin-left: 2px;
}

html.no-touch ul.thumbNav li {

	-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.2);
	box-shadow: 0 0 10px 2px rgba(0,0,0,.2);

}

ul.thumbNav img {
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

html.no-touch ul.thumbNav img {
	opacity: .5;
	
	-webkit-transition: all .1s ease-in;
	-moz-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	-ms-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

ul.thumbNav a:hover img {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

div.flyoutNav {
	position: absolute;
	z-index: 10;
	left: 20px;
	bottom: 38px;
	height: 0;
	overflow: hidden;

	z-index:300;
}

html.no-touch div.flyoutNav {
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

div.flyoutNav.active {
	height: 500px;
}

div.flyoutInner {
	height: 500px;
}

div.flyoutNav ul {
	width: 300px;
	background: #666;
	color: #fff;
}

div.flyoutNav a {
	display: block;
	padding: 10px 60px 10px 10px;
	font-size: 12px;
	line-height: 14px;
	color: #fff;
	text-decoration: none;
}

div.flyoutNav a:hover {
	text-decoration: underline;
}

div.flyoutNav a br {
	display: none;
}

div.flyoutNav .title a {
	padding-top: 14px;
	font-size: 16px;
	line-height: 19px;
	text-transform: uppercase;
}

div.flyoutNav ul.yellow {
	background: #FFCB05;
}

div.flyoutNav ul.yellow a {
	color: #333;
}

div.flyoutNav ul.green {
	background: #4b9d4c;
}

div.flyoutNav ul.orange {
	background: #FF8013;
}

div.flyoutNav ul.blue {
	background: #0072BC;
}

div.flyoutNav ul.red {
	background: #ED1C24;
}

div.flyoutNav ul.purple {
	background: #8F53A1;
}

.slide {
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #191919 url(../img/watermark.png) center center no-repeat;
}

html.no-touch .slide {
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	-ms-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

div.coverSlide {
	left: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.slide.active {
	left: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}




/* don't know whay we need this, but the coverSlide title shows up in old IE on any slide if you use a permalink otherwise */
html.ieold .slide.coverSlide h1.sectionTitle {display: none;}
html.ieold .slide.coverSlide.active h1.sectionTitle {display: block;}

.slide.coverSlide h1.sectionTitle img {
	display: block;
}

.slide.coverSlide h1.sectionTitle img.title {
	margin-bottom: 170px;
}
.slide.coverSlide h1.sectionTitle img.credits {
	position: relative;
	left: -360px;
}


.slide.offLeft,
.slide.jumpLeft {
	left: -100%;
}

.slide.offRight,
.slide.jumpRight {
	left: 100%;
}

.slide.offRight .centeredLeft,
.slide.offLeft .centeredLeft,
.slide.offRight .centeredRight,
.slide.offLeft .centeredRight{
	transition: opacity .2s .5s ease-in-out;
	opacity: 0;
	
}
.slide.active .centeredLeft{
	transition: opacity .2s .75s ease-in-out;
	opacity: 1;
}
.slide.active .centeredRight{
	transition: opacity .2s 1.75s ease-in-out;
	opacity: 1;
}


html.no-touch .slide.jumpLeft,
html.no-touch .slide.jumpRight {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

.slide span.imgWrap {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.slide span.imgWrap img {
	display: block;
	max-width: 100%;
	max-height: none;
	margin: 0 auto;
}

.slide span.imgWrap img.overlay {
	position: absolute;
	top: 0;
	left: 0;
}


.slide span.imgWrapSlide {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.slide span.imgWrapSlide img {
	display: block;
	height: 100%;
	max-width: initial;
	margin: 0 auto;
	position: relative;
}

.slide span.imgWrapSlide img.overlay {
	position: absolute;
	top: 0;
	left: 0;
}

div.firstConstrainer {
	width: 1024px;
	height: 768px;
	overflow: hidden;
}

div.sizeConstrainer {
	position: relative;
	width: 1024px;
	height: 768px;
	margin: 0 auto;
	overflow: hidden;
	background: #191919 url(../img/spinner.gif) center center no-repeat;
}

html.no-touch div.sizeConstrainer {
	-webkit-box-shadow: 3px 3px 10px 2px #666;
	-moz-box-shadow: 3px 3px 10px 2px #666;
	box-shadow: 3px 3px 10px 2px #666;
}

/* 1024 is the default slide size */

body {
	display: table;
}

div.firstConstrainer {
	display: table-cell;
	vertical-align: middle;
}

html.ieold div.firstConstrainer {
	width: 100%;
}

.slide,
.imgWrap {
	overflow: hidden;
}

.slide span.imgWrap img {
	min-width: 100%;
}

.slide h1.slideTitle {
	position: absolute;
	top: 92px;
	right: 5%;
	width: 30%;
	height: 42px;
	margin-right: 1px;
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	font-weight: normal;
	background: #666;
}


.slide h1.slideTitle.leftSide{
	left:5%;
}
.slide h1.slideTitle.centeredRight{
	left:49.9%;
}
.slide h1.slideTitle.centeredLeft{
	left:19.4%;
}

.slide h1.slideTitle.nohide span {
	cursor: default;
	background-image:none;
}

.slide.coverSlide h1 {
	cursor: default;
}

.slide h1.slideTitle span {
	display: block;
	height: 100%;
	padding: 12px 25px 12px 12px;
	font-weight: bold;
	background: url(../img/expand-white.png) 99% 4px no-repeat;
	cursor: pointer;
}

.slide.yellow h1.slideTitle span {
	background-color: #FFCB05;
	color: #fff;
}

.slide.green h1.slideTitle span {
	background-color: #4b9d4c;
}

.slide.orange h1.slideTitle span {
	background-color: #FF8013;
}

.slide.blue h1.slideTitle span {
	background-color: #0072BC;
}

.slide.red h1.slideTitle span {
	background-color: #ED1C24;
}

.slide.purple h1.slideTitle span {
	background-color: #8F53A1;
}

.slide.contentLeft h1 {
	right: auto;
	left: 5%;
}

.slide .titleWrap{
	position: absolute;
	top:0px;
	width:100%;
	height:100%;
}

.slide .sectionTitleContainer h1 {
	font-size: 112px;
	line-height: 134px;
	color: #fff;
}

.slide div.basicText {
	position: absolute;
	top: 158px;
	right: 5%;
	width: 30%;
	height: 74%;
	margin-right: 1px;
	overflow: hidden;
	word-wrap: break-word;
}


/* IDEA box-shadow: */
.slide div.ideaBox{
	position: absolute;
	top: 92px;
	right: 35%;
	width: 30%;
	margin-right: 1px;
	overflow: hidden;
	
	color:#fff;

	
	font-size: 14px;
	line-height: 21px;

	overflow:hidden;
}
.slide div.ideaBox.leftSide{
	left:35%;
}
.slide div.ideaBox a{
	position: relative;
	display:block;
	text-decoration: none;	
	
	transition: all .3s 1s;
	left:100%;
}
.slide div.ideaBox.leftSide a{
	left:-79%;
}
.slide div.ideaBox a:hover,
.touch .slide div.ideaBox a{
	transition: all .3s 0s;
	left:22%;
}
.slide div.ideaBox.leftSide a:hover,
.touch .slide div.ideaBox.leftSide a{
	transition: all .3s 0s;
	left:0%;
}

.slide div.ideaBox h1 {

	font-size: 16px;
	line-height: 22px;
	font-weight: bold;

}
.slide div.ideaBox .ideaIcon{
	
	position: absolute;	
	height: 73px;
	width: 77px;
	left:-77px;
	top:0px;	

	background: url(../img/idea.png) center center no-repeat;
}
.slide div.ideaBox.leftSide .ideaIcon{
	left:78%;
	top:0px;	
}

.slide div.ideaBox .ideaIcon,
.slide div.ideaBox h1, 
.slide div.ideaBox p{
	background-color:#8f53a1;
	color:#fff;
}

.slide div.ideaBox h1, 
.slide div.ideaBox p{
	width:71%;
	padding: 10px 12px;
}
.slide div.ideaBox .ctaArrow{
	display: inline-block;
	width:10px;
	height:19px;
	background: url(../img/arrow_white_right.png) center right no-repeat;	
	margin-left:5px;
}


html.no-touch .slide.letters div.basicText {
	-webkit-box-shadow: 3px 3px 10px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 3px 3px 10px 2px rgba(0,0,0,.5);
	box-shadow: 3px 3px 10px 2px rgba(0,0,0,.5);
	
	/*-webkit-font-smoothing: antialiased;*/
}

html.ieold .slide.letters div.basicText {border: 1px solid #999;}

html.no-touch .slide.letters div.basicText {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
	margin-bottom: 10px;
}


.slide.letters div.basicText {
/*
	width: 45%;
	height: 83%;
*/
	width: 450px;
	height: 605px;
	right: auto;
	left: 40%;
	top: auto;
	bottom: 60px;
	z-index: 8;
	background: #f1f0f2;
	cursor: pointer;
}


.slide.letters div.basicText.firstPage {
	-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
}

.slide.letters div.basicText.firstPage.active {
	cursor: default;
	z-index: 9;
	
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
}

.slide.letters div.basicText.secondPage {
	left: 42%;
	bottom: 50px;
	
	-webkit-transform:rotate(1.5deg);
	-moz-transform:rotate(1.5deg);
}

.slide.letters div.basicText.firstPage p,
.slide.letters div.basicText.secondPage p {
	display: none;
}

.slide.letters div.basicText.firstPage.active p,
.slide.letters div.basicText.secondPage.active p {
	display: block;
}

.slide.letters div.basicText.secondPage.active {
	z-index: 9;
	
	cursor: default;
	
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
}
.slide.letters.contentLeft div.basicText.firstPage{
	left:5%;
}
.slide.letters.contentLeft div.basicText.secondPage{
	left:5%;
}



.slide.letters div.basicText .goToPage1,
.slide.letters div.basicText .goToPage2 {
	position: absolute; 
	bottom: 10px;
	right: 15px;
	font-size: 10px;
	text-transform: uppercase;
	color: #023596;
	cursor: pointer;
}

.slide.letters div.basicText .goToPage1 span,
.slide.letters div.basicText .goToPage2 span {
	display: inline-block;
	font-size: 14px;
}

.slide.letters div.basicText .goToPage1 {
	right: auto;
	left: 15px;
}

.slide.contentLeft div.basicText,
.slide div.basicText.leftSide {
	right: auto;
	left: 5%;
}

.slide div.basicText.centeredRight{
	left:49.9%;
}
.slide div.basicText.centeredLeft{
	left:19.4%;
}

.slide div.basicText .scrollable {
	height: 100%;
}

html.no-js .slide div.basicText .scrollable {
	overflow: auto;
}

.slide div.basicText h1.letterTitle,
.slide div.basicText p{
	padding: 10px 12px;
	font-size: 14px;
	line-height: 21px;
	background: #fff;
	background: rgba(255,255,255,.9);
}

.slide.letters div.basicText h1.letterTitle,
.slide.letters div.basicText p {
	padding: 10px 45px;
	background: #f1f0f2;
}

.slide.letters div.basicText p.last {
	padding-bottom: 65px;
}

.slide.yellow div.basicText p a {
	color: #FFCB05;
}

.slide.green div.basicText p a {
	color: #4b9d4c;
}

.slide.orange div.basicText p a {
	color: #FF8013;
}

.slide.blue div.basicText p a {
	color: #0072BC;
}

.slide.red div.basicText p a {
	color: #ED1C24;
}

.slide.purple div.basicText p a {
	color: #8F53A1;
}

.slide.letters div.basicText h1.letterTitle,
.slide.letters div.basicText p:first-child {
	padding-top: 35px;
}

.slide div.basicText ul {
	padding: 10px 12px;
	font-size: 16px;
	line-height: 24px;
	background: #fff;
	background: rgba(255,255,255,.9);
}

@media screen and (max-width: 1024px) {

	.slide div.basicText,
	.slide div.basicText .scrollable {
		max-height: 450px;
	}


}

.jspScrollable {
	background: #fff;
	background: rgba(255,255,255,.9);
}

.slide div.basicText .jspScrollable h1,
.slide div.basicText .jspScrollable p,
.slide div.basicText .jspScrollable ul {
		background: transparent;
} 

.slide div.basicText ul li {
	list-style-type: disc;
	margin-left: 17px;
	margin-bottom: 8px;
}

.slide dfn {
	border-bottom: 1px dotted #000;
	cursor: help;
}

.slide.yellow dfn {
	color: #d39f00;
	border-bottom: 1px dotted #edb200;
}

.slide.green dfn {
	color: #4b9d4c;
	border-bottom: 1px dotted #4b9d4c;
}

.slide.orange dfn {
	color: #FF8013;
	border-bottom: 1px dotted #FF8013;
}

.slide.blue dfn {
	color: #0072BC;
	border-bottom: 1px dotted #0072BC;
}

.slide.red dfn {
	color: #ED1C24;
	border-bottom: 1px dotted #ED1C24;
}

.slide.purple dfn {
	color: #8F53A1;
	border-bottom: 1px dotted #8F53A1;
}

.dfnTitle {
	display: none;
	position: absolute;
	z-index: 1000000;
	width: 212px;
	padding: 12px;
	font-size: 11px;
	line-height: 16px;
	background: #666;
	color: #fff;
}

html.no-touch .dfnTitle {
	-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,.3);
	-moz-box-shadow: 0 0 6px 2px rgba(0,0,0,.3);
	box-shadow: 0 0 6px 2px rgba(0,0,0,.3);
}

.dfnTitle:after {
	content: "";
	display: block;
	position: absolute;
	top: -7px;
	right: 3px;
	width: 14px;
	height: 14px;
	background: #666;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.dfnTitle.left:after {
	right: auto;
	left: 3px;
}

.slide div.note {
	position: absolute;
	bottom: 42px;
	left: 70px;
	width: 30%;
	padding: 8px 8px 6px;
	background: #fff;
	background: rgba(255,255,255,.9);
}

.slide.contentLeft div.note {
	left: auto;
	right: 70px;
}
.slide div.note.leftSide {
	left: 5%;
	right: auto;
}

.slide div.note h2 {
	padding-right: 20px;
	font-size: 12px;
	line-height: 18px;
	background: url(../img/expand.gif) 100% 0 no-repeat;
	cursor: pointer;
}

.slide div.note div.captionHolder {
	font-size: 12px;
	line-height: 16px;
}

.slide div.note p {
	padding-top: 8px;
	padding-right: 8px;
}

.slide div.note ul li {
	padding-top: 8px;
	padding-right: 8px;
	margin-left: 15px;
	list-style-type: disc;
}

.slide div.centeredImage {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	height: 25%;
	margin: -12.5% 0 0 -12.5%;
}

ul.sectionHeads {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 75px;
	width: 90%;
	margin: 0 5%;
	display: table;
}

ul.sectionHeads li {
	display: table-cell;
	width: 16%;
	margin-bottom: 5px;
	vertical-align: top;
}

html.ie6 ul.sectionHeads li,
html.ie7 ul.sectionHeads li {float: left;}

ul.sectionHeads a {
	display: block;
	margin-right: 3%;
	height: 0%;
	overflow: hidden;
	padding: 0 10px;
	color: #000;
	background: #fff;
	background: rgba(255,255,255,.9);
	text-decoration: none;
	font-size: 12px;
	line-height: 0;
	border-top: 0 solid #666;
}

html.ie6 ul.sectionHeads li a,
html.ie7 ul.sectionHeads li a {padding: 10px ! important;}

html.no-touch ul.sectionHeads a {
	-webkit-transition-property: all;
	-moz-transition-property: all;
	-o-transition-property: all;
	-ms-transition-property: all;
	transition-property: all;

	-webkit-transition-duration: .4s;
	-moz-transition-duration: .4s;
	-o-transition-duration: .4s;
	-ms-transition-duration: .4s;
	transition-duration: .4s;
}

ul.sectionHeads.reveal a {
	height: 100%;
	min-height: 44px;
	padding: 13px 10px;
	border-top: 5px solid #666;
	line-height: 19px;
}

ul.sectionHeads li:last-child a {
	margin-right: 0;
}

ul.sectionHeads a:hover {
	background: #333;
	background: rgba(0,0,0,.1);
	color: #fff;
}

ul.sectionHeads li a.active {
	background: #666;
	color: #fff;
}

ul.sectionHeads a.yellow {
	border-color: #FFCB05;
}

ul.sectionHeads a.yellow:hover,ul.sectionHeads li a.yellow.active {
	background-color: #FFCB05;
}

ul.sectionHeads a.green {
	border-color: #4b9d4c;
}

ul.sectionHeads a.green:hover,ul.sectionHeads li a.green.active {
	background-color: #4b9d4c;
}

ul.sectionHeads a.orange {
	border-color: #FF8013;
}

ul.sectionHeads a.orange:hover,ul.sectionHeads li a.orange.active {
	background-color: #FF8013;
}

ul.sectionHeads a.blue {
	border-color: #0072BC;
}

ul.sectionHeads a.blue:hover,ul.sectionHeads li a.blue.active {
	background-color: #0072BC;
}

ul.sectionHeads a.red {
	border-color: #ED1C24;
}

ul.sectionHeads a.red:hover,ul.sectionHeads li a.red.active {
	background-color: #ED1C24;
}

ul.sectionHeads a.purple {
	border-color: #8F53A1;
}

ul.sectionHeads a.purple:hover,ul.sectionHeads li a.purple.active {
	background-color: #8F53A1;
}

.hidden{
	display:none;
}


/* Media queries!
-------------------------------------------------------------------------------*/


@media screen and (min-width: 1152px) and (min-height: 864px) {
	
	html {overflow: hidden;}
	
	div.sizeConstrainer {
		width: 1152px;
		height: 864px;
	}

	.slide.coverSlide h1.sectionTitle {
		bottom: 75px;
	}
	.slide h1.sectionTitle.twoLines {
		top: 160px;
	}
	
	.slide.coverSlide h1.sectionTitle img.title {
		margin-bottom: 200px;
	}

	.slide {
		max-height: 864px;
	}

	.slide.letters div.basicText {
		left: 50%;
		bottom: 120px;
	}
	
	.slide.letters div.basicText.secondPage {
		left: 52%;
		bottom: 110px;
	}
	
	ul.sectionHeads a {
		font-size: 12px;
	}

}


@media screen and (min-width: 1280px) and (min-height: 960px) {

	div.sizeConstrainer {
		width: 1280px;
		height: 960px;
	}

	.slide.coverSlide h1.sectionTitle {
		bottom: 125px;
	}
	
	.slide.coverSlide h1.sectionTitle img.title {
		margin-bottom: 240px;
	}

	.slide {
		max-height: 960px;
	}
	
	ul.sectionHeads a {
		font-size: 14px;
	}
}


@media screen and (min-width: 1440px) and (min-height: 1050px) {
	
	div.sizeConstrainer {
		width: 1440px;
		height: 1050px;
	}

	.slide.coverSlide h1.sectionTitle {
		bottom: 165px;
	}
	
	.slide.coverSlide h1.sectionTitle img.title {
		margin-bottom: 270px;
	}

	.slide {
		max-height: 1050px;
	}

	.slide.letters div.basicText {
		left: 50%;
		bottom: 200px;
	}
	
	.slide.letters div.basicText.secondPage {
		left: 52%;
		bottom: 190px;
	}
	
	ul.sectionHeads a {
		font-size: 14px;
	}

}

@media screen and (min-width: 1600px) and (min-height: 1200px) {

	div.sizeConstrainer {
		width: 1600px;
		height: 1200px;
	}

	.slide.coverSlide h1.sectionTitle {
		bottom: 235px;
	}
	
	.slide.coverSlide h1.sectionTitle img.title {
		margin-bottom: 290px;
	}

	.slide {
		max-height: 1200px;
	}

	.slide.letters div.basicText {
		left: 50%;
		bottom: 260px;
	}
	
	.slide.letters div.basicText.secondPage {
		left: 52%;
		bottom: 250px;
	}
	
	ul.sectionHeads a {
		font-size: 14px;
	}

}

/* ipad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	html {overflow: hidden;}
	
	div.firstConstrainer,div.sizeConstrainer {
		width: 100%;
		height: 100%;
	}

	.slide.coverSlide h1.sectionTitle {
		height: auto;
		bottom: auto;
		top: 275px;
	}
	
	.slide.coverSlide h1.sectionTitle img.title {
	margin-bottom: 140px;
	}

	.slide.letters div.basicText {
		bottom: 60px;
		height: 75%;
		min-height: none;
		max-height: none;
	}
	
	.slide.letters div.basicText h1.letterTitle, .slide.letters div.basicText p {
		padding-bottom: 0;
		font-size: 13px;
	}
	
	.slide.letters div.basicText p:first-child {
		padding-top: 20px;
	}	

	.slide.letters div.basicText.secondPage {
		bottom: 50px;
	}

	.slide h1.slideTitle {
		font-size: 15px;
	}

}
/* end ipad */

/* noscript styles
-------------------------------------------------------------------------------*/
html.no-js {height: auto; overflow: auto;}
		
html.no-js body {display: table; height: auto;}

html.no-js div.firstConstrainer, 
html.no-js div.sizeConstrainer {display: block; width: 1024px; height: auto; margin-left: auto; margin-right: auto; background: transparent; overflow: auto; box-shadow: none;}

html.no-js .slide {position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 1024px; height: 768px; margin-left: auto; margin-right: auto; margin-bottom: 40px; background: transparent;}

html.no-js div.coverSlide {opacity: 1;}

html.no-js ul.sectionHeads a {height: 100%; min-height: 44px; padding: 13px 10px; border-top: 5px solid #666; line-height: 19px;}

html.no-js .slide div.note div.captionHolder {display: block;}

html.no-js .slide div.note h2,
html.no-js .slide h1.slideTitle span {background-image: none;}

html.no-js .slide.letters div.basicText {bottom: 50px;}

html.no-js .slide.letters div.basicText .goToPage1,
html.no-js .slide.letters div.basicText .goToPage2 {display: none;}


/* Print styles (these are the same as the noscript styles)
-------------------------------------------------------------------------------*/
@media print {

html {height: auto; overflow: auto; background: transparent;}
		
html body {display: table; height: auto; background: transparent;}

div.firstConstrainer, 
div.sizeConstrainer {display: block; width: 1024px; height: auto; margin-left: auto; margin-right: auto; background: transparent; overflow: auto; box-shadow: none;}

.slide {position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 1024px; height: 768px; margin-left: auto; margin-right: auto; margin-bottom: 40px; background: transparent; opacity: 1; page-break-after: always;}

div.coverSlide {opacity: 1;}

ul.sectionHeads a {height: 100%; min-height: 44px; padding: 13px 10px; border-top: 5px solid #666; line-height: 19px;}

.slide div.note div.captionHolder {display: block;}

.slide div.note h2,
.slide h1.slideTitle span {background-image: none;}

.slide.letters div.basicText {bottom: 50px;}

.slide.letters div.basicText .goToPage1,
.slide.letters div.basicText .goToPage2 {display: none;}

#thumbNav {display: none;}
	
}





/* jQuery plugin styles
-------------------------------------------------------------------------------*/
/* jScrollPane */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: transparent;
	opacity: 0;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: block;
	background: transparent;
}

.jspVerticalBar .jspCap
{
	height: 20px;
}

.jspHorizontalBar .jspCap
{
	width: 50px;
	height: 100%;
}


.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #b1b4b8;
	background: rgba(255,255,255,.4);
	width: 2px;
	margin-left: 8px;
	position: relative;
}

.basicText .jspTrack {
	background: #b1b4b8;
}

.jspDrag
{
	background: #000;
	position: relative;
	top: 0;
	left: -1px;
	width: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}




/* HoverScroll */

/* Main container */
div.hoverscroll {
	position:relative;
}


/* List container */
div.hoverscroll div.listcontainer {
	overflow:hidden;
}
div.hoverscroll div.fixed-listcontainer {
    overflow: hidden;
    float: left;
}

/* Actual list containing items */
div.hoverscroll ul.list {
	list-style:none;
	margin:0;
	padding:0;
}

/* Items contained in the list */
div.hoverscroll ul.list li.item {
	display:block;
	padding:0;
}
div.hoverscroll.horizontal ul.list li.item {
	float:left;
}
div.hoverscroll.horizontal.rtl ul.list li.item {
	float: right;
}



/* Arrows */
div.hoverscroll div.arrow {
	position:absolute;
	float:none;
	background-color:transparent;
	background-position:center;
	background-repeat:no-repeat;
	opacity:0.8;
	filter:alpha(opacity=80);
}
div.hoverscroll div.fixed-arrow {
    display: block;
    float: left;
    background-color: #ccc;
    background-position: center;
    background-repeat: no-repeat;
}

div.hoverscroll div.arrow.left,
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.left,
div.hoverscroll div.fixed-arrow.right {
	top:0px;
	width:40px;
	height:100%;
}
div.hoverscroll div.arrow.left,
div.hoverscroll div.fixed-arrow.left {
	left:0px;
/*	background-image:url('gfx/arrow-left-small.png');*/
}
div.hoverscroll div.arrow.right,
div.hoverscroll div.fixed-arrow.right {
	right:0px;
/*	background-image:url('gfx/arrow-right-small.png');*/
}

div.hoverscroll div.arrow.top,
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.top,
div.hoverscroll div.fixed-arrow.bottom {
	left:0px;
	width:100%;
	height:40px;
}
div.hoverscroll div.arrow.top,
div.hoverscroll div.fixed-arrow.top {
	top:0px;
	background-image:url('gfx/arrow-up-small.png');
	
}
div.hoverscroll div.arrow.bottom,
div.hoverscroll div.fixed-arrow.bottom {
	bottom:0px;
	background-image:url('gfx/arrow-down-small.png');
}