/*   
Theme Name: Flatterline
Theme URI: http://flatterline.com
Description: The official theme of the flatterline website.
Author: Jim Jeffers
Author URI: http://sumocreations.com
Version: 1.0
.
For use exclusively on Flatterline.com
.
*/

/*  KEEP OUR CSS CLEAN
    Some guidelines to follow:
    1. Break code down into sections.
    2. Keep your rules alphabetically sorted.
    3. Only put one selector per line for a block of rules that apply to multiple selectors.
    4. Indent your rules, only one rule per line.
        
        example:
        
        element#id,
        element.class {
            rule1: value;
            rule2: value;
            top: value;
        }
*/

@import "reset.css";

/* =BACKGROUND EFFECTS
   ------------------------------------------------------ */
   body {
      background: #f3ede5;
      font: normal normal normal 1em/1em Courier, serif;
      letter-spacing: -.025em;
   }
   
   div#vignette {
      height: 100%;
      left: 0;
      min-width: 960px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1;
   }
   
   div#texture {
      width: 100%;
      height: 100%;
      background: url(images/background_texture.jpg);
   }
   
   div#content {
      left: 50%;
      margin-left: -480px;
      padding: 120px 0 60px 0;
      position: absolute;
      width: 960px;
      z-index: 2;
   }

/* =BASE
   ------------------------------------------------------ */
   a {
      color: #f00;
      text-decoration: underline;
   }
   
   p a:hover,
   .navigation li a:hover {
      background: #f00;
      color: #fff;
   }
   
   a.call_to_action,
   a.call_to_action img {
      display: block;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
   }
   
   a.call_to_action:hover {
      background: rgba(255,255,255,.25);
   }
   
   strong {
      font-weight: bold;
   }

/* =FOOTER
   ------------------------------------------------------ */
   #footer {
      clear: both;
      padding: 10px 0;
      position: relative;
      font-size: 0.75em;
   }
   
   #footer .navigation li {
      padding: 0.05em 0;
   }

   #footer .navigation li a span {
      color: #000;
      display: block;
      float: left;
      text-decoration: none;
      width: 1.75em;
   }
   
   #footer #logo,
   #footer #logo img {
      display: block;
      float: left;
   }
   
   #footer #logo:hover {
      background: rgba(255,0,0,.25);
   }
   
   #footer .navigation {
      float: left;
      padding: 20px 10px 0 0;
      width: 140px;
   }
   
   #footer #article_navigation.navigation {
      padding-top: 16px;
      width: 300px;
   }
   
   #footer #site_references {
      position: absolute;
      right: 20px;
      top: 120px;
   }
   
   #footer #social_media {
      padding-right: 6px;
   }
   
/* =SOCIAL_MEDIA_LINKS
   ------------------------------------------------------ */
   .social_media li,
   #social_media li {
      display: inline;
      font-weight: bold;
   }
   
   a.rss {
      color: #f7941d;
   }
   
   a.twitter {
      color: #00aeef;
   }
   
   a.flickr {
      color: #0063dc;
   }
   
   a.flickr span {
      color: #ff0084;
   }
   
   a.wwr {
      color: #900;
   }
   
   a.facebook {
      color: #06c;
   }
   
   a.linkedin {
      color: #00f;
   }
   
   a.linkedin span {
      color: #000;
   }
   
/* =DABBED_NAV
   ------------------------------------------------------ */
   ul#dabbed_nav {
      background: url(images/dabbed-nav.png) no-repeat;
      display: block;
      height: 34px;
      padding: 25px 0 25px 120px;
      position: absolute;
      right: 0;
      top: 0;
      width: 381px;
   }
   
   ul#dabbed_nav a,
   ul#dabbed_nav li,
   ul#dabbed_nav img {
      display: block;
      float: left;
   }
   
   ul#dabbed_nav a {
      padding: 4px 8px;
   }
   
   ul#dabbed_nav a:hover {
      background: rgba(255,0,0,.5);
   }
   
   #blog li.blog,
   #services li.services,
   #team li.team {
      background: rgba(255,0,0,.25);
   }
   
/* =ELEVATOR_PITCH
   ------------------------------------------------------ */
   div#elevator_pitch {
      padding-bottom: 40px;
      position: relative;
      width: 410px;
   }
   
   div#elevator_pitch p {
      font-size: 1.5em;
      line-height: 0.8em;
      padding: 0.5em 0;
   }
   
   div#elevator_pitch #vertical_rule {
      display: block;
      position: absolute;
      right: -50px;
      top: 0;
   }

/* =MASTERMINDS
   ------------------------------------------------------ */
   div#the_masterminds {
      position: absolute;
      left: 580px;
      top: 140px;
      font-size: 0.875em;
      line-height: 1em;
      width: 300px;
   }
   
   div#the_masterminds #master_minds{
      margin-left: -90px;
   }
   
   div#the_masterminds dl, 
   div#the_masterminds dt, 
   div#the_masterminds dd {
      position: relative;
   }
   
   div#the_masterminds dl {
      margin: 10px 0 40px 0;
   }
   
   div#the_masterminds dd img {
      position: absolute;
      left: -90px;
      top: -40px;
   }

/* =SERVICES
   ------------------------------------------------------ */
   .cf_hidden {
      display: none;
   }

   .failure {
      background: rgba(255, 0, 0, 0.25);
      margin-bottom: 1em;
      padding: 0.5em;
      width: 400px;
   }

   #flatterline_services, 
   #how_we_work,
   #how_we_keep_it_affordable,
   #lets_get_going {
      position: relative;
      width: 960px;
   }
   
   #flatterline_team p,
   #flatterline_services p {
      font-size: 0.875em;
      line-height: 0.85em;
      margin: 0.75em 0;
   }
   
   #flatterline_services.advanced-interface {
      overflow: hidden;
      margin-top: -50px;
   }
   
   #flatterline_services.advanced-interface > div {
      position: absolute;
      top: 50px;
   }
   
   #flatterline_services div div p:first-child {
      margin-top: 0;
   }
   
   #miracle_workers_statement {
      display: block;
      margin: 10px auto;
   }
   
   #is_it_affordable {
      clear: both;
      margin-left: 160px;
   }
   
   #cost_is_a_by_product,
   #what_you_get,
   #all_about_agility,
   #not_all_known {
      float: left;
      margin: 40px 20px 20px 0;
      width: 380px;
   }
   
   #want_us_to_start {
      clear: both;
      margin-left: 300px;
   }
   
   #back_to_agility {
      position: absolute;
      left: 0;
      bottom: 36px;
   }
   
   #lets_get_going #sendbutton {
      background: url(images/send_it_our_way-trans.png) no-repeat;
      border: none;
      display: block;
      height: 63px;
      width: 383px;
      text-indent: -9999px;
   }
   
   #keep_it_reasonable_statement,
   #lets_get_your_project_going {
      display: block;
      margin: -20px auto 0 auto;
   }
   
   #keep_it_reasonable_statement {
      margin-top: -50px;
   }
   
   #lets_get_going #dont_like_forms {
      position: absolute;
      left: 560px;
      top: 140px;
      width: 300px;
   }
   
/* =FORM
   ------------------------------------------------------ */
   input[type="text"],
   textarea {
      border: 4px solid #000;
      background: #fff;
      display: block;
      font-size: 1.25em;
      padding: 4px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
   }
   
   textarea {
      width: 380px;
   }
   
   label {
      display: block;
      font-weight: bold;
   }
   
   ol.cf-ol li {
      margin-bottom: 10px;
   }
   
   p.linklove {
      display:none;
   }

/* =TEAM
   ------------------------------------------------------ */
   
   #personality_flatline,
   #personality_flatline img,
   #at_your_service_statement {
      clear: both;
      display: block;
      margin: 20px auto 40px auto;
   }
   
   #flatterline_team .social_media {
      display: block;
      font-size: 0.875em;
      padding-bottom: 40px;
   }
   
   #chris_chandler,
   #curtis_miller {
      float: left;
      margin-left: 110px;
      width: 300px;
      position: relative;
   }
   
   #chris_mug,
   #curtis_mug {
      position: absolute;
      top: 0;
      left: -100px;
   }

/* =BLOG
   ------------------------------------------------------ */
   .entry-content .left {
      float: left;
   }

   .entry-content .left img {
      margin: 0 1.5em 0 0;
   }

   .entry-content .left .caption {
      font-size: 0.75em;
      margin: 0 1.5em 0.5em 0;
      text-align: left;
      width: 160px;
   }

   #primaryContent {
      float: left;
      /*width: 460px;*/
      width: 575px;
   }
   
   #blog_info {
      margin-left: 720px;
   }
   
   #blog_info #flatter_line_secondary_logo {
      display: block;
      margin: -40px 0 0 -40px;
   }
   
   #blog_info #blog_recent_post_listing {
      margin: 20px 0;
   }
   
   #blog_info #blog_recent_post_listing li {
      padding: 5px 0;
   }
   
   div.hentry {
      margin: 20px 0;
   }
   
   .entry-title {
      font-size: 1.65em;
      line-height: 1em;
   }
   
   .hentry .post-info {
      color: #000;
      font-size: 0.75em;
      margin: 0 0 10px 0;
   }
   
   #primaryContent h1,
   #primaryContent h4,
   #primaryContent h5,
   #primaryContent h6 {
      margin: 20px 0;
   }
   
   .meta {
      border: 1px solid #666;
      padding: 0.5em;
   }

   .meta p {
      font-size: 0.75em;
   }

   .meta h3 {
      font-size: 1.1em;
      line-height: 1em;
   }
   
   .entry-content p { line-height: 1.25em; }

   .entry-content p,
   .entry-content ul,
   .entry-content ol,
   .entry-content pre,
   .entry-content dl {
      margin: 1.5em 0;
   }
   
   .entry-content blockquote {
      color: #333;
      font-size: 0.8em;
      margin: 1.5em;
   }

   .entry-content ol,
   .entry-content ul {
      list-style: square outside;
      padding-left: 1em;
   }
   
   .entry-content li {
      padding: 0.5em 0;
   }
   
   #respond h3,
   #comments {
      margin: 10px 0;
      font-size: 1.75em;
      line-height: 1em;
   }
   
   #commentlist,
   #commentlist li {
      margin: 20px 0;
   }
   
   #respond {
      padding-bottom: 40px;
   }

   .comment {
      border-bottom: 1px solid #999;
      margin-bottom:1em;
      padding-bottom: 1em;
   }

   .comment.byuser {
      border-bottom: 2px solid #FF0000;
   }

   .comment-author img {
      float: left;
      margin: 0 1em 1em 0;
   }

   .comment-meta {
      font-size: 0.75em;
      margin: 0.25em 0pt 0.5em;
   }

   .subscribe-to-comments label {
      display: inline;
   }