/* Author: Chris Collins */ /* #All Sizes ================================================== */ .container {width: 1200px;margin: 0 auto;} #mobilemenuicon {display:none;} #menubar {height:50px} #logo {z-index: 4;} #logo img {z-index:4;display:block;position: absolute;left:0px;top:10px} #headerbar .container {position: relative;} #main-menu > ul > li.first a {margin-left: 0px;} #main-menu > ul > li.last a {margin-right: 0px;} #topright {z-index: 2;} .front .without-sidebar {width:100%;text-align:center} #block-views-slideshow-block {bottom:0px;right:-290px;} #block-views-slideshow-block .view-slideshow {width:580px;height:435px;padding:45px 270px 88px 271px;} #block-block-11.block {top:260px;} #block-block-11 .content {font-size:30px;line-height:35px;width:400px;} /* Footer */ #bottom .block {font-size: 13px;line-height: 18px;} /* GRID */ #inner-sidebar {float: left;width: 35%;margin-right:2%;} .with-inner-sidebar {float: left;width: 63%;} .without-sidebar {width:100%;} .with-sidebar {float:left;width:70%;} .sidebar {float:right;width:28%;margin-left:2%;} .bottom-four {width:23.5%;margin-left:2%;} .bottom-three {width:32%;margin-left:2%;} .bottom-two {width:49%;margin-left:2%;} .bottom-one {width:100%} #bottom .container > div {float:left;} #bottom .container > div:first-child {margin:0;} /* #Large Devices Desktops (up to 1300px) ================================================== */ @media only screen and (max-width: 1300px) { .container {width:980px;} #block-views-slideshow-block {right:-80px;} #block-views-slideshow-block .view-slideshow {width:580px;height:435px;padding:45px 270px 88px 271px;} #block-block-11.block {top:240px;} #block-block-11 .content {font-size:26px;line-height:35px;width:270px;} #bubbles .bubble-half, #bubbles .bubble-third {width:50%!important;} /* Slideshow */ .view-slideshow .views-field-field-slideshow-caption .caption-content {top:50px;} .view-slideshow .slideshow-caption {font-size:38px;line-height:40px;} /* Footer */ } /* #Medium devices Desktops (up to 992px) ================================================== */ /* Note: Design for a width of 992px */ @media only screen and (max-width: 992px) { .container {width:96%;margin:0 2%;} #mobilemenuicon {display:block;position:absolute;top: 3px;right:0px;} #main-menu {display:none;} #headerright {top: 12px;} #block-block-11.block {position:relative!important;width:100%!important;top:auto;} #block-block-11 .content {font-size:22px;line-height:30px;width:100%;} #block-block-9 .content {padding:50px 0 0px 0!important;} #block-views-slideshow-block {right:0px;} #block-views-slideshow-block .view-slideshow {width:90%;max-width:580px;height:auto;padding:2%;margin:3% auto;background:#fff!important;border-radius:10px;box-shadow:2px 2px 15px rgba(0,0,0,0.5)} #block-block-12 .content ul li {padding-left:100px!important;} #block-block-13 .content .feature {width:33.333333%!important;min-height:500px} #bubbles .bubble-half, #bubbles .bubble-third {width:50%!important;} /* Slideshow */ .view-slideshow .views-field-field-slideshow-caption .caption-content {top:30px;width:380px;} .view-slideshow .slideshow-caption {font-size:30px; line-height:32px;} /* Footer */ } /* #Small devices Tablets (up to 768px) ================================================== */ @media only screen and (max-width: 768px) { .container {width:96%;margin:0 2%;} #menubar {height:30px;} #topbar {height:0px} #topbar .contact a, #topbar .support a {padding: 5px 10px 21px 10px!important;padding-left:38px!important} #topbar .contact a:before, #topbar .support a:before {left: 11px!important} iframe {max-width:100%;height:auto!important;min-height:170px;} /* Front Page */ #block-block-13 .content .feature {width:50%!important;min-height:500px;line-height:23px} /* Contact */ #block-webform-client-block-142 .content {width:75%;} #block-webform-client-block-142 .form-text {width: calc(100% - 22px);} #block-webform-client-block-142 #edit-submitted-email {margin-right:0px;} #bubbles .bubble-half, #bubbles .bubble-third {width:100%!important;} #bubbles .bubble-half p, #bubbles .bubble-third p {min-height:0px!important;} /* Footer */ #bottom .block .content {text-align:center;} #bottom .block {font-size: 17px;line-height: 24px;} #bottom .block li {list-style-type:none!important;text-align:center} #copyright .credit {text-align:center;} /* GRID */ .with-sidebar {width:100%;} .sidebar {width:100%;margin-left:0%;} .bottom-four, .bottom-three, .bottom-two, .bottom-one {width:100%!important;margin:0!important} .bottom-three:nth-child(1), .bottom-three:nth-child(2) {width:50%!important;} } /* #Extra small devices Phones Landscape (up to 480px) ================================================== */ @media only screen and (max-width: 480px) { #logo {left:50%;margin-left:-100px;width:200px;} #topbar .contact a, #topbar .support a {padding:13px!important;padding-left:38px!important;text-indent:-999999px;} #topbar .contact a:before, #topbar .support a:before {left:12px!important} #topbar .phone {font-size:12px!important;} #block-block-12 .content ul li {padding-left:0px!important;background:none!important;} #block-block-11.block {display:none} table * {font-size:12px!important;padding:5px!important} span.now {font-size:30px!important;} .page-node-153 table tr:nth-of-type(2) td {font-size:1em!important;} span.was {top:-20px!important;margin-left:-60px!important;} /* Front Page */ #block-views-front-blocks-block-1 .views-field {width: 100%;} /* Contact */ .page-node-3 #webform-client-form-3 .form-select {width:100%;} /* Sidebar Images */ #block-views-sidebar-images-block .views-field-field-sidebar-image img {width:100%;} /* Social */ div.social {float:none!important;} /* GRID */ #inner-sidebar {width: 100%;margin-right:0%;} .with-inner-sidebar {width:100%;} .bottom-three:nth-child(1), .bottom-three:nth-child(2) {width:100%!important;} } /* #Extra Extra small devices Phones Portrait (up to 320px) ================================================== */ @media only screen and (max-width: 320px) { /* Support Articles */ #block-views-support-articles-block .views-field-field-article-image {float: none!important} #block-views-support-articles-block .views-field-field-article-image img {display:block;margin:0 auto;} } /* #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; } img.scale-with-grid { max-width: 100%; height: auto; }