layout.css

/*
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. LAYOUT - Float & set width
2. GLOBAL DROPDOWN STYLES ( Purely for the dropdown layout; Only edit the width of the dropdowns )
3. TOP NAVIGATION (Add top navigation presentational styles here)
4. HEADER
5. HOMEPAGE COMPONENTS
6. SLIDER
7. FULL WIDTH SINGLE PAGE
8. WIDGETS
9. COMMENTS
10. FOOTER WIDGETS
11. PAGE TEMPLATES
12. MISC
13. IE FIXES
14. ADDITIONAL MEDIA QUERIES

/*----------------------*/
/* Variables */
/**
 * Functions
 */
/**
 * Mixins
 */
/**
 * Animations
 */
@-webkit-keyframes spin-360 {
  from {
    -webkit-transform: rotate(0);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(0);
    /* FF3.5+ */
  
    -ms-transform: rotate(0);
    /* IE9 */
  
    -o-transform: rotate(0);
    /* Opera 10.5 */
    transform: rotate(0);
    zoom: 1;
  }
  50% {
    -webkit-transform: rotate(180deg);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(180deg);
    /* FF3.5+ */
  
    -ms-transform: rotate(180deg);
    /* IE9 */
  
    -o-transform: rotate(180deg);
    /* Opera 10.5 */
    transform: rotate(180deg);
    zoom: 1;
  }
  to {
    -webkit-transform: rotate(0);
    /* Saf3.1+, Chrome */
  
    -moz-transform: rotate(0);
    /* FF3.5+ */
  
    -ms-transform: rotate(0);
    /* IE9 */
  
    -o-transform: rotate(0);
    /* Opera 10.5 */
    transform: rotate(0);
    zoom: 1;
  }
}
/*----------------------*/
@media only screen and (min-width: 1024px) {
  /* 	1. LAYOUT - Float & set width */
  #main.fullwidth,
  .layout-full #main,
  .col-full {
    max-width: 75.998em;
    margin: 0 auto;
    width: 100%;
  }
  #main {
    width: 62%;
  }
  #sidebar {
    margin-top: 0;
    width: 34%;
  }
  .layout-full #main {
    width: 100%;
  }
  .col-left {
    float: left;
  }
  .col-right {
    float: right;
  }
  .layout-full .entry img {
    max-width: 100%;
  }
  .layout-right-content #main {
    float: right;
  }
  .layout-right-content #sidebar {
    float: left;
  }
}
@media only screen and (min-width: 768px) {
  /* 2. GLOBAL DROPDOWN STYLES ( Purely for the dropdown layout; Only edit the width of the dropdowns ) */
  ul.nav {
    position: relative;
    margin-bottom: 0;
    text-align: center;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  ul.nav li {
    position: relative;
    display: inline-block;
    zoom: 1;
    list-style: none;
  }
  ul.nav li a {
    display: block;
    padding: 1.3em 1em;
    font-size: 1.2em;
    line-height: 1;
    font-weight: bold;
  }
  ul.nav li.parent > a:after {
    font-family: 'FontAwesome';
    display: inline-block;
    font-size: 100%;
    margin-left: .618em;
    font-weight: normal;
    line-height: 1em;
    width: 1em;
    text-align: right;
    content: '\f107';
    position: relative;
    top: -1px;
    margin-left: 2px;
  }
  ul.nav ul {
    min-width: 11.089em;
    margin: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
  }
  ul.nav ul li {
    float: none;
  }
  ul.nav ul li a {
    width: 100%;
    font-size: .9em;
    display: inline-block;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
  
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
  
    box-sizing: border-box;
    /* Opera/IE 8+ */
  
  }
  ul.nav ul li.parent > a:after {
    content: '\f105';
  }
  ul.nav ul ul {
    left: 100%;
    top: 0;
  }
  ul.nav li:hover > ul {
    visibility: visible;
  }
  /* 3. TOP NAVIGATION (Add top navigation presentational styles here) */
  #top #top-nav {
    display: block;
  }
  #top ul.nav {
    font-size: .857em;
    /* Level 2 */
  
  }
  #top ul.nav > li a {
    color: #fff;
  }
  #top ul.nav > li:hover {
    background: rgba(0, 0, 0, 0.7);
  }
  #top ul.nav > li:hover a {
    text-decoration: none;
  }
  #top ul.nav ul {
    background: #000;
    background: rgba(0, 0, 0, 0.85);
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #top ul.nav ul li {
    display: block;
  }
  #top ul.nav ul li a:hover {
    background: rgba(0, 0, 0, 0.7);
  }
  #top ul.nav ul li:first-child a {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #top ul.nav ul li:last-child a {
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #top ul.nav ul ul {
    -webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
  }
  /* 4. HEADER */
  #header hgroup h1,
  #header hgroup h2,
  #header hgroup h3 {
    float: none;
  }
  #header ul.rss {
    margin-right: 0;
    padding-right: 0;
  }
  #header ul.rss li {
    border-right: 0;
  }
  #header p {
    font-size: 3.631em;
    line-height: 1.25;
  }
  /* 	5. HOMEPAGE COMPONENTS */
  span.heading,
  #respond h3 {
    font-size: 1em;
  }
  #content.home-widgets {
    /* Dojo Tweets widget on homepage */
  
  }
  #content.home-widgets .widget_woo_component h2.widget-title {
    font-size: 2.618em;
  }
  #content.home-widgets .widget_woodojo_tweets ul li {
    float: left;
    width: 29.8%;
    margin-right: 5.3%;
  }
  #content.home-widgets .widget_woodojo_tweets ul li:nth-child(3n+3) {
    margin-right: 0;
  }
  .widget_woothemes_features {
    padding-bottom: 2.618em!important;
  }
  .widget_woothemes_features .feature {
    float: left;
    width: 21%;
    margin-right: 5.3%;
  }
  .widget_woothemes_features .feature.last {
    margin-right: 0;
  }
  .widget_woothemes_testimonials .quote {
    float: left;
    width: 21%;
    margin-right: 5.3%;
  }
  .widget_woothemes_testimonials .quote:nth-child(5n+5) {
    clear: both;
  }
  .widget_woothemes_testimonials .quote:nth-child(4n+4) {
    margin-right: 0;
  }
  #blog-posts .post header h1 {
    font-size: 2.618em;
  }
  #posts-timeline {
    position: relative;
  }
  #posts-timeline:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    left: 0;
    top: 55%;
    background: #dedede;
  }
  #posts-timeline .col-full {
    position: relative;
    min-height: 400px;
  }
  #posts-timeline .timeline-post {
    position: absolute;
    width: 25%;
    margin: 0;
  }
  #posts-timeline .timeline-post:hover {
    top: auto;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    margin-bottom: .857em;
  }
  #posts-timeline .timeline-post:nth-child(1n) {
    left: 0;
    bottom: 39%;
  }
  #posts-timeline .timeline-post:nth-child(2n) {
    left: 35%;
    top: 70%;
    bottom: auto;
  }
  #posts-timeline .timeline-post:nth-child(2n):before {
    border-color: transparent transparent #e5e5e5 transparent;
    bottom: auto;
    top: -30px;
  }
  #posts-timeline .timeline-post:nth-child(2n):hover {
    margin-top: .857em;
  }
  #posts-timeline .timeline-post:nth-child(2n):hover:before {
    border-color: transparent transparent #cccccc transparent;
  }
  #posts-timeline .timeline-post:nth-child(2n):after {
    bottom: auto;
    top: -28px;
  }
  #posts-timeline .timeline-post:nth-child(3n) {
    left: auto;
    right: 0;
    top: auto;
    bottom: 39%;
  }
  .gecko #posts-timeline:before,
  .ie #posts-timeline:before {
    top: 61%;
  }
  #blog-posts span.heading {
    margin-bottom: 2.244em;
  }
  #blog-posts .layout-full span.heading {
    margin-bottom: 0;
  }
  #blog-posts #sidebar {
    margin-top: 0;
  }
  #contact-area form textarea,
  #contact-area form input {
    padding: 1.387em 1.618em;
    font-size: 1.387em;
  }
  #contact-area form textarea {
    float: left;
    width: 60%;
  }
  #contact-area form .col-right {
    float: right;
    width: 35%;
  }
  /* 	6. SLIDER */
  .flex-control-nav {
    display: block;
  }
  .flexslider.no-frame .slide-content {
    margin: 0;
  }
  .flexslider.no-frame .layout-full .slide-content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1.618em 2.618em;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }
  .flexslider.no-frame .layout-full .slide-content h1 {
    color: #fff;
  }
  .flexslider.no-frame .layout-full .slide-media {
    width: 100%;
    float: none;
  }
  .flexslider.no-frame .layout-full .slide-media img {
    width: 100%;
  }
  .flexslider.no-frame .layout-full.has-video .slide-content {
    bottom: auto;
    top: 0;
  }
  .flexslider.no-frame .layout-left-content .slide-content,
  .flexslider.no-frame .layout-right-content .slide-content,
  .flexslider.no-frame .layout-left-content .slide-media,
  .flexslider.no-frame .layout-right-content .slide-media {
    width: 47%;
  }
  .flexslider.no-frame .layout-left-content:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  .flexslider.no-frame .layout-left-content .slide-content {
    float: left;
  }
  .flexslider.no-frame .layout-left-content .slide-media {
    float: right;
  }
  .flexslider.no-frame .layout-right-content:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  .flexslider.no-frame .layout-right-content .slide-content {
    float: right;
  }
  .flexslider.no-frame .layout-right-content .slide-media {
    float: left;
  }
  .flexslider.frame .flex-control-nav {
    display: block;
  }
  .flex-direction-nav a:before,
  .flex-direction-nav a:after {
    height: 90px;
    font-size: 3.631em!important;
  }
  .flex-direction-nav .flex-next:after {
    padding: 45px 0 0 8px;
  }
  .flex-direction-nav .flex-prev:before {
    padding: 45px 8px 0 0;
  }
  /* 7. FULL WIDTH SINGLE PAGE */
  #full-single-comments-area #post-author.fl,
  #full-single-comments-area #connect.fr {
    width: 38%;
  }
  #full-single-comments-area #connect .newsletter-form .email {
    width: 68%;
    margin: 0;
  }
  #full-single-comments-area #connect .newsletter-form .submit {
    width: auto;
    margin: 0;
  }
  #full-single-comments-area #comments li.comment .comment-container:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 25px solid #ffffff;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: auto;
    border-color: transparent #fff transparent transparent;
    left: -50px;
    margin: .236em 0 0;
  }
  #full-single-comments-area #comments li.comment.thread-even .comment-container:before {
    border-color: transparent transparent transparent #fff;
    right: -50px;
  }
  #full-single-comments-area #comments li.comment.thread-even .bypostauthor > .comment-container:before,
  #full-single-comments-area #comments li.comment.thread-even.bypostauthor > .comment-container:before {
    border-color: transparent transparent transparent #fbeeab;
  }
  #full-single-comments-area #comments li.comment.bypostauthor > .comment-container:before {
    border-color: transparent #fbeeab transparent transparent;
  }
  /* 8. WIDGETS */
  .widget h3 {
    text-align: center;
  }
  /* 9. COMMENTS */
  #comments > h3 {
    font-size: 2.618em;
  }
  #comments li.comment.thread-even .comment-container {
    margin: 0 120px 3.631em 0;
  }
  #comments li.comment .comment-container {
    margin: 0 0 3.631em 120px;
  }
  #comments li.comment .comment-avatar img {
    max-width: none;
  }
  #comments li.comment .reply {
    margin: 0;
    position: absolute;
    bottom: 2.618em;
    right: 2.618em;
  }
  /* 10. FOOTER WIDGETS */
  #footer-widgets .block {
    margin-right: 3.8%;
    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: 48%;
  }
  #footer-widgets .col-2 .footer-widget-2 {
    margin-right: 0;
  }
  #footer-widgets .col-3 .block {
    width: 30.75%;
  }
  #footer-widgets .col-3 .footer-widget-3 {
    margin-right: 0;
  }
  #footer-widgets .col-4 .block {
    width: 22.05%;
  }
  #footer-widgets .col-4 .footer-widget-4 {
    margin-right: 0;
  }
  /* 11. PAGE TEMPLATES */
  .page-template-template-contact-php .location-twitter .col-left {
    float: left;
  }
  .page-template-template-contact-php .location-twitter #office-location {
    width: 48%;
    margin: 0;
  }
  .page-template-template-contact-php .location-twitter .contact-social {
    float: right;
    width: 48%;
  }
  .page-template-template-contact-php .location-twitter .contact-social #twitter {
    margin: 0;
  }
  .page-template-template-archives-php #main #archive-categories,
  .page-template-template-sitemap-php #main #archive-categories,
  .page-template-template-archives-php #main #archive-dates,
  .page-template-template-sitemap-php #main #archive-dates,
  .page-template-template-archives-php #main #sitemap-pages,
  .page-template-template-sitemap-php #main #sitemap-pages,
  .page-template-template-archives-php #main #sitemap-categories,
  .page-template-template-sitemap-php #main #sitemap-categories {
    width: 48%!important;
  }
  /* 12. MISC */
  .entry img {
    max-width: 100%;
  }
  /* 	Post Author */
  #post-author.fl,
  #connect.fr {
    width: 33%;
  }
  #post-author.fl {
    float: left;
  }
  /* 	Subscribe & Connect */
  #connect .newsletter-form .email {
    width: 68%;
  }
  #connect.fr {
    float: right;
  }
  #connect.fr .newsletter-form .email,
  #connect.fr .newsletter-form .submit {
    width: 100%;
    margin: 0 0 .53em;
  }
  /* 	Related Posts */
  .sc-related-posts ul {
    list-style: none;
  }
  .sc-related-posts ul li {
    clear: none;
    float: left;
    width: 24%;
    margin-left: 0;
    margin-right: 1.3%;
    text-align: center;
  }
  .sc-related-posts ul li:last-child {
    margin-right: 0;
  }
  .sc-related-posts ul li .thumbnail {
    float: none;
    display: block;
  }
  .sc-related-posts ul li img {
    margin: 0 0 1em;
    height: auto;
    -webkit-border-radius: 300px;
    border-radius: 300px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: 0 0 0 3px #ffffff;
    -webkit-box-shadow: 0 0 0 3px #ffffff;
  }
  .sc-related-posts ul li span {
    font-weight: bold;
  }
  /* Pagination */
  #post-entries .fl {
    float: left;
  }
  #post-entries .fr {
    float: right;
  }
  #post-entries .nav-prev,
  #post-entries .nav-next {
    margin: 0;
  }
  /* 13. IE FIXES */
  .ie7 #top-nav {
    position: relative;
    z-index: 9999999;
  }
  .ie7 #header {
    position: relative;
    z-index: 9999999;
  }
  .ie8 #posts-timeline {
    min-height: none;
  }
  .ie8 #posts-timeline:before {
    display: none;
  }
  .ie8 #posts-timeline .timeline-post {
    position: relative;
    float: left;
    width: 26%;
    margin: 0 2.5%;
  }
  .ie8 #posts-timeline .timeline-post:hover {
    top: auto;
    margin-bottom: 0;
  }
}
/* 14. ADDITIONAL MEDIA QUERIES */
@media only screen and (min-width: 1600px) {
  #main.fullwidth,
  .layout-full #main,
  .col-full {
    max-width: 100em;
  }
}
@media only screen and (min-width: 1100px) {
  #footer p {
    margin: 0;
  }
  #footer .footer-section {
    float: left;
    margin: 0;
    line-height: 3;
  }
  #footer #copyright {
    width: 36%;
    text-align: right;
  }
  #footer #footer-logo {
    width: 28%;
    text-align: center;
  }
  #footer #credit {
    width: 36%;
  }
  #footer #credit img {
    vertical-align: middle;
  }
  #footer #credit span {
    display: none;
  }
}