/*   
Theme Name: Marketing with a Flair
Theme URI: http://marketingwithaflair.com
Description: Site styles for the Marketing with a Flair website.
Author: Jim Jeffers
Author URI: http://sumocreations.com
Version: 1.0
.
This stylesheet is to be used exclusively on http://marketingwithaflair.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;
        }
*/
/* COLORS
   Body Background Offwhite:    #fafafa
   Main Text Black:             #000
   Purple Headline:             #6d2d8b
   Body Text Gray:              #222
   Supporting Heading Gray:     #666
   Brackground Bar Purple:      #6d2d8b
   Footer Link Gray:            #4a4a4a
*/

@import "reset.css";

/*  =BODY
    ------------------------------------------------------ */

    body {
        background: #fafafa url(../images/bg_smoke.jpg) no-repeat top left;
        color: #222;
        font: normal normal normal 1em/1.5em Arial, sans-serif;
    }

    a#skip_navigation {
        color: #fafafa;
        position: absolute;
        top: 0;
        right: 0;
    }

    li a {display:inline-block;}
    li a {display:block;}

/*  =SITE_TITLE
    ------------------------------------------------------ */
    h1#site_title {
        display: block;
        left: 50px;
        position: absolute;
        top: 74px;
    }

    h1#site_title a,
    h1#site_title a span {
        color: #fafafa;
        display: block;
        font-size: 0.5em;
        padding: 50px;
        height: 45px;
        position: relative;
        width: 157px;
    }

    h1#site_title a span {
        background: url(../images/mwaf_logo.png) no-repeat;
        left: 0;
        position: absolute;
        top: 0;
    }

/*  =PRIMARY_CONTENT
    ------------------------------------------------------ */
    div#primary_content {
        background: url(../images/bg_formulas.jpg) no-repeat 395px bottom;
        padding: 320px 590px 0 50px;
        min-height: 290px;
        height: auto !important;
        height: 290px;
        width: 295px;
    }
    
    .internal div#primary_content {
      background: none;
      padding: 280px 290px 0 50px;
      width: 595px;
      min-height: 440px;
      height: 440px;
    }
    
    .portfolio div#primary_content {
      padding: 242px 290px 0 210px;
      width: 472px;
      min-height: 600px;
      height: 600px;
    }
    
    div#primary_content a,
    div#primary_content h2 {
        color: #6d2d8b;
    }
    
    div#primary_content h3 {
       color: #000;
       font-size: 1em;
       line-height: 1.2em;
       margin: 6px 0;
    } 
    
    div#primary_content h2 {
        color: #7d4199;
        font-weight: bold;
        margin-bottom: 10px;
    }

    div#primary_content p,
    div#primary_content ul,
    div#primary_content ol {
        font-size: 0.875em;
        line-height: 1.35em;
        padding: 10px 0;
    }
    
    div#primary_content ul,
    div#primary_content ol {
         margin: 10px 30px;
    }
    
    div#primary_content ul {
       list-style-type: square;
    }
    
    div#primary_content li {
       padding: 2px 0;
    }
    
    div#primary_content ul ul,
    div#primary_content ol ol {
       padding-top: 3px;
       list-style-type: disc;
    }
    
    div#primary_content ol,
    div#primary_content ol ol {
       list-style-type: decimal;
    }

/*  =PRIMARY_NAVIGATION
    ------------------------------------------------------ */
    ul#primary_navigation {
        border-top: 1px solid #d0d0d0;
        left: 700px;
        position: absolute;
        top: 210px;
        width: 220px;
    }
    
    .internal ul#primary_navigation {
        top: 280px;
    }

    ul#primary_navigation li a {
        color: #000;
        font-size: 1.2em;
        font-weight: bold;
        display: block;
        padding: 6px 0;
        text-decoration: none;
        border-bottom: 1px solid #d0d0d0;
    }
    
    ul#primary_navigation li.current a,
    ul#primary_navigation li a:hover {
        color: #6d2d8b ;
    }
    
    ul#primary_navigation li.current a {
       border-bottom: none;
    }

    ul#primary_navigation li a span {
        color: #666 !important;
        display: block;
        font-size: 0.625em;
        font-weight: normal;
        line-height: 1em;
        padding-top: 3px;
    }
    
    ul#primary_navigation li ul.internal_page_nav li a {
       border-bottom: none;
       font-size: 0.75em;
       line-height: 1em;
       padding: 3px 0;
       font-weight: normal;
    }
    
    ul#primary_navigation li ul.internal_page_nav li ul.children_list {
       font-size: 0.8em;
       margin-left:10px;
    }
    
    ul#primary_navigation li ul.internal_page_nav li ul.children_list li {
      padding: 1px 0;
    }
    
    ul#primary_navigation li ul.internal_page_nav li ul.children_list a {
       color: #444;
    }
    
    ul#primary_navigation li ul.internal_page_nav li.current a {
       color: #000;
       font-weight: bold;
    }
    
    ul#primary_navigation li ul.internal_page_nav {
       border-bottom: 1px solid #d0d0d0;
       padding: 8px 0 6px 0;
    }

/*  =SITEMAP
    ------------------------------------------------------ */
    div#inline_sitemap {
        background: #000;
        border-top: 3px solid #7d4199;
        overflow: auto;
        padding: 15px 0 30px 50px;
    }
    
    div#inline_sitemap h3 {
        border-top: 1px solid #4a4a4a;
        border-bottom: 1px solid #4a4a4a;
        color: #4a4a4a;
        font-size: 0.9em;
        margin-bottom: 15px;
    }
    
    div.sitemap_section {
        float: left;
        margin-right: 30px;
        width: 150px;
    }
    
    div#inline_sitemap ul li a {
        border-bottom: 1px solid #4a4a4a;
        color: #4a4a4a;
        display: block;
        font-size: 0.75em;
        line-height: 1em;
        padding: 4px 0 2px 0;
        text-decoration: none;
    }
    
    div#inline_sitemap ul li a:hover {
        border-bottom: 1px solid #777;
        color: #777;
    }
    
    div#inline_sitemap ul li.current a {
      color: #fff;
      font-weight: bold;
    }

/*  =SECONDARY_NAVIGATION
    ------------------------------------------------------ */
    ul#secondary_navigation,
    div#contact_information {
        padding-right: 43px;
        position: absolute;
        left: 680px;
        top: 50px;
        text-align: right;
        width: 200px;
    }

    ul#secondary_navigation li {
        border-right: 1px solid #000;
        display: inline;
        font-size: 0.75em;
        line-height: 1em;
        padding: 0 8px 0 5px;
    }

    ul#secondary_navigation li a {
        color: #000;
        display: inline;
        text-decoration: none;
    }
    
    ul#secondary_navigation li a:hover {
        text-decoration: underline;
    }
    
    ul#secondary_navigation li.store {
        border-right: none;
        right: 0;
        top: 0;
    }
    
    ul#secondary_navigation li.store,
    ul#secondary_navigation li.store a,
    ul#secondary_navigation li.store a span {
        display: block;
        position: absolute;
        height: 30px;
        width: 35px;
    }
    
    ul#secondary_navigation li.store a,
    ul#secondary_navigation li.store a span {
        top: 0;
        right: 0;
    }
    
    ul#secondary_navigation li.store a span {
        background: url(../images/icon_cart.jpg) no-repeat;
    }
    
    .accordion_toggle {
       background: #f0f0f0;
       cursor: pointer;
       display: block;
       padding: 5px 10px;
       margin: 0 0 1px 0 !important;
    }
    
    .accordion_content {
       padding: 10px;
       margin: 4px 0;
    }
    
    .accordion_active {
       background: #7D4199;
       color: #fff;
    }
    
/*  =CONTACT_INFORMATION
    ------------------------------------------------------ */
    div#contact_information {
        font-size: 0.75em;
        top: 100px;
    }
    
    div#contact_information a {
        color: #000;
        text-decoration: none;
    }
    
    div#contact_information a:hover {
        text-decoration: underline;
    }
    
    div#contact_information * {
        display: none;
    }
    
    div#contact_information div.tel,
    div#contact_information a.email {
        display: block !important;
        position: absolute;
        right: 0;
        top: 30px;
    }
    
    div#contact_information div.tollfree {
       top: 15px;
    }
    
    div#contact_information a.email {
       top: 0px;
    }
    

/*  =COPYRIGHT
    ------------------------------------------------------ */
    div#copyright {
        background: #7d4199;
        color: #fff;
        font-size: 0.75em;
        font-weight: bold;
        text-align: center;
    }
    
/* =BLOG
   ------------------------------------------------------ */
   div.meta {
      color: #666;
      font-size: 0.75em;
      line-height: 1.25em;
   }
   
   textarea#comment {
      width: 500px;
   }

/* =PORTFOLIO
   ------------------------------------------------------ */
   div#project_description {
      left: 50px;
      position: absolute;
      top: 340px;
      width: 150px;
      font-size: 0.875em;
      line-height: 1.15em;
   }
   
   div#project_description a.more_link {
      background: #d1c2df;
      color: #fff;
      display: inline;
      font-size: 0.675em;
      margin: 10px 0;
      padding: 3px 6px;
      text-transform: uppercase;
      text-decoration: none;
   }
   
   div#project_list ul,
   div#project_list ul li {
      display: block;
      float: left;
      margin: 0;
      padding: 10px 0;
      width: 472px;
   }
   
   div#project_list ul li {
      list-style: none;
      padding: 0;
      width: auto;
   }
   
   div#project_list ul {
      border-bottom: 1px solid #ccc;
      display: block;
      padding: 10px 0;
      float: left;
   }
   
   div#project_list ul.sections_list li {
      margin-right: 40px;
   }
   
   div#project_list ul.sections_list li a {
      color: #000;
      font-weight: bold;
      text-decoration: none;
   }
   
   div#project_list ul.siblings_list {
      margin-bottom: 10px;
   }
   
   div#project_list ul.siblings_list li,
   div#project_list ul.siblings_list li img {
      display: block;
   }
   
   div#project_list ul.siblings_list li {
      padding: 0 6px 0 0;
   }
   
/* =FORM
   ------------------------------------------------------ */
   ul.form,
   ul.form li {
      display: block;
      list-style: none;
      padding: 0 0 5px 0 !important;
      margin: 0 !important;
   }
   
   ul.form li label {
      display: block;
      font-weight: bold;
      font-size: 0.875em;
      padding: 2px 0;
   }
   
   ul.form li input[type="text"],
   ul.form li textarea {
      background: #fff;
      border: 1px solid #ccc;
      display: block;
      padding: 3px;
   }
   
   .fieldWithErrors input {
      border: 1px solid #c00 !important;
   }
   
   .fieldWithErrors input,
   .fieldWithErrors label {
      color: #c00 !important;
   }
   
   .errorExplanation h2 {
      color: #c00 !important;
      font-size: 1.1em;
   }
   
   .errorExplanation {
      color: #c33;
      font-size: 0.875em;
   }
   
   .errorExplanation ul li {
      color: #999;
      list-style: decimal outside;
      margin-left: 20px;     
   }
   
   #order_same_as_billing {
      position: absolute;
      left: 0;
      top: 0;
   }
   
   li#same_toggle {
      position: relative;
      padding-left: 20px !important;
   }
   
   input.short {
     width: 60px;
   }
     
   input.medium {
      width: 180px;
   }
   
   input.long {
      width: 240px;
   }
   
   fieldset {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
   }
   
   #payment_information {
      position: relative;
   }
   
   #godaddy_verification {
      position: absolute;
      top: 0;
      right: 0;
   }
   
   #flash_error {
      background: #900;
      color: #fff;
      margin: 10px 0;
      padding: 10px;
   }

/* =BLOG
   ------------------------------------------------------ */
   .sociable ul li a {
      display: inline !important;
   }
   
   #feed_icon {
      display: block;
      height: 12px;
      left: 910px;
      overflow: hidden;
      position: absolute;
      top: 155px;
      width: 12px;
   }
   
   #feed_icon span {
      background: url(../images/38.png) no-repeat;
      display: block;
      height: 12px;
      left: 0;
      position: absolute;
      top: 0;
      width: 12px;
   }