body { /* This chops off any overhanging divs */ overflow:hidden; } /* Portrait */ @media screen and (orientation:portrait) { body { /* background-color: #08F;*/ } #landscape { display: none; } #portrait { display: block; } } /* Landscape */ @media screen and (orientation:landscape) { body { /* background-color: #8F0;*/ } #landscape { display: block; } #portrait { display: none; } } /* Containers and content blocks */ #landscape { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: 1024px; height: 100%; margin: 0px auto; } /* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */ #landscape:after { content:' '; display:block; position:absolute; left:0; top:0; right:0; bottom:0; border: 2px solid #333; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; /*margin: 0px auto;*/ /*position: fixed;*/ /*top: 0px;*/ /*left: 0px;*/ /*width: 1024px;*/ /*min-height: 500px;*/ /*max-height: 768px;*/ /*height: 100%;*/ /* height: 768px;*/ } #drawAreaContainer { /*position: absolute;*/ /*top: 193px;*/ /*left: 193px;*/ /*width: 650px;*/ /*height: 450px;*/ /*background-color: #fff;*/ /*border: 4px solid #000;*/ /*border-radius: 15px;*/ position: absolute; top: 50%; left: 50%; /*margin: -225px 0 0 -325px;*/ background-color: #fff; width: 75%; min-width: 150px; max-width: 650px; height: 70%; min-height: 150px; border: 4px solid #000; border-radius: 15px; } #preview_tmp { position: absolute; top: 0px; left: 0px; z-index: 500; border: 1px solid #f80; display: none; } #mycanvas, #preview { /*border: 1px solid #08c;*/ float: left; } #mycanvas { /*width: 500px;*/ /*height: 450px;*/ /*border: 0px solid #333;*/ /*border-right: 2px solid #333;*/ /*background-color: #f0f;*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 100%; background: #808; } #preview { /*border: 1px solid #f8c;*/ position: absolute; right: 0px; top: 0px; /*width: 150px;*/ /*height: 450px;*/ width: 20%; height: 100%; } /* Buttons and logo's */ .button { display: table; } #d3dlogo { position: absolute; top: 15px; left: 31%; width: 399px; height: 139px; background-image: url('../img/logo_full.png'); cursor: pointer; } .vertImage { margin: 0px; padding: 0px; /*border: 2px solid #f0f;*/ max-width: 100%; height: auto; width: auto; /* for ie9 */ } .bgTop { position: absolute; top: 0px; left: 0px; z-index: -5; } .bgMiddle { display: block; position: absolute; top: 30%; left: 0px; z-index: -5; } .bgBottom { position: absolute; bottom: 0px; left: 0px; z-index: -5; } /* PRINT PROGRESS DISPLAY */ #printProgressContainer { position: absolute; right: 30px; top: 370px; width: 110px; margin: 5px 0px; font-weight: bold; display:none; } #progressbarContainer { margin: 3px 0px; width: inherit; height: 20px; background-color: #fff; border: 2px solid #333; border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .progressAmount { margin: 0px 5px; } #progressbar { position: relative; /*margin-bottom: -20px;*/ width: 0%; height: 100%; background-color: #4c4; border: 0px solid #f0f; border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* THERMOMETER */ #thermometerContainer { position: absolute; right: 30px; top: 410px; } #thermometerCanvas { /*background: #59b2b8;*/ /*zoom: 2;*/ } /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */ @media screen and (max-height: 675px) { .bgMiddle { display: none; } #d3dlogo { width: 399px; height: 74px; background-image: url('../img/logo_small.png'); margin-top: 9px; } #btnsUpDown, #btnsTurnLeftRight { zoom: 0.94; -moz-transform: translate(0px,-5px) scale(.94); } #btnNew { zoom: 0.94; -moz-transform: translate(-5px,-5px) scale(.94); /*-moz-transform: translate(-3px,-3px);*/ } #btnOops { zoom: 0.94; -moz-transform: translate(-5px,-10px) scale(0.94); } #btnPrint { right: 10px; top: 10px; -moz-transform: translate(5px,-5px); } .btn { zoom: 0.94; -moz-transform: scale(.94); } #drawAreaContainer { top: 128px; height: 350px; } } @media screen and (max-height: 560px) { #d3dlogo { width: 399px; height: 57px; background-image: url('../img/logo_smaller_wide.png'); margin-top: 14px; /*zoom: 0.8;*/ /*-moz-transform: translate(-20px,-15px) scale(.8);*/ /*-moz-transform: ;*/ /*left: 34%;*/ } #btnsUpDown, #btnsTurnLeftRight { zoom: 0.86; -moz-transform: translate(0px,-7px) scale(0.86); } #btnPrint { right: 6px; -moz-transform: translate(10px,-10px); } #btnNew { zoom: 0.86; -moz-transform: translate(-10px,-10px) scale(.86); } .btn { zoom: 0.86; -moz-transform: scale(.86); } #btnOops { top: 350px; zoom: 0.86; -moz-transform: translate(-10px,-25px) scale(.86); } #btnSave { -moz-transform: translate(-5px,-13px); } #btnPrevious, #btnNext { /*top: 200px;*/ -moz-transform: translate(-5px,-10px); } #drawAreaContainer { top: 110px; height: 350px; } }