style.css




/*Main Style*/

  article, aside, details, figcaption, figure, 
   footer, header, hgroup, menu, nav, section, .shopping {
    display: block;
  }
  body {
	background-image: url(../img/gradient.jpg);
	   border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}
/*header decoration*/
.logo {
	background-color: #F6EEBA;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}
/*yarn pic across banner on all pages*/
.yarn {
	position: absolute;
	left: 25%;
	top: 5%;
}
/*website navigation*/

.navigation {
	background-color: #F6EEBA;
	color: teal;
	text-align: center;
	font-family: sans-serif;
	font-size: 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a:link {
	color: teal;
	font-weight: bold;


}
a:hover{
	color: #343641;
	background-color: #ffffff;

}




/*home page*/

.welcome {
	background-color: teal;
	font-size: 15px;
	font-family: sans-serif;
	color: #ffffff;
	text-shadow: yellow; 
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*front page images that link to product page*/
.shopping { 
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 50%;
  	border:5px;
  	border-style: bold;
  	border-color: teal;}

}


/* Clear floats after the columns */
.item {
	background-color: red;
	float:left;
	padding-left: 50%;
	
}

.row,
.row > .column {
  padding: 8px;
}

/* products page */
.column { /*product bg*/
	background-color: teal;
	font-family: sans-serif;
	color:white;
	float: none;
	margin-left: auto;
	margin-right: auto;
  width: 22%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
/*about me*/
.pig /*crochet pig img*/{
	background-color: teal;
	position: relative;
	margin-right: 5px;
	font-size: 30px;
	color: white;
	padding-bottom: 70%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
}

.aboutme {
	position: absolute;
	top: 55%;
	padding-left: 50%;
	margin-right: 10%;
	padding-bottom: 40%;
	font-size: 25px;
	color: white;
	font-family: sans-serif;

}

.video {
	position: absolute;
	float: left;
	top: 85%;
	padding-top: 15%;
	left: 5%;
}

/****CONTACT US PAGE****/
form {
	background-color: teal;
	color: white;
	text-align: left;
	font-family: sans-serif;
	margin-left: 5%;
	padding-left: 5%;
	padding-right: 40%
	padding-top: 5%;
	padding-bottom: 5%;
	font-size: 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
/*Contact Us: purchase instructions*/
.buy {
	position: absolute;
	color: white;
	top:55%;
	left: 50%;
	font-size: 25px;
	font-family: sans-serif;
	margin-right: 10%;
}
.redhat {
	position: absolute;
	top:80%;
	left: 60%;
}

footer {
	position: relative;
	float: left;
	color: white;
	font-family: sans-serif;
	padding-top: 5%;
}
.foot {
	position: relative;
	top: 100%;
	padding-top: 60%;
	float: left;
	color: white;
	font-family: sans-serif;


}
/***REVIEWS PAGE***/
/*Reviews Table*/
table {
	padding-top: 5%;
	margin-left: 35%;
	margin-right: 10%;
	position: absolute;
	color: white;
	background-color:teal;
	padding-left: 5%;
	font-family: sans-serif;
	font-size: 25px;
	
}

td, th {
  border: 1px solid white;
  text-align: left;
  padding: 8px;
}
/* cat hat img*/
.review1 {
	position: absolute;
	background-color: teal;
	padding: 10%;
	padding-right: 65%;
	padding-bottom: 10%;
}