@import "reset.css";

a {
	text-decoration: none;
	color: #a8bac3;
	}

a:hover {
    color: #2598c3;
    text-decoration: underline;
    }
    
.clear {
	clear: both;
	width: 100%;
	height: 1px;
	visibility: hidden;
	}
	
.left {
    float: left;
    }

.right {
    float: right;
    }
    
h1 {
    font-size: 21px;
    margin: 0 0 36px;
    }
    
p {
    color: #333;
    }

.unorderedList {
    list-style: disc;
    padding: 0 0 0 16px;
    margin: 0 0 12px;
    }
    
body {
	font: 12px/17px Arial, sans-serif;
	background: #e9e9e9;
	color: #333;
	}
	
div#page {
	width: 984px;
	margin: 20px auto;
	}
	
div#header h1 a {
	float: left;
	display: block;
	width: 180px;
	height: 38px;
	margin: 0 0 14px;
	background: url(../img/logo-klh-audio.png) no-repeat;
	text-indent: -9999px;
	}
	
p#tagline {
	padding: 25px 0 0;
	text-align: right;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	}
	
div#navBar {
	clear: both;
	width: 984px;
	height: 37px;
	margin: 0 0 12px;
	background: url(../img/bg-navbar.png) no-repeat;
	}
	
ul#majorNav li {
    display: inline;
    width: 111px;
    }
    
ul#majorNav li a {
	float: left;
	display: block;
	width: 111px;
	margin: 4px 0 0 4px;
	height: 31px;
	text-indent: -9999px;
	}

ul#majorNav li.home a {
	background: url(../img/major-nav-home.png) 0 0 no-repeat ;
	}
	
ul#majorNav li.products a {
	background: url(../img/major-nav-products.png) 0 0 no-repeat ;
	}
	
ul#majorNav li.company a {
	background: url(../img/major-nav-company.png) 0 0 no-repeat ;
	}

ul#majorNav li a:hover {
	background-position: -111px 0;
	}
	
ul#majorNav li a.currentPage {
	background-position: 100% 0;
	}

ul#minorNav {
	float: right;
	position: relative;
	top: 10px;
	right: 10px;
	text-align: right;
	}
	
ul#minorNav li {
	display: inline;
	color: #999;
	}
	
ul#minorNav li a {	
	padding: 0 4px;
	font-size: 11px;
	color: #999;
	text-decoration: none;
	}

ul#minorNav li a:hover {
	color: #fff;
	text-decoration: underline;
	}

ul#minorNav li a.currentPage {
	color: #6d6b6b;
	}

div#billboard {
    position: relative;
	width: 960px;
	height: 410px;
	padding: 12px;
	margin: 0 0 12px;
	background: url(../img/bg-billboard.png) no-repeat;
	overflow: hidden;
	}

div#billboardSlides {
    position: relative;
    width: 960px;
    height: 410px;
    overflow: hidden;
    }

div#billboardSlideOne {
    position: relative;
    }
    
div#billboardSlideOne p a {
    position: absolute;
    top: 296px;
    right: 0;
    width: 268px;
    height: 74px;
    background: url(../img/button-landscape-rock-speaker-pair-GRN800.jpg) no-repeat 0 -168px;
    text-indent: -9999px;
    }

div#billboardSlideOne p a:hover {
    background-position: 0 0;
    }

div#billboardSlideTwo {
    position: relative;
    }
    
div#billboardSlideTwo p a {
    position: absolute;
    top: 296px;
    right: 0;
    width: 197px;
    height: 74px;
    background: url(../img/button-hifi-micro-system-KS600.jpg) no-repeat 0 -168px;
    text-indent: -9999px;
    }

div#billboardSlideTwo p a:hover {
    background-position: 0 0;
    }

div#billboardSlideThree {
    position: relative;
    }
    
div#featuredProduct {
    position: relative;
	width: 984px;
	margin: 0 0 12px;
	}

div#featuredProductOne {
    position: relative;
	float: left;
	width: 321px;
	margin: 0 10px 0 0;
	}

div#featuredProductOne p a {
    position: absolute;
    top: 68px;
    right: 0;
    width: 125px;
    height: 52px;
    background: url(../img/button-indoor-outdoor-speaker-pair-K-PRO-5.jpg) no-repeat 0 -52px ;
    text-indent: -9999px
    }

div#featuredProductOne p a:hover {
    background-position: 0 0;
    }
    
div#featuredProductTwo {
    position: relative;
	float: left;
	width: 321px;
	height: 148px;
	overflow: hidden;
	}
    
div#featuredProductTwo p a {
    position: absolute;
    top: 68px;
    right: 0;
    width: 125px;
    height: 52px;
    background: url(../img/button-indoor-outdoor-speaker-pair-S-PRO4.jpg) no-repeat 0 -52px ;
    text-indent: -9999px
    }

div#featuredProductTwo p a:hover {
    background-position: 0 0;
    }


div#featuredProductThree {
	float: right;
	width: 321px;
	}

div#featuredProductThree p a {
    position: absolute;
    top: 68px;
    right: 0;
    width: 125px;
    height: 52px;
    background: url(../img/button-bookshelf-speaker-pair-B-PRO6.jpg) no-repeat 0 -52px ;
    text-indent: -9999px
    }

div#featuredProductThree p a:hover {
    background-position: 0 0;
    }

div.home div#footer {
    margin: 0 0 12px;
    }

div#footer {
    width: 984px;
    padding: 0 0 30px;
    margin: 30px 0 0;
    }

div#footer p {
	float: left;
    width: 49%;
	text-align: right;
	color: #5e5e5e;
	}
	
ul#footerNav {
	float: right;
	width: 49%;
	}
	
ul#footerNav li {
	display: inline;
	color: #5E5E5E;
	}

ul#footerNav li a {
	color: #5E5E5E;
	}
	
ul#footerNav li a:hover {
	color: #2598c3;
	}

ul#footerNav li a.currentPage {
    color: #60a6c0;
    }
    
div#wrapper {
    position: relative;
    width: 924px;
    padding: 60px 0 30px 60px;
    background: #fff url(../img/bg-content-top.png) no-repeat;
    }

div#content {
    width: 460px;
    min-height: 460px;
    padding: 0 464px 0 0;
    }

div#content p {
    margin: 0 0 12px;
    }

div#products {
    position: relative;
    width: 984px;
    padding: 9px 0 30px 0;
    background: #fff url(../img/bg-content-top.png) no-repeat;
    }
    
ul#productList {
    width: 100%;
    margin: 0 0 12px 8px;
    }
    
ul#productList li {
    float: left;
    width: 239px;
    height: 205px;
    margin: 0 4px 0 0;
    }

ul#productList li p {
    padding: 4px 8px;
    font-weight: bold;
    line-height: 14px;
    }

ul#productList li p a {
    color: #a8bac3;
    }

ul#productList li p a:hover {
    color: #2598c3;
    }

p.backTop {
    display: block;
    float: right;
    width: 105px;
    height: 29px;
    margin: 0 24px 0 0;
    background: url(../img/button-back-top-hover.png) no-repeat;
    text-indent: -9999px;
    }

p.backTop a {
    display: block;
    width: 105px;
    height: 29px;
    background: url(../img/button-back-top.png) no-repeat;
    }

p.backTop a:hover {
    background-image: none;
    }

div#productDetails {
    position: relative;
    width: 924px;
    padding: 65px 30px 40px;
    background: #fff url(../img/bg-content-top.png) no-repeat;
    }
    
div#nextPreviousTop {
    float: right;
    width: 65px;
    height: 21px;
    margin: -40px 0 0;
    }

div#nextPreviousBottom {
    float: right;
    width: 65px;
    }
 
p.next a {
    display: block;
    float: right;
    width: 20px;
    height: 21px;
    background: #000 url(../img/button-next.png) no-repeat 0 0;
    text-indent: -9999px;
    }

p.previous a {
    display: block;
    float: left;
    width: 20px;
    height: 21px;
    background: url(../img/button-previous.png) no-repeat 0 0;
    text-indent: -9999px;
    }

div#nextPreviousTop a:hover,
div#nextPreviousBottom a:hover {
    background-position: 0 -21px;
    }
    
div#productImage {
    float: left;
    width: 508px;
    }

div#productImageMain {
    width: 508px;
    margin: 0 0 24px;
    }
    
div#productImageOption p {
    float: right;
    width: 324px;
    margin: 48px 0 0 24px;
    color: #a8bac3;
    font-weight: bold;
    }
    
div#productImageIcons {
    width: 100%;
    padding: 48px 0 0;
    clear: both;
    }

div#productDescription {
    float: right;
    width: 360px;
    margin: 0 0 15px;
    }
    
div#productDescription h2 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: bold;
    }

div#productDescription h3.modelNumber {
    margin: 0 0 32px;
    font-weight: bold;
    }

div#productDescription h4 {
    margin: 0 0 8px;
    text-transform: uppercase;
    font-weight: bold;
    }

div#productDescription ul {
    margin: 0 0 21px;
    }
    
div#productDescription ul li {
    margin: 0 0 0 16px;
    list-style: disc;
    }
    
div#productDescription ul li ul li {
    margin: 0 0 0 16px;
    list-style: circle;
    }
    
div#productDescription p.pdf {
    display: block;
    width: 230px;
    height: 30px;
    margin: 0 0 21px;
    background: url(../img/icon-download-user-manual-hover.png) no-repeat;
    }

div#productDescription p.pdf a {
    display: block;
    width: 230px;
    height: 30px;
    background: url(../img/icon-download-user-manual.png) no-repeat;
    text-indent: -9999px;
    }
    
p.alert-specifications-subject-change {
    font-size: 11px;
    font-style: italic;
    }
    
div#productDescription p.pdf a:hover {
    background-image: none;
    }

div.company {
    background: url(../img/contact-page-graphic.jpg) no-repeat 100% 0;
    }

div.company h1 {
    margin: 0 0 14px;
    }

div.company h2 {
    font-size: 14px;
    color: #999;
    margin: 0 0 24px 0;
    }

p#contactUs {
    display: block;
    width: 101px;
    height: 29px;
    padding: 36px 0 0;
    background: url(../img/button-contact-us-hover.png) no-repeat 0 100%;
    text-indent: -9999px;
    }
    
p#contactUs a {
    display: block;
    width: 101px;
    height: 29px;
    background: url(../img/button-contact-us.png) no-repeat;
    }

p#contactUs a:hover {
    background-image: none;
    }

div.contact,
div.faq,
div.warranty {
    background: url(../img/contact-page-graphic.jpg) no-repeat 100% 0;
    }
    
div.contact form {
    float: right;
    width: 250px;
    margin: -145px 0 0 0;
    }

div.contact form p {
    text-align: right;
    }

div.contact label {
    display: block;
    margin: 0 0 6px;
    text-align: left;
    }

div.contact input,
div.contact select,
div.contact textarea {
    width: 245px;
    margin: 0 0 12px;
    text-align: left;
    }
    
div.contact textarea {
    height: 70px;
    }

p#sendMessage {
    display: block;
    float: right;
    width: 121px;
    height: 29px;
    background: url(../img/button-send-message-hover.png) no-repeat 0 0;
    }

p#sendMessage input {
    display: block;
    float: right;
    width: 121px;
    height: 29px;
    background: url(../img/button-send-message.png) no-repeat 0 0;
    text-indent: -9999px;
    }

p#sendMessage input:hover {
    background-image: none;
    }

div#errorMessage {
    width: 230px;
    padding: 9px;
    border: 1px solid #f00;
    margin: 0 0 12px;
    }
    
div#errorMessage ul li {
    color: #f00;
    font-size: 12px;
    font-style: italic;
    }

p.radioShack {
    width: 173px;
    height: 50px;
    background: url(../img/button-radioshack-hover.jpg) no-repeat;
    }
    
p.radioShack a {
    display: block;
    width: 173px;
    height: 50px;
    background: url(../img/button-radioshack.jpg) no-repeat;
    text-indent: -9999px;
    }

p.radioShack a:hover {
    background-image: none;
    }