/********************************************************************************************** CSS on Sails Title: Site Name Author: XHTMLized (http://www.xhtmlized.com/) Date: June 2009 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility Navigation & Hide 1.3 Clearfix 1.4 Default Styles 2. LAYOUT 2.1 Structure 2.2 Header 2.3 Navigation 2.4 Content 2.5 Sidebar 2.6 Footer ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.2 Accessibility Navigation & Hide -----------------------------------------------------------------------------------------------*/ ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; } /* 1.3 Clearfix -----------------------------------------------------------------------------------------------*/ .clearfix:after, .wrap-inside:after, #zd-content1:after, #service-buttons ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 1.4 Default Styles -----------------------------------------------------------------------------------------------*/ body { background: #000 url(../images/bg-body.png) repeat-x left top; color: #707070; font: 62.5%/1.3 "Verdana", "Arial", "Tahoma", "Helvetica", sans-serif; text-align: center; margin: 0; padding: 0 } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } del { text-decoration: line-through; } th { font-weight: normal; } address, cite, dfn { font-style: normal; } abbr, acronym { border-bottom: 1px dotted #999; cursor: help; } input, textarea, select { font-family: "Arial", "Helvetica", sans-serif; } a { color: #00f; text-decoration: none; outline: none } a:hover { color: #f00; text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0 } #content hr { display: block } #content img { margin: 0 } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 2.1 Structure -----------------------------------------------------------------------------------------------*/ .container { width: 998px; position: relative; margin: 0 auto -4px auto; text-align: left; font-size: 1.2em } .wrap { position: relative; background: url(../images/bg-content_repeat.png) repeat-y right top } #content { width: 700px; float: right } #sidebar { width: 260px; float: left } #footer { clear: both; text-align: center; padding: 15px 0 5px 0; font-size: 0.83em; height: 40px } /* 2.2 Header -----------------------------------------------------------------------------------------------*/ #masthead { position: relative; height: 198px; background: url(../images/bg-masthead.png) no-repeat 114px top } #masthead .logo { width: 280px; background: url(../images/bg-sidebar.png) no-repeat center; height: 198px; text-align: center } #masthead .logo .site-name, #masthead .logo .site-name span { width: 159px; height: 169px; position: relative; display: block; overflow: hidden; cursor: pointer } #masthead .logo .site-name { top: 28px; margin: 0 auto; border-bottom: 1px solid #7b7b7b } #masthead .logo .site-name span { position: absolute; top: 0; left: 0; background: url(../images/logo.png) no-repeat } #masthead .text-resizer { display: block; width: 200px; height: 70px; background: url(../images/bg-text_sizer.png) no-repeat; position: absolute; top: 0; right: 0; color: #fff } #masthead .text-resizer ul { padding: 13px 0 0 48px; margin: 0 } #masthead .text-resizer ul li { display: block; padding: 0 5px 0 0; float: left; line-height: 12px; font-size: 12px } #masthead .text-resizer ul li.decrease { border-right: 1px solid #fff; padding: 0 10px 0 5px } #masthead .text-resizer ul li.increase { padding-left: 10px } #masthead .text-resizer ul li a { color: #fff } #masthead .text-resizer ul li a:hover, #masthead .text-resizer ul li a:active { color: #c8df00; text-decoration: underline } #masthead .phone { position: absolute; top: 10px; right: 190px; color: #e0e0e0; font-size: 16px } /* 2.3 Navigation -----------------------------------------------------------------------------------------------*/ .nav { width: 280px; background: url(../images/bg-sidebar.png) no-repeat center bottom; text-align: center; padding-bottom: 45px } .nav #zd-nav-container { width: 200px; text-align: left; padding: 30px 0 0 60px; color: #fff; position: relative } .nav #zd-nav-container ul { margin: 0; padding: 0 } .nav #zd-nav-container li a, .nav #zd-nav-container li a:visited { color: #fff } .nav #zd-nav-container li a:hover, .nav #zd-nav-container li.zd-nav-active li a:hover, .nav #zd-nav-container li.zd-nav-active li.zd-nav-active li a:hover { color: #00ad35; text-decoration: underline } .nav #zd-nav-container li.zd-nav-active a.zd-nav-current { color: #c8df00 } .nav #zd-nav-container li.level-0 { padding-bottom: 20px; list-style: disc; margin-left: 15px; font-size: 1.2em } .nav #zd-nav-container li { background: none; list-style: disc; left: 0; padding: 0; padding-top: 3px; margin-left: 15px } .nav #zd-nav-container li.zd-nav-active, .nav #zd-nav-container li.zd-nav-sub-active { background: url(../images/ico-green_arrow.png) no-repeat left 2px; list-style: none; position: relative; left: -15px; padding-left: 15px } .nav #zd-nav-container li.as-parent { background: none !important; list-style: disc !important; left: 0 !important; padding-left: 0 !important } .nav #zd-nav-container li.as-parent a.zd-nav-current { color: #fff } .nav #zd-nav-container li.as-active a.zd-nav-current, .nav #zd-nav-container li.as-active a.zd-nav-sub-current { color: #c8df00 !important } .nav #zd-nav-container li.level-1 { font-size: 0.9em !important } .nav #zd-nav-container li.level-2, .nav #zd-nav-container li.level-3 { font-size: 1em !important } /* 2.4 Content -----------------------------------------------------------------------------------------------*/ .wrap-inside { background: url(../images/bg-content_ornament.png) no-repeat -11px top } #content { padding: 0 0 30px; color: #333; min-height: 500px; height: auto !Important; height: 500px; left: -17px; position: relative } #content .zd-breadcrumbs { display: block; padding-top: 18px; margin-bottom: -6px } #content .zd-breadcrumbs a { color: #0000bd; font-weight: normal } #zd-primary-image { float: right; margin: 25px 0 10px 60px ; position: relative; right: 40px } #zd-primary-image img.primary-image { border: 1px solid #7b7b7b } #zd-content1 { padding-right: 45px } #zd-content1 p { margin-bottom: 10px; line-height: 20px } #content #page-title { font-size: 1.8em; color: #00ad35; font-weight: normal; margin-bottom: 10px; margin-top: 20px } #zd-content1 a, #zd-content2 a{ color: #0000bd } #zd-content1 a:visited, #zd-content2 a:visited { color: #90007f } #zd-content1 a:active, #zd-content1 a:hover, #zd-content2 a:hover, #zd-content2 a:visited { color: #0000bd; text-decoration: underline } #zd-content1 ul, #zd-content2 ul, #zd-content1 ol, #zd-content2 ol { padding: 0; margin: 0 } #zd-content1 ul li, #zd-content2 ul li, #zd-content1 ol li, #zd-content2 ol li { list-style: disc; margin-left: 35px; line-height: 20px } #zd-content1 ol li { list-style-type: decimal } #zd-content2 { border: 1px solid #7b7b7b; background: #f3f3f3; padding: 25px; width: 167px; float: right; margin: 25px 0 10px 60px; position: relative; right: 40px; clear: right } #zd-content2 p { margin-bottom: 10px; line-height: 20px } #zd-content2 h4, #zd-content2 h3 { font-size: 15px; color: #00ad35; font-weight: normal; margin-bottom: 10px } #zd-content2 h4 { display: none } #service-buttons { clear: both } #service-buttons ul { margin: 0; padding: 0 } #service-buttons ul li { display: block; float: left; width: 109px; height: 280px; margin: 0; padding: 0 } #service-buttons ul li.storage { margin-right: 0 } #service-buttons ul li a { display: block; width: 110px; height: 280px; text-indent: -9999em } #service-buttons ul li.design a { background: url(../images/bg-services_design.png) no-repeat left top } #service-buttons ul li.graphic a { background: url(../images/bg-services_graphics.png) no-repeat } #service-buttons ul li.fabrication a { background: url(../images/bg-services_fabrication.png) no-repeat } #service-buttons ul li.installation a { background: url(../images/bg-services_installation.png) no-repeat } #service-buttons ul li.rental a { background: url(../images/bg-services_rental.png) no-repeat } #service-buttons ul li.storage a { background: url(../images/bg-services_storage.png) no-repeat } #service-buttons ul li a:hover { background-position: 0 -280px } .feedback-form { margin-top: 20px !important } .feedback-form td.label-cell { width: 140px !important } .feedback-form { width: 520px } .feedback-form h4 { font-size: 1.3em !important } .feedback-form textarea { width: 480px !important } /* 2.5 Sidebar -----------------------------------------------------------------------------------------------*/ #sidebar .secondary-side { width: 280px; background: url(../images/bg-sidebar2.png) no-repeat center top; padding-bottom: 30px; position: absolute; bottom: -60px; height: 390px } #sidebar .secondary-side #content3 { width: 176px; padding: 60px 0 0 60px; color: #fff } #sidebar .secondary-side #content3 h4 { color: #c8df00; font-size: 15px; font-weight: normal; padding-bottom: 15px } #sidebar .secondary-side #content3 dl { margin: 0 } #sidebar .secondary-side #content3 dt { font-weight: bold } #sidebar .secondary-side #content3 dd { color: #cbcbcb; padding-bottom: 15px; margin: 0 } #sidebar .secondary-side #content3 a, #sidebar .secondary-side #content3 a:hover, #sidebar .secondary-side #content3 a:active { color: #c8df00 } #sidebar .secondary-side #content3 a:visited { color: #00ad35 } #sidebar .secondary-side #content3 a:hover, #sidebar .secondary-side #content3 a:active { text-decoration: underline } /* 2.6 Footer -----------------------------------------------------------------------------------------------*/ #footer a, #footer a:hover { color: #707070; text-decoration: none } #footer p { padding-left: 100px } .foot-indent p { padding-left: 222px !important } /** * Rental Solutions Gallery **/ .jsgal-shell .nav-controls { display: none !important; } .jsgal-shell .jsgal-nav { position: absolute; top: -3px; left: 439px; } .jsgal-shell .image-shell { margin-top: 65px !important; } .jsgal-shell .image-shell img { border: 1px solid rgb(123, 123, 123) !important; } .jsgal-shell .detail-shell { min-height: 200px; } .jsgal-shell .detail-shell h3 { padding: 0; margin: 20px 0; color: #00ad35; font-weight: normal; } .jsgal-shell .nav-shell ul li { margin: 3px !important; } .jsgal-shell .image-desc { width: 430px; } .jsgal-shell .nav-shell ul li img { border: 1px solid rgb(123, 123, 123) !important; } /** * Rental Solutions Slideshow **/ #zd-template-slideshow-609 { position: absolute; top: -240px; left: 0px; width: 217px; height: 210px; border: 1px solid rgb(123, 123, 123) !important; } #zd-content2.exhibit-services { margin-top: 240px; } #cat-dropdown-shell { display: none; }