@charset "UTF-8";
/* CSS Document */

/*************************************
*
* Nav styles
*
*************************************/

/*Note: a custom CSS will need to be created for each site.  This item is a sample navigation graphic for this template*/
.livingintoronto .nav_torontowater { 
	background:url(/water/images/torontowater.gif) no-repeat 0px 0px; 
	cursor: pointer; 
	padding-top: 19px;
	width: 138px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .basmentflooding_banner { 
	background: url(/water/sewers/images/basementbanner.gif) no-repeat 0px 0px;  
	padding-top: 70px;
	width: 395px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

/*************************************
*
* Button styles
*
*************************************/

.livingintoronto .btn_stormwater { 
	background: url(/water/images/btn_stormwater.gif) no-repeat 0px 0px;  
	cursor: pointer; 
	padding-top: 114px;
	width: 90px;
	float: left;
	height: 0 !important;
    /*overflow: hidden;*/
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .btn_stormwater:hover { 
	background-position:left bottom;
}

.livingintoronto .btn_drinkingwater { 
	background: url(/water/images/btn_drinkingwater.gif) no-repeat 0px 0px;  
	cursor: pointer; 
	padding-top: 114px;
	width: 75px;
	float: left;
	height: 0 !important;
    /*overflow: hidden;*/
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .btn_drinkingwater:hover { 
	background-position:left bottom;
}

.livingintoronto .btn_watereff { 
	background: url(/water/images/btn_watereff.gif) no-repeat 0px 0px;  
	cursor: pointer; 
	padding-top: 114px;
	width: 77px;
	float: left;
	height: 0 !important;
    /*overflow: hidden;*/
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .btn_watereff:hover { 
	background-position:left bottom;
}

.livingintoronto .btn_wastewater { 
	background: url(/water/images/btn_wastewater.gif) no-repeat 0px 0px;  
	cursor: pointer; 
	padding-top: 114px;
	width: 87px;
	float: left;
	height: 0 !important;
    /*overflow: hidden;*/
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .btn_wastewater:hover { 
	background-position:left bottom;
}

.livingintoronto .btn_hottopics { 
	background: url(/water/images/btn_hottopics.gif) no-repeat 0px 0px;  
	cursor: pointer; 
	padding-top: 114px;
	width: 44px;
	float: left;
	height: 0 !important;
    /*overflow: hidden;*/
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

.livingintoronto .btn_hottopics:hover { 
	background-position:left bottom;
}



/*************************************
*
* Homepage icons
*
*************************************/

.tooltip {
			color: #000000; 
			outline: none;
			text-decoration: none;
			position: relative;
			
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			position: absolute; left:-10px; top:100px; 
			margin-left: 0; width: 150px;
			overflow: auto;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-size: 12px; font-weight: bold;
			display: block; padding: 3px 0 3px 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		
		.classic {background: #f5f5f5; border: 1px solid #cccccc; font-size: 11px; }

/*************************************
*
* Map
*
*************************************/

#map {
	margin:0 !important;
	padding:0 !important;
	width:407px;
	height:444px;
	background: url(/water/images/house_lrg.jpg) top left no-repeat #fff;
}

#map li {
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
	background:none !important;
}

#map li a {
    position:absolute !important;
    display:block !important;
    /*
       Specifying a background image
       (a 1px by 1px transparent gif)
       fixes a bug in older versions of
       IE that causeses the block to not
       render at its full dimensions.
    */
    background:url(/images/x.gif) !important;
	text-decoration:none;
}

#map li a p {
	margin:0 0 1em 0;
	padding:0 0 0 20px;
	background: url(/assets/images/nav_bluebullet.gif) no-repeat 10px 2px;
}

#map .subbullet {
	margin:0 0 1em 0;
	padding:0 0 0 40px;
	background: url(/assets/images/nav_bluebullet.gif) no-repeat 25px 2px;
}

#map li a span { display:none; }

#map li a:hover span {
    position:relative;
    display:block;
    width:200px;
    left:50px;
    top:-50px;
    padding:5px;
    border:1px solid #569bbe;
    background:#c2dbe8;
    text-decoration:none;
    color:#000;
    filter:alpha(opacity=80);
    opacity:0.9;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#map li a.basement:hover span {
    position:relative;
    display:block;
    width:200px;
    left:50px;
    top:-201px;
    padding:5px;
    border:1px solid #569bbe;
    background:#c2dbe8;
    text-decoration:none;
    color:#000;
    filter:alpha(opacity=80);
    opacity:0.9;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#map li a.outside:hover span {
    position:relative;
    display:block;
    width:375px;
    left:10px;
    top:-175px;
    padding:5px;
    border:1px solid #569bbe;
    background:#c2dbe8;
    text-decoration:none;
    color:#000;
    filter:alpha(opacity=80);
    opacity:0.9;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#map a.bathroom {
    top:446px;
    left:173px;
    width:118px;
    height:122px;
}

#map a.kitchen {
    top:568px;
    left:173px;
    width:229px;
    height:115px;
}

#map a.basement {
    top:683px;
    left:173px;
    width:229px;
    height:100px;
}

#map a.outside {
    top:352px;
    left:402px;
    width:155px;
    height:405px;
}

/*************************************
*
* Tip
*
*************************************/

.tip { 
	background-color:#EEEEEE;
	height:26px;
	width:407px;
}
.tip div { 
	padding:4px 10px 4px 10px;
	float:left; 
	color:#FFF; 
	text-align:center; 
	background:#064e80; 
	margin:0 10px 0 0;
}
.tip p { 
	font-weight:bold; 
	padding:4px 10px 4px 10px;
	margin:0;
	
}

/*************************************
*
* Homepage
*
*************************************/

.mdd {
	background:url(/water/images/homepage_mdd_image.gif) no-repeat 0 -100px #a0cbed;
	padding:4px 4px 4px 147px !important;
	margin:0px 14px 9px 8px;
	text-align:left;
	-webkit-border-radius: .5em !important;
	-moz-border-radius: .5em !important;
	border-radius: .5em !important;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
	clear:both;
}

.mdd h3 {
	background: url(/water/images/homepage_mdd_text.gif) no-repeat 0px 0px; 
	cursor: pointer; 
	padding-top: 53px;
	width: 234px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    text-decoration: none;
	display:block;
}

/*************************************
*
* Water-eff
*
*************************************/

.full_sun {
	background:url(/watereff/images/fullsun.jpg) no-repeat 0px 0px;   
	padding-top: 21px;
	width: 21px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 4px 0 0 !important;
    text-decoration: none;
	display:block;	
}

.partial_sun {
	background:url(/watereff/images/partialsun.jpg) no-repeat 0px 0px;   
	padding-top: 21px;
	width: 21px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 4px 0 0 !important;
    text-decoration: none;
	display:block;	
}

.full_shade {
	background:url(/watereff/images/fullshade.jpg) no-repeat 0px 0px;   
	padding-top: 21px;
	width: 21px;
	float: left;
	height: 0 !important;
    overflow: hidden;
    margin: 0 4px 0 0 !important;
    text-decoration: none;
	display:block;	
}