﻿@-ms-viewport{
    width: device-width;
    height: device-height;
}

body, html {margin: 0; padding: 0; border: 0;}

body { background: black; font-family: Arial; font-size: 100%; -ms-content-zooming:none;-ms-touch-action: none;}

body, canvas, div { margin: 0; padding: 0;}

canvas, #objectContainer, #buttonBar, #scontainer, #dragContainment { position:absolute;}

#logo {position: absolute; height: 100px; margin: 11px 0 0 13px;}
#logoRam {position: absolute; height: 100px; margin: 122px 0 0 13px; display: none;}

#noScript {color: #fff; padding: 100px 0 0 10px;}

.chromeFrameInstallDefaultStyle {width: 800px; border: thin solid #fff;}

#chromeFramePrompt, #browserNotSupportedOperaMini, #browserNotSupportedRes {display: none;}
.notSupportedPromptText {color: #fff; padding: 120px 100px 0 10px; margin:0;}
.notSupportedPromptText a{color: #fff; text-decoration: underline; cursor: pointer; font-weight: bold;}

#ui2ButtonBar {position: absolute; bottom: 0px; height: 51px; left:0; right:0; background: transparent url("../Images/bb_bg.jpg") repeat; font-weight: bold; color: #6f6f6f; font-size: .8em; display:none;}
#ui2Left, #ui2Right {float: left; width: 40%; height: 51px;}
#ui2Right {float: right;}
#ui2Center {position:absolute; left: 40%; width: 20%; height: 51px; font-weight: normal; font-size: 0.9em;}
#ui2Center p.pagination {padding: 0; text-align: center; position: absolute; width: 100%; margin: 0; top: 2px;}
#bookSlider {width: auto; display: none; margin: 20px 5px 0 5px;}

#ui2SliderLeft, #ui2SliderRight {position: relative; top: 50%; height: 16px; margin-top: -8px; width: 20%; float: left; text-align: center;}
#ui2SliderCenter {width: 60%; float: left;}

menu#ui2Left1, menu#ui2Right1 {float: left; width: auto; margin: 12px 0 0 0; padding: 0;}
menu#ui2Left2 {float: right; width: auto; margin: 12px 0 0 0; padding: 0;}
menu#ui2Left1 li, menu#ui2Left2 li, menu#ui2Right1 li {float: left; padding: 2px; display: block; margin: 0; width: 80px; height: 18px; line-height: 18px; text-align: center; border: 2px solid transparent;}
menu#ui2Left1 li, menu#ui2Left2 li {width: 45px;}
menu#ui2Left2 li#zoomButtonHolder {width: auto;}
menu#ui2Left2 li#zoomButtonHolder a#zoomOutButton {padding: 0 5px 0 8px;}
menu#ui2Left2 li#zoomButtonHolder a#zoomInButton {padding: 0 8px 0 5px;}
menu#ui2Right1 li#listenMoreOldButton {width: 90px;}
menu#ui2Left1 li a, menu#ui2Left2 li a, menu#ui2Right1 li a, #ui2Center a {cursor: pointer;}
menu#ui2Left1 li a:hover, menu#ui2Left2 li a:hover, menu#ui2Right1 li a:hover {color: #fff;}
menu#ui2Left1 li.disabled a:hover, menu#ui2Left2 li.disabled a:hover, menu#ui2Right1 li.disabled a:hover {color: #6f6f6f;}
menu#ui2Left1 li.disabled, menu#ui2Left2 li.disabled, menu#ui2Right1 li.disabled {opacity: 0.2;}
menu#ui2Left1 li.mainMenuButtonSelected, menu#ui2Left2 li.mainMenuButtonSelected, menu#ui2Right1 li.mainMenuButtonSelected 
{
    border: 2px solid #A3C1D6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
}

menu#ui2Left2 li#spreadPrevButton , menu#ui2Right1 li#spreadFwdButton  {width: 40px;}

menu#ui2Left1 li.vDivider,menu#ui2Left2 li.vDivider,menu#ui2Right1 li.vDivider
{
    width: 0px;
    border-left: 1px solid #6f6f6f;
    margin: 0 0 0 1px;
    padding: 0;
}

menu#ui2Left1 #menuDivider, menu#ui2Left1 #helpDivider
{
    
}

#infoContainer 
{
    position: absolute;
    top: 0px;
    right: 0px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 10px 10px 10px;
    background: #000;
    display: none;
}

#instructionsContainer
{
    position: absolute;
    top: 40px;
    right: 10px;
    color: #fff; font-size: 1em; font-family: Arial; font-weight:normal;
    width: 50%;
    text-align: right;
}

h1#objectTitle 
{
     color: #fff; font-size: 1.1em; font-family: Arial; font-weight:normal;
     display: inline-block; margin: 0; padding: 0; line-height: 22px; vertical-align: text-top;
}

#scontainer
{
    /*width: 500px;
    height: 400px;
    background-color: red;
    border: 1px solid red;*/
    color: white;  /* for error messages, etc. */
}

#textOptions h4, #textOptions2 h4 {font-size: 1em; font-weight: normal; margin: 0 0 10px 0; font-family: Arial;}
#textOptions p, #textOptions2 p {font-size: .875em; font-weight: normal; margin: 0 0 10px 0; font-family: Arial;}
#textOptions p a, #textOptions2 p a {color: #fff; text-decoration: underline;}
#textOptions p img, #textOptions p img {margin: 5px 0; padding: 0;}

#statusDiv {position: absolute; top: 20px; right: 20px; color: #fff; font-size: 1.250em; font-family: Arial; font-weight:normal; margin: 0; padding: 0;}
#statusDiv {left: 78px; font-size: 1em;}
#statusDiv p {margin: 0; padding: 0; width: 400px;}

#navigatorDiv {position: absolute; bottom: 51px; left: 0px; margin-right: 0px; color: White; display: inline; overflow:hidden;}
#navigatorDiv .navigatorTemplateHolder {float: left; margin: 0 10px 0 0;}
#navigatorDiv img {float: left; height: 75px; width: auto;}
#navigatorDiv .navImages {margin: 0 auto;}
#navigatorDiv p {text-align: center; font-size: .875em;font-family: Arial; margin: 5px 0 0 0; padding: 0; display: block;}

#spreadNavFwd3 {width: 15%; background: red; float: right;}

#navigatorItems {position: absolute; bottom: -125px; width: 150000px;}
#navigatorBg {position: absolute; overflow:hidden; background: black;opacity: .35;filter:Alpha(Opacity=35);}

.unselectable {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

div.panelTitle {margin: 0; padding: 0; border-bottom: thin solid #fff; z-index: 10; cursor: pointer;}
div.panelTitle h2 {margin: 0; padding: 10px 0 10px 10px;font-size: 1.2em; font-family: Arial; color: #A3C1D6; width: 300px; display: inline-block;}
div.panelTitle .closeButton {
                             color: #fff;
                             font-size: 1.5em;
                                 height:24PX;
    width:24PX;
    line-height:24px;
    float: right;
    margin: 9px 9px 0 0;
    text-align:center;
    border:1px solid silver;
    display: table-cell;
    vertical-align:middle;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

#menuItemsContainer{
    position: fixed;
    left: 50%;
    top: 50%;
    height: 400px;
    margin-top: -200px;
    width: 660px;
    margin-left: -330px;
    display: none;
}

#menuOptionsHolder {
    width: 265px;
    float: right;
    display: table-cell;
}

#menuOptionsHolder select {
    margin: 10px 0 0 0;
    padding: 2px;
    width: 155px;
    font-size: 0.8em;
}

#menuOptionsHolder label {
    color: #fff;
    font-size: .9em;
}

#menuHelpContainer, #menuTextContainer1, #menuTextContainer2, #menuListenContainer, #menuListenMoreContainer, #menuSearchContainer, #menuMediaUniContainer, #menuMediaStateContainer {position: absolute; width: 382px; height: 402px; display: none;}
#menuListenContainer, #menuListenMoreContainer {height: 100px;}

#menuHelpContainer {z-index: 1;}

#menuTextContainer1, #menuListenContainer,#menuSearchContainer {top: 50px; left: 116px;}
#menuTextContainer2, #menuListenMoreContainer, #menuListenMoreContainer,#menuHelpContainer, #menuMediaUniContainer, #menuMediaStateContainer {top: 50px; left: 502px;}
#menuListenContainer, #menuListenMoreContainer {top: 460px;}

#menuHelpContainer #helpOptions,#menuSearchContainer #searchOptions, #mediaUniOptions, #mediaStateOptions {position: absolute;}
#helpContent, #searchResults {width: 380px; height: 345px; overflow: auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom; margin: 0 0 10px 0;}
#mediaUniHolder, #mediaStateHolder {width: 360px; height: 335px; overflow: auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom; margin: 10px;}
#menuTextContainer1 #textOptions, #menuTextContainer2 #textOptions2 {position: absolute;width: 380px; height: 400px;}
#textHolder1, #textHolder2 { overflow: auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom; max-height: 325px; padding: 10px; color: #fff}

#menuListenContainer #listenOptions, #menuListenMoreContainer #listenMoreOptions {position: absolute; width: 380px; height: 100px;}
#listenHolder, #listenMoreHolder {margin: 5px 10px;}

#menuContent {position: absolute;width: 660px;}
menu#menuItems {position: absolute; width: 660px; height: 345px; overflow: auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom;
                margin: 0; padding: 0; list-style: none; cursor: pointer;
                }
#menuItemsBg {position: absolute; background:black; opacity: 0.8; width: 660px; height: 400px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
#menuItemsBorder {position: absolute; border: 1px solid #fff; opacity: 0.5; width: 660px; height: 400px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

#helpOptionsBg, #textOptionsBg, #textOptions2Bg, #listenOptionsBg, #listenMoreOptionsBg, #searchOptionsBg, #mediaUniOptionsBg, #mediaStateOptionsBg {position: absolute; background:black; opacity: 0.8; width: 380px; height: 400px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
#helpOptionsBorder, #textOptionsBorder, #textOptions2Border, #listenOptionsBorder, #listenMoreOptionsBorder, #searchOptionsBorder, #mediaUniOptionsBorder, #mediaStateOptionsBorder {position: absolute; border: 1px solid #fff; opacity: 0.5; width: 380px; height: 400px;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

#listenOptionsBg, #listenMoreOptionsBg, #listenOptionsBorder, #listenMoreOptionsBorder {height: 100px;}

/*menu#manipulateOptions, #menuSettingsContainer #settingsOptions {position: absolute;width: 0px; height: 0px; overflow: auto;-webkit-overflow-scrolling: touch;}
#menuMediaContainer #mediaOptions {position: absolute;width: 0px; height: 0px;}
#manipulateOptionsBg, #mediaOptionsBg, #settingsOptionsBg {position: absolute; background:black; opacity: 0.8}
#manipulateOptionsBorder, #mediaOptionsBorder, #searchOptionBorder, #settingsOptionsBorder {position: absolute; border: 1px solid #fff; opacity: 0.5}
*/
menu#menuItems li { float: left; width: 300px;}
menu#menuItems li, menu#manipulateOptions li, #searchOptions #searchBox, #mediaOptions #mediaOld menu#mediaOldMenu li {padding: 10px 10px 0 10px; display: none; color: White;}
#searchOptions #objectResults li, #searchOptions #noResults, #searchOptions #spreadResults li, #menuSettingsContainer #settingsOptions {padding: 5px 10px 5px 10px; color: #fff;}
#helpOptions {color: #fff;}
#helpOptions h3 {padding: 0 10px; margin: 10px 0 5px 0; font-size: 1em; font-family: Arial;}
#helpOptions p {padding: 0 10px; margin: 0 0 10px 0;font-size: .875em;font-family: Arial;}
#helpOptions p.helpManipulate {padding: 10px 10px 0 20px;}
#helpOptions a, #settingsOptions a {font-family: Arial; color: #fff; text-decoration: underline;}
#settingsOptions {font-size: .875em;font-family: Arial; }
#menuSettingsContainer #settingsOptions a {color: #fff; cursor: pointer; text-decoration: underline;}
#searchOptions #objectResults li.searchViewSpreads, li#searchBackToObjectResults {text-align: right; margin-bottom: 5px;font-size: .875em;font-family: Arial;}

menu#menuItems li:hover,#mediaOptions li#listenButton.selected, #mediaOptions li#listen2Button.selected,
#searchOptions #objectResults li:hover, #searchOptions #spreadResults li:hover,
#audioHolder menu li:hover, #videoHolder menu li:hover, #audioOldHolder menu li:hover, #imageHolder menu li:hover,
#mediaUniHolder li:hover, #mediaStateHolder li:hover, #mediaDisplayUni li:hover {color:  #F5F6CE; cursor: pointer;}

menu#manipulateOptions li:hover,menu#manipulateOptions li:hover, menu#manipulateOptions li#moveButton.selected {background: #989797;}

menu#menuItems p, menu#manipulateOptions p, #searchOptions #objectResults p, #searchOptions #spreadResults p, #mediaUniHolder li p, #mediaStateHolder li p {margin: 0; padding: 0;font-size: .875em;font-family: Arial;}
menu#menuItems p.menuTitle, #searchOptions #objectResults p.menuTitle {font-size: 1em;font-family: Arial;}
menu#menuItems p.menuDesc {font-size: .875em;font-family: Arial;}
div#textOptions {}

#mediaUniHolder ol, #mediaStateHolder ol, #mediaUniHolder ol:hover, #mediaStateHolder ol:hover { list-style-type:none; margin: 0 0px; padding: 0; color: #fff;}
#mediaUniHolder li, #mediaStateHolder li {padding: 0 10px 10px 0px; margin: 0; cursor: pointer;}

#audioHolderUni menu li, #videoHolderUni menu li, #imageHolderUni menu li,
#audioHolderState menu li, #videoHolderState menu li, #imageHolderState menu li 
{
    padding: 0px 1px 0px 0px; text-align: right; color: #fff; list-style:none; font-size: .875em;
}
audio, video, #imageHolderUni img, #imageHolderState img {margin: 0; padding: 0; width: 360px;}
#audioHolderUni, #videoHolderUni, #imageHolderUni, #audioHolderState, #videoHolderState, #imageHolderState {display: none;}
#audioHolderUni menu, #videoHolderUni menu, #imageHolderUni menu, #audioHolderState menu, #videoHolderState menu, #imageHolderState menu {position: relative;}
#audioHolderUni p, #videoHolderUni p, #imageHolderUni p, #audioHolderState p, #videoHolderState p, #imageHolderState p {padding: 0; margin: 0 0 10px 0; color: #fff; font-size: .875em;}

textarea:focus, input:focus{
    outline: none;
}

#infoContainer #searchBox
{
    height: 2em;
    /*border-bottom-color: #5C5C5C;
    border-left-color: #5C5C5C;
    border-right-color: #5C5C5C;
    border-top-color: #5C5C5C;*/
    background-color: #ffffff;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    /*border: 0px solid #BABABA;*/
    height: 20px;
    padding: 3px;
    position: relative;
    white-space: nowrap;
    line-height: 100%;
    width: 180px;
    /*margin: 5px 10px 5px 10px;*/
    margin: 0;
    display: inline-block;  
}

#infoContainer input#searchInput 
{
    font-size: 90%;
    /*margin-left: 4px;
    margin-top: 2px;*/
    background: transparent;
    border: 0px none transparent;
    color: #666666;
    height: 1.3em;
    line-height: 1.2em;
    /*margin: 0px 0px 2px 2px;
    padding-left: 5px;
    padding-top: 2px;*/
    width: 160px;
}
    
#infoContainer input#searchGoInput
{
    /*background: no-repeat #FFFFFF;
    background-image: ("../images/search.png");
    background: transparent url("../images/search.png") no-repeat;*/
    background: transparent;
    border: 0px none currentColor;
}

#searchGoHolder
{
    border: 0px none currentColor;
    cursor: pointer;
    
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    right: 9px;
    top: 0.45em;
    height: 16px;
    width: 15px;
}

#searchGoHolder img
{
    position: absolute;height: 16px;
    width: 15px;
}

#searchOptions
{
    padding: 0 0px 0 0;
}
    
#searchOptions #objectResults ol, #searchOptions #spreadResults ol
{
    list-style: none;
    margin: 0;
    padding: 0;
}

#searchOptions #spreadResults ol li
{
    max-height: 100px;
    overflow: auto;  
    -webkit-overflow-scrolling: touch;
    -ms-content-zooming:zoom;
    margin: 10px 0; 
    /*font-size: .750em;*/font-family: Arial;
}

#searchOptions #noResults, #searchOptions #objectResults, #searchOptions #spreadResults
{
    display: none;
}

#spreadResults ol li p span.highlight
{
    color: yellow;
    font-weight: bold;
}

.clear {clear: both;}

/* remove hover styles for iPad and iPhones because they remain after clicks :s */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1),
only screen and (device-height: 768px) and (device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (device-height: 640px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (device-width: 640px)
{
    menu#ui2Left1 li a:hover, menu#ui2Left2 li a:hover, menu#ui2Right1 li a:hover {color: #6f6f6f;}
    menu#ui2Left1 li.disabled a:hover, menu#ui2Left2 li.disabled a:hover, menu#ui2Right1 li.disabled a:hover {color: #6f6f6f;}
}

@media (orientation:landscape) {
    /*html.ipadios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 643px !important;
    }*/
    
    #ui2ButtonBar.ipadios7 {bottom: 20px;}
}

/* Pixel ratio of 1.325. Background-size is 1/1.325 = 75.47%  
@media only screen and (-moz-min-device-pixel-ratio: 1.325), only screen and (-o-min-device-pixel-ratio: 1.325/1), only screen and (-webkit-min-device-pixel-ratio: 1.325), only screen and (min-device-pixel-ratio: 1.325) {
    body {font-size: 75.47%;}
}*/

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67%  
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    body {font-size: 66.67%;}
}*/

/* Pixel ratio of 2. Background-size is 1/2 = 50% 
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    body {font-size: 50%;}
} */

@media only screen and (min-width: 768px) and (min-height: 460px) 
{
    #ui2ButtonBar {font-size: .8em;}
    menu#ui2Right1 li {width: 72px;}
    menu#ui2Left1 li, menu#ui2Left2 li {width: 42px;}
    menu#ui2Left2 li#zoomButtonHolder {width: auto;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomOutButton {padding: 0 5px 0 5px; font-size: 1em;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomInButton {padding: 0 5px 0 5px; font-size: 1em;}
    menu#ui2Right1 li#listenMoreOldButton {width: 78px;}
    h1#objectTitle { max-width:300px; }
    #ui2ButtonBar {height: 102px;}
    #ui2Left, #ui2Right {float: left; width: 50%; height: 51px;}
    #ui2Right {float: right;}
    #ui2Center {position:relative; float: left; left: 0; width: 100%; height: 51px; font-weight: normal; font-size: 0.9em;}
    #menuTextContainer2, #menuListenMoreContainer, #menuListenMoreContainer,#menuHelpContainer, #menuMediaUniContainer, #menuMediaStateContainer {left: 190px;}
}

@media only screen and (min-width: 924px) and (min-height: 410px) 
{
    #ui2ButtonBar {font-size: .8em;}
    menu#ui2Right1 li {width: 72px;}
    menu#ui2Left1 li, menu#ui2Left2 li {width: 42px;}
    menu#ui2Left2 li#zoomButtonHolder {width: auto;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomOutButton {padding: 0 5px 0 8px;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomInButton {padding: 0 8px 0 5px;}
    menu#ui2Right1 li#listenMoreOldButton {width: 78px;}
    h1#objectTitle { max-width:390px; }
    #ui2ButtonBar {height: 51px;}
    #ui2Left, #ui2Right {float: left; width: 40%; height: 51px;}
    #ui2Right {float: right;}
    #ui2Center {position:absolute; width: 20%; left: 40%;}
    #menuTextContainer2, #menuListenMoreContainer, #menuListenMoreContainer,#menuHelpContainer, #menuMediaUniContainer, #menuMediaStateContainer {left: 502px;}
}


@media only screen and (min-height: 410px) 
{
    #menuListenContainer, #menuListenMoreContainer {top: 100px;}
    #menuHelpContainer, #menuTextContainer1, #menuTextContainer2, #menuSearchContainer, #menuMediaUniContainer, #menuMediaStateContainer {height: 302px;}
    #menuTextContainer1 #textOptions, #menuTextContainer2 #textOptions2 {height: 300px;}
    #helpOptionsBg, #textOptionsBg, #textOptions2Bg, #searchOptionsBg, #mediaUniOptionsBg, #mediaStateOptionsBg {height: 300px;}
    #helpOptionsBorder, #textOptionsBorder, #textOptions2Border, #searchOptionsBorder, #mediaUniOptionsBorder, #mediaStateOptionsBorder {height: 300px;}
    #textHolder1, #textHolder2 {max-height: 225px;}
    #helpContent, #searchResults {height: 245px;}
    #menuItemsContainer { height: 300px; margin-top: 0px; top: 50px; }
    menu#menuItems {height: 245px;}
    #menuItemsBg {height: 300px;}
    #menuItemsBorder {height: 300px;}
}

@media only screen and (min-height: 528px) 
{
    #menuListenContainer, #menuListenMoreContainer {top: 360px;}
    #menuHelpContainer, #menuTextContainer1, #menuTextContainer2, #menuSearchContainer, #menuMediaUniContainer, #menuMediaStateContainer {height: 302px;}
    #menuTextContainer1 #textOptions, #menuTextContainer2 #textOptions2 {height: 300px;}
    #helpOptionsBg, #textOptionsBg, #textOptions2Bg, #searchOptionsBg, #mediaUniOptionsBg, #mediaStateOptionsBg {height: 300px;}
    #helpOptionsBorder, #textOptionsBorder, #textOptions2Border, #searchOptionsBorder, #mediaUniOptionsBorder, #mediaStateOptionsBorder {height: 300px;}
    #textHolder1, #textHolder2 {max-height: 225px;}
    #helpContent, #searchResults {height: 245px;}
    #menuItemsContainer { height: 400px; margin-top: -200px;  top: 50%; }
    menu#menuItems {height: 345px;}
    #menuItemsBg {height: 400px;}
    #menuItemsBorder {height: 400px;}
}

@media only screen and (min-height: 628px) 
{
    #menuListenContainer, #menuListenMoreContainer {top: 460px;}
    #menuHelpContainer, #menuTextContainer1, #menuTextContainer2, #menuSearchContainer, #menuMediaUniContainer, #menuMediaStateContainer {height: 402px;}
    #menuTextContainer1 #textOptions, #menuTextContainer2 #textOptions2 {height: 400px;}
    #helpOptionsBg, #textOptionsBg, #textOptions2Bg, #searchOptionsBg, #mediaUniOptionsBg, #mediaStateOptionsBg {height: 400px;}
    #helpOptionsBorder, #textOptionsBorder, #textOptions2Border, #searchOptionsBorder, #mediaUniOptionsBorder, #mediaStateOptionsBorder {height: 400px;}
    #textHolder1, #textHolder2 {max-height: 325px;}
    #helpContent, #searchResults {height: 345px;}
}


/*
@media only screen and (min-width: 768px), 
{ 
    #ui2ButtonBar {font-size: .8em;}
    menu#ui2Right1 li {width: 72px;}
    menu#ui2Left1 li, menu#ui2Left2 li {width: 42px;}
    menu#ui2Left2 li#zoomButtonHolder {width: auto;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomOutButton {padding: 0 5px 0 5px; font-size: 1em;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomInButton {padding: 0 5px 0 5px; font-size: 1em;}
    menu#ui2Right1 li#listenMoreOldButton {width: 78px;}
    h1#objectTitle { max-width:300px; }
    #ui2ButtonBar {height: 102px;}
    #ui2Left, #ui2Right {float: left; width: 50%; height: 51px;}
    #ui2Right {float: right;}
    #ui2Center {position:relative; float: left; left: 0; width: 100%; height: 51px; font-weight: normal; font-size: 0.9em;}
    #menuTextContainer2, #menuListenMoreContainer, #menuListenMoreContainer,#menuHelpContainer, #menuMediaUniContainer, #menuMediaStateContainer {left: 190px;}
}

@media only screen and (min-width: 924px) 
{ 
    menu#ui2Left2 li#zoomButtonHolder a#zoomOutButton {padding: 0 5px 0 8px;}
    menu#ui2Left2 li#zoomButtonHolder a#zoomInButton {padding: 0 8px 0 5px;}
    h1#objectTitle { max-width:390px; }
    #ui2ButtonBar {height: 51px;}
    #ui2Left, #ui2Right {float: left; width: 40%; height: 51px;}
    #ui2Right {float: right;}
    #ui2Center {position:absolute; width: 20%; left: 40%;}
    #menuTextContainer2, #menuListenMoreContainer, #menuListenMoreContainer,#menuHelpContainer, #menuMediaUniContainer, #menuMediaStateContainer {left: 482px;}
}*/



@media only screen and (min-width: 980px) 
{ 
     #ui2ButtonBar {font-size: .9em;}
     menu#ui2Left1 li, menu#ui2Left2 li {width: 44px;}
     menu#ui2Right1 li {width: 76px;}
     menu#ui2Right1 li#listenMoreOldButton {width: 90px;}
}



@media only screen and (min-width: 1025px) 
{
    menu#ui2Left1 li, menu#ui2Left2 li {width: 46px;}
    menu#ui2Right1 li {width: 80px;}
    menu#ui2Right1 li#listenMoreOldButton {width: 90px;}
    h1#objectTitle { max-width:480px; }
}

@media only screen and (min-width: 1281px) 
{
    h1#objectTitle { max-width:640px; } 
}

