/* *************************** 
   Eric Meyer reset 
   ***************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* *************************** 
   hide rule 
   ***************************/

.hide { text-indent: -9999px; }


.invisible { visibility: hidden; }




body { 

       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: x-small; /* for IE5/Win */
       voice-family: "\"}\"";
       voice-family: inherit;
	   font-size: small; /* for compliant browsers */ 
	  background: #72B531 url(../images/body-background.png) top left repeat-x; 
	   color: #E3F1F5;
	   
	 }

html>body { font-size: small; /* be nice to Opera */ }

	 
#container { position: relative;
             width: 800px;
			 margin: 0 auto;
			 text-align: left;
			 background: #172322;
			 
			}
			
h1 { 

	 float:left;
	 height: 50px;
	 width: 570px;
	 background: #fff url(../images/logo-has.gif) top left no-repeat;
	 margin-top: 9px;
	
	
	 }



h1 a {
 height: 50px;
	width: 230px;
  display: block;
  text-indent: -9999px;
}

h2 { 
	 margin-bottom: 5px;
	 margin-left: 250px;
	 font-size: 180%;
	 letter-spacing: 140%;
	 word-spacing: 2px;
	 line-height: 140%;
	 }
	 
h3 { background:  url(../images/subtitle-background.png) top left no-repeat;
     height: 32px;
	 width: 240px;
	 margin-right: 15px;
	 margin-top: 14px;
	 padding: 6px 0 6px 10px;
	 font-weight: bold;
	 font-variant: small-caps;
	 font-size: 120%;
	 letter-spacing: 105%;
	 }

h4 { clear: left;
     margin-top: 15px;
	 font-weight: bold;
	 letter-spacing: 115%;
	 color: #fff;
	 padding-left: 22px;
	 background: transparent url(../images/check.gif) center left no-repeat;
	 }

#content_sub h4 {
background: none;
padding-left: 0;
list-style: square outside;
}
	 
h5 { margin: 6px 0;
	 font-weight: bold;
	 letter-spacing: 110%;
	 color: #fff;
	 }

.gallery h5 { margin-left: 25px;
	 }





#branding{ 
             width: 100%;
			 height: 59px;
			 margin: 0;
			 padding: 0;
			 background: #fff;			 
			}
			

#taal {     float: right;
			text-align: right;
            height: 50px;
			width: 230px;
            margin-top: 9px;
            background: #fff;			 
			}

#taal a   {
color: #2D6093;
font-weight: bold;
}
		   
#nav { 
       float: left;
	   clear: both;
    display: block;
	width: 100%;
	height: 98px;
	 background: #fff url(../images/branding.png) top left no-repeat;
			 z-index: 2000;
	padding-top: 15px;
	padding-left: 10px;
	margin: 0;
	font-size: 92%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	
	}

#nav li  { 
	   float: left;
	   padding-right: 10px;
	   margin-right: 10px;
	   background:url(../images/button-right.gif) no-repeat right bottom; }

	
	   
#nav li a { display: block;
padding: 30px 0px 10px 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
color: #E3F1F5;
background: url(../images/button-left.gif) no-repeat left bottom;

 }
 
#nav li a:hover, #nav li a:focus
{ 
color: #72B531;
 }

#nav li.home  { 
background:url(../images/button-hover-right2.gif) no-repeat right bottom;

 }
	   
#nav li.home a { 
	   
	   background:url(../images/button-hover-left2.gif) no-repeat left bottom;
	   color: #E3F1F5; }  

.top {
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
width: 780px;
height: 157px;
float: right;
margin-left: 10px;
margin-bottom: 15px;
letter-spacing: 105%;
line-height: 140%;
font-size: 107%;
padding-left: 12px;

}

.top p { 
         color: #ccc;
         margin-left: 250px;
	     margin-top: 4px;
		 margin-bottom: -2px;
		 }

#services { 
background:url(../images/servicesbgtop.jpg) no-repeat left top;
margin-top: 20px;
}

#overons { 
background:url(../images/overonsbgtop.jpg) no-repeat left top;
margin-top: 20px;
}

#projects { 
background:url(../images/projectbgtop.jpg) no-repeat left top;
margin-top: 20px;
}



#product { 
margin-top: 20px;
}



#carrousel { clear: both;
             float: left;}

#service { float: right;
		   width: 228px;
		   background: #223331; 
		   margin-top: 10px;  
		   margin-right: 10px;
		   margin-bottom: 15px;
		   padding-bottom: 10px;
		   border: 1px solid #333;
		  }
		  
#service a { color: #7AC01C;
		     font-size: 84%;
			margin-left: 8px;
			 
		  }
		  
#service ul, #service dl { 
              padding: 6px 4px 10px 20px;
              list-style: square outside;
			  margin-left: 8px;
			  
			 
			}

#service li {  padding-top: 20px;
			}

#service p {  margin-left: 8px;
			}
			
#service strong {  font-weight: bold;
			}

#projectimg ul { list-style: none;
               margin-left: 12px;
			  }

#projectimg li {  padding-top: 8px;
			}

#content{
clear: both;
width: 100%;
background: #172322;
}

#content a, #projects a   {
color: #20B8F5;
font-size: 100%;
text-decoration: none;
font-weight: bold;
}

#projects a {
font-size: 85%;
}

#content_main  {

float:left;
width: 500px;
background: #172322;
margin-left: 15px;
line-height: 160%;
word-spacing: 140%;
}

#hp {
list-style: square inside;

}

#testimonials {

padding-bottom: 20px;

color: #999;

}

blockquote {
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 115%;
line-height: 120%;
word-spacing: 120%;
font-style: italic;
padding-bottom: 5px;
}

cite {
font-size: 88%;
color: #999;
}

#content_main p {

margin: 8px 0;
}



#content_sub
{

float: right;
width: 240px;
background: #172322;
font-size: 89%;
line-height: 140%;
word-spacing: 120%;

}

#content_sub p
{
padding-right: 10px;
margin-bottom: 5px;
}

#content_sub  a  {
color: #20B8F5;
font-size: 100%;
margin: 0;
text-decoration: none;
font-weight: bold;
}


#content_sub a[rel*="external"] {

font-size: 95%;

}

#content_sub img {
display: block;
}

#sub_nav {
float: left;

}

#sub_nav li  { 
	   background: #213230 url(../images/arrow.gif) top left no-repeat;
	   width: 225px;
	   height: 25px;
	   margin-bottom: 1px;
	   font-size: 90%;
	   vertical-align: middle;	
	   }



#utilities a {
display: block;
width: 100%;
height: 100%;
color: #ccc;
padding-left: 25px;


}

#utilities a:hover {
display: block;
font-size: 100%;
text-decoration: underline;
width: 100%;
height: 100%;
color: #20B8F5;
padding-left: 25px;
}

#utilities li.active 
{
color: #20B8F5;
font-style: italic;


}

#utilities li.active span
{

padding-left: 25px;

}


// products hp

.prod-list { 
float: left;
width: 230px;
}

.prod-text { 
float: right;
text-align: left;
width: 250px;
}

.prod-text h4 
{
font-size: 110%;
text-decoration: none;
}











 #siteinfo {
clear: both;
background: transparent url(../images/footer.png) bottom left no-repeat;
width: 800px;
height: 50px;
margin: 0;
}




#siteinfo p {

margin:0px auto;
padding-top:20px;
text-align:center;
font-size: 80%;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;

}



#siteinfo a
{

color: #fff;
border-bottom: 1px dotted #2993A8;
text-decoration: none;
}


.project
{
background-repeat:no-repeat;
background-position:top left;
padding:8px 10px 15px 0px;
width:230px;
margin-right: 10px;
position:relative;

}

#content_sub .project a {
color: #fff;
background: #2D6093;
text-decoration: none;
font-size: 110%;
padding: 3px;
margin-bottom: 6px;
}



.projectimg{
width:230px;
height:117px;
overflow:hidden;
position:relative;
cursor:pointer;
}

.desc_project{

 background:  url(../images/transparent.png) top left no-repeat;
/* opacity:0.9; */
position: absolute;
top:117px;
left:0px;
height:117px;
width:230px;
cursor: default;
}

.desc_project dd, .desc_project dt  {

font-size: 100%;
font-weight: bold;
line-height: 120%;
word-spacing: 120%;
margin: 10px;
}

#viewbrochure {
background:  url(../images/viewbrochure.png) top right no-repeat;
width: 230px;
height: 190px;
}

#viewbrochure h5, #viewbrochure p  {
width: 120px;
}

#viewbrochure.isafe {
background:  url(../images/viewisafe.png) top right no-repeat;
}

#viewbrochure.safeclick {
background:  url(../images/viewsafeclick.png) top right no-repeat;
}

#viewbrochure.biboblock {
background:  url(../images/viewbblock.png) top right no-repeat;
}

#viewbrochure.altrex {
background:  url(../images/viewaltrex.png) top right no-repeat;
}
// form contactpage



#cmxform fieldset.submit {
border-style: none;
}

#cmxform fieldset
{
	float: left;
	clear: left;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
}



#cmxform fieldset ol
{
	padding: 10px 10px 0 0;
	list-style: none;
	zoom: 1;
}

#cmxform fieldset li
{
	float: left;
	clear: left;
	width: 100%;
	padding-bottom: 30px;
	
}

#cmxform fieldset legend
{
	font-size: 140%;
	width: 100%;
	padding-bottom: 30px;
	
}

#cmxform label
{
	float: left;
	width: 10em;
	margin-right: 1px;
	font-weight: bold;
}

#cmxform input[type="text"], textarea
{
background: #223331;
border: 1px solid #ccc;
width:300px;
font-size: 118%;
color: #E3F1F5;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
padding: 3px;
}

#cmxform input[type="text"]:focus, textarea:focus
{
border: 1px solid #9CCA3D;
}

em {
color: #2EA3BA;
}

#gmap {    
           float:left;
		   width: 220px; 
		   margin-left: 10px;
		   margin-top: 5px;
}

#gmap img { 
border: 8px solid #223331;
}

#contacttop {
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
width: 530px;
height: 175px;
float: right;
margin-left: 10px;
margin-bottom: 15px;
letter-spacing: 105%;
line-height: 140%;
font-size: 107%;
padding-left: 12px;

}

#contacttop h2, #producttop h2 { 
	
	 margin-left: 0px;
	
	 }

#contacttop p { 
         color: #ccc;
         margin-left: 0px;
	     margin-top: 4px;
		 margin-bottom: -2px;
		 }

.vcard {

background:  url(../images/vcard.gif) no-repeat 0 20%;
height: 20px;
margin-top: 6px;
}

#content_sub .vcard a 
{ padding-left: 30px;
 
}

#log_res {
			height:auto;
			padding:15px;
			margin:25px auto 20px auto;
			width:400px;
		}
		
#log_res p {
	margin:0;
	padding:4px 0 4px 0;
}



.error {
	color:#2EA3BA;
	margin:0;
	padding:0;
}

#advantage li
{

list-style : square outside;
font-style: italic;
font-size: 103%;
line-height: 120%;
word-spacing: 120%;
margin: 15px;
}

div.gallery {
margin: 0;
width: 530px;
}

div.gallery img {
margin: 5px 10px 5px 15px;
padding: 0;
}

div.gallery ul {
float: left;
width: 100%;
margin: 15px 0;
padding 0;
}
div.gallery li {
float: left;
margin: 0;
padding 0;
}

#newaddress {  clear: both;
	                    float: left;
    display: inline;
	width: 100%; }
	
	#newaddress li  { 
	   float: left;
	   padding-right: 10px;
	   margin-right: 10px;
	   font-size: 90%;
	   }