/* Elements */



body{

  margin: 0;

  padding: 20px;

  /*background: #006699;*/
  background: #eeeeee;

  color: #002020;

  font: 11px/1.5 "Lucida Grande", Verdana, sans-serif;

  text-align: center;

}



a{

  text-decoration: none;

  font-weight: bold;

  background-color: inherit;

  color: #67BE31;

  overflow: hidden;

}



a:hover

{

  background-color : inherit;

  color: #67BE31;

}



img{

  background: #FFF;

  color: inherit;

}



a img{

  border: 0;

}



code{

  display: block;

  border-left: 4px solid #E3E3DB;

  padding: 5px 10px;

}



ul{

  margin: 0;

  padding: 0;

  /*list-style: none;*/

}



.miscs ul, .fauxbullet{

/*  margin: 0 0 20px 0;*/
  margin: 0;
  margin-right: 50px;

}



ul li, .fauxbullet{

  /*padding: 4px 0 5px 0px;*/
  margin: 0;
  margin-left: 15px;
}



ul li.odd{

  background-color: #EFEFEF; 

  color: inherit;

  margin: 1px 0;

  border-top: 1px solid #DCDCDC;

  border-bottom: 1px solid #DCDCDC;

}



.readmore{

  padding: 0 0 0 15px;  

}



li.readmore{

  padding: 5px 0 4px 20px;

}



/* Layout */



#wrapper{

  margin: auto;

  width: 750px;

  overflow: hidden;

  /*border: 5px solid #FFF;*/
  border: 1px solid #bbbbbb;

  text-align: left;

  background: #FFF; 

  color: inherit;

}



#header

{	

	height: 70px;

	color: inherit;

	background: #FFFFFF;

	text-align: right;

	padding: 10px;		
	

}

#banner
{	

	height: 150px;

	min-height: 102px;

	color: inherit;

	background: #FFFFFF;

	text-align: right;

	background-image: url(../../images/headerbg.jpg);


}



#logo

{

	position: relative;

	top: 0px;

	margin: 0px;

	float: left;	

}



#lema

{

	height: 50px;

	margin: 15px;

	padding: 0;	

	float: right;

	font-size: 18px;

	color: #686868;	

	background-color: inherit;

	text-align: right;

}





.latestwork{

  margin: 0;

  padding: 10px 0 10px 18px;

  list-style: none;

  border-top: 4px solid #BBB;

  background: #E5E5E5;

  color: inherit;

}



.latestwork li, .latestwork li.odd{

  border: 0;

  float: left;

  padding: 3px;

  margin: 0 20px 0 0;

  background: url(/img/thumb_shadow.jpg) top no-repeat;

}



.latestwork li a img{

  display: block;

  border: 5px solid #FFF;

  width: 208px;

  height: 110px;

}



.previouswork{

  margin: 0;

  padding: 0 0 10px 0;

  list-style: none;

}



.previouswork li, .previouswork li.odd{

  border: 0;

  float: left;

  margin: 0 5px 5px 0;

  padding: 3px;

  background: url(/img/thumb_white_shadow.jpg) top no-repeat;

}



.previouswork li a img{

  display: block;

  border: 5px solid #FFF;

  width: 208px;

  height: 110px;

}



.foliosplash{

  margin: 0;

  padding: 18px 18px 10px 18px;

  background: #E5E5E5;

  color: inherit;

}



.folioblurb{

  float: left;

  width: 480px;

}



.siteshot{

  margin: 0 15px 5px 0;

  float: left;

  border: 4px solid #FFF;

}



.foliocategories{

  width: 210px;

  float: right;

}



#content{

  padding: 30px;

  background: url(/img/content_grad.jpg) top repeat-x;

}



.bodytext{

  float: left;

  width: 450px;

}



.blogtext{

  float: left;

  width: 440px;

}



.miscs{

  float: right;

  width: 210px;

}



.colsplash{

  padding: 0 0 10px 0;

}



.colspash p{

  margin: 0;

  padding: 0;

}



.blogtitle, .postlinks{

  background: #EFEFEF url(/img/blog_title.gif);

  color: inherit;

  margin: 0 -10px;

  padding: 10px;

  border-top: 2px solid #DCDCDC;

  border-bottom: 2px solid #DCDCDC;

  line-height: 1.0;

}



.commentstitle{

  margin: 30px -10px 0 -10px;

}



.blogtitle p{

  margin: 0;

  padding: 0;

  font-size: 10px;

  text-transform: uppercase;

}



.tags{

  line-height: 1.2;

  width: 380px;

}



.error, .success{

  border-top: 2px solid #EAEAEA;

  border-bottom: 2px solid #EAEAEA;

  margin: 10px 0;

  padding: 5px 10px;

  background: #F9F9F9;

  color: inherit;

  font-weight: bold;

}



.postdate{

  background: #FFF;

  color: inherit;

  float: right;

  border: 2px solid #DCDCDC;

}



.postdate span{

  font-size: 12px;

  display: block;

  line-height: 1.0;

  padding: 0 5px 5px 5px;

  text-align: center;

}



.postdate span.day{

  padding: 5px 5px 0 5px;

  font-size: 20px;

}



.postlinks{

  margin: 0 -10px 30px -10px;

}



.commentslink{

  padding: 0 0 1px 15px;

  background: url(/img/comment_icon.gif) left no-repeat;

}



.newerlink{

  float: right;

  padding: 0 10px 0 0;

  background: url(/img/raquo.gif) right no-repeat;

}



.olderlink{

  float: left;

  padding: 0 0 0 10px;

  background: url(/img/laquo.gif) left no-repeat;

}



.feedicon{

  display: block;

  width: 150px;

  height: 60px;

  text-indent: -9000px;

  background: url(/img/feed_icon.jpg);

  margin: auto;

}



.usercomment{

  border-top: 2px solid #EAEAEA;

  border-bottom: 2px solid #EAEAEA;

  margin: 10px -10px;

  padding: 5px 10px;

  background: #F9F9F9;

  color: inherit;

}



.othersitescontainer

{  

  background-color: inherit;  

  color:inherit;

  text-align: right;  

}



.projectdetails{

  margin: 0;

  padding: 0;

}



.projectdetails dt{

  display: inline;

  font-weight: bold;

  padding: 0 0 0 15px;

  background: url(/img/list_item.gif) left no-repeat;

}



.projectdetails dd{

  display: inline;

  margin: 0;

  padding: 0;

}



dd.clienturl, dd.projecturl{

  padding: 0 0 0 12px;

  background: url(/img/raquo.gif) left no-repeat;

}



.projectdetails dd span{

  display: block;

  height: 5px;

}



.imagery{

  padding: 2px;

  border: 4px solid #BBB;

  width: 210px;

  height: 150px;

}



.imgtabs{

  margin: 0;

  padding: 2px;

}



.imgtabs a{

  background: #BBB;

  color: #FFF;

  padding: 5px;

}



.imgtabs a:hover{

  background: #CC720E;

  color: inherit;

}



.imgtabs a.active{

  background: #FFF;

  color: #CC720E;

  padding: 5px;

}



.blogbanner{

  margin: 0;

  padding: 0;

  background: url(/img/banner_stripe.jpg);

}



.blogbanner a{

  display: block;

  height: 100px;

  background: url(http://449.chrisgarrettmedia.com/img/slogan.png) center no-repeat;

  text-indent: -9000px;

}



.hidden{

  display: none;

}



.codecomment

{

  background-color :inherit;

  color: #999;

}



.backpack{

  margin: 50px 0;

  padding: 0;

  text-align: center;

}



#footer{

  padding: 18px 21px;

  background: #CCCCCC;

  border-top: 4px solid #BBB;

  color: #686868;

}



#footer a

{

  background-color : inherit;

  color: #606060;

}



#footer p{

  margin: 0;

  padding: 0;

}



/* Navigation */



#header ul{

  margin: 14px 0 0 0;

  padding: 0;

  list-style: none;

  float: right;

}



#header ul li{

  float: left;

  margin: 0 0 0 25px;

  border: 0;

  padding: 0;

  background: none;

}



#header ul li a{

  display: block;

  text-indent: -9000px;

  height: 30px;

  background-position: top;

  background-repeat: no-repeat;

}



#header ul li a.selected{

  background-position: 0 -30px;  

}



#header ul li#homelink{

  width: 31px;

}



#header ul li#homelink a{

  background-image: url(/img/home_link.jpg);

}



#header ul li#portfoliolink{

  width: 61px;

}



#header ul li#portfoliolink a{

  background-image: url(/img/portfolio_link.jpg);

}



#header ul li#profilelink{

  width: 46px;

}



#header ul li#profilelink a{

  background-image: url(/img/profile_link.jpg);

}



#header ul li#bloglink{

  width: 29px;

}



#header ul li#bloglink a{

  background-image: url(/img/blog_link.jpg);

}



#header ul li#contactlink{

  width: 52px;

}



#header ul li#contactlink a{

  background-image: url(/img/contact_link.jpg);

}



ul.othersites li{

  background-color: #FFF;

  color:inherit;

  border: 0;

}



/* Titles */



h1{

  margin: 0;

  padding: 0;

  width: 216px;

  float: left;

}



h1 a{

  display: block;

  height: 52px;

  text-indent: -9000px;

  background: url(/img/logo.jpg);

}



h2{

  margin: 0;

  padding: 0;

  color: #282828;

  background-color:inherit;  

  /*text-indent: -9000px;*/
  font-size: 14px;
}



h2.shorty{

  background: none;

  height: 0;

  border-bottom: 4px solid #BBB;

  overflow: hidden;

}



h3{

  margin: 0 0 10px 0;

  padding: 0;

  letter-spacing: -1px;

  font-size: 22px;

  line-height: 1.0;

  font-weight: normal;

  background-color:inherit;

  color: #006699;

}



h3 a{

  font-weight: normal;

}



.blogtitle h3{

  width: 380px;  

}



h4{

  margin: 0 0 10px 0;

  padding: 0 0 0 20px;

  font-size: 14px;

  line-height: 1.0;

  font-weight: normal;

}



h5{

  margin: 0;

  padding: 10px 0;

}



/* Forms */



label{

  display: block;

  width: 200px;

  font-weight: bold;

}



label.inlabel{

  display: inline;

}



.req

{

  background-color: inherit;

  color: #600;

}



textarea{

  width: 90%;

}



/* Hacks */



#header, .latestwork, #content, .blogtitle, .pagination, .foliosplash, .previouswork{



}



#header:after, .latestwork:after, #content:after, .blogtitle:after, .pagination:after, .foliosplash:after, .previouswork:after{

  content: ".";

  display: block;

  clear: both;

  height: 0;

  visibility: hidden;

}

/************* float images  *******************/

.imgFloatLeft{
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.imgFloatRight{
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
}

/************* globalNav styles ****************/



#globalNav

{

  position: relative;

  width: 100%;

  min-width: 640px;

  height: 32px;

  background-image:  url("../../images/glbnav_background.gif");

  background-color: inherit;

  color: #cccccc;

  padding: 0px;

  margin: 0px;

  text-decoration: none;

  text-align:left;
  
  font-size: small;

}



#globalNav img{

	margin-bottom: -4px;

 

}



#gnl {

	position: absolute;

	top: 0px;

	left:0px;

}



#gnr {

	position: absolute;

	top: 0px;

	right:0px;

}



#globalLink{

	position: absolute;

	top: 6px;

	height: 22px;

	min-width: 640px;
	
	width: 100%;

	padding: 0px;

	margin: 0px;
	
	padding-bottom: 2px;

	left: 0px;

	z-index: 100;

	text-decoration: none;
	


}





a.glink, a.glink:visited

{	

  	font-size: small;

  	background-color: inherit;

  	color: #686868;  	

	margin: 0px;

	padding: 2px 5px 4px 5px;

	border-right: 1px solid #8FB8BC;


	text-decoration: none;

}



a.glink:hover{

  	background-image:  url("../../images/glblnav_selected.gif");

	text-decoration: none;

}



.skipLinks {display: none;}

/***** Nav Menu H ****/
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; 
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; 
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h ul a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h ul a:hover,
ul#navmenu-h ul li:hover a,
ul#navmenu-h ul li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu-h ul li:hover li a,
ul#navmenu-h ul li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h ul li:hover li a:hover,
ul#navmenu-h ul li:hover li:hover a,
ul#navmenu-h ul li.iehover li a:hover,
ul#navmenu-h ul li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}