/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 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; font-size: 18px; } .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; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } .top_nav .left img { width: 100%; margin-bottom: 10px; } .social {margin-left: 200px;} .single_paragraph {font-size:22px; padding-top:10px; font-weight:normal !important; line-height:24px; } .people_image img{width:100%;} .about_desc .desc {font-size: 28px;} .services {margin-top:5px; padding-bottom:50px;} .services img{width: 100%} .services p{margin-top: 40px;} .newline {display: none;} .contacttext h1{font-weight:normal; font-size:36px;} .speaktoSomeone{clear:both; color:#333333;margin:10px 0 25px; text-align:left;} .speaktoSomeone .leading{font-size:26px;} .speaktoSomeone .eight.columns {font-size:20px;} .fill_in {color:#00e305; margin-top:20px; font-size:20px;} .banner_desc_container p.banner_desc strong {font-size:26px;} .bigtext {clear:both; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:30px; line-height:35px; font-weight:bold; letter-spacing:-0.01em; padding:20px 0;} .big_inner_text {clear:both; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:30px; line-height:35px; font-weight:bold; letter-spacing:-0.01em; padding:0px 0;} .menu-toggle {margin-right: 10px;} .press_container a .active { color:#00E405; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 758px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 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 { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 358px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.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 { width: 748px; } .container .one-third.column { width: 232px; } .container .two-thirds.column { width: 484px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } .nav.right { margin: 0 auto; clear: both; float: initial; line-height: 15px; } .border_divider { margin-top:10px; } .top_nav .left img { width: 100%; margin-bottom: 10px; } .leadership { background: none !important; } .about_desc .desc { background: none !important; font-size: 24px; } .home_banner h2.banner_tagline{font-size:44px;} .home_banner p.desc{ font-size:20px;} .tree img {width: 100%;} .social {margin-left: 19px;} .clients div.main_title span.work_text, .casestudy div.main_title span.work_text, .press div.main_title span.work_text {font-size: 36px;} p.desc {font-size:26px;} .casestudy div.main_title, .contact div.main_title {margin-top:0;height:100px;} .single_paragraph, .banner_desc {font-size:20px !important; line-height: 20px;} .people_image img{width:100%;} .press_contents h1 {font-size: 28px;} .press_contents p {font-size: 20px !important;} } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 300px; } .container .columns, .container .column { margin: 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; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } .casestudy div.main_title { margin: 0; } .casestudy div.main_title div { bottom: -15px; } .casestudy div.main_title ul.sub_nav { margin: 40px 0 10px; } .otherprojects { background: none; } .about_container, .leadership { background: none !important; } .inner_text { position: relative; margin: 0 !important; width: 100% !important; height: auto; text-align: left !important; padding-top: 0 !important; padding-bottom: 20px !important; } .about_desc .desc { background: none !important; font-size: 20px; } .home_banner h2.banner_tagline{font-size:26px;} .home_banner p.desc{font-size:18px;} .tree img {width: 100%;} .details {display: none;} .social {margin:0px 0 10px 40px;} .tree {margin-left: 70px; margin-bottom: 10px;} .clients div.main_title span.work_text, .casestudy div.main_title span.work_text, .contact div.main_title span.work_text, .press div.main_title span.work_text {font-size: 22px;} p.desc {font-size:16px;} .casestudy div.main_title, .contact div.main_title {margin-top:0;height:50px;} .contact div.main_title div {bottom:0;} .single_paragraph, .banner_desc {font-size:16px !important; line-height: 16px;} .people_image img{width:80%;} .people_image {text-align:center !important;} .border_divider2{ display:block; background:url(../images/border.png) no-repeat; width:100%; height:12px; clear:both; margin-bottom:20px;} .services {margin-top:20px; padding-bottom:30px;} .services img{width: 80%} .services p{margin-top: 20px;} .newline {display: block;} .speaktoSomeone .eight.columns.first {margin-bottom: 22px;} .contacttext h1{font-size:22px;} .contacttext p{font-size:18px !important;} .form label {font-size: 18px;} .speaktoSomeone .leading{font-size:22px;} .speaktoSomeone .eight.columns {font-size:18px;} .fill_in {margin:10px 0 20px 0 !important;} .banner_desc_container p.banner_desc {font-size:20px;} .banner_desc_container p.banner_desc strong {font-size:21px;} .imageLibrary ul li img {width: 73px} .imageLibrary p {width: 67px} .imageLibrary p.hover_div span {font-size: 11px} .about_desc.one-third.column.first img {width:30%;} .about_desc.one-third.column.second img {width:27%;} .about_desc.one-third.column.third img {width:23%;} .bigtext, .otherprojects h3, .big_inner_text {font-size: 22px;} .top_nav h1 {width:88%;margin-top: 6px;} .client_selection {display:none;} .press_contents h1 {font-size: 22px; margin-top: 20px !important;} .press_contents p {font-size: 18px !important;} .press.casestudy .main_title {margin-bottom: 50px;} .capabilities_container p {font-size: 16px;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .container .columns, .container .column { margin: 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: 420px; } .top_nav .left img { margin-left: 30px; } .nav.right { margin-bottom:20px; } .bottom_nav .left img { margin-bottom: 20px; margin-left: 31px; } .home_banner h2.banner_tagline{font-size:32px;} .home_banner p.desc{ font-size:20px;} .tree img {width: 67%;} .social {margin-left: 0;} .tree {margin-left: 0;} .imageLibrary ul li img {width: 86px;} .clients div.main_title span.work_text, .casestudy div.main_title span.work_text, .contact div.main_title span.work_text, .press div.main_title span.work_text {font-size: 28px;} p.desc {font-size:20px;} .casestudy div.main_title, .contact div.main_title {margin-top:0;height:70px;} .contact div.main_title div {bottom:-40px;} .single_paragraph, .banner_desc {font-size:18px !important; line-height: 18px;} .about_desc .desc {font-size: 22px;} .people_image img{width:80%;} .people_image {text-align:center !important;} .newline {display: none;} .contacttext h1{font-size:24px;} .contacttext p{font-size:20px !important;} .banner_desc_container p.banner_desc {font-size:24px;} .imageLibrary ul li img {width: 86px;} .imageLibrary p {width: 81px} .imageLibrary p.hover_div span {font-size: 14px} .bigtext, .big_inner_text {font-size: 26px;} .top_nav h1 {width:92%; margin-top: 0} .press_contents h1 {font-size: 24px; margin-top: 20px !important;} .press_contents p {font-size: 20px !important;} } @media only screen and (max-width: 479px) { .fotter_nav { margin: 10px 75px 10px 0; } } /* #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