// Media query variables. @mobile: ~"(max-width: 767px)"; @tablet: ~"(min-width: 768px) and (max-width: 979px)"; @normal: ~"(min-width: 980px) and (max-width: 1199px)"; @wide: ~"(min-width: 1200px)"; // Bootstrap library. @import 'bootstrap.less'; @import 'responsive.less'; // Base-theme overrides. @import 'overrides.less'; // Theme specific. @import 'header.less'; @import 'content.less'; @import 'footer.less'; /* LESS FUNCTIONS */ .border-radius (@x: 0) { border-radius: opacity 1s ease-out 0s; -moz-border-radius: @arguments @arguments @arguments @arguments; -webkit-border-radius: @arguments @arguments @arguments @arguments; -o-border-radius: @arguments @arguments @arguments @arguments; } .clear{ clear: both; } .the-icons li{ display: inline-block; width: 250px; } a, img{ -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* General Bootstrap Customization */ h1, h2, h3, h4, h5, h6{ font-weight: normal; } a{ color: #222222; cursor: pointer; } body{ font-size: 12px; line-height: 1.45em; } .navbar .btn-navbar { margin-top: 20px; } .dropdown-menu > li > a { padding: 8px 20px; } @media @normal, @wide{ body{ padding-top: 0; } body.toolbar-drawer { padding-top: 65px !important; } body.toolbar { padding-top: 0; } .navbar{ margin-bottom: 0; } .navbar-inner{ height: 75px; .container{ height: 75px; .nav > li > a { padding: 28px 15px; } } .nav { float: right !important; } } } /* CuteSlider Wide SetUp */ .front h1, .page-node-36 h1, .page-node-7 h1, .front .breadcrumb, .page-node-36 .breadcrumb, .page-node-7 .breadcrumb{ display: none; } .md-slide-wrap{ margin-bottom: 0; } .text-black-shadow{ opacity:0.85 !important; -webkit-opacity:0.85 !important; } /* General Styles */ .front .main-content .block, .page-node-36 .main-content .block, .page-node-7 .main-content .block{ border-top: solid 1px @grayLighter; padding-top: 28px; } /* Home Block */ #block-block-1 { padding: 10px 0 20px; text-align: left; border-top: none; line-height: 1.25em; a.btn{ margin-top: 32px; } h2, h3{ color: #FFFFFF; text-shadow: 1px 1px 1px #333333; } h2{ font-size: 40px; margin-bottom: 0px; } h3{ margin-top: 0px; } } @media @normal{ #block-block-1 { h2 { font-size: 30px; } h3 { font-size: 21px; } a.btn { margin-top: 22px; min-width: 125px; } } } @media @tablet{ #block-block-1 { h2 { font-size: 30px; } h3 { font-size: 21px; } a.btn { margin-top: 22px; min-width: 125px; } } } /* Home Items */ .view-slash-home-items { .views-row { margin-bottom: 35px; } .views-row-4, .views-row-7, .views-row-10{ clear: both; } .views-field-field-image{ float: left; .border-radius (50%); height: 53px; text-align: center; width: 53px; img { margin-top: 7px; } } .views-field-title, .views-field-body{ padding-left: 63px; } } #block-views-slash-home-items-block-1{ color: #FFFFFF; padding: 30px 0 20px; .views-row { text-align: center; } .views-field-field-image{ float: none; .border-radius (50%); height: 140px; width: 140px; text-align: center; img { margin-top: 7px; } } } /* Main Region */ .main-container{ padding-bottom: 35px; } /* Inter Content Region */ .inter-content-container{ background: url("../images/shadow-intercontent.png") repeat-x top center @grayLighter; margin: 0; padding: 32px 0; #block-block-6{ text-align: center; padding-bottom: 6px; h2{ font-size: 40px; margin-bottom: 0px; } h3{ font-size: 18px; margin-top: 0px; } .btn{ margin-right: 10px; } } } /* Post Content Region */ .post-content-container{ box-shadow: 0px -5px 5px @grayBorder; -moz-box-shadow: 0px -5px 5px @grayBorder; -webkit-box-shadow: 0px -5px 5px @grayBorder; -o-box-shadow: 0px -5px 5px @grayBorder; padding-top: 25px; } body.front .post-content-container .block, .page-node-7 .post-content-container .block, .page-node-36 .post-content-container .block{ border-top: 1px solid #EEEEEE; padding-top: 28px; } /* From the Blog */ #block-views-slash-latest-news-home-block{ /*border-top: none;*/ padding-top: 0; } .view-slash-latest-news-home{ padding-bottom: 38px; .views-field-field-image{ float: left; margin-right: 16px; img{ padding: 3px; border: solid 1px @grayLight; } } .views-field-title{ h3{ margin-top: -4px; } } .views-field-nothing{ color: #999999; margin: -9px 0 6px; } } /* Clients Logos */ .view-slash-client-logos { .views-field-field-image a{ background: @white; opacity: 1; &:hover{ opacity: 0; background: none; } } } @media @wide{ .view-slash-client-logos { .views-field-field-image-1 { margin-bottom: -70px ; } } } @media @normal{ .view-slash-client-logos { .views-field-field-image-1 { margin-bottom: -57px ; } } } @media @tablet{ .view-slash-client-logos { .views-field-field-image-1 { margin-bottom: -42px ; } } } /* Porfolio CSS Styles */ .view-slash-portfolio-4-columns { .view-header{ margin-bottom: 10px; } .views-row{ background: url("../images/item-footer.png") no-repeat scroll center 188px transparent; .views-field-field-image { img { border: solid 1px @grayBorder; padding: 3px; } } margin-bottom: 30px; .views-field-nothing{ background: none repeat scroll 0 0 #000000; color: #FFFFFF; height: 150px; margin: -188px 0 0 0; opacity: 0; padding: 0px; width: 100%; border: solid 4px #000000; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; &:hover{ opacity: 0.85; } .action{ text-align: center; margin-bottom: 10px; margin-top: 14px; a{ .border-radius (500px); background: @grayLight; display: inline-block; height: 20px; padding: 10px 14px; width: 14px; &:hover{ background: @grayLighter; } } } .description{ margin: 0 15px; } .more-images{ opacity: 0.99; img{ opacity: 0.99; background-color: @black; } } .more-images{ margin: 15px 0 15px; text-align: center; ul{ padding: 0; margin: 0; list-style: none; } li{ display: inline-block; img{ border: solid 4px @grayDark; margin-right: 15px; } } li.last img{ margin-right: 0 !important; } } } .views-field-title{ text-align: center; } } /* .views-row-5, .views-row-9, .views-row-13{ clear: both; } */ } /* 3 Columns Portfolio Fixes */ @media @wide{ .view-display-id-page_1.view-slash-portfolio-4-columns, .view-display-id-block_2.view-slash-portfolio-4-columns{ .views-row{ background-position: center 250px !important; } .views-field-nothing{ width: 362px !important; height: 242px !important; margin-top: -250px !important; .action{ margin-top: 26px !important; } .description{ margin: 0 35px !important; } .more-images{ img{ max-width: 80px; } } } .views-row-4, .views-row-7, .views-row-10, .views-row-13, .views-row-16, .views-row-19{ clear: both; } } } @media @normal{ .view-display-id-page_1.view-slash-portfolio-4-columns, .view-display-id-block_2.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 292px; } .views-row{ background-position: center 203px !important; } .views-field-nothing{ height: 196px !important; margin-top: -204px !important; width: 292px !important; .action{ margin-top: 12px !important; } .description{ margin: 0 15px !important; } .more-images{ img{ max-width: 58px; } } } .views-row-4, .views-row-7, .views-row-10, .views-row-13, .views-row-16, .views-row-19{ clear: both; } } } @media @tablet{ .view-display-id-page_1.view-slash-portfolio-4-columns, .view-display-id-block_2.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 220px; } .views-row{ background-position: center 155px !important; } .views-field-nothing{ height: 148px !important; margin-top: -155px !important; width: 220px !important; .action{ margin-top: 12px !important; } .more-images{ display: none; } } .views-row-4, .views-row-7, .views-row-10, .views-row-13, .views-row-16, .views-row-19{ clear: both; } } } /* 2 Columns Portfolio Fixes */ @media @wide{ .view-display-id-page_2.view-slash-portfolio-4-columns, .view-display-id-block_3.view-slash-portfolio-4-columns{ .views-row{ background-position: center 378px !important; } .views-field-nothing{ height: 370px !important; margin-top: -378px !important; width: 562px !important; .action{ margin-top: 80px !important; } .description{ margin: 16px 35px 23px !important; } .more-images{ img{ max-width: none; } } } .views-row-3, .views-row-5, .views-row-7, .views-row-9, .views-row-11, .views-row-13, .views-row-15, .views-row-17, .views-row-19, .views-row-21, .views-row-23{ clear: both; } } } @media @normal{ .view-display-id-page_2.view-slash-portfolio-4-columns, .view-display-id-block_3.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 452px; } .views-row{ background-position: center 306px !important; } .views-field-nothing{ height: 298px !important; margin-top: -306px !important; width: 452px !important; .action{ margin-top: 45px !important; } .description{ margin: 15px 45px 0 !important; } .more-images{ img{ max-width: 70px; } } } .views-row-3, .views-row-5, .views-row-7, .views-row-9, .views-row-11, .views-row-13, .views-row-15, .views-row-17, .views-row-19, .views-row-21, .views-row-23{ clear: both; } } } @media @tablet{ .view-display-id-page_2.view-slash-portfolio-4-columns, .view-display-id-block_3.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 344px; } .views-row{ background-position: center 235px !important; } .views-field-nothing{ height: 227px !important; margin-top: -235px !important; width: 344px !important; .action{ margin-top: 12px !important; } .more-images{ img{ max-width: 50px; } } } .views-row-3, .views-row-5, .views-row-7, .views-row-9, .views-row-11, .views-row-13, .views-row-15, .views-row-17, .views-row-19, .views-row-21, .views-row-23{ clear: both; } } } /* 1 Column Portfolio Fixes */ @media @wide{ .view-display-id-page_3.view-slash-portfolio-4-columns, .view-display-id-block_4.view-slash-portfolio-4-columns{ .views-row{ background-position: center 388px !important; } .views-field-nothing{ height: 380px !important; margin-top: -388px !important; width: 1162px !important; .action{ margin-top: 80px !important; } .description{ margin: 16px 157px 23px !important; } .more-images{ img{ max-width: none; } } } } } @media @normal{ .view-display-id-page_3.view-slash-portfolio-4-columns, .view-display-id-block_4.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 932px; } .views-row{ background-position: center 378px !important; } .views-field-nothing{ height: 305px !important; margin-top: -313px !important; width: 932px !important; .action{ margin-top: 45px !important; } .description{ margin: 15px 45px 0 !important; } .more-images{ img{ max-width: 70px; } } } } } @media @tablet{ .view-display-id-page_3.view-slash-portfolio-4-columns, .view-display-id-block_4.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 716px; } .views-row{ background-position: center 242px !important; } .views-field-nothing{ height: 234px !important; margin-top: -242px !important; width: 716px !important; .action{ margin-top: 12px !important; } .description{ margin: 0 87px !important; } .more-images{ img{ max-width: 50px; } } } } } /* 4 Columns Portfolio Fixes */ @media @wide{ .view-display-id-page.view-slash-portfolio-4-columns, .view-display-id-block_1.view-slash-portfolio-4-columns{ .views-row{ background-position: center 188px !important; } .views-field-nothing{ height: 180px !important; margin-top: -188px !important; width: 270px !important; .action{ margin-top:40px !important; } .description{ margin: 0 15px !important; } .more-images{ img{ max-width: none; } } } .views-row-5, .views-row-9, .views-row-13, .views-row-17, .views-row-21, .views-row-25{ clear: both; } } } @media @normal{ .view-display-id-page.view-slash-portfolio-4-columns, .view-display-id-block_1.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 212px; } .views-row{ background-position: center 149px !important; } .views-field-nothing{ height: 142px !important; margin-top: -149px !important; width: 212px !important; .action{ margin-top: 20px !important; } .description{ margin: 0 15px !important; } } .views-row-5, .views-row-9, .views-row-13, .views-row-17, .views-row-21, .views-row-25{ clear: both; } } } @media @tablet{ .view-display-id-page.view-slash-portfolio-4-columns, .view-display-id-block_1.view-slash-portfolio-4-columns{ .views-field-field-image img{ width: 158px; } .views-row{ background-position: center 114px !important; } .views-field-nothing{ height: 106px !important; margin-top: -114px !important; width: 158px !important; .action{ margin-top: 33px !important; } .description{ display: none; } } .views-row-5, .views-row-9, .views-row-13, .views-row-17, .views-row-21, .views-row-25{ clear: both; } } } /* Portfolio Page */ .node-type-slash-portfolio-item{ .field-name-field-image img{ padding: 3px; border: solid 1px @grayBorder; margin-bottom: 10px; } .field-name-field-more-images { .field-item{ float: left; img{ padding: 3px; border: solid 1px @grayBorder; margin-bottom: 20px; margin-right: 28px; } } } .field-name-body{ clear: both; margin: 10px 0 25px; } } @media @normal{ .node-type-slash-portfolio-item{ .field-name-field-image img{ max-width: 692px; } } } .view-slash-home-items .views-field-field-image{ background: #CCCCCC; } @media @tablet{ .node-type-slash-portfolio-item{ .field-name-field-image img{ max-width: 530px; } } } /* Footer Contact Block */ #block-block-9 { margin-top: 10px; padding-top: 20px; .btn{ margin-top: -6px; } div, h3 , h4{ float: left; margin-top: -5px; } .phone-label{ font-size: 20px; margin-right: 10px; } .phone{ float: left; display: inline-block; font-size: 21px; margin-right: 22px; padding-top: 6px; } .address{ float: left; font-size: 20px; padding-top: 5px; } } @media @normal{ #block-block-9 { h3{ font-size: 20px; margin-top: 0px; } } } @media @tablet{ #block-block-9 .btn { margin-top: 11px; min-width: 108px; } } @media @mobile{ #block-block-9 .btn { margin-top: 10px; } } /* Sidebar Second Region */ @media @wide{ .entry-container{ border-right: solid 1px @grayBorder; margin-right: -11px; padding-right: 10px; } } @media @wide{ .entry-side{ border-left: 1px solid @grayBorder; margin-left: 10px; margin-right: -10px; padding-left: 22px; } } @media @normal{ .entry-container{ border-right: solid 1px @grayBorder; margin-right: -11px; padding-right: 10px; } } @media @normal{ .entry-side{ border-left: 1px solid @grayBorder; margin-left: 10px; margin-right: -18px; padding-left: 9px; } } @media @tablet{ .entry-container{ border-right: solid 1px @grayBorder; margin-right: -11px; padding-right: 10px; } } @media @tablet{ .entry-side{ border-left: 1px solid @grayBorder; margin-left: 10px; margin-right: -18px; padding-left: 9px; } } .region-sidebar-second{ color: @grayMid; } /* Sidebar Clients */ .view-slash-sidebar-clients{ .views-row{ margin-bottom: 10px; } } /* Sidebar Services */ .view-slash-sidebar-services{ .views-row{ border-bottom: 1px dashed #CCCCCC; margin-bottom: 15px; padding-bottom: 18px; } .views-field-field-image{ float: left; margin-right: 5px; } .views-field-title h3{ font-size: 20px; padding-top: 7px; } .views-row-last{ border-bottom: none; } } /* Blog Page*/ .view-id-slash_blog{ .views-row{ background: url("../images/item-footer.png") no-repeat scroll center 308px transparent; padding-bottom: 40px; margin-bottom: 30px; border-bottom: dashed 1px @grayBorder; img{ border: solid 1px @grayBorder; padding: 3px; } .views-field-nothing{ color: @grayLight; margin-bottom: 10px; margin-top: -5px; } } .views-row-last{ padding-bottom: 20px; margin-bottom: 0; border-bottom: none; } } @media @normal{ .view-id-slash_blog img{ max-width: 692px; } .views-row{ background-position: center 249px !important; } } @media @tablet{ .view-id-slash_blog img{ max-width: 530px; } .views-row{ background-position: center 193px !important; } } /* Article Content Type */ .node-type-article{ h1{ margin-bottom: 10px; } .field-name-field-image{ margin-top: 10px; img{ border: solid 1px @grayBorder; padding: 3px; } } .field-name-body{ margin-top: 23px; } } .entry-container .node-article .user-picture{ display: none; } @media @normal{ .node-type-article{ .field-name-field-image img{ max-width: 692px; } } } @media @tablet{ .node-type-article{ .field-name-field-image img{ max-width: 530px; } } } #comments { border-top: 4px solid #CCCCCC; margin-top: 37px; background-color: #f5f5f5; .indented{ margin-left: 100px; } .comment.comment-by-node-author{ background: @grayLighter; } .comment{ margin-bottom: 10px; header span{ color: @gray; } h3{ margin-top: -8px; } padding: 10px; .user-picture{ display: block; float: left; margin-right: 10px; } img{ max-width: 60px; } .field-name-comment-body, .links { padding-left: 70px; } } } /* Customer Feedback */ .view-slash-customer-feedback{ .views-field-field-image { float: left; margin-right: 20px; img{ border: 3px solid #CCCCCC; border-radius: 500px 500px 500px 500px; } } .views-field-nothing{ font-style: italic; margin-top: 11px; .field-content span{ text-transform: uppercase; } } } @media @wide{ #views_slideshow_cycle_teaser_section_slash_customer_feedback-block{ height: 116px !important; width: 909px !important; .views-slideshow-cycle-main-frame-row{ height: 116px !important; width: 909px !important; } } } @media @normal{ #views_slideshow_cycle_teaser_section_slash_customer_feedback-block{ height: 116px !important; width: 780px !important; .views-slideshow-cycle-main-frame-row{ height: 116px !important; width: 780px !important; } } } @media @tablet{ #views_slideshow_cycle_teaser_section_slash_customer_feedback-block{ height: 131px !important; width: 600px !important; .views-slideshow-cycle-main-frame-row{ height: 131px !important; width: 600px !important; } } } /* Footer */ .footer { color: @grayLight; line-height: 18px; padding-bottom: 0; margin-top: 0; border-top: none; img { background: none repeat scroll 0 0 @midGray; border: 1px solid @gray; padding: 3px; } .region-footer{ .block{ padding-bottom: 35px; } } a{ color: @grayBorder; &:hover{ color: @white; } } } .view-slash-footer-recent-portfolio .views-row { float: left; margin-bottom: 10px; margin-right: 12px; } .view-slash-latest-news { .views-row{ border-bottom: 1px solid @gray; margin-bottom: 15px; padding-bottom: 10px; .views-field-field-image { float: left; margin-right: 11px; } .views-field-created{ font-size: 11px; border: color @gray; } .views-field-title{ } } .views-row-last{ border-bottom: none; } } @media @normal{ .view-id-slash_latest_news_home { img{ max-width: 152px; } h3{ padding-left: 176px; } } } @media @tablet{ .view-id-slash_latest_news_home { img{ max-width: 152px; } h3{ padding-left: 176px; } } } /* Footer Header */ .footer-head-container { margin-top: 55px; color: @white; padding: 10px 0 20px; } /* Closure Region */ .closure-container{ padding: 20px 0 10px; } /* Social Media Profiles */ #block-widgets-s-socialmedia-profile-buttons{ float: right; text-align: right; img { background: none repeat scroll 0 0 transparent; border: none; padding: 0; } a { display: inline-block; height: 22px; margin-top: -3px; opacity: 0.5; padding-top: 3px; text-align: center; width: 25px; &:hover{ opacity: 1; } } } /* Home Variant 2 */ .block-cute-slider{ margin-top: 30px; } /* Sidebar Fixes */ body.one-sidebar.not-front { .main-content section section.row, .main-content aside section.row{ margin-left: 0; } } body.not-front .navbar { margin-bottom: 20px; } body.page-node-36 .navbar, body.page-node-7 .navbar { margin-bottom: 0; } .breadcrumb { background-color: transparent; border-radius: 0 0 0 0; list-style: none outside none; margin: 0; padding: 0; } #block-locationmap-image{ margin-bottom: 20px; } @media @mobile{ body{ padding: 0; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: 0px; margin-right: 0px; } .navbar { margin: 0 0 0 -20px; padding: 0 0 0 20px; } .container{ padding: 0 20px; } #block-block-1{ padding: 0 20px; text-align: center; h2 { font-size: 34px; } a.btn { margin-bottom: 20px; margin-top: 5px; } } .view-slash-portfolio-4-columns{ .views-row{ background: none; text-align: center; .views-field-field-image img{ margin-left: -4px; } } .views-field-nothing{ display: none; } } .view-slash-sidebar-clients{ text-align: center; } .view-slash-client-logos { text-align: center; .views-field-field-image{ display: none; } } .view-slash-latest-news-home { .views-row{ margin-bottom: 20px; .views-field-field-image { float: none; margin-right: 16px; text-align: center; margin-bottom: 10px; } } } .view-id-slash_blog .views-row { background: none repeat scroll 0 0 transparent; } .view-slash-portfolio-4-columns .views-field-nothing { display: none; } } @media @tablet { .view-slash-portfolio-4-columns .views-field-nothing { display: none; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape){ .view-slash-portfolio-4-columns .views-field-nothing { display: none; } } .views-field-edit-node a { background: url("../images/edit.png") no-repeat scroll 0 2px transparent; color: white; font-size: 0.8em; height: 21px; margin-left: -5px; margin-top: 0px; padding: 2px 1px 1px 10px; position: absolute; width: 37px; z-index: 10; } .views-field-edit-node a:hover { background: url("../images/edit-hover.png") no-repeat scroll 0 2px transparent; color: #FF0000; } article.node footer{ clear: both; .widgets-element-horizontal{ margin-right: 10px; } }