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


.how-to-use-popup {
	width:960px;
	height:600px;
	display:none;
}

#how-to-use-graphic {
	position:relative;

}

#how-to-use-graphic .tooltip-roof {
	position:absolute;
	top:100px;
	left:255px;
}

#how-to-use-graphic .tooltip-wall {
	position:absolute;
	top:320px;
	left:125px;
}

#how-to-use-graphic .tooltip-shear-wall {
	position:absolute;
	bottom:120px;
	left:215px;
}

#how-to-use-graphic .tooltip-subfloor {
	position:absolute;
	bottom:70px;
	left:45px;
}

#how-to-use-graphic .tooltip-fiber-cement {
	position:absolute;
	top:230px;
	right:400px;
}

#how-to-use-graphic .tooltip-fence {
	position:absolute;
	bottom:210px;
	right:100px;
}

#how-to-use-graphic .tooltip-deck-one {
	position:absolute;
	bottom:20px;
	right:300px;
}

#how-to-use-graphic .tooltip-deck-two {
	position:absolute;
	bottom:40px;
	right:200px;
}

#how-to-use-graphic .tooltip-deck-three {
	position:absolute;
	bottom:20px;
	right:100px;
}

#how-to-use-graphic .tooltip {
	display:none;
	background:url(../images/tooltip-background.png) repeat 0 0;
	white-space:nowrap;
	padding:10px 30px;
	z-index:1001;
	border:2px solid #fff;
	
	-webkit-border-radius: 5px;
	-moz-border-radius:    5px; 
    border-radius: 5px;
	
	-moz-box-shadow:0 6px 12px -4px #000;
	-webkit-box-shadow:0 6px 12px -4px #000;
	box-shadow: 0 6px 12px -4px #000; 
}

#how-to-use-graphic .tooltip h2 {
	color:#812e00;
	font-size:2.4em;
}

#how-to-use-graphic .tooltip h3 {
	color:#442814;
	font-size:1.8em;
}

#how-to-use-graphic .tooltip p {
	color:#812e00;
	margin-bottom:0;
	font-size:1.5em;
}

#how-to-use-graphic .tooltip .button {
	float:left;
	color:#3a1a06;
	font-family:e004045t, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-size:1.8em;
	margin-top:5px;
	padding-right:20px;
	background:url(../images/left-nav-arrow-callout.png) no-repeat right 50%;
}

#how-to-use-graphic .show-tooltip {
	background:url(../images/tooltip-button.png) no-repeat 0 0;
	display:block;
	width:40px;
	height:40px;
	text-indent:-9000px;
	position:relative;
	z-index:1000;
	
}

#how-to-use-graphic .show-tooltip-left {
	background:url(../images/tooltip-button.png) no-repeat 0 0;
	display:block;
	width:40px;
	height:40px;
	text-indent:-9000px;
	position:relative;
	z-index:1000;
}

#how-to-use-graphic .show-tooltip:hover {
	background:url(../images/tooltip-button-hover.png) no-repeat 0 0;
}

#how-to-use-graphic .show-tooltip-left:hover {
	background:url(../images/tooltip-button-hover.png) no-repeat 0 0;
}