/* css for Heritage Detail */
/* ***** DETAIL ***** */

body.rangedetail #right {
 min-height: 800px !important; 
}
* html body.rangedetail  #right {
  height: 800px !important;
}

#info-in {
	margin-top: 55px;
}

#subhead p {
	padding: 10px;
	font-size: 1.2em;
	font-weight: bold;
}

h2#detail {
  position: relative;
  height: 70px;
  width: 630px;
  margin-left: 5px
}
h2#detail span {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('images/bg_detail-h2.png') no-repeat 0 0;
}

.detail {
 width:490px;
 height:524px;
 position: relative;
 margin: 2em auto;
 background: url('images/cooker_detail_map.jpg') no-repeat 0 0; 
}
.hotspot h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.hotspot p {
  margin-bottom: 0.5em;
}
#dial {
 position: absolute;
 top: 310px;
 left: 350px;
 width: 35px;
 height: 35px;
}
#dial .hotspot {
 position: relative; 
 width: 35px;
 height: 35px;
/* border: 1px dotted #eee; */
}
#dial .hotspot span {
 display: none; 
}
#dial .hotspot:hover span {
 position: absolute;
 top: -280px;
 left: -285px; 
 display: block;
 width: 230px;
 padding: 10px;
 background: #fff;
} 

#hotplate {
 position: absolute;
 top: 245px;
 left: 85px;
 width: 85px;
 height: 25px;
}
#hotplate .hotspot {
 position: relative; 
 width: 85px;
 height: 25px;
/* border: 1px dotted #eee; */
}
#hotplate .hotspot span {
 display: none; 
}
#hotplate .hotspot:hover span {
 position: absolute;
 top: -225px;
 left: 90px; 
 display: block;
 width: 285px;
 padding: 10px;
 background: #fff; 
} 

#colour {
 position: absolute;
 top: 312px;
 left: 95px;
 width: 45px;
 height: 45px;
}
#colour .hotspot {
 position: relative; 
 width: 45px;
 height: 45px;
/* border: 1px dotted #eee; */
}
#colour .hotspot span {
 display: none; 
}
#colour .hotspot:hover span {
 position: absolute;
 top: -290px;
 left: 80px; 
 display: block;
 width: 280px;
 padding: 10px;
 background: #fff; 
} 

#sizes {
 position: absolute;
 top: 312px;
 left: 220px;
 width: 45px;
 height: 45px;
}
#sizes .hotspot {
 position: relative; 
 width: 45px;
 height: 45px;
/*  border: 1px dotted #eee; */
}
#sizes .hotspot span {
 display: none; 
}
#sizes .hotspot:hover span {
 position: absolute;
 top: -290px;
 left: -180px;  
 display: block;
 width: 390px;
 padding: 10px;
 background: #fff; 
} 

#ovens {
 position: absolute;
/* top: 312px; */
 top: 399px;
 left: 220px;
 width: 45px;
 height: 45px;
}
#ovens .hotspot {
 position: relative; 
 width: 45px;
 height: 45px;
/*  border: 1px dotted #eee; */
}
#ovens .hotspot span {
 display: none; 
}
#ovens .hotspot:hover span {
 position: absolute;
 top: -370px;
 left: -130px; 
 display: block;
/* width: 228px; */
 width: 350px;
 padding: 10px;
 background: #fff; 
} 
 
#overview {
 position: absolute;
 top: 100px;
 left: 105px; 
 width: 100px;
 height: 100px;
}
#overview .hotspot {
 position: relative; 
 width: 100px;
 height: 100px;
/* border: 1px dotted #eee;  */
}
#overview .hotspot span {
 display: none; 
}
#overview .hotspot:hover span {
 position: absolute;
 top: -70px;
 left: 100px; 
 display: block;
 width: 200px;
 padding: 10px;
 background: #fff; 
}

#hobcover {
 position: absolute;
 top: 235px;
 left: 205px;
 width: 95px;
 height: 35px;
}
#hobcover .hotspot {
 position: relative; 
 width: 95px;
 height: 35px;
/*  border: 1px dotted #eee; */
}
#hobcover .hotspot span {
 display: none; 
}
#hobcover .hotspot:hover span {
 position: absolute;
 top: -225px;
/* left: 100px;  */
 left: -200px;
 display: block;
 width: 260px;
 padding: 10px;
 background: #fff;
} 
 
#vent {
 position: absolute;
 top: 120px;
 left: 290px; 
 width: 23px;
 height: 90px;
}
#vent .hotspot {
 position: relative; 
 width: 23px;
 height: 90px;
/*  border: 1px dotted #eee;   */
}
#vent .hotspot span {
 display: none; 
}
#vent .hotspot:hover span {
 position: absolute;
 top: 125px;
 left: -290px; 
 display: block;
 width: 470px;
 padding: 10px;
 background: #fff; 
} 

.hotspot {
 z-index: 2; 
}
.hotspot span {
 z-index: 5; 
}
#boiler {
 position: absolute;
 top: 400px;
/* left: 265px; 
 width: 80px; */
 left: 340px; 
 width: 50px;
 height: 45px;
}
#boiler .hotspot {
 position: relative; 
 width: 50px;
 height: 45px;
/*  border: 1px dotted #eee;   */
}
#boiler .hotspot span {
 display: none; 
}
#boiler .hotspot:hover span {
 position: absolute;
 top: -370px;
 left: -235px; 
 display: block;
 width: 180px;
 padding: 10px;
 background: #fff; 
} 


#features {
 position: absolute;
 top: 210px;
 left: 335px; 
 width: 50px;
 height: 50px;
}
#features .hotspot {
 position: relative; 
 width: 50px;
 height: 50px;
/* border: 1px dotted #eee;  */
}
#features .hotspot span {
 display: none; 
}
#features .hotspot:hover span {
 position: absolute;
 top: -190px;
 left: -320px; 
 display: block;
 width: 300px;
 padding: 10px;
 background: #fff; 
}

#controls {
 position: absolute;
 top: 399px;
 left: 95px;
 width: 45px;
 height: 45px;
}
#controls .hotspot {
 position: relative; 
 width: 45px;
 height: 45px;
/*  border: 1px dotted #eee; */
}
#controls .hotspot span {
 display: none; 
}
#controls .hotspot:hover span {
 position: absolute;
 top: -370px;
/* left: 115px; */
  left: 0;
 display: block;
 width: 300px;
 padding: 10px;
 background: #fff; 
}