/*

WKO Tool
By: Esselink.nu

*/

.clr {
	clear: both;
}

.wkowrapper {
	width: 800px; //1026px;
	height: 600px; //769px;	
}

#wkotool {
	width: 100%;
	height: 100%;	
}

#wkotool #buiten {
	height: 100%;
	width: 39.47%;
	//background-image: url('img/bodem_thermic_zomer.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: background 1s linear;
	float: left;
}

#wkotool #buiten #title {
	float: left;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 100%;
	font-family: verdana;
    margin-top: 10px;
}

#wkotool #buiten #bron {
	height: 100%;
    width: 100%;
	background-repeat: no-repeat;
	background-position: bottom 10px right -3px;
	transition: background 1s linear;	
	background-size: auto 100%;
	position: relative;
	z-index: 10;
}

#wkotool #buiten #bron #line {	
	display: none;
	background-image: url('img/line.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 21%;
	height: 75%;
	position: absolute;
	bottom: 0px;
    left: 50%;
    margin-left: -6%;
}

#wkotool #buiten #bron #rain {
	display: none;
	background-image: url('img/rain.gif');
	height: 36%; //40%;
    width: 100%;
}

#wkotool #buiten #bron #snow {
	display: none;
	background-image: url('img/snow.gif');
	height: 36%; //40%;
    width: 100%;
}

#wkotool #buiten #glow_top,
#wkotool #buiten #glow_bottom {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	z-index: 9;
	height: 100px;
}

#wkotool #buiten #glow_top.zomer,
#wkotool #buiten #glow_top.zomerpiek {
	background-image: url('img/glow_red.png');
	transition: background 1s linear;
	top: -212px; //-263px;
    left: 50%;
    margin-left: -68px; /*-163px;*/
    width: 100px; /*300px;*/
	
}

#wkotool #buiten #glow_bottom.zomer,
#wkotool #buiten #glow_bottom.zomerpiek {
	background-image: url('img/glow_blue.png');	
	transition: background 1s linear;
    top: -200px; //-219px;
    left: 50%;
    margin-left: -163px; /*-68px;*/
    width: 300px; /*100px;*/
}

#wkotool #buiten #glow_top.winter,
#wkotool #buiten #glow_top.winterkoeling {
	//background-image: url('img/glow_blue.png');
	background-image: url('img/glow_red.png');
	transition: background 1s linear;
    top: -200px; //-219px;
    left: 50%;
    margin-left: -163px; /*-68px;*/
    width: 300px; /*100px;*/
	
}

#wkotool #buiten #glow_top.winter.geominid,
#wkotool #buiten #glow_top.winterkoeling.geominid {
	background-image: url('img/glow_blue.png');
	top: -212px; //-263px;
    left: 50%;
    margin-left: -68px; /*-163px;*/
    width: 100px; /*300px;*/
}

#wkotool #buiten #glow_bottom.winter,
#wkotool #buiten #glow_bottom.winterkoeling {
	//background-image: url('img/glow_red.png');	
	background-image: url('img/glow_blue.png');
	transition: background 1s linear;
	top: -212px; //-263px;
    left: 50%;
    margin-left: -68px; /*-163px;*/
    width: 100px; /*300px;*/
}
#wkotool #buiten #glow_bottom.winter.geominid,
#wkotool #buiten #glow_bottom.winterkoeling.geominid {
	background-image: url('img/glow_red.png');
	transition: background 1s linear;
    top: -200px; //-219px;
    left: 50%;
    margin-left: -163px; /*-68px;*/
    width: 300px; /*100px;*/	
}

#wkotool #buiten #glow_top.geodoublet {
	background-image: url('img/glow_red.png');	
	transition: background 1s linear;
	width: 100px;
	margin-left: -154px;
	top: -227px;
}

#wkotool #buiten #glow_top.geodoublet.winter,
#wkotool #buiten #glow_top.geodoublet.winterkoeling {
    margin-left: -196px;
    width: 200px;
    height: 200px;
}

#wkotool #buiten #glow_bottom.geodoublet {
	background-image: url('img/glow_blue.png');
	transition: background 1s linear;
    top: -340px; //-392px;
    left: 50%;
    margin-left: 0px;
    width: 200px;
    height: 200px;
}
#wkotool #buiten #glow_bottom.geodoublet.winter,
#wkotool #buiten #glow_bottom.geodoublet.winterkoeling {
    width: 120px;
    height: 120px;
	margin-left: 31px;
    top: -392px;
}

#wkotool #binnen {
	height: 100%;
	width: 60.53%;
	background-image: url('img/gebouw.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
	float: right;
}

#wkotool #binnen #installatie {
	height: 68%;
}

#wkotool #binnen #installatie #configuratie {
	background-repeat: no-repeat;
    background-position: left 12px bottom 78px;
	background-size: 100% auto; //100% auto;

	//transition: background 1s linear;		
	width: 100%;
    height: 100%;
}

#wkotool #binnen #installatie #configuratie.geodoublet {
    background-position: left 12px bottom 73px;
	background-size: 98% auto; //100% auto;
}

#wkotool #binnen #installatie #configuratie img#compressor {
	width: 25px;
    height: 25px;
	position: relative;
    top: 125px;
    left: 238px;
}

#wkotool #binnen #installatie #configuratie img#compressor.doublet {
    top: 119px !important;	
	left: 234px;
}

#wkotool #binnen #wkomenu {
	margin: 10px;
}

#wkotool #binnen #wkomenu .items {
	float: left;
	width: 33.3%;
}

#wkotool #binnen #wkomenu .items h2 {
	font-size: 17px !important;
	padding: 0px;
	margin: 0px;
}

#wkotool #binnen #wkomenu .items a {
	display: block;
	line-height: 10px;
	border: solid 1px #fff;
	border-radius: 5px;
	margin: 4px 10px 6px 0;
	padding: 10px;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	//font-weight: bold;
	font-family: verdana;
}

#wkotool #binnen #wkomenu .items a:hover {
}

#wkotool #binnen #wkomenu .items a.disabled {
	text-decoration: none;
	cursor: default;
	border: none;
	background: rgba(0, 0, 0, .3) !important;
}
#wkotool #binnen #wkomenu .items a.disabled:hover {
	background: rgba(0, 0, 0, .3) !important;
}

#wkotool #binnen #wkomenu .items.bron a:hover,
#wkotool #binnen #wkomenu .items.bron a.active {
	background-color: green;	
}

#wkotool #binnen #wkomenu .items.configuratie a:hover,
#wkotool #binnen #wkomenu .items.configuratie a.active {
	background-color: blue;	
}

#wkotool #binnen #wkomenu .items.situatie a:hover,
#wkotool #binnen #wkomenu .items.situatie a.active {
	background-color: red;	
}