@charset "utf-8";
/*
 # Author:    Ben Allen
 # Email:     ben.allen@johnbrownmedia.com
*/ 


/*-- 01 Reset Styles --*/
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, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* remember to define focus styles! */
:focus,:hover,:active { outline: 0;}

body {
    line-height: 1;
    color: #5d1223;
    background:#ddd;
    font-size: 62.5%;
    font-family: "Helvetica Neue",  Helvetica, Arial, FreeSans, sans-serif;
}

ol, ul {list-style: none;}

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

caption, th, td {text-align: left; font-weight: normal;}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

/*-- 02 Font styles --*/
h1, h2, h3, h4, h5, h6 {font-family:"GillAltOneMT Light", "Helvetica Neue",  Helvetica, Arial, FreeSans, sans-serif}
h1 {display:none;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.6em; font-weight:bold;}
h4 {font-size: 1.2em; font-weight:bold;}
h5 {font-size:1.1em;}

p {font-size: 1.1em; line-height:1.2em;}
a {font-size: 1.2em; text-decoration:none;} 
* a {font-size: 1em;}

a {color:#838383;}
a:hover, a:active, a:focus, a.selected {color:#5d1223;}

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

/* Place .clear on the container that needs to be stretched to fit, alternatively if the container has a class or id add it after .clear */ 
.clear, #navigation {display: inline-block;} 
.clear:after, #navigation:after {clear: both; content: "."; display: block; height: 0; visibility: hidden;}

/* Utility classes for javascript */
.disabled{visibility:hidden !important;}
.hidden {display: none !important;} /* neater than using style="display:none" in the html when using javascript */
 
.download {padding-left:12px !important; background:url('../images/downloadIcon.png') no-repeat 0 0;}
 
/* Core page styles */ 
#wrapper {background:#fff; height:590px; position:absolute; top:50%; left:50%; margin:-295px 0 0 -450px; width: 900px;} 

#navigation {width:435px; float:right; padding:100px 45px 0 0;}
#navigation ul{width:80px; margin:0 0 0 10px; display:block; float:left; min-height:20px; height:auto !important; height:20px;}
#navigation li.header {display:none;}
#navigation a {font-size:1.2em; line-height:1.1em;}
#navigation .contact {position:absolute;right:36px;top:92px;}

#navigation .navText a{display:block; text-indent:-9999em; width:80px;}
    .navText a.english{background:url('../images/navigation.png') no-repeat 0 0;}
        .navText a:hover.english{background-position:0 -94px;}
    .navText a.german{background:url('../images/navigation.png') no-repeat 0 -13px;}
        .navText a:hover.german{background-position:0 -107px;}
    .navText a.french{background:url('../images/navigation.png') no-repeat 0 -27px;}
        .navText a:hover.french{background-position:0 -121px;}
    .navText a.italiano{background:url('../images/navigation.png') no-repeat 0 -40px;}
        .navText a:hover.italiano{background-position:0 -134px;}
    .navText a.spain{background:url('../images/navigation.png') no-repeat 0 -53px;}
        .navText a:hover.spain{background-position:0 -147px;}
        
    .navText a.russian{background:url('../images/navigation.png') no-repeat -89px 0;}
        .navText a:hover.russian{background-position: -89px -94px;}
    .navText a.Schinese{background:url('../images/navigation.png') no-repeat -89px -13px;}
        .navText a:hover.Schinese{background-position:-89px -107px;}
    .navText a.Tchinese{background:url('../images/navigation.png') no-repeat -89px -27px;}
        .navText a:hover.Tchinese{background-position:-89px -121px;}
    .navText a.japanese{background:url('../images/navigation.png') no-repeat -89px -40px;}
        .navText a:hover.japanese{background-position:-89px -134px;}
    .navText a.korean{background:url('../images/navigation.png') no-repeat -89px -53px;}
        .navText a:hover.korean{background-position:-89px -147px;}
    .navText a.arabic{background:url('../images/navigation.png') no-repeat -89px -66px;}
        .navText a:hover.arabic{background-position:-89px -160px;}

#copyArea {width:368px; float:left; padding:100px 0 0 42px;}
#copyArea h2 {width:130px; margin:0 0 40px;}
#copyArea .scrollable{margin:25px 0 0; border-bottom:1px solid #838383; height:350px; width:368px; overflow:hidden;  position: relative; display:block;}
.scrollable .items {width:20000em; position:absolute;}
.scrollable .panel {float:left; width:372px; padding:0 4px 0 0;}
.scrollable li {float:left; width:120px; height:116px; margin:0 4px 0 0;}
.scrollable li p {padding:2px 0 0; font-size:1em;}
.scrollable .download {background:url('../images/downloadIcon.png') no-repeat 0 2px;}
.scrollable .preview {width:118px; height:98px; display:block; border:1px solid #E5E5E5; text-align:center;}
.scrollable .preview img {margin:0 auto;}
#prev, #next {font-size:1.2em; font-weight:bold; padding:0 0 0 2px;}

#expanded {position:absolute; bottom:36px; right:38px; width:433px; height:330px; padding:0 0 20px; border-bottom:1px solid #838383;}
#expanded div {border:1px solid #E5E5E5; width:433px; height:330px; text-align:center;}
#expanded img {margin:0 auto;}
#home p, #home h1 {display:none;}
#home img {display:block;}

#intro #wrapper {background:#fff url('../images/introPage.jpg') no-repeat 0 0;}
#intro a {color:#fff;}
#intro a:hover, #intro a:active, #intro a:focus {color:#5d1223;}

#images #wrapper {background:#fff url('../images/headerImages.png') no-repeat 38px 38px;}

#videos #wrapper {background:#fff url('../images/headerVideo.png') no-repeat 38px 38px;}

#text #wrapper {background:#fff url('../images/headerText.png') no-repeat 38px 38px;}

#contact #wrapper {background:#fff url('../images/headerContact.png') no-repeat 38px 38px;}


#text #copyArea {padding:200px 0 0 42px;}
#text #copyArea h2 {margin:3px 0 10px; font-size:2em; padding:15px 0 0; border-top:1px solid #838383; width:368px;}
#text #copyArea p {color:#838383; margin:0 0 10px;}
#text #copyArea a {border-bottom:1px solid #838383; display:block; position:absolute; bottom:36px; width:368px; font-size:1.1em; padding:0 0 5px 12px; background:url('../images/downloadIcon.png') no-repeat 0 0;}


#contact h3{margin:15px 0;}
#contact h4 {font-size:1.1em;}
#contact h5 {font-size:1.1em; color:#9a9b9b; font-weight:bold;}
#contact p {font-size:1.1em; color:#9a9b9b; margin:0 0 10px;}
#contact .contactFields{position:absolute; bottom:40px; left:40px; border-top:1px solid #838383; border-bottom:1px solid #838383;width:820px; height:350px;}
#contact a {text-decoration:none;}
#contact a:hover, #contact a:focus, #contact a:active {text-decoration:underline;}


#contact .Col1{float:left; width:210px; padding:0 180px 0 0;}
#contact .Col2{float:left; width:250px;}