/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

* {
   padding:0;
   margin:0;
}

html, body {
   width: 100%;
   height: 100%;
}


body {
   background: #edece1;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 100.01%;
   line-height:1.125em; /* 16x1.125=18px */
}


h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { 
   margin:17px 0;
}
dd, blockquote { 
   margin-left: 40px; 
}


a.textLink:link, a.textLink:visited{
   text-decoration: none;
   color: #3594C3;
   padding-left: 2px;
   padding-right: 2px;
}
a.textLink:hover{
   color: #98BD05;
   background-color: #333;
}
a.textLink[href^="http:"] {
	background: url(/images/layout/external-link.gif) no-repeat right top;
	padding-right: 10px;
}
a.textLink[href^="http:"]:hover{
   color: #98BD05;
   background: #333 url(/images/layout/external-link-hover.gif) no-repeat right top;
}


/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/

#header{
   height: 245px;
   width: 100%;
   background: url(/images/layout/header-rpt.gif) repeat-x;
   text-align: center;
}
#headerImage{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 245px;
   background: url(/images/layout/header-image-bg.gif) no-repeat center top;
   text-align: center;
   z-index: 5;
}
#headerImage h1{
   margin: 0;
   padding: 0;
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 68px;
   width: 321px;
   height: 181px;
   background: url(/images/header-hello.png) no-repeat;
   overflow: hidden;
   text-indent: -9000px;
}

#portfolio #headerImage h1{
   background: url(/images/header-portfolio.png) no-repeat;
}
#contact #headerImage h1{
   background: url(/images/header-contact.png) no-repeat;
}
#blog #headerImage h1{
   background: url(/images/header-blog.png) no-repeat;
}

#logo{
   display: block;
   text-indent: -9000px;
   width: 94px;
   height: 21px;
   position: absolute;
   top: 10px;
   left: 16px;
   z-index: 8;
   background: url(/images/travisjbeck.png) no-repeat;
}

#navHolder{
   width: 100%;
   height: 56px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 6;
   background: url(/images/layout/header-nav-bg-rpt.gif) repeat-x;
   text-align: center;
}
#nav{
   height: 56px;
   width: 100%;
   background: url(/images/layout/header-nav.gif) center top no-repeat;
}
/* -----------------------------------*/
/* ------->>> PAGE LAYOUT <<<---------*/
/* -----------------------------------*/
#container{
   width: 100%;
   height: 100%;
}

#gridOverlay{
   width: 100%;
   height: 200%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
   background: url(/images/layout/grid.gif) repeat;
}
#contentHolder{
   width: 1001px;
   min-height: 100%;
   height: auto !important;
   height: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -500px;
   background: url(/images/layout/body-rpt.gif) no-repeat 0px 265px;
}
.pusher{
   height: 39px;
}
.footer{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 971px;
   margin-left: 5px;
   margin-right: 5px;
   padding-top: 4px;
   padding-left: 10px;
   padding-right: 10px;
   height: 35px;
   line-height: 35px;
   background: url('/images/layout/footer-rpt.gif') repeat-x;
   margin-top: -39px;
   font-size: 0.6em;
   color: #666;
   overflow: hidden;
}

#content{
   margin-top: 265px;
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 41px;
   background: url(/images/layout/body-cap.gif) no-repeat top left;
   position: relative;
}

#portfolio #content{
   background: url(/images/layout/body-cap-dark.gif) no-repeat top left;
   padding-top: 15px;
}
#portfolio #contentHolder{
   background: url(/images/layout/body-rpt-dark.gif) no-repeat 0px 265px;
}
#blog #contentHolder{
   background: url(/images/layout/body-blog-rpt.gif) no-repeat 0px 265px;
}


div.two-column-left{
   width: 48%;
   float: left;
   padding-right: 1%;
   height: 100%;
}
div.two-column-right{
   width: 48%;
   float: left;
   padding-left: 2%;
   height: 100%;
}
#topSection{
   height: 198px;
}

#midSection{
   margin-top: 18px;
}

#bottomSection{
   margin-top: 45px;
   clear: both;
}
.callOut{
   padding: 10px;
   background: #E1E1E1;
   height: 34px;
   background: url(/images/callout-bg.gif);
}

div.portfolioLink{
   position: relative;
   width: 304px;
   height: 173px;
}

div.portfolioLink a span{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(/images/overlay.png);
   cursor: pointer;
}

div.pLeft{
   float: left;
}
div.pCenter{
   margin-left: auto;
   margin-right: auto;
}
div.pRight{
   float: right;
}

.column_left{
   float: left;
   margin: 0px;
   padding: 20px 15px 20px 20px;
   width: 278px;
}

.column_center {
   float: left;
   margin: 0px;
   padding: 20px 15px;
   width: 280px;
}
.column_right {
   float: left;
   margin: 0px;
   padding: 20px 20px 20px 15px;
   width: 278px;
}


#bottomSection .callOut{
   margin-bottom: 20px;
}


#bottomSection p{
   font-size: 11px;
}

#midSection .callOut{
   margin-bottom: 34px;
}

#sliderArea{
   position: relative;
   height: 154px;
}

.slideBtn{
   display: block;
   text-decoration: none;
   position: absolute;
   top: 15px;
   width: 33px;
   height: 113px;
   outline: none;
   text-indent: -5000px;
   overflow: hidden;
}
a#slideLeftBtn{
   padding: 0;
   left: 0;
   background: url(/images/layout/slider-btn-left.gif) top left;
}
a#slideRightBtn{
   padding: 0;
   right: 0;
   background: url(/images/layout/slider-btn-right.gif) top left;
}
a#slideLeftBtn:hover, a#slideRightBtn:hover{
   background-position: top right;
}
#sliderContainer{
   padding: 0;
   margin-left: 36px;
   margin-right: 36px;
   height: 140px;
   overflow: hidden;
   width: 869px;
   position: relative;
   left: 0;
   top: 0;
}
#sliderHolder{
   position: absolute;
}
#portfolioInfo{
   margin-top: 34px;
}
#portfolioInfo .left_column{
   float: left;
   width: 68%;
   padding-right: 2%;
}
#portfolioInfo .right_column{
   float: right;
   width: 27%;
   text-align: center;
   padding-left: 2%;
}

#portfolio a.portThumb{
   padding: 0;
   display: block;
   margin:7px auto 15px;
   width: 120px;
   height: 93px;
   text-indent: -5000px;
   overflow: hidden;
}
#portfolio a.portThumb:hover{
   background-position: top right;
}

#portfolioWindow{
   position: relative;
   height: 0px;
   overflow: hidden;
   padding-bottom: 18px;
}

#liftFlash{
   width: 640px;
   height: 468px;
}

#trackstarFlash{
   width: 576px;
   height: 384px;  
}


/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/

#nav ul{
   list-style: none;
   margin: 0;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
   display: block;
   width: 362px;
   height: 38px;
   text-align: left;
}

#nav ul li{
   float: left;
   margin: 0;
   padding: 0;
}

#nav ul li a{
   padding: 0;
   margin: 0;
   text-indent: -9000px;
   overflow: hidden;
   display: block;
   width: 90px;
   height: 38px;
   outline: none;
}

#nav ul li a.nav-home{
   background: url(/images/layout/nav-sprite.gif) no-repeat 0px -76px;
}
#nav ul li a.nav-portfolio{
   background: url(/images/layout/nav-sprite.gif) no-repeat -90px -76px;
}
#nav ul li a.nav-contact{
   background: url(/images/layout/nav-sprite.gif) no-repeat -180px -76px;
}
#nav ul li a.nav-blog{
   background: url(/images/layout/nav-sprite.gif) no-repeat -270px -76px;
   width: 92px;
}

/* HOVER */
#nav ul li a.nav-home:hover{background-position: 0px -38px;}
#nav ul li a.nav-portfolio:hover{background-position: -90px -38px;}
#nav ul li a.nav-contact:hover{background-position: -180px -38px;}
#nav ul li a.nav-blog:hover{background-position: -270px -38px;}

/* ACTIVE */
#home #nav ul li a.nav-home{background-position: 0px 0px; cursor: default;}
#portfolio #nav ul li a.nav-portfolio{background-position: -90px 0px;cursor: default;} 
#contact #nav ul li a.nav-contact{background-position: -180px 0px; cursor: default;}
#blog #nav ul li a.nav-blog{background-position: -270px 0px; cursor: default;}


/*ACTIVE HOVER*/
#home #nav ul li a.nav-home:hover{background-position: 0px 0px; cursor: default;}
#portfolio #nav ul li a.nav-portfolio:hover{background-position: -90px 0px;cursor: default;} 
#contact #nav ul li a.nav-contact:hover{background-position: -180px 0px; cursor: default;}
#blog #nav ul li a.nav-blog:hover{background-position: -270px 0px; cursor: default;}


/* -----------------------------------*/
/* --------->>> HEADINGS <<<----------*/
/* -----------------------------------*/

h1{
   color: #403838;
   margin-top: 0;
   margin-bottom: 18px;
   letter-spacing: -1px;
   font-size: 1.5em; /* 16x1.5=24px */
   line-height:0.75em; /* 24*.75=18px */
   font-weight: bold;
}
h2 em{
   font-weight: normal;
   font-style: normal;
   font-size: 18px;
}
#contact h2 em{
   color: #EDECE1;
   font-size: 16px;
}

h2{
   color: #98bd05;
   margin-top: 0;
   letter-spacing: -1px;
   margin-top: 0;
   font-size: 1.5em; /* 16x1.5=24px */
   margin-bottom: 0;
   overflow: visible;
   font-weight: 100;
   line-height: 35px;
}

h4{
   color: #3594C3;
   margin-top: 0;
   letter-spacing: -1px;
   margin-top: 0;
   margin-bottom: 16px;
   font-size: 1.1em; /* 16x1.5=24px */
   overflow: visible;
   font-weight: 100;
   margin-top: 36px;
}

h2.portfolio{
   display: block;
   height: 34px;
   background: url(/images/layout/portfolio.gif) no-repeat left bottom;
   text-indent: -9000px;
   padding-top: 11px;
   margin-bottom: 4px;
}

h1.designer{
   display: block;
   width: 424px;
   height: 24px;
   margin: 0;
   margin-bottom: 11px;
   margin-top: -1px;
   background: url(/images/layout/designerordeveloper.gif) no-repeat;
   text-indent: -9000px;
}
h3 {
   color: #222222;
   font-size: 1em;
   font-weight: normal;
   margin: 0px 0px 10px;
   padding: 0px;
}

.callOut h2{
   color: #222222;
   line-height: 34px;
   float: left;
   margin-bottom: 0;
}


/* -----------------------------------*/
/* ------->>> TEXT STYLES <<<---------*/
/* -----------------------------------*/
.cleaner{
   width: 0;
   height: 0;
   clear: both;
}

.nobreak{
   white-space: nowrap;
}
p{
   line-height:1.5em; /* 14x1.286=18px */
   font-size: 0.75em; /* 16*0.875=14px */
   color: #666666;
}
a#trackStar{
   display: block;
   width: 373px;
   height: 182px;
   text-indent: -9000px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
   background: url(/images/layout/trackstar.jpg) no-repeat;
}

.callOut p{
   display: block;
   float: right;
   width: 700px;
   margin: 0;
   font-size: 11px;
   padding-right: 10px;
}


img{
   border: none;
}

div.two-column-left p{
   margin-top: 0;
}

.offColor{
   color: #403838;
}

.center{
   text-align: center;
}
.spanHeader{
   font-size: 1.2em;
   font-weight: bold;
   letter-spacing: -1px;
}

ul.defList{
   list-style: none;
   margin: 0;
   padding: 0;
   margin-bottom: 18px;
}
ul.defList li{
   font-size: 0.75em;  
   margin: 0;
   padding: 0;
   color: #666;
   text-indent: 5px;
}
a.viewSiteLink{
   padding: 0;
   display:block;
   text-indent: -5000px;
   width: 102px;
   height: 21px;
   background: url('/images/layout/view-site-pill-btn.gif') top left;
   overflow: hidden;
   outline: none;
}

a.viewSiteLink:hover{
   background: url('/images/layout/view-site-pill-btn.gif') top right;
}

.disclaimer{
   font-size: 0.6em;
   line-height: 2em;
}

a.cgp1{        background: url('/images/portfolio/cgp/thumb1.jpg') left top no-repeat; }
a.corprasoft1{ background: url('/images/portfolio/corprasoft/thumb1.jpg');   }
a.corprasoft2{ background: url('/images/portfolio/corprasoft/thumb2.jpg');   }
a.evolve1{     background: url('/images/portfolio/evolve/thumb1.jpg');  }
a.evolve2{     background: url('/images/portfolio/evolve/thumb2.jpg');  }
a.evolve3{     background: url('/images/portfolio/evolve/thumb3.jpg');  }
a.floorplan1{  background: url('/images/portfolio/floorplan/thumb1.jpg');  }
a.floorplan2{  background: url('/images/portfolio/floorplan/thumb2.jpg');  }
a.floorplan3{  background: url('/images/portfolio/floorplan/thumb3.jpg');  }
a.floorplan4{  background: url('/images/portfolio/floorplan/thumb4.jpg');  }
a.knowsys1{    background: url('/images/portfolio/knowsys/thumb1.jpg');  }
a.knowsys2{    background: url('/images/portfolio/knowsys/thumb2.jpg');  }
a.knowsys3{    background: url('/images/portfolio/knowsys/thumb3.jpg');  }
a.lift1{       background: url('/images/portfolio/lift/thumb1.jpg');  }
a.lift2{       background: url('/images/portfolio/lift/thumb2.jpg');  }
a.wildcat1{    background: url('/images/portfolio/wildcat/thumb1.jpg');  }
a.wildcat2{    background: url('/images/portfolio/wildcat/thumb2.jpg');  }
a.lawngrips1{  background: url('/images/portfolio/lawngrips/thumb1.jpg');  }
a.lawngrips2{  background: url('/images/portfolio/lawngrips/thumb2.jpg');  }
a.howardweil1{ background: url('/images/portfolio/howardweil/thumb1.jpg');  }
a.howardweil2{ background: url('/images/portfolio/howardweil/thumb2.jpg');  }
a.howardweil3{ background: url('/images/portfolio/howardweil/thumb3.jpg');  }
a.salient1{    background: url('/images/portfolio/salient/thumb1.jpg');  }
a.salient2{    background: url('/images/portfolio/salient/thumb2.jpg');  }
a.fiberspar1{  background: url('/images/portfolio/fiberspar/thumb1.jpg');  }
a.fiberspar2{  background: url('/images/portfolio/fiberspar/thumb2.jpg');  }

a.linkedIn{
   float: right;
   display: block;
   text-indent: -5000px;
   outline: none;
   width: 80px;
   height: 15px;
   margin-top: 11px;
   margin-right: 10px;
   background: url(/images/linked-in.gif);
   overflow: hidden;
}
a.footerBadge{
   display: block;
   text-indent: -5000px;
   outline: none;
   height: 17px;
   float: right;
   margin-right: 18px;
   margin-top: 10px;
   overflow: hidden;
}

a.xhtmlBadge{
   width: 66px;
   background: url(/images/xhtml-badge.png);  
}

a.cssBadge{
   width: 56px;
   background: url(/images/css-badge.png);  
}
code{
   font-size: 1.2em;
}
ul.argumentsList{
   padding: 10px;
   list-style: none;
}
ul.argumentsList li{
   color:#666666;
   font-size:0.75em;
   line-height:2em;
}
ul.argumentsList li code{
   background:#2E2C3A;
   color:#98BD05;
   font-weight:bold;
   padding:2px;
}
a#trackStarPromo{
   display: block;
   text-indent: -5000px;
   outline: none;
   overflow: hidden;
   width: 241px;
   height: 116px;
   background: url(/images/trackstar-promo.jpg) no-repeat;
   margin-left: 10px;
   margin-bottom: 18px;
}
/* -----------------------------------*/
/* ---------->>> SLIDER <<<-----------*/
/* -----------------------------------*/
div.sliderImg{
   position: relative;
   width: 229px;
   height: 110px;
   float: left;
   margin-left: 30px;
   margin-right: 30px;
   margin-top: 16px;
}

div.sliderImg a{
   position: absolute;
   outline: none;
}
a.activeImg{
   z-index: 10;
}
a.activeImg:hover{
 background: none;  
}


/* -----------------------------------*/
/* ---------->>> FORMS <<<------------*/
/* -----------------------------------*/

#formHolder{
   width: 829px;
   height: 425px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 18px;
}
#formLeft{
   float: left;
   width: 268px;
   height: 389px;
   padding: 18px;
   background: url('/images/layout/form-left.gif');
}
#formRight{
   float: left;
   width: 489px;
   height: 351px;
   padding: 18px;
   margin-top: 38px;
   background: url('/images/layout/form-right.gif');
   position: relative;
}

#formLeft h2{
   margin-bottom: 0;
   padding-bottom: 16px;
   border-bottom: solid 1px #666;  
}
#formLeft h4{
   margin-top: 18px;
   margin-bottom: 0;  
}
#formLeft p{
   margin-top: 0; 
   color: #c6c5b8;
}


form.cmxform fieldset {
  margin-bottom: 10px;
  border: none;
  padding: 0;
  margin: 0;
  margin-left: 18px;
  padding-top: 15px;
}
form.cmxform legend {
  padding: 0 2px;
  font-weight: bold;
}
form.cmxform label {
   line-height: 26px;
   vertical-align: top;
   color: #2E2C3A;
   font-size:1em;
   font-weight:bold;
   letter-spacing:-1px;
}
form.cmxform fieldset ol {
  margin: 0;
  padding: 0;
}
form.cmxform fieldset li {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 9px;
}
form.cmxform fieldset fieldset {
  border: none;
  margin: 3px 0 0;
}
form.cmxform fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.cmxform fieldset fieldset label {
  display: block;
  width: auto;
}
form.cmxform em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
  padding-left: 10px;
  font-size: 0.7em;
}
form.cmxform label {
  width: 120px; /* Width of labels */
  display: inline-block;
}
form.cmxform fieldset fieldset label {
  margin-left: 123px; /* Width plus 3 (html space) */
}
form.cmxform input.txtInput{
   border: solid 1px #98BD05;
   height: 18px;
   line-height: 18px;
   width: 250px;
   color: #666;
   margin-top: 2px;
}
form.cmxform input.txtInput:focus, form.cmxform textarea:focus{
   border: solid 1px #3594C3;
}
form.cmxform textarea{
   line-height: 18px;
   margin-top: 5px;
   border: solid 1px #98BD05;
   width: 250px;
   color: #666;
   height: 197px;
   overflow: hidden;
}
#submitBtn{
   position: absolute;
   left: 315px;
   bottom: 40px;
   width: 99px;
   height: 22px;
}
#submitBtn input{
   outline: none;
   position: absolute;
}
#submitBtn img{
   position: absolute;
}

form.cmxform fieldset li em{
   
}

#messageSent{
   width: 119px;
   height: 118px;
   position: absolute;
   top: 6px;
   right: 6px;
   background: url('/images/layout/message-sent.png');
   display: none;
}

#errorMessage{
   position: absolute;
   top: -18px;
   left: 0;
   width: 98%;
}
.errorMessageStyle{
   background: #FF0000;
   color: #ddd;
   line-height: 18px;
   text-indent: 10px;
   font-size: 12px;
   font-weight: bold;
}

/* -----------------------------------*/
/* ---------->>> SMOOTHBOX <<<--------*/
/* -----------------------------------*/


#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

#TB_overlay {
	position: absolute;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
}

#TB_window {
	position: absolute;
	background: #333;
	z-index: 102;
	color: #98BD05;
	text-align:right;
}

#TB_window img {
	display:block;
   margin: 0;
}

#TB_caption{
	height:25px;
	padding:6px 0 0 25px;
	float:left;
	line-height: 25px;
}

#TB_closeWindow{
	height:15px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeWindowButton{
   display: block;
   text-indent: -5000px;
   text-align: left;
	overflow: hidden;
	width: 30px;
	height: 30px;
	background: url('/images/closebox.png');
	position: absolute;
	top: -10px;
	left: -10px;
}

#TB_closeAjaxWindow{
	padding:5px 10px 7px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 20px;
	margin-bottom:1px;
	color: #98BD05;
}

#TB_title{
	background-color:#000;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: absolute;
	display:none;
	height:100px;
	width:100px;
	z-index:101;
}

#TB_HideSelect{
	z-index:99;
	position:absolute;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
}

/* IE6 */
* html #TB_iframeContent{
	margin-bottom:1px;
}