@charset "utf-8";
/* CSS Document */

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/
body {min-width:800px;}

/* Container */
.container { width:780px; margin:0 auto; padding:20px 10px 0; background-color:#FFF;}

/* Float */
.right { float:right;}
.left { float:left;}

/* Remove >> Padding and Margins */
.removemarginbottom { margin-bottom:0;}

/* Padding and Margins */
.margintop_10 { margin-top:10px;}
.margintop_15 { margin-top:15px;}
.margintop_20 { margin-top:20px;}
.margintop_30 { margin-top:30px;}
.marginbottom_20 { margin-bottom:20px;}
.paddingtop_15 { padding-top:15px;}
.paddingtop_20 { padding-top:20px;}
.paddingbottom_8 { padding-bottom:8px;}
.paddingbottom_12 { padding-bottom:12px;}
.paddingbottom_20 { padding-bottom:20px;}
.marginleft_50 { margin-left:50px;}
.marginleft_120 { margin-left:120px;}
.marginright_10 { margin-right:10px;}

/* Grid >> Global */
.grid_1, .grid_2, .grid_3, .aside { display:inline; float:left; margin-left:10px; margin-right:10px;}
.copy, .divider { display:inline; float:right; margin-left:10px; margin-right:10px}
.thumb { display:inline; float:left; padding-left:15px; padding-right:14px;}
.thumb.whole { padding-right:15;}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) */
.alpha { margin-left:0;}
.omega { margin-right:0;}

/* Grid >> 3 Columns >> Aside */
.container .grid_3 { width:760px;}
.container .grid_2 { width:500px;}
.container .grid_1 { width:240px;}
.container .aside { width:150px;}
.container .copy { width:560px;} /* 590px - 16px (for the left and right padding) */
.container .divider { width:590px;}
.container .thumb { width:250px;}
.container .thumb.whole { width:97%;}

div.home div { border-bottom: #59666E thin dotted; }

/* Stylesheet
---------------------------------------------------------------------------------------------------- */
html { background-color:#EAEEED;}

/* Hidden Text >> Global */
div.tagline h1, div.tagline h2 { position:absolute; top:-1000em;}

/* Header */
header img { margin-left:10px;}

/* Banner 
---------------------------------------------------------------------------------------------------- */
/* Banner >> Global */
div#banner { position:relative; width:760px; height:328px;}
div#banner.innerpage { height:224px;}
div#banner div.tagline { width:380px; height:160px; margin-left:10px;}
div#banner div.tagline img { position:absolute; left:30px; top:35px;}
div#banner div.tagline.singleline img { top:50px;}
div#banner div.tagline.product { width:380px; height:120px; margin-left:10px;}

/* Banner Homepage */
div#banner {}
div#banner.home { height:328px; background:#3883E7 url(../images/banner_homepage-03.jpg); width:760px; position: relative;}
div#banner.home div { border-bottom:none;}
div#banner.home div.tagline img { left:40px; top:50px;}
div.avatec_button { left:60px; bottom:40px; position: absolute;}

/* Banner Innerpages */
div#banner.innerpage.company { background:#D2E4F2 url(../images/banner_companypage.jpg);}
div#banner.innerpage.salesnetwork { background:#f5f5f5 url(../images/banner_salesnetwork.jpg);}
div#banner.innerpage.products { background:#f5f5f5 url(../images/banner_products2.jpg);}
div#banner.innerpage.applications { background:#1280d1 url(../images/banner_applications.jpg);}
div#banner.innerpage.services { background:#376fab url(../images/banner_services.jpg);}
div#banner.innerpage.certificates { background:#b5ebf8 url(../images/banner_certificates.jpg);}
div#banner.innerpage.contactus { background:#b5ebf8 url(../images/banner_contactus.jpg);}

/* Readmore */
span.readmore { padding-left:10px; background:url(../images/li_red.png) no-repeat 0 0.5em;}

/* Ads */
div.ads { height:100px; position:relative;}
div.ads div.tagline span { margin-left:10px;  position:absolute; bottom:8px;}
div.ads div.tagline span a{ color:#004689; text-shadow:1px 1px 1px #ffffff;}
div.ads div.tagline img { position:absolute; top:15px; left:10px;}
div.ads.contactus { background:url(../images/img_contactus-v2.gif) no-repeat;}
div.ads.application { background:url(../images/img_application.gif) no-repeat;}
div.ads.gogreen { background:url(../images/img_gogreen.gif) no-repeat;}
div.ads.product { background:url(../images/img_product2-v2.gif) no-repeat;}

/* Homepage Title */
div.home div h2 { font-size:11px; text-transform:uppercase; margin-bottom:0; color:#33434C;}
div.home div span { color:#7D7D7D;}
div.home ul { list-style:none;}
div.home ul li { margin-left:0px; padding-left:15px; background:url(../images/li_red.png) no-repeat 0 0.6em; line-height:18px;}
div.home a { color:#2274AC;}
div.home p { margin-bottom:5px;}
div.home.avatec p { font-size:12px; font-family:Arial, Helvetica, sans-serif;}
div.footer, div.footer a { color:#8B8B8B;}
div.footer { border-top:#CCC thin solid;}
div.footer p { font-size:10px; margin-bottom:0;}
div.footer p span { color:#575757;}

div#map { background: url(../images/bg_map.jpg) no-repeat; width:520px; height:408px; margin:0 auto; margin-bottom: 20px;}

/* Navigation 
---------------------------------------------------------------------------------------------------- */
/* Nav >> Global */
.main a, .main a:link, .footerlink a, .footerlink a:link { text-decoration:none;}

/* Main Navigation */
#navigation { background-color:#2274ac; padding:7px 0; position:relative;}
div.main { height:24px; line-height:24px;}
div.main a, div.main a:link { color:#FFF; padding:0 16px; font-weight:bold; font-size:11px;}
div.main a:hover, div.main a.current { color:#d8d8d8;}
div.main a:first-child { padding-left: 20px;}

/* Footer Navigation */
div.footerlink { text-align:right;}
div.footerlink a { font-size:10px; line-height:30px;}
div.footerlink a.current, div.footerlink a:hover { color:#2274ac;}

/* Aside Navigation
---------------------------------------------------------------------------------------------------- */
/* Sidenav */
.aside { font-size:11px;}
.aside p { padding:0 8px;}
ul.sidenav { list-style:none; border-top:#2274AC 2px solid; margin-bottom:10px;}
ul.sidenav li:first-child { border-bottom:#33434C thin dotted; background: url(../images/bg_navigation.png) center; padding:0 0 0 8px; color:#33434C; text-transform:uppercase;}
ul.sidenav li { margin-left:0; background-color:#eaf2f7; border-bottom:#59666E thin dotted;}
ul.sidenav li h3 { border-bottom:none;}
ul.sidenav li a, ul.sidenav li a:link { padding:5px 5px 5px 8px; color:#33434C; text-decoration:none; display:block;}
ul.sidenav li a.current, ul.sidenav li a:hover { background-color:#1F56AE; color:#FFF;}

/* Sidenav - Product Model */
ul.sidenav.model { border-top:#EFEFEF thin solid; border-left:#EFEFEF thin solid; border-right:#EFEFEF thin solid; background:url(../images/bg_copy.png) no-repeat; margin-top:50px;}
ul.sidenav.model li:first-child { border-bottom:#c1bfbf thin dotted;}
ul.sidenav.model li { background:none; border-bottom:#c1bfbf thin dotted;}
ul.sidenav.model li a { color:#333;}
ul.sidenav.model li a.current, ul.sidenav.model li a:hover { background-color:#f5f8f0; color:#2274ac;}

/* Copy Content
---------------------------------------------------------------------------------------------------- */
/* Copy Content >> Background */
div#content { background:url(../images/bg_content.gif) center repeat-y;}
div#content div.copy { border-top:#2274AC 2px solid; padding:0 15px; background:url(../images/bg_copy.png) no-repeat top;}
div#content div.copy.about { font-size:13px;}
div#content div.divider { height:30px; border-top:#f2f3ef 1px solid; background-color:#FFF;}

/* Thumbs >> Placeholder */
div.placeholder { border-top:#a1a1a1 thin dotted;}
div.placeholder img { margin-top:5px;}
div.placeholder div:first-child { border-right:#a1a1a1 thin dotted;}
div.placeholder div.thumb.whole { border-right:none; height:190px;}
div.placeholder div.thumb.whole.min { height:160px;}
div.placeholder div.thumb { height:166px; margin-top:15px; margin-bottom:15px; position:relative;}
div.placeholder div.thumb img { margin-top:0;}
div.placeholder div.thumb p { margin-left:110px; margin-top:8px;}
div.placeholder div.thumb span { padding-left:12px; left:124px; background:url(../images/li_red.png) no-repeat 0 0.5em; position:absolute; bottom:25px;}
div.placeholder div.thumb.whole h4, div.placeholder div.thumb.whole p { margin-left:140px;}
div.placeholder div.thumb.whole span { left:155px; bottom:15px;}
div div.thumb.whole.big h4, div div.thumb.whole.big p { margin-left:220px;}
div.applications div.placeholder p { margin-left:120px; margin-bottom:0;}
div.applications div.placeholder.gogreen img, div.applications div.placeholder.gogreen p { margin-bottom:20px;}

div.bordertop { border-top:#59666E thin dotted; padding-top:20px; padding-bottom:20px;}
div.removebordertop { border-top:#FFF thin dotted;}

/* Certificates */
div.certificate { width:450px; margin: 0 auto; padding: 20px 0 50px;}
div.certwrapper { width: 110px; margin-right: 60px;}
.certwrapper:nth-of-type(3n) { margin-right: 0;}
div.certwrapper p { text-align: center; line-height: 11px; margin-top: 5px;}
div.certwrapper p a { text-decoration: none; font-weight: bold; text-align: center; font-size: 10px; }
.cert { width: 110px; height: 110px; position: relative; }
.cert img { 
  border: 1px solid #efefef; position: absolute;
  -webkit-transition: opacity 600ms ease-in-out;
  -moz-transition: opacity 600ms ease-in-out;
  -o-transition: opacity 600ms ease-in-out;
  -ms-transition: opacity 600ms ease-in-out; 
  transition: opacity 600ms ease-in-out;
}
.cert img.top:hover { opacity:0; }
.cert img.bottom { border: 1px solid #2274AC; }

/* Back to Top */
p a.backtotop { background:url(../images/arrow_up.gif) no-repeat 0 0.3em; padding-left:10px;}
p a.back { background:url(../images/arrow_left.gif) no-repeat 0em 0.4em; padding-left:10px;}

/* Clear Floated Elements
---------------------------------------------------------------------------------------------------- */

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container {
  zoom: 1;
}