/* Elements */

@import "menu.css"; /* contains styles for the main menu */

body{
  margin: 0;
  padding: 20px;
  background: #202020;
  color: #202020;
  font: 11px/1.5 "Lucida Grande", Verdana, sans-serif;
  text-align: center;
}

p.small {line-height: 90%}

a{
  text-decoration: none;
  font-weight: bold;
  color: #CC720E;
  overflow: hidden;
}

h1{
	color:#eeeeee;
}

a:hover{
  color: #202020;
}

img{
  background: #FFF;
}

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;
}

ul li, .fauxbullet{
  padding: 4px 0 5px 20px;
  background: url(/img/list_item.gif) 5px center no-repeat;
}

ul li.odd{
  background: #EFEFEF url(/img/list_item.gif) 5px center no-repeat;
  margin: 1px 0;
  border-top: 1px solid #DCDCDC;
  border-bottom: 1px solid #DCDCDC;
}

.readmore{
  padding: 0 0 0 15px;
  background: url(/img/raquo.gif) left no-repeat;
}

li.readmore{
  padding: 5px 0 4px 20px;
  background: url(/img/raquo.gif) 5px center no-repeat;
}

/* Layout */

#wrapper{
  margin: auto;
  width: 750px;
  overflow: hidden;
  border: 5px solid #FFF;
  text-align: left;
  background: #FFF;
}

#header{
  padding-top: 405px;
}

.latestwork{
  margin: 0;
  padding: 10px 0 10px 18px;
  list-style: none;
  border-top: 4px solid #BBB;
  background: #E5E5E5;
}

.latestwork li, .latestwork li.odd{
  border: 0;
  float: left;
  padding: 3px;
  margin: 0 20px 0 0;
  background: url(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;
}

.folioblurb{
  float: left;
  width: 480px;
}

.siteshot{
  margin: 0 15px 5px 0;
  float: left;
  border: 4px solid #FFF;
}

.foliocategories{
  width: 210px;
  float: right;
}

#content{
  padding-top: 15px;
  padding-bottom: 0px;
  padding-left: 15px;
  padding-right: 15px;
  background: url(koru.jpg) bottom left no-repeat;
 

}

.bodytext{
  float: left;
  width: 450px;
  text-align: justify;
}

.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);
  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;
  font-weight: bold;
}

.postdate{
  background: #FFF;
  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;
}

.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;
}

.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{
  color: #999;
}

#footer{
  padding: 10px 10px;
  background: #202020;
  border-top: 4px solid #BBB;
  color: #A0A0A0;
}

#footer a{
  color: #686868;
}

#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;
  border: 0;
}

/* Titles */

h1{
  font-size:small;
  margin: 0;
  padding: 0;
  width: 216px;
  float: left;
  line-height:75%;
}

h1 a{
  display: block;
  height: 52px;
  text-indent: -9000px;
  background: url(/img/logo.jpg);
}

h2{
background:none;
  margin: 0;
  padding: 0;
  height: 30px;
  text-indent: 9px;
}

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: 16px;
  line-height: 1.0;
  font-weight: normal;
  color: #878787;
}

h3 a{
  font-weight: normal;
}

.blogtitle h3{
  width: 380px;
  _width: 350px;
}

h4{
  margin: 0 0 10px 0;
  padding: 0 0 0 20px;
  font-size: 14px;
  line-height: 1.0;
  font-weight: normal;
  background: url(/img/blog_icon.gif) 4px center no-repeat;
}

h5{
  margin: 0;
  padding: 10px 0;
}

/* Forms */

label{
  display: block;
  width: 200px;
  font-weight: bold;
}

label.inlabel{
  display: inline;
}

.req{
  color: #600;
}

textarea{
  width: 90%;
}

/* Hacks */

#header, .latestwork, #content, .blogtitle, .pagination, .foliosplash, .previouswork{
  _height: 1%;
}

#header:after, .latestwork:after, #content:after, .blogtitle:after, .pagination:after, .foliosplash:after, .previouswork:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}