/* * Based on Skeleton by Dave Gamache (www.getskeleton.com) */ /* Table of Contents */ /* Base 960 Grid Tablet (Portrait) Mobile (Portrait) Mobile (Landscape) Clearing */ /* Base 960 Grid */ #content { margin: 0 auto; position:relative; z-index: 2;} .boxed #content { margin: 30px auto; margin-top: 0; width: 990px; -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3);} .container { position: relative; width: 900px; margin: 0 auto; } #top-bar .container { width: 960px; } #header .container { width: 920px; } .column, .columns { float: left; display: inline; margin-left: 30px; position:relative; } .row { position:relative; margin-bottom: 20px; clear:both; } /* Nested Column Classes */ body .column.alpha, body .columns.alpha, body div .first { margin-left: 0; clear: left;} /* Base Grid */ .container .one.column { width: 47px } .container .two.columns { width: 125px; } .container .three.columns { width: 202px; } .container .four.columns { width: 280px; } .container .five.columns { width: 357px; } .container .six.columns { width: 435px; } .container .seven.columns { width: 512px; } .container .eight.columns { width: 590px; } .container .nine.columns { width: 667px; } .container .ten.columns { width: 745px; } .container .eleven.columns { width: 822px; } .container .twelve.columns { width: 900px; margin-left:0} /* Offsets */ #top .offset-by-one { padding-left: 80px; } #top .offset-by-two { padding-left: 160px; } #top .offset-by-three { padding-left: 240px; } #top .offset-by-four { padding-left: 320px; } #top .offset-by-five { padding-left: 400px; } #top .offset-by-six { padding-left: 480px; } #top .offset-by-seven { padding-left: 560px; } #top .offset-by-eight { padding-left: 620px; } #top .offset-by-nine { padding-left: 700px; } #top .offset-by-ten { padding-left: 780px; } #top .offset-by-eleven { padding-left: 860px; } .partners-title { padding: 10px; background: #12a4b3 url(../images/pattern.html); padding-left: 30px; padding-top: 16px; padding-bottom: 16px;} .partners .partners_images { float: left; } #container-blog-two-col div.one_half { overflow: hidden; margin-left: 20px; width: 295px; float: left; position: relative; margin-bottom: 60px; } #template-blog-masonry #container-blog-two-col { width: 630px; position: relative; left: -20px; } #container-blog-full div.one_half { overflow: hidden; margin-left: 20px; width: 455px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #container-blog-full div.one_third{ overflow: hidden; margin-left: 20px; width: 296px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-full { width: 950px; position: relative; left: -20px; } #container-blog-two-col .one_half .blog-image { width: 295px; height: 94px; } #container-blog-full .one_half .blog-image { width: 455px; height: 141px; } #container-blog-full .one_third .blog-image { width: 295px; height: 94px; } #portfolio .one_fourth { overflow: hidden; margin-left: 0; width: 225px; height: 162px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_third { overflow: hidden; margin-left: 0; width: 300px; height: 216px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_half { overflow: hidden; margin-left: 0; width: 450px; height: 324px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } .flexslider .slides li img { width: 960px; height: auto; } /* Tablet (Portrait) */ /* Note: Design for a width of 768px, Gutter: 30px, column: 34px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .boxed #content { width: 766px; } .container { width: 648px; } #top-bar .container { width: 708px; } #main-content #container { width: 708px; } #page-title .container { width: 708px; } #header .container { width: 668px; } #slideshow_big .container { width: 708px; } .container .one.column { width: 26px; } .container .two.columns { width: 83px; } .container .three.columns { width: 139px; } .container .four.columns { width: 196px; } .container .five.columns { width: 252px; } .container .six.columns { width: 309px; } .container .seven.columns { width: 365px; } .container .eight.columns { width: 422px; } .container .nine.columns { width: 478px; } .container .ten.columns { width: 535px; } .container .eleven.columns { width: 591px; } .container .twelve.columns { width: 648px; } /* Offsets */ #top .offset-by-one { padding-left: 59px; } #top .offset-by-two { padding-left: 118px; } #top .offset-by-three { padding-left: 177px; } #top .offset-by-four { padding-left: 236px; } #top .offset-by-five { padding-left: 295px; } #top .offset-by-six { padding-left: 354px; } #top .offset-by-seven { padding-left: 413px; } #top .offset-by-eight { padding-left: 472px; } #top .offset-by-nine { padding-left: 531px; } #top .offset-by-ten { padding-left: 590px; } #top .offset-by-eleven { padding-left: 649px; } .partners-title { padding: 10px; background: #12a4b3 url(../images/pattern.html); padding-left: 30px; padding-top: 16px; padding-bottom: 16px;} .main_menu { float: left; } .partners .partners_images { float: left; } .contactform textarea { max-width: 400px; } .widget { width: 137px; } #flickr_widget { width: 155px; } #search_field_block { width: 85px; } #template-blog-masonry div .one_third { overflow: hidden; margin-left: 0; padding-right: 4%; width: 46%; float: left; position: relative; margin-bottom: 20px; } #container-blog-two-col div.one_half { overflow: hidden; margin-left: 20px; width: 211px; float: left; position: relative; margin-bottom: 60px; } #template-blog-masonry #container-blog-two-col { width: 462px; position: relative; left: -20px; } #container-blog-full div.one_half { overflow: hidden; margin-left: 20px; width: 344px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #container-blog-full div.one_third { overflow: hidden; margin-left: 20px; width: 222px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-full { width: 728px; position: relative; left: -20px; } .post-v2 { width: 422px; } .post-meta { width: 422px; } .post-v2 .post-content { width: 422px; float: left; } .post-page-content { width: 422px; } .post-page-content .post-content { width: 422px; float: left; } .post-comments { width: 422px; float: left; } .project-page-content { width: 422px; } .project-page-content .post-content { width: 422px; float: left; } #comments { width: 422px; } .comments { width: 422px; } .comment_here { width: 422px; } .comment_here .contactform textarea{ width: 400px; } .inner_sidebar { width: 165px; } .inner_sidebar .widget { width: 165px; } .one_fourth .portfolio-image img { width: 177px; height: 127px; } .one_third .portfolio-image img { width: 215px; height: 155px; } .one_half .portfolio-image img { width: 339px; height: 244px; } #portfolio .one_fourth { overflow: hidden; margin-left: 0; width: 162px; height: 117px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_third { overflow: hidden; margin-left: 0; width: 216px; height: 156px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_half { overflow: hidden; margin-left: 0; width: 324px; height: 233px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } .one_third .project-title-content { margin-top: 121px; width: 216px; } .one_third .project-title-content .project-title-bg { width: 216px; } .one_half .project-title-content { margin-top: 198px; width: 324px; } .one_half .project-title-content .project-title-bg { width: 324px; } .project-title-content { display: none; } #container-blog-two-col .one_half .blog-image { width: 211px; height: 69px; } #container-blog-full .one_half .blog-image { width: 344px; height: 108px; } #container-blog-full .one_third .blog-image { width: 222px; height: 90px; } #main-content #container { margin-top: -190px; } #main-content { margin-top: 210px; } #slogan .container { width: 708px; } .flexslider .slides li img { width: 708px; height: auto; } #error404 { width: 648px; } } /* Mobile (Portrait) */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .boxed #content { width: 318px; } .container { width: 240px; } #top-bar .container { width: 300px; } #main-content #container { width: 300px; } #page-title .container { width: 300px; } #header .container { width: 260px; } #slideshow_big .container { width: 300px; } .columns, .column { margin: 0; } .container .one.column, .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, #top .one_fifth, #top .one_fourth, #top .one_third, #top .two_fifth, #top .one_half, #top .three_fifth, #top .two_third, #top .three_fourth, #top .four_fifth { margin-left: 0; margin-bottom: 20px; width: 240px; } #top-bar .container .one.column, #top-bar .container .two.columns, #top-bar .container .two.columns, #top-bar .container .three.columns, #top-bar .container .four.columns, #top-bar .container .five.columns, #top-bar .container .six.columns, #top-bar .container .seven.columns, #top-bar .container .eight.columns, #top-bar .container .nine.columns, #top-bar .container .ten.columns, #top-bar .container .eleven.columns, #top-bar .container .twelve.columns, #top #top-bar .full, #top #top-bar .one_fifth, #top #top-bar .one_fourth, #top #top-bar .one_third, #top #top-bar .two_fifth, #top #top-bar .one_half, #top #top-bar .three_fifth, #top #top-bar .two_third, #top #top-bar .three_fourth, #top #top-bar .four_fifth { width: 300px; margin-left: 0; margin-bottom: 20px; } .social_bookmarks { float: left; margin-top: 0; } /* Offsets */ #top .offset-by-one, #top .offset-by-two, #top .offset-by-three, #top .offset-by-four, #top .offset-by-five, #top .offset-by-six, #top .offset-by-seven, #top .offset-by-eight, #top .offset-by-nine, #top .offset-by-ten, #top .offset-by-eleven{ padding-left: 0; } .partners div { text-align: center; } .partners-title { padding: 10px; background: #12a4b3 url(../images/pattern.html); padding-left: 30px; margin-right: 20px; padding-top: 16px; padding-bottom: 16px;} .partner-arrow { margin-right: 20px; } .top-info {float: left;} .top-info span {margin-left: 0; margin-right: 20px;} .partners .partners_images { float: none; } .contactform textarea { max-width: 218px; } .input-textarea, .comment_input { max-width: 218px; } .widget { width: 240px; } #search_field_block { width: 160px; } #template-blog-masonry div .one_third { overflow: hidden; margin-left: 0; padding-right: 0; width: 300px; float: left; position: relative; margin-bottom: 20px; } #container-blog-two-col div.one_half { overflow: hidden; margin-left: 0; width: 300px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-two-col { width: 300px; float: left; left: 0; } #container-blog-full div.one_half { overflow: hidden; margin-left: 0; width: 300px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #container-blog-full div.one_third { overflow: hidden; margin-left: 0; width: 300px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-full { width: 300px; float: left; left: 0; } .post-v2 { width: 240px; } .post-meta { width: 240px; } .post-v2 .post-content { width: 240px; float: left; } .post-page-content { width: 240px; } .post-page-content .post-content { width: 240px; float: left; } .post-comments { width: 240px; float: left; } .project-page-content { width: 240px; } .project-page-content .post-content { width: 240px; float: left; } #comments { width: 240px; } .comments { width: 240px; } .comment_here { width: 240px; } .comment_here .contactform textarea{ width: 216px; } #price-table .pack { width: 100%; } .inner_sidebar { width: 270px; } #portfolio .one_fourth { overflow: hidden; margin-left: 0; width: 240px; height: 176px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_third { overflow: hidden; margin-left: 0; width: 240px; height: 176px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_half { overflow: hidden; margin-left: 0; width: 240px; height: 176px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } .one_fourth .portfolio-image img { width: 240px; height: 176px; } .one_third .portfolio-image img { width: 240px; height: 176px; } .one_half .portfolio-image img { width: 240px; height: 176px; } .project-title-content, .one_third .project-title-content, .one_half .project-title-content { margin-top: 141px; width: 240px; } .project-title-content .project-title-bg, .one_third .project-title-content .project-title-bg, .one_half .project-title-content .project-title-bg { width: 240px; } #container-blog-two-col .one_half .blog-image { width: 240px; height: 76px; } #container-blog-full .one_half .blog-image { width: 240px; height: 76px; } #container-blog-full .one_third .blog-image { width: 240px; height: 76px; } #main-content #container { margin-top: -120px; } #main-content { margin-top: 150px; } #top #slogan .container .full, #top #slogan .container { width: 300px; } .flexslider .slides li img { width: 300px; height: auto; } #error404 { width: 240px; } } /* Mobile (Landscape) */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .boxed #content { width: 478px; } .container { width: 360px; } #top-bar .container { width: 420px; } #main-content #container { width: 420px; } #page-title .container { width: 420px; } #header .container { width: 380px; } #slideshow_big .container { width: 420px; } .columns, .column { margin: 0; } .container .one.column, .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, #top .full, #top .one_fifth, #top .one_fourth, #top .one_third, #top .two_fifth, #top .one_half, #top .three_fifth, #top .two_third, #top .three_fourth, #top .four_fifth { width: 360px; margin-left: 0; margin-bottom: 20px; } #top-bar .container .one.column, #top-bar .container .two.columns, #top-bar .container .two.columns, #top-bar .container .three.columns, #top-bar .container .four.columns, #top-bar .container .five.columns, #top-bar .container .six.columns, #top-bar .container .seven.columns, #top-bar .container .eight.columns, #top-bar .container .nine.columns, #top-bar .container .ten.columns, #top-bar .container .eleven.columns, #top-bar .container .twelve.columns, #top #top-bar .full, #top #top-bar .one_fifth, #top #top-bar .one_fourth, #top #top-bar .one_third, #top #top-bar .two_fifth, #top #top-bar .one_half, #top #top-bar .three_fifth, #top #top-bar .two_third, #top #top-bar .three_fourth, #top #top-bar .four_fifth { width: 420px; margin-left: 0; margin-bottom: 20px; } .social_bookmarks { float: left; margin-top: 0; } .partners div { text-align: center; } .partners-title { padding: 10px; background: #12a4b3 url(../images/pattern.html); padding-left: 30px; margin-right: 20px; padding-top: 16px; padding-bottom: 16px;} .partner-arrow { margin-right: 20px; } .top-info {float: left;} .top-info span {margin-left: 0; margin-right: 20px;} .partners .partners_images { float: none; } .contactform textarea { max-width: 338px; } .widget { width: 360px; } #search_field_block { width: 280px; } #template-blog-masonry div .one_third { overflow: hidden; margin-left: 0; padding-right: 0; width: 420px; float: left; position: relative; margin-bottom: 20px; } #container-blog-two-col div.one_half { overflow: hidden; margin-left: 0; width: 420px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-two-col { width: 420px; float: left; left: 0; } #container-blog-full div.one_half { overflow: hidden; margin-left: 0; width: 420px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #container-blog-full div.one_third { overflow: hidden; margin-left: 0; width: 420px; float: left; position: relative; margin-bottom: 60px; padding-right: 0; } #template-blog-masonry #container-blog-full { width: 420px; float: left; left: 0; } .post-v2 { width: 360px; } .post-meta { width: 360px; } .post-v2 .post-content { width: 360px; float: left; } .post-page-content { width: 360px; } .post-page-content .post-content { width: 360px; float: left; } .post-comments { width: 360px; float: left; } .project-page-content { width: 360px; } .project-page-content .post-content { width: 360px; float: left; } #comments { width: 360px; } .comments { width: 360px; } .comment_here { width: 360px; } .comment_here .contactform textarea{ width: 338px; } #price-table .pack { width: 100%; } .inner_sidebar { width: 390px; } #portfolio .one_fourth { overflow: hidden; margin-left: 0; width: 360px; height: 259px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_third { overflow: hidden; margin-left: 0; width: 360px; height: 259px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } #portfolio .one_half { overflow: hidden; margin-left: 0; width: 360px; height: 259px; float:left; position:relative; margin-bottom: 0; padding-bottom: 0; } .one_fourth .portfolio-image img { width: 360px; height: 259px; } .one_third .portfolio-image img { width: 360px; height: 259px; } .one_half .portfolio-image img { width: 360px; height: 259px; } .project-title-content, .one_third .project-title-content, .one_half .project-title-content { margin-top: 224px; width: 360px; } .project-title-content .project-title-bg, .one_third .project-title-content .project-title-bg, .one_half .project-title-content .project-title-bg { width: 360px; } #container-blog-two-col .one_half .blog-image { width: 360px; height: 111px; } #container-blog-full .one_half .blog-image { width: 360px; height: 111px; } #container-blog-full .one_third .blog-image { width: 360px; height: 111px } #main-content #container { margin-top: -140px; } #main-content { margin-top: 170px; } #top #slogan .container .full, #top #slogan .container { width: 420px; } .flexslider .slides li img { width: 420px; height: auto; } #error404 { width: 360px; } } /* Clearing */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Columns for better content separation */ div .full { overflow: hidden; margin-left: 0; width:100%; float:left; position:relative; margin-bottom: 30px; } div .one_fifth { overflow: hidden; margin-left: 4%; width:16.5%; float:left; position:relative; margin-bottom: 30px; } div .one_fourth { overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative; margin-bottom: 30px; } div .one_third { overflow: hidden; margin-left: 4%; width:30.5%; float:left; position:relative; margin-bottom: 30px; } div .two_fifth { overflow: hidden; margin-left: 4%; width:38.5%; float:left; position:relative; margin-bottom: 30px; } div .one_half { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; margin-bottom: 30px; } div .three_fifth { overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative; margin-bottom: 30px; } div .two_third { overflow: hidden; margin-left: 4%; width:65.5%; float:left; position:relative; margin-bottom: 30px; } div .three_fourth { overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative; margin-bottom: 30px; } div .four_fifth { overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative; margin-bottom: 30px; } .msie7 .one_fourth { width:21.5%; } .msie7 div, .msie7 li { zoom:1; }