/* Null */
* { margin: 0; padding: 0; }


/* Global set --------------------------------------------------------------- */
body {
  background: #ffffff;
  font-family: "Arial"; 
  font-size: 13px; 
  color: #3d4a52;
  line-height: 140%;
  padding: 0;
  margin: 0;
}      
html {height: 100%}
.red  { color: #f70000; }
.black  { color: #000000; }
.gray { color: #494949; }
.green { color: #6bb500; }

.bold { font-weight: bold; }
.nomargin { float: left; margin: 0 0 0 0; }
.cleaner { clear: both; }

p { margin: 0 0 15px 0; }
p.right { text-align: right; }

/* A */
a { font-size: 12px; color: #000000; text-decoration: underline; }
a:hover { text-decoration: none; }

/* H titles */
h1 { font-size: 26px; font-weight: normal; color: #6bb500; margin-bottom: 15px; }
h1 .dark { color: #346e84; } 
h2 { font-size: 17px; font-weight: normal; color: #6bb500; margin-top: 30px; margin-bottom: 10px; }


/* Container */
.container { width: 960px; padding: 0; margin: 0 auto 0 auto; }

/* Header */
#header { width: 100%; height: 158px; background: url('../images/background/header.jpg') center no-repeat; border-bottom: 1px solid #cdd6db; }
#header img.logo { float: left; margin: 24px 0 0 30px; }
#header #menu { float: right; margin: 40px 0 0 0; }
#header #menu ul { list-style: none; }
#header #menu ul li { float: left; }
#header #menu ul li a { float: left; height: 61px; font-size: 17px; color: #293e4c; text-decoration: none;  }
#header #menu ul li a .left   { float: left; width: 12px; height: 61px; background: url('../images/background/menu-left.png') no-repeat; }
#header #menu ul li a .middle { float: left; height: 39px; padding: 22px 9px 0 9px;  background: url('../images/background/menu-middle.png') repeat-x; }
#header #menu ul li a .right  { float: left; width: 12px; height: 61px; background: url('../images/background/menu-right.png') no-repeat; }
#header #menu ul li a:hover { color: #ffffff; }
#header #menu ul li a:hover .left   { background: url('../images/background/menu-hover-left.png') no-repeat; }
#header #menu ul li a:hover .middle { background: url('../images/background/menu-hover-middle.png') repeat-x; }
#header #menu ul li a:hover .right  { background: url('../images/background/menu-hover-right.png') no-repeat; }

#header #menu ul li a.active { color: #ffffff; }
#header #menu ul li a.active .left   { background: url('../images/background/menu-hover-left.png') no-repeat; }
#header #menu ul li a.active .middle { background: url('../images/background/menu-hover-middle.png') repeat-x; }
#header #menu ul li a.active .right  { background: url('../images/background/menu-hover-right.png') no-repeat; }

/* Slider */
#slider { width: 100%; height: 360px; border-bottom: 2px solid #cadaad; border-top: 2px solid #ffffff; background: #b0d917 url('../images/background/slider.jpg') top repeat-x; margin: 0px auto;}
#slider .bb { width: 960px; height: 100%; background: url('../images/background/slider-pic.jpg') center top no-repeat; margin: 0 auto; position:relative;}
#slider .bb .navigation { float: left; width: 100%; font-size: 18px; color: #ffffff; font-style: italic; padding: 15px 0 0 0;  }
#slider .bb .navigation .services { float: left; margin-left: 60px; }
#slider .bb .navigation .references { float: right; margin-right: 55px; }
#slider .bb .navigation a.left { float: left; }
#slider .bb .navigation a.right { float: left; }
#slider .bb .navigation .text { float: left; padding: 5px 20px 0 20px; }
#slider .bb .navigation .text a { font-style: italic; font-size: 18px;color:white; text-decoration:none;}
#slider .bb .slideshow { float: left; width: 860px; margin-left: 50px; }
.container .over { position:absolute; left:0px; }
#slider .bb .slideshow .service { display: none; float: left; width: 100%; position: relative; }
#slider .bb .slideshow .service img.item { position: absolute; top: 0; left: 0; border:0px; }
#slider .bb .slideshow .service .references { float: right; position: relative; width: 50%;  }
#slider .bb .slideshow .service .references img { display: none; float: right; position: absolute; top: 0; right: 0; border:0px;}
#slider .bb img { border: 0; }
#slider .bb .slideshow img { padding: 15px 14px 20px 16px; }
#slider .bb .overservices { position:absolute; top:54px;left:60px;width:380px;height:280px; z-index:99; cursor:hand;}
#slider .bb .overreferences { position:absolute; top:54px;left:520px;width:380px;height:280px;  z-index:99; cursor:hand;}

/* Content */
#content { width: 100%; margin: 20px 0 20px 0;}
#content .home { width: 100%;  }
#content .home .left { float: left; width: 430px; padding: 0 50px 0 0; background: url('../images/background/home-border.jpg') right top no-repeat; }
#content .home .left h1 { text-align: right; margin: 20px 0 5px 0; }
#content .home .right h1 { text-align: left; margin: 20px 0 5px 0; }
#content .home .left .underH1 { width: 100%; margin: 0 0 15px 0; text-align: right; font-style: italic; font-size: 13px; color: #323a42; }
#content .home .right .underH1 { width: 100%; margin: 0 0 15px 0; text-align: left; font-style: italic; font-size: 13px; color: #323a42; }
#content .home .left .text { float: right; width: 294px; margin: 15px 0 0 0; }
#content .home .left .textall { float: right; width: 410px; margin: 15px 0 0 0; }
#content .home .left img.pc { margin: 20px 0 0 0; }
#content .home .right { float: right; width: 430px; padding: 30px 0 0 50px; }
#content .home .right .item { float: left; width: 100%; margin: 0 0 15px 0; }
#content .home .right .item .title { float: left; width: 100%; margin: 0 0 15px 0; font-weight: bold; color: #323a42; }
#content .home .right .item img { float: left; }
#content .home .right .item .description { float: right; width: 350px; }

/* Footer */
#footer { width: 100%; height: 208px; border-top: 1px solid #cdd6db; background: #ffffff url('../images/background/footer.jpg') repeat-x; }
#footer .bb { width: 100%; height: 100%; background: url('../images/background/footer-pic.jpg') center no-repeat; }
#footer .bb .left { float: left; width: 426px; margin: 0 0 0 20px; }
#footer .bb .left .box { float: left; margin: 0 20px 0 0; padding: 35px 0 0 0; }
#footer .bb .left .box .title { margin: 0 0 10px 0; font-weight: bold; color: #323a42; }
#footer .bb .left .box a { font-size: 12px; color: #666c6f; }
#footer .bb .left .last { margin-right: 0; }
#footer .bb .border { float: left; width: 34px; height: 208px; background: url('../images/background/footer-border.jpg') no-repeat; }
#footer .bb .right { float: right; width: 430px; padding: 35px 0 0 0; }
#footer .bb .right .l { float: left; width: 50%; } 
#footer .bb .right .l .title { margin: 0 0 10px 0; font-weight: bold; color: #323a42; }
#footer .bb .right .l label { float: left; width: 85px; color: #666c6f; font-size: 12px; padding: 5px 0 0 0; }
#footer .bb .right .l .inputs { float: right; width: 215px; }
#footer .bb .right .l .inputs input { float: left; width: 96px; padding: 5px; margin: 0 0 5px 0; border: 1px solid #ccd5da; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; }
#footer .bb .right .r textarea { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#footer .bb .right .l .inputs input.submit { float: left; height: 24px; width: 105px; margin: 20px 0 0 0; position: relative; left: 80px; top: -5px; border: 0;  }
#footer .bb .right .r { float: right; width: 50%; }
#footer .bb .right .r .title { margin: 0 0 10px 0; font-size: 12px; color: #666c6f; }
#footer .bb .right .r textarea { height: 110px; border: 1px solid #ccd5da; }

  .thumbnail{
  position: relative;
  float:left;
  z-index: 0;
  }
  
  .thumbnail:hover{
  background-color: transparent;
  z-index: 50;
  }
  
  .thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color: white;
  padding: 5px;
  left: -1000px;
  border: 1px solid #c3ced4;
  visibility: hidden;
  color: black;
  text-decoration: none;
  text-align: center;
  }
  
  .thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
  }
  
  .thumbnail:hover span{ /*CSS for enlarged image on hover*/
  visibility: visible;
  top: 0;
  left: 530px; /*position where enlarged image should offset horizontally */
  }