/* 
    Spincyle Yarns Stylesheet
    design by Josh Parrish
    12/03/2005
    
    KeyLime Design
    http://keylime.nu
*/

/* general styles */
body {
    margin: 0px;
    padding: 0px;
    background: #cc6;
    color: #170c0e;
    font-family: Helvetica, Verdana, sans-serif;
}
h1, h2, h3, h4 {
    color: #4a3a25;
    font-family: "Trebuchet MS", "Trebuchet", sans-serif;
}
form {
    margin: 0px;
    padding: 0px;
}
a {
    color: #039;
}
a:hover {
    color: #06c;
}
a:visited {
    color: #639
}
img {
    border: none;
}
.small {
    margin: 2px;
    padding: 0px;
    font-size: x-small;
}

/* header styles */
#top {
    background: url(/graphics/yarn_bg-1.jpg) top right no-repeat;
}
#header {
    background: url(/graphics/bg_knitting.gif) 0px 128px repeat-x;
}
#banner {
    /* background: url(/graphics/bg_knit.gif) 0px 128px no-repeat; */
    height: 185px;
}
#banner img {
    margin: 9px 40px;
    float: left;
    border: none;
}
#header #nav a {
    color: #fff;
    background: url(/graphics/bg_nav.gif) 0px 0px repeat-x;
    text-decoration: none;
    font-family: "Trebuchet MS", "Trebuchet", sans-serif;
    padding: 4px 12px;
    border-left: solid 1px #170c0e;
    border-bottom: solid 1px #170c0e;
}
#header #nav a:hover {
    background: url(/graphics/bg_nav.gif) 0px -200px repeat-x;
}
#banner ul {
    margin:0px;
    padding: 0px;
    list-style: none;
    clear: right;
    float: right;
}
#banner li {
    margin: 0px;
    padding: 4px 0px 8px 0px;
    float: left;
}
.news #nav #news a,.store #nav #store a,.gallery #nav #gallery a, .about 
#nav #about a, .faq #nav #faq a, .contact #nav #contact a,
.news #nav #news a:hover,.store #nav #store a:hover,.gallery #nav #gallery a:hover, .about 
#nav #about a:hover, .faq #nav #faq a:hover, .contact #nav #contact a:hover{
    background: url(/graphics/bg_nav.gif) 0px -100px repeat-x;
    font-size: large;
    padding: 4px 12px 6px 12px;
    border-right: solid 1px #170c0e;
    text-decoration: none;
}
#main {
    clear: both;
    margin: 0px 48px;
}
#main img {
    background: #fff;
    padding: 2px;
    border: solid 1px #663;
}
#main img.bland {
    background: none;
    padding: 0px;
    margin: 0px;
    border: none;
}
.gallery #main ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.gallery #main li {
    float: left;
    padding: 8px;
    height: 220px;
}
div.text {
    width: 700px;
    margin: auto;
}

/* -- NEWS PAGE -- */

.text #content {
    margin-right: 220px;
}
div#newsletter {
    background: url(/graphics/newsletter.gif) 16px 0px no-repeat;
    width: 480px;
    height: 117px;
}
#newsletter input {
    margin: 2px 12px;
}
div#shop-recent {
    width: 195px;
    background: #fff;
    border: solid 1px #878744;
    border-top: none;
    float: right;
    text-align: center;
    padding: 0px;
    padding-bottom: 16px;
    margin: 0px;
}
#shop-recent h2 {
    margin: 0px;
}
#shop-recent h2 img {
    border: 0px;
    border-top: solid 1px #170c0e;
    border-bottom: solid 1px #170c0e;
    margin: 0px;
    padding: 0px;
}
#shop-recent h4, .browse h4 {
    margin-bottom: 4px;
}
#shop-recent ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#shop-recent li:hover a {
    color: #06c;
}
#shop-recent .etsy iframe {
	background: transparent;
}

/* -- SHOPPING PAGE -- */
ul.browse {
    padding: 0px;
    margin: 0px;
}
.browse li {
    display: block; 
    width: 200px; 
    float: left; 
    margin: 4px; 
    padding: 4px;
}
.browse li div {
     text-align: center; 
     width: 200px; 
     height: 200px;
}
.browse li:hover a {
    color: #06c;
}
a.smlink {
    color: #039;
    font-size: small;
    margin-top: .5em;
}
a.smlink:hover {
    color: #06c;
}

/* -- CART STYLES -- */

#viewcart {
    float: right;
    height: 32px;
    margin: 0px;
    margin-top: 103px;
    padding-right: 10px;
}
#viewcart img {
    margin: 0px;
    padding: 0px;
}
.cart p {
    text-align: left;
}
.notice {
    width: 420px;
    margin: 0px auto 16px auto;
    background: #dbdf8b;
    font-size: small;
    padding: 1em;
    border: solid 1px #aa4;
}
.notice h2 {
    margin-top: 0px;
}
.notice a {
    color: #039;
}
.notice a:hover {
    color: #06c;
}
.cart table {
    width: 580px;
    background: url(/graphics/shoppingcart_bg.jpg) no-repeat;
    border-top: solid 1px #170c0e;
    margin-bottom: 16px;
    padding: 0px;
}
.cart th, .cart td {
    font-size: small;
    text-align: left;
    border: none;
    padding: 4px 10px;
    margin: 0px;
}
.cart th {
    padding-top: 50px;
    color: #fff;
    border-bottom: solid 1px #170c0e;
    font-family: "Trebuchet MS", "Trebuchet", sans-serif;
}
.cart td.items {
    background: #b8b85d;
    border-bottom: solid 1px #aa4;
}
.cart td.items img {
    vertical-align: middle;
}
.cart td.empty, .cart td.total {
    background: #a7a754;
    border-top: solid 1px #878744;
    border-bottom: solid 1px #170c0e;
}
.cart td a, .cart td a:visited {
    margin-top: 0px;
    color: #170c0e;
    text-decoration: none;
}
.cart td a:hover {
    text-decoration: underline;
}
div.cart {
    width: 580px;
    margin: auto;
    padding: 0px;
    padding-top: 16px;
    text-align: right;
}
.cart a {
    color: #039;
}
.cart a:visited {
    color: #039;
}
.cart a:hover {
    color: #06c;
}

/* -- GALLERY PAGE -- */

.gallery #main div.text p.pn a:hover img {
    border: solid 1px #fff;
}

/* -- CONTACT PAGE -- */

div#contactform {
    float: right;
    background: #b4b45f;
    border: solid 1px #878744;
    border-top: none;
}
#contactform img.bland {
    margin-bottom: 8px;
    border-top: solid 1px #170c0e;
    border-bottom: solid 1px #170c0e;
}
#contactform label {
    display: block;
    font-size: small;
    margin-top: 0px;
    margin-left: 8px;
}
#contactform input, #contactform textarea {
    width: 220px;
    margin: 8px;
    margin-top: 0px;
}
#contactform textarea {
    width: 270px;
    height: 120px;
}
#contactform input.button {
    display: inline;
    width: auto;
    margin: 8px;
    margin-left: -6px;
}
#contactinfo {
    margin-right: 324px;
}

/* -- PAGE BOTTOM -- */

div.bottom {
    clear: both;
    color: #95953c;
    font-size: x-small;
    text-align: right;
    padding: 180px 16px 16px 16px;
}
.bottom a {
    color: #95953c;
    font-weight: bold;
    text-decoration: none;
}
.bottom a:visited {
    color: #95953c;
}
.bottom a:hover {
    color: #06c;
    text-decoration: underline;
}
div.webdesign {
    color: #aa4;
    margin-top: .3em;
}
.webdesign a {
    color: #aa4;
}
.webdesign a:hover {
    color: #390;
}