/*
red: 761a31
light blue: b2d9e5
purple: 4b2b7e
*/


html, body{
margin:0px; padding:0px;
    background: #fff;
font-family: "arial", "sans-serif";
font-size:16px;}


div#wrapper{
 width:800px;
 margin:0px auto 0px auto;
 background: White;
 border-style: solid; 
 border-width:1px;
 border-color:white;
}

h1{
	font-family: "arial", "sans-serif";
	font-size:1.8em;
}

img{
	border:none;
}

h2{
	font-size:1.4em;
	color:#000;
	font-weight:normal
}
h3{
    margin:0px 0px 0.5em 0px;
	font-size:1em;
	color:#000;
}
h4{
    margin:0px 0px 0.5em 0px;
	font-size:0.9em;
	color:#000;
}

p{}
ul{}
a:link {
    color:black;
    text-decoration:none;
}
a:hover {
    color:black;
    text-decoration:underline;
}
a:visited {
    color:black;
    text-decoration:none;
}
p a:link{
    text-decoration:underline;
    
}
p a:hover{
    text-decoration:underline;
    color:red;
    
}


p.OOS{
	color:red;

}
span.OOS{
	color:red;
}
.instock{
	color:green
}
p.NB{
	font-style:italic;
    
}
.infobox{
    margin:0em 1em 1em 1em;
    padding:1em;
}

.sponsored{
	background-color:#fafaf2;
}

table{
	border-spacing: 0px;
	border-collapse: separate;

	border:solid 1px #761a31;
}

table th{
	font-weight:bold;
	text-align:left;
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: #761a31 #761a31 #761a31 #761a31;

	-moz-border-radius: 0px 0px 0px 0px;
}

table td{
	padding:0.5em 1em 0px 0.5em;
	border-width: 1px 1px 1px 1px;
	border-style: solid solid solid solid;
	border-color: #761a31 #761a31 #761a31 #761a31;

	-moz-border-radius: 0px 0px 0px 0px;
}
blockquote{
	font-style:italic;
}
blockquote.infoTeaser{
	font-style:normal;
}
blockquote.infoTeaser a{
	text-decoration:underline;
}
blockquote.infoTeaser a:hover{
    text-decoration:underline;
    color:red;
    
}

div#logo{
	float:left;
}
div#masthead{
    margin: 0px 50px 0px 50px;
}
div#salebanner{
    margin: 0px 50px 0px 50px;
    border:solid 1px red;
    padding:0.5em;
    background-color:red;
    color:white;
    text-align:center;
    font-weight:bold;
    
    
}

div#masthead a{
	text-decoration:none;
}


div#masthead h3{
	float:left;
	font-family: times new roman, serif;
 	font-style:italic;
 	font-weight:normal;
 	font-size:1.5em;
 	color:#0591d7;

	margin:0.25em 0px 0px 1em;
	vertical-align:baseline;
}

div#promocolumn{
	display:none;
    overflow:hidden;
	float:right;
	padding:0.5em;
	margin:0em 0em 0em 0em;
	width:1px; 
	border:solid 1px white;


}

div#categorycolumn, aside{
    overflow:hidden;
    float:left;
    clear:left;
	padding:0.5em;
	margin:0.5em 0em 0em 0em;
	width:150px; 
	border:solid 1px white;
}

ul.leftmenu, li.leftmenu{
    list-style:none;
    margin:0;
    padding:0;
}
li.leftmenu{
	margin-bottom:3px;
	margin-left:5px
}

#searchbox{
    width:100%;
    text-align:center;
    padding:0.5em 0px;
	margin:0px;
	border:none;

}

div#main{

    overflow:hidden;
    width:600px;
	float:left; 
	padding-left:1em;
}

div.category{
    float:left;
    width:150px; height:215px;
	background-image:url(images/categorybg.png);
    background-repeat:no-repeat;
    border:none;
    margin:5px;
}

div.category img{
    position:relative;
    top:12px; left:12px;
    width:125px; height:125px;
}
div.category p{
    clear:both;
    text-align:center;
}
div.item{
    clear:both;
	min-height:130px;

}
div.nodesummary{
	font-family:arial;
    clear:both;
	min-height:140px;
	padding-bottom:10px;
	border-bottom: solid 1px silver;
}
div.nodesummary h2{
	font-family:arial;
	font-size:1.2em;
	font-weight:normal;
}
div.nodesummary h3{
	font-family:arial;
	font-size:1em;
	font-weight:bold;
}

div.nodesummary img{
	
    border:none;

}
img.summarythumbnail{
	float:left;
	margin:0em 8px 1em 0px; 
	width:125px; height:125px;
}
div.nodedetail{
	font-family:arial;
	font-weight:normal;
}
div.nodedetail h2{
	font-family:arial;
	font-weight:normal;
	font-size:1.4em;
}
div.nodedetail img{
	display: block;
    margin-left: auto;
    margin-right: auto
}
div.nodedetail form.wp-cart-button-form{
	display: block;
	float:right;
}
#backbutton{
	 
	font-family:arial;
	font-weight:normal;
	font-size:1.2em;
}
#submitbutton{
	 
	width:150px;
	height:1.6em;
	font-size:1.6em;
}
#size{
	 
	font-family:arial;
	font-weight:bold;
	font-size:1.1em;
}
.price, #price{
	font-family:arial;
	color:rgb(136,0,0);
	font-weight:bold;
	font-size:1.1em;
}
#availability{
	float:right;
	color:#888;
}
.disclosureindicator{
	float:right !important;
	margin-top:45px !important;
}

div.item img {
    float:left;
	width:125px; height:125px;
	border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-bottom: solid 2px #aaa;
    border-right: solid 2px #aaa;
	margin:0em 5px 1em 0px; 
	padding:0.2em;
}
div.item input{
    vertical-align:middle;
}
span.spacer{
    width:1em;
}
div.options{
	display:block;
	float:left;
	margin-bottom:1em;
}

div.blogpost, div.news{
    clear:both;
    margin:0.5em 0em;

    border-bottom:dashed 2px silver;
	min-height:175px;
    
}
div.blogpost img, div.news img{
    float:left;
	width:125px; height:125px;
	border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-bottom: solid 2px #aaa;
    border-right: solid 2px #aaa;
	margin:0em 10px 5px 0px; 
	padding:0.2em;
}
div.blogpost img, div.news 
{
	margin-top:0px;
}
div.search_results{
    margin:0.5em 0em;
    padding:0.5em 0em 0em 0em;
    border-bottom:solid 1px silver;
}
img.search_results{
    float:left;
	width:125px; height:125px;
	border:none;
	margin:0em 10px 5px 0px; 
	padding:0.2em;
}

div.blogpost h3{
    font-size:1.3em;
    
}
div.newsfeatureimage{
	float:right;
	margin-left:5px;
	margin-bottom:5px;	
	border:none;
}
div.newsfeatureimage #caption{
	font-size:80%;
	font-style:italic;
}
div.newsfeatureimage caption{
	float:right;
	margin-left:5px;
	border:none;
}


div#footer{
	font-size:80%;
	clear:both;
	padding-top:1em;
	background-color:#fafafa;
	padding-left:2em;
}


div#masthead h1{
	font-family:"courier", "monospace";
	font-weight:normal;
	color:black;
	font-size:2.5em;
}

.hand{
	color: #761a31;
	font-weight:bold;
}



div.spacer{
    height:1em;
}

img.thumbnail{
	width:125px; height:125px;
	border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-bottom: solid 2px #aaa;
    border-right: solid 2px #aaa;
	margin:0em 5px 5px 0px; 
	padding:0.2em;
}

img.thumbnail320{
	width:320px;
	border: solid 1px #eee;
	margin:1em 0px 5px 10px; 
	padding:0.2em;
	float:right;
}

img.randomsizeThumbnail{
	border: solid 1px #eee;
	margin:0px 0px 5px 10px; 
	padding:0.2em;
	float:right;0
}
img.contentimage{
    width:500px;
	margin-left:1em;
}

img.contentimagesmall{
    width:175px;
	float:right;
	margin-left:1em;
}


.catalogueItem{
	border:solid 1px #bebebe;
	background-image:url(images/chromebg.gif);
	margin: 1em;
	padding:0px 1em;

}



.catalogueItem p{
	font-size:0.9em;
	line-height:1.1em;
}

.catalogueItem li{
	font-size:0.9em;
	line-height:1.1em;
}


.catalogueItem table{
	border-spacing: 0px;
	border-collapse: separate;
	border-style: none;
	border:none;;
}

.catalogueItem table th{
	font-weight:bold;
	text-align:left;
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: none;
	border:none;
}

.catalogueItem table td{
	padding:0.5em 1em 0px 0.5em;
	border-style: none;
	border:none;
}



div.inlinePaymentButton{

	clear:right;
	 width:200px;
	padding-top:0.5em;
	float:right;
	
}

div.inlinePaymentPara{
	clear:both;
	font-size:0.9em;
	line-height:1.1em;
	border-top:solid 1px gray;
	margin:0.5em;
	padding:0.5em 0em 0em 0em;
	
}

div.inlinePaymentPara table, td, th{
	border:none;
	padding-left:0px;
	
}



div.inlinePaymentButton table{
	border-style: none;
	margin-bottom:0.5em;
}

div.inlinePaymentButton table th{
	border-style: none;
}

div.inlinePaymentButton table td{
	border-style: none;
}


div.prices{

}



#topmenu, nav {
	clear:both;
    width:800px;
	margin: 0px auto 5px auto;
	padding-left:80px; 
	background-image: url('images/menubg3.gif');

}

     
body.imageGallery{
	background-color:black;
}
body.imageGallery #cross{
	color:white;
	font-size:4em;
	margin-right:1em;
}
body.imageGallery #crossContainer{
	width:100%;
	text-align: right;
}
body.imageGallery #imageContainer{
	width:100%;
	text-align: center;
}
body.imageGallery #imageNav{
	font-size:1.8em;
}
body.imageGallery #imageNav, #imageNav a{
	color:white;
	text-align: center;
}
img.galleryImage{
	clear:both;
	height:80vh; width:auto;
	margin: 1em auto;
	max-height:900px;
}

        
/***
CSS heirarchical menu	
***/
ul.topmenu{
    margin:0px auto 0px auto;
    height:27px;		
    padding:0em 2em;
		display:block;
		list-style:none;
}

	li.topmenu {
		display:block;
		list-style:none;
		margin:0;
		padding:0;
		
	}

	ul.topmenu ul {
			position:absolute;
			left:0;
			top:24px;
			height:auto;
			width:240px;
			border-width:1px;
			border:solid 1px #666;
			border-color: #eee #999 #999 #eee;
			background-color:white;
			display:none;
		}

		ul.topmenu ul ul {
				top:0;
				left:70px;
			}




	li.topmenu:hover {
			/*background:#eaeaea;*/

			z-index:10;
		}

	li.topmenu:hover ul ul {
			display:none;
		}

	li.topmenu:hover ul, 
		li.topmenu:hover li:hover ul {
			display:block;
		}

	li.topmenu {
		position:relative;
		float:left;	
		padding:5px 15px 5px 15px;
		margin:0px 5px 0px 5px;
		line-height:16px;
		border-bottom: 3px solid white;
	}
	li.topmenu li {
			float:none;
		}

	li.topmenu a {
		color:#444;
		text-decoration:none;
		font-weight:normal;
		font-size:100%
	}

	li.topmenu ul a {
		color:#444;
		text-decoration:none;
		font-weight:bold;
		font-size:100%
	}

	li.topmenu a:hover {
		color:black;
	}
	    
#shopbutton:hover{
	border-bottom: 2px solid #fc6909;
} 
        
#searchbutton:hover{
	border-bottom: 2px solid #ffff7f;
} 
#deliverybutton:hover{
	border-bottom: 2px solid #41a33a;
} 
   
#conversionbutton:hover{
	border-bottom: 2px solid #2b69a9;
} 
   
#aboutbutton:hover{
	border-bottom: 2px solid #843692;
} 
   
#blogbutton:hover{
	border-bottom: 2px solid #da0017;
} 
   
#newsbutton:hover{
	border-bottom: 2px solid #94431e;
} 

form.yarncalc{
	background:url('images/calculatorbg.jpg');
	background-repeat:no-repeat;
	height:611px; width:400px;
	padding: 52px 33px 10px 50px;
}

     
	 
.needle_search{
	/*border-top:solid 1px silver;
	border-right:solid 2px silver;
	border-bottom:solid 2px silver;
	border-left:solid 1px silver;
	margin-bottom:1em;*/
}

.needle_search fieldset{
	border:none;
	margin:0px; padding:0px;
}

.floatright{
	clear:both;
	float:right;
}

div#date{
	font-size:0.9em;
}

div.sharebuttons{
	clear:both;
	font-size:0.8em;	
	padding-top:4px; padding-bottom:2px;
	border-top:dashed grey 1px;
}

div.sharebuttons a{
	text-decoration:none;

}

img.sharebutton{
	border:none;
	margin:0px 2px 0px 5px;
}




/*
new payment button style
*/

div.singlelinepayment{
	clear:both;
	border-style:solid none; 
	border-color:#ccc;border-width:1px;
}

div.singlelinepayment table{
	float:left;
	border:none;
}

div.singlelinepayment div.price{
	display:inline;
	float:left;
	padding:0.5em; margin:0px;
	width:270px;

}

div.singlelinepayment table{
	float:left;
	border:none;
}

input.singlelinepaymentbutton{
	padding:0.5em; 
	float:right;

}


img.flagicons{
	border:none;
	margin:0px 2px;
	float:right; 
}

div.flagbuttons{
	border-top: solid grey 1px;
}
/********* bookshelf **********/

.bookshelfItem{
    float:left;
	width:162px;
	border:none;
	background-image:url('http://p2tog.com/images/bookshelfslice.jpg');
    background-repeat:repeat-x;
	margin: 0em;
    margin-bottom:1em;
	padding:0px 0.0em;
    text-align:center;
}
img.bookshelfthumb{
    margin:0px;
    margin-top:38px;
    margin-bottom:10px;
    padding:0px;
    border:none;
    width:125px; height:125px;
    border-right:solid 1px silver;
    border-bottom:solid 1px SaddleBrown ;
    border-top:solid 1px #888 ;
    
}
img.bookshelfthumbtall{
    margin:0px;
    margin-top:15px;
    margin-bottom:10px;
    padding:0px;
    border:none;
    width:116px; height:148px;
    border-right:solid 1px silver;
    border-bottom:solid 1px SaddleBrown;
    border-top:solid 1px #888 ;
}
.bookshelfItem h2{
	font-size:0.8em;
    
}
.bookshelfItem p{
    clear:both;
	padding:0em; margin:0px;
    font-size:0.85em;
    
}
.bookshelfItem div.price{
	padding:0em; margin:0px;
    width:150px;
    font-size:0.85em;
}

/**********************/



form.yarncalc{
	background:url('images/calculatorbg.jpg');
	background-repeat:no-repeat;
	height:611px; width:400px;
	padding: 52px 33px 10px 50px;
}






@media only screen and (max-width:900px){
	div#categorycolumn, aside{
		display:none;
	}
	div#wrapper { 
		width:620px;
		// border: solid 1px silver;
	}
	div#masthead{
    	width:100%;
		margin:0px;
		
	}
	div#masthead img{
    	width:100%;
		margin:0px;
		
	}
	div#topmenu {
		display:none;
	}
}
/* smartphones (portrait and lanscape) */
@media only screen and (max-device-width:480px) {
	div#wrapper { 
 		width:96%;
		font-size:10px;
	}
	
	div#main { 
 		width:96%;
		padding-left:0.5em;
	}
	div#categorycolumn, aside{
		display:none;
	}
	.catalogueItem, .news, .nodesummary{
		width:92%;
		margin-left:auto;
		margin-right:auto;
	}
	div.pmlinks {
		display:none;
	}
	div#topmenu {
		display:none;
	}
}



/* iPhone 4 (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	div#wrapper { 
 		width:96%;
		font-size:12px;
	}
	div#main { 
 		width:96%;
		padding-left:0.5em;
		padding-right:0.5em;
	}
	img.thumbnail,
	img.summarythumbnail,
	div.item img{
		width:90px; height:90px;
		margin:9px 0px 3px 5px; 
		padding:0.1em;
	}
	
	.catalogueItem, .news, .nodesummary{
		padding:0px 0.5em;
	}
}
/* iPhone 5 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	div#wrapper { 
 		width:96%;
		font-size:12px;
	}
	div#main { 
 		width:96%;
		padding-left:0.5em;
		padding-right:0.5em;
	}
	img.thumbnail,
	img.summarythumbnail,
	div.item img{
		width:125px; height:125px;
		margin:9px 0px 3px 5px; 
		padding:0.1em;
		border: solid 1px white;
	}
	
	div.catalogueItem, div.news, div.nodesummary{
		padding:0px 0.5em;
	}
}
/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
	div#wrapper { 
 		width:96%;
		font-size:12px;
	}
	div#main { 
 		width:96%;
		padding-left:0.5em;
		padding-right:0.5em;
	}
	img.thumbnail,
	img.summarythumbnail,
	div.item img{
		width:90px; height:90px;
		margin:9px 0px 3px 5px; 
		padding:0.1em;
		float:right;
	}
	
	.catalogueItem, .news, .nodesummary{
		padding:0px 0.5em;
	}
}