/* Loading overlay */ #loading-overlay { position: absolute; top: 0; left: 0; z-index: 15000; width: 100%; height: 100%; background-image: -webkit-gradient(radial, center center, 0, center center, 1000, from(#FFF), to(#999)); background-attachment: fixed; text-align: center; } #loading-overlay p { position: absolute; top: 50%; margin-top: -50px; font-size: 50px; color: #FFF; text-shadow: 1px 1px 3px #999; width: 100%; } #loading-overlay img { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -60px; vertical-align: middle; } /* class to clip the width/height of the document while showing overlays */ .showing-overlay { /*overflow: hidden; width: 100%; height: 100%; */ min-width: 100%; min-height: 100%; position:relative; } .showing-overlay #loading-overlay { display: block; } /* Main navigation buttons (switch to desktop, close document etc.) */ #container > footer { box-shadow: 0px -2px 3px #DFDFDF; margin-top: 2px; } #container > footer > ul a .sprite { width: 24px; margin-top: -5px; } #container > footer > ul a { display: block; width: 100%; text-align: center; line-height: 60px; background-image: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#DDD)); border-top: 1px solid #C2C2C2; margin: 0; padding: 4px 0; font-size: 18px; font-weight: bold; color: #333; text-decoration: none; } /* Sheet list */ #sheet-list { width: 100%; overflow: hidden; margin-bottom: 20px; } .sheet { position: relative; padding: 3px 0; clear: both; border-top: 1px solid #EEE; border-bottom: 1px solid #CCC; } /* Object list */ .object-list { width: 10000px; } .object { width: 142px; height: 108px; float: left; background-color: #FFF; position: relative; overflow: hidden; padding: 3px; border-left: 1px solid #F5F5F5; /*-webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 2px #D9D9D9; box-shadow: 1px 1px 2px #D9D9D9;*/ } .sheet-name { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; border: 0; color: #464646; background-color: #FFF; display: table; } .sheet-name p { display: table-cell; vertical-align: bottom; text-align: right; width: 142px; height: 100%; padding: 3px; line-height: 1.1; } .object .sprite { position: relative; margin-left: 36px; z-index: 1; } .object a { -webkit-tap-highlight-color: transparent; width: 142px; height: 108px; display: block; } .object img { position: absolute; top: 36px; left: 2px; z-index: 2; } .object h2 { width: 100%; /*background: rgb(118, 118, 118);*/ background-color: #EEE; z-index: 3; position: relative; } .object h2 .caption { width: 142px; height: 34px; display: table-cell; vertical-align: middle; line-height: 1.1; padding: 0px 4px; overflow: hidden; font-weight: normal; color: #333; text-align: center; } /* Fullscreen view framework */ .fullscreen-view { width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; background-color: #FFF; overflow: hidden; display: none; } .fullscreen-view > header { height: 36px; margin-bottom: 5px; position: relative; background-color: #ECECEC; border-bottom: 1px solid #AFAFAF; -webkit-box-shadow: 0px 2px 3px #CCC; box-shadow: 0px 2px 3px #CCC; } .fullscreen-view > header > h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: normal; color: #333; text-align: center; line-height: 36px; /* For text ellipsis: */ padding: 0 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fullscreen-view > footer { position: relative; clear: both; text-align: center; height: 36px; background-color: #ECECEC; border-top: 1px solid #AFAFAF; } .nav-btn { display: block; position: absolute; font-size: 10px; color: #000; } .nav-menu .nav-btn { position: static; } .nav-btn-back { top: -1px; left: 0; color: #333!important; margin: 6px 10px; height: 24px; } #nav-btn-divider { position: absolute; top: 0; right: 38px; background-image: -webkit-gradient(linear, left top, left bottom, from(#ECECEC), to(#AFAFAF)); width: 1px; height: 36px; /* border-left: 1px solid #606165;*/ } .nav-btn-menu { top: 0; right: 0; width: 24px; height: 100%; padding: 0 7px; background-image: -webkit-gradient(linear, left top, left bottom, from(#ECECEC), to(#DCDCDC)); } .nav-btn-menu .sprite { margin-top: 6px; } .nav-btn-menu-open { z-index: 55; background: #F3F3F3; height: 37px; border-left: 1px solid #AFAFAF; } .nav-btn-menu-open .sprite { background: transparent url(../img/sprite.png) no-repeat; background-position: 0 -710px; } .nav-menu { display: none; position: absolute; top: 36px; left: 0px; border-top: 1px solid #AFAFAF; z-index: 50; padding: 0; margin: 0; width: 100%; } .nav-menu li { float: left; width: 50%; height: 50px; overflow: hidden; padding: 0; margin: 0; list-style: none; border-bottom: 1px solid #C4C4C4; display: table; position: relative; background-image: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#DDD)); } .nav-menu li:nth-child(odd) { border-right: 1px solid #EEE; } .nav-menu li:nth-child(even) { border-left: 1px solid #C4C4C4; } .nav-menu li .sprite { /*position: absolute; top: 50%; margin-top: -17px;*/ width: 24px; /*display: block;*/ } .nav-menu li a { display: table-cell; vertical-align: middle; font-size: 14px; text-decoration: none; text-align: center; font-family: Arial, sans-serif; font-weight: bold; color: #333333; } .nav-menu li a .text { /* display: block; padding-left: 40px;*/ display: inline-block; max-width: 80%; } .nav-menu-open { display: block; -webkit-box-shadow: 0px 2px 3px #CCC; box-shadow: 0px 2px 3px #CCC; } .fullscreen-view-list { background: #EFEFEF; } .fullscreen-view-list > section { height: 80%; border: 1px solid #bfbfbf; width: 95%; margin: 20px auto 0 auto; background: #FFF; /*-webkit-box-shadow: 0px 1px 4px 0px #0F010F; box-shadow: 0px 1px 4px 0px #0F010F;*/ -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden; } .fullscreen-view-list > footer { display: none; } .fullscreen-view-list ol { width: 100%; padding: 3px 0; } .list-item.list-item-selected { background-color: #62AC1E; } .list-item-selected > span { color: #fff !important; } .list-item { background-color: #fff; position: relative; /*-webkit-box-shadow: 0px 1px 4px 0px #0f010f; box-shadow: 0px 1px 4px 1px #0f010f;*/ border-bottom: 1px solid #bfbfbf; -webkit-tap-highlight-color: #049; } .list-item > a { text-decoration: none; color: inherit; display: block; } .list-icon { margin-top: 38px; position: absolute; top: -16px; left: 7px; padding: 0!important; display: inherit!important; } .list-icon.sprite-next { top: -12px; left: auto; right: 15px; } .list-content { margin-left: 30px; padding: 10px; } /* List item: bookmark */ .list-item-bookmark { height: 80px; } .list-item-bookmark .sprite { top: -12px; margin-left: 8px; margin-right: 8px; } .title-bookmark { font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 17px; color: #333; line-height: 60px; margin-left: 40px; } /* List item: current selection */ .list-item-cur-sel { height: 80px; } .list-item-cur-sel .action-icon { display: inline-block; width: 46px; height: 80px; /*background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.28, rgb(244,244,236)), color-stop(0.79, rgb(252,252,244)) ); border-right: 1px solid #B9B9B9;*/ position: absolute; top: 0; left: 0; } .list-item-cur-sel > a { } .list-item-cur-sel .list-content { /* Half of the height */ line-height: 20px; display: inline-block; position: relative; margin-left: 60px; margin-top: 10px; } .list-item-cur-sel.locked { color: #FFF; background-color: #7596C2; } .list-item-cur-sel.locked .action-icon { display: none; } .list-item-cur-sel.locked .sprite-next { display: none; background-image: url(../img/white-rightarrow.png); background-position: 50% 50%; } .title-cur-sel { font-weight: bold; display: block; } .value-cur-sel { display: block; } /* Close document view */ #close-document-view header { height: auto; padding: 12px 5px; } #close-document-view section { width: 90%; margin: 30px auto; color: #999; line-height: 1.2; font-size: 16px; } #close-document-view section strong { color: #000; } #close-document-view section a { display: block; width: 150px; margin: 50px auto; font-size: 110%; height: 30px; line-height: 30px; } /* Single object fullscreen */ #single-object-view > section { } #single-object-view > footer ul { margin-top: -2px; } #single-object-view > footer li { display: inline-block; padding: 0 2px; color: #797C7F; font-size: 30px; vertical-align: middle; line-height: 36px; height: 36px; } #single-object-view > footer li.active { color: #FFF; text-shadow: 0 0 2px #000; } .so-wrap { float: left; position: relative; } /* Current selections sub view */ #current-selections-sub-view .QvListbox > div > div > div { line-height: 52px; font-size: 20px; } /* Buttons */ .button { color: #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E6E6E6), color-stop(50%, #E4E5E5), color-stop(51%, #DFDEE0), color-stop(100%, #DFDEE0) ); -webkit-border-radius: 3px; border-radius: 3px; height: 24px; line-height: 24px; /* same as height */ padding: 0 8px; font-style: helvetica, arial, sans-serif; font-size: 12px; text-align: center; text-decoration: none; border-top: 1px solid #A0A0A0; border-bottom: 1px solid #A0A0A0; border-left: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; } .button-primary { color: #FFF; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80C018), color-stop(50%, #66AE0C), color-stop(51%, #59A309), color-stop(100%, #59A309) ); border-top: 1px solid #4D870E; border-bottom: 1px solid #4D870E; border-left: 1px solid #538E0F; border-right: 1px solid #538E0F; } /* Selection menu for object(lbs, charts, tables) */ .object-selection-menu { position: absolute; left: 0px; top: 0px; width: 100%; height: 36px; /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0)); background: -webkit-linear-gradient(#ffffff, #e0e0e0);*/ background: #AAA; text-align: center; z-index: 20; } .object-selection-menu > div { display: inline-block; height: 30px; padding: 0 14px; margin: 2px 2px; line-height: 30px; } @media only screen and (max-device-width: 480px) { .ModalDialog { width: 300px; margin-left: -150px; margin-top: -169px; } .ModalDialog_Header img { display: none; } .ModalDialog_Body { height: 258px; } }