/* General styles */
body {
	margin: 0;
    padding:0;
    border: 0;	/* This removes the border around the viewport in old versions of IE */
}
    
/* Ths is the main container div style*/
#maincontainer {
	width:	805px;
    overflow:hidden;
	padding:15px; 
	position:absolute; 
	background-image:url(bw70.png);
	background-color:#FFF;
	
}
	
/*background-image:url(stripeyrepeat.png)*/
    
            
/* Header styles */
#header {
    height: 156px;
    margin-bottom: 15px;
	bbborder: #222222 solid 5px;
}

/* Main panel styles */
#mainpanel {
  height: 510px;
	overflow:hidden;
	margin-bottom: 15px;
	border: #222222 solid 5px;
    }

#mainhover{
	display:none;
    position:absolute;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float: left;
    color: #68BADA;
	line-height:20px;
	}
     
	 
#poucheshoverblackandwhite {
	left:220px;
	}
	
#poucheshoverpurple {
	left:355px;
	}

#poucheshoverstripy {
	left:480px;
	}

#poucheshoverkids {
	left:630px;
}

#biohoverdeano {
    top:250px;
    left:70px;
    }		
    
#biohoverreidy {
    top:290px;
    left:190px;
    }

#biohovercorey {
    top:290px;
    left:295px;
    }
    
#biohoverkerbox {
    top:280px;
    left:380px;
	}
    
#biohoverhoppo {
    top:230px;
    left:495px;
	}
    
#biohoverharries {
    top:230px;
    left:655px;
}

	
/* Styles applied to the Lifeguard Biography hovers */
	
.biohover {
    position:absolute;
    width: 80px;
    height:100px;
    float: left;
    background-color:#000; 
	display: none;
    }

.poucheshover { 
	top: 410px;
   	position:absolute;	
   	width:130px;
	height:230px;
	float: left;
	background-color:#000;
	display:none; 
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
    line-height: 21px;
	}


.mainhoverpouches {
	top:175px;
	width:530px;
    left:100px;    
	display:none;
	background: transparent;
	}

.mainhoverlifeguards{
	top:580px;
	width:380px;
	height:120px;    
	left: 410px;
	display:none;
	}
	
	
.mainhoverhome{
	top:500px;
	width:345px;
	height:200px;
    left:455px;    
	padding: 10px;
	}

.mainhovermedia{
	top:420px;
	width:300px;
	height:200px;
    left:455px;    
	padding: 10px;
	}

.mainhoversunpouchhq{
	top:420px;
	width:300px;
	height:200px;
    left:455px;    
	padding: 10px;
	}
	
.mainhovercompetition{
	top:185px;
	width:380px;
	height:100%;
    left:425px;    
	padding: 0px;
	line-height:22px;
	}

.mainhoverstockists{
        top:185px;
        width:380px;
        height:100%;
    	left:425px;
	display:none;
        }

.mainhover{
	top:430px;
	width:350px;
	height:150px;
    left:115px;
	}


#mainhover p{
	padding: 12px 10px 10px 12px;
	}


.toenter {
		font-size: 24px;
		color:	#7DF9FF;
}

.carmex {
		top:0px;
		left:-20px;
		float:right;
		position: relative;
		width: 90px;
		height:42px;
}
    
.transparentclass {
    filter:alpha(opacity=00);
    -moz-opacity:0.00;
    -khtml-opacity: 0.00;
    opacity: 0.00;
	

}

.twitter {
    	top:640px;
		left:30px;
		height: 40px;
		width:40px;
		float:left;
		position: absolute;
		z-index:100;
	}

.facebook {
    	top:640px;
		left:90px;
		height: 40px;
		width:40px;
		float:left;
		position: absolute;
		z-index:100;
	}
    
    
.boxgrid{ 
				width: 325px; 
				height: 215px; 
				
				margin:0px; 
				float:left; 
				background:#161613; 
				border: solid 0px #8399AF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 300%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 160;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 160;
 					left: 0;
 				}