/*
----------------------------------------
Thought & Theory
     Author:    Dennis Eusebio
---------------------------------------- */

/* zeros out everything */
/*
----------------------------------------
Tantek Celik's Whitepsace Reset
     Author:  	Tantek Celik
    Version:  	(CC) 2004 Some Rights Reserved - http://creativecommons.org/licenses/by/2.0
Description:	Resets default styling of common browsers to a common base
----------------------------------------
*/

:link,:visited {
	text-decoration:none; }
ul, ol {
	list-style:none; }
h1,h2,h3,h4,h5,h6,pre,code {
	font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
	margin:0;
	padding:0; }
a img,:link img,:visited img {
	border:none; }
address {
	font-style:normal; }

body {
  background: #f9f7f4;
  font: 14px/24px 'Georgia', 'Times New Roman', serif;
  color: #888;
}

p { margin-bottom: 18px; }
small { font-size: 12px; }

/* links
---------------------------------------- */
a:link { color: #666; outline: none; }
a:visited { color: #666; outline: none; }
a:hover { color: #333; outline: none; }
a:active { color: #666; outline: none; }

/* headers
---------------------------------------- */
h1, h2, h3, h4 {
  font-weight: normal;
  font-family: 'Helvetica Neue W01 57 Cn', Helvetica, Arial, sans-serif;
}

h1 {
  margin-bottom: 8px;
  font-size: 30px;
  line-height: 40px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #666; 
}

h2 {
  margin-bottom: .4px;
  font-size: 20px;
  line-height: 24px;
  color: #666;
}

h3, h4 {
  margin-bottom: 8px;
  font-size: 11px;
  font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
  text-transform: uppercase;
  line-height: 14px;
  letter-spacing: 2px;
  color: #666;
}


/* universal
---------------------------------------- */
#application {
  margin: 0 auto;
  width: 940px;
}
  #nav {
    padding: 28px 10px;
    float: right;
    width: 80px;
  }
    #nav ul { margin-top: 28px; }
    #nav ul a {
      padding: 4px 0;
      text-transform: uppercase;
      display: block;
      font-size: 11px;
      letter-spacing: 2px;
      font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
    }
      #about #nav ul a#nav_about, #blog #nav ul a#nav_blog, #services #nav ul a#nav_services, #portfolio #nav ul a#nav_portfolio, #contact #nav ul a#nav_contact, #collection #nav ul a#nav_collection { color: #db9855; }
  #content {
    float: left;
    width: 820px;
    position: relative;
  }
    #breadcrumbs {
      padding: 48px 10px 8px 10px;
      border-left: 1px solid #db9855;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #999;
      font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
    }
      #breadcrumbs li {
        margin-right: 8px;
        display: inline;
      }
      #breadcrumbs a:link, #breadcrumbs a:visited, #breadcrumbs a:hover, #breadcrumbs a:active { 
        padding-right: 10px;
        color: #666; 
        border-right: 1px solid #ddd;
      }
    #page_content {
      margin-top: 30px; padding: 0 10px;
      float: left;
      width: 800px;
    }

#pagination {
  padding: 0 10px 30px 10px;
  float: left;
  width: 530px;
  background: url(../images/bg_pagination.png) top repeat-x;
  font: 11px/18px 'Helvetica', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  color: #999;
}
  #pagination a:link, #pagination a:visited, #pagination a:hover, #pagination a:active {
    padding: 10px;
    background: #f9f7f4;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    width: 74px;
    color: #999;
  }
    #pagination a:hover { color: #666; }
    .btn_prev { float: left; }
    .btn_next { float: right; }

/* icons */
.icon_full {
  padding: 0 0 0 32px;
  background: url(/images/icon_full.png) 0 50% no-repeat;
}
.icon_day {
  padding: 0 0 0 32px;
  background: url(/images/icon_day.png) 0 50% no-repeat;
}
.icon_night {
  padding: 0 0 0 32px;
  background: url(/images/icon_night.png) 0 50% no-repeat;
}
.intro { 
  line-height: 30px;
  font-size: 18px;
}

/* form elements */
fieldset { 
  margin: 0; padding: 0; 
  border: none;
}
label {
  font: 11px/24px 'Helvetica', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  color: #999;
}
dl { margin: 0 0 16px 0; padding: 0; }
dd { margin: 0; padding: 0; }
input, textarea, select { font: 12px/18px Arial, sans-serif; }
.submit_universal {
  padding: 10px;
  background: #db9855;
  color: #fff;
  font-weight: bold;
  border: none;
}
  .submit_universal:hover { 
    cursor: pointer;
    background: #bc834a; 
  }
  
/* slates */
.slate {
  margin: 14px 0;
  float: left;
  width: 100%;
  border: 1px solid #ccc;
  text-align: center; 
  font: 12px/18px 'Helvetica', Arial, sans-serif;
  font-weight: bold;
}
  .slate p { margin: 0; padding: 10px; }

/**** Masonry CSS ****/

.wrap { margin-bottom: 20px; }

.wrap:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.box {
  margin: 10px;
  float: left;
}

.col1 { width: 250px; }
.col2 { width: 520px; }
.col3 { width: 790px; }

.col1 img { max-width: 250px; }
.col2 img { max-width: 520px; }
.col3 img { max-width: 790px; }

/* page specific
---------------------------------------- */
/* index */
#index {
  position: absolute;
  top: 0; right: 40px;
  width: 750px;
}
  h1#tagline {
    margin: 190px 0 0 10px; padding-right: 30px;
    float: left;
    width: 360px; height: 10px;
    display: inline;
    font-size: 11px;
    letter-spacing: 2px;
    text-align: right;
    font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
  }
    h1#tagline span { color: #333; }
  #index_nav {
    padding: 180px 0 24px 30px;
    float: right;
    width: 319px;
    border-left: 1px solid #db9855;
  }
    #logo a:link, #logo a:visited, #logo a:hover, #logo a:active {
      text-indent: -9999px;
      display: block;
      width: 41px; height: 54px;
      background: url(/images/logo.png) no-repeat;
    }
      #logo a:hover { background-position: 0 -54px; }
    #index_nav ul { margin-top: 24px; }
      #index_nav ul a {
        margin-bottom: 8px; 
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        background-repeat: none;
        letter-spacing: 2px;
        font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
      }

/* About */
  #subnav {
    margin: 0 20px 0 0;
    float: left;
    width: 80px;
    display: inline;
  }
    #subnav a:link, #subnav a:visited, #subnav a:hover, #subnav a:active {
      padding: 4px 0;
      display: block;
      font-size: 11px;
      font-family: 'Helvetica Neue W01 77 Bd Cn', "Helvetica", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #999;
    }
      #subnav a:hover, #subnav a.selected { color: #666; }
  #about_content {
    float: left;
    width: 670px;
  }
    .about_list {
      margin-bottom: 16px;
      float: left;
      width: 670px;
    }
      .about_list li {
        float: left;
        width: 220px;
      }
#process_list { width: 670px; }
  .process_step {
    margin-bottom: 16px;
    float: left;
    width: 670px;
  }
    .process_step h3 {
      float: left;
      width: 130px;
    }
    .process_step p {
      float: right;
      width: 520px;
    }

/* Blog */
#blog_entries {
  float: left;
  width: 550px;
}
  .blog_entry {
    margin-bottom: 32px;
    float: left;
    width: 550px;
  }
    .blog_entry_meta {
      float: left;
      width: 40px;
      text-align: center;
    }
      .blog_entry_meta img {
        width: 39px;
        height: 39px;
        border: 1px solid #ccc;
      }
      .blog_entry_count:link, .blog_entry_count:visited, .blog_entry_count:hover, .blog_entry_count:active {
        padding: 4px 4px 10px 4px;
        background: #db9855 url(/images/bg_comment.png) bottom right no-repeat;
        font: 11px/18px 'Helvetica', Arial, sans-serif;
        font-weight: bold;
        color: #fff;
      }
    .blog_entry_info {
      float: right;
      width: 490px;
    }
      .blog_entry_info h2 {
        margin: 0 0 4px 0;
        line-height: 18px;
        color: #666;
      }
      .blog_sub_info {
        float: left;
        width: 490px;
        font: 11px/18px 'Helvetica', Arial, sans-serif;
        font-weight: bold;
        color: #999;
      }
        .blog_sub_info p { margin-bottom: 12px; }
        .blog_author {
          float: left;
          width: 245px;
        }
        .blog_category {
          float: right;
          width: 245px;
          text-align: right;
        }

#blog_sidebar {
  float: right;
  width: 220px;
}
  #blog_sidebar a:link, #blog_sidebar a:visited, #blog_sidebar a:hover, #blog_sidebar a:active {
    font: 11px/18px 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    color: #999;
  }
    #blog_sidebar a:hover { color: #666; }
  #follow a { 
    margin-bottom: 10px;
    display: block; 
  }
  #categories {
    float: left;
    width: 220px;
  }
    #categories a {
      margin-bottom: 10px;
      float: left;
      width: 110px;
    }
  #flickr img { 
    margin: 0 1px 1px 0;
    float: left;
    width: 40px; height: 40px; 
    display: inline;
  }
  #dribbble {
    margin-top: 20px;
    float: left;
    width: 220px;
  }
    #dribbble img {
      margin: 0 1px 1px 0;
      float: left;
      width: 100px;
      display: inline;
    }
    #dribbble .item_2 img, #dribbble .item_4 img, #dribbble .item_6 img { margin: 0 0 1px 0; }
#blog_detail {
  margin-top: 30px; padding: 0 0 24px 0;
  float: left;
  width: 820px;
}
  #blog_detail_header {
    margin-bottom: 18px;
    float: left;
    width: 820px;
  }
    #blog_detail_header h1 {
      margin: 0;
      float: right;
      width: 760px;
      text-transform: none;
      letter-spacing: normal;
    }
    #blog_detail_header .blog_sub_info {
      float: right;
      width: 760px;
    }
    
    #blog_detail_content {
      margin-bottom: 36px;
      float: left;
      width: 820px;
    }
    #blog_detail_content blockquote {
      margin: 18px; padding: 0 18px;
      font-size: 18px;
      line-height: 18px;
      background: url(/images/bg_blockquote.png) no-repeat;
    }
    #blog_detail_content ul {
      margin: 18px;
    }
      #blog_detail_content ul li { list-style: disc; }
    .stats { margin: 18px 50px 32px 50px; }
      .stat {
        float: left;
        width: 180px;
        text-align: center;
        border-left: 1px solid #ccc;
      }
        .stat.last { border-right: 1px solid #ccc; }
        .stat h3 { margin: 0; }
        .stat h2 {
          margin: 0;
          line-height: 40px;
          font-size: 36px;
          color: #333;
        }
    
    .col-1 {
      float: left;
      width: 820px;
    }
      .col-1.center p { margin: 18px 180px; }
      .col-1.right {
        float: right;
        width: 460px;
      }
        .col-6.left {
          float: left;
          width: 340px;
        }
      .dl_mixtape { text-align: center; }
      .col-2.left {
        float: left;
        width: 400px;
      }
        .col-2.left h2 span, .col-2.right h2 span { color: #db9855; }
        .col-2.left h2, .col-2.right h2 { margin-bottom: 8px; }
      .col-2.right {
        float: right;
        width: 400px;
      }
      .intro_spark {
        margin: 36px 0; padding: 0 0 36px 0;
        float: left;
        width: 820px;
        font-size: 24px;
        line-height: 30px;
        background: url(/images/bg_divider_spark.png) bottom center no-repeat;
      }
    
    #comments {
      float: left;
      width: 360px;
    }
      .comment {
        margin: 18px 0;
        float: left;
        width: 360px;
      }
        .comment_avatar {
          float: left;
          width: 40px;
        }
          .comment_avatar img { width: 40px; }
        .comment_content {
          float: right;
          width: 300px;
        }
          .comment_meta {
            margin: 0 0 10px 0;
            font: 11px/18px 'Helvetica', Arial, sans-serif;
            font-weight: bold;
          }
      #add_comment {
        float: right;
        width: 360px;
      }
        #add_comment h2 { margin-bottom: 18px; }
        #add_comment p { margin: 0; }
        #add_comment dl {
          float: left;
          width: 360px;
        }
        #add_comment dt {
          float: left;
          width: 90px;
        }
        #add_comment dd {
          float: right;
          width: 250px;
        }
          input#blog_name, input#blog_email, input#blog_url, textarea#blog_comment {
            padding: 5px;
            width: 238px;
            background: #fff;
            border: 1px solid #ccc;
          }
          textarea#blog_comment { height: 150px; }
        #add_comment .action {
          margin-left: 110px;
          float: left;
          width: 250px;
        }
    

/* Products */
body#ventures { 
  background: #666;
  color: #999;
}

#ventures #logo a:link, #ventures #logo a:visited, #ventures #logo a:hover, #ventures #logo a:active { background: url(/images/logo_dark.png) no-repeat; }
  #ventures #logo a:hover { background-position: 0 -54px; }
  
body#ventures h1 { color: #ccc; }

body#ventures a:link { color: #999; outline: none; }
body#ventures a:visited { color: #999; outline: none; }
body#ventures a:hover { color: #ccc; outline: none; }
body#ventures a:active { color: #999; outline: none; }
  #ventures #nav ul a#nav_ventures { color: #db9855; }

#product_list {
  float: left;
  width: 820px;
}
  .product {
    margin: 0 30px 14px 0;
    float: left;
    width: 250px;
    display: inline;
  }
    .product.last { margin: 0 0 18px 0; }
    .product img { 
      margin-bottom: 18px;
      display: block; 
    }
    .product p { margin: 0 0 10px 0; }
    .product_desc {
      font: 11px/18px 'Helvetica', Arial, sans-serif;
      font-weight: bold;
      color: #999;
    }
      .product a:hover { color: #666; }
    body#ventures .product h2 a:link, body#ventures .product h2 a:visited, body#ventures .product h2 a:hover, body#ventures .product h2 a:active {
  font-size: 100%;
  color: #ccc;
}
  body#ventures .product h2 a:hover { color: #eee; }
#ventures #breadcrumbs a:link, #ventures #breadcrumbs a:visited, #ventures #breadcrumbs a:hover, #ventures #breadcrumbs a:active { 
  border-right: 1px solid #999; 
  color: #ccc;
}
#ventures #breadcrumbs a:hover { color: #eee; }
body#ventures #btn_project { border: 1px solid #999; }

/* Portfolio*/
#portfolio_sort {
  float: left;
  width: 800px;
}
  #portfolio_sort a:link, #portfolio_sort a:visited, #portfolio_sort a:hover, #portfolio_sort a:active {
    font: 11px/18px 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    color: #999;
  }
    #portfolio_sort a:hover { color: #666; }
  #sort_by_service {
    float: left;
    width: 250px;
  }
    #sort_by_service li { float: left; }
    #sort_by_service li a {
      margin-bottom: 10px;
      float: left;
      width: 125px;
    }
  #sort_by_experience {
    float: right;
    width: 520px;
  }
    #sort_by_experience p { margin-top: -1px; }
#portfolio_list {
  margin-top: 18px; padding-bottom: 32px;
  float: left;
  width: 820px;
}
  .results span {
    padding: 5px;
    font-weight: bold;
    font-family: 'Helvetica', Arial, sans-serif;
    color: #fff;
    font-size: 11px;
    background: #999;
  }
  .portfolio_entry {
    margin: 0 30px 18px 0;
    float: left;
    width: 250px;
    display: inline;
    font-weight: bold;
  }
    .portfolio_entry.first { clear: both; }
    .portfolio_entry.last { margin: 0 0 18px 0; }
    .portfolio_entry img { 
      margin-bottom: 16px;
      display: block; 
    }
    .portfolio_entry h2 a:link, .portfolio_entry h2 a:visited, .portfolio_entry h2 a:hover, .portfolio_entry h2 a:active {
      margin: 4px 0;
      font-weight: normal;
      color: #666;
    }
      .portfolio_entry h2 a:hover { color: #333; }
    .portfolio_entry p { margin: 0 0 4px 0; }
    .portfolio_entry a:link, .portfolio_entry a:visited, .portfolio_entry a:hover, .portfolio_entry a:active {
      color: #999;
    }
      .portfolio_entry p a {
        font: 11px/18px 'Helvetica', Arial, sans-serif;
        font-weight: bold;
      }
      .portfolio_entry a:hover { color: #666; }
#project_nav {
  float: left;
  width: 820px;
}
  #btn_project {
    padding: 10px 10px 10px 36px;
    font: 11px/18px 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    color: #999;
    border: 1px solid #ccc;
    background: url(/images/icon_project_nav.png) 10px 50% no-repeat;
  }
    #btn_project:hover { color: #666; }
  #project_list {
    margin: 32px 0 0 0;
    float: left;
    width: 820px;
  }
    #project_list a:link, #project_list a:visited, #project_list a:hover, #project_list a:active {
      margin-bottom: 10px; padding-left: 9px;
      float: left;
      width: 148px;
      font: 11px/18px 'Helvetica', Arial, sans-serif;
      border-left: 1px solid #ddd;
      font-weight: bold;
      color: #999;
    }
      #project_list a:hover { color: #666; }
#project_detail {
  margin: 30px 0;
  float: left;
  width: 820px;
}
  #project_detail h1 { margin-bottom: 0; }
  #entry_services {
    font: 11px/18px 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    color: #999;
  }
    #entry_services a { margin-right: 10px; }
  #entry_details {
    float: left;
    width: 820px;
  }
    #screen_shots {
      float: left;
      width: 560px;
    }
      #screen_shots img {
        margin-bottom: 18px;
        display: block;
      }
    #entry_info {
      margin-left: 20px; padding: 10px 0;
      float: left;
      width: 210px;
      display: inline;
    }
      #entry_tags a:link, #entry_tags a:visited, #entry_tags a:hover, #entry_tags a:active {
        margin-right: 10px;
        font: 11px/18px 'Helvetica', Arial, sans-serif;
        font-weight: bold;
        color: #999;
      }
        #entry_tags a:hover { color: #666; }
      .btn_url {
        padding: 10px 10px 10px 36px;
        font: 11px/18px 'Helvetica', Arial, sans-serif;
        font-weight: bold;
        color: #999;
        display: block;
        background: url(/images/icon_btn_url.png) 10px 50% no-repeat;
        border: 1px solid #ccc;
      }
        #products .btn_url { border: 1px solid #999; }

/* Services */
#service_desc { width: 670px; }
#service_list { width: 670px; }
  .service {
    margin-bottom: 18px;
    float: left;
    width: 670px;
  }
    .service h3 {
      float: left;
      width: 150px;
    }
    .service p {
      float: right;
      width: 520px;
    }

/* Contact */
form#contact_us {
  margin-bottom: 30px;
  float: left;
  width: 560px;
}
  form#contact_us dl {
    margin: 0 0 18px 0;
    float: left;
    width: 560px;
  }
  form#contact_us dt {
    margin-right: 20px; padding-top: 4px;
    float: left;
    width: 90px;
    display: inline;
    text-align: right;
  }
  form#contact_us dd {
    float: left;
    width: 420px;
  }
  form#contact_us p { margin: 0; }
    form#contact_us fieldset input, form#contact_us fieldset textarea { 
      padding: 4px; 
      background: #fff;
      border: 1px solid #ccc;
    }
    input#contact_name, input#contact_company, input#contact_email, input#contact_url { width: 400px; }
    input#contact_phone { width: 150px; }
    textarea#contact_message {
      width: 400px;
      height: 200px;
    }
  form#contact_us .action {
    margin-left: 110px;
    float: left;
    width: 420px;
    display: inline;
  }
#contact_sidebar {
  float: right;
  width: 220px;
}
  .sidebar_module { margin-bottom: 30px; }
  .contact_method {
    margin-bottom: 4px;
    font: 11px/18px 'Helvetica', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    color: #666;
  }
    .contact_method strong { 
      margin-right: 10px; 
      color: #999; 
    }

/* collection */
body#collection #page_content {
  padding: 0;
  width: 820px;
}
body#collection .icon_full, body#collection .intro { margin-left: 10px; }
body#collection blockquote {
  padding: 0 0 0 24px;
  font-size: 18px;
  line-height: 24px;
  background: url(/images/bg_blockquote.png) no-repeat;
}
  body#collection blockquote p { margin: 0 0 10px 0; }
  body#collection .box a {
    font-size: 11px;
    font-weight: bold;
    font-family: 'Helvetica', Arial, sans-serif;
  }
  body#collection .author { 
    margin-left: 24px; 
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
  }
body#collection h3 { margin-top: 10px; }