/* VARIABLES & MIXINS - Color Palette ----------------------------------------------------------------------------------------------------*/ @white: #ffffff; @black: #000000; @brown: #553a2e; @brownTransparent: rgba(85, 58, 46, 0.8); @tan2: rgb(213, 202, 172); @tan: rgb(208, 199, 179); @lightTan: rgb(239, 239, 226); @orange: #b1511f; @golden: rgb(209, 159, 0); @darkGreen: #669900; @darkGrey: #666666; /* VARIABLES & MIXINS - Background Colors ----------------------------------------------------------------------------------------------------*/ @bodyColor: @tan; @headerColor: @tan; @sidebarColor: #aaa; @contentColor: #888; @featuredWidgetColor: rgba(247, 248, 248, 0.9); /* VARIABLES & MIXINS - Border Colors ----------------------------------------------------------------------------------------------------*/ @containerBorder: 1px solid red; @imgBorder: @black; /* VARIABLES & MIXINS - Font Colors ----------------------------------------------------------------------------------------------------*/ @primaryFontColor: #222; /* VARIABLES & MIXINS - Typography ----------------------------------------------------------------------------------------------------*/ @fontBaseSize: .8em; @navFontSize: 120%; @fontFamilyH: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; @fontFamilyP: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; @fontFamilyFirstLetter: Georgia, "Times New Roman", Times, serif; /* VARIABLES & MIXINS - Layout ----------------------------------------------------------------------------------------------------*/ @lineHeight: 1.3em; @margin: 10px 0 10px 0; @padding: 0px; @headerHeight: 101px; @footerHeight: 50px; /* COLOR GLOBALS ----------------------------------------------------------------------------------------------------*/ body { background: url() scroll @bodyColor; color: @primaryFontColor; #header { background-color: @headerColor; } a { color: @orange; text-decoration: none; } a:hover { color: @golden; } } /* TYPOGRAPHY GLOBALS ----------------------------------------------------------------------------------------------------*/ body { font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; color: @brown; } p { font-family: @fontFamilyP; font-size: @fontBaseSize * 1.2; line-height: @lineHeight; margin: 10px 0 15px 0; } h1 { font-size: 25px; } h2 { font-size: @fontBaseSize * 2; } h3 { font-size: @fontBaseSize * 1.7; } h4 { font-size: @fontBaseSize * 1.3; } h5 { font-size: 17px; } h6 { font-size: 15px; } br { height: 20px; } .bold { font-weight: 700; } a { font-size: @fontBaseSize * 1.3; } a:focus { outline: 1px dotted; } hr { border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0; margin: @margin; } ol { list-style: decimal; } ul { list-style: disc; } li { margin-left: 30px; } dl, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin: 0; padding: 0; } /* LAYOUT GLOBALS ----------------------------------------------------------------------------------------------------*/ #header { position: relative; height: @headerHeight; margin: 0 0 10px 0; #logo { position: absolute; top: 4px; left: 10px; margin: 10px 0 0 0; height: 80px; } #facebookLikeButton { position: absolute; top: 10px; right: 0px; /* height: 30px; */ /* width: 260px; */ /* padding: 0; */ } .menu { position: absolute; top: 56px; right: 0; border:none; border:0px; margin:0px; padding:0px; font-weight: 500; font-size: @navFontSize; z-index: 50000000; } } #footer { margin-top: 18px; height: @footerHeight; text-align: center; p { font-size: 95%; margin: 15px 0 0 0; } p.small { font-size: 80%; margin: 5px 0 0 0; color: rgb(162, 161, 113); } a { color: rgb(164, 145, 131); } a:hover { color: @orange; } } /* Chris Notes Link ----------------------------------------------------------------------------------------------------*/ #chrisNotesLink { float: right; margin: 15px 20px 15px 15px; color: @brown; } #chrisNotesLink:hover { color: @orange; } /* Contact Widget ----------------------------------------------------------------------------------------------------*/ .contactWidget { h2 { margin: 0 0 0 0; color: @brown; } h2 a { color: @brown; } h2 a:hover { color: @orange; } p { margin: 0 0 10px 0; } .contactAddressFirstLine { margin-bottom: 0; } #phoneDirLink { margin: 20px 0 16px 0; } .facebookButton img { margin-left: -3px; width: 140px; } .facebookButton:hover img { margin-top: -1px; margin-bottom: -3px; margin-left: -6px; width: 150px; } } /* Testimonial Panel ----------------------------------------------------------------------------------------------------*/ #testimonialPanel { background: @tan; height: 350px; padding: 20px 10px; margin-bottom: 0; text-align: left; a { font-weight: bold; } .testimonialBubble { background-color: @brown; outline:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; overflow:hidden; margin:15px 0 0 0; p { color: @white; font-style:italic; font: 1.1em/135% "Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; } } .testimonialTriangle { background: @tan; width: 160px; margin: 0 0 0 70px; img { margin: 0 0 0 105px; } .testimonialSpeaker { font-size: 1.2em; font-weight: bold; margin-right: 20px; text-align: right; } } } /* Various Widget ----------------------------------------------------------------------------------------------------*/ .navToTopButton { float: right; margin: -40px 0 0 0; img { width: 10px; height: 10px; margin: 0; } a { font-size: 80%; } .arrow { font-size: 140%; font-weight: 800; } } /* INDEX.PHP ----------------------------------------------------------------------------------------------------*/ #indexContainer { position: relative; #featuredImage { position: relative; margin: 0 0 21px 0; .slideshow { height: 400px; width: 940px; } #featuredImageWidget { float: left; position: absolute; top: 55px; left: 630px; height: 250px; width: 230px; background: rgb(247, 248, 248); /* IE Fallback */ background: @featuredWidgetColor; z-index: 7000; padding: 20px; } } .infoPanels { background: @lightTan; padding: 0 15px 15px 15px; height: 403px; a { margin: 0; } p { margin: 0; } h3 { padding: 10px 0 0 0; } img { float: left; margin-right: 10px; } } .suppliersInfoPanel { background: @lightTan; padding: 0 5px 15px 15px; height: 403px; position: relative; a { margin: 0; } hr { margin-right: 10px; } p { margin: 0; } h3 { padding: 10px 0 0 0; } img { float: left; margin-bottom: 10px; margin-right: 8px; border: solid 1px @tan; } img:hover { border: solid 1px @orange; } .supplierLeft img { margin-right: 22px; } .supplierLink { position: absolute; top: 388px; left: 140px; margin: 0; padding: 0; } } } /* PRODUCTS.PHP ----------------------------------------------------------------------------------------------------*/ #productsContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 0; } .pageDescription { background: @lightTan; margin: 6px 0 0 0; padding: 10px 0 30px 0; h2 { padding-left: 10px; } p { padding-left: 10px; padding-right: 10px; } } .productGridType { background: @lightTan; margin: 15px 0 0 0; padding: 10px; h3 { margin: -5px 0 0 0; } } .productHeader { background: @brown; margin: 60px 0 0 0; padding: 15px; color: @white; } .productGridItem { background: @lightTan; margin: 20px 0 0px 0; padding: 10px; h3 { margin: -5px 0 0 0; } img { margin-bottom: 0; } p { margin-top: 0; padding-top: 0; } } .productDescription { background: @lightTan; margin: 65px 0 0 0; padding: 15px; .slideshow { float: left; height: 140px; width: 358px; margin-right: 15px; } .navToTopButton { float: right; margin: -40px 0 0 0; img { margin: 0 0 0 0; } a { font-size: 80%; } } } #footer { margin-top: 50px; } } /* FEATURED.PHP ----------------------------------------------------------------------------------------------------*/ #featuredContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 0; } .pageDescription { background: @lightTan; margin: 6px 0 0 0; padding: 10px 0 10px 0; h2 { padding-left: 10px; } p { padding-left: 10px; padding-right: 10px; } } .productGridItem { background: @lightTan; margin: 15px 0 0 0; padding: 10px; h3 { margin: -5px 0 0 0; } } .productDescription { background: @lightTan; margin: 65px 0 0 0; /* height: 140px; */ padding: 15px; img { float: left; height: 140px; width: 358px; margin-right: 15px; } a { } p { margin-left: 373px; } ul { margin-left: 373px; } h3 { } } #timbertech p { margin-top: 5px; margin-bottom: 0px; } #footer { margin-top: 30px; } } /* SUPPLIERS.PHP ----------------------------------------------------------------------------------------------------*/ #suppliersContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 0; } .pageDescription { background: @lightTan; margin: 6px 0 0 0; padding: 10px 0 10px 0; h2 { padding-left: 10px; } p { padding-left: 10px; } } .productGridType { background: @lightTan; margin: 15px 0 0 0; padding: 10px; h3 { margin: -5px 0 0 0; } } .productHeader { background: @lightTan; margin: 40px 0 0 0; padding: 15px; } .productGridItem { background: @lightTan; margin: 10px 0 0 0; padding: 10px; h3 { margin: -5px 0 0 0; } img { border: solid 1px @tan; margin: -1px -1px -1px -1px; } } .productGridItem img:hover { border: solid 1px @orange; margin: -1px -1px -1px -1px; } .productDescription { background: @lightTan; margin: 65px 0 0 0; padding: 15px; .slideshow { float: left; height: 140px; width: 358px; margin-right: 15px; } .navToTopButton { float: right; margin: -40px 0 0 0; img { margin: 0 0 0 0; } a { font-size: 80%; } } } h3 { display: none; } .compressType { font-size: 120%; } #ourFriends { margin-top: 20px; } } /* SERVICES.PHP ----------------------------------------------------------------------------------------------------*/ #servicesContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 0; } .pageDescription { background: @lightTan; margin: 0 0 0 0; padding: 10px 0 10px 0; h2 { padding-left: 10px; } p { padding-left: 10px; } } .productGridItem { background: @lightTan; margin: 15px 0 0 0; padding: 10px; h3 { margin: -5px 0 0 0; } } .productDescription { background: @lightTan; margin: 65px 0 0 0; height: 140px; padding: 15px; img { float: left; height: 140px; width: 358px; margin-right: 15px; } p, h3 { } h3 { } } #timbertech p { margin-top: 5px; margin-bottom: 0px; } #footer { margin-top: 30px; } } /* RESOURCES.PHP ----------------------------------------------------------------------------------------------------*/ #resourcesContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 0; } .pageDescription { background: @lightTan; margin: 0 0 20px 0; padding: 10px 0 10px 0; .alpha .resourceGridItem { margin-left: 30px; } h2 { padding-left: 10px; } h3 { font-size: 120%; } p { padding-left: 10px; } } .resourceGridItem { background: @lightTan; margin: 0 0 0 0; padding: 10px; h3 { margin: 5px 0 0 0; } } .resourceDescription { background: @lightTan; margin: 65px 0 0 0; height: 140px; padding: 15px; img { float: left; height: 140px; width: 358px; margin-right: 15px; } p, h3 { } h3 { } } #timbertech p { margin-top: 5px; margin-bottom: 0px; } #footer { margin-top: 30px; } } /* ABOUT.PHP ----------------------------------------------------------------------------------------------------*/ #aboutContainer { #aboutContent { background: @lightTan; height: 710px; padding: 15px; h2 { margin-top: 0; } p { font-size: 110%; } img#pic1 { float: right; margin: 0 0 10px 15px; } img#pic2 { float: left; margin: 10px 15px 0 0; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 10px; } #newsPanel { background: @lightTan; height: 210px; padding: 15px; margin-bottom: 10px; h2 a { color: @brown; } h2 a:hover { color: @orange; } p { font-size: 140%; } a { font-size: 100%; } } } /* TESTIMONIAL.PHP ----------------------------------------------------------------------------------------------------*/ #testimonialsContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } .testimonialHeader { background: @brown; color: @white; padding: 15px; margin: 6px 0 0 0; h2 { margin-top: 0; } p { font-size: 110%; } } .testimonialContent { background: @lightTan; padding: 15px; margin: 0 0 20px 0; p { font-size: 110%; font-style: italic; } .testimonialName { font-style: normal; font-weight: 800; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 10px; } #aboutPanel { background: @lightTan; height: 210px; padding: 15px; margin-top: 20px; margin-bottom: 10px; h2 a { color: @brown; } h2 a:hover { color: @orange; } p { font-size: 140%; } a { font-size: 100%; } } #newsPanel { background: @lightTan; height: 210px; padding: 15px; margin-top: 20px; margin-bottom: 10px; h2 a { color: @brown; } h2 a:hover { color: @orange; } p { font-size: 140%; } a { font-size: 100%; } } } /* NEWS.PHP ----------------------------------------------------------------------------------------------------*/ #newsContainer { #featuredContent { #featuredImage { margin: 0 0 0 0; } .slideshow { height: 295px; width: 658px; } } .newsHeader { background: @brown; color: @white; padding: 15px; margin: 6px 0 0 0; h2 { margin-top: 0; } p { font-size: 110%; } } .newsContent { background: @lightTan; padding: 15px; margin: 0 0 45px 0; p { font-size: 110%; font-style: italic; } img { float: left; border: 4px solid @white; margin: 0 10px 10px 0; } .video { margin: 0 0 15px 0; } } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 10px; } #aboutPanel { background: @lightTan; height: 210px; padding: 15px; margin-top: 20px; margin-bottom: 10px; h2 a { color: @brown; } h2 a:hover { color: @orange; } p { font-size: 140%; } a { font-size: 100%; } } } /* CONTACT.PHP ----------------------------------------------------------------------------------------------------*/ .contactMapLink a { } #contactContainer { #contactDescription { background: @lightTan; padding: 15px; position: relative; height: 181px; margin-bottom: 10px; h2 { margin-top: 0; } p { font-size: 110%; width: 400px; } img { position: absolute; top: 10px; right: 10px; width: 200px; } } .contactContent { position: relative; background: @lightTan; padding: 15px 15px 15px 15px; margin: 20px 0 0 0; height: 670px; width: 290px; h3 { margin: 0; background: @brown; padding: 5px; /* margin: 55px -15px 15px -15px; */ margin: 55px 0 15px 0; color: @white; } .topContact { margin-top: 0px; } p { margin: 5px 0 5px 0; font-size: 110%; font-weight: 800; } .phoneNumber { position: absolute; right: 15px; text-align: right; font-weight: 400; } .mailLink { font-size: @fontBaseSize * 1.1; } hr { margin: 30px 0 20px 0; } } .contactContentLeft { margin: 10px 20px 10px 0; } .contactContentRight { margin: 10px 0 10px 20px; } #contactMap { border: 10px solid @lightTan; background: @lightTan; margin-top: 10px; margin-bottom: 40px; } #contactPanel { background: @lightTan; height: 252px; padding: 15px; margin-bottom: 10px; } #newsPanel { background: @lightTan; height: 210px; padding: 15px; margin-bottom: 10px; h2 a { color: @brown; } h2 a:hover { color: @orange; } p { font-size: 140%; } a { font-size: 100%; } } } /* NAVIGATION ----------------------------------------------------------------------------------------------------*/ /* .menu ul{ background:#333333; */ /* height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ color: @brown; display:block; line-height:35px; margin:0px; padding:0px 5px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: @orange url("images/hover.gif") bottom center no-repeat; color:@white; text-decoration:none; } .menu li ul{ background:@brown; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:8000; */ /*top:1em; /*left:0;*/ /* } .menu li:hover ul{ display:block; } .menu li li { background:url('images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:@orange url('images/hover_sub.gif') center left no-repeat; border:0px; color:@white; text-decoration:none; } .menu p{ clear:left; } */ /* Slideshow Plugin ----------------------------------------------------------------------------------------------------*/ .slideshow { margin: 0 auto 0 auto; } .slideshow img { padding: 0px; border: 1px solid #ccc; /* background-color: #eee; */ } #testimonialPanel { .slideshow { margin: 0 auto 0 auto; } .slideshow img { padding: 0px; border: none; } } /* Scrollable Plugin ----------------------------------------------------------------------------------------------------*/ /* root element for scrollable */ .scrollable { /* required settings */ position:relative; overflow:hidden; /* vertical scrollables have typically larger height than width but not now */ height: 200px; width: 280px; margin-top: 10px; } .actions { margin: 5px auto; text-align: center; } /* root element for scrollable items */ .scrollable .items { position:absolute; /* this time we have very large space for the height */ height:20000em; } /* Designer's Notes ----------------------------------------------------------------------------------------------------*/ p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 25.0px 'Helvetica Neue'; color: #553a2e} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px 'Helvetica Neue'; color: #ff0101} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px 'Helvetica Neue'; color: #553a2e; min-height: 15.0px} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 21.0px 'Helvetica Neue'; color: #553a2e} p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px 'Helvetica Neue'; color: #553a2e} p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px 'Helvetica Neue'; color: #553a2e} p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px 'Helvetica Neue'; color: #553a2e; min-height: 26.0px} p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px 'Helvetica Neue'; color: #553a2e} p.p9 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px 'Helvetica Neue'; color: #553a2e; background-color: #ccc8bd} li.li6 {margin: 5px 0.0px 0.0px 0.0px; font: 13.0px 'Helvetica Neue'; color: #553a2e} span.s1 {text-decoration: underline} ul.ul1 {list-style-type: disc; margin-left: 50px;}