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. Global dropdown styles
2. Top Navigation
3. Main navigation dropdown menus
 -3.1 General dropdown menus
4. Containers & Columns
5. Footer widgets
6. IE Fixes

*/
/*----------------------*/
/*----------------------*/
.col-full {
  padding: 0 2em;
}
@media only screen and (min-width: 768px) {
  /* 1. GLOBAL DROPDOWN STYLES (these are purely for the dropdown layout and you should only edit the width of the dropdowns) */
  ul.nav {
    position: relative;
    margin-bottom: 0;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  ul.nav li {
    position: relative;
    float: left;
    zoom: 1;
    list-style: none;
  }
  ul.nav li a {
    display: block;
    padding: .382em 1em;
  }
  ul.nav ul {
    width: 11.089em;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999 !important;
    margin: 0;
  }
  ul.nav ul li {
    float: none;
  }
  ul.nav ul li a {
    width: 100%;
    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 ul {
    left: 100%;
    top: 0;
  }
  ul.nav li:hover > ul {
    visibility: visible;
  }
  /* 2. TOP NAVIGATION (Add top navigation presentational styles here) */
  #top {
    background: #323232;
  }
  #top #top-nav {
      /*
    margin-left: -1.618em;
    */
    margin-left: 60.618em;
    display: block;
  }
  #top #top-nav li a {
    text-shadow: 0 0 0 #ffffff;
  }
  #top ul.nav {
    padding: 0;
    font-size: 1em;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  #top ul.nav > li a {
    color: #f0f0f0;
  }
  #top ul.nav > li a:hover {
      /*
    background: #111;
    */
    background: #323232;
  }
  #top ul.nav > li:hover {
      /*
    background: #111;
    */
    background: #323232;
  }
  #top ul.nav ul {
      /*
    background: #111;
    background: rgba(0, 0, 0, 0.9);
    */
    background: #323232;
  }
  /* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
  #navigation {
    display: block !important;
    width: 70%;
    float: right;
    clear: none;
  }
  #navigation ul.nav {
    float: right;
    background: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 0 #888888;
    -webkit-box-shadow: inset 0 0 0 0 #888888;
    padding: 0;
    /* LEVEL 2 */
  
    /* LEVEL 3 */
  
  }
  #navigation ul.nav > li a {
    /*
    color: #939393;
    text-shadow: 1px 1px 0 #ffffff;
    text-shadow: 1px 1px 0 #939393;
    */
    color: #292B2A;
  }
  #navigation ul.nav > li a:hover {
    color: ##D9D9D9;
    text-shadow: 1px 1px 0 #292B2A;
    text-decoration: none;
  }
  #navigation ul.nav li.current_page_item a,
  #navigation ul.nav li.current_page_parent a,
  #navigation ul.nav li.current-menu-ancestor a,
  #navigation ul.nav li.current-cat a,
  #navigation ul.nav li.li.current-menu-item a {
    background: #e2e2e2;
    background: rgba(0, 0, 0, 0.02);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: inset 0 0px 6px 1px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 0px 6px 1px rgba(0, 0, 0, 0.05);
  }
  #navigation ul.nav li.current_page_item ul li a,
  #navigation ul.nav li.current_page_parent ul li a,
  #navigation ul.nav li.current-menu-ancestor ul li a,
  #navigation ul.nav li.current-cat ul li a,
  #navigation ul.nav li.li.current-menu-item ul li a {
    background: #f6f6f6;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 0 #888888;
    -webkit-box-shadow: inset 0 0 0 0 #888888;
  }
  #navigation ul.nav li.parent > a {
    position: relative;
    padding-right: 1.8em;
  }
  #navigation ul.nav li.parent > a:after {
    content: "";
    display: block;
    border: .3em solid #666;
    border-color: #666 transparent transparent transparent;
    position: absolute;
    top: 43%;
    right: .8751em;
  }
  #navigation ul.nav ul {
    background: #f6f6f6;
    border: 1px solid #e3e3e3;
    top: 24px;
    left: -1px;
  }
  #navigation ul.nav ul li {
    border-bottom: 1px solid #e3e3e3;
  }
  #navigation ul.nav ul li.current_page_item,
  #navigation ul.nav ul li.current_page_parent,
  #navigation ul.nav ul li.current-menu-ancestor,
  #navigation ul.nav ul li.current-cat,
  #navigation ul.nav ul li.li.current-menu-item {
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  #navigation ul.nav ul li a {
    font-family: "Open Sans", sans-serif;
    /*
    font-size: .9em;
    */
    font-size: 1.6em;
  }
  #navigation ul.nav ul li:last-child {
    border-bottom: 0;
  }
  #navigation ul.nav ul ul {
    top: -1px;
    left: 100%;
  }
  h3.nav-toggle {
    display: none;
  }
  /* 4. CONTAINERS & COLUMNS */
  #header #logo {
    float: left;
  }
  #main.fullwidth,
  .layout-full #main,
  .col-full {
    max-width: 75.998em;
    margin: 0 auto;
    width: 100%;
    padding: 0;
  }
  #main.fullwidth,
  #main.col-left {
    padding: 20px 0;
  }
  #main {
    width: 62%;
    margin: 0;
  }
  .post .article-inner,
  .type-page .article-inner,
  .type-features .article-inner,
  .search-results .features .article-inner,
  .search-results .page .article-inner,
  .search-results .type-product .article-inner,
  .search-results .type-portfolio .article-inner {
      /*
    padding: 2.244em 2.244em 1.618em 9em;
    */
  }
  .post .post-meta .post-avatar,
  .type-page .post-meta .post-avatar,
  .type-features .post-meta .post-avatar,
  .search-results .features .post-meta .post-avatar,
  .search-results .page .post-meta .post-avatar,
  .search-results .type-product .post-meta .post-avatar,
  .search-results .type-portfolio .post-meta .post-avatar,
  .post .post-meta .post-comments,
  .type-page .post-meta .post-comments,
  .type-features .post-meta .post-comments,
  .search-results .features .post-meta .post-comments,
  .search-results .page .post-meta .post-comments,
  .search-results .type-product .post-meta .post-comments,
  .search-results .type-portfolio .post-meta .post-comments,
  .post .post-meta .post-date,
  .type-page .post-meta .post-date,
  .type-features .post-meta .post-date,
  .search-results .features .post-meta .post-date,
  .search-results .page .post-meta .post-date,
  .search-results .type-product .post-meta .post-date,
  .search-results .type-portfolio .post-meta .post-date {
    display: block;
  }
  .type-page .article-inner {
    padding-left: 2.244em;
  }
  #post-author {
    padding: 1.387em 1.387em 2.244em 9em;
  }
  #post-entries {
    padding: 0 2.244em 1.618em 9em;
    margin: 0;
  }
  .post-share-bar {
    clear: none;
    position: absolute;
    top: .326em;
    left: 15.379em;
    margin: 0;
  }
  .woo-pagination {
    margin: 0;
  }
  #comments h3 {
    padding: 1.387em 1.387em 0 6.5em;
  }
  #comments .comment .avatar {
    float: left;
    margin: 0 1em 1em 1.387em;
  }
  #comments .comment .comment-entry {
    float: right;
    width: 83%;
  }
  #comments .comment.depth-3 .comment-entry {
    width: 79%;
  }
  #comments .comment.depth-4 .comment-entry {
    width: 70%;
  }
  #comments ul.children {
    margin: 0 0 0 9em;
  }
  #respond {
    padding: 1.618em 1.618em 1.618em 9em;
  }
  #sidebar {
    margin-top: 0;
    width: 34%;
  }
  .entry img {
    max-width: 100%;
  }
  .layout-full .entry img {
    max-width: 100%;
  }
  .layout-right-content #main {
    float: right;
  }
  .layout-right-content #sidebar {
    float: left;
  }
  .layout-full #main {
    width: 100%;
  }
  .single-portfolio.layout-left-content #main article {
    float: right;
  }
  .single-portfolio.layout-left-content #main .single-portfolio-gallery {
    float: left;
  }
  .single-portfolio.layout-full #main article {
    display: none;
  }
  .single-portfolio.layout-full #main .single-portfolio-gallery {
    float: left;
    width: 100%;
  }
  .col-left {
    float: left;
    margin-left: 20px;
  }
  .col-right {
    float: right;
  }
  .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;
  }
  /* 4.1 Homepage */
  .section-title p span {
    display: inline;
  }
  .home #navigation ul.nav > li a {
    color: #939393;
  }
  .home #header {
    background: none;
  }
  .home #sub-feature #social {
    width: 15.379em;
    margin: 0 4.236em 2.244em 0;
  }
  .home #sub-feature #features {
    overflow: hidden;
  }
  .home #sub-feature #features ul li {
    /*
    width: 19.37%;
    margin: 0 5.63% 2.244em 0;
    */
    width: 22.37%;
    margin: 0 2.63% 2.244em 0;
  }
  .home #sub-feature #features ul li.clear {
    margin: 0;
    width: 0;
  }
  .home #home-widgets .block {
    float: left;
  }
  .home #home-widgets.columns-3 .block {
    margin-right: 3.63%;
    width: 30.91%;
  }
  .home #home-widgets.columns-3 .block.home-widget-3 {
    margin-right: 0;
  }
  .home #home-widgets.columns-2 .block {
    margin-right: 3.8%;
    width: 48.1%;
  }
  .home #home-widgets.columns-2 .block.home-widget-2 {
    margin-right: 0;
  }
  #home-widget-fullwidth .widget_woo_newsfromblog h3 span {
    max-width: 30%;
  }
  #home-widget-fullwidth .widget_woo_newsfromblog .section-blog .flex-viewport {
    margin-left: -2px;
  }
  #home-widget-fullwidth .widget_woo_newsfromblog .section-blog ul li article {
    width: 31.1%;
    margin-right: 2.93%;
    margin-left: 2px;
  }
  #home-widget-fullwidth .widget_woo_newsfromblog .section-blog ul li article:nth-child(3) {
    margin-right: 0;
  }
  .has-slider #navigation ul.nav > li a {
      /*
    color: #fff;
    text-shadow: 1px 1px 0 #000000;
    */
    color: #292B2A;
    text-shadow: 1px 1px 0 #939393;
    /*
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    */
  }
  .has-slider #navigation ul.nav > li a:hover {
    color: ##D9D9D9;
    text-shadow: 1px 1px 0 #292B2A;
  }
  .has-slider #navigation ul.nav > li ul li a {
    color: #292B2A;
    text-shadow: 1px 1px 0 #939393;
  }
  .has-slider #navigation ul.nav > li ul li a:hover {
    color: ##D9D9D9;
    text-shadow: 1px 1px 0 #292B2A;
  }
  .has-slider #navigation ul.nav li.current_page_item a,
  .has-slider #navigation ul.nav li.current_page_parent a,
  .has-slider #navigation ul.nav li.current-menu-ancestor a,
  .has-slider #navigation ul.nav li.current-cat a,
  .has-slider #navigation ul.nav li.li.current-menu-item a {
    background: rgba(0, 0, 0, 0.12);
  }
  .has-slider body {
    overflow-y: scroll;
  }
  .has-slider #content-top,
  .page #content-top, 
  .single #content-top {
    position: fixed;
    top: 0;
    z-index: 0;
    width: 100%;
    background: none;
  }
  .page #content-top h1,
  .single #content-top h1{
    z-index:1;
    position:fixed;
    top:200px;
    left:110px;
    color:#FFFFFF;
    font-size: 28px;
  }
  .page #content h1,
  .single #content h1 {
      display: none;
  }
  .has-slider #header,
  .page #header, 
  .single #header {
    background-color: rgba(0255, 0255, 0255, 0.5) 0%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5) 0%), to(rgba(0255, 0255, 0255, 0255) 100%));
    /* Saf4+, Chrome */
  
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome 10+, Saf5.1+, iOS 5+ */
  
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.
  
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    /* IE10 */
  
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
  
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .has-slider #featured-wrap,
  .page #custom-bg,
  .single #custom-bg {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .has-slider #featured {
    z-index: 1;
  }
  .has-slider #featured header h1 {
    font-size: 2.2em;
    font-family: "F+UD-筑紫明朝 E"; 
  }
  .has-slider #featured .flex-control-nav {
    display: block;
  }
  .has-slider #featured ul.flex-direction-nav li a {
    z-index: 99;
    width: 5.874em;
    height: 5.874em;
    top: 11.089em;
  }
  .has-slider #featured .slide .slide-content-container {
    position: absolute;
    top: 0;
    padding-top: 11.089em;
    width: 100%;
  }
  .has-slider #featured .slide .slide-content-container .entry {
    font-size: 1.2em;
  }
  .has-slider #featured .slide .slide-content {
    padding: 0;
  }
  .has-slider #featured .slide.has-overlay .slide-content {
    padding: 1.0em;
    margin: 0px auto;
    width: 460px;
    background: #000000;
    background: rgba(0, 0, 0, 0.2);
    /* MSIE */
  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .has-slider body.ie #featured .slide.has-overlay .slide-content {
    background-color: none !important;
    background: transparent !important;
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#50000000', endColorstr='#50000000');
    /* IE */
  
  }
  .has-slider #content {
    margin-top: 136px;
  }
  .has-slider #wrapper {
    z-index: 2;
    position: relative;
    width: 960px;
    margin: 0px auto;
    -webkit-border-radius: 10px;
}
  body.admin-bar.has-slider #content-top {
    top: 28px;
  }
  .section-title span {
    max-width: 80%;
  }
  /* PORTFOLIO TEMPLATE */
  .single-portfolio .portfolio {
    float: left;
    width: 26%;
  }
  .single-portfolio .single-portfolio-gallery {
    float: right;
    width: 70%;
  }
  .single-portfolio #content .portfolio-item {
    margin: 1em 0 1.618em;
  }
  #porfolio-gallery .portfolio-item.last {
    margin-right: 1.618em !important;
  }
  /* 5. FOOTER WIDGETS */
  #footer-widgets {
    padding: 2.618em 0;
  }
  #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;
  }
  /* 6. IE FIXES */
  .ie7 #top-nav {
    position: relative;
    z-index: 9999999;
  }
  .ie7 #header {
    position: relative;
    z-index: 9999999;
  }
}
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
  .widget_woo_newsfromblog .section-blog ul li article {
    width: 248px;
  }
}