@charset "utf-8";
/* CSS Document */

/* Jagger Yarn 2010 - CSS written by Rob Rasmussen on behalf of Payson, LLC */


/* define globals */

body {
	background-color: #f4f4db;
}

hr {
	color: #b5b5a5;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Murray Hill Font Embed */
@font-face {
	font-family: 'Murray Hill' !important;
	src: url('fonts/murrayhill-bd-bt-webfont.eot') !important;
	src: local('☺'), url('fonts/murrayhill-bd-bt-webfont.woff') format('woff'), url('fonts/murrayhill-bd-bt-webfont.ttf') format('truetype') !important;
	font-weight: normal;
	font-style: normal;
}

/* Bookman Old Style Font Embed */
@font-face {
	font-family: 'Bookman';
	src: url('fonts/bookos-webfont.eot');
	src: local('☺'), url('fonts/bookos-webfont.woff') format('woff'), url('fonts/bookos-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/* layout */

#page {
	width: 945px;
	height: auto;
	margin: 0px auto;
}

		#top-container {
			width: 855px;
			height: 141px;
			padding: 0px 45px;
			margin-bottom: 2px;
		}
		
				#logo-container {
					width: 279px;
					height: 141px;
					float: left;
				}
				
				#punchline {
					width: auto;
					float: right;
					text-align: right;
					margin-top: 60px;
				}
				
				iframe {
					padding-left: 100px ;
				}
				
		#nav-container {
			border-top: 1px solid #363636;
			border-bottom: 1px solid #363636;
			width: 900px;
			height: 33px;
			padding: 7px 23px;
		}
		
				#nav-container ul {
					list-style: none;
					padding: 0;
					margin: 0;
				}
				
						#nav-container ul li {
							display: inline block;
							float: left;
							margin-right: 12px;
						}
						
						#nav-container ul li.last {
							margin-right: 0;
						}		
						
		#mainimage {
			background-image: url(images/mainimg-bg.jpg);
			width: 857px;
			height: 202px;
			padding: 34px 44px;
		}
		
		#mainbody {
			width: 899px;
			padding: 5px 23px 10px 23px;
			height: auto;
			overflow: hidden;
		}
		
				#wide-container {
					float: left;
					width: 610px;
					height: auto;
					margin-right: 22px;
				}
				
				#narrow-container {
					float: right;
					width: 259px;
					height: auto;
					padding-top: 98px;
					background: url(images/sheep.jpg) top center no-repeat;
				}
				
						.yarnstyles, a.yarnstyles {
							list-style-type: none;
							line-height: 30px;
							font-family: "Times New Roman", serif;
							font-weight: normal;
							font-size: 16px;
							color: #969696;
							text-decoration: none;
						}	
						
								a.yarnstyles:hover {
									color: #232323;
									text-decoration: underline;
								}
						
								.yarnstyles li {
									background-image: url(images/diamond-bullet.gif);
									background-repeat: no-repeat;
									background-position: 0px 15px;
									padding-left: 14px; 
								}
								
			#homepg-container1, #homepg-container2, #homepg-container3 {
				width: 100%;
				height: 120px;
				padding: 10px 0;
				overflow: hidden;
			}
			
					#homepg-container1 {
						background: url(images/stockyarn-img.jpg) no-repeat 30px 10px;
					}
					
					#homepg-container2 {
						background: url(images/history-homepg.jpg) no-repeat 8px 10px;
					}
					
					#homepg-container3 {
						background: url(images/chuck.jpg) no-repeat 20px 10px;
					}
			
					#body-description {
						float: right;
						width: 70%;
						margin-right: 5%;
					}
					
					#img-to-match {
						float: left;
						width: 25%;
						display: block;
					}
					
		#footer {
			border-top: 1px solid #363636;
			border-bottom: 1px solid #363636;
			padding: 30px 0;
			text-align: center;
		}

				#footer ul, #footer ul a {
					color:#363636;
					text-decoration: none;
					list-style: none;
					margin: 0;
					font-family: Bookman, "Times New Roman", serif;
					font-weight: normal;
					font-size: 13px;
					letter-spacing: -1px;
				}
				
					#footer ul a:hover {
						text-decoration: underline;
					}
				
				#footer ul li {
					display: inline;
					background: url(images/pipe.gif) no-repeat 0 3px;
					width: auto;
					padding: 0 15px;
				}
				
						#footer ul li.first {
							background: none;
						}
				
				
/* product display */

#product-display {
	width: 100%;
	padding: 13px 0 13px 0;
	border-bottom: 1px solid #afafaf;	
	display: block;
	height: auto;
}

#product-display-last {
	width: 100%;
	padding: 13px 0 13px 0;	
}

	#product-information {
		width: 60%;
		float: right;
		padding-left: 14px;
	}
	
	#product-image {
		width: 220px;
		height: 150px;
		float: left;
		border: 1px solid #afafaf;
	}		
	
	#product-image-ragg {
		width: 220px;
		height: 150px;
		float: left;
	}	
	
	
/* custom call out */

#custom-callout {
	width: 580px;
	height: auto;
	padding: 13px;
	border: 1px solid #afafaf;
}
		
		
/* yarn navigation */

#yarn-navs {
	width: 100%;
	height: auto;
}

		#right-yarn-nav {
			float: right;
			width: 48%;
			text-align: right;
		}
		
		#left-yarn-nav {
			float: left;
			width: 48%;
			text-align: left;
		}
		
/* sprites */

a.home {
	background: url(images/home-nav.gif) top left;
	display: block;
	width: 121px;
	height: 32px;
}

a.home:hover {
	background-position: 0 -32px;
}

a.history {
	background: url(images/history-nav.gif) top left;
	display: block;
	width: 124px;
	height: 32px;
}

a.history:hover {
	background-position: 0 -32px;
}

a.jaggerspun {
	background: url(images/jaggerspun-nav.gif) top left;
	display: block;
	width: 170px;
	height: 32px;
}

a.jaggerspun:hover {
	background-position: 0 -32px;
}

a.factorytour {
	background: url(images/factorytour-nav.gif) top left;
	display: block;
	width: 136px;
	height: 32px;
}

a.factorytour:hover {
	background-position: 0 -32px;
}

a.storelocs {
	background: url(images/storelocs-nav.gif) top left;
	display: block;
	width: 157px;
	height: 32px;
}

a.storelocs:hover {
	background-position: 0 -32px;
}

a.contact {
	background: url(images/contact-nav.gif) top left;
	display: block;
	width: 132px;
	height: 32px;
}

a.contact:hover {
	background-position: 0 -32px;
}

a.download {
	font-family: Arial, "Times New Roman", serif;
	font-size: 11px;
	color: #363636;
	font-weight: normal;
	text-decoration: none;	
}

a.download:hover {
	color: #999;
}
				
/* typography */


h1 {
	font-family: "Murray Hill", cursive;
	font-size: 41px;
	color: #363636;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;
	display: inline;
}

h2 {
	font-family: "Murray Hill", cursive;
	font-size: 29px;
	color: #363636;
	font-weight: bold;
	text-transform: capitalize;
	margin: 0px;	
}


h3 {
	font-family: "Times New Roman", serif;
	font-size: 17px;
	color: #8d8d8d;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;	
}

h6 {
	font-family: "Murray Hill", cursive;
	font-size: 26px;
	color: #363636;
	font-weight: bold;
	text-transform: capitalize;
	margin: 0px;	
	padding: 0px;
}

.yarnnavs, a.yarnnavs {
	font-family: "Murray Hill", cursive;
	font-size: 21px;
	color: #363636;
	font-weight: bold;
	text-transform: capitalize;
	margin: 0px;	
	text-decoration: none;
}

a.yarnnavs:hover {
	color: #969696;
}

.punchline {
	font-family: "Murray Hill", cursive;
	font-size: 27px;
	color: #969696;
	font-weight: normal;
}

.questions {
	font-family: "Times New Roman", serif;
	font-size: 20px;
	color: #969696;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;	
}

.maintext  {
	font-family: Arial, "Times New Roman", serif;
	font-size: 12px;
	color: #969696;
	font-weight: normal;
	line-height: 20px;
	text-decoration: none;
}


		a.maintext {
			text-decoration: underline;
		}

		a.maintext:hover {
			color: #363636;
		}

.largertext {
	font-family: Arial, "Times New Roman", serif;
	font-size: 14px;
	color: #969696;
	font-weight: normal;
	line-height: 20px;
}

.smallertext {
	font-family: Arial, "Times New Roman", serif;
	font-size: 10px;
	color: #969696;
	font-weight: normal;
	line-height: 20px;
}

.sidetext, a.sidetext {
	font-family: "Times New Roman", serif;
	font-size: 13px;
	color: #969696;
	font-weight: normal;
	text-transform: capitalize;
	line-height: 20px;
}

a.sidetext:hover {
	text-decoration: none;
	color: #232323;
}

.footertext {
	font-family: Bookman, "Times New Roman", serif;
	font-size: 12px;
	color: #969696;
	font-weight: normal;
	text-transform: capitalize;
	margin: 0px;
	font-style: italic;
}

label {
	float:left;
	margin: 0 10px 0 0;
	width:175px;
	height: 14px;
	font-family: Arial, "Times New Roman", serif;
	font-size: 12px;
	color: #969696;
	font-weight: normal;
	text-transform: capitalize;
	line-height: 18px;
	}
	
form {
  margin: 0;
  padding: 0;
}

input, select, textarea {
	margin: 0 0 8px 0;
}

.required {
	color: #C00;
	font-weight: bold;
}	


/* IE6 css fixer v0.8: Mon, 02 Aug 2010 19:18:32 +0200 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
#logo-container,
#punchline,
#nav-container ul li,
#wide-container,
#narrow-container,
#body-description,
#img-to-match,
#product-information,
#product-image,
#right-yarn-nav,
#left-yarn-nav {display:inline;}

/* add zoom:1 to overflow:hidden */
#mainbody,
#homepg-container,
#product-display,
#product-display-last {zoom:1;}