body{padding:0;margin:0;background:rgb(45,50,55);font-family:Arial,Helvetica,sans-serif;color:#454545;}



#svgContainer{position:absolute;top:0px;bottom:0px;left:0;right:0;}
.domainsContainer{position:absolute;top:0;bottom:0;z-index:0;overflow:hidden;}
#domainsContainer_0{left:0;}
#domainsContainer_1{right:0;}



#scaleSelectContainer{position:absolute;z-index:10;left:50%;bottom:20px;height:40px;padding:5px 4px;border:1px solid #fff;border-radius:8px;}

.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;}


fieldset{border:1px solid #ccc;margin-top:30px;clear:both;}

label{margin-top:7px;}


#loop{font-size:14px;color:#eee;position:absolute;left:35px;bottom:40px;}
#loopExtent{font-size:24px;color:#eee;margin-left:5px;}

.slider{margin-top:12px;}

.ui-slider-handle{width: 3em!important;height: 1.6em!important;top: 50%!important;margin-top: -.8em!important;text-align: center!important;line-height: 1.6em!important;}

.vectorSlider{margin:20px 0;}

#sequenceTextArea{padding:10px;color:#777;border-color:#ccc;border-radius:4px;width:348px;}
#adaptedSequence{font-weight:bold;color:#333;}
.removed{text-decoration: line-through;color:#ccc;}

#number{position:absolute;right:40px;bottom:40px;border:2px solid #777;color:#000;background:#fff;font-size:30px;line-height:30px;padding:15px 20px;width:100px;text-align:center;font-weight:bold;border-radius:8px;margin-top:20px;}
.graphBarHighLight:hover{stoke:#fff;stroke-width:0.5;fill-opacity:0.3;cursor:pointer;}

.controlRow{clear:both;}
.cellL{float:left;width:160px;padding:20px 0;}
.cellR{float:right;width:370px;padding:20px 30px 0 0;}

.cellRL{float:left;width:140px;padding:20px 0;}
.cellRR{float:right;width:240px;padding:20px 0 0 0;}

.hr{border-top: 1px solid #ddd;}
#thumbs{position:absolute;right:0;left:0;bottom:0;height:100px;z-index:1;overflow-x:auto;overflow-y:hidden;padding:0 20px;}

#linkContainer{padding:10px 0;}
#linkContainer a{color:#777;line-height:20px;font-size:14px;}
#linkContainer a:hover{color:#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;}
#mainContainer, #controls{position:absolute;top:0px;bottom:0px;left:0;right:0;}
#controls{display:block;}
#svgContainer{position:absolute;top:0px;bottom:0px;left:0;right:0;}
.domainsContainer{position:absolute;top:0;bottom:0;z-index:0;overflow:hidden;}

#sliderContainer{position:absolute;z-index:10;left:20px;bottom:100px;right:20px;}
.sliderCell{position:relative;height:100px;background:transparent;margin:0 100px;}



.sliderCell .slider{margin:20px 0 10px;}
.sliderCell .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_modulus{background:rgba(127,127,127,0.2)!important;border:1px solid #fff!important;}
#custom-handle_domains, #custom-handle_modulus{width: 3.4em!important;height: 2.2em!important;margin-top: -1.1em!important;text-align: center!important;important;border:1px solid #444!important;important;background:#ddd!important;}

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



#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;}

#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;}


#controlBtns{position:absolute;bottom:20px;right:20px;height:40px;padding:5px 4px;border:1px solid #fff;border-radius:8px;background:rgba(127,127,127,0.2);}
#colorPanel, #fxPanel, #helpPanel{display:none;padding:30px;}
#control_color{background:#ddd url(../img/color.png) no-repeat 50% 50%;}
#control_color:hover{background:#fff url(../img/color.png) no-repeat 50% 50%;}

.controlPanel{position:absolute;top:30px;right:30px;bottom:400px;width:600px;background:#f6f6f6;z-index:20;}

.p30{padding:30px;}
.close{position:absolute;right:20px;top:20px;height:26px;width:26px;background:url(../img/close26.png) no-repeat 50% 50%;cursor:pointer;}
.scrollPane{position:absolute;top:100px;left:0;bottom:12px;right:0;overflow-y: auto;padding:0 30px 46px;}

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