body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .9em; color: #ffffff; background-image: url(/images/bg-pattern.jpg); } .text-input { background-color: #62788E;border: 1px solid #fff;padding: 4px;color: #fff;font-size: .9em;background: url(/images/input-background.jpg) repeat-x;} input.submit-btn { background-color: #62788E; border: none; color: #fff; font-size: .8em; letter-spacing: 1px; cursor: pointer;} .imgshadow {box-shadow: 6px 6px 10px #333333;-moz-box-shadow: 6px 6px 10px #333333;-webkit-box-shadow: 6px 6px 10px #333333;} #content p.error { padding: 7px 7px 5px 20px; background-color: #ffe4de; border: 1px solid #ffaab2; font-size: .9em; text-transform: uppercase; color: #7d080b; margin-bottom: 15px; width: 80%; } .success { width: 80%; padding: 7px 7px 5px 20px; background-color: #e8edc7; border: 1px solid #c1ca85; font-size: .9em; text-transform: uppercase; color: #2f4215; margin-bottom: 15px; } #wrapper {margin: 20px auto 0px auto;width: 800px;background-color: #62788E;padding: 10px 0px 0px 10px; -moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;box-shadow: 0px 0px 10px #333;-moz-box-shadow: 0px 0px 10px #333;-webkit-box-shadow: 0px 0px 10px #333;} #logo { height: 71px; text-indent: -9999px; background: url(/images/logo-rightbottom.png) no-repeat 0% 50%; } /* sidebar */ #sidebar { width: 165px; float: left; background: url(/images/navigation-background.jpg) no-repeat 25% 25%; border-right: 1px solid #ffffff; } ul#navigation li { border-bottom: 1px solid #ffffff; } ul#navigation li a.company { background: url(/images/company-link.png) left center no-repeat; text-indent: -9999px;} ul#navigation li.company {background: url(/images/icons/icon1.png) 70% 50% no-repeat;} ul#navigation li.company:hover, ul#navigation li.company.active { background: url(/images/icons/icon1hover.png) no-repeat 70% 50%; } ul#navigation li a.services { background: url(/images/services-link.png) left center no-repeat; text-indent: -9999px; } ul#navigation li.services {background: url(/images/icons/icon2.png) 70% 50% no-repeat;} ul#navigation li.services:hover, ul#navigation li.services.active { background: url(/images/icons/icon2hover.png) no-repeat 70% 50%; } ul#navigation li a.products { background: url(/images/products-link.png) left center no-repeat; text-indent: -9999px; } ul#navigation li.products { background: url(/images/icons/icon3.png) no-repeat 70% 50%;} ul#navigation li.products:hover, ul#navigation li.products.active { background: url(/images/icons/icon3hover.png) no-repeat 70% 50%; } ul#navigation li a.support { background: url(/images/support-link.png) left center no-repeat; text-indent: -9999px; } ul#navigation li.support { background: url(/images/icons/icon4.png) no-repeat 70% 50%; } ul#navigation li.support:hover, ul#navigation li.support.active { background: url(/images/icons/icon4hover.png) no-repeat 70% 50%; } ul#navigation li a.contacts { background: url(/images/contact-link.png) left center no-repeat; text-indent: -999px } ul#navigation li.contacts { background: url(/images/icons/icon5.png) no-repeat 70% 50%; } ul#navigation li.contacts:hover, ul#navigation li.contacts.active{ background: url(/images/icons/icon5hover.png) no-repeat 70% 50%; } ul#navigation li a.gallery { background: url(/images/gallery-link.png) left center no-repeat; text-indent: -999px } ul#navigation li.gallery { background: url(/images/icons/icon2.png) no-repeat 70% 50%; } ul#navigation li.gallery:hover, ul#navigation li.gallery.active{ background: url(/images/icons/icon2hover.png) no-repeat 70% 50%; } ul#navigation a { font-family: "Helvetica Narrow", sans-serif; text-decoration: none; font-size: 1.2em; color: #ffffff; padding: 13px; display: block; letter-spacing: 0em; } #newsletter { margin-top: 20px; } #newsletter h3 { text-indent: -9999px; height: 18px; background: url(/images/email-link.png) left center no-repeat; margin: 0px 0px 8px 0px;} #newsletter p { margin-bottom: 10px; } #newsletter input.submit-btn { float: right; margin-right: 20px; color: #25313b; } /* content */ #content { width: 580px; float: left; padding: 0px 0px 0px 30px; font-size: .9em; } #content a { color: #25313b; font-size: .9em;} #content p { width: 100%; line-height: 19px; } #content h3 { background: url(/images/icons/arrow.jpg) no-repeat left center; padding-left: 15px; font-size: 1em; color: #25313b; } /* index */ #content p#company-heading { text-indent: -9999px; background: url(/images/companyprofile-heading.jpg) no-repeat; height: 25px; margin: 0px 0px 10px 0px; } #content p#what-heading { text-indent: -9999px; background: url(/images/whatwedo-heading.jpg) no-repeat; height: 20px; margin: 40px 0px 15px 0px; } #content div.services { margin: 15px 0px 10px 0px; float: left; width: 100%;} #content div.services img { float: left; } #content div.service { float: left; width: 84%; padding: 0px 0px 15px 0px; margin: 0px 0px 0px 15px; width: 80%;} #music { height: 81px; background: url(/images/music-background.jpg) no-repeat right bottom; clear: both; } #music span.songs {float: right; margin-top: 50px;} /* services */ #content p#services-heading { text-indent: -9999px; background: url(/images/service-services.jpg) no-repeat; height: 21px; margin: 0px 0px 10px 0px; } #content p#custom-heading { text-indent: -9999px; background: url(/images/service-customwork.jpg) no-repeat; height: 21px; margin: 0px 0px 10px 0px; float:left; width: 100%} #content ul { float: left; width: 50%; margin-left: 55px; color: #25313b; font-size: .9em; margin-top: 10px;} #content li {list-style-image: url(/images/icons/arrow.jpg) } /* customer support */ #content p#cs-heading {text-indent: -9999px; background: url(/images/cs-heading.jpg) no-repeat; height: 25px; margin: 0px 0px 10px 0px;} /* quick contact */ #content p#qc-heading {text-indent: -9999px; background: url(/images/qc-heading.jpg) no-repeat; height: 21px; margin: 0px 0px 10px 0px; )} #content p#qc-info {text-indent: -9999px; background: url(/images/qc-contactinfo.jpg) no-repeat; height: 21px; margin: 55px 0px 10px 0px; )} #content form {margin: 0px 0px 0px 30px;} #content form input, #content form textarea { color: #25313b; font-size: .8em; width: 250px;} #content form input.submit-btn { float: left; background-color: #ccc; padding: 4px; width: 261px; border: 1px solid #999;} #content form input.submit-btn:hover { background-color: #999; border: 1px solid #ccc;} #content form p { margin: 0px 0px 5px 0px;} #content form p label { top:0; left:0} /* products */ #content p#product-heading { text-indent: -9999px; background: url(/images/products-heading.jpg) no-repeat; height: 21px; margin: 0px 0px 10px 0px; } #product { margin: 0px 0px 0px 30px;} #product h2 { font-family: "Courier New", Courier, Monaco, monospace; font-size: 1.7em; margin: 0px 0px 15px 0px; letter-spacing: .05em;} #product p { margin: 10px 0px 0px 0px; float: left; width: 100%; padding: 0px 0px 10px 0px; } #product ul li { font-size: 1.1em; margin-bottom: 3px;} #image {float: left; width: 200px; } #image a { display: block; padding-left: 20px; background: url(/images/icons/magnifying.jpg) no-repeat left center; margin-top: 10px;} #product-nav { width: 100%; float: left; margin: 15px 0px 15px 0px; border-top: 1px dotted #fff; padding: 15px 0 0 0;} #product-nav span {padding: 0px 6px 3px 15px; background: url(/images/icons/arrow.jpg) no-repeat left center; font-size: 1.1em; color: #25313b; cursor: pointer;} #product-nav span.active {background: url(/images/icons/arrow-down.jpg) no-repeat left center; } #slides {width: 100%;} #slides label { width: 125px; float: left; margin: 0px 15px 0px 0px; text-align: right;} #slides input.submit-btn { float: right; margin: 10px 45px 0px 0px; } /* Gallery */ #content p#gallery-heading {text-indent: -9999px; background: url(/images/gallery-heading.jpg) no-repeat; height: 28px; margin: 0px 0px 10px 0px;} /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { background:url("/images/h300.png") repeat-x scroll 0 0 transparent; border:1px solid #CCCCCC; height:93px; overflow:hidden; position:relative; width:495px; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* single scrollable item */ .scrollable img { float:left; margin:5px 0px 0px 16px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; height:75px; -moz-border-radius:4px; -webkit-border-radius:4px; } /* active item */ .scrollable .active { border:2px solid #000; z-index:9999; position:relative; } /* this makes it possible to add next button beside scrollable */ .scrollable { float:left; } /* prev, next, prevPage and nextPage buttons */ a.browse { background:url(/images/hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px; } /* right */ a.right { background-position: 0 -30px; clear:right; margin-right: 0px;} a.right:hover { background-position:-30px -30px; } a.right:active { background-position:-60px -30px; } /* left */ a.left { margin-left: 0px; } a.left:hover { background-position:-30px 0; } a.left:active { background-position:-60px 0; } /* up and down */ a.up, a.down { background:url(/images/vert_large.png) no-repeat; float: none; margin: 10px 50px; } /* up */ a.up:hover { background-position:-30px 0; } a.up:active { background-position:-60px 0; } /* down */ a.down { background-position: 0 -30px; } a.down:hover { background-position:-30px -30px; } a.down:active { background-position:-60px -30px; } /* disabled navigational button */ a.disabled { visibility:hidden !important; } /* styling for the image wrapper */ #image_wrap { /* dimensions */ width:530px; margin:15px 0 15px 20px; padding:15px 0; /* centered */ text-align:center; /* some "skinning" */ background-color:#efefef; border:2px solid #fff; outline:1px solid #ddd; -moz-ouline-radius:4px; } /* footer */ #footer { width: 800px; margin: 10px auto 0px auto; text-align: right; font-size: .7em; background: url(/images/crest.png) no-repeat center right; height: 40px; padding: 15px 0 0 0;} #footer p { padding-right: 35px; } #content #contact_address { text-align: center; width: 300px; margin-top: 10px; } #content #company_name { font-size: 1.4em; }