body{padding:0;margin:0;background:rgb(45,50,55);font-family:Arial,Helvetica,sans-serif;color:#454545;}
a{border-bottom:1px dotted #4285f4;text-decoration:none;color:#4285f4;}
a:hover{color: #000;border-bottom:1px dashed #000;}

#home{position:absolute;z-index:10;left:20px;top:20px;background: url(../img/home.png) no-repeat 50% 50%;width:54px;height:50px;border-bottom:none;}
#capture{position:absolute;z-index:11;right:20px;top:20px;background: url(../img/dock.png) no-repeat 50% 50%;width:50px;height:50px;line-height:50px;color:#fff;text-align:center;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);cursor:pointer;}
#testJS{position:absolute;z-index:11;right:80px;top:20px;background: url(../img/dock.png) no-repeat 50% 50%;width:50px;height:50px;line-height:50px;color:#fff;text-align:center;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);cursor:pointer;}
#raster{position:absolute;z-index:11;right:80px;top:20px;background: url(../img/dock.png) no-repeat 50% 50%;width:50px;height:50px;line-height:50px;color:#fff;text-align:center;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);cursor:pointer;
display:none;}
#detailsDisplay{display:none;}
#topBar{top:0px}
#botBar{bottom:0px}
.blackBar{position:absolute;z-index:11;left:0px;right:0px;height:50px;background-color:rgba(0,0,0,0.8);line-height:50px;color:#ccc;font-size:20px;}
#status{position:absolute;left:20px;}
#stop{position:absolute;right:20px;cursor:pointer;}
#mainContainer, #controls, #svgWrapper{position:absolute;top:0px;bottom:0px;left:0;right:0;}
#svgWrapper{filter:url(#darkLightShift);}
#controls{display:none;}
#svgContainer{position:absolute;top:0px;bottom:0px;left:0;right:0;-webkit-filter: contrast(4);filter: contrast(4);}
.domainsContainer{position:absolute;top:0;bottom:0;z-index:0;overflow:hidden;}

#structuredInput{padding:10px 16px;font-size:20px;border-radius:5px;width:550px;margin-top:5px;}
#scaleSliderContainer{position:absolute;z-index:10;right:50px;bottom:30px;}
#sliderContainer{position:absolute;z-index:10;left:20px;bottom:100px;right:20px;}
.sliderCell{position:relative;height:100px;background:transparent;margin:0 100px;}
#scaleSelectContainer{position:absolute;left:50%;bottom:0;}
#scaleSelect{position:absolute;z-index:10;left:20px;bottom:20px;height:40px;padding:5px 4px;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);}
.scaleCell, .controlBtn{line-height:38px;width:52px;text-align:center;margin:0 3px;border:1px solid #444;border-radius:5px;float:left;color:#222;background-color:#ddd;height:38px;cursor:pointer;}
.scaleCell:hover, .controlBtn:hover{background:#fff;color:#000;}

.slider{margin:20px 0 10px;}
.ui-slider-handle{width: 2.8em!important;height: 1.8em!important;top: 50%!important;margin-top: -0.9em!important;text-align: center!important;line-height: 1.6em!important;border-radius:5px!important;}
#slider_domains, #slider_mod, #slider_sqrt, #slider_frame, #slider_scale, #slider_trim, #slider_angleStep{background:rgba(127,127,127,0.2)!important;border:1px solid #fff!important;}
#custom-handle_domains, #custom-handle_mod, #custom-handle_sqrt, #custom-handle_frame, #custom-handle_scale, #custom-handle_trim, #custom-handle_angleStep{width: 3.4em!important;height: 2.2em!important;line-height: 2.2em!important;margin-top: -1.1em!important;text-align: center!important;important;border:1px solid #444!important;important;background:#ddd!important;color:#222;}

#slider_saturation{background:#ddd url(../img/colorSliderBG.png) no-repeat 50% 50%;background-size:100% 100%;border:1px solid #7f7f7f!important;}

.sliderTxt{position:relative;font-size:24px;color:#eee;margin:40px 0 20px;background:rgba(0,0,0,0.2);display:inline;padding:0 5px;border-radius:4px;}

#blackOut{position:fixed;top:0;left:0;bottom:0;right:0;display:block;background:rgba(0,0,0,0.8);z-index:1000;}
#loader{position:absolute;left:50%;top:50%;margin-top:-75px;margin-left:-75px;width:150px;height:150px;-webkit-animation: sweep 1s infinite linear;border-radius:75px;border-bottom:5px solid #fff;} @-webkit-keyframes sweep { to { -webkit-transform: rotate(360deg); } }
#loadingText{position:absolute;left:50%;top:50%;margin-top:-75px;margin-left:-75px;width:150px;height:150px;line-height:150px;text-align:center;font-size:18px;color:#fff;}

img.icon{background:#333;margin-right:15px;vertical-align:middle;}

#nudgeContainer{position:absolute;top:0;left:0;right:0;bottom:120px;}
.sliderNudge{position:absolute;top:10px;height:50px;width:31px;cursor:pointer;opacity:0.8;}
.sliderNudge:hover{color:#4285f4;opacity:1;}
.nudge_sub{left:-80px;background: url(../img/sub.png) no-repeat 50% 50%;}
.nudge_add{right:-80px;background: url(../img/add.png) no-repeat 50% 50%;}

.controlPanel{position:absolute;top:0;right:0;height:60vh;width:600px;background:#f6f6f6;padding:30px 30px 46px;z-index:20;overflow-y: auto;}
#controlBtns{position:absolute;left:100px;top:20px;height:40px;padding:5px 4px;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);z-index:10;}
#colorPanel, #fxPanel, #aniPanel, #helpPanel, #tilePanel{display:none;}
#control_color{background:#ddd url(../img/color.png) no-repeat 50% 50%;}
#control_ani{background:#ddd url(../img/ani.png) no-repeat 50% 50%;display:none;}
#control_tile{background:#ddd url(../img/tile.png) no-repeat 50% 50%;}
#control_color:hover, #control_ani:hover, #control_tile:hover{background-color:#fff;}
#collapseNum{position:absolute;z-index:10;left:40px;bottom:20px;color:#fff;font-size:100px;text-shadow: 5px 10px 20px rgba(0,0,0,1);display:none;}
.close{position:absolute;right:20px;top:20px;height:26px;width:26px;background:url(../img/close26.png) no-repeat 50% 50%;cursor:pointer;}


.warning{color:#FF5E4C;font-size:12px;line-height:16px;margin:15px 0 12px;}


#angleStepSlider, #trimSlider, #slider_scale, .hide{display:none;}