/* 
Project: ClearBytes
Filename: screen.css
Date: December 2009
*/



body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;  
	font-size: 62.5%;	
	color: #000;
	background: #fff;
	text-align: center;
	font-family: arial, sans-serif;
    }


body a img {
	border: none;
}


.clearing{	
	clear: both;
}





/*------ clear standard browser styles ------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}


a:focus,
a:hover,
a:active{
	outline:none;
}




/*------ general styles ------*/


.clear {
	clear: both;
	overflow: hidden;
	line-height: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	margin: 0 !important;
	}


.disguise {
	position: absolute;
	left: -10000px;
	}
	
.hide {
	display: none;
	}
	

hr{
	display: none;
}
	
	
/* http://positioniseverything.net/easyclearing */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0;
	clear: both; 
	visibility: hidden;
	}

.clearfix {
	display: inline-table;
        min-height: 0;
	}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */




/*------ wrap ------*/


#wrap {
	margin: 0px auto 0px auto;
	padding: 15px 0 0 0;
	width: 900px;
	text-align: left;
}

#contacts{
	float: right;
	margin-right: 25px;	
	font-size: 1.4em;
	color: #333333;
	}
	
	
* html #contacts{
	margin-right: 13px;	
	}
	
	
#contacts strong{
	color: #999999;
	font-size: 0.9em;
	}
	
	
#contacts a{	
	color: #333333;
	text-decoration: none;
	}
	
	
#contacts a:hover{		
	text-decoration: underline;
	}
	
	

#logo{
	float: left;
	width: 246px;
	height: 61px;
	margin-left: 20px;
	font-size: 1px;
	text-align: center;
	color: #000;
	background: url(img/clearbytes-logo.gif) no-repeat 0 0;
}


* html #logo{
	margin-left: 10px;
	}


#aboutUs{
	float: right;
	width: 880px;
	margin: 25px 0 0 20px;	
	}
	
#aboutUs h2{
	font-size: 1.8em;
	padding: 0 0 10px;
	}
	
#aboutUs p{
	font-size: 1.3em;
	padding: 0 0 8px;
	color: #666666;
	}
	

#aboutUs p a{	
	text-decoration: none;
	color: #3BB1D1;
	}
	
#aboutUs p a:hover{	
	text-decoration: underline;
	}	

#boxes {
	float: left;
	width: 870px;
	padding: 20px;
}


#boxes .box{
	float: left;
	width: 200px;
	height: 100px;
	border: 1px solid #ccc;
	margin: 0 15px 15px 0;
	background: #fff;	
	font-size: 1px;
}




#boxes li a{
	float: left;
	width: 200px;
	height: 100px;
	text-indent: -9999px;
}

#boxes li#gardenhousebrighton a{
	background: url(img/gardenhouse-thumb.gif) no-repeat 0 0;
}


#boxes li#oceanheights a{
	background: url(img/oceanheights-thumb.gif) no-repeat 0 0;
}

#boxes li#gypcom a{
	background: url(img/gypcom-thumb.gif) no-repeat 0 0;
}


#boxes li#aottechnologies a{
	background: url(img/aottech-thumb.gif) no-repeat 0 0;
}

#boxes li#agratandoori a{
	background: url(img/agratandoori-thumb.gif) no-repeat 0 0;
}


#boxes li#hisouthern a{
	background: url(img/hisouthern-thumb.gif) no-repeat 0 0;
}

#boxes li#icedgembakes a{
	background: url(img/icedgembakes-thumb.gif) no-repeat 0 0;
}


#boxes li#flatscreenarms a{
	background: url(img/fsa-thumb.gif) no-repeat 0 0;
}


#boxes li a:hover,
#boxes li.here a{
	background-position: 0 -100px !important;
}


#boxes .open{
	float: left;
	width: 851px;
	position: relative;
	height: 300px;
	border: 1px solid #ccc;
	margin: 0 15px 15px 0;
}


#boxes #about{
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ffffff;
	width: 285px;
	height: 280px;
	border: 1px solid #666666;
}


#boxes #about h2{
	color: #3BB1D1;
	padding: 15px;
	font-size: 1.8em;
}


#boxes #about p{
	padding: 0 15px 15px 15px;
	font-size: 1.3em;
	line-height: 1.3em;
}


#boxes #about p em{
	font-style: normal;
	color: #999;
}



#boxes #about a{
	color: #3BB1D1;
	text-decoration: none;
	font-weight: bold;
}


#boxes #about a:hover{
	text-decoration: underline;
	}
	
	
p.copyright{
	float: left;
	width: 850px;
	margin: 0 0 0 20px;
	padding: 10px 0;
	text-align: right;
	font-size: 1.1em;
	color: #cccccc;
	border-top: 1px solid #f3f3f3;
	}
	
	
.opened{	
	width: 853px;
	height: 302px;
	margin: 0 15px 15px 0;
	}
	
	
.opened .loading{
	padding: 134px 0 0 410px;
	}