article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

/*  RESETS  */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, img, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

html, h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

a {
  text-decoration: none;
  outline: none;
  color: #C6B858; }

a:hover, a:active, a:focus {
  color: #C67F39; }

a:visited {
  color: #9F90C6; }

em {
  font-style: italic; }

img {
  border: none; }

ul, ol, li {
  list-style: none; }

/*  MAIN  */
html {
  background: #2e3c55 url("../img/bg-stripes.gif") 0 0 repeat; }

body {
  background: transparent url("../img/header-gradient.png") 0 0 repeat-x;
  font: normal 0.9em/1.2em "hypatia-sans-pro-1", "hypatia-sans-pro-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ccceb0; }

.clear {
  clear: both; }

#page {
  margin: 0 auto;
  width: 840px;
  padding: 0 30px 36px 30px; }

/*******************
*  HEADER  
*******************/
#header {
  height: 142px;
  padding-top: 34px;
  position: relative; }
  #header #logo {
    margin-left: 210px;
    text-indent: -9999px;
    width: 410px;
    height: 114px;
    background: transparent url("../img/logo.png") 0 0 no-repeat; }
  #header a#contact-top {
    display: block;
    text-indent: -9999px;
    width: 78px;
    height: 35px;
    position: absolute;
    top: 35px;
    right: 5px;
    background: transparent url("../img/contact-top.gif") 0 0 no-repeat;
    overflow: hidden; }
  #header a#contact-top:hover {
    background: transparent url("../img/contact-top.gif") 0 -35px no-repeat; }

/*******************
*  PORTFOLIO  
*******************/
#portfolio {
  margin: 30px 13px 0 16px; }
  #portfolio .example {
    width: 260px;
    height: 206px;
    background: transparent url("../img/box-shadow.png") 0 0 no-repeat;
    position: relative;
    float: left;
    margin: 0 10px 60px 0; }
    #portfolio .example p.title {
      position: absolute;
      top: 208px;
      left: 8px;
      font-size: 18px; }
    #portfolio .example p#title1 a {
      color: #C5E8B0; }
    #portfolio .example p#title2 a {
      color: #C6BA91; }
    #portfolio .example p#title3 a {
      color: #E7C29E; }
    #portfolio .example p#title4 a {
      color: #F4F3DC; }
    #portfolio .example p#title5 a {
      color: #F4D28A; }
    #portfolio .example p#title6 a {
      color: #F4F39F; }
    #portfolio .example img {
      position: absolute;
      top: 6px;
      left: 6px; }
    #portfolio .example .cover {
      width: 248px;
      height: 194px;
      background: transparent;
      overflow: hidden;
      position: absolute;
      top: 6px;
      left: 6px;
      color: #F7ECD7; }
      #portfolio .example .cover p, #portfolio .example .cover a.site {
        width: 234px;
        background-color: #583A39; }
      #portfolio .example .cover p.type {
        width: 100%;
        font: 18px "hypatia-sans-pro-1","hypatia-sans-pro-2", "Georgia", "Times", "Times New Roman", serif;
        padding: 5px 0 5px 7px; }
      #portfolio .example .cover p.description {
        font-size: 15px;
        line-height: 17px;
        padding: 5px 7px 10px 7px;
        position: relative;
        bottom: 0; }
      #portfolio .example .cover a.site {
        width: 234px;
        display: block;
        font: 1em "hypatia-sans-pro-1","hypatia-sans-pro-2", "Georgia", "Times", "Times New Roman", serif;
        padding: 5px 7px;
        text-align: right;
        position: absolute;
        bottom: 0; }
    #portfolio .example .fade {
      width: 248px;
      height: 169px;
      background: #583A39;
      position: absolute;
      top: 25px;
      left: 6px;
      opacity: .5; }

/*******************
*  ABOUT    
*******************/
#about {
  margin: 0 0 0 16px; }
  #about p {
    margin: 0 85px 40px 69px;
    font-size: 20px;
    line-height: 24px; }
  #about .service {
    width: 216px;
    height: 111px;
    background: transparent url("../img/service-boxes.gif") 0 0 no-repeat;
    float: left;
    padding: 10px 15px 0 15px; }
  #about .service.design {
    margin: 0 21px 0 8px; }
  #about .service.flash {
    margin: 0 29px 0 0;
    background: transparent url("../img/service-boxes.gif") -267px 0 no-repeat; }
  #about .service.web {
    margin: 0;
    background: transparent url("../img/service-boxes.gif") -546px 0 no-repeat; }
  #about h3 {
    color: #A1CFA5;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 0px #2E3C55; }
  #about .service.flash h3 {
    color: #D8C593; }
  #about .service.web h3 {
    color: #CA9270; }
  #about .service p.description {
    font-size: 15px;
    line-height: 17px;
    width: 216px;
    padding: 0;
    margin: 13px 0 0 0; }

/*******************
*  PRICING    
*******************/
#pricing {
  margin: 32px 85px 0 85px; }
  #pricing p {
    margin: 0 0 40px 0;
    font-size: 20px;
    line-height: 24px; }

/*******************
*  FOOTER    
*******************/
h4 {
  margin: 32px 0 9px 224px;
  text-indent: -9999px;
  width: 388px;
  height: 90px;
  background: transparent url("../img/footer.gif") 0 0 no-repeat; }

#footer {
  color: #C19E7C;
  text-align: center; }
  #footer a {
    color: #C19E7C; }
  #footer p {
    display: inline;
    margin-left: 12px; }