/* Sets all Defaults to 0 */

* {margin: 0; padding: 0;}

html, body {height: 100%;}
img {border: 0;}

body {background: #fff url(images/bg-all.jpg) repeat-x; line-height: 1.2em;font-size:75%; color:#505050; font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}

/* Layout */


#wrapper {  min-height: 100%; position: relative; }
.container {
	width: 730px;
    margin: 0 auto;
}

#topbar {
    height: 71px;
    float: right;
	}

#midwrapper {
	width: 100%;
	float: left;
}

/* control the main background image classes */

.products {background: url(images/bg-masthead-products.jpg) center 0 no-repeat;}
.services {background: url(images/bg-masthead-services.jpg) center no-repeat;}
.clients {background: url(images/bg-masthead-clients.jpg) center 0 no-repeat;}
.about {background: url(images/bg-masthead-about.jpg) center 0 no-repeat;}
.contact {background: url(images/bg-masthead-contact.jpg) center 0 no-repeat;}

/* logos */


h2#logowrap {
	width: 730px;
	display: block;
	float: left;
}
h2#logowrap  a {
   display: block;
   overflow: hidden;
   background: url(images/logo.png) left no-repeat;
   margin: 70px 0 198px 0px;
   padding: 154px 0 0 0;
   text-indent: -9999px;
   height: 0px !important;
   height /**/:154px; /* for IE5/win */
}

/* Main Page*/

#pagewrapper {
	width: 100%;
	float: left;
    background: url(images/bg-page.jpg) center top no-repeat; 
}

.pagecontent {
   	padding-top: 30px;
  	padding-bottom: 20px;
    }
    
/* Typography */

h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:2em; font-weight: bold; color: #fff;}
h2 {font-size:1.2em; font-weight: bold; color: #505050; }
h3 {font-size:1.2em; font-weight: bold; color: #505050;}
h4 {}
h5 {font-size:1.5em; font-weight:bold; margin-bottom:.5em;}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

p {margin:0 0 1em; }
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#7ABE31;}
a {color:#7ABE31; text-decoration:none;}
a:hover {text-decoration:underline;}

blockquote.style1 {margin:2em 1.5em .5em 0; padding:.5em 0 .5em 2em; background: url(images/quoteleft.gif) left 0 no-repeat; font-weight: bold; }
blockquote.style1 span {display: block; background: url(images/quoteright.gif) bottom right no-repeat; }
.quotename {margin:0 2.2em 1.5em 0; color: #7dbe38; text-transform: uppercase; font-size: .65em; text-align: right;}
strong {font-weight:bold;}


/* Heading Typography */

.headertextwrap {
	margin-left: auto;
	margin-right: auto;
	margin-top: 120px;
	line-height: 2em;
	width: 645px;
}

.headertextwrap h1 {
	text-shadow: #505050 1px 1px 2px;
	}


/* Products Page */    

.productcol {
	width: 735px;
	min-height: 89px;
	margin-right: auto;
	margin-left: auto;
	background: #f3f3f3;
	margin-bottom: 10px;
	float: left;
}
.productimg {
	float: left;
	margin-right: 25px;
}

.producttextwrap {padding-top: 15px; padding-right: 25px;}

.productcol h2 {
	display: inline;
	padding-left: 12px;
	background: url(images/h2_arrow.gif) left no-repeat; margin-top: .3em;
	}
.productcol p {margin-top: 5px;}


/* Services Page */ 

.servicescol {
	width: 735px;
	margin-right: auto;
	margin-left: auto;
	background: #f3f3f3;
	margin-bottom: 10px;

}
.servicesimg {
	float: left;
	margin-right: 25px;
}

.servicestextwrap {padding: 15px 30px 5px 30px; }

.servicescol h2 {
	display: inline;
	padding-left: 12px;
	background: url(images/h2_arrow.gif) left no-repeat; margin-top: .3em; 
	}
.servicescol p {margin-top: 5px;}	 

/* Clients Page */ 

.clientbox {
	width: 735px;
	margin-right: auto;
	margin-left: auto;
	background: #f3f3f3;
	margin-bottom: 10px;
	float: left;
}
	
.clientcol1 {
	width: 330px;
	padding: 7px 0 20px 30px;
	float: left;
}

.clientcol2 {
	width: 330px;
	padding: 7px 0 20px 30px;
	float: right;
}

	
.clientbox h3{
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	margin: 20px 0 0 30px;
}

ul.clientbox {list-style-type: none; }

.clientcol1 li, .clientcol2 li { 
	list-style-type: none;
	font-size: 13px;
	padding-left: 1em;
	padding-top: 5px; 
	background: url(images/bg-li.gif) left 6px no-repeat;

	 }

/* About Page */    

.aboutcol {
	width: 735px;
	min-height: 89px;
	margin-right: auto;
	margin-left: auto;
	background: #f3f3f3;
	margin-bottom: 10px;

}
.aboutimg {
	float: left;
	margin-right: 25px;
}

.abouttextwrap {padding: 15px 30px 5px 30px; }

.aboutcol h2 {
	display: inline;
	padding-left: 12px;
	background: url(images/h2_arrow.gif) left no-repeat; margin-top: .3em;
	}
.aboutcol p {margin-top: 5px;}	 

.aboutcol h3 {

	padding: 5px;
	display: inline;
	}
		
p.aboutintro {font-size: 16px; font-weight: bold; line-height: 1.4em; }

/* Contact Page */    

.contactcol {
	width: 350px;
	float: left;
	min-height: 89px;
	margin-right: 30px;
	margin-left: auto;
	background: #f3f3f3;
	margin-bottom: 10px;

}
.contactcol2 {
	width: 350px;
	float: left;
	min-height: 89px;
	margin: auto 0 10px 0;
	background: #f3f3f3;
}
.contactimg {
	float: left;
	margin-right: 25px;
}

.contacttextwrap {padding: 15px 15px 5px 20px; }

.contactcol h2 {
	display: inline;
	padding-left: 12px;
	}
.contactcol p {margin-top: 5px;}	 


/* Footer */
.clearfooter {
	height: 40px;
	clear: both;
}

#footer {
 height: 190px;
 width: 100%;
 float: left;
 background:   url(images/bg-footer.jpg) left top repeat-x;
 position: relative;

}
#footercontainer {
	width: 735px;
	margin: auto;
	padding-top: 25px;
	position: relative;
	}

.footercol {
	width: 220px;
	float: left;
	display: inline;
	margin-right:10px;
	padding-right: 10px;
	border-right:1px solid #9FACBD;
}

.footercol2 {
	width: 140px;
	display: inline;
	float: left;
	padding-left:10px;
	padding-right:20px;
	margin-right:10px;
	border: none;
}

.footercol3 {
	width: 210px;
	float: right;
	display: inline;
	padding-left:20px;
	margin-right:10px;
	border-left:1px solid #9FACBD;
	border-right: none;
}


.footercol h5 {
	color: #f1f1f1;
	margin-bottom: .5em;
	font-size: 1.5em;
}

.footercol p {
	margin-right: 10px;
	margin-bottom: 8px;
	color: #f3f3f3;
	font-size: 12px;
}

/* special class for copyright text */
.footercol p.copyright { 
	color: #f3f3f3;
	font-size: 11px;
	border: none;
    }

/* special class for button hidden text */    
p.emailbutton a { 
   display: block;
   overflow: hidden;
   background: url(images/footer-mail.jpg) left no-repeat;
   padding: 42px 0 0 0;
   text-indent: -9999px;
   height: 0px !important;
   height /**/:42px; /* for IE5/win */
}

p.supportbutton a { 
   display: block;
   overflow: hidden;
   background: url(images/footer-support.jpg) left no-repeat;
   padding: 42px 0 0 0;
   text-indent: -9999px;
   height: 0px !important;
   height /**/:42px; /* for IE5/win */
}

/* Pic Styles ============================================================= */

#pic {text-align: center; margin: 10px 0px 10px 0px; }
#pic a:link, #pic a:hover, #pic a:visited  {text-decoration: none;}
#thumbs {text-align: center; margin: 10px 0px 10px 0px;}
#affiliations {margin-top: 2px; }


/* Navigation ============================================================= */

#navbar { 
float: right;
height: 61px;
width: 414px;
margin-top: 9px;

}


ul#nav {list-style: none; margin: 0; padding: 0;}
#nav li { margin: 0; padding 0; float: left;}
#nav li a { display: inline; text-indent: -9999px; }

#n1 a { height: 61px; width: 105px; background-image: url(images/nav1-products.jpg); float: left;}
#n2 a { height: 61px; width: 93px; background-image: url(images/nav2-services.jpg); float: left;}
#n3 a { height: 61px; width: 71px; background-image: url(images/nav3-clients.jpg); float: left;}
#n4 a { height: 61px; width: 71px; background-image: url(images/nav4-about.jpg); float: left;}
#n5 a { height: 61px; width: 74px; background-image: url(images/nav5-contact.jpg); float: left;}

#n1 a:hover, #n1 a#active { background-position: 0 61px; }
#n2 a:hover, #n2 a#active { background-position: 0 61px; }
#n3 a:hover, #n3 a#active { background-position: 0 61px; }
#n4 a:hover, #n4 a#active { background-position: 0 61px; }
#n5 a:hover, #n5 a#active { background-position: 0 61px; }


/* MISC =============================================================== */

hr {background:#fff;color:#fff;clear:both;float:left;width:100%;height:1em; margin:auto; !important;border:none;} 
hr.space {background:#fff;color:#fff;} 
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .container {display:block;}
.clear {clear:both;}