/*

The styles in this stylesheet only apply to resolutions 768px and up



CALCULATING DIMENSIONS:

----------------------

The layout is fluid. The sote wrapper (.col-full) has a fixed pixel max-width.

All subsequent dimensions are calculated based on that fixed pixel width, using the formula: target / context = result

Credit - http://www.alistapart.com/articles/fluidgrids/



-----

INDEX

-----



1. General & Typography

2. Navigation

-2.1 Top navigation

-2.2 Main navigation dropdown menus

3. Header

4. Containers & Columns

5. Content

-5.1 Features

-5.2 Content Banner

-5.3 Featured Category

-5.4 Archive Templates

-5.5 Single page

-5.6 Author7

-5.6 Misc

6. Footer

-6.1 Footer nav

-6.2 Footer search

-6.3 Footer widgets

*/

body {

 /* padding: 0 20px;*/

}

@media only screen and (min-width: 480px) {

  /* iPhone landscape & up */

  #recent .post, #single-post #related .post {

    float: left;

    margin-right: 5%;

    /* 40 / 800 = 0.05 */

  

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  #recent .post:nth-child(3n + 3),

  #single-post #related .post:nth-child(3n + 3),

  #recent .post .last,

  #single-post #related .post .last {

    margin-right: 0;

  }

}

@media only screen and (min-width: 900px) {

  .slide-container.no-pagi {

    padding: 0;

  }

  .slide-container .flex-direction-nav .prev, .slide-container .flex-direction-nav .next {

    bottom: 65px;

  }

  .slide-container .flex-direction-nav .prev {

    left: -33px;

  }

  .slide-container .flex-direction-nav .next {

    right: -33px;

  }

}

@media only screen and (min-width: 768px) {

  /* iPad portrait & up */

  /* 1. GENERAL & TYPOGRAPHY */

  h1 {

    font-size: 1.6em;

  }

  h2 {

    font-size: 1.6em;

  }

  h3 {

    font-size: 1.4em;

  }

  h4 {

    font-size: 1.2em;

  }

  h5 {

    font-size: 1em;

  }

  h6 {

    font-size: 0.8em;

  }

  /* 2. NAVIGATION */

  /* 2.1 Top navigation */

  #top {

    background: #000;

    margin: 0 -20px;

    z-index: 9999;

    position: relative;

  }

  #top #top-nav {

    display: block;

  }

  #top .nav a {

    color: #ddd;

    padding: 8px 10px;

    line-height: 18px;

    text-decoration: none;

    text-shadow: none;

  }

  #top .nav a:hover {

    background: #222;

  }

  #top .nav li {

    position: relative;

  }

  #top .nav li.current_page_item a,

  #top .nav li.current_page_parent a,

  #top .nav li.current-menu-ancestor a,

  #top .nav li.current-cat a,

  #top .nav li.li.current-menu-item a,

  #top .nav li.sfHover a {

    background: #222;

  }

  #top .nav li ul {

    background: #222;

    margin: 0;

    padding: 0px;

    width: 180px;

    border: none;

    z-index: 999;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);

    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);

    -o-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);

    -webkit-border-bottom-left-radius: 4px;

    -webkit-border-bottom-right-radius: 4px;

    -moz-border-radius-bottomleft: 4px;

    -moz-border-radius-bottomright: 4px;

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px;

    position: absolute;

  }

  #top .nav li ul:last-child a {

    -webkit-border-bottom-left-radius: 4px;

    -webkit-border-bottom-right-radius: 4px;

    -moz-border-radius-bottomleft: 4px;

    -moz-border-radius-bottomright: 4px;

    border-bottom-left-radius: 4px;

    border-bottom-right-radius: 4px;

  }

  #top .nav li ul li a {

    padding: 8px 10px;

    width: 160px;

    color: #ddd;

    background: none;

    font-size: 0.9em;

  }

  #top .nav li ul li a:hover {

    background: black;

  }

  #top .nav li ul li ul {

    margin: -34px 0 0 180px;

  }

  /* 2.2 Main navigation dropdown menus */

  #navigation {

/*    margin-left: -20px;

    margin-right: -20px;*/

  }

  #navigation .col-full {

    position: relative;

  }

  #navigation .nav li:hover ul,

  #navigation .nav li.sfhover ul,

  #navigation .nav li li:hover ul,

  #navigation .nav li li.sfhover ul,

  #navigation .nav li li li:hover ul,

  #navigation .nav li li li.sfhover ul,

  #navigation .nav li li li li:hover ul,

  #navigation .nav li li li li.sfhover ul {

    left: 0;

  }

  #navigation .nav li ul .sf-sub-indicator {

    top: 52%;

  }

  #navigation .nav li ul ul .sf-sub-indicator {

    background: url(../images/arrow-superfish-right.png) no-repeat;

    top: 38%;

  }

  #navigation .nav li ul {

    width: 100%;

    margin: 0 0 0 -1px;

    padding: 10px 15px;

    background: #fff;

    border-top: 1px solid #d0d0d0;

    border-bottom: 1px solid #e9e9e9;

    z-index: 999;

  }

  #navigation .nav li ul li {

    position: relative;

    float: none;

    display: inline;

    line-height: 30px;

  }

  #navigation .nav li ul li a {

    display: inline;

    padding: 10px 10px 0px;

    color: #787878;

    font-weight: normal;

    background: none;

    border: none;

  }

  #navigation .nav li ul li a:hover {

    text-decoration: underline;

    background: none;

    color: #222222;

  }

  #navigation .nav li ul li a.sf-with-ul {

    padding-right: 0;

  }

  #navigation .nav li ul li.current_page_item a,

  #navigation .nav li ul li.current_page_parent a,

  #navigation .nav li ul li.current-menu-ancestor a,

  #navigation .nav li ul li.current-cat a,

  #navigation .nav li ul li.li.current-menu-item a,

  #navigation .nav li ul li.sfHover a {

    background: none;

  }

  #navigation .nav li ul ul {

    margin: 10px 0 0 0;

    padding: 0;

    width: 180px;

    font-size: 0.9em;

    background: #fff;

    border-top: 1px solid #d0d0d0;

    border-bottom: 1px solid #d0d0d0;

  }

  #navigation .nav li ul ul li {

    display: block;

    line-height: 18px;

    border-bottom: 1px solid #e9e9e9;

  }

  #navigation .nav li ul ul li a {

    display: block;

    padding: 7px 10px;

  }

  #navigation .nav li ul ul li:last-child {

    border-bottom: none;

  }

  #navigation .nav li ul ul li ul {

    margin: -29px 0 0 180px;

  }

  /* 3. HEADER */

  #header {

    /* 240 / 800 =  */

  

  }

  #header #logo {

    float: left;

    margin: 5px 0 0;

  }

  #header hgroup {

    float: left;

    margin: 0;

  }

  #header #header-search, #header #topad {

    float: right;

  }

  #header #header-search {

    width: 30%;

	margin-top:30px;

  }

  .layout-full #main, .col-full {

    max-width: 915px;

    margin: 0 auto;

  }

  .width-960 .layout-full #main, .width-960 .col-full {

    max-width: 960px;

  }

  /* 4. CONTAINERS & LAYOUTS */

  .layout-right-content #main, .layout-right-content #single-post .entry {

    float: right;

  }

  .layout-right-content #sidebar {

    float: left;

  }

  .layout-full #single-post .entry {

    width: 100%;

  }

  .col-left {

    float: left;

  }

  .col-right {

    float: right;

  }

  #main, #single-post .excerpt, #single-post .entry {

    width: 65%;

    /* 520 / 800 = 0.65  */

  }

  #main.fullwidth {

    width: 100%;

  }

  #sidebar, #single-post header.with-excerpt .post-meta {

    margin-top: 0;

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  #commentform {

    float: left;

    width: 65%;

  }

  #comment-reply .reply-message {

    float: right;

    width: 30%;

  }

  /* 5. CONTENT */

  /* 5.1 Features */

  #featured article.not-video {

    background-color: #000;

    background-color: rgba(0, 0, 0, 0.7);

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

  }

  #featured article.not-video header .featured-meta {

    margin: 3px 0 5px;

  }

  #featured article.not-video header .featured-meta li {

    font-size: 1em;

  }

  /* 5.2 Content Banner */

  #content-subscribe .banner p {

    float: left;

    margin-bottom: 0;

    width: 65%;

    /* 520 / 800 = 0.65  */

  

  }

  #content-subscribe .banner .button-wrap {

    float: right;

    margin-bottom: 0;

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  /* 5.3 Featured Category */

  #featured-category #featured-category-posts {

    float: left;

    width: 65%;

    /* 520 / 800 = 0.65  */

  

  }

  #featured-category #featured-category-sidebar {

    float: right;

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  /* 5.4 Archive templates */

  body.archive .post.first-post,

  body.search .post.first-post,

  body.page-template-template-blog-php .post.first-post,

  body.archive .page.first-post,

  body.search .page.first-post,

  body.page-template-template-blog-php .page.first-post {

    width: 100%;

  }

  body.archive .post.first-post header,

  body.search .post.first-post header,

  body.page-template-template-blog-php .post.first-post header,

  body.archive .page.first-post header,

  body.search .page.first-post header,

  body.page-template-template-blog-php .page.first-post header {

    background-color: #000;

    background-color: rgba(0, 0, 0, 0.7);

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

  }

  body.archive .post.first-post header.no-image,

  body.search .post.first-post header.no-image,

  body.page-template-template-blog-php .post.first-post header.no-image,

  body.archive .page.first-post header.no-image,

  body.search .page.first-post header.no-image,

  body.page-template-template-blog-php .page.first-post header.no-image {

    background: #000;

    position: relative;

  }

  /* 5.5 Single page */

  #single-post article.post header .excerpt {

    margin: 0.5em 0 1em;

  }

  #single-post header.with-excerpt .post-meta {

    float: right;

    background: none;

    margin: 0;

    padding: 0;

    line-height: 2em!important;

  }

  #single-post header.with-excerpt .post-meta ul {

    padding: 0;

  }

  #single-post header.with-excerpt .post-meta li {

    display: block;

  }

  #single-post header.with-excerpt .post-meta li a {

    color: #666666;

  }

  #single-post header.with-excerpt .post-meta li.post-author, #single-post header.with-excerpt .post-meta li.post-author a {

    font-size: 1.3em;

    color: #333333;

  }

  #single-post #connect .col-left, #single-post #connect .col-right {

    width: 48%;

  }

  #single-post #connect .col-left {

    float: left;

  }

  #single-post #connect .col-right {

    float: right;

  }

  #single-post #connect .email {

    width: 125px;

  }

  #single-post #connect .related-posts {

    margin: 0;

  }

  /* 5.6 Authors */

  #author-page-heading .post-author-box.with-twitter {

    float: left;

    width: 65%;

    /* 520 / 800 = 0.65  */

  

  }

  #author-page-heading #author-twitter {

    float: right;

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  /* 5.7 Misc */

  .layout-full .entry img {

    max-width: 100%;

  }

  .widget #connect .col-left {

    float: left;

  }

  .widget #connect .col-right {

    float: right;

  }

  .widget #connect .newsletter-form .email {

    width: 100px!important;

  }

  .widget h3 {

    font-size: 1.3em;

  }

  .entry img {

    max-width: 100%;

  }

  .entry #sitemap-pages,

  .entry #sitemap-categories,

  .entry #archive-categories,

  .entry #archive-dates {

    float: left;

    width: 50%;

  }

  /* 6. FOOTER */

  /* 6.1 Footer Nav */

  #footer-navigation .nav li {

    display: inline;

    padding: 0;

  }

  /* 6.2 Footer Search */

  #footer-search .rss {

    float: left;

  }

  #footer-search .search_main {

    float: right;

    width: 33%;

  }

  /* 6.3 Footer Widgets */

  #footer-widgets .block {

    margin-right: 5%;

    /* 40 / 800 = 0.05 */

  

    float: left;

  }

  #footer-widgets.col-1 .block {

    width: 100%;

    float: none;

  }

  #footer-widgets.col-1 .footer-widget-1 {

    margin-right: 0;

  }

  #footer-widgets.col-2 .block {

    width: 47.5%;

    /* 380 / 800 = 0.475 */

  

  }

  #footer-widgets.col-2 .footer-widget-2 {

    margin-right: 0;

  }

  #footer-widgets.col-3 .block {

    width: 30%;

    /* 240 / 800 = 0.3 */

  

  }

  #footer-widgets.col-3 .footer-widget-3 {

    margin-right: 0;

  }

  #footer-widgets.col-4 .block {

    width: 21.25%;

    /* 170 / 800 = 0.2125 */

  

  }

  #footer-widgets.col-4 .footer-widget-4 {

    margin-right: 0;

  }