@-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 { position:absolute;}

#logo {position: absolute; height: 64px; z-index: 10; 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 0px 0 10px; margin:0;}
.notSupportedPromptText a{color: #fff; text-decoration: underline; cursor: pointer; font-weight: bold;}

#scontainer
{
    /*width: 500px;
    height: 400px;
    background-color: red;
    border: 1px solid red;*/
    color: white;  /* for error messages, etc. */
}
#textOptions h4 {font-size: 1em; font-weight: normal; margin: 0 0 10px 0; font-family: Georgia;}
#textOptions p {font-size: .875em; font-weight: normal; margin: 0 0 10px 0; font-family: Arial;}
#textOptions p a {color: #fff; text-decoration: underline;}
#textOptions p img {margin: 5px 0; padding: 0;}

h1#objectTitle, #statusDiv {position: absolute; top: 20px; right: 20px; color: #fff; font-size: 1.250em; font-family: Georgia; font-weight:normal; margin: 0; padding: 0;}
#statusDiv {left: 45px; font-size: 1em;}
#statusDiv p {margin: 0; padding: 0; width: 400px;}

#navigatorDiv {position: absolute; top: 75px; left: 75px; margin-right: 50px; color: White; display: inline; overflow:auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom;}
#navigatorDiv .navigatorTemplateHolder {float: left; margin: 0 10px 25px 0; margin-bottom: 50px; -webkit-transform: translate3d(0,0,0);}
#navigatorDiv img {float: left; height: 200px; width: auto; background: #7F7F7F;}
/*#navigatorDiv div.navImage {float: left; height: 200px; width: auto; background: #7F7F7F;}*/
#navigatorDiv .navImages {}
#navigatorDiv p {text-align: center; font-size: .875em;font-family: Arial; margin: 5px 0 0 0; padding: 0;}

#menuContainer {color: black; position: absolute; top: 75px; font-family: Georgia; display: none;}

#menuItems select {
    margin: 10px 0 0 0;
    padding: 2px;
    font-size: 0.8em;
    font-family: Arial;
}

#menuItems label {
    color: #fff;
    font-size: .9em;
    margin: 0 10px;
    font-family: Arial;
}

.unselectable
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#menuContainer menu { position: absolute; margin: 0; padding: 0;}
#menuContainer menu li {margin: 0; padding: 0; list-style: none; cursor: pointer;}

#menuContainer #menuOptionsBg {z-index: 2;position: absolute; margin: 0; padding: 0; background:black; opacity: 0.8; width: 42px; height: 294px;}
#menuContainer #menuOptionsBorder {z-index: 2;position: absolute; margin: 0; padding: 0; width: 42px; height: 294px;
                                border-bottom: 1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #fff; opacity:0.5;}
#menuContainer menu#menuOptions {z-index: 2;}
#menuContainer menu#menuOptions li a { margin: 0; padding: 0; display: block; width: 42px; height: 42px;}

#menuContainer menu#menuOptions li#menuMenuButton a  { background: transparent url("../Images/MenuIcons/Menu_Menu.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuMenuButton a:hover, #menuContainer menu#menuOptions li#menuMenuButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Menu.png") no-repeat; opacity: 1;}

#menuContainer menu#menuOptions li#menuManipulateButton a { background: transparent url("../Images/MenuIcons/Menu_Manipulate.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuManipulateButton a:hover, #menuContainer menu#menuOptions li#menuManipulateButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Manipulate.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuMediaButton a { background: transparent url("../Images/MenuIcons/Menu_Listen.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuMediaButton a:hover, #menuContainer menu#menuOptions li#menuMediaButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Listen.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuTextButton a { background: transparent url("../Images/MenuIcons/Menu_Read.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuTextButton a:hover, #menuContainer menu#menuOptions li#menuTextButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Read.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuSearchButton a { background: transparent url("../Images/MenuIcons/Menu_Search.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuSearchButton a:hover, #menuContainer menu#menuOptions li#menuSearchButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Search.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuSettingsButton a { background: transparent url("../Images/MenuIcons/Menu_Settings.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuSettingsButton a:hover, #menuContainer menu#menuOptions li#menuSettingsButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Settings.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuHelpButton a { background: transparent url("../Images/MenuIcons/Menu_Help.png") no-repeat; opacity: 0.7;}
#menuContainer menu#menuOptions li#menuHelpButton a:hover, #menuContainer menu#menuOptions li#menuHelpButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Help.png") no-repeat; opacity: 1}

#menuContainer menu#menuOptions li#menuMenuButton.disabled a, #menuContainer menu#menuOptions li#menuManipulateButton.disabled a, #menuContainer menu#menuOptions li#menuMediaButton.disabled a, 
#menuContainer menu#menuOptions li#menuTextButton.disabled a, #menuContainer menu#menuOptions li#menuSearchButton.disabled a, #menuContainer menu#menuOptions li#menuSettingsButton.disabled a, #menuContainer menu#menuOptions li#menuHelpButton.disabled a,
menu#manipulateOptions li#disbindButton.disabled, menu#manipulateOptions li#rotateButton.disabled  {opacity: 0.2}

#menuItemsContainer, #menuManipulationContainer, #menuTextContainer, #menuSearchContainer, #menuMediaContainer, #menuSettingsContainer, #menuHelpContainer {position: absolute; left: -350px; padding: 0 0 0 0;}

#menuItems, menu#manipulateOptions, #menuSearchContainer #searchOptions, #menuSettingsContainer #settingsOptions, #menuHelpContainer #helpOptions {position: absolute;width: 0px; height: 0px; overflow: auto;-webkit-overflow-scrolling: touch;-ms-content-zooming:zoom;-ms-content-zooming:zoom;}
 #menuMediaContainer #mediaOptions, div#textOptions {position: absolute;width: 0px; height: 0px;}
#menuItemsBg, #manipulateOptionsBg, #textOptionsBg, #searchOptionsBg, #mediaOptionsBg, #searchOptionsBg, #settingsOptionsBg, #helpOptionsBg {position: absolute; background:black; opacity: 0.8}
#menuItemsBorder, #manipulateOptionsBorder, #textOptionsBorder, #searchOptionsBorder, #mediaOptionsBorder, #searchOptionBorder, #settingsOptionsBorder, #helpOptionsBorder {position: absolute; border: 1px solid #fff; opacity: 0.5}
#menuItems menu li { clear: both;}
#menuItems menu li, menu#manipulateOptions li, #searchOptions #searchBox, #mediaOptions #mediaOld menu#mediaOldMenu li {padding: 10px 10px 0 10px; display: none; color: White;}
#menuItems menu li {display: block;}
#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: Georgia;}
#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#manipulateOptions li {margin: 0; padding: 5px 0 5px 5px; height: 21px; line-height: 21px;}
menu#manipulateOptions li a {font-size: .875em;font-family: Arial; clear: both; text-indent: 25px;}
menu#manipulateOptions li a.manipulateIcon {display: block; /*width: 21px;*/ height: 21px; float: left;}
menu#manipulateOptions li a.disbind {background: transparent url("../Images/MenuIcons/Menu_Index.png") no-repeat;}
menu#manipulateOptions li a.reset {background: transparent url("../Images/MenuIcons/Menu_Reset.png") no-repeat;}
menu#manipulateOptions li a.rotate {background: transparent url("../Images/MenuIcons/Menu_Rotate.png") no-repeat;}
menu#manipulateOptions li a.zoomIn {background: transparent url("../Images/MenuIcons/Menu_Zoom_In.png") no-repeat;}
menu#manipulateOptions li a.zoomOut {background: transparent url("../Images/MenuIcons/Menu_Zoom_Out.png") no-repeat;}
menu#manipulateOptions li a.move {background: transparent url("../Images/MenuIcons/Menu_Drag.png") no-repeat;}
/*menu#manipulateOptions li:hover#disbindButton {background: red url("../Images/MenuIcons/Menu_Index.png") no-repeat 10px 10px;}*/
#menuItems menu li:hover, /*menu#manipulateOptions li:hover, menu#manipulateOptions li#moveButton.selected, */
#mediaOptions li#listenButton.selected, #mediaOptions #mediaOld #mediaOldMenu li:hover, #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,
#mediatabs-1 li:hover, #mediatabs-2 li:hover, #mediaTabs li.selected, #mediaDisplayUni li:hover {color:  #F5F6CE; cursor: pointer;}

menu#manipulateOptions li:hover,menu#manipulateOptions li:hover, menu#manipulateOptions li#moveButton.selected {background: #989797;}

#mediaDisplayUni li {color: #fff;cursor: pointer;}

#menuItems p, menu#manipulateOptions p, #searchOptions #objectResults p, #searchOptions #spreadResults p, #mediatabs-1 li p, #mediatabs-2 li p {margin: 0; padding: 0;font-size: .875em;font-family: Arial;}
#menuItems p.menuTitle, #searchOptions #objectResults p.menuTitle {font-size: 1em;font-family: Georgia;}
#menuItems p.menuDesc {font-size: .875em;font-family: Arial;}
div#textOptions {}
#mediaOld menu {/*width: 100%;*/}
#mediaNew #mediaTabs {/*height: 100%; margin: 5px; font-size: .9em;*/}
#mediaNew #videoHolder {position: absolute;}

#mediatabs-1 ol, #mediatabs-2 ol, #mediatabs-1 ol:hover, #mediatabs-2 ol:hover { list-style-type:none; margin: 0 0px; padding: 0; color: #fff;}
#mediatabs-1 li, #mediatabs-2 li {padding: 0 10px 10px 0px; margin: 0; cursor: pointer;}
#texttabs-1 ol, #texttabs-2 ol, #texttabs-1 ol:hover, #texttabs-2 ol:hover { list-style-type:none; margin: 0 0px; padding: 0; color: #fff;}
#texttabs-1 li, #texttabs-2 li {padding: 0 10px 10px 0px; margin: 0; cursor: pointer;}
/*#mediatabs-1 li:hover, #mediatabs-2 li:hover, #mediaTabs li.selected, #mediaDisplay li:hover {color: white;}*/

#audioHolderUni menu li, #videoHolderUni menu li, #imageHolderUni menu li,
#audioHolderState menu li, #videoHolderState menu li, #imageHolderState menu li, 
#textContentState menu li, #textContentUniversal menu li {padding: 5px 10px 5px 10px; text-align: right; color: #fff;}
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, #textContentState menu, #textContentUniversal menu {position: relative;}
#audioHolderUni p, #videoHolderUni p, #imageHolderUni p, #audioHolderState p, #videoHolderState p, #imageHolderState p {padding: 0; margin: 0 0 10px 0; color: #fff;}

textarea:focus, input:focus{
    outline: none;
}

#searchOptions #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: 5px 10px 5px 10px;
    position: relative;
    white-space: nowrap;
    line-height: 142%;
    width: 280px;
    /*margin: 5px 10px 5px 10px;*/
    margin: 5px 0 10px 10px;
}

#searchOptions input#searchInput 
{
    font-size: 100%;
    /*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: 100%;
}
    
#searchOptions input#searchGoInput
{
    background: no-repeat #FFFFFF;
    border: 0px none currentColor;
    cursor: pointer;
    height: 16px;
    min-width: 0px;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    right: 9px;
    top: 0.45em;
    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 span.highlight
{
    color: Green;
    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),
only screen and (device-width: 980px)
{
    #menuContainer menu#menuOptions li#menuMenuButton a:hover  { background: transparent url("../Images/MenuIcons/Menu_Menu.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuMenuButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Menu.png") no-repeat; opacity: 1;}
    
    #menuContainer menu#menuOptions li#menuManipulateButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Manipulate.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuManipulateButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Manipulate.png") no-repeat; opacity: 1}

    #menuContainer menu#menuOptions li#menuMediaButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Listen.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuMediaButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Listen.png") no-repeat; opacity: 1}

    #menuContainer menu#menuOptions li#menuTextButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Read.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuTextButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Read.png") no-repeat; opacity: 1}

    #menuContainer menu#menuOptions li#menuSearchButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Search.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuSearchButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Search.png") no-repeat; opacity: 1}

    #menuContainer menu#menuOptions li#menuSettingsButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Settings.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuSettingsButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Settings.png") no-repeat; opacity: 1}

    #menuContainer menu#menuOptions li#menuHelpButton a:hover { background: transparent url("../Images/MenuIcons/Menu_Help.png") no-repeat; opacity: 0.7;}
    #menuContainer menu#menuOptions li#menuHelpButton.mainMenuButtonSelected a { background: transparent url("../Images/MenuIcons/Menu_Help.png") no-repeat; opacity: 1}
    
    #menuContainer menu#menuOptions li#menuMenuButton.disabled a, #menuContainer menu#menuOptions li#menuManipulateButton.disabled a, #menuContainer menu#menuOptions li#menuMediaButton.disabled a, 
    #menuContainer menu#menuOptions li#menuTextButton.disabled a, #menuContainer menu#menuOptions li#menuSearchButton.disabled a, #menuContainer menu#menuOptions li#menuSettingsButton.disabled a, #menuContainer menu#menuOptions li#menuHelpButton.disabled a  {opacity: 0.2}
                                                                                 
    menu#manipulateOptions li {margin: 0; padding: 5px 0 5px 5px; height: 21px; line-height: 21px;}
    
    #menuItems menu li:hover, #mediaOptions #mediaOld #mediaOldMenu li:hover,
    #searchOptions #objectResults li:hover, #searchOptions #spreadResults li:hover,
    #audioHolder menu li:hover, #videoHolder menu li:hover, #audioOldHolder menu li:hover, #imageHolder menu li:hover,
    #mediatabs-1 li:hover, #mediatabs-2 li:hover, #mediaDisplayUni li:hover {color:  #fff; cursor: pointer;}
    
    menu#manipulateOptions li:hover {background: transparent;}
    #mediaOptions li#listenButton.selected, #mediaOptions li#listen2Button.selected, #mediaTabs li.selected {color:  #F5F6CE; cursor: pointer;}
    menu#manipulateOptions li#moveButton.selected {background: #989797;}
}

.ui-tabs .ui-tabs-panel { max-height: 250px;}