@font-face {font-family: 'kreonbold';
			src: url('kreon-bold-webfont.eot');
			src: url('kreon-bold-webfont.eot?#iefix') format('embedded-opentype'),
				 url('kreon-bold-webfont.woff2') format('woff2'),
				 url('kreon-bold-webfont.woff') format('woff'),
				 url('kreon-bold-webfont.ttf') format('truetype'),
				 url('kreon-bold-webfont.svg#kreonbold') format('svg');
			font-weight: normal;
			font-style: normal;}




@font-face {font-family: 'kreonlight';
			src: url('kreon-light-webfont.eot');
			src: url('kreon-light-webfont.eot?#iefix') format('embedded-opentype'),
				 url('kreon-light-webfont.woff2') format('woff2'),
				 url('kreon-light-webfont.woff') format('woff'),
				 url('kreon-light-webfont.ttf') format('truetype'),
				 url('kreon-light-webfont.svg#kreonlight') format('svg');
			font-weight: normal;
			font-style: normal;}




@font-face {font-family: 'kreonregular';
			src: url('kreon-regular-webfont.eot');
			src: url('kreon-regular-webfont.eot?#iefix') format('embedded-opentype'),
				 url('kreon-regular-webfont.woff2') format('woff2'),
				 url('kreon-regular-webfont.woff') format('woff'),
				 url('kreon-regular-webfont.ttf') format('truetype'),
				 url('kreon-regular-webfont.svg#kreonregular') format('svg');
			font-weight: normal;
			font-style: normal;}


body{margin: 0px auto;
	 padding: 0px;
	 font-family: 'kreonregular', sans-serif;}

#main_container{width: 100%;
				height: auto;
				min-width: 1200px;
				margin: 0px;
				float: left;
				padding: 0px;}

#title_nav{width: 100%;
		   height: 130px;
		   min-width: 1200px;
		   margin: 0px;
		   float: left;}
		   
#title_nav img{width: 250px;
			   margin-top: 10px;
			   margin-left: 20px;}   
		
#title_nav h1{margin-top: 50px;
			  margin-left: 20px;}
			  
#title_nav a:link{color: black;
				  text-decoration: none;}
				  
#title_nav a:visited{color: black;
				  text-decoration: none;}
				  
#title_nav a:hover{color: black;
				  text-decoration: none;}
				  
#title_nav a:active{color: black;
				  text-decoration: none;}
				
				
#side_nav{width: 280px;
		  padding-bottom: 100%;
		  float: left;
		  height: 100%;
		  background-color: rgb(230, 230, 230);
		  font-family: 'kreonlight', sans-serif;}

.navOne{height: 800px;
		padding-bottom: 100%;}

.navTwo{height: 2000px;
		padding-bottom: 100%;}

.navThree{height: 800px;}
		  
#side_nav ul{width: 240px;
			 float: left;
			 border-top: solid 2px rgb(90, 166, 157);
			 border-bottom: solid 2px rgb(90, 166, 157);
			 margin-left: 20px;
			 padding-bottom: 10px;
			 padding-left: 0px;
			 list-style-type: none;}
			 
#side_nav li{margin-top: 10px;
			 width: 100%;}


#side_nav a:link{color: black;
				 text-decoration: none;}

#side_nav a:visited{color: black;
				   text-decoration: none;}

a #new:hover{color: rgb(90, 166, 157);
			  text-decoration: none;}

a #new:active{color: rgb(90, 166, 157);
				   text-decoration: none;}
				   
a #hoodie:hover{color: rgb(230, 159, 192);
			  text-decoration: none;}

a #hoodie:active{color: rgb(230, 159, 192);
				   text-decoration: none;}

a #tshirt:hover{color: rgb(126, 135, 189);
			  text-decoration: none;}

a #tshirt:active{color: rgb(126, 135, 189);
				   text-decoration: none;}

a #socks:hover{color: rgb(247, 174, 86);
			  text-decoration: none;}

a #socks:active{color: rgb(247, 174, 86);
				   text-decoration: none;}
				   
a #phones:hover{color: rgb(42, 129, 152);
			  text-decoration: none;}

a #phones:active{color: rgb(32, 119, 142);
				   text-decoration: none;}
				   
a #sale:hover{color: rgb(159, 57, 105);
			  text-decoration: none;}

a #sale:active{color: rgb(159, 57, 105);
				   text-decoration: none;}

#side_nav #onPage{color: rgb(126, 135, 189);
			  		text-decoration: none;}

		  
#main_page{width: auto;
		   min-width: 700px;
		   margin-left: 280px;
		   height: auto;}
		   
		   
#main_content{width: 100%;
			  min-width: 1200px;
			  min-height: auto; 
			  float: left;}
		   
#featuredImage{width: 95%;
			   min-width: 850px;
			   height: auto;
			   min-height: 440px;
			   margin-left: 20px;
			   margin-right: 20px;
			   margin-top: 15px;
			   float: left;
			   border-top: solid 2px rgb(232, 202, 0);
			   border-bottom: solid 2px rgb(232, 202, 0);}
			   
			   
#featuredImage img{width: 100%;
					min-width: 850px;
					margin-top: 20px;
				   max-width: 1400px;
					height: auto;
				 float: left;
						 padding-bottom: 20px;}
			   
#featuredImageTShirt{width: 95%;
			   		 min-width: 850px;
			   		 max-width: 1400px;
			   		 height: auto;
			   		 min-height: 400px;
			   		 margin-left: 20px;
			   		 margin-right: 20px;
			   		 margin-top: 15px;
			   		 float: left;
			   		 border-top: solid 2px rgb(126, 135, 189);
			   		 border-bottom: solid 2px rgb(126, 135, 189);}
			   		 
#featuredImageTShirt img{width: 100%;
						 min-width: 850px;
						 max-width: 1400px;
						 height: auto;
						 float: left;
						 padding-bottom: 20px;}
			   
#featureButtons{width: 95%;
				min-width: 830px;
				height: 220px;
				float: left;
				margin-left: 20px;
				margin-right: 20px;
				border-bottom: dotted 2px grey;}
				
.ctaButton{width: 27%;
			min-width: 160px;
		   min-height: 100px;
		   float: left;
		   margin-top: 30px;
		   margin-left: 25px;
		   padding: 10px;
		   border: dashed 2px red;
		   box-shadow: 0 0 0 6px pink;}
		   
#featureButtons h2{margin-top: 5px;
				   text-align: center;
				   font-size: 30px;
				   margin-bottom: 0px;
				   color: white;}
				   
#featureButtons p{margin-top: 10px;
				  margin-bottom: 0px;
				  width: 220px;
				  margin-left: auto;
				  margin-right: auto;
				  text-align: center;
				  font-size: 16px;
				  color: white;}
		   
#featureButtons .green{padding: 10px;
		   			  border: dashed 2px white;
		   			  background-color: rgb(90, 166, 157);
		   			  box-shadow: 0 0 0 6px rgb(90, 166, 157);}
		   			  
#featureButtons .pink{padding: 10px;
		   			  border: dashed 2px white;
		   			  background-color: rgb(230, 159, 192);
		   			  box-shadow: 0 0 0 6px rgb(230, 159, 192);}
		   			  
#featureButtons .purple{padding: 10px;
		   			  border: dashed 2px white;
		   			  background-color: rgb(126, 135, 189);
		   			  box-shadow: 0 0 0 6px rgb(126, 135, 189);}
		   			  

#featuredProducts{float: left;
				  width: 95%;
				  min-width: 850px;
				  height: auto;
				  margin-left: 20px;
				  margin-bottom: 40px;}
				  
		   
#featuredProducts h2{float: left;
					 margin-top: 30px;
					 font-size: 30px;
					 text-align: center;
					 width: 100%;
					 color: rgb(230, 159, 192);}
					 
#featuredProducts .purple{color: rgb(126, 135, 189);}
					 
#products{width: 843px;
		  height: 100%;
		  margin-left: auto;
		  margin-right: auto;}

.productContainer{width: 180px;
				  height: 350px;
				  margin-top: 50px;
				  float: left;
				  margin-left: 40px;
				  border-bottom: dashed 1px grey;}
				  
#products .first{float: left;
				 margin-left: 0px;}
				  
				  
.productImage{width: 180px;
			  height: 210px;}
			  
.productImage img{width: auto;
				  height: 210px;}
			  
.productContainer .title{width: 100%;
						 float: left;
						 margin-top: 5px;
						 color: rgb(230, 159, 192);}
						 
.productContainer .title a:link{color: rgb(126, 135, 189);
								text-decoration: none;}

.productContainer .title a:visited{color: rgb(126, 135, 189);
								text-decoration: none;}

.productContainer .title a:hover{color: rgb(126, 135, 189);
								text-decoration: none;}

.productContainer .title a:active{color: rgb(126, 135, 189);
								text-decoration: none;}
						 
.purple .title{color: rgb(126, 135, 189);}
						 
.productContainer .price{width: auto;
						 float: left;
						 margin-top: 30px;
						 font-family: 'kreonlight', sans-serif;
						 font-size: 16px;}
						 
						 
.productContainer .cta{width: 100px;
						 float: right;
						 height: 25px;
						 font-size: 14px;
						 line-height: 25px;
						 margin-top: 30px;
						 margin-right: 5px;
						 text-align: center;
						 color: white;
						 background-color: rgb(232, 202, 0);}
						 
.productContainer .long{margin-top: 10px;}

.additionalColors{width: 180px;
				  height: 25px;
				  display: block;
				  position: relative;
				  margin-top: 15px;
				  float: left;
				  text-align: center;}
				  
.colorContainer{width: auto;
				height: 20px;
				display: inline-block;
				margin: auto;}
				
/* 
.additionalColors h3{font-size: 14px;
					  margin-top: 0px;
					  margin-bottom: 5px;
					   font-family: 'kreonlight', sans-serif;
					   color: rgb(200, 200, 200);}
 */
				  
.additionalColors .color{width: 15px;
						 height: 15px;
						 float: left;
						 margin: 0px 2px;}
						 
.additionalColors .white{background-color: white;
						outline: solid 1px grey;}
						
.additionalColors .grey{background-color: rgb(169, 163, 168);}

.additionalColors .black{background-color: black;}

.additionalColors .red{background-color: rgb(105, 36, 41);}

.additionalColors .green{background-color: rgb(119, 171, 151);}

.additionalColors .navy{background-color: rgb(50, 53, 77);}
						 
#pagination{width: 100%;
			height: 50px;
			margin-top: 40px;
			margin-bottom: 20px;
			float: left;}

#pagination ul{margin-left: 320px;
			   margin-top: 5px;}
			
#pagination li{display: inline-block;
			   width: 40px;
			   height: 40px;
			   text-align: center;
			   line-height: 40px;
			   outline: solid 1px black;}
		   

		   
#productContainer{width: 95%;
			   	  min-width: 850px;
			   	  height: 650px;
			   	  padding-bottom: 20px;
			   	  margin-top: 15px;
			   	  margin-left: 20px;
			   	  float: left;
			   	  border-top: solid 2px rgb(126, 135, 189);
			   	  border-bottom: dashed 1px grey;}
			   	  
#productLeft{width: 50%;
			  height: auto;
			  float: left;} 
			   	
#productLeft h3{font-size: 12px;
				color: rgb(126, 135, 189);
				font-family: 'kreonlight', sans-serif;
				text-transform: uppercase;}
				
#productLeft h3 a:link{color: rgb(126, 135, 189);
					   text-decoration: none;}
					   
#productLeft h3 a:visited{color: rgb(126, 135, 189);
					   text-decoration: none;}
					   
#productLeft h3 a:hover{color: rgb(126, 135, 189);
					   text-decoration: underline;}
					   
#productLeft h3 a:hover{color: rgb(126, 135, 189);
					   text-decoration: underline;}
				
#productImage{width: 400px;
			  float: left;
			  margin-top: 15px;
			  margin-left: 20px;}
			  
#productImage img{width: 400px;}
			  
			  
#extraPictureBoxes{width: 400px;
				   height: 105px;
				   float: left;
				   outline: solid 1px black;
				   margin-top: 20px;
				   margin-left: 20px;
				   overflow-y: scroll;
				   white-space: nowrap;}

#extraViewContainer{width: 1580px;
					display:inline-block;}
			   
.extraView{width: 95px;
		   height: 90px;
		   float: left;
		   outline: solid 1px black;
		   margin: 5px 5px;}
			   	  
			   	  
.extraView img{width: 95px;}
			   	  
#productRight{width: 50%;
			  height: auto;
			  float: left;}
			  
#productRight h2{font-size: 20px;
				color: rgb(126, 135, 189);
				font-family: 'kreonregular', sans-serif;
				margin-top: 50px;
				text-transform: uppercase;}
				
#productRight .descript{font-size: 16px;
						margin-top: 20px;}

#productRight li{color: rgb(100, 100, 100);
				 font-family: 'kreonlight', sans-serif;}

#productRight #tShirtDescript{color: rgb(100, 100, 100);
							  font-family: 'kreonlight', sans-serif;}	  


#orderInfo{width: 70%;
		   height: auto;
		   float: right;
		   text-align: right;
		   font-family: 'kreonlight', sans-serif;}
		   
#orderInfo #colorOptions p{margin: 5px 10px 0px 0px;
						   width: auto;
						   float: right;}
		   
#colorOptions{float: right;
			  width: 100%;
			  margin-top: 20px;
			  margin-bottom: 10px;}
			  
#colorOptions .colorChoice{outline: solid 1px grey;
						   width: 35px;
						   height: 20px;
						   margin: 5px;
						   float: right;}
						   
#colorOptions .grey{background-color: rgb(165, 165, 165);
				   outline: none;}

#colorOptions .red{background-color: rgb(105, 36, 41);
				   outline: none;}

#colorOptions .black{background-color: black;
					outline: none;}

#colorOptions .navy{background-color: rgb(50, 53, 77);
				   outline: none;}
				   
				   
#colorOptions .colorChoice:hover{outline: solid 3px rgb(126, 135, 189);
								 cursor: pointer;}
								 
		   
#orderInfo #maleFemale p{margin: 5px 10px 0px 0px;
			 			 width: auto;
			 			 float: right;}						   
						   
#maleFemale{float: right;
			  width: 100%;
			  margin-top: 10px;
			  margin-bottom: 20px;}
			  

			  
#maleFemale #male{outline: solid 1px grey;
						   width: auto;
						   padding-left: 5px;
						   padding-right: 5px;
						   height: 20px;
						   margin: 5px;
						   float: right;}
						   
#maleFemale #male:hover{outline: none;
						  background-color: rgb(126, 135, 189);
						  outline: solid 1px rgb(126, 135, 189);
						  color: white;
						  cursor: pointer;}
						   
#maleFemale #female{outline: solid 1px grey;
						   width: auto;
						   padding-left: 5px;
						   padding-right: 5px;
						   height: 20px;
						   margin: 5px;
						   float: right;}

#maleFemale #female:hover{outline: none;
						  background-color: rgb(126, 135, 189);
						  outline: solid 1px rgb(126, 135, 189);
						  color: white;
						  cursor: pointer;}

#size{float: right;
			  width: 100%;
			  margin-top: 10px;
			  margin-bottom: 20px;}
			  
#size p{margin: 5px 10px 0px 0px;
		width: auto;
		float: right;}
						   
						   
#size .sizeBox{outline: solid 1px grey;
				width: auto;
				padding-left: 5px;
				padding-right: 5px;
				height: 20px;
				margin: 5px;
				float: right;}
				
#size .sizeBox:hover{outline: none;
						  background-color: rgb(126, 135, 189);
						  outline: solid 1px rgb(126, 135, 189);
						  color: white;
						  cursor: pointer;}
		   
#orderInfo .price{font-size: 22px;
				  margin-bottom: 0px;
				  color: rgb(126, 135, 189);}

#orderInfo .stock{font-size: 14px;
				  margin-top: 5px;}
				  
#orderInfo .quantity{margin-top: 30px;}

#orderInfo #addToCart{width: 120px;
					  height: 40px;
					  line-height: 40px;
					  text-align: center;
					  margin-top: 10px;
					  color: white;
					  float: right;
					  background-color: rgb(232, 202, 0);}
			   	  
#additionalProducts{width: 95%;
					min-width: 850px;
					height: 300px;
					outline: solid 1px black;
			   		margin-top: 25px;
					margin-left: 20px;
					float: left;
					border-top: dotted 2px grey;}


