/* Dialog Base */ #Cg { z-index: 0; } .C0 { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 5; } .C0.hidden { display: none; opacity: 0; } .C0.pre-visible { display: block; opacity: 0;} .C0.visible { display: block; opacity: 1;} .C0.hidding{ display: block; opacity: 0;} .C1 { margin: auto; height: auto; overflow: visible; position: relative; width: 484px; border-radius: 0px; background: #333; border: 1px solid #777; border-right: 1px solid #222; border-bottom: 1px solid #222; color: #ccc; padding: 0; font-size: 13px; } /* Header */ .C2 { margin: 0; width: auto; height: auto; border: none; padding: 5px 18px; overflow: hidden; border-bottom: 1px solid #222; color: #ddd; background: #444; } .frame-title { display: block; float: left; overflow: hidden; z-index: 100; cursor: auto; color: #ccc; font-weight: bold; } .C3 { background: url(./images/delete.png); width: 16px; height: 16px; cursor: pointer; position: absolute; right: 2px; top: 2px; } .C1.no-close>.C2>.C3, .C1.C4>.C2>.C3 { display: none; } /* Body */ .C5 { display: block; overflow: hidden; text-align: left; padding: 18px; background: none; border: none; border-top: 1px solid #666; } .C6 { display: block; margin-top: 8px; margin-bottom: 4px; margin-left: -64px; margin-right: -64px; height: 1px; background: none; } /* Table */ .C7 { position:absolute; top:0px;left:0px;width:100%;height:100%; display: table; cellpadding: 0; cellspacing: 0; border: 0; text-align: center; overflow: hidden; line-height: initial; } .C7.hidden { display: none; } .C8 { display: table-cell; vertical-align: middle; } /* Buttons */ .C9 { display: block; overflow: hidden; width: 100%; } .CA { border: 1px solid #777; border-bottom: 1px solid #222; border-right: 1px solid #222; border-radius: 4px; background: #555; display: block; float: left; overflow: hidden; width: auto; cursor: pointer; text-align: center; min-width: 60px; white-space: nowrap; margin-left: 8px; padding: 6px 8px; opacity: 1; } .CA.right { float: right;} .CA.left{ float: left; margin-right: 8px; margin-left: 0;} .CA:hover{ display: block; background: #666; } .CA.disabled, .CA.left.disabled, .CA.right.disabled { opacity: 0.25; cursor: default; } .CA.disabled:hover, .CA.left.disabled:hover, .CA.right.disabled:hover { display: block; background: #555; cursor: default; } .CB { overflow: hidden; float: right; width: auto; margin-top: 8px; } /* Body Content */ .CC { text-align: left; overflow: hidden; width: 100%; margin-top: 8px; height: 19px; } .CD { width: 100%; background: #555; border: 1px solid #222; -webkit-box-shadow: 0px 1px 0px 0px #666; -moz-box-shadow: 0px 1px 0px 0px #666; box-shadow: 0px 1px 0px 0px #666; margin-bottom: 1px; padding: 4px 10px; color: white; } .CD:focus { background: #666; outline: none; color: #fff; } .CD:disabled { border: none; background: #333; } .CD.CE { height: 60px; resize: none; } .CD.CE:disabled { background: #333; max-height: 60px; height: auto; resize: none; overflow: hidden; } .CD.file { opacity: 0; width: 32px; height: 32px; cursor: pointer; padding-left: 48px; } .C5>select { width: 150px; float: left; margin: 0px; margin-bottom: 6px; background: #444; border: 1px solid #666; border-right: 1px solid #222; border-bottom: 1px solid #222; height: 26px; border-radius: 0px; cursor: pointer; text-shadow: none; padding: 4px 10px; color: #ccc; } .C5 > select:focus { outline: none; border: 1px solid #AAA; background: #777; } .CC.image, .CC.iframe { text-align: left; overflow: hidden; width: 400px; height: 300px; background: transparent; background-size: 100% 100%; border: 1px solid #222; -webkit-box-shadow: 0px 1px 0px 0px #666; -moz-box-shadow: 0px 1px 0px 0px #666; box-shadow: 0px 1px 0px 0px #666; margin-bottom: 1px; } .CC.iframe { width: 100%; height: 300px; margin: 0;} .C1.C4 { width: 350px; } .CF { margin: auto; height: auto; overflow: visible; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 2x 6px rgba(0, 0, 0, 0.2); position: relative; width: 484px; border-radius: 0px; background: #282828; border: 1px solid #666; border-right: 1px solid #111; border-bottom: 1px solid #111; color: #ddd; padding: 10px 20px; font-size: 14px; padding: 14px 52px; width: 410px; } .CA.right.progress { display: none; } .CF.cancel .CA.right.progress { display: block; margin-bottom: -22px; } .CG { overflow: hidden; width: 100%; } .CH { float: left; display: block; height: 20px; width: 20px; margin-right: 6px; background-size: 100% 100%; background-image: url(./images/loading.gif); } .CI, .CJ { display: block; float: left; border: 0; padding: 0; width: auto; overflow: hidden; font-size: 16px; padding-top: 2px; height: 20px; } .CJ { margin-left: 16px; font-size: 14px; max-width: 275px; } .CK { border: 1px solid #000; width: 100%; float: left; background: #555; -webkit-box-shadow: 0px 1px 0px 0px #666; -moz-box-shadow: 0px 1px 0px 0px #666; box-shadow: 0px 1px 0px 0px #666; margin-bottom: 1px; padding: 0; overflow: hidden; } @-webkit-keyframes progress_anim { 0% {background: #00c7f3;} 50% {background: #0087b3;} 100% {background: #00c7f3;} } @keyframes progress_anim { 0% {background: #00c7f3;} 50% {background: #0087b3;} 100% {background: #00c7f3;} } .CL { display: block; float: left; height: 13px; width: 0%; background: #00c7f3; border: none; cursor: progress; -webkit-animation: progress_anim 2s infinite; animation: progress_anim 2s infinite; } .CM { float: right; margin: auto; position: relative; width: 100%; text-align: center; font-size: 12px; line-height: 14px; font-weight: bold; overflow: visible; color: white; height: 0; } html { font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: #bababa; background: none; height: 100%; } body { width:100%; height:100%; margin:0; position:absolute; bottom:0px; top:0px; right:0px; left:0px; overflow: hidden; } .CN { overflow:hidden; position:absolute; margin:0px; top:0px; bottom:0px; right:0px; left:0px; z-index: 0; } #Ch { position:absolute; margin:0px; top:0px; bottom:0px; right:0px; left:0px; z-index: 0; } #Cl3verEngine, #Ci { position:absolute; margin:0px; top:0px; bottom:0px; right:0px; left:0px; z-index: 0; } .CO { position:absolute; margin: none; left:0; top:0; right: 0; bottom: 0; background-size: 100% 100%; z-index: 3; z-index: 3000; -webkit-transition: none; -moz-transition: none; transition: none; } .CP { position:absolute; left:0; top:0; right: 0; bottom: 0; background-size: 100% 100%; } .CQ { display: block; opacity: 1; position: absolute; right:0px; top: 0px; overflow: hidden; } .CR { float: right; display: block; width: 0px; height: 0px; padding: 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 4px; margin: 2px; cursor: pointer; background: url(./images/3_3/tool_preview_camera.png); background-color: #888; background-size: 100% 100%; /*border: 1px solid #666; border-top: 1px solid #AAA; border-left: 1px solid #AAA;*/ -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); -webkit-transition: width 0.5s, height 0.5s;-moz-transition: width 0.5s, height 0.5s;transition: width 0.5s, height 0.5s; } .CR.expanded { width: 120px; height: 90px; } .CR.expanded.small { width: 60px; height: 45px; } .C1 { width: 50%; max-width: 450px; min-width: 250px; } .C2 { margin: 0; overflow: hidden; border: 1px solid #bbb; border-right: 1px solid #aaa; border-bottom: none; background: #fff; padding: 12px 32px; } .C2>.frame-title { color: #33b5e5; font-size: 18px; font-weight: 400; } .C1 { color: black; border: 0; background: none; } .C5 { background: #eee; font-weight: normal; color: #888; font-size: 14px; border: 1px solid #aaa; border-left: 1px solid #bbb; border-top: 1px solid #ddd; padding: 20px 32px; text-align: center; } .C5>.text_message { padding: 8px; text-align: center; border: 1px solid #ddd; } @-webkit-keyframes pulse { } .CG >.CH { display: none; } .CI, .CJ { font-size: 11px; text-shadow: 1px 1px 0 #666; color: white; width:100%;/*100px;*/ text-align: center; max-width: 100px; margin-left: 0; font-style: normal; } .CI { display: none; } .C0 { background: rgba(0, 0, 0, 0.25); } #Cj { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; z-index: 100; padding: 0; margin-left: -16px; margin-top: -16px; } .CS { z-index: 10; position: absolute; cursor: pointer; top: 50%; left: 50%; width: 128px; height: 128px; margin-top: -64px; margin-left: -64px; opacity: 0.9; } .CS:hover { opacity: 1; } #appButton { margin-left: 4px; background-size: 100%; } #viewButton { background-size: 100%; margin-left: -132px; } #progress { background: none; } #progress .C2 { display: none; } #progress .C5 { border: 0; background: none; padding: 2px; } #progress .C1 { border: 0; background: none; } #progress .CM { font-size: 11px; line-height: 13px; } #progress .CK { height: 11px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #progress .CK>.CL { height: 11px; } .CT { width: 32px; height: 32px; cursor: progress; background-size: 100% 100%; } .CT.hidden { display: none; } .CU { display: block; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin-left: -32px; margin-top: -44px; padding: 16px 32px; background: #202020; background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#171717)); background: -moz-linear-gradient(top, #333, #171717); border: 1px solid #707070; border-right: 1px solid #111; border-bottom: 1px solid #111; border-radius: 8px; -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 1); -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 1); z-index: 100; } .CU.hidden { display: none; } .CV{ position:absolute; top:10px; left:10px; width:7%; height:auto; } .CW{ right:10px !important; position:absolute; top:10px; width:7%; height:auto; } .CX{ left:10px !important; position:absolute; bottom:10px; width:7%; height:auto; } .CY{ right:10px !important; position:absolute; bottom:30px; width:7%; height:auto; max-width: 100px; } .CV > #tryItButton{ clear: both; cursor: pointer; display: block; float: left; height: auto; margin-right: 5px; margin-top: 5px; width: 100%; opacity:1 !important; } .CX > #tryItButton{ clear: both; cursor: pointer; display: block; float: left; height: auto; margin-right: 5px; margin-bottom: 5px; width: 100%; } .CW > #tryItButton{ float: right !important; height: auto; margin-left: 5px; margin-top: 5px; width: 100%; clear: both; cursor: pointer; display: block; } .CY > #tryItButton{ float: right !important; height: auto; margin-left: 5px; margin-bottom: 5px; width: 100%; clear: both; cursor: pointer; display: block; } .CV > #tryItButton:hover, .CW > #tryItButton:hover, .CX > #tryItButton:hover, .CY > #tryItButton:hover{ opacity: 1 !important; } .ui_layer_button { float: left; position: absolute; cursor: pointer; top:0; left:0; opacity: 1; border-radius: 28px; background-color: #eee; background-size:100% 100%; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; z-index: 2; margin-left: -16px; margin-top: -16px; border: 4px solid #eee; } .ui_layer_button:hover { opacity: 1.0; background-color: #fff; border: 4px solid #fff; } .CL3VER-button { float: left; position: absolute; cursor: pointer; top:0; left:0; opacity: 0.95; border-radius: 0; z-index: 2; background-size:100% 100%; } .CL3VER-button.no-input { pointer-events: none; } .CL3VER-button:hover { opacity: 1.0; } /*CL3VER-button*/ .CL3VER-button[tooltip] { position:absolute; } .CL3VER-button[tooltip]:after { content:attr(tooltip); color: #FFF; font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; text-shadow: 1px 1px 0 #222222; font-size: 14px; background: rgba(50, 50, 50, 0.5); padding: 0px; border-radius: 4px; position:absolute; top: 0; left: 100%; opacity:0; height: 0px; margin-left: 2px; white-space: nowrap; overflow: hidden; -webkit-transition:0.3s linear opacity, 0.15s linear height, 0.15s linear padding, 0.15s linear width, 0.15s linear border-radius; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .CL3VER-button[tooltip]:hover:after { height: 16px; padding:4px 12px; opacity:1; } .html_element { float: left; position: absolute; top:0; left:0; z-index: 2; } .CL3VER-button.external { background:url(./images/icons/external_html_element.png); background-size:100% 100%; } .CL3VER-button.external.hidden { display: none; width: 0; height: 0; } .CL3VER-button.front { } .CZ { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } .CZ img { position: absolute; top: 0; width: 100%; height: 100%; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } .Ca { display: block; } .Cb { display: none; width: 0; } ol, li { list-style: none; } body { margin: 0; } #vr { position: absolute; overflow: hidden; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; -webkit-transition: opacity 0.4s ease-in-out; -moz-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } /* demo */ #vr-clipper, #vr-container, #vr-position, #rotateX, #rotateY, .face { width: 800px; height: 600px; } #vr-clipper { position: absolute; overflow: hidden; z-index: 0; } #vr-container { position: relative; -webkit-transform: perspective(500); -moz-transform: perspective(500px); -webkit-perspective: 500; } #vr-position { position: relative; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(500px); } #rotor-x { -webkit-transform-style: preserve-3d; } #rotateX { position: relative; width: 100%; -webkit-transform-style: preserve-3d; } #rotor-y { -webkit-transform-style: preserve-3d; } #rotateY { position: relative; width: 100%; -webkit-transform-style: preserve-3d; } #cube { position: relative; width: 0; height: 0; top: 440px; margin: 0 auto; -webkit-transform-style: preserve-3d; } .face { display: block; height: 800px; position: absolute; left: -400px; top: -530px; width: 800px; -webkit-backface-visibility: hidden; } #face1 { -webkit-transform: translate3d(-400px, 0, 0) rotate3d(0, 1, 0, 90deg); -moz-transform: translate3d(-400px, 0px, 0px) rotate3d(0, 1, 0, 90deg); } #face2 { -webkit-transform: translate3d(0, 0, -400px); -moz-transform: translate3d(0px, 0px, -400px); } #face3 { -webkit-transform: translate3d(400px, 0, 0) rotate3d(0, 1, 0, -90deg); -moz-transform: translate3d(400px, 0px, 0px) rotate3d(0, 1, 0, -90deg); } #face4 { -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -400px); -moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0px, 0px, -400px); } #face5 { -webkit-transform: translate3d(0, -400px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg); -moz-transform: translate3d(0px, -400px, 0px) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg); } #face6 { -webkit-transform: translate3d(0, 400px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, -90deg); -moz-transform: translate3d(0px, 400px, 0px) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, -90deg); } .Cc { display: block; position:absolute; right:0; bottom:0px; overflow:visible; z-index:2000; height: 37px; padding-left: 8px; background: rgba(0, 0, 0, 0.15) !important; } .Cd { float: right; display: block; height: 32px; width: 32px; margin: 0px; cursor: pointer; opacity: 0.8; } .Cd.fullscreen { margin-right: 15px !important; } .Ce { position: absolute; width: auto; display: none; overflow: hidden; font-family: Arial; font-size: 12px; cursor: text; text-shadow: none; opacity: 0.8; float: right; padding: 10px!important; right: 188px!important; top: 0px!important; background: rgba(255, 255, 255, 0.85)!important; font-size: 15px; } .Cc:hover>.Ce.visible { display: block; } .Cf { cursor: pointer; display:block; position:absolute; right:0px; top:0px; overflow:visible; z-index:100000; height: 48px; width: 48px; background-size: 100%; } .Cf.second { right: 48px; }