/* --- tooltip CSS Only --- */

.tooltip {
    /*cursor: help;*/
    position: relative;
    cursor: pointer;
}

.tooltip span.tooltipshow {
    margin-left: -9999px;
    position: absolute;
}

.tooltip:hover span.tooltipshow {
    position: absolute; 
    top: -220px; 
    right: -110px; 
    z-index: 99;
    margin-left: 0; 
    width: 320px;
    height:210px;
    background-image: url(/images/hover_box_bg.png);
    background-repeat:no-repeat;
    
    /* Text */
	text-decoration: none;
	color: #333 !important;
	font-size:13px;
	
	text-align:center;
	padding-top:20px;
}
    
.tooltip:hover span.productinfo {
    right: -225px; 
    top: -205px; 
    background-image: url(/images/hover_box_left_bg.png);
}

.tooltip span.tooltipshow img {
    margin:5px;
}

    .tooltip span.tooltipshow span.title {
        margin-top: 0px;
        margin-bottom: 5px;
        display: block;
        font-size: 16px;
        font-family: 'Roboto', 'Open Sans', sans-serif;
        font-weight: 400;
        color: #000000;
    }

.tooltip span.tooltipshow span.roomsize {
    margin-top: 0px;
    margin-bottom: 5px;
    display: block;
    color: #666666;
    font-size:14px;
}

.tooltip span.tooltipshow span.description {
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
    color: #666666;
    font-size:16px;
}
    
    
/* ------------ Cooling & Heating (shared rules) ------------ */


span.capacity_wrapper {
    text-align:center;
}

.capacity_wrapper span.cooling,
.capacity_wrapper span.heating {
    height:36px;
    margin-left:4px;
    margin-right:4px;
    margin-top:4px;
    margin-bottom:4px;
    line-height:25px;

}  
    
.capacity_wrapper span.cooling span.label,
.capacity_wrapper span.heating span.label {
    display:inline-block;
    width:50px;
    height:25px;
    margin: 5px 0px 5px 3px;
    text-indent:-9999px;
}

.capacity_wrapper span.cooling span.value,
.capacity_wrapper span.heating span.value {
    font-size:16px;
    font-weight:bold;
    display:inline-block;
    margin-right:5px;
    text-shadow: 1px 1px 1px #fff;
}
    
/* ------------ Cooling ------------ */
.capacity_wrapper span.cooling span.label {
    background-image: url('/images/heatpump/capacity.png');
    background-position: left center;
}

.capacity_wrapper span.cooling span.value {
    color:#306EFF;
}

/* ------------ Heating ------------ */
.capacity_wrapper span.heating span.label {
    background-image: url('/images/heatpump/capacity.png');
    background-position: right center;
}
    
.capacity_wrapper span.heating span.value {
    color:#ff0000;
}

* html a:hover { background: transparent; }



.danny {
    padding: 10px 20px 10px 20px;
    background: whitesmoke;
    border: 1px solid #333;
}







/* --- tooltip JQUERRY.TOOLTIP Only --- */

/* additional_features */
.additional_features_tooltip {
	display:none;
    font-size:12px;
    width:300px;
    min-height:50px;
    padding: 10px 20px 10px 20px;
    margin-top: -20px;
    border: 1px solid #333;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: whitesmoke; 
	box-shadow: 0 0 0px 2px #fafafa;
}




/* additional_features */
.tooltip_wizzard {
	display:none;
    font-size:12px;
    width:300px;
    min-height:50px;
    padding: 10px 20px 10px 20px;
    margin-top: -20px;
    border: 1px solid #333;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: whitesmoke; 
	box-shadow: 0 0 0px 2px #fafafa;
}

.tooltip_but {
    min-width:80px;
    height: 30px;
    background: #e3e3e3;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
}
    
.tooltip_but:hover {
    background: #d9d9d9;
    color: #222;
    cursor: pointer; 
}
    
.tooltip_but span {
    margin: 0;
    padding: 0 12px 0 12px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
    
.xtooltip_but span {
    margin: 0;
    padding: 0 12px 0 22px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background-image: url(/images/arrow_down.png);
    background-position: 7px 4px;
    background-repeat: no-repeat;
}





/* trigger button */
#bob a {
	background:transparent url(/img/home/download.png) no-repeat scroll 0 0;
	display:inline-block;
	height:44px;
	margin-bottom:30px;
	width:159px;
	cursor:pointer;
}

/* mouseover state */
#bob a:hover {
	background-position:0 -44px ;		
}

/* clicked state */
#bob a:focus {
	background-position:0 -88px;
}

/* tooltip styling */
.quick_links_tooltip {
	display:none;
	background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
	height:163px;
	padding:40px 30px 10px 30px;
	width:310px;
	color:#fff;
}

/* a .label element inside tooltip */
.quick_links_tooltip .label {
	color:yellow;
	width:35px;
}

.quick_links_tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}





/* MOBILE SITE */
@media screen and (max-width: 960px) {
.mob .additional_features_tooltip {
    width: 200px;
}
}