#sack {
    background: url("../../shared/gfx/backgrounds/chemsolve.jpg");
    background-size: cover;
}

#scout-view{
    display:none;
}

#config-view{
    width:90%;
    margin: 0 auto;
	margin-top:30px;
    border:thin solid red;
	color:#444444;
	background-color:#FFFFFF;
}

canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


#intro-info{
    position:fixed;
    padding-left:80px;
    padding-top:40px;
    text-align:center;
    display:none;
}

#wrf-animation{
	border:thin solid #333333;
	position:relative;
	left:5px;
	top:5px;
	width:140px;
	height:140px;	
	display:none;
	margin:auto;
	margin-top:20px;	
}
#wrf-animation-top{
	background-color:#ff3300;
	position:relative;	
	width:100%;
	height:30%;
}
#wrf-animation-bot{
	background-color:#77b300;
	position:relative;	
	width:100%;
	height:70%;
}
#wrf-animation-ball{
	border:thin solid black;
	position:absolute;	
	left:5px;
	top:60px;
	width:16px;
	height:16px;
	background-color:#333333;
	border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

.tr-grid{

}
.td-grid{
    padding:1px;
}

.div-grid{
    height:24px;
    width:24px;
    border:none;
    border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
}

.div-grid-min{
    height:16px;
    width:16px;
    border:none;    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.div-grid-c0{
    /* empty */
    border:none;
	cursor:auto;
}
.div-grid-c1{
    /* inverted */
    border: none;
	cursor:pointer;
    background: url("../sack/bg1-sack.png");
}

.hilighted{
	background-color:#EEEEEE;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.cursor-select{
	cursor:pointer;
}
.cursor-no-select{
	cursor:not-allowed;
}

.config-edit-field{
    text-align: center;
    cursor: pointer;
}

.div-grid-c2{
    border:none;
	cursor:pointer;
    background: #ca3025; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left bottom, #790702, #fc6d66); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right, #790702, #fc6d66); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right, #790702, #fc6d66); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right, #790702, #fc6d66); /* Standard syntax (must be last) */
}

.div-grid-c3{
    border:none;
	cursor:pointer;
    background: #1947e0; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left bottom, #021c72, #92aafa); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right, #021c72, #92aafa); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right, #021c72, #92aafa); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right, #021c72, #92aafa); /* Standard syntax (must be last) */
}

.div-grid-c4{
    border:none;
	cursor:pointer;
    background: #3eb00e; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left bottom, #1c5b01, #8af75b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right, #1c5b01, #8af75b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right, #1c5b01, #8af75b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right, #1c5b01, #8af75b); /* Standard syntax (must be last) */
}

.div-grid-c5{
    border:none;
	cursor:pointer;
    background: #f5ca02; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left bottom, #d39502, #fbeb6d); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right, #d39502, #fbeb6d); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right, #d39502, #fbeb6d); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right, #d39502, #fbeb6d); /* Standard syntax (must be last) */
}

.frml-red{
    color:#e62e00;
}
.frml-blue{
    color:#005ce6;
}
.frml-green{
    color:#4d9900;
}
.frml-yellow{
    color:#ffcc00;
}

.div-grid-c6{
    border:none;
    background: #666666; /* For browsers that do not support gradients */
	/*
    background: -webkit-linear-gradient(left bottom, #666666, #DDDDDD); 
    background: -o-linear-gradient(top right, #666666, #DDDDDD); 
    background: -moz-linear-gradient(top right, #666666, #DDDDDD);
    background: linear-gradient(to top right, #666666, #DDDDDD); 
	*/
	cursor:auto;
}

.dg-min{
    height:20px;
	width:20px;
}

.div-men{
    border:thin solid #AAAAAA;
    background-color:#DDDDDD;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-top:5px;
    height:auto;
}

#div-m2{
    padding:6px;
    color:#222222;
    font-size: 0.9em;
    height: auto;
    min-height: 60px;
 }

#frml-pr-z{
    border-bottom:thin solid #EEEEEE;
    background-color:grey;
    width:36px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}
#frml-pr-n{
    background-color:grey;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

.div-btn-group{
    border:thin solid #AAAAAA;
    background-color:#444444;
    color:#EEEEEE;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-top:20px;
    margin-bottom:10px;
    margin-left:30px;
    margin-right:30px;

    padding-bottom:10px;
    line-height:30px;
    display:none;
}

.config-btn{
	background:url(men1.png) no-repeat; /* adjust url as required */
	background-size: contain;
    height:26px;
	width:26px;
	cursor:pointer;
	margin:0 auto;
	margin-top:2px;	
}

input[type="radio"]{
	cursor:pointer;
	border:thin solid red;
	margin:0px !important;	
	padding:0px !important;
	vertical-align: middle;
	
}

.radio-div{
	border:thin solid #333333;
	background-color:#FFFFFF;
	cursor:pointer;
	margin-right:10px;
	height:16px;
	width:16px;
	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	margin:0 auto;
}
.radio-div-inner{
	display:none;
	background-color:green;
	cursor:pointer;
	height:10px;
	width:10px;
	margin-top:3px;
	margin-left:3px;
	border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.table-modus{
	border-collapse: collapse;
}

#table-config td, #table-config th{
	border:thin solid grey;
	border-collapse: collapse;
	padding-left:15px;
	padding-right:15px;
}
#table-config{
	border-collapse: collapse;
}

.table-main-config{

    margin: 0 auto;
    margin-top:30px;
    border:thin solid #333333;
    color:#444444;
    background-color:#FFFFFF;
    margin-left:10px;
    margin-right:10px;
}

#table-main-config-left td, #table-main-config-right td,
#table-main-config-left th, #table-main-config-right th{
	border:thin solid #DDDDDD;	
	padding:2px;
	padding-left:4px;
	padding-right:4px;
}

.table-radio-conf{
	width:100%;
}
.table-radio-conf td{
	border:none !important;	
}

.table-modus-sub td{
    border:none !important;
}

#nr-slider-1{
	width:240px;
	height:12px;
}
#nr-slider-1 .ui-slider-range { background: #ef2929; } /*red*/
#nr-slider-1 .ui-slider-handle { border-color: #ef2929; }
#nr-slider-1 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-2{
    width:240px;
    height:12px;
}
#nr-slider-2 .ui-slider-range { background: #1947e0; } /*blue*/
#nr-slider-2 .ui-slider-handle { border-color: #1947e0; }
#nr-slider-2 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-3{
    width:240px;
    height:12px;
}
#nr-slider-3 .ui-slider-range { background: #3eb00e; } /*green*/
#nr-slider-3 .ui-slider-handle { border-color: #3eb00e; }
#nr-slider-3 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-4{
    width:240px;
    height:12px;
}
#nr-slider-4 .ui-slider-range { background: #f5ca02; } /*yellow*/
#nr-slider-4 .ui-slider-handle { border-color: #f5ca02; }
#nr-slider-4 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-w-1{
    width:240px;
    height:12px;
}
#nr-slider-w-1 .ui-slider-handle { border-color: #333333; }
#nr-slider-w-1 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-w-2{
    width:240px;
    height:12px;
}
#nr-slider-w-2 .ui-slider-handle { border-color: #333333; }
#nr-slider-w-2 .ui-state-active { background:#CCCCCC !important; }

#nr-slider-w-3{
    width:240px;
    height:12px;
}
#nr-slider-w-3 .ui-slider-handle { border-color: #333333; }
#nr-slider-w-3 .ui-state-active { background:#CCCCCC !important; }

#abbrk-slider-1{
    width:240px;
    height:12px;
}
#abbrk-slider-1 .ui-slider-handle { border-color: #333333; }
#abbrk-slider-1 .ui-state-active { background:#CCCCCC !important; }


.ui-dialog {
	background:#DDDDDD !important;	
}
.ui-dialog .ui-dialog-titlebar{
	background:#145fba !important;
	color:#FFFFFF !important;
}
.ui-dialog .ui-dialog-titlebar-close{	
	background:url(x4.png) no-repeat; 
	background-size: contain;
	border:none;
	
}

.close-x{
    background:url(x4.png) no-repeat;
    border:none;
    background-size: contain;
}

#modal-modus{
	background-color:white; 
	margin-bottom:-6px; 
	display:none;
}

#modal-config{
	background-color:white; 
	margin-bottom:-6px; 
	display:none;
    max-height: 300px !important;
    min-height: 250px !important;
}


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