/*/////////////////////////*//*/////////////////////////*/
/* GENERAL RULES FOR EVERYTHING */
/*/////////////////////////*//*/////////////////////////*/

/* COLOR NOTES:
Dark Purple: 410531
Lighter Purple: 7f083d
Dark Burgundy: 600006
Green: 669999
Light Beige: eddfdd
*/

html,body{
	margin:0px;
	padding:0px;
	height:100%;
	font-family:sans-serif;
	background-color:#669999;

	/*The following three lines should solve the problem of text rendering fat and bulky*/
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a{
	border:none;
	outline:none;
	text-decoration:none;
	color:#eddfdd;
}

a:visited{
	color:#eddfdd;
}


b{
	font-family:'Rubik', serif;
	color:#410531;
	font-weight:500;
}


.contentPage{
	background-color:#669999;
}

.contentPage a{
	color:#eddfdd;
	font-weight:bold;
}

.contentPage a:hover{
	color:white;
}

.link{
	font-family:'Rubik', sans-serif;
	color:#410531;
	font-weight:400;
	text-decoration:underline;
	cursor:pointer;
}

.link:hover{
	color:#7f083d;
}

/*/////////////////////////*//*/////////////////////////*/
/* NAVIGATION */
/*/////////////////////////*//*/////////////////////////*/

#topBar{
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:56px;
	background-color:#410531;
	z-index:1;
}

#navDiv{
	position:fixed;
	padding-top:19px;
	padding-bottom:9px;
	padding-left:20px;
	padding-right:10px;
	min-width:526px;
	left:260px;
	top:0px;
	color:#eddfdd;
	font-family:'Rubik', sans-serif;
	font-size:18px;
	font-weight:400;
	text-align:left;
	z-index:1;
}

.navItem{
	display:inline;
	margin-right:10px;
}

.navItem.current{
	border-bottom:3px solid white;
	color:white;
	cursor:default;
}

.navItem:hover{
	color:#eddfdd;
}

.navItem.current:hover{
	color:white;
}

/*/////////////////////////*//*/////////////////////////*/
/* CONTENT */
/*/////////////////////////*//*/////////////////////////*/

img{
	display:inline;
	position:relative;
	float:left;
	margin-right:15px;
	margin-bottom:5px;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

#pageTitle{
	display:block;
	position:fixed;
	top:0px;
	left:15px;
	padding-top:13px;
	padding-bottom:14px;
	padding-right:20px;
	color:#eddfdd;
	font-family:'Yeseva One', sans-serif;
	font-size:25px;
	font-weight:bold;
	text-align:left;
	border-right: 1px dashed #a08393;
	cursor:pointer;
	z-index:1;
}

#pageTitle_Mobile{
	display:none;
	position:fixed;
	top:0px;
	left:15px;
	padding-top:13px;
	padding-bottom:14px;
	padding-right:20px;
	color:#eddfdd;
	font-family:'Yeseva One', sans-serif;
	font-size:25px;
	text-align:left;
	border-right: 1px dashed #a08393;
	cursor:pointer;
	z-index:1;
}

#pageTitle:hover{
	color:#eddfdd;
}

#phoneNumberDiv{
	display:block;
	position:fixed;
	top:0px;
	right:15px;
	padding-top:5px;
	padding-bottom:7px;
	padding-right:2px;
	padding-left:15px;
	color:#eddfdd;
	font-family:'Rubik', serif;
	font-size:18px;
	font-weight:500;
	text-align:left;
	border-left: 1px dashed #a08393;
	z-index:1;
}

.contentDiv{
	display:block;
	position:relative;
	margin-top:90px;
	margin-bottom:50px;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
	padding-left:30px;
	padding-right:30px;
	width:640px;
	min-height:100px;
	background-color:#eddfdd;
	
	color:black;
	font-family:'Georgia', serif;
	font-size:17px;
	text-align:left;
	
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
}

.contentHeader-1{
	font-family:'Yeseva One', sans-serif;
	color:#410531;
	font-weight:bold;
	font-size:25px;
}

.contentHeader-2{
	font-family:'Rubik', sans-serif;
	color:#410531;
	font-weight:500;
	font-size:20px;
}

.button{
	display:block;
	position:relative;
	margin-top:15px;
	padding-top:10px;
	padding-bottom:10px;
	width:100%;
	background-color:#410531;
	color:#eddfdd;
	font-family:'Rubik', sans-serif;
	font-size:15px;
	font-weight:bold;
	text-align:center;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

.button:hover{
	cursor:pointer;
	background-color:#7f083d;
}

#copyrightFooter{
	display:block;
	position:relative;
	margin-top:20px;
	padding-top:15px;
	width:640px;
	border-top:1px dashed #a08393;
	color:#410531;
	font-family:'Rubik', sans-serif;
	font-size:15px;
	text-align:left;
}

#bottomBufferDiv{
	display:block;
	position:relative;
	margin:0 auto;
	height:10px;
	width:50px;
}

/*/////////////////////////*//*/////////////////////////*/
/* PRODUCTS */
/*/////////////////////////*//*/////////////////////////*/

.productDiv{
	border:0px solid gold;
	display:inline-block;
	position:relative;
	margin:1px;
	margin-top:2px;
	min-height:350px;
	width:208px;
	background-color:rgba(41, 05, 31, 0.08);
	cursor:pointer;
	
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

.productDiv:hover{
	background-color:rgba(41, 05, 31, 0.15);
}

.productImageDiv{
	border:0px solid gold;
	display:block;
	position:absolute;
	top:10px;
	left:10px;
	height:288px;
	width:188px;
	overflow:hidden;

	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

.productImageDiv img{
	width:188px;
}

/*We tried adding swatch images but Natalie decided it would be too much trouble.*/
/*I have left the following two style rule sets here in case we decide to bring them back.*/
/*Cable Design Sweater and Relief Sweater on the Alpaca page are where we have added swatches.*/
.productScreenImage.swatch{
	display:none;
}
.productScreenImage.swatch img{
	width:auto;
}

.productCaption{
	display:block;
	position:absolute;
	width:188px; /*Set this back to 130px if we decide to make .productPrice visible again*/
	height:35px;
	top:305px;
	left:10px;
	color:#410531;
	font-family:'Rubik', sans-serif;
	font-size:15px;
	text-align:center; /*...and set this back to left...*/
}

.productPrice{
	display:none; /*Set productCaption width back to 130px if we decide to make this visible again*/
	position:absolute;
	width:40px;
	height:20px;
	padding:4px;
	padding-bottom:2px;
	top:305px;
	left:150px;
	color:#eddfdd;
	background-color:#410531;
	font-family:'Rubik', sans-serif;
	font-size:15px;
	font-weight:500;
	text-align:center;
	
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

#productScreenBackground{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background-color:rgba(41, 05, 31, 0.8);
	z-index:2;
}

.productScreen{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	z-index:3;
}

.productScreenContent{
	display:block;
	position:relative;
	margin-top:90px;
	margin-bottom:50px;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
	padding-bottom:13px;
	width:660px;
	min-height:100px;
	background-color:#eddfdd;
	
	color:black;
	font-family:'Georgia', serif;
	font-size:17px;
	text-align:left;
	
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-webkit-border-radius: 7px 7px 7px 7px;
}

.productScreenCloseButton{
	display:block;
	position:absolute;
	top:10px;
	right:10px;
	height:20px;
	width:20px;
	padding:0px 5px 10px 5px;
	color:#eddfdd;
	background-color:rgba(41, 05, 31, 0.5);
	font-family:'Rubik', sans-serif;
	font-size:25px;
	font-weight:500;
	text-align:center;
	line-height:28px;
	cursor:pointer;
	z-index:2;
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}

.productScreenCloseButton:hover{
	background-color:rgba(41, 05, 31, 0.8);
}

.productScreenImage img{
	float:none;
	width:214px;
}

.productScreenText{
	display:block;
	position:absolute;
	top:20px;
	left:250px;
	width:400px;
}

/*/////////////////////////*//*/////////////////////////*/
/* HOME PAGE */
/*/////////////////////////*//*/////////////////////////*/

.contentDiv.home{
	min-height:500px;
}

.mobileTaglineBreak{
	display:none;
}

.nonMobileTaglineFormatting{
	display:inline;
}

#homePagePhoto{
	display:block;
	position:absolute;
	
}

#homePageTextBlock{
	display:block;
	position:relative;
	width:290px;
	height:445px;
	left:350px;
}

/*/////////////////////////*//*/////////////////////////*/
/* SIZING PAGE */
/*/////////////////////////*//*/////////////////////////*/

#mobileSizeChart{
	display:none;
}

/*/////////////////////////*//*/////////////////////////*/
/* MOBILE NAVIGATION */
/*/////////////////////////*//*/////////////////////////*/


#mobileNavMenuIcon{
	display:none;
}

#mobileNavDiv{
	display:none;
	position:fixed;
	height:100%;
	width:100%;
	top:0px;
	z-index:2;
}

#mobileNavPageList{
	display:block;
	position:absolute;
	width:90%;
	top:70px;
	left:50px;
	z-index:2;
}

.mobileNavItem{
	display:inline-block;
	position:relative;
	padding-left:3px;
	padding-right:3px;
	margin-bottom:15px;
	color:#eddfdd;
	font-family:'Rubik', sans-serif;
	font-size:18px;
	font-weight:bold;
	cursor:pointer;
}

.mobileNavItem.current{
	border-bottom:3px solid white;
	color:white;
	cursor:default;
}

#mobileNavMenuIcon{
	display:none;
	position:fixed;
	width:20px;
	top:16px;
	left:15px;
	z-index:1;
	cursor:pointer;
}

.navMenuIconRectangle{
	display:block;
	position:relative;
	height:3px;
	width:100%;
	margin-bottom:3px;
	background-color:#eddfdd;
}

#mobileNavCloseButton{
	display:block;
	position:absolute;
	top:13px;
	left:14px;
	z-index:1;
	cursor:pointer;
}

#mobileNavDivBackground{
	display:block;
	position:absolute;
	height:100%;
	width:100%;
	z-index:0;
	background-color:#410531;
	opacity:0.9;
}

/*/////////////////////////*/
/* @media RULES Specifically just for the phoneNumberDiv, so it does not squish the navigation...*/
/*/////////////////////////*/

@media only screen and (max-width:840px){
	#phoneNumberDiv{
		padding-top:11px;
		padding-bottom:10px;
		padding-right:0px;
		padding-left:15px;
		right:10px;
		color:#eddfdd;
		font-family:'Rubik', serif;
		font-size:14px;
		font-weight:500;
		text-align:left;
		border-left: 1px dashed #a08393;
		z-index:1;
	}
}

/*/////////////////////////*/
/* @media RULES for TABLETS*/
/*/////////////////////////*/

@media only screen and (max-width:1075px) and (min-width:786px){
	
	/*CONTENT PAGES*/
	
	#pageTitle{
		display:none;
	}
	
	#pageTitle_Mobile{
		display:block;
	}
	
	#navDiv{
		left:110px;
		font-size:15px;
	}
}


/*////////////////////////*/
/* @media RULES for PHONES*/
/*////////////////////////*/

@media only screen and (max-width:785px){
	
	img{
		float:none;
		margin-bottom:10px;
		max-width:100%;
	}
	
	#topBar{
		display:block;
	}
	
	#topDiv{
		display:none;
	}
	
	#mobileNavMenuIcon{
		display:block;
	}
	
	#pageTitle{
		display:none;
	}
	
	#pageTitle_Mobile{
		display:block;
		font-size:17px;
		line-height:30px;
		margin-left:40px;
	}
	
	#navDiv{
		display:none;
	}
	
	.contentDiv{
		margin-top:75px;
		margin-bottom:15px;
		width:72%;
		font-size:15px;
	}

	.contentHeader-1{
		font-size:20px;
	}
	
	#copyrightFooter{
		width:100%;
	}
	
	/*HOME PAGE*/
	
	.mobileTaglineBreak{
		display:inline;
	}

	.nonMobileTaglineFormatting{
		display:none;
	}
	
	#homePagePhoto{
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}
	
	#homePageTextBlock{
		width:100%;
		height:auto;
		left:0px;
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
	
	}
	
	/*PRODUCTS*/
	
	.productDiv{
		display:block;
		margin:0 auto;
		margin-top:10px;
	}
	
	.productScreen{
		position:absolute;
	}
	
	.productScreenContent{
		position:relative;
		margin-top:30px;
		margin-bottom:15px;
		width:72%;
		font-size:15px;
	}
	
	.productScreenText{
		display:block;
		position:relative;
		top:0px;
		left:0px;
		margin-top:0px;
		width:auto;
		height:auto;
	}
	
	/*SIZING*/
	
	#standardSizeChart{
		display:none;
	}
	
	#mobileSizeChart{
		display:inline;
	}
	
}