@charset "utf-8";
/* CSS Document */
*{
	margin: 0px;
	padding: 0px;
}

body{
	background-image:url(../images/common/grey_gradient.jpg);
	/*font:Arial, Helvetica, sans-serif;*/
	font-size:14px;
	background-repeat:repeat-x;
}

#page1{
/*background-color:#FFFFFF;*/
	margin:auto;
	width:980px;
}

#page1 h2{
	padding:5px 0px 10px;
	font-size:14px;
	text-align:center;
}

#page1 h3{
	font-size:20px;
	color: #ac2323;
	display: inline;
	margin-right: 50px;
}

#page1 h4{
	font-size:20px;
	color:#009900;
}

.warning{
	font-weight:bold;
	color:#FF0000;
}
.default{
	color:#000000;
}


#results {
	clear:both;
	margin: 8px 0;
	background-color: #fff;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, sans-serif;
	height: 100px;
	width:975px;
	font-size:12px;
}

/* Instructions and Results Box */
#results #text1 {
	position:relative;
	margin: 0 20px;
	width:820px;
}

#results #calc {
	margin: 0px 8px 5px 0px;
	display: block;
	width: 80px;
	float:right;
}

#results #print {
	margin: 0px 8px 0px 0px;
	display: block;
	width: 80px;
	float:right;
	clear:right;
}

/* Rainfall Intensity Box*/
#step1{
	background-color: #fff;
	border:solid 1px #000000;
	height: 380px;
	width: 250px;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
	margin-bottom:10px; /* for the step5 pannel */
}

#step1 #rain{
	margin: 7px 0;
	position:relative;
	left:65px;
	width:80px;
}

#step1 #rainLabel{
	position:relative;
	left:-80px;
	top: -7px;
}

#step1 #name{
	margin: 7px 0;
	position:relative;
	left:65px;
	width:150px;
	background-color:#BBB;
}

#step1 #nameLabel{
	position:relative;
	left:-150px;
	top:-7px;
}

#step1 span{
	position:relative;
	left:20px;
	top:-7px;	
}


/* Roof Details box */
#step2 {
	background-color: #fff;
	border:solid 1px #000000;
	height: 380px;
	width: 230px;
	margin:0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
}

#step2 span{
	position:relative;
	top:-7px;	
}

#step2 #spacer {
	display:block;
	width:90px;
	float:left;
	margin:0 0 10px 10px;
}

#step2 #length {
	margin: 7px 0;
	position:relative;
	left:65px;
	width:80px;
	background-color:#BBB;
}
#step2 #lengthLabel{
	position:relative;
	left:-80px;
	top:-7px;
}
#step2 #spanlength{
	left:18px;
	top:-7px;
}

#step2 #width {
	margin: 7px 0;
	position:relative;
	left:65px;
	width:80px;
	background-color:#BBB;
}

#step2 #widthLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step2 #spanwidth{
	left:25px;
	top:-7px;
}
#step2 #pitchangle {
	margin: 7px 0;
	position:relative;
	left:65px;
	width:80px;
	background-color:#BBB;
}

#step2 #pitchangleLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step2 #spanpitchangle{
	left:30px;
	top:-7px;
}

#step2 #area {
	margin: 7px 0;
	position:relative;
	left:65px;
	width:80px;
	background-color:#BBB;
}

#step2 #areaLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step2 #spanarea{
	left:30px;
	top:-7px;
}

#step3 {
	background-color: #fff;
	border:solid 1px #000000;
	height: 380px;
	width: 230px;
	margin:0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
}

#step3 span{
	position:relative;
	left: 20px;	
	top:-7px;
}

/* Gutter details box */
#step3 #glength {
	margin: 7px 0;
	position:relative;
	left:105px;
	width:80px;
	background-color:#BBB;
}
#step3 #glengthLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step3 #gutterselect {
	margin: 7px 0;
	position:relative;
	left:10px;
	width:200px;
}

#step3 #throat {
	margin: 7px 0;
	position:relative;
	left:105px;
	width:80px;
	background-color:#BBB;
}
#step3 #throatLabel{
	position:relative;
	left:-80px;
	top:-7px;	
}

#step3 #sole {
	margin: 7px 0;
	position:relative;
	left:105px;
	width:80px;
	background-color:#BBB;
}
#step3 #soleLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step3 #solespan{
	left:33px;
	top:-7px;
}

#step3 #depth {
	margin: 7px 0;
	position:relative;
	left:105px;
	width:80px;
	background-color:#BBB;
}
#step3 #depthLabel{
	position:relative;
	left:-80px;	
	top:-7px;
}

#step3 #lm{
	visibility:hidden;
}

#step3 #la{
	visibility:hidden;
}

/* Outlet details box */
#step4 {
	background-color: #fff;
	border:solid 1px #000000;
	height: 380px;
	width: 230px;
	margin:0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
}

#step4 span{
	position:relative;
	left: 20px;	
	top: -67px;
}

#step4 #spacer2 {
	display:block;
	position:relative;
	top: -60px;
	width:100px;
	float:left;
	margin:0 0 10px 10px;
}

#step4 #outletselect1 {
	margin: 7px 0;
	position:relative;
	left:10px;
	width:200px;
}

#step4 #outletselect2 {
	margin: 7px 0;
	position:relative;
	left:10px;
	top:-36px;
	width:200px;
	/*visibility:hidden;*/
}

#step4 #outletselect3 {
	margin: 7px 0;
	position:relative;
	left:10px;
	top: -72px;
	width:200px;
	/*visibility:hidden;*/
}

#step4 #num {
	margin: 7px 0;
	position:relative;
	left:140px;
	top: -60px;
	width:50px;
	background-color:#BBB;
}
#step4 #numLabel{
	position:relative;
	left:-50px;	
	top: -67px;
}

#step4 #leaf{
	position:relative;
	left:20px;
	top: -60px;
	margin: 8px 0
}

#step4 #leafLabel{
	position:relative;
	left:20px;	
	top: -67px;
}

#step4 #corner{
	position:relative;
	left:20px;
	top: -60px;
	margin: 8px 0
}

#step4 #cornerLabel{
	position:relative;
	left:20px;
	top: -67px;	
}

#step4 #uneven{
	position:relative;
	left:20px;
	top: -60px;
	margin: 8px 0
}

#step4 #unevenLabel{
	position:relative;
	left:20px;
	top: -67px;	
}

#step4 #sq{
	position:relative;
	left:20px;
	top: -60px;
	margin: 8px 0
}

#step4 #sqLabel{
	position:relative;
	left:20px;
	top: -67px;	
}
#step4 #sump{
	position:relative;
	left:20px;
	top: -60px;
	margin: 8px 0
}

#step4 #sumpLabel{
	position:relative;
	left:20px;
	top: -67px;	
}

#step4 #sud {
	margin: 7px 0;
	position:relative;
	left:100px;
	width:80px;
	top: -60px;	
	background-color:#BBB;
}
#step4 #sudLabel{
	position:relative;
	left:-80px;
	top: -67px;		
}

/* Outlet spacing box*/
#step5 {
	clear:both;
	background-color: #fff;
	border:solid 1px #000000;
	font-family: Arial, Helvetica, sans-serif;
	height: 100px;
	width:975px;
}

#step5 #olab1{
	position:relative;
	left:14px;
	visibility:hidden;
}

#step5 #out1{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab2{
	position:relative;
	left:30px;	
	visibility:hidden;
}

#step5 #out2{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab3{
	position:relative;
	left:45px;	
	visibility:hidden;
}

#step5 #out3{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab4{
	position:relative;
	left:61px;
	visibility:hidden;
}

#step5 #out4{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab5{
	position:relative;
	left:79px;	
	visibility:hidden;
}

#step5 #out5{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab6{
	position:relative;
	left:96px;	
	visibility:hidden;
}

#step5 #out6{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab7{
	position:relative;
	left:116px;	
	visibility:hidden;
}

#step5 #out7{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab8{
	position:relative;
	left:135px;	
	visibility:hidden;
}

#step5 #out8{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab9{
	position:relative;
	left:153px;	
	visibility:hidden;
}

#step5 #out9{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab10{
	position:relative;
	left:172px;	
	visibility:hidden;
}

#step5 #out10{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab11{
	position:relative;
	left:183px;
	visibility:hidden;
}

#step5 #out11{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab12{
	position:relative;
	left:191px;
	visibility:hidden;
}

#step5 #out12{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab13{
	position:relative;
	left:201px;	
	visibility:hidden;
}

#step5 #out13{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab14{
	position:relative;
	left:211px;	
	visibility:hidden;
}

#step5 #out14{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab15{
	position:relative;
	left:220px;	
	visibility:hidden;
}

#step5 #out15{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab16{
	position:relative;
	left:229px;	
	visibility:hidden;
}

#step5 #out16{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab17{
	position:relative;
	left:238px;
	visibility:hidden;
}

#step5 #out17{
	position: relative;
	left:25px;
	width:45px;
	background-color:#BBB;
}

#step5 #olab18{
	position:relative;
	left:247px;
	visibility:hidden;
}