.step
{
	width:97%;
	height:60px;
	border:thin solid grey;
	padding:8px;
	margin:5px;
	display:none;

}

.step-vis
{
	width:97%;
	height:60px;
	border:thin solid grey;
	padding:8px;
	margin:5px;
}

#st-56, #st-7
{
	height:85px;
	border:thin solid grey;
}

#content-div
{
	text-align:left;
	color:white;

}

.step-name
{
	font-family:Arial;
	font-size:12pt;
	text-align:left;
}

.q-field
{
	font-family:Arial;
	font-size:14pt;
}

.mouse-pointer{
	cursor:pointer;
}

/*
.q-field:hover
{
	cursor:pointer;
}
*/

/**/

.button {

		display:block;
		border:1px solid #000000;
		width:65px;
		height:20px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
		font-size:12pt;
		color:#000000;
		padding-top:8px;
		margin-top:2px;
		margin-bottom:2px;
background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#999999));
background: -moz-linear-gradient(top, #dddddd, #999999);
-moz-box-shadow: 1px 1px rgba(0,0,0,0.5) ;
-webkit-box-shadow: 1px 1px rgba(0,0,0,0.5) ;
box-shadow: 1px 1px rgba(0,0,0,0.5) ;
		text-align:center !important;
}

.button_red {

background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#990000)) !important;
background: -moz-linear-gradient(top, #ff0000, #990000) !important;
	color:#ffffff !important;

}
.device .button_dark {

background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#333333));
background: -moz-linear-gradient(top, #888888, #333333);
		color:#ffffff;

}

.button_green {

background: -webkit-gradient(linear, left top, left bottom, from(#9ad945), to(#7eb238)) !important;
background: -moz-linear-gradient(top, #9ad945, #7eb238) !important;
	color:#ffffff !important;

}

.button_blue {

background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0033FF)) !important;
background: -moz-linear-gradient(top, #0066FF, #0033FF) !important;
	color:#ffffff !important;

}

.button_yellow {

background: -webkit-gradient(linear, left top, left bottom, from(#FFCC00), to(#CC9900)) !important;
background: -moz-linear-gradient(top, #FFCC00, #CC9900) !important;
	color:#ffffff !important;

}

.button_grey {

background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#AAAAAA)) !important;
background: -moz-linear-gradient(top, #EEEEEE, #AAAAAA) !important;
	color:#888888 !important;

}

.fixed-div {
    position: absolute;
    top: 30px;
    left: 100px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100;
    background-color: #EEEEEE;
    display: none;
    width:600px;
    height:600px;
}

.fixed-div-kb {
    position: absolute;
    top: 250px;
    left: 100px;
    border: 1px solid #333333;
    padding: 5px;
    z-index: 100;
    background-color: #EEEEEE;
    display: none;
    width:500px;
    height:260px;
}

.fixed-div-kb-mol {
    position: absolute;
    top: 250px;
    left: 250px;
    border: 1px solid #333333;
    padding: 5px;
    z-index: 100;
    background-color: #EEEEEE;
    display: none;
    width:320px;
    height:260px;
}

.fixed-div-waage{
	position:absolute;
	/*width:730px;*/
    top: 340px;
    margin-left:25px;
    border: 1px solid green;
    padding: 1px;

    background-color: #D4EDCC;
    display: none;

    -moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

.fixed-msg-box-frame{
	position:absolute;
	width:550px;
    top: 450px;
    /*left:285px; this must be set by code, in relation to dr. atom */
    /*border: 1px solid red;*/
    padding-bottom: 50px;
    display: none;
    -moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
	z-index: 200;
}
.fixed-msg-box-shadow{
	width:445px;
    border: 1px solid #444444;
    padding-bottom:6px;
    background-color: #888888;
    -moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
	z-index: 200;
}
.fixed-msg-box{
	width:400px;
	margin-top:-3px;
	margin-left:-3px;
    border: 1px solid #BBBBBB;
    padding: 20px;
    padding-top:35px;
    background-color: #EEEEEE;
    color: #333333;
    text-align:left;
    -moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
	z-index: 200;
}
.fixed-msg-box-x-close{
	position:absolute; left:410px; top:6px; height:20px;width:20px; border:thin solid grey; background-color:red;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	font-weight:bold;
}
.cx-white{
	border:thin solid #AAAAAA;
	background-color:#EEEEEE;
}
.cx-1{
	position:absolute;
	left:455px;
	top:65px;
	height:20px;
	width:20px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}
.cx-2{
	position:absolute;
	left:480px;
	top:90px;
	height:16px;
	width:16px;
	-moz-border-radius: 8px 8px 8px 8px;
	-webkit-border-radius: 8px 8px 8px 8px;
	border-radius: 8px 8px 8px 8px;
}
.cx-3{
	position:absolute;
	left:502px;
	top:105px;
	height:12px;
	width:12px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
}
.cx-4{
	position:absolute;
	left:521px;
	top:115px;
	height:8px;
	width:8px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}
.cx-5{
	position:absolute;
	left:537px;
	top:120px;
	height:4px;
	width:4px;
	-moz-border-radius: 2px 2px 2px 2px;
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
}

.step-asgl
{
	height:38px;
	color:#333333;
	border-bottom:thin solid grey;
}
.box-asgl{
	border:none;
	/*height:28px;
	line-height:28px;*/ /*text vertical centering*/
	overflow:hide;

}

.plus_div{
	display:none;
}

.pl_box{
	font-size:0.9em;
	width:10px;
}

.el_box{
	border:thin solid white;
	height:28px;
	line-height:28px; /*text vertical centering*/
	overflow:hide;
}
.el_box2{
	border:thin solid white;
	height:28px;
	line-height:28px; /*text vertical centering*/
	overflow:hide;
	cursor:pointer;
}
.el_box_new{
	color:#0099ff;
}
.el_box_pointer{
	cursor:pointer; /*is hand*/
}

.el_box_small{
	border:thin solid white;
	height:24px;
	line-height:24px; /*text vertical centering*/
	overflow:hide;
}

.el_box_br{
	border-bottom:2px solid white;
	height:24px;
	line-height:24px; /*text vertical centering*/
	overflow:hide;
}
.el_box_brx{
	height:24px;
	line-height:24px; /*text vertical centering*/
	overflow:hide;
}

.span_green{
	border:thin solid green;
	background-color: #009900;
	padding:2px;
	font-size:0.8em;
}
.span_red{
	border:thin solid red;
	background-color: #ff3300;
	padding:2px;
	font-size:0.8em;
}
.span_def{
	padding-top:2px;
	padding-bottom:2px;
	font-size:0.8em;
}


.span_green2{
	border:thin solid #4d9900;
	padding:2px;
	font-size:0.8em;
	padding-left:3px;
	padding-right:3px;
}
.span_yellow2{
	border:thin solid #ffcc00;
	padding:2px;
	font-size:0.8em;
	padding-left:5px;
	padding-right:5px;
}
.span_red2{
	border:thin solid #ff471a;
	padding:2px;
	font-size:0.8em;
	padding-left:6px;
	padding-right:6px;
}
.span_def2{
	padding-top:2px;
	padding-bottom:2px;
	font-size:0.8em;
}

.span_def3{
	padding-top:2px;
	padding-bottom:2px;
	font-size:0.8em;
	color:#a6ff4d;
}

.span-red-text{
	padding-top:2px;
	padding-bottom:2px;
	font-size:0.8em;
	color:#ff3300;
}
.span-red-text2{
		
	color:#ff3300;
}

.wpm-button{
	width:30px;
	height:22px;
	line-height:22px;
	font-size:1.2em;
	border:thin solid grey;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	cursor:pointer;
	background-color:#DDDDDD;
}

.wpm-back-button{
	margin:auto;
	border:thin solid #444444;
	padding:4px;
	color:#444444;
	background-color:#DDDDDD;
	margin-top:15px;
	width:110px;
	cursor:pointer;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

.mol-nr
{
	border:thin solid #4d9900;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:6px;
	padding-right:6px;
	color:#a6ff4d;
	cursor:pointer;
}

a{
	color:blue;
	text-decoration:none;
}

#todo-text{
	position:relative;
	height:230px;
	overflow-y:auto;
}

.trash{
	position:relative;
	float:left;
	
	top:1px;
	bottom:1px;
	margin:0px;
	padding:2px;
	height:60px;
	width:110px;
	display:none;
	background-image: url("../gfx/chems/trash.png");
	background-repeat: no-repeat;
	background-size: 44% auto;
	background-position:20px 10px;
	
}

.score{
	position:relative;
	float:right;
	
	top:1px;	
	bottom:1px;
	
	padding-top:3px;
	height:60px;
	width:110px;
}

.dr-atom{
	margin:0px;
	padding:10px;
	height:186px;

	background-image: url("../gfx/chems/unsmily.png");
	background-repeat: no-repeat;
	background-size: 75% auto;
	background-position: 35px 20px;

	cursor: help;
}

.arrow-green{
	background-image: url("../gfx/chems/arrowgreen50p.png");
	background-repeat: no-repeat;
	background-size: 95% auto;
	background-position: 0px 14px;
}
.arrow-green-st6{
	background-image: url("../gfx/chems/arrowgreen50p.png");
	background-repeat: no-repeat;
	background-size: 95% auto;
	background-position: 0px 26px;
}
.arrow-red{
	background-image: url("../gfx/chems/arrowred50p.png");
	background-repeat: no-repeat;
	background-size: 95% auto;
	background-position: 0px 14px;
	color:#a6ff4d;
	font-size:1.3em;
	padding-top:10px;
	text-align:left;
	width:4%;
}

/* ---------------------------------------------- */

.modal-box {
	display: none;
	position: absolute;
	z-index: 1000;
	width: 98%;
	background: white;
	border-bottom: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-clip: padding-box;

	color:red;
	width:460px;
	left:100px;
}

.modal-box header, .modal-box .modal-header {
	padding: 1.25em 1.5em;
	border-bottom: 1px solid #ddd;
}

.modal-box header h3, .modal-box header h4, .modal-box .modal-header h3,
	.modal-box .modal-header h4 {
	margin: 0;
}

.modal-box .modal-body {
	padding: 2em 1.5em;
}

.modal-box footer, .modal-box .modal-footer {
	padding: 1em;
	border-top: 1px solid #ddd;
	/*background: rgba(0, 0, 0, 0.02);*/
	text-align: right;
}

.modal-overlay {
	opacity: 0.8;
	/*filter: alpha(opacity = 0);*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
	line-height: 1;
	font-size: 1.5em;
	position: absolute;
	top: 5%;
	right: 2%;
	text-decoration: none;
	color: #bbb;
}

a.close:hover {
	color: #222;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	transition: color 1s ease;
}

.js-modal-close{
	border:thin solid grey;
	padding:5px;
}

.sign-equal{
	font-size:2em;
	font-weight:bold;
	color:#4d9900;
	width:4%;
	text-align:center;
}

/* modal box for PS*/

.modal-box-ps {
	display: none;
	position: absolute;
	z-index: 1000;

	background: white;
	border-bottom: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-clip: padding-box;

	/*width:740px;*/

}

.modal-box-ps header, .modal-box-ps .modal-header {
	padding: 1.25em 1.5em;
	border-bottom: 1px solid #ddd;
}

.modal-box-ps header h3, .modal-box-ps header h4, .modal-box-ps .modal-header h3,
	.modal-box-ps .modal-header h4 {
	margin: 0;
}

.modal-box-ps .modal-body {
	padding: 2em 1.5em;
}

.modal-box-ps footer, .modal-box-ps .modal-footer {
	padding: 1em;
	border-top: 1px solid #ddd;
	background: rgba(0, 0, 0, 0.02);
	text-align: right;
}