@charset "UTF-8";
/** --------------------------------------------
		Stylesheet for the GC Simulator 
		Authors: Felix Ivander & David Stone
		Updated: June 1st, 2020
	-------------------------------------------- **/

html, body {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
	width: 100%;
}

/**	Set the general font families and characteristics for the body **/
body {
	color: #000000;
	background-color: #FFFFFF;
	font-family: Helvetica, Geneva, Arial, sans-serif;
    line-height: 1.3;
    overflow-x: hidden;
}

header {
	background-color: #DDDDFF;
	color: #000066;
	border-bottom: 1px solid #999999;
    margin: 0;
	padding: 0px;
    text-align: center;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    vertical-align: center;
    z-index:104;
}
header div{
    float:left;
    padding: 0px;
    margin: 0px;
    text-align: center;
    
}
table, th, td {
    border: 1px solid black;
    border-collapse: separate;
    line-height: 150%;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
.headerbutton{
    height:100%;
    width:10%;
    position: inline-block;
    text-align:center;
    margin: auto;
    overflow: auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-style: inset;
    border-width: 1px;
    border-bottom-width:0px;
    border-color: #5351B5;
    margin-left: 2%;
    user-select: none;
}
.headerinput{
    height:100%;
    width:10%;
    display: inline-block;
    text-align:center;
    margin: auto;
    overflow: auto;
    margin-left: 2%;
    user-select: none;
}
.headerbutton:hover{
    opacity:20%;
    background-color:white;
    
    cursor: pointer;
}
.updown{
    position:absolute;
    z-index:inherit
}
.updown:hover{
    cursor:pointer;
}
.headerbutton:active{
    opacity:40%;
    background-color: #5351B5;
}
h1 {
  	font-size: 125%;
}

h2 {
	font-size: 115%;
}

h3 {
	font-size: 105%;
}

.chromPlot {
	border: 1px solid #999999;
	padding: 1em;
}

.cntlPanel {
	border: 1px solid #999999;
	padding: 0px;
    width: 25%;
    display: none;
    margin-top: 60px;
    user-select: none;
    position:fixed;
    background-color: white;
    z-index: 10;
    cursor:grab;
    opacity:0.8;
    margin-left:0px;
    margin-right:0px;
}
.cntlPanel:active{
    cursor:grabbing;
}
.opConds {
    text-align: right;
    border: 1px solid #999999;
    margin: 0%;
    
}
.opCondsChoices {
    text-align: right;
    border: 1px solid #999999;
    margin: 1%;
}
.opConds input {
	text-align: center;
	width: 4em;
}

.p {
    background-color: black;
    color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 0%;
    width: 99%;
    padding-left:1%;
    }       
    .sp {
    background-color: tomato;
    color: white;
    margin-top: 0px;
    margin-bottom:0px;  
    margin-right: 0%;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 99%;
    padding-left:1%;
    }     
    .slider {
    -webkit-appearance: none;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0%;
    margin-bottom:0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 100%;
    background-color:#DDDDFF;
    height: 30px;
    opacity: 0.3;
    -webkit-transition: .4s;
    transition: opacity .4s;
    }
    .slider:hover {
    opacity:2;
    }
    .slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    height:30px;
    width:30px;
    background:black;
    cursor:pointer;}
    .zoom{
        position:relative;
        display:absolute;
        left:0e;
        top:0;
        bottom:0;
        right:0;  
        z-index:1;
        opacity:0.99      
        }
    .dropdownmain {
        position:relative;
        display:inline-block;
        z-index:3;
    }
    .dropdownbutton {
        cursor:pointer;
        padding: 8px;
        font-size: 12px;
        border:none;
        background-color:blueviolet;
        color: white;
        display: inline-block;
        margin-top: 5px;
        color: black;
    }
    .dropdownbutton:hover{
        opacity:0.2;
    }
    .dropdownchoices {
        position:absolute;
        display:none;
        min-width:100%;
        padding:0%;
        z-index: 4;
        transition: 2s;
    }
    .sdropdownchoices {
        position:absolute;
        display:inline-block;
        min-width:100%;
        padding:0%;
        transition: 2s;
    }
    .dropdownchoices div {
        background-color:purple;
        padding:5%;
        font-size: 80%;
        color: white;
    }
    .sdropdownchoices div {
        background-color:tomato;
        padding:8%;
    }
    .dropdownchoices div:hover {
        background-color:indigo;
    }
    .sdropdownchoices div:hover {
        background-color:red;
    }
    .dropdownmain:hover .dropdownchoices{
        display: block;
        cursor: pointer;
    }
    .dropdownmain:hover .sdropdownchoices{
        cursor: pointer;
    }
   
    .notCtlPanel{
        display: inline-block;
        padding: 0px;
        margin: 0px;
        position: relative;
        margin-top: 60px;
    }
    .spbuttons {
    background-color: indigo;
    color: white;
    margin-top: 0px;
    margin-bottom:0px;   
    margin-right: 0%;
    padding:0px;
    width: 100%;
    display:inline-block;
    }
    body, canvas {
    margin: 0;
    padding: 0;

    }
    body canvas {
    background-color: white;
    }
    .pixel {
        display:inline-block;
        position:absolute;
        margin:0px;
        padding:0px;
        
    }
    .inpixel {
    
        position:relative;
        display:inline-block;
        background-color:#A579F2;
        opacity:0.5;
        margin:0px;
        padding:0px;
        cursor: move;
        z-index: 10;
    }
    .inpixel:hover {
        opacity:0.1;
    }
    .panner{
        margin:0px;
        padding:0px;
        position:absolute;
        width:75px;
        height:75px;
        border-color: red;
        border: 2px solid;
        color: blue;
        display:none;
    }
    .zoomed{
        border: 1px solid #000000;
        position:absolute;
        z-index:1000;
        display:none;
        cursor:grab;
    }
    body {
        line-height:50%;
    }
    input[type=color]{
        padding:0%;
        margin:0%;
        border:none;
        width: 10px;
        height: 10px;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
        border: none;
    }
    input[type="text"]{
        width:150px;
    }
    .bubble{
        z-index: 4;
        width: 20px;
        position: absolute;
        padding: 10px;
        background-color: white;
        opacity: 0.8;
        font-size: 12px;
        width: 8%;
        cursor: grab;
        user-select: none;
        border-width: 1px;
        border-style: inset;
        display: block
    }
    .bubble:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }    
    .polarpane{
        cursor:pointer;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12px;
        border:none;
        background-color:red;
        color: white;
        display: inline-block;
        margin: 0px;
        color: black;
        width:100%;
    }
    .polarpane:hover .inpolar{
        display: block;
    }
    .inpolar {
        display: none;
        position: absolute;
        min-width: 100%;
        background-color: thistle;
        margin:0px;
        
    }
    .dropdownmainp {
        position:relative;
        display:inline-block;
        z-index:3;
        margin:0px;
        padding:0px;
        height:20px;
        width:18%;
        padding-right:0px;
        border:1px solid black

    }
    .pl {
        margin:0px;
        padding:0px;
        border:1px solid black;
        margin-left: 0px;
    }