/*Aidan Waugh 301255977
Oscar Ping
IAT 339 D102*/

/*______________________________ TEXT  (includes <a> and effects)___________________*/
body {
	font-family: 'Josefin Sans', sans-serif;
	margin:1rem;
	margin-bottom: .5rem;
	font-size: 1rem;
	line-height: 1.2em;
}

h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: 0.08rem;
}

/*this is literally h2, but is semantically correct*/
.h1-alternate{
	font-family: 'Merriweather', serif;
	font-size: 2rem;
	text-transform: none;
}

h2 {
	font-family: 'Merriweather', serif;
	font-size: 2rem;

}

.fake-h3{
	font-family: 'Merriweather', serif;
	font-size: 1.4rem;
	letter-spacing: 0.025em;
	padding:0;
	margin-top: 1.2rem;
	line-height: 1.1em;
}

/*this is for the style guide only*/
h2.underline{
	font-family: 'Merriweather', serif;
	border-bottom: solid 2px #333333;

}

h3{
	font-family: 'Merriweather', serif;
	font-size: 1.4rem;
	letter-spacing: 0.025em;
	padding:0;
	margin-top: 1.2rem;
	line-height: 1.1em;
}



.text-centered{
	/*for when text such as buttons, product titles ect need to be center aligned*/
	text-align: center;
}

.text-left{
	text-align: left;
}


h4 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: .9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

h5 {
	font-family: 'Merriweather', serif;
	font-size: .8rem;
	/*needs to be italic*/
}

p {
	display:block;
	margin-bottom: .2em;

}

/*used in contact us page*/
.fake-header{
font-family: 'Josefin Sans', sans-serif;
	font-size: .9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:#ab8f50;
	margin-top: 3em;
}
.fake-h4{
	font-family: 'Josefin Sans', sans-serif;
	font-size: .9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/*text-align: center;*/
}

.quote{
	font-family: 'Merriweather', serif;
	font-size: 1.4rem;
	letter-spacing: 0.025em;
	padding:0;
	margin-top: 1.2rem;
	line-height: 1.1em;
	text-align: center;
	color:#ab8f50;
}


ol, ul {
	margin-top: .2em;
	margin-bottom: .2em;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #ab8f50;
}

a:hover, a:focus {
	color:#867D77;
}

code, samp {
	display: block;
	font-family: "Courier New", monospace;
	font-size: 0.8em;
	background-color: rgb(235,235,235);
	padding: 0.5rem;
	text-align: left;
}	


/*___________________________________ IMAGES ______________________________*/


.product-image{
	padding-top: 1rem;
}

/*.product-hover-anchor:hover, .product-hover-anchor:focus{
	display: block;
	color:red;
	background-color: red;
	height: 200px;
	width: 200px;
	border: 2px solid red;
	opacity: .3;
	float:left;


	}*/




	/*___________________________________ BUTTONS /  ANCHORS ______________________________*/

	.button-default{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: transparent;
		/*position: relative;*//* WHAT IS THIS*/
	}


	.button-default:active, .button-default:hover, .button-default:focus{
		color:#ab8f50;
		text-decoration: none;
	}

	.button-alternate{
		/*light brown background with white text */
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:white; 
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
		/*position: relative;*//* WHAT IS THIS*/
	}


	.button-alternate:active, .button-alternate:hover, .button-alternate:focus{
		/*text to white, background to dark brown*/
		color:white;
		text-decoration: none;
		background-color:#867D77;
		border-color:#867D77;
	}


	/*------------product detail buttons----------*/
	/*coffee size*/
	.button-coffee-size{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: transparent;
	}

	/*when clicked*/
	.button-coffee-size:focus{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:white; 
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*after clicked*/
	.button-coffee-size:target{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:white; 
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*Coffee grind buttons*/
	.button-coffee-grind{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:#867D77; /*dark brown*/
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background: transparent;
	}

	/*when clicked*/
	.button-coffee-grind:focus{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:white; 
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*after clicked*/
	.button-coffee-grind:target{
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		color:white; 
		text-align: center;
		padding:.6rem 2.5rem .6rem 2.5rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*___________________________________ NAVIGATION (includes buttons) ______________________________*/
	.nav{
		/*the nav div as a whole*/
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		/*  overflow: hidden;*/

	}

	.nav-section{
		/*the bounding box for each section in the navigation, should this be grids? but specific and diffeerent from them*/

		background-color: white; /*temporary, will be white */
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		text-align: center;
		text-transform: uppercase;
		color:black;
		letter-spacing: 0.025em;
		font-size: 0.8em;
		height: 5em;
		line-height: 5em;
		
	}

	.nav-section:active, .nav-section:hover, .nav-section:focus{
		/*text changes color*/
		color:#ab8f50;




	}


	#logo{
		/*specific sizing box-div for the logo, as it is larger and an image*/
		width: 32%;

	}

	#img-logo{
		/*the logo image*/

		max-width:120px;
		height:auto;


	}



	/*___________________________________ COLORS (text color and backgrounds)/ALIGN ______________________________*/
	.text-color-brown{
		/*regular light brown/caramel color*/
		color:#ab8f50;
	}

	.text-color-darkbrown{
		color:#867D77;
	}


	.align-center{
		text-align:center;
	}

	.align-left{
		text-align: left;
	}

	.bg-grey{
		background-color: #f7f7f7;
	}

	.bg-white{
		background-color: white;
	}

	


	/*___________________________________ HEADER stuff, the div not h1 ______________________________*/
	.text-header{
		text-align: center;
	}




	/*___________________________________ GRIDS(Color, size) ______________________________*/

	/*Navigation*/
	.pink-nav{
		background-color: white;

	}

	.teal-nav{
		background-color: white;

	}

	.blue-nav{
		background-color: white;

	}

	/*Main*/
	.purple-main{
		background-color: #c3a6ce;
	}

	.gray{
		background-color: #949292;
	}

	/*Product*/
	.pink-product{
		background-color: #f7d3de;
	}

	.green-product{
		background-color: #c8ddcf;
	}

	.footer{
		background-color: #5f172e;
	}

	/*this is a test value, delte this later when the form is in a div*/




	/*___________________________________ FORMS(input, send, ect) ______________________________*/
	.form-contact{ 
		/*want the width to be 20% of the whole page, must take into account it being in the div*/
		width:45%;

	}
	
	.form-contact-styleguide{
		width:20%;
	}

	.form-address{
		width:60%;
	}


	input[type="text"],input[type="number"]{
		/*float:left;*/
		border:1px solid #dedede;
	/*	display:inline-block;
	box-sizing: border-box;*/
	width: 100%;
	height:42px;
	margin-top: .3rem;
}

input[type="text"]:focus, textarea:focus, input[type="number"]:focus{
	outline:none;
	border-color: #ab8f50;
}

textarea {
	border:1px solid #dedede;
	width:100%;
	min-height: 85px;
	margin-top:.5rem;
	/*padding:.7em;*/ /*want this to affect the text only, not the containter*/
}


.content{

	margin-top: 70px;
	border-bottom: solid 2px #333333;;
	background-color: white;
}
.form-input-section{
	margin-top: .5em;
	margin-bottom: 1.5em;
}

.form-button-submit{
	/*light brown background with white text */
	font-family: 'Merriweather', serif;
	font-size: .8rem;
	/*needs to be italic*/
	text-align: left;
	color:white; 
	text-align: center;
	padding:.6rem 2.5rem .6rem 2.5rem;
	border: 2px solid;
	border-color:#ab8f50; /*brown*/
	display:inline-block;
	background-color: #ab8f50;
	/*position: relative;*//* WHAT IS THIS*/
}

/*THIS AINT A BUTTON THIS DOES NOT WORK*/
/*.button-alternate:active, .button-alternate:hover, .button-alternate:focus{

	color:white;
	text-decoration: none;
	background-color:#867D77;
	border-color:#867D77;
	}*/

	/*__ for the address form test wth spans*/

	.address-label{
		display: block;
	}

	form input#form-ad-name, form input#form-ad-name-last{
		width: 50%;
	}

	#form-address-id span{
		display:inline-block;
}


	/*---- product quantity form-----*/

	/*the div containter*/
	#div-quantity{
		width:40%;
	}


	/*form class*/
	.form-quantity{

	}

	.float-right{
		float:right;
	}

	form label#form-quantity-label{
		color:red;
	}

	form input#form-quantity-label{
		background-color: blue;
	}

	.form-button-add-bag{
		width:100%;
		font-family: 'Merriweather', serif;
		font-size: .8rem;
		/*needs to be italic*/
		text-align: left;
		color:red; 
		text-align: center;
		/*padding:.6rem 2.5rem .6rem 2.5rem;*/
		padding-top: .6rem;
		padding-bottom: .6rem;
		border: 2px solid;
		border-color:#ab8f50; /*brown*/
		display:inline-block;
		background-color: #ab8f50;
	}

	/*________________________________________ IMAGES IMG (and center.col_________________________________*/
		.center-col{
			position:absolute;
		}

		.img-line-vert{
			position:relative;
			/*top: 50%;*/
			left: 50%;
			margin-right: -50%;
			/* transform: translate(-50%, -50%) }*/
		}

		.img-product-large{
			max-height:50%;
			width:auto;
		}


		/*_____________________SPAN (order summary)________________________*/
		/*the containing div*/
		.cart-summary-item{
			display:block;
		}

		/*span class*/
		.value{
			float:right;
		}

		/*span class*/
		.summary-label{
			text-align: left;
		}