/*******************************************************************************
 * TABLE OF CONTENTS
 * -----------------------------------------------------------------------------
 * =RESET
 * =GLOBAL
 * =HEADER
 * =NAVIGATION
 * =CONTENT
 * =FOOTER     
 *
 ******************************************************************************/
 
/*******************************************************************************
 * COLOR LEGEND
 * -----------------------------------------------------------------------------
 * Blue background : #011b25
 * Dark green      : #5a7e0d
 * Light green     : #cade9f
 * Light blue      : #d5edf6   (body text)
 * Bright orange   : #ffa800    
 *
 ******************************************************************************/
 
/*******************************************************************************
 * =RESET
 -----------------------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0; 
}            

img, fieldset {
  border: 0;
}

/*******************************************************************************
 * =GLOBAL
 -----------------------------------------------------------------------------*/
body {
  background: #011b25;
  font: 14px/14px Trebuchet MS, Arial, sans-serif;
  color: #83a1ad;
}

.clear {
  clear: both;
}

/*******************************************************************************
 * =HEADER
 -----------------------------------------------------------------------------*/
#hdr {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 38px;
  background: url(images/alt_bg_hdr.gif) top center repeat-x;
  opacity:0.9;
  filter:alpha(opacity=90);
  z-index: 10;
}

#hdr h1 a {
  position: absolute;
  display: block;  
  top: 0;
  left: 0;
  width: 69px;
  height: 35px;
  background: url(images/alt_logo.gif) top right no-repeat;
  text-indent: -9000px;
}

#hdr .hdrInner {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

/*******************************************************************************
 * =NAVIGATION
 -----------------------------------------------------------------------------*/
#hdr ul {
  float: right;
  list-style: none;
}

#hdr li {
  float: left;
}

#hdr li a {
  display: block;
  float: left;
  height: 38px;
  padding: 0 10px;
  font: 12px/33px Trebuchet MS, Arial, sans-serif;
  color: #83a1ad;
  text-decoration: none;
}

#hdr li a:hover {
  color: #ffa800;
}

/*******************************************************************************
 * =CONTENT
 -----------------------------------------------------------------------------*/
#con {
  width: 100%;
  margin: 0 auto;
}

#home, #work, #company, #contact {
  padding: 30px 0 0;
  height: 900px;
}

#contact {
  height: 1200px;
}

.sub {
  position: relative;
  width: 920px;
  height: 657px; /* 57 -35*/ 
  margin: 0 auto;
  padding: 37px 0 0;
  background: url(images/alt_bg_sub_main.jpg) top center no-repeat;
}

.hd {
  position: absolute;
  top: 42px;
  left: 67px;
  width: 800px;
  height: 50px;
  font: 12px Trebuchet MS, Arial, sans-serif;
  color: #83a1ad;
  z-index: 1;
}

.hd h3 {
  display: block;
  height: 26px; 
  margin: 0 0 2px;
  background: url() top center no-repeat;
  text-indent: -9000px;
}

a.linkout {
  padding: 0 10px 0 0;
  background: url(images/linkout.gif) top right no-repeat;
}

.hd p {
  padding-top: 4px;
  padding-left: 1px;
}

/*=HOME ----------------------------------------------------------------------*/
#home {
  padding: 37px 0 0;
}

#tagline {
  display: block;
  width: 800px;
  height: 151px;
  margin: 0 auto;
  background: url(images/bg_hm_tagline.jpg) top center no-repeat;
  text-indent: -9000px;
}

#home .contentbox {
  width: 938px;
  height: 242px;
  margin: 0 auto;
  background: url(images/bg_hm_contentbox_con1.jpg) top center no-repeat;
}

#home .logos {
  width: 869px;
  height: 120px;
  margin: 0 auto;
  background: url(images/bg_hm_logos.jpg) top center no-repeat;
}

#home .logos p {
  text-indent: -9000px;
}

#home .introbox, #home .quotebox{
  text-indent: -9000px;
}

/*=WORK ----------------------------------------------------------------------*/

#work .hd h3 {
  width: 160px;
  background-image: url(images/hd_work.gif);
}

#thumbs {
  position: absolute; 
  top: 132px;
  left: 67px;
  width: 788px;
  height: 380px;
  overflow: hidden;
}

#thumbs .item {
  float: left;
  margin: 0 20px 0 0;
}

#thumbs h4 {
  margin: 0 0 5px;
  font: bold 16px Trebuchet MS, Arial, sans-serif;
  color: #fff;
}

#thumbs img {
  margin: 0 0 4px;
  border: 1px solid #3f4952;
}

#thumbs p {
  font: 12px Trebuchet MS, Arial, sans-serif;
  color: #648c0e;
}

#thumbs p em {
  color: #ccc;
}

#thumbs p a {
  color: #648c0e;
}

#thumbs p a:hover {
  color: #ffa800;
}

#row1 {
  position:absolute;
  width: 1578px;
  height: 200px;
}

#row2 {
  clear: both;
  position:absolute;  
  top: 200px;
  width: 1578px;  
}

#ctrls {
  display: none;
}

#ctrls a {
  position: absolute;
  top: 101px;
  left: 725px;
  display: block;
  width: 112px;
  height: 28px;
  background: #fff url(images/btn_general.gif) top center no-repeat;
  font: 12px/28px Trebuchet MS, Arial, sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

#ctrls a:hover {
  background-position: bottom center;
}

/*=COMPANY -------------------------------------------------------------------*/
#company .hd h3 {
  width: 217px;
  background-image: url(images/hd_company.gif);
}

#company .info {
  position: absolute; 
  top: 132px;
  left: 67px;
  width: 788px;
  height: 380px;
  overflow: hidden;
}

#company .info .about {
  float: left;
  width: 296px;
  margin: 0 25px 0 0;
}

#company .info h4 {
  margin: 0 0 5px;
  font: bold 16px Trebuchet MS, Arial, sans-serif;
}

#company .info .about h4 {
  color: #96B82E;
  padding-bottom: 5px;
  border-bottom: 1px solid #1B323A;
  margin-bottom: 9px;
}

#company .info .about ul {
  position: absolute;
  margin: -10px 0 0 0;
  padding: 0;
  border: 0;
  width: 320px;
}

#company .info .about ul li {
  margin: 0 14px 0 0;
  padding: 6px 0 4px 0;
  float: left;
  width: 140px;
  font: normal 12px/16px Trebuchet MS !important;
  color: #ffa800;
  text-align: left;
}

#company .info .about ul li.noUnderline {
  border-bottom: 0;
}

#company .info img {
  margin: 0 0 10px;
  border: 1px solid #3f4952;
}

#company .info .about p {
  font: 12px/16px Trebuchet MS, Arial, sans-serif;
  color: #83A1AD;
  color: #D1DBDF;
  padding-bottom: 10px;
  margin-right: 0;
}

#company .info .about p a,
#company .info .about p a:hover,
#company .info .about p a:visited {
  color: #ffa800;
}

#company .info .justin {
  margin: 0 17px 0 0;
}

#company .info .justin, #company .info .charles {
  float: left;
  width: 224px;
}

#company .info .justin a, #company .info .charles a {
  color: #648c0e;  
}

#company .info p {
  margin: 0 4px 8px 0;
  font: 12px/16px Trebuchet MS, Arial, sans-serif;
}

#company .info ul {
  margin: 0 0 10px;
  list-style: none;
}

#company .info li {
  margin: 0 4px 5px 0;
  padding: 0 0 5px 25px;
  border-bottom: 1px solid #1B323A;
  line-height: 18px;
}

#company .info li.skype {
  background: url(images/icon_skype.gif) top left no-repeat;
}

#company .info li.phone {
  background: url(images/icon_phone.gif) top left no-repeat;
}

#company .info li.linkedin {
  background: url(images/icon_linkedin.gif) top left no-repeat;
}

/*=CONTACT -------------------------------------------------------------------*/
#contact .hd h3 {
  width: 181px;
  background-image: url(images/hd_contact.gif);
}

#contact .info { 
  position: absolute; 
  top: 132px;
  left: 67px;
  width: 788px;
  height: 380px;
  overflow: hidden;
}

#contact #cf {
  float: left;
  width: 470px;
}

#cf label {
  display: block;
  height: 5px;
}

#cf .itf, #cf textarea {
  margin: 0 0 5px;
  padding: 7px;
  background: #001219;
  border: 1px solid #1D313A;
  font: 14px Trebuchet MS, Arial, sans-serif;
  color: #d5edf6;
  opacity:0.5;
  filter:alpha(opacity=50);  
}

#cf .itf {
  width: 440px;
}

#cf textarea {
  width: 440px;
  height: 117px;
  margin: 0 0 14px;
  overflow: auto;
}

#cf input.isb {
  display: block;
  width: 112px;
  height: 28px;
  background: #fff url(images/btn_general.gif) top center no-repeat;
  border: 0;
  font: bold 11px/28px Trebuchet MS, Arial, sans-serif;
  color: #fff;
  cursor: pointer;
}

#cf input.isb:hover {
  background-position: bottom center;
}

#contact .contactInfo {
  float: right;
  width: 300px;
}

#contact .contactInfo h3 {
  color: #96B82E;
  padding-bottom: 6px;
  border-bottom: 1px solid #1B323A;
  margin-bottom: 9px;
}

#contact h4 {
  margin: 0 0 10px;
  font: bold 16px Trebuchet MS, Arial, sans-serif;
  color: #fff;
}

#contact .contactInfo p {
  margin: 0 0 10px;
  font: 12px/16px Trebuchet MS, Arial, sans-serif;
}

#contact .contactInfo ul {
  margin: 0 0 10px;
  list-style: none;
}

#contact .contactInfo li {
  margin: 0 0 5px;
  padding: 0 0 5px 25px;
  border-bottom: 1px solid #1B323A;
  line-height: 18px;
}

#contact .contactInfo li.skype {
  background: url(images/icon_skype.gif) top left no-repeat;
}

#contact .contactInfo li.email {
  background: url(images/icon_email.gif) top left no-repeat;
}

#contact .contactInfo li.phone {
  background: url(images/icon_phone.gif) top left no-repeat;
}

#contact .msg {
  position: absolute;
  top: 347px;
  left: 120px;
}
/*******************************************************************************
 * =FOOTER
 -----------------------------------------------------------------------------*/
#ftr {}

/*******************************************************************************
 * =PLUGIN CSS
 -----------------------------------------------------------------------------*/

#colorbox, #modalBackgroundOverlay, #modalWrap{position:absolute; top:0; left:0; z-index:9999;}
#modalBackgroundOverlay{position:fixed; width:100%; height:100%;}
#colorbox{overflow:hidden; padding:1px; margin-top:-1px; margin-left:-1px;}
	#modalWrap{width:9000px; height:9000px;}
		#modalContent, #borderTopLeft, #borderTopCenter, #borderTopRight, #borderBottomLeft, #borderBottomCenter, #borderBottomRight, #borderMiddleLeft, #borderMiddleRight {float:left; height:0; width:0; overflow:hidden;}
		#borderMiddleLeft, #borderBottomLeft{clear:left;}
		#modalContent{position:relative; overflow:visible;}
			#contentTitle{margin:0;}
			#modalClose, #contentPrevious, #contentNext{outline:none; cursor:pointer; border:0; margin:0;}
			#modalLoadedContent{overflow:auto; width:0; height:0;}
			#modalLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
			#modalLoadedContent img#modalPhoto{display:block; border:0; margin:auto;}
			#modalLoadedContent embed{display:block; border:0;}
			#modalLoadingOverlay{position:absolute; width:100%; height:100%; top:0; left:0;}

#modalBackgroundOverlay{background:#000;}

#colorbox{}
	#modalContent{margin-top:32px;}
		#modalLoadedContent{background:#182F37; padding:2px;}
			#contentTitle{position:absolute; top:-22px; left:0; color:#000; font-weight:bold;}
			#contentCurrent{display:none;}
			#contentPrevious{width:29px; height:32px; display:block; text-indent:-9999px; position:absolute; top:-32px; right:60px; background:url(images/buttons.png) left top no-repeat;}
			#contentPrevious:hover{background-position:left bottom;}
			#contentNext{width:29px; height:32px; display:block; text-indent:-9999px; position:absolute; top:-32px; right:28px; background:url(images/buttons.png) right top no-repeat;}
			#contentNext:hover{background-position:right bottom;}
		#modalLoadingOverlay{background:url(images/loading.gif) center center no-repeat #000;}
		#modalClose{position:absolute; top:-32px; right:0px; display:block; background:url(images/buttons.png) -29px 0 no-repeat; width:26px; height:32px; text-indent:-9999px;}
		#modalClose:hover{background-position:-29px -31px; cursor:pointer;}
		
/*******************************************************************************
 * MY ADDITIONS
 * -----------------------------------------------------------------------------*/
 
 #company .info .about {
  float: left;
  width: 296px;
  margin: 0 25px 0 0;
}

#company .info .about h4 {
  color: #96B82E;
  padding-bottom: 5px;
  border-bottom: 1px solid #1B323A;
  margin-bottom: 9px;
}

#company .info .about ul {
  position: absolute;
  margin: -10px 0 0 0;
  padding: 0;
  border: 0;
  width: 320px;
}

#company .info .about ul li {
  margin: 0 14px 0 0;
  padding: 6px 0 4px 0;
  float: left;
  width: 140px;
  font: 12px/16px Trebuchet MS, Arial, sans-serif;
  color: #ffa800;
  text-align: left;
}

#company .info .about ul li.noUnderline {
  border-bottom: 0;
}

#company .info .about p {
  font: 12px/16px Trebuchet MS, Arial, sans-serif;
  color: #D1DBDF;
  padding-bottom: 10px;
}