From 65f43f197f940f7a0f9ca3b743972cbf3b65fceb Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Fri, 11 Oct 2013 11:44:28 +0200 Subject: [PATCH] updates css styles --- css/styles.css | 1158 ++++++++++++++++++++++++-------------------- css/styles.min.css | 2 +- 2 files changed, 634 insertions(+), 526 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8c1813b..fea043e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,669 +1,777 @@ /* - GLOBAL CONTAINER +GLOBAL CONTAINER -*/ + */ body { - background-color: #fcfcfc; - -moz-user-select: none; - /* disable cut copy paste */ - - -webkit-user-select: none; - /* disable cut copy paste */ - - overflow: hidden; - /* This chops off any overhanging divs */ + background-color: #fcfcfc; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; /* disable cut copy paste */ +/* disable cut copy paste */ +overflow: hidden; /* This chops off any overhanging divs */ } + img { - z-index: 5; - /*pointer-events:none;*/ - - /*-webkit-touch-callout: none; */ - /*disable callout, image save panel */ - - /*-webkit-tap-highlight-color: transparent; */ - /* "turn off" link highlight */ - + z-index: 5; /*pointer-events: none; + */ +/*-webkit-touch-callout: none; + */ +/*disable callout, image save panel */ +/*-webkit-tap-highlight-color: transparent; + */ +/* "turn off" link highlight */ } + /* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */ .btn { - background-repeat: no-repeat; - /* -webkit-user-select: none;*/ + background-repeat: no-repeat; /* -webkit-user-select: none; + */ +cursor: pointer; +} - cursor: pointer; -} #landscape { - position: absolute; - background-color: #fff; - width: 100%; - max-width: 1024px; - max-height: 768px; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - z-index: 5; - overflow: hidden; - margin: 0px auto; - outline: 2px solid #5e8c71; - box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); + position: absolute; + background-color: #fff; + width: 100%; + max-width: 1024px; + max-height: 768px; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 5; + overflow: hidden; + margin: 0px auto; + outline: 2px solid #5e8c71; + + -webkit-box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); + box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); } + #portrait { - display: none; + display: none; } + .bgContainer { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; } -.bgTop, -.bgMiddle, -.bgBottom { - opacity: 1.0; - transition: opacity .35s linear; - position: absolute; - left: 0px; - z-index: -5; + +.bgTop,.bgMiddle,.bgBottom { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1.0; + + -webkit-transition: opacity .35s linear; + -moz-transition: opacity .35s linear; + -o-transition: opacity .35s linear; + -ms-transition: opacity .35s linear; + transition: opacity .35s linear; + position: absolute; + left: 0px; + z-index: -5; } + .bgTop { - top: 0px; + top: 0px; } + .bgMiddle { - top: 30%; + top: 30%; } + .bgBottom { - bottom: 0px; + bottom: 0px; } -.rightpanel img, -.leftpanel img { - cursor: pointer; + +.rightpanel img,.leftpanel img { + cursor: pointer; } + /* - CENTER PANEL +CENTER PANEL -*/ + */ .centerpanel { - position: absolute; - left: 50%; - margin-left: -33%; - width: 66%; - height: 100%; - z-index: 5; + position: absolute; + left: 50%; + margin-left: -33%; + width: 66%; + height: 100%; + z-index: 5; } -.logopanel { - height: 25%; -} -.d3dlogo { - position: relative; - top: 15%; - width: 100%; - height: 100%; - margin: 0px auto; - max-width: 399px; - height: 139px; - background: url('../img/logo/logo_full.png') no-repeat center center; - cursor: pointer; -} -.drawareacontainer { - position: relative; - width: 100%; - height: 65%; - background-color: #fff; - border: 4px solid #000; - border-radius: 15px; - box-sizing: border-box; - z-index: 15; -} -#canvasContainers { - display: table; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; -} -#mycanvasContainer { - display: table-cell; - width: auto; - height: 100%; -} -#mycanvas { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - /*float: left;*/ - border-right: 2px solid #333; +.logopanel { + height: 25%; } + +.d3dlogo { + position: relative; + top: 15%; + width: 100%; + height: 100%; + margin: 0px auto; + max-width: 399px; + height: 139px; + background: url('../img/logo/logo_full.png') no-repeat center center; + cursor: pointer; +} + +.drawareacontainer { + position: relative; + width: 100%; + height: 65%; + background-color: #fff; + border: 4px solid #000; + border-radius: 15px; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + z-index: 15px; +} + +#canvasContainers { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +#mycanvasContainer { + position: absolute; + top: 0; + left: 0; + width: 78%; + height: 100%; +} + +#mycanvas { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border-right: 2px solid #333; +} + #previewContainer { - display: table-cell; - width: 150px; - height: 100%; + position: absolute; + top: 0; + right: 0; + width: 22%; + height: 100%; } + #preview { - width: 150px; - height: 100%; - float: right; - margin: 0; - padding: 0; + min-width: 50px; + width: 100%; + height: 100%; + margin: 0; + padding: 0; } + /* DEBUG THING */ #preview_tmp { - position: absolute; - top: 0px; - left: 0px; - z-index: 500; - border: 1px solid #f80; - display: none; + position: absolute; + top: 0px; + left: 0px; + z-index: 500; + border: 1px solid #f80; + display: none; } + .bottompanel { - position: relative; - bottom: 0px; - width: 100%; - height: 10%; + position: relative; + bottom: 0px; + width: 100%; + height: 10%; } + /* - DOODLE UP/DOWN/LEFT/RIGHT buttons -*/ +DOODLE UP/DOWN/LEFT/RIGHT buttons + */ .manipulationBtns { - margin: 2px 5px; - position: absolute; - right: 0; - top: 0; - max-width: 340px; - max-height: 70px; - width: 45%; + margin: 2px 5px; + position: absolute; + right: 0; + top: 0; + max-width: 340px; + max-height: 70px; + width: 45%; } + .manipulationBtn { - width: 45%; - height: auto; - cursor: pointer; + width: 45%; + height: auto; + cursor: pointer; } + #btnsUpDown { - float: left; - width: 45%; + float: left; + width: 45%; } + #btnsUpDown > div { - float: left; - padding-right: 8px; - background-repeat: no-repeat; + float: left; + padding-right: 8px; + background-repeat: no-repeat; } + #btnsTurnLeftRight { - float: right; - width: 45%; + float: right; + width: 45%; } + #btnsTurnLeftRight > div { - float: left; - padding-right: 8px; - background-repeat: no-repeat; + float: left; + padding-right: 8px; + background-repeat: no-repeat; } + #btnMoveUp { - max-width: 65px; + max-width: 65px; } + #btnMoveDown { - max-width: 64px; + max-width: 64px; } + #btnTwistLeft { - max-width: 59px; + max-width: 59px; } + #btnTwistRight { - max-width: 64px; + max-width: 64px; } + /* - HEIGHT-related RESPONSIVE STUFF -*/ +HEIGHT-related RESPONSIVE STUFF + */ @media screen and (max-height: 700px) { - .logopanel { - height: 22%; - } - .doodlecontainer { - height: 68%; - } - .d3dlogo { - top: 25%; - max-width: 399px; - height: 74px; - background-image: url('../img/logo/logo_small.png'); - } + .logopanel { + height: 22%; } + +.doodlecontainer { + height: 68%; +} + +.d3dlogo { + top: 25%; + max-width: 399px; + height: 74px; + background-image: url('../img/logo/logo_small.png'); +} + +} + @media screen and (max-height: 655px) { - .bgMiddle { - opacity: 0; - } + .bgMiddle { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + opacity: 0; } + +} + @media screen and (max-height: 525px) { - .d3dlogo { - max-width: 399px; - top: 20%; - height: 57px; - background-image: url('../img/logo/logo_smaller_wide.png'); - } + .d3dlogo { + max-width: 399px; + top: 20%; + height: 57px; + background-image: url('../img/logo/logo_smaller_wide.png'); } + +} + @media screen and (max-height: 375px) { - .d3dlogo { - max-width: 399px; - height: 40px; - background-image: url('../img/logo/logo_smallest_wide.png'); - } + .d3dlogo { + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); } + +} + /* - LEFT PANEL +LEFT PANEL -*/ + */ .leftpanel { - position: absolute; - width: 17%; - /* background-color: rgba(67, 204, 67, 0.4);*/ - - top: 0px; - left: 0px; - bottom: 0px; + position: absolute; + width: 17%; /* background-color: rgba(67, 204, 67, 0.4); + */ +top: 0px; + left: 0px; + bottom: 0px; } + .btnNew { - margin: 5% 0% 1% 5%; - width: 100%; - max-width: 180px; - height: auto; + margin: 5% 0% 1% 5%; + width: 100%; + max-width: 180px; + height: auto; } + .btnsPrevNext { - margin: 1% 7%; - max-width: 160px; + margin: 1% 7%; + max-width: 160px; } + .btnPrevious { - width: 40%; - max-width: 56px; - height: auto; + width: 40%; + max-width: 56px; + height: auto; } + .btnNext { - width: 40%; - max-width: 56px; - height: auto; - float: right; + width: 40%; + max-width: 56px; + height: auto; + float: right; } + .btnSave { - margin: 5% 5% 1% 5%; - width: 90%; - max-width: 144px; - height: auto; + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; } + .btnOops { - margin: 5% 5% 1% 5%; - width: 90%; - max-width: 144px; - height: auto; + margin: 5% 5% 1% 5%; + width: 90%; + max-width: 144px; + height: auto; } + /* - RIGHT PANEL +RIGHT PANEL -*/ + */ .rightpanel { - position: absolute; - width: 17%; - /* background-color: rgba(255, 0, 254, 0.4);*/ - - top: 0px; - right: 0px; - bottom: 0px; + position: absolute; + width: 17%; /* background-color: rgba(255, 0, 254, 0.4); + */ +top: 0px; + right: 0px; + bottom: 0px; } + .btnPrint { - margin: 1% 5% 5% 0%; - width: 100%; - max-width: 163px; - height: auto; - float: right; + margin: 1% 5% 5% 0%; + width: 100%; + max-width: 163px; + height: auto; + float: right; } + .btnStop { - margin: 5% 10% 1% 5%; - float: right; - width: 90%; - max-width: 98px; - height: auto; + margin: 5% 10% 1% 5%; + float: right; + width: 90%; + max-width: 98px; + height: auto; } + .btnsSettingsInfo { - position: absolute; - bottom: 25px; - right: 5px; - width: 80%; - margin: 1% 5%; - max-width: 160px; + position: absolute; + bottom: 25px; + right: 5px; + width: 80%; + margin: 1% 5%; + max-width: 160px; } + .btnInfo { - width: 40%; - max-width: 53px; - height: auto; + width: 40%; + max-width: 53px; + height: auto; } + .btnSettings { - width: 40%; - max-width: 53px; - height: auto; - float: right; + width: 40%; + max-width: 53px; + height: auto; + float: right; } + /* - PRINT PROGRESS DISPLAY +PRINT PROGRESS DISPLAY -*/ + */ #printProgressContainer { - position: absolute; - right: 30px; - top: 370px; - width: 110px; - margin: 5px 0px; - font-weight: bold; - display: none; + 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; + margin: 3px 0px; + width: inherit; + height: 20px; + background-color: #fff; + border: 2px solid #333; + border-radius: 5px; } + .progressAmount { - margin: 0px 5px; + 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; + position: relative; /*margin-bottom: -20px; + */ +width: 0%; + height: 100%; + background-color: #4c4; + border: 0px solid #f0f; + border-radius: 3px; } + /* - THERMOMETER +THERMOMETER -*/ + */ #thermometerContainer { - position: absolute; - right: 25px; - top: 370px; + position: absolute; + right: 25px; + top: 370px; } + #thermometerCanvas { - /*background: #59b2b8;*/ - - /*zoom: 2;*/ - + /*background: #59b2b8; + */ +/*zoom: 2; + */ } + /* - REST +REST -*/ + */ /* CLEARFIX */ /* http://nicolasgallagher.com/micro-clearfix-hack/ */ -.clearfix:before, -.clearfix:after { - content: " "; - /* 1 */ - - display: table; - /* 2 */ - +.clearfix:before,.clearfix:after { + content: " "; /* 1 */ +display: table; /* 2 */ } + .clearfix:after { - clear: both; + clear: both; } + /* For IE 6/7 only*/ .clearfix { - *zoom: 1; + *zoom: 1; } + /* - SETTINGS POPUP +SETTINGS POPUP + + */ +#contentOverlay { + background-color: rgba(255, 255, 255, 0.65); + z-index: 20; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + display: none; +} + +#contentOverlay #settings { + background-color: #fff; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 15; + max-width: 835px; + max-height: 540px; + width: 80%; + height: 75%; + margin: 7% 8%; + + -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + border: 2px solid #222; + border-radius: 15px; + overflow: hidden; + display: table; + padding: 2%; +} + +#contentOverlay #settings .settingsLabelContainer { + width: 100%; + height: auto; + margin-bottom: 1%; +} + +#contentOverlay #settings .settingsLabelImg { + width: 45%; + max-width: 373px; + height: auto; +} + +#contentOverlay #settings > .content { + margin: 3% 12%; + margin-top: 12%; + max-height: 388px; + display: table-row; + width: 100%; +} + +#contentOverlay #settings > .content > .settings { + border: 1px solid #bbbbbb; + border-radius: 5px; + overflow: scroll; + + -ms-overflow-x: hidden; + overflow-x: hidden; +} + +#contentOverlay #settings > .content > .btnContainer { + width: 15%; + position: relative; + display: table-cell; +} + +#contentOverlay #settings > .content > .btnContainer > .btnOK { + position: absolute; + bottom: 3%; + right: 3%; + max-width: 85px; + min-width: 42px; + width: 91%; + height: auto; + margin: 0 2% 2% 0; + cursor: pointer; + float: right; +} + +#contentOverlay #settings > .content > div { + height: 100%; +} + +@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) { + /* + TOP LOGO + */ +.centerpanel { + left: 0; + margin-left: 0; + width: 100%; /* background-color: rgba(0, 135, 255, 0.4); + */ +} + +.logopanel { + height: 40px; +} + +.d3dlogo { + top: 0; + max-width: 399px; + height: 40px; + background-image: url('../img/logo/logo_smallest_wide.png'); +} + +.doodlecontainer { + /* position: absolute; + */ +height: 85%; +} + +/*.bottompanel { + + display: none; + +} */ +/* + LEFT + */ +.leftpanel { + width: 100px; + background-color: #fff; + z-index: 50; + + -webkit-transition: left 0.3s ease-out; + -moz-transition: left 0.3s ease-out; + -o-transition: left 0.3s ease-out; + -ms-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; +} + +.hideleft { + left: -101px; +} + +.shadowright { + -webkit-box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); + box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); +} + +.btnNew { + margin: 5% 5% 1% 5%; + width: 90%; +} + +.btnSave { + margin-left: 9%; + width: 75%; +} + +.btnOops { + margin-left: 6%; + width: 71%; +} + +/* + RIGHT + */ +.rightpanel { + width: 100px; + background-color: #fff; + z-index: 50; + + -webkit-transition: right 0.3s ease-out; + -moz-transition: right 0.3s ease-out; + -o-transition: right 0.3s ease-out; + -ms-transition: right 0.3s ease-out; + transition: right 0.3s ease-out; +} + +.hideright { + right: -101px; +} + +.shadowleft { + -webkit-box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); + box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); +} + +.btnPrint { + margin: 1% 5% 5% 5%; + width: 90%; +} + +.btnStop { + margin: 5% 6% 1% 5%; + width: 70%; +} + +/* + REST + */ +.sidebutton { + display: block; + position: absolute; /* top: 50%; + */ +/* margin-top: -20px; + */ +top: 0px; /*float: right; + */ +width: 25px; + height: 38px; + border: 1px solid #808; + background: url('../img/arrows.png') no-repeat; + background-color: #eee; + cursor: pointer; +} + +.sidebutton:active { + background-color: #aaa; +} + +.leftpanel .sidebutton { + right: -27px; + background-position: 0px 0px; +} + +.rightpanel .sidebutton { + left: -27px; + background-position: -25px 0px; +} + +.sidebuttonin:active { + background-color: #888; +} + +.leftpanel .sidebuttonin { + background-color: #ccc; + background-position: -25px 0px; +} + +.rightpanel .sidebuttonin { + background-color: #ccc; + background-position: 0px 0px; +} + +/* + + SETTINGS POPUP -MOBILE + + */ #contentOverlay { - background-color: rgba(255, 255, 255, 0.65); - z-index: 20; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - display: none; + z-index: 200; } + #contentOverlay #settings { - background-color: #fff; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 15; - max-width: 835px; - max-height: 540px; - width: 80%; - height: 75%; - margin: 7% 8%; - box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); - border: 2px solid #222; - border-radius: 15px; - overflow: hidden; - display: table; - padding: 2%; + width: 87%; + height: 82%; + margin: 6% 4%; } -#contentOverlay #settings .settingsLabelContainer { - width: 100%; - height: auto; - margin-bottom: 1%; + +#contentOverlay #settings > .right { + width: 14%; } -#contentOverlay #settings .settingsLabelImg { - width: 45%; - max-width: 373px; - height: auto; -} -#contentOverlay #settings > .content { - margin: 3% 12%; - margin-top: 12%; - max-height: 388px; - display: table-row; - width: 100%; -} -#contentOverlay #settings > .content > .settings { - border: 1px solid #bbbbbb; - border-radius: 5px; - overflow: scroll; - overflow-x: hidden; -} -#contentOverlay #settings > .content > .btnContainer { - width: 15%; - position: relative; - display: table-cell; -} -#contentOverlay #settings > .content > .btnContainer > .btnOK { - position: absolute; - bottom: 3%; - right: 3%; - max-width: 85px; - min-width: 42px; - width: 91%; - height: auto; - margin: 0 2% 2% 0; - cursor: pointer; - float: right; -} -#contentOverlay #settings > .content > div { - height: 100%; -} -@media only screen and (max-width: 480px), only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) { - /* - TOP LOGO - */ - .centerpanel { - left: 0; - margin-left: 0; - width: 100%; - /* background-color: rgba(0, 135, 255, 0.4);*/ - - } - .logopanel { - height: 40px; - } - .d3dlogo { - top: 0; - max-width: 399px; - height: 40px; - background-image: url('../img/logo/logo_smallest_wide.png'); - } - .doodlecontainer { - /* position: absolute;*/ - - height: 85%; - } - /*.bottompanel { - display: none; - }*/ - /* - LEFT - */ - .leftpanel { - width: 100px; - background-color: #fff; - z-index: 50; - transition: left 0.3s ease-out; - } - .hideleft { - left: -101px; - } - .shadowright { - box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6); - } - .btnNew { - margin: 5% 5% 1% 5%; - width: 90%; - } - .btnSave { - margin-left: 9%; - width: 75%; - } - .btnOops { - margin-left: 6%; - width: 71%; - } - /* - RIGHT - */ - .rightpanel { - width: 100px; - background-color: #fff; - z-index: 50; - transition: right 0.3s ease-out; - } - .hideright { - right: -101px; - } - .shadowleft { - box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6); - } - .btnPrint { - margin: 1% 5% 5% 5%; - width: 90%; - } - .btnStop { - margin: 5% 6% 1% 5%; - width: 70%; - } - /* - REST - */ - .sidebutton { - display: block; - position: absolute; - /* top: 50%;*/ - - /* margin-top: -20px;*/ - - top: 0px; - /*float:right;*/ - - width: 25px; - height: 38px; - border: 1px solid #808; - background: url('../img/arrows.png') no-repeat; - background-color: #eee; - cursor: pointer; - } - .sidebutton:active { - background-color: #aaa; - } - .leftpanel .sidebutton { - right: -27px; - background-position: 0px 0px; - } - .rightpanel .sidebutton { - left: -27px; - background-position: -25px 0px; - } - .sidebuttonin:active { - background-color: #888; - } - .leftpanel .sidebuttonin { - background-color: #ccc; - background-position: -25px 0px; - } - .rightpanel .sidebuttonin { - background-color: #ccc; - background-position: 0px 0px; - } - /* - - SETTINGS POPUP - MOBILE - - */ - #contentOverlay { - z-index: 200; - } - #contentOverlay #settings { - width: 87%; - height: 82%; - margin: 6% 4%; - } - #contentOverlay #settings > .right { - width: 14%; - } -} -@media only screen and (min-width: 1000px) and (max-device-pixel-ratio: 1.5), only screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5) { - + } + @media only screen and (orientation: portrait) { - #landscape { - display: none; - } - #portrait { - display: block; - } - .vertImage { - margin: 0px; - padding: 0px; - /*border: 2px solid #f0f;*/ - - max-width: 100%; - height: auto; - width: auto; - /* for ie9 */ - - } + #landscape { + display: none; +} + +#portrait { + display: block; +} + +.vertImage { + margin: 0px; + padding: 0px; /*border: 2px solid #f0f; + */ +max-width: 100%; + height: auto; + width: auto; /* for ie9 */ +} + } diff --git a/css/styles.min.css b/css/styles.min.css index 2999772..75c87d4 100644 --- a/css/styles.min.css +++ b/css/styles.min.css @@ -1 +1 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}h2{font-size:1.5em;margin:0.83em 0;}h3{font-size:1.17em;margin:1em 0;}h4{font-size:1em;margin:1.33em 0;}h5{font-size:.83em;margin:1.67em 0;}h6{font-size:.67em;margin:2.33em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000000;}p,pre{margin:1em 0;}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}q:before,q:after{content:'';content:none;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}dl,menu,ol,ul{margin:1em 0;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;-ms-interpolation-mode:bicubic;}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid silver;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}button,input{line-height:normal;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px;}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}.cf{*zoom:1;}.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}body{background-color:#fcfcfc;}#landscape{position:absolute;background-color:#fff;width:100%;max-width:1024px;max-height:768px;top:0px;bottom:0px;left:0px;right:0px;z-index:5;overflow:hidden;margin:0px auto;outline:2px solid #5e8c71;-webkit-box-shadow:0 0 8px rgba(8, 8, 8, 0.25);box-shadow:0 0 8px rgba(8, 8, 8, 0.25);}#portrait{display:none;}.bgContainer{position:absolute;width:100%;height:100%;overflow:hidden;}.bgTop,.bgMiddle,.bgBottom{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;-webkit-transition:opacity .35s linear;-moz-transition:opacity .35s linear;-o-transition:opacity .35s linear;-ms-transition:opacity .35s linear;transition:opacity .35s linear;position:absolute;left:0px;z-index:-5;}.bgTop{top:0px;}.bgMiddle{top:30%;}.bgBottom{bottom:0px;}.rightpanel img,.leftpanel img{cursor:pointer;}.centerpanel{position:absolute;left:50%;margin-left:-33%;width:66%;height:100%;z-index:5;}.logopanel{height:25%;}.d3dlogo{position:relative;top:15%;width:100%;height:100%;margin:0px auto;max-width:399px;height:139px;background:url('../img/logo/logo_full.png') no-repeat center center;cursor:pointer;}.drawareacontainer{position:relative;width:100%;height:65%;background-color:#fff;border:4px solid #000;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:15;}#preview_tmp{position:absolute;top:0px;left:0px;z-index:500;border:1px solid #f80;display:none;}.bottompanel{position:relative;bottom:0px;width:100%;height:10%;}.manipulationBtns{margin:2px 5px;position:absolute;right:0;top:0;max-width:340px;max-height:70px;width:45%;}.manipulationBtn{width:45%;height:auto;cursor:pointer;}#btnsUpDown{float:left;width:45%;}#btnsUpDown > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnsTurnLeftRight{float:right;width:45%;}#btnsTurnLeftRight > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnMoveUp{max-width:65px;}#btnMoveDown{max-width:64px;}#btnTwistLeft{max-width:59px;}#btnTwistRight{max-width:64px;}@media screen and (max-height: 700px){.logopanel{height:22%;}.doodlecontainer{height:68%;}.d3dlogo{top:25%;max-width:399px;height:74px;background-image:url('../img/logo/logo_small.png');}}@media screen and (max-height: 655px){.bgMiddle{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}}@media screen and (max-height: 525px){.d3dlogo{max-width:399px;top:20%;height:57px;background-image:url('../img/logo/logo_smaller_wide.png');}}@media screen and (max-height: 375px){.d3dlogo{max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}}.leftpanel{position:absolute;width:17%;top:0px;left:0px;bottom:0px;}.btnNew{margin:5% 0% 1% 5%;width:100%;max-width:180px;height:auto;}.btnsPrevNext{margin:1% 7%;max-width:160px;}.btnPrevious{width:40%;max-width:56px;height:auto;}.btnNext{width:40%;max-width:56px;height:auto;float:right;}.btnSave{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.btnOops{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.rightpanel{position:absolute;width:17%;top:0px;right:0px;bottom:0px;}.btnPrint{margin:1% 5% 5% 0%;width:100%;max-width:163px;height:auto;float:right;}.btnStop{margin:5% 10% 1% 5%;float:right;width:90%;max-width:98px;height:auto;}.btnsSettingsInfo{position:absolute;bottom:25px;right:5px;width:80%;margin:1% 5%;max-width:160px;}.btnInfo{width:40%;max-width:53px;height:auto;}.btnSettings{width:40%;max-width:53px;height:auto;float:right;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5){.centerpanel{left:0;margin-left:0;width:100%;}.logopanel{height:40px;}.d3dlogo{top:0;max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}.doodlecontainer{height:85%;}.leftpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:left 0.15s ease-out;-moz-transition:left 0.15s ease-out;-o-transition:left 0.15s ease-out;-ms-transition:left 0.15s ease-out;transition:left 0.15s ease-out;}.hideleft{left:-101px;}.shadowright{-webkit-box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);}.btnNew{margin:5% 5% 1% 5%;width:90%;}.btnSave{margin-left:9%;width:75%;}.btnOops{margin-left:6%;width:71%;}.rightpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:right 0.15s ease-out;-moz-transition:right 0.15s ease-out;-o-transition:right 0.15s ease-out;-ms-transition:right 0.15s ease-out;transition:right 0.15s ease-out;}.hideright{right:-101px;}.shadowleft{-webkit-box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);}.btnPrint{margin:1% 5% 5% 5%;width:90%;}.btnStop{margin:5% 6% 1% 5%;width:70%;}.sidebutton{display:block;position:absolute;top:0px;width:25px;height:38px;border:1px solid #808;background:url('../img/arrows.png') no-repeat;background-color:#eee;}.sidebutton:active{background-color:#aaa;}.leftpanel .sidebutton{right:-27px;background-position:0px 0px;}.rightpanel .sidebutton{left:-27px;background-position:-25px 0px;}.leftpanel .sidebuttonin{background-color:#ccc;background-position:-25px 0px;}.rightpanel .sidebuttonin{background-color:#ccc;background-position:0px 0px;}.sidebuttonin:active{background-color:#888;}}@media only screen and (orientation: portrait){#landscape{display:none;}#portrait{display:block;}} \ No newline at end of file +body{background-color:#fcfcfc;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;}img{z-index:5;}.btn{background-repeat:no-repeat;cursor:pointer;}#landscape{position:absolute;background-color:#fff;width:100%;max-width:1024px;max-height:768px;top:0px;bottom:0px;left:0px;right:0px;z-index:5;overflow:hidden;margin:0px auto;outline:2px solid #5e8c71;-webkit-box-shadow:0 0 8px rgba(8, 8, 8, 0.25);box-shadow:0 0 8px rgba(8, 8, 8, 0.25);}#portrait{display:none;}.bgContainer{position:absolute;width:100%;height:100%;overflow:hidden;}.bgTop,.bgMiddle,.bgBottom{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;-webkit-transition:opacity .35s linear;-moz-transition:opacity .35s linear;-o-transition:opacity .35s linear;-ms-transition:opacity .35s linear;transition:opacity .35s linear;position:absolute;left:0px;z-index:-5;}.bgTop{top:0px;}.bgMiddle{top:30%;}.bgBottom{bottom:0px;}.rightpanel img,.leftpanel img{cursor:pointer;}.centerpanel{position:absolute;left:50%;margin-left:-33%;width:66%;height:100%;z-index:5;}.logopanel{height:25%;}.d3dlogo{position:relative;top:15%;width:100%;height:100%;margin:0px auto;max-width:399px;height:139px;background:url('../img/logo/logo_full.png') no-repeat center center;cursor:pointer;}.drawareacontainer{position:relative;width:100%;height:65%;background-color:#fff;border:4px solid #000;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;z-index:15px;}#canvasContainers{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;padding:0;margin:0;}#mycanvasContainer{position:absolute;top:0;left:0;width:78%;height:100%;}#mycanvas{width:100%;height:100%;margin:0;padding:0;border-right:2px solid #333;}#previewContainer{position:absolute;top:0;right:0;width:22%;height:100%;}#preview{min-width:50px;width:100%;height:100%;margin:0;padding:0;}#preview_tmp{position:absolute;top:0px;left:0px;z-index:500;border:1px solid #f80;display:none;}.bottompanel{position:relative;bottom:0px;width:100%;height:10%;}.manipulationBtns{margin:2px 5px;position:absolute;right:0;top:0;max-width:340px;max-height:70px;width:45%;}.manipulationBtn{width:45%;height:auto;cursor:pointer;}#btnsUpDown{float:left;width:45%;}#btnsUpDown > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnsTurnLeftRight{float:right;width:45%;}#btnsTurnLeftRight > div{float:left;padding-right:8px;background-repeat:no-repeat;}#btnMoveUp{max-width:65px;}#btnMoveDown{max-width:64px;}#btnTwistLeft{max-width:59px;}#btnTwistRight{max-width:64px;}@media screen and (max-height: 700px){.logopanel{height:22%;}.doodlecontainer{height:68%;}.d3dlogo{top:25%;max-width:399px;height:74px;background-image:url('../img/logo/logo_small.png');}}@media screen and (max-height: 655px){.bgMiddle{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}}@media screen and (max-height: 525px){.d3dlogo{max-width:399px;top:20%;height:57px;background-image:url('../img/logo/logo_smaller_wide.png');}}@media screen and (max-height: 375px){.d3dlogo{max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}}.leftpanel{position:absolute;width:17%;top:0px;left:0px;bottom:0px;}.btnNew{margin:5% 0% 1% 5%;width:100%;max-width:180px;height:auto;}.btnsPrevNext{margin:1% 7%;max-width:160px;}.btnPrevious{width:40%;max-width:56px;height:auto;}.btnNext{width:40%;max-width:56px;height:auto;float:right;}.btnSave{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.btnOops{margin:5% 5% 1% 5%;width:90%;max-width:144px;height:auto;}.rightpanel{position:absolute;width:17%;top:0px;right:0px;bottom:0px;}.btnPrint{margin:1% 5% 5% 0%;width:100%;max-width:163px;height:auto;float:right;}.btnStop{margin:5% 10% 1% 5%;float:right;width:90%;max-width:98px;height:auto;}.btnsSettingsInfo{position:absolute;bottom:25px;right:5px;width:80%;margin:1% 5%;max-width:160px;}.btnInfo{width:40%;max-width:53px;height:auto;}.btnSettings{width:40%;max-width:53px;height:auto;float:right;}#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;}.progressAmount{margin:0px 5px;}#progressbar{position:relative;width:0%;height:100%;background-color:#4c4;border:0px solid #f0f;border-radius:3px;}#thermometerContainer{position:absolute;right:25px;top:370px;}.clearfix:before,.clearfix:after{content:" ";display:table;}.clearfix:after{clear:both;}.clearfix{*zoom:1;}#contentOverlay{background-color:rgba(255, 255, 255, 0.65);z-index:20;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:none;}#contentOverlay #settings{background-color:#fff;position:absolute;top:0;left:0;right:0;bottom:0;z-index:15;max-width:835px;max-height:540px;width:80%;height:75%;margin:7% 8%;-webkit-box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);box-shadow:0px 2px 6px 0px rgba(16, 16, 16, 0.65);border:2px solid #222;border-radius:15px;overflow:hidden;display:table;padding:2%;}#contentOverlay #settings .settingsLabelContainer{width:100%;height:auto;margin-bottom:1%;}#contentOverlay #settings .settingsLabelImg{width:45%;max-width:373px;height:auto;}#contentOverlay #settings > .content{margin:3% 12%;margin-top:12%;max-height:388px;display:table-row;width:100%;}#contentOverlay #settings > .content > .settings{border:1px solid #bbbbbb;border-radius:5px;overflow:scroll;-ms-overflow-x:hidden;overflow-x:hidden;}#contentOverlay #settings > .content > .btnContainer{width:15%;position:relative;display:table-cell;}#contentOverlay #settings > .content > .btnContainer > .btnOK{position:absolute;bottom:3%;right:3%;max-width:85px;min-width:42px;width:91%;height:auto;margin:0 2% 2% 0;cursor:pointer;float:right;}#contentOverlay #settings > .content > div{height:100%;}@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5){.centerpanel{left:0;margin-left:0;width:100%;}.logopanel{height:40px;}.d3dlogo{top:0;max-width:399px;height:40px;background-image:url('../img/logo/logo_smallest_wide.png');}.doodlecontainer{height:85%;}.leftpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:left 0.3s ease-out;-moz-transition:left 0.3s ease-out;-o-transition:left 0.3s ease-out;-ms-transition:left 0.3s ease-out;transition:left 0.3s ease-out;}.hideleft{left:-101px;}.shadowright{-webkit-box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:2px 0 4px rgba(42, 42, 41, 0.6);}.btnNew{margin:5% 5% 1% 5%;width:90%;}.btnSave{margin-left:9%;width:75%;}.btnOops{margin-left:6%;width:71%;}.rightpanel{width:100px;background-color:#fff;z-index:50;-webkit-transition:right 0.3s ease-out;-moz-transition:right 0.3s ease-out;-o-transition:right 0.3s ease-out;-ms-transition:right 0.3s ease-out;transition:right 0.3s ease-out;}.hideright{right:-101px;}.shadowleft{-webkit-box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);box-shadow:-2px 0 4px rgba(42, 42, 41, 0.6);}.btnPrint{margin:1% 5% 5% 5%;width:90%;}.btnStop{margin:5% 6% 1% 5%;width:70%;}.sidebutton{display:block;position:absolute;top:0px;width:25px;height:38px;border:1px solid #808;background:url('../img/arrows.png') no-repeat;background-color:#eee;cursor:pointer;}.sidebutton:active{background-color:#aaa;}.leftpanel .sidebutton{right:-27px;background-position:0px 0px;}.rightpanel .sidebutton{left:-27px;background-position:-25px 0px;}.sidebuttonin:active{background-color:#888;}.leftpanel .sidebuttonin{background-color:#ccc;background-position:-25px 0px;}.rightpanel .sidebuttonin{background-color:#ccc;background-position:0px 0px;}#contentOverlay{z-index:200;}#contentOverlay #settings{width:87%;height:82%;margin:6% 4%;}#contentOverlay #settings > .right{width:14%;}}@media only screen and (orientation: portrait){#landscape{display:none;}#portrait{display:block;}.vertImage{margin:0px;padding:0px;max-width:100%;height:auto;width:auto;}} \ No newline at end of file