/*
Theme Name: The Viral Company
Theme URI: http://theviralcompany.com/
Version: 2.0
Description: The official theme for advertising agency, The Viral Company
Author: Niclas Bergström
Author URI: http://theviralcompany.com
*/

/* imports */
@import url("css/billy.css");
@import url("css/pushup.css");
@import url("css/tipsy.css");

/* general style */
* { margin: 0px; padding: 0px; outline: none; border: none; list-style: none; text-decoration: none; }
p { margin: 0 0 17px 0; }
blockquote { font-style: italic; }
div#content a, div#top_content a { color: #168fdc; }
   div#content a:hover, div#top_content a:hover { text-decoration: underline; }
img.alignleft { float: left; margin: 0 5px 0 0;}
ol { margin: 0 0 0 20px; width: 190px; float:left;}
  ol li { list-style: disc; margin: 0 0 0px 0; }

body { font: 13px/1.34em Arial, sans-serif; background: #fff; width: 100%; color: #222; }

div#wrapper { width: 940px; position: absolute; left: 50%; margin: 0 0 0 -470px; }

div#top { width: 100%; height: 170px; margin: 0 0 30px 0; }
  div#top a.logo { float: left; display: block; height: 146px; width: 170px; text-indent: -10000px; background: url('img/logo.png') no-repeat; margin: 24px 0 0 -3px; } 
  div#top ul { float: right; }
  div#top li { float: left; margin: 0 0 0 10px; }
    div#top li a { color: #000; font: bold 14pt Gotham, Helvetica, sans-serif;  text-transform: uppercase; padding: 70px 15px 75px 15px; display: block; }
      div#top li a:hover { color: #168fdc; }
    div#top li.current_page_item a { background: #168fdc url('img/fold.png') no-repeat bottom left; color: #fff; }
    
div#top_content { width: 940px; margin-top: 10px; float: left; }
  div#top_content div#clip { float: left; width: 940px; overflow: hidden; height: 387px; }
  div#top_content ul.scroller { width: 5640px; height: 340px; }
    div#top_content ul.scroller li { float: left; width: 940px; height: 340px; }
      div#top_content ul.scroller li img { float: left; margin: 0 10px 0 0; }
      div#top_content ul.scroller li div.post { float: right; width: 300px; height: 320px; overflow: hidden; }
      div#top_content ul.scroller li h2 { font: bold 16pt Gotham, Helvetica, sans-serif; text-transform: uppercase; padding: 0 0 10px 0; }
      div#top_content ul.scroller li.archive h3 { text-align: center; font: bold 40pt Gotham, Helvetica, sans-serif; padding-top: 150px;}
        div#top_content ul.scroller li.archive h3 a { color: #ccc; text-decoration: none; }
          div#top_content ul.scroller li.archive h3 a:hover { color: #168fdc; }
    div#top_content div.nav { overflow: hidden;  margin: -40px 0 0 0; position: absolute; right: 0;}
      div#top_content div.nav a { display: block; width: 45px; height: 45px; background: url('img/pil_small_l.png') no-repeat; float: left; text-indent: -100000px; cursor: pointer; }
        div#top_content div.nav a:hover { background: url('img/pil_small_l_hover.png') no-repeat; }
        div#top_content div.nav a + a { background: url('img/pil_small_r.png') no-repeat; }
          div#top_content div.nav a + a:hover { background: url('img/pil_small_r_hover.png') no-repeat; }

div#content { width: 940px; margin: 40px 0 0 0; overflow: auto; }
  div#content h1 { font: bold 14pt Gotham, Helvetica, sans-serif; text-transform: uppercase; color: #000; margin-bottom: 10px; }
    div#content h1.more { float: left; margin: 12px 0 0 0; }
  div#content ul li { float: left; margin: 0 20px 20px 0; }
    div#content ul li.last { margin: 0 0 20px 0; }
    div#content ul li a {  }
      div#content ul li a span.desc { display: none; }
      div#content ul li a:hover span.desc { display: block; width: 300px; height: 170px; background: rgba(22,143,220,.9); position: absolute; margin: -174px -304px 0 0 ; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5168FDC,endColorstr=#E5168FDC)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5168FDC,endColorstr=#E5168FDC); zoom: 1;}
        div#content ul li a span.desc span.title { font: 14pt Gotham, Helvetica, sans-serif; color: #fff; margin: 10px 10px 0 10px; display: block; text-transform: uppercase; }
        div#content ul li a span.desc span.cat { font: bold 14pt Gotham, Helvetica, sans-serif; color: #fff; margin: -14px 10px 10px 10px; display: block; text-transform: uppercase; }

div#content div.the_post { display: block; overflow: auto; }
  div#content div.the_post div.post_column_1 { margin-left: 300px; padding-left: 20px; border-left: 1px solid #ccc; margin-right: 25px; }
    div#content div.the_post div.post_column_1 + div.post_column_1 { margin: 0; padding: 0; border: none; } 

/* body#About div#content { margin-top: -27px; } */
body#About div#content h1 { margin-bottom: 13px; margin-top: -17px }
body#About div#content div.post_column_1 + br + div { border-left: 1px solid #ccc; margin-left: -20px; padding-left: 20px; }
  body#About div#content div.post_column_1 + br + div p { margin: 0; }
body#About div#content div.post_column_1 + br + div  + br + div { border: none; }
  body#About div#content ol { margin-top: -17px; }
    body#About div#content ol li { font-weight: bold; margin-bottom: 10px; }

div#content ul#more_cases { height: 170px; overflow: hidden; margin-bottom: 40px; }
  div#content ul#more_cases li { margin: 0 0 0 20px !important; }
  div#content ul#more_cases li.first { margin-left: 0 !important; }

div#content div.more_title {float: left; height: 45px; width: 940px;}
div#content div#morenav { float: left; margin: 0 10px 0 0; }

body#Clients div#content ul { float: left; margin: 5px 0 0 0; }
body#Clients div#content ul li { float: left; margin: 0; }

div.case {  }
  div.case p { /* width: 620px !important; */ }
/*  div.case div.clip { width: 940px; height: 438px; overflow: hidden; margin-bottom: 55px; }
    div.case div.clip ul { width: 3760px; height: 415px;}
*/

  div.case div.clip { width: 940px; height: 503px; overflow: hidden; margin-bottom: 55px; }
    div.case div.clip ul { width: 3760px; height: 480px;}

      div.case div.clip ul li { float: left; margin: 0 !important; width: 940px; }
    div.case div.title { position: absolute; z-index: 100; width: 295px; margin: 490px 0 0 0; }
      div.case div.title h1 { color: #000 !important; font-weight: normal !important; font-size: 20pt !important; margin: 5px 0 4px 0 !important; }
      div.case div.title h2 { margin: -12px 0 0 0 !important; }
    div.case div#singlenav { position: absolute; z-index: 100; right: 0; margin: 434px -4px 0 0;}
      div.case div.nav a {  display: block; width: 45px; height: 45px; background: url('img/pil_small_l.png') no-repeat; float: left; text-indent: -100000px; cursor: pointer; }
        div.case div.nav a:hover { background: url('img/pil_small_l_hover.png') no-repeat;}
        div.case div.nav a + a { background: url('img/pil_small_r.png') no-repeat; }
          div.case div.nav a + a:hover { background: url('img/pil_small_r_hover.png') no-repeat; }        
    div.case iframe { width: 940px; height: 415px; }
        
div.archive {  }
  div.archive div.post {  overflow: hidden; border-bottom: 1px solid #ccc ; margin: 0 0 30px 0; padding: 0 0 30px 0; }
    div.archive div.post div.image { float: left; margin: 0 20px 0 0; }
      div.archive div.post div.image div.meta { position: absolute; margin: 10px; background: rgba(0,0,0,.3); border-radius: 3px; color: #ccc; padding: 10px; }
    div.archive div.post h2 { font: bold 17pt Gotham, Helvetica, sans-serif; text-transform: uppercase; margin: 0 0 10px 0; }
    div.archive div.post div.postcontent { float: right; width: 325px; }
    
div.contact {  }
  body#Contact div.post_column_1 { margin-right: 2%; height: 60px; margin-bottom: 30px; }
  div.post_column_1 a:hover { color: #168fdc !important; }
  div.wpcf7 form { width: 428px; float: left; }
    div.wpcf7 form input { border: 1px solid #ccc; width: 428px; height: 20px; margin: 0 11px 15px 0; padding: 3px 5px; }
    div.wpcf7 form input.email {  margin: 0 0 15px 0; }
    div.wpcf7 form textarea { border: 1px solid #ccc; width: 428px; max-width: 928px; padding: 5px; height: 170px; max-height: 170px; margin: 0 0 0px 0; font: 11px/1.34em Arial, sans-serif; background: #fff; overflow: auto; }
/*     div.wpcf7 form input.submit {  background: #168fdc url('img/fold.png') no-repeat bottom left; color: #fff; width: 120px; border: none; padding-bottom: 15px; height: 60px; font: bold 15px Arial, sans-serif; float: right; margin: 0 0px 0 0; cursor: pointer;} */
/*        div.wpcf7 form input.submit { background: #1684dc; border-radius: 3px; width: 110px; font: bold 13px Arial, sans-serif; height: 25px; color: #fff; border: none; float: right; margin: 15px 0 0 0; cursor: pointer; } */
       div.wpcf7 form input.submit { background: #fff url('img/send.png') no-repeat; border: none; width: 106px; height: 32px; padding: 0 0 0px 0; font: bold 13px Arial, sans-serif; color: #222; float: right; margin: 10px 0 0 0; cursor: pointer; }
        div.wpcf7 form input.submit:hover { color: #168fdc; }
    
    div.wpcf7 div.wpcf7-response-output { text-align: center; padding: 5px 0; margin: -13px 0 0 0; width: 50%; }

div#footer { font: 9px/1.34em Arial, sans-serif; letter-spacing: 0.2em; height: 60px; padding: 20px 0 0 0; margin: 30px 0 0 0; border-top: 1px solid #ccc;  }
  div#footer div.info { float: left; }
    div#footer div.info img { margin-bottom: 8px; }
  div#footer ul { float: left; margin: 42px 0 0 40px; }
    div#footer li { float: left; margin-right: 10px; }
      div#footer li a { color: #000; font: bold 9px Gotham, Helvetica, sans-serif; text-transform: uppercase; }
        div#footer li a:hover, div#footer li.current_page_item a { color: #168fdc; }
  div#footer a.logo { float: right; }
  div#footer div.info a { color: #222; -webkit-transition: color 0.2s ease-in; -o-transition: color 0.2s ease-in; }
    div#footer div.info a:hover { color: #168fdc; }

/* custom selection colors */
::-moz-selection { color: #fff; color: rgba(255,255,255,.85); background: #168fdc; }
::selection { color: #fff; color: rgba(255,255,255,.85); background: #168fdc; }