@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('oxygen.eot');
  src: local('Oxygen'), url('oxygen.eot') format('embedded-opentype'), url('oxygen.woff') format('woff');
}


#overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 0px 0px 5px 5px;
	
}
body {
	background-image:url(bg.jpg);
	background-size:cover;
	margin:0;
	color:#eee;
	font-family:'Oxygen', sans-serif;
	
}
a:link{
color:#9CF;	
}
a:hover{
color:#fff;	
}
#site{
	position:relative;
	margin-left:-490px;
	left:50%;	
	width:980px;
	overflow:hidden;
}
#logo{
	position:relative;
	left:-25px;
	background-image:url(logo.png)	;
	height:141px;
	width:643px;
		font-size:0px;
}
.vertLine{
	position:relative;
	background-image:url(vertline.png);
	background-repeat:no-repeat;
	width:1px;
	height:32px;
	float:left;
		font-size:0px;
}
.vertLine2{
	position:relative;
	background-image:url(vertline.png);
	background-repeat:no-repeat;
	width:1px;
	height:32px;
	float:right; 
	margin:0px;
		font-size:0px;
}
.horizLine{
	position:relative;
	background-image: url(horizline.png);
	background-repeat: repeat-x;
	height: 1px;
	width:980px;
	margin:0px;
	padding:0px;
	font-size:0px;
}
#menuBar{
	padding:0px;
	margin:0px;
}
#aboutButton,
#productsButton,
#techButton,
#contactButton{
	position:relative;	
	float:left;
	padding:5px;
	background-image:url(40percent.png);
	background-repeat:repeat;
	height:22px;
		cursor:pointer;
	
}
.tech2Button{
		position:relative;	
	float:left;
	padding:5px;
	background-image:url(40percent.png);
	background-repeat:repeat;
	height:22px;
		cursor:pointer;
}
#contactButton{
	float:right;	
}
#progressBarText{
text-align:center;
position:relative;
margin-left:10px;
float:left;
}
#progressBar{
	height:30px;
}
.topBar{
	display:none;
	height:150px;
	width:980px;
	position:absolute;
	z-index:100;
	background-image:url(60percent.png);	
	margin-top:32px;
	//margin-top:0px;
}
#contactBar{
	display:none;
	height:500px;
	width:980px;
	position:absolute;
	z-index:100;
	background-image:url(60percent.png);	
	margin-top:32px;
	//margin-top:0px;
}
#techBar{
	display:none;
	height:32px;
	width:378px;
	position:absolute;
	z-index:100;
	//background-image:url(60percent.png);	
	background-color:black;
	margin-top:32px;
	//margin-top:0px;
	left:71px;
}
.productsBarItem{
	display:none;
	position: relative;
	float: left;
	height: 125px;
	width: 135px;
	margin: 5px;
	padding: 5px;
	left: 18px;
	box-shadow: -5px 5px 30px 1px #000;
	z-index:1000;
		cursor:pointer;
}
.productsBarItemText{
	position: relative;
	float: left;
	height: 20px;
	width: 130px;
	background-image:url(60percent.png);
	padding: 5px;

	box-shadow: -5px 5px 30px 1px #000;
}
.productsBarItemTextG{
	position: absolute;
	float: left;
	left:0px;
	bottom:5px;
	text-align:right;
	height: 20px;
	width: 130px;
	background-image:url(60percent.png);
	padding: 5px;

	box-shadow: -5px 5px 30px 1px #000;
}
#showerButton{
	position:relative;
	background-image:url(showertile.png);

}
.showerPanel{
	height:310px;	
}
.balustradePanel{
	height:410px;	
}
.poolFencePanel{
	height:410px;	
}
.splashbackPanel{
	height:410px;	
}
.mirrorPanel{
	height:410px;	
}
.morePanel{
	height:410px;	
}
.hardwareimg{
width:282px;
text-align:center;	
float:left;
}
#hardwareContent{
	top:-5px;
position:relative;
left:55px;	
}
#poolFenceButton{
		position:relative;
	background-image:url(poolfencetile.png);
}
#balustradeButton{
		position:relative;
	background-image:url(balustradetile.png);
}
#mirrorButton{
		position:relative;
	background-image:url(mirrortile.png);
}
#moreButton{
		position:relative;
	background-image:url(moretile.png);
}
#splashbackButton{
		position:relative;
	background-image:url(splashbacktile.png);
}
.expandedText{
	display:block;
	width:800px;
	position:relative;
	padding:5px;
	left:5px;
	float:right;
}
#galleryButton{
	display:none;
	position: absolute;
	z-index: 101;
	width: 140px;
	height: 27px;
	bottom: -32px;
	left: 20px;
	background-image: url(60percent.png);
	text-align: center;
	padding-top: 5px;
	border-radius: 0px 0px 20px 20px;
	cursor:pointer;
}
#content{
	position:relative;
	clear:both;
}
#mainPic{
	width: 980px;
	height: 648px;
	
	box-shadow: -5px 5px 30px 1px #000;
}
#caption{
	position:absolute;
width:auto;
background-image:url(40percent.png);
height:21px;
right:0px;
color:white;
text-align:980;
top:13px;	
padding:3px;
}
#galleryInner{
position:relative;
left:0px;
height:150px;	
}
.mainPicShower{	background-image: url(mainpic.jpg);}
.mainPicBalustrade{background-image:url(images/26.jpg);}
.mainPicPoolFence{background-image:url(images/15.jpg);}
.mainPicMirror{background-image:url(images/35.jpg);
background-size:cover;
}
.mainPicOverlay{
	left:0px;
	width:980px;
	margin:0px;
	height:648px;
	position:absolute;
	top:0px;
	z-index:10;
	display:none;	
	background-image: url(60percent.png);

}
.faqTitle{
font-size:large;	
}
.blurb{
	left:10px;
	width:215px;
	margin:0px;
	height:auto;
	position:absolute;
	top:30px;
	z-index:1000;
	display:block;	
	color:#505452;
	font-size:15px;
	
}
.blurb2 { 
background-image:url(20percent.png);
color:white;
	}
#galleryPicture{
	left:0px;
	width:980px;
	margin:0px;
	height:648px;
	position:absolute;
	top:0px;
	z-index:10;
	display:none;	
	text-align:center;

}
#galleryPic{
		box-shadow: -5px 5px 30px 1px #000;
}
.darkenMainPic{
background-image:url(60percent.png);	
}

#siteSafeDiv {
	position:absolute;
	right:0px;
	bottom:10px;	
	margin:10px;
	z-index:1;
}
.siteSafe {
	height:50px;
	width:109px;
	opacity:.3;
}
.ganz{
	height:50px;
	width:57px;
	opacity:.3;
}
#galleryFooter{
	width:980px;
	height:50px;
	background-image:url(40percent.png);
	position:absolute;
	width:auto;
	bottom:0px;
	z-index:100;
	display:none;
	overflow:hidden;
	float:left;
}
.galleryFooterClass{
	position:relative;
	//width:100%;
	//width:1000px;
	min-width:980px;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
}
.footerThumb{
	height:130px;
	margin:10px;
	cursor:pointer;
}
#footer{
	text-align:center;
	background-repeat:repeat;
	font-size:small;
	
}
#contactDiv{
left:50%;
margin-left:-400px;
width:800px;
position:relative;	
}
.contactLeft{
	position:absolute;
	right:450px;
	text-align:right;
	margin-right:5px;
	width:395px;
}

.contactRight{
	position:absolute;
	left:350px;
	margin-left:5px;
	width:395px;
}
.fieldHeight{
	height:6px;
}
.contactLine{
	position:relative;
	background-image: url(horizline.png);
	background-repeat: repeat-x;
	height: 1px;
	width:600px;
	margin:0px;
	padding:0px;
	font-size:0px;
}
.marginleft10{ margin-left:10px; margin-right:10px; }
#scrollleft, #scrollright {
	position:absolute;
	top:0px;
width:32px;
height:150px;
background-color:red;	
}