/*

	Crafty-Yarn.co.uk Main CSS

	Designed by: Ryan Downie (ryan@bfinternet.co.uk)

	Developed by Ryan Downie (ryan@bfinternet.co.uk)

	Version: 1. 0. Date:06/11/08

	--------------------------------------------------------------

	

	Table of Contents (ToC)

	1.0 GENERAL PAGE STYLES

		1.1 MASTHEAD

		1.2 Main Navigation

		1.3 SUB-CONTENT

		1.4 FOOTER

	2.0 PAGE SPECIFIC

		2.1 HOMEPAGE

		2.2 ABOUT US

		2.3 CONTACT US

	3.0 SHOP PAGES

		3.1 PRODUCT PAGE

		3.2 CHECKOUT PROCESS

	4.0 MISC

	

	-------------------------------------------------------------

	

	STYLE GUIDE.

	CSS3 has been used on the buttons and navigation, border-radius for safari, FF and opera, Images have been used for IE.

	

	Colours.

	Pink: #CE0553

	Text Colour: #3F3F3F;

	Header/button hover: #7D0E38



	---------------------------------------------------------- */



/* 1.0 GENERAL PAGE STYLES */

html {

background:#540021;}



body {

font-size:.78em;

color:#3F3F3F;

line-height:1.4

}



#wrapper {

width:960px;

margin:0 auto

}



div#main-content {

width:640px;

float:right

}

.marquee {

	display: block;
	padding: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: #540021;
	color: #fff;

}

body#shop div#main-content {

margin:-26px 0 0

}



a.button {

-moz-border-radius:0.3em;

-webkit-border-radius:0.3em;

border-radius:0.3em;

text-align:center;

width:64px;

text-decoration:none;

border:1px solid #FFF;

color:#FFF;

display:block;

float:right;

padding:0

}



div#main-content button,div#main-content input[type="submit"] {

-moz-border-radius:0.3em;

-webkit-border-radius:0.3em;

border-radius:0.3em;

text-align:center;

width:64px;

text-decoration:none;

border:1px solid #FFF;

color:#FFF;

background:#CE0553;

margin:0 5px 0 0;

padding:3px 0

}



h3 {

font-size:1.4em;

color:#CE0553;

letter-spacing:.5px

}



.clearfix:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden

}



/* 1.1 MASTHEAD */

h1#logo {

background:transparent url(../images/logo.jpg) no-repeat scroll 0 0;

float:left;

height:92px;

text-indent:-9999px;

width:385px;

margin:5px 0 0

}



h1#logo a {

display:block;

width:385px;

height:92px

}



ul#utlities {

float:right;

background:#54001f;

-moz-border-radius:.2em;

-webkit-border-radius:.2em;

border-radius:.2em;

width:345px;

font-size:.9em;

margin:0

}



ul#utlities li {

float:left;

list-style-type:none

}



ul#utlities a {

color:#FFF;

font-size:.8em;

text-decoration:none

}



li#basket {

background:url(../images/view-cart.jpg) no-repeat left center;

margin:0 0 0 10px;

padding:10px 12px 12px 35px

}



input#keywords {

background:#efe3e3;

border:none;

font-size:.9em;

padding:2px 5px

}



ul#utlities label {

color:#FFF;

font-size:.9em

}



ul#utlities .search {

margin:9px 0 0 9px

}



ul#utlities button {

background:#e3c5b4;

border:none;

font-size:.9em;

color:#7D0E38;

padding:1px 3px

}



/* 1.2 Main Navigation */

ul#main-navigation {

float:right;

background:#54001f;

-moz-border-radius:.2em;

-webkit-border-radius:.2em;

border-radius:.2em;

width:403px;

margin:29px 0 0

}



ul#main-navigation li {

float:left;

list-style:none;

font-size:1.1em;

line-height:2.5;

margin:0 12px 0 24px

}



ul#main-navigation li a {

color:#FFF;

display:block;

text-decoration:none

}



ul#main-navigation li a:hover {

color:#E3C5B4;

display:block;

text-decoration:underline

}



/* 1.3 SUB-CONTENT */

div#sub-content {

width:300px;

float:left;

background:url(../images/sidebar-bg.jpg) no-repeat

}



div#sub-content h3 {

margin:17px 14px 0

}



ul#sub-nav {

margin:0;

padding:0 24px 0 15px

}



ul#sub-nav li {

list-style:none;

border-bottom:1px solid #CFB5A8;

padding-bottom:4px;

margin:8px 0 0

}



ul#sub-nav li h5 {

font-size:1.05em

}



div#news-letter {-moz-border-radius:10px; background:#540021 none repeat scroll 0 0; color:#FFFFFF;  margin:16px;padding:10px; width:230px; }

div#news-letter p { font-size: 11px !important; }

div#news-letter h3 {border-bottom:1px solid #9F0948; color:#FFFFFF; margin:-4px 0 6px; padding-bottom:3px; font-size: 13px; }



div#news-letter label {display:block; float:left; font-weight:700; margin-top:3px; width:62px; }



div#news-letter input {

background:#EFE6E0;

border:1px solid #9F9995;

font-size:11px;

padding:4px

}



div#news-letter button {-moz-border-radius-bottomleft:0.3em; -moz-border-radius-bottomright:0.3em; -moz-border-radius-topleft:0.3em; -moz-border-radius-topright:0.3em; background:#D60553 none repeat scroll 0 0; border:1px solid #FFFFFF; color:#FFFFFF; display:block;height:29px; margin:0 0 3px 62px; padding:2px; text-align:center; text-decoration:none; width:64px; cursor: pointer; }

div#facebook {-moz-border-radius:10px; background:#540021 none repeat scroll 0 0; color:#FFFFFF;  margin:16px;padding:10px; width:490px; }



div#facebook p { font-size: 11px !important; }



div#facebook h3 {border-bottom:1px solid #9F0948; color:#FFFFFF; margin:-4px 0 6px; padding-bottom:3px; font-size: 13px; }


a.facebook {
	position: absolute;
	top: 600px;
	left: 359px;
	background: url(/images/facebook.png) no-repeat 0 0;
	width: 36px;
	height: 36px;
	overflow: hidden;
}

a.facebook:hover {
	top: 599px;
}

/* 1.4 FOOTER */

div#footer {

background:#540021;

margin:30px 0 0

}



div#footer-wrapper {

width:970px;

color:#FFF;

font-size:.9em;

margin:0 auto

}



div#footer-wrapper ul {

float:left;

margin:10px 0

}



div#footer-wrapper li {

list-style:none;

display:block;

margin:0 0 10px

}



div#footer-wrapper li#email {

background:url(../images/email.jpg) no-repeat 0 1px;

float:left;

padding:0 23px

}



div#footer-wrapper li#phone {

background:url(../images/phone.jpg) no-repeat 0 1px;

float:left;

padding:0 23px

}



div#footer-wrapper a {

color:#EFE3E3

}



p#bf {

float:right;

margin:10px

}



/* --------------------------------------

= 2 Page Specific Styles

---------------------------------------  */

div#intro h2 {

font-size:1.9em;

color:#59332A;

float:left;

letter-spacing:1px;

margin:21px 0 6px

}



a.current {

text-decoration:underline;

font-weight:700

}



p.bread-crumbs {

clear:both;

float:left;

font-size:1em;

margin:10px 34px 0;

}







ul.products {

float:left;

width:650px;

margin:14px 0 0 41px

}



#intro ul.products {margin:14px 0 0 40px;}



ul.products li {

float:left;

list-style-type:none;

width:272px;

margin:7px 53px

}



ul.products h4 a {

color:#4E001B;

font-size:1.2em;

text-decoration:underline;

display:block;

letter-spacing:.5px;

margin:7px 0 6px

}



ul.products h4 a:hover {

text-decoration:none

}



span.price {

color:#7D0E38;

display:block;

margin:4px 0 0

}



ul.products a.button {

background:#7D0E38;

line-height:1.5;

margin:-4px 91px 0 0;

}



div#main-content ul.products {

margin:18px 0 0 -13px

}

ul.products h4 {margin:-5px 0 -2px}



div#main-content ul.products li {

margin:8px 0 26px 42px;

}



div#main-content ul.products li a.button {

background:#CE0553;

line-height:2

}



img#yarn {

float:left;

clear:left

}



/* 2.1 HOMEPAGE */

body#home {

background:#E4C5B3 url(../images/home-bg.jpg);

background-repeat:repeat-x

}



body#home div#intro h2 {

font-size:1.8em;

margin:21px 0 6px

}



div#why-area,div#related-products,table#checkout,fieldset.box,div.box {

background:url(../images/why-bg.jpg) no-repeat;

float:right;

width:621px

}



div#why-area ul {

float:left;

margin:12px 26px

}



div#why-area li {

float:left;

font-size:0.9em;

line-height:1.5;

list-style-type:none;

width:250px;

margin:7px 56px 0 10px

}



div#why-area li img {

float:left;

margin:0 8px 49px 0

}



div#why-area h3 {

margin:22px 32px 0

}



div#why-area h4 {

font-size:1.2em

}



/* 2.2 ABOUT US */

ul#what-offer li {

float:left;

list-style-image:none;

list-style-position:outside;

list-style-type:none;

width:546px;

margin:0 5px 7px

}

ul#visit-us li {

float:center;

list-style-position:outside;

list-style-type:none;

width:546px;

margin:0 5px 7px

}

.visitimages {
	float: left;
	width: 500px;
	margin-left: 65px;
}

.visitimages img {
	border: 6px solid #EFE6E0;
	margin: 0 15px 0 0!important;
}

body#about li h4 {

color:#CE0576;

font-size:1.3em;

margin:10px 0 1px

}



body#about li.alt img {

float:right;

margin:0 0 0 4px

}



body#about img {

margin:0 10px 0 0

}



body#about div#main-content {

width:600px;

margin-bottom:10px

}



body#about div#main-content h3 {

border-bottom:1px solid #CFB5A8;

font-size:1.6em;

margin:10px 0

}



body#about div#why-area h3 {

font-size:1.4em;

margin:16px 30px 0

}



/* 2.3 CONTACT PAGE */

form.contact {

margin:22px 0 0

}



button.cont-clear {

float:right

}



input#payment_method {

width:20px

}



div.payment {

margin:0 43px

}



h3#contact-thanks {

margin:55px 20px -8px

}



/* Search Area */

#search-res .product {

width:260px

}



#search-res .price {

width:80px

}



#search-area {

margin:10px 0 0 20px

}



#search-area h5 {

font-size:1em;

text-decoration:underline;

margin:7px 0

}



#search-ad label {

display:block;

float:left;

width:200px

}



#search-area table#search-res {

background:url(../images/why-bg.jpg) no-repeat;

width:621px;

float:left

}



#search-ad select,input#query {

width:200px

}



#search-area #search-ad button {

float:left;

margin:10px 0 0 200px

}



div#search-ad {

background:url(../images/why-bg.jpg) no-repeat;

width:621px;

padding:10px 30px

}



/* ----------------

3.0 SHOP PAGES

----------------- */

body#shop,body#about {

background:#E4C5B3 url(../images/background.jpg);

background-repeat:repeat-x

}



body#shop div#intro h2{

font-size:2.1em;

width:585px;

float:right;

margin:41px 0 6px

}



body#about div#intro h2 {

float:right;

font-size:2.1em;

margin:24px 0 6px;

width:585px;

}



ul#spage-logos {

float:left;

margin:10px 0 0 31px;

width:600px;

}



ul#spage-logos li {

float:left;

list-style-type:none;

margin:0 25px 0 0;

max-width:123px;

min-height:122px;

min-width:123px;

}



ul#spage-logos li h4 {

margin:5px 0;}



ul#spage-logos li img {border:6px solid #EFE6E0;}

/* 3.1 PRODUCT PAGE */









div#main-content div.pro-holder a.button {

margin:0!important; float:left;}



.product-image img {

border:6px solid #EFE6E0;

}



.pro-box {

margin:0 0 -1em;

width:12em;

}



.pro-box img {

border:6px solid #EFE6E0;

margin:0.5em 0 0;

}



#product-image {

clear:left;

float:left;

}

#alt-image img {
	
	border:6px solid #EFE6E0;

	margin:1.2em 0 0 3em;
}

.alt-thumbs {
	
	display: block;
	margin:1.2em 0 0 3em;	
}

.alt-thumbs img {
	
	border: 3px solid #EFE6E0;
	width: 60px;
	height: 60px;
}






h3#product-name {

border-bottom:1px solid #CFB5A8;

font-size:1.6em;

margin:3px 0;

}

div#product h4 {

font-size:1.3em;

margin:20px 0 0

}



div#product-des {

float:left;

line-height:1.7;

margin:0 0 0 20px;

width:212px;

}



div#product-options {

float:left;

margin:-11px 0 27px;

width:225px;

}



div#product-options p {

color:#CE0553;

font-size:1.2em;

margin:11px 0 0;

}



div#product-options ul {margin:0;}

div#product-options li {list-style:none;}



div#product-options label {

display:block;

color:#CE0565;

font-size:.9em;

font-weight:700;

font-style:italic;

margin:5px 0 3px

}



div#product-options select {

width:180px;

font-size:.9em;

padding:1px 3px

}



div#product-options p#price {

color:#CE0565;

margin:7px 3px

}



div#related-products {

margin-bottom:30px

}



div#related-products h3 {

float:left;

width:80%;

margin:23px 0 0 35px

}



div#related-products li {

float:left;

width:170px;

list-style:none;

margin:0 12px

}



div#related-products h4 a {

font-size:.8em;

text-decoration:underline

}



div#related-products a.button {

background:#CE0565;

float:left

}



h3#page-name {

clear:left;

float:left;

font-size:1.6em;

margin:10px 0 0 32px;

width:600px;

}



ul#subpage_links {

font-style:italic;

}

ul#subpage_links  li {

list-style:none;

float:left;

margin:3px 10px;}



ul#subpage_links  li a {

text-decoration:underline;}



p#pageintro {

clear:left;

float:left;

margin:6px 0 0 31px;

width:600px;

}





/* 3.2 Checkout */

table {

border-collapse:collapse

}



table#checkout th,table#checkout td,table#search-res th,table#search-res td {

border:none;

text-align:left;

padding:6px 29px

}



table#checkout {

font-size:1em

}



table#checkout th,table#search-res th {

color:#CE0553;

font-size:1.2em;

padding:20px 29px 9px

}



span#product {

color:#D20553;

font-size:1.1em

}



span.options {

font-size:0.9em

}



div#main-content button.check-out-buttons {

float:right;

width:83px;

margin:0 0 0 8px

}



table#checkout td,table#checkout th,table#search-res th,table#search-res td {

border-bottom:1px solid #CFB5A8

}



table#checkout tfoot select {

width:190px;

font-weight:400

}



table#checkout caption {

text-align:left;

font-size:1.6em;

color:#CE0553;

margin:8px 26px 3px

}



a.pink {

background:#CE0553

}



#check-out-button {

margin:0 183px 0 0

}



table#checkout input {

width:6em

}



form#checkout-form {

float:right;

width:600px

}



form#checkout-form label {

display:block;

float:left;

width:220px

}



form#checkout-form input,form#checkout-form select,form#checkout-form textarea {

width:23.25em

}



form#checkout-form fieldset p {

margin:17px 32px

}



form#checkout-form legend {

color:#CE0553;

font-size:1.4em;

padding:0 27px 16px

}



form#checkout-form button#checkout-same {

float:right;

width:114px;

margin:0 74px

}



form#checkout-form button#check-out-submit {

float:right;

margin:0 74px

}



.form-line {

margin:17px 0 2px 220px

}



form#checkout-form .details {

width:1.25em

}



div.box {

width:570px;

padding:10px 26px

}



div.box h4 {

color:#CE057A

}



/* 4.0 MISC */

html,div#news-letter button:hover,div#related-products a.button:hover {

background:#540021

}



a,div#intro h2 a {

color:#CE0553;

text-decoration:none

}



a:hover,ul#utlities a:hover,h2 a:hover {

text-decoration:underline

}



div#main-content input[type="submit"],div#main-content button#clear-form {

width:100px

}



ul.products li.last,div#why-area li.last {

margin:7px 0 0

}

/*

img.thumb,ul.products img,a.thumb {

display:block;

background:url(../images/thumbs.png) no-repeat left center;

float:left;

margin:0 13px 14px 0;

padding:17px 22px 7px 10px

}

*/



img.thumb,ul.products img,a.thumb {

display:block;

border:6px solid #EFE6E0;

float:left;

margin:0 13px 20px 0;

}



div#intro img.thumb {

border:6px solid #E4C5B3;}



ul.products a.button:hover,div#main-content ul.products li a.button:hover,a.pink:hover {

background:#54001F

}



div#main-content ul.products li h4 a,div#main-content ul.products li span.price,table#checkout tr.total,form.contact span {

color:#CE0553

}



div#product-options span,table#checkout tfoot {

font-weight:700

}



div#related-products li p,.test a.button {

float:left

}



div#main-content form.contact button,#verification_img {

margin:0 0 0 252px

}



table#products {

margin:1em 0 0 2em;

width:51em;

}



td a.button {background:#CE0553; float:left; line-height:1.8em;}



th, td {border:none!important;}



#featured-pro td#container {

float:left;

margin:0 0 0 6em;

width:48em;

}

#featured-pro {

float:left;

width:53em;

}



#featured-pro  .product-box {crafty.css (line 920)

float:left;

width:24em;

}



ul#offer-products {float:left; margin:10px 0 0 35px; width:100%; }

ul#offer-products form {display:inline-block; list-style-type:none; margin:10px 10px 0 0; vertical-align:top; width:278px; }

ul#offer-products li {list-style-type:none; margin:6px 50px 10px 0; vertical-align:top; width:269px; }

.product-image {float:left; margin:0 20px 31px 0; width:100px;}

ul#offer-products li a.button {background:#CE0553; float:left; line-height:1.8em;}



a#members-area {background:transparent url(../images/members.png) no-repeat scroll 0 0; display:block; height:114px; position:absolute; text-indent:-9999px; top:0; width:137px; }

ul#members-info {}

ul#members-info li {list-style:none; float:left; width:100%;}



/* As there is no resizer on a normal page, had to add a width to the image to make this simular so Abby wont break this */

ul#members-info li img {border:6px solid #EFE6E0; float:left; margin:0 21px 10px 0; width:100px; }



div#main-content h2 {color:#CE0553; font-size:29px; line-height:1; margin:-2px 0 0 25px; }



a#shopping {

background:#CE0553 none repeat scroll 0 0;

padding:10px;

width:142px;

float: right;

color:#fff;

text-align: center;

border: 1px solid #fff;

}