/* #Base 960 Grid ================================================== */ .container { position: relative; width: 940px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 20px; margin-bottom: 10px;} .row { } /* Nested Column Classes */ .row .column:first-child, .row .columns:first-child { margin-left: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; margin-left:0px;} .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Primary content */ #primary-left .one-third.column {width:200px;} #primary-left .four.columns {width:145px;} #primary-left .two-thirds.column {width:420px;} #primary-left .eight.columns {width:310px;} #primary-left .twelve.columns {width: 475px;} #primary-right .eight.columns {width:310px;} #primary-right .one-third.column {width:200px;} #primary-right .four.columns {width:145px;} #primary-right .two-thirds.column {width:420px;} #primary-right .twelve.columns {width: 475px;} #primary-left .sixteen.columns {width: 640px; margin-left:0px;} #primary-right .sixteen.columns {width: 640px; margin-left:0px;} /* #Tablet (Portrait) ================================================== */ /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 748px; } .container .column, .container .columns { margin-left: 20px; } .row .column:first-child, .row .columns:first-child { margin-left: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns, #sidebar { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns, #primary-left, #primary-right, .category-post-alt3 { width: 508px; } #primary-left .sixteen.columns,#primary-right .sixteen.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns, #primary-fullwidth { width: 748px; } .portfolio-content { width: 768px !important; } #primary-left .sixteen.columns,#primary-right .sixteen.columns { width: 508px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Page style */ #footer .widget {width:236px;} #primary-fullwidth .category-post-alt1 {width: 236px;} .category-post-alt2 .entry {width:332px;} .category-post-alt2 .entry-thumb {width:156px;} .category-post-alt1 {width:244px;} .pagination {width: 508px;} /* Primary content */ #primary-left .one-third.column {width:156px;} #primary-left .four.columns {width:112px;} #primary-left .eight.columns {width:244px;} #primary-left .two-thirds.column {width:332px;} #primary-left .twelve.columns {width: 376px;} #primary-right .one-third.column {width:156px;} #primary-right .four.columns {width:112px;} #primary-right .eight.columns {width:244px;} #primary-right .two-thirds.column {width:332px;} #primary-right .twelve.columns {width: 376px;} } /* Smaller than standard 960 (devices and browsers) ================================================== */ @media only screen and (max-width: 959px) { } /* #Mobile (Portrait) ================================================== */ /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #sticky-holder {position: relative !important} .container { width: 300px; } .container .columns, .container .column { margin: 0 0 10px 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } .portfolio-content { width: 300px !important; } /* Page style */ .mobileMenu { -webkit-appearance: none; display: block; width: 100%; border: 1px solid #e5e5e5; outline: none; cursor: pointer; margin-bottom: 40px; background-image: url(../img/responsivemenu.png); background-repeat: no-repeat; background-position: right center; } #menu, .nivo-caption {display: none !important; } ul.top-menu, #logo, .banner-top {margin-left: 0px; margin-right: 0px;} /* Top menu */ .toggleTopMenu { text-indent: -9999em; display: block; height: 30px; width: 30px; cursor: pointer; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-image: url(../img/topmenu.png); background-repeat: no-repeat; background-position: center center; background-color: #f0f0f0; } ul.top-menu li:first-child { padding-left: 10px;} ul.top-menu a.sf-with-ul {} ul.top-menu {display: none;height:auto;border: 1px solid #e5e5e5; background-image: none !important;} ul.top-menu li{line-height: 30px;border-right: none;float:none;display:block; border-bottom: 1px solid #e5e5e5;} ul.top-menu li:last-child { border-bottom: none;} ul.top-menu ul {position: inherit;top: inherit !important;margin: 0px;background-color: #fff;border: none !important;display:block; overflow:hidden;} ul.top-menu li ul li { padding-left:0px !important; border:none;} ul.top-menu li ul li:first-child {} /* Pricing columns */ .three-columns-pricing, .four-columns-pricing, .five-columns-pricing { width:100%; display:block; margin-left:0; margin-right:0;} .pricing-table { float:none;} #logo {text-align:center;} #logo { float:none;} #footer .widget { margin-bottom: 20px;} #primary-left, #primary-right, #sidebar, #footer .widget, #primary-fullwidth, .category-post-alt2 .entry, .category-post-alt2 .entry-thumb, .category-post-alt1, .category-post-alt3, .entry-post, .tag-list, .author-bio, #comments, #respond, #primary-fullwidth .category-post-alt1, .pagination { width: 300px; margin-left: 0px; margin-right: 0px; } .category-post-alt2 .entry, .category-post-alt2 .entry-thumb, .category-post-alt1, .category-post-alt3, .entry-post, .tag-list, .author-bio, #comments, #respond, #filters, .pagination {margin-left: 0px;margin-right: 0px;} .category-post-alt2 .entry-thumb {margin-bottom: 10px;} #primary-left, #primary-right, #primary-fullwidth {clear:both;} #contact-human p, #contact-human div {width: 100%;float:none;} /* Primary content */ #primary-left .one-third.column, #primary-left .four.columns, #primary-left .eight.columns, #primary-left .two-thirds.column, #primary-left .sixteen.columns, #primary-left .twelve.columns, #primary-right .one-third.column, #primary-right .four.columns, #primary-right .eight.columns, #primary-right .two-thirds.column, #primary-right .twelve.columns, #primary-right .sixteen.columns {width:300px;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .container .columns, .container .column { margin: 0 0 10px 0; } /* Page style */ #primary-left, #primary-right, #sidebar, #footer .widget, #primary-fullwidth, .category-post-alt2 .entry, .category-post-alt2 .entry-thumb, .category-post-alt1, .category-post-alt3, .entry-post, .tag-list, .author-bio, #comments, #respond, #primary-fullwidth .category-post-alt1, .pagination { width: 420px; } #primary-left, #primary-right, #primary-fullwidth { clear:both; margin-left: 0px; margin-right: 0px;} ul.top-menu, #logo, .banner-top, .category-post-alt1, .category-post-alt3, .entry-post, .tag-list, .author-bio, #comments, #respond, #filters, .pagination {margin-left: 0px;margin-right: 0px;} /* Primary content */ #primary-left .one-third.column, #primary-left .four.columns, #primary-left .eight.columns, #primary-left .two-thirds.column, #primary-left .sixteen.columns, #primary-left .twelve.columns, #primary-right .one-third.column, #primary-right .four.columns, #primary-right .eight.columns, #primary-right .two-thirds.column, #primary-right .twelve.columns, #primary-right .sixteen.columns {width:420px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px;} .portfolio-content { width: 420px !important; } }