/* CSS Main styles www.janhamptonviolins.com website by Jennifer Watson */ html {} body.home { background: #f5f3e0 url(../images/layout/body-bg.jpg) repeat-x; margin:0; padding:0; font-family:Georgia, "Times New Roman", Times, serif;} body { background: #f8f8f3 url(../images/layout/body-sub-bg.jpg) repeat-x; margin:0; padding:0; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} /* Links */ a {color:#510a21; text-decoration:none;} a:hover {border-bottom: 1px solid #999999; background:#fff;} /* MAIN LAYOUT -------------------------------------------*/ #wrapper { margin:0 auto; padding:0; width:970px;} #container {margin:0 auto; padding:0; width:1002px; height:100%; background: #f5f3e0 url(../images/layout/container-sub-bg.gif) repeat-y;} .container-gutter {margin:0 60px; padding:40px 0 80px;} header { margin:0 auto; padding:0; background: #510a21 top; width: 1002px; height:111px;} /* Homepage (more homepage styles below) */ #main-img {margin:0 auto; padding:0; width:941px;} /* Subpages */ /* Main navigation -------------------------------------------*/ ul#mainNav {display:block; list-style:none; margin:0 auto; padding:0; width:812px; height:45px; z-index:10; position:relative; clear: both; margin-top:15px;} ul#mainNav li {float:left; color:#000; margin:0; padding:0; display:inline;} ul#mainNav li a {border:0; text-decoration:none; text-indent:-9999px; display:block; margin:0; padding:0; height:45px; background:url(../images/layout/mainNav-bg.gif) no-repeat 0 0;} ul#mainNav li a:focus {border:0; outline:none;} /* set width of each link */ ul#mainNav li.nav-home a {width: 103px;} ul#mainNav li.nav-rentals a {width: 113px;} ul#mainNav li.nav-sales a {width: 93px;} ul#mainNav li.nav-repairs a {width: 252px;} ul#mainNav li.nav-about a {width: 115px;} ul#mainNav li.nav-directions a {width: 136px;} /* set background img position */ /* home */ ul#mainNav li.nav-home a:link, ul#mainNav li.nav-home a:visited {background-position: 0 0;} ul#mainNav li.nav-home a:hover, ul#mainNav li.nav-home a:focus {background-position: 0 -45px;} /* rentals */ ul#mainNav li.nav-rentals a:link, ul#mainNav li.nav-rentals a:visited {background-position: -103px 0;} ul#mainNav li.nav-rentals a:hover, ul#mainNav li.nav-rentals a:focus {background-position: -103px -45px;} body.rentals ul#mainNav li.nav-rentals a:link, body.rentals ul#mainNav li.nav-rentals a:visited {background-position: -103px -90px;} /* sales */ ul#mainNav li.nav-sales a:link, ul#mainNav li.nav-sales a:visited {background-position: -216px 0;} ul#mainNav li.nav-sales a:hover, ul#mainNav li.nav-sales a:focus {background-position: -216px -45px;} body.sales ul#mainNav li.nav-sales a:link, body.sales ul#mainNav li.nav-sales a:visited {background-position: -216px -90px;} /* repairs */ ul#mainNav li.nav-repairs a:link, ul#mainNav li.nav-repairs a:visited {background-position: -309px 0;} ul#mainNav li.nav-repairs a:hover, ul#mainNav li.nav-repairs a:focus {background-position: -309px -45px;} body.repairs ul#mainNav li.nav-repairs a:link, body.repairs ul#mainNav li.nav-repairs a:visited {background-position: -309px -90px;} /* about */ ul#mainNav li.nav-about a:link, ul#mainNav li.nav-about a:visited {background-position: -561px 0;} ul#mainNav li.nav-about a:hover, ul#mainNav li.nav-about a:focus {background-position: -561px -45px;} body.about ul#mainNav li.nav-about a:link, body.about ul#mainNav li.nav-about a:visited {background-position: -561px -90px;} /* directions */ ul#mainNav li.nav-directions a:link, ul#mainNav li.nav-directions a:visited {background-position: -676px 0;} ul#mainNav li.nav-directions a:hover, ul#mainNav li.nav-directions a:focus {background-position: -676px -45px;} body.directions ul#mainNav li.nav-directions a:link, body.directions ul#mainNav li.nav-directions a:visited {background-position: -676px -90px;} /* Footer -------------------------------------------*/ #footer-wrapper {width:100%; background:#443021 url(../images/layout/footer-bg.jpg) repeat; min-width:1005px;} footer {margin:0 auto; padding:20px 0 20px 60px; width:1005px;} footer .gutter { margin: 30px;} footer p { color:#fff; font-size:.875em; /* 14px / 16px */ line-height: 1.3em;} footer a {color:#d3cca2;} footer a:hover {border-bottom:1px solid #d3cca2;} #mobileLink {float:right; margin-right:100px; margin-top:20px;} #mobileLink a:hover {text-decoration:none; border-bottom:none; background:none;} #mobileLink p {color:#d3cca2; font-size:.75em; /* 12px / 16px */ text-align:center; margin:0 auto; padding:5px 0 0 0;} /* Typography -------------------------------------------*/ #container h1 {color:#43081c; font-size: 1.75em; /* 28px / 16px */ font-weight:500;} #container h2 {color:#663300; font-size: 1.3125em; /* 21px / 16px */ font-weight:normal; margin-top:25px; padding-bottom:3px; border-bottom: 1px dotted #663300;} #container h2.short {width:400px;} #container h3 {color:#663300; font-size: 1.125em; /* 18px / 16px */ font-weight:normal; margin-top:30px;} #container h4 {color:#454543; font-size:1em; margin-bottom:0; padding-bottom:0;} #container p {font-family:Arial, Helvetica, sans-serif; font-size:.875em; /* 14px / 16px */ line-height: 1.4em; margin-top:0; padding-top:0;} #container p.smtext {font-size:.75em; /* 12px / 16px */ } #container p.intro { font-size:1em; line-height:1.5em; font-family: Georgia, "Times New Roman", Times, serif;} #container ul {margin:0 0 15px 0; padding:0; font-family:Arial, Helvetica, sans-serif; margin-left:15px; font-size:.875em; /* 14px / 16px */ } #home-info p.flyerLink {font-size:1.1em; text-align:center; color:#5C1C2D; margin:0 auto 30px auto;} #container ul li { list-style:none; margin:5px 0; background:url(../images/layout/sub-list-bg.gif) no-repeat 0 7px; padding-left:13px; line-height:1.4em;} #luthierList {display:block;} #luthierList ul {margin-left:235px;} /* Images */ .imgright {float: right; padding:2px; border: 2px solid #998e7c; margin: 0 0 1.5em 1em;} .imgleft {float: left; padding:2px; border: 2px solid #998e7c; margin: 0 1em 1.5em 0;} .imgcenter {padding:2px; border: 2px solid #998e7c; margin: 0 auto 2.5em auto; display: block;} /* Misc. -------------------------------------------*/ .clear {clear:both;} img {border:0;} .bio {margin:15px 0; padding:0; display:block; clear:both;} #toolbar {float:right; margin-top:50px;} #toolbar h1 {color:#43081c; font-size:.9375em; /* 15px / 16px */ } #toolbar .gutter {background:#e3dfc0; width:275px; padding:15px;} #toolbar p {font-family:Arial, Helvetica, sans-serif; font-size:.8125em; /* 13px / 16px */} #toolbar img {border: 2px solid #998e7c; margin: 0 0 1.5em 2.2em;} .column1 {float:left; width:28%;} .column2 {float:left; width:30%;} #download {background:#657981; margin:0; padding:10px; width:320px; border: 2px solid #3a484f;} #download p {color:#fff; margin:0; padding:0;} #download a {color:#fff;} #download a:hover {color:#ffdb82; background:none; border-bottom:none;} .pullbox {background:#f7f8f2; width:50%; margin:0; padding:10px; border:1px #bcbcbc solid;} /* HOMEPAGE - extra styles -------------------------------------------*/ #home-info {margin:30px 0 0 0; padding:0; width:1005px;} #home-info h1 { font-size: 1.375em; /* 22px / 16px */ color: #212121; font-weight:normal; margin:0; padding:0;} #home-info h2 { font-size: 1em; color: #792913; font-weight:normal; font-style:italic; margin:0; padding:0;} #home-info .col1 {float:left; width:38%; margin-left:50px;} #home-info .col2 {float:right; width:42%; margin-right:50px; background:url(../images/layout/info-divider.gif) no-repeat left; padding-left:60px;} #home-info p {font-size:.8125em; /* 13px / 16px */ line-height: 1.4em;} #home-info ul {margin:15px 0 0 0; padding:0; list-style:none; font-size:.8125em; /* 13px / 16px */ } #home-info ul li { margin: 8px 0 0 0; padding:0 0 0 15px; background:url(../images/layout/list-bg.gif) no-repeat 0 5px;} #alert { width:400px; height: 88px; background: url(../images/layout/alert-bg.gif) no-repeat; margin:20px auto 0; padding:20px;} #alert p {color:#510a21; font-size: 1em; text-align:center;} .binky {display:block; margin-left:50px;} .binky p {float:left; margin-top:40px;} .compliance {float:right; margin-top:40px; margin-right:70px;} .compliance a:hover {border-bottom:none; padding-bottom:0;} /********************************* Media Queries *********************************/