/* MAIN.CSS */

/* Copyright (c) 2015 - 2016 D. A. Zwierz, All rights reserved 
----------------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
/* font-family: 'Open Sans', sans-serif; */

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
/* font-family: 'Poiret One', cursive; */

@import url(https://fonts.googleapis.com/css?family=Lobster);
/* font-family: 'Lobster', cursive; */

@import url(https://fonts.googleapis.com/css?family=Pacifico);
/* font-family: 'Pacifico', cursive; */

@import url(https://fonts.googleapis.com/css?family=Bangers);
/* font-family: 'Bangers', cursive; */

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #000;
	margin: 20px;
	padding: 0;
	background: url(../images/marbledbackground.png);
	width: 100%;
	/*max-width: 960px;*/	
}

#page {
	/*max-width: 1200px;*/
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}


/* Text */
h1 {
	font-family: 'Pacifico', cursive;
	margin: 0 0 1em 0;
	font-size: 2em;
	font-weight: 700;
}
h2 {
	font-family: 'Bangers', cursive;
	margin: 0 0 .5em 0;
	font-size: 2.6em;
	line-height: 1.1em;
}
h3 {
	font-family: 'Bangers', cursive;
	margin: 0 0 .5em 0;
	font-size: 1.7em;
}
h4 {
	margin: 0 0 .5em 0;
	font-size: 1em;
	font-weight: 700;
}
p {
	/*font-family: 'Poiret One', cursive; */
	font-family: 'Lobster', cursive; 
	font-size: 1.4em;
	margin: 0 0 4em 0;
	line-height: 1.7em;
}

a {
	color: #007eff;
}

a:visited {
	color: #65b1ff;
}

a.btn {
	font-size: 1.2em;
	text-decoration: none;
	color: #000;
	border: 4px outset #fff;
	padding: 4px 15px;
	transition: background-color .5s;
	line-height: 2.4em;
}

a.btn:hover {
	background-color: rgba(0,0,0,.3);
}

header {
	height: 250px;
/*	background: url(../images/marbledbackground.png) no-repeat center bottom;*/
	position: relative;
}

header a.logo {
	z-index: 1;
	position: absolute;
	display: block;
	width: 420px;
	height: 200px;
	background: url(../images/mainbannerlg.png) no-repeat 0 0;
	background-size: contain;
	/*background-color: #fff;*/
	top: 30px;
	left: 0px;
	/*border: 4px outset #fff;*/
}
header a.logo span {
	display: none;
}

header div.hero {
	position: absolute;
	/*width: 600px;*/
	height: 100px;
	top: 50px;
	left: 45%;
	/*border: 4px outset #fff;*/
	padding: 10px 10px 10px 10px;
}

header div.hero h1 {
	line-height: 1em;
	margin: 0 0 30px 0;
}

header div.hero div.socialengage{
	position: relative;
	padding: 10px 10px 10px 10px;
	float: left;
	width: 90%;
}

header::after {
	content: '';
	display: block;
	clear: both;	
}


/* section all */
section {
	padding: 0 30px;
}
/*this is a psuedo element - will clear the parent properties so that next items can line up properly */
section::after {
	content: '';
	display: block;
	clear: both;
}

/* Individual product pages */
/* title area so is centered and responsive */
section TitleArea {
	width: 100%;
	float: left;
	margin-bottom: 2px;
}
section.TitleArea aside.headerup-left {
	width: 24%;
	float: left;
}
section.TitleArea aside.headerup {
	width: 50%;
	float: left;
	margin-left: 5px;
	margin-right: 10px;
}
section.TitleArea aside.headerup-right {
	width: 15%;
	float: left;
}

/* Main level - index page */
/* title area so is centered and responsive */
section TitleAreaMainPage {
	width: 100%;
	float: left;
	margin-bottom: 5px;
}
section TitleArea h2 {
	margin-bottom: 2px;
	line-height: 1em;

}
section.TitleAreaMainPage aside.headerup-left {
	width: 25%;
	float: left;
}
section.TitleAreaMainPage aside.headerup {
	width: 50%;
	float: left;
	margin-left: 5px;
	margin-right: 10px;
}
section.TitleAreaMainPage aside.headerup-right {
	width: 25%;
	float: left;
}

aside p {
	/*font-family: 'Poiret One', cursive; */
	font-family: 'Poiret One', cursive; 
	font-size: 1.4em;
	margin: 0 0 4em 0;
	line-height: 1.7em;
}

/* section main - for index page */
section.mainContent {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
	padding: 0;
}

section.mainContent aside.ProdImage {
	width: 16%;
	float: left;
}

section.mainContent aside.ProdImage img {
	width: 95%;
}

section.mainContent aside.ProdImage div.SingleEntity.print {
	display: none;
}
/*
section.CategoryPageContent {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
	padding: 0;
}

section.CategoryPageContent aside.ProdImage {
	width: 20%;
	float: left;
}

section.CategoryPageContent aside.ProdImage img {
	width: 95%;
}
*/

section.UnderProdImage {
/*	width: 40%; */
	margin-top: 25px;
	margin-bottom: 5px;
	margin-left: 20px;
	padding: 0;
}
/*
section.UnderProdImage aside.mainLeftContent {
	width: 75%;
	float: left;
}

section.UnderProdImage aside.mainRightContent {
	width: 25%;
	
}
*/
section.UnderProdImage aside p {
	/*font-family: 'Poiret One', cursive; */
	font-family: 'Poiret One', cursive; 
	font-size: 1.4em;
	margin: 0 0 2em 0;
	line-height: 1em;
}

section.UnderProdImage aside.mainLeftContent {
	width: 65%;
	float: left;
	margin-right: 30px;
	margin-bottom: 5px;
}
section.UnderProdImage aside.mainRightContent {
	width: 30%;
	float: left;
}

section.UnderProdImage aside.mainRightContent p {
	font-family: 'Bangers', cursive;
	font-size: 1.6em;
	margin: 0 0 1em 0;
	line-height: 1em;	
}

section.UnderProdImage aside.mainRightContent ul {
	font-family: 'Bangers', cursive;
	font-size: 1.2em;
	margin: 0 0 1em 0;
	line-height: 1.8em;	
	color: #44b6c1;
}

/*shop button across bottom of page but above footer */
section.MainContentBottomZ {
	width: 100%; 
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 0;
}

#ShopOnline2 {
	width: 150px;
	height: 42px;
	background-image: url(../images/shop_online_tq.png);
	display: inline-block;
	float: center;
	margin: 5px 60px 0 0;
	text-indent: -9999px;
	outline: 0;
}
#ShopOnline2:hover {
	background-image: url(../images/shop_online_hov_tq.png);
}

/* navigation */
nav {
	background: rgba(0,0,0,.75);
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
}

nav::after {
	content: '';
	display: block;
	clear: both;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li:hover{
	background-color: #9fd9df;
}
nav ul li:hover > ul {
	display: block; /* this will display the sub menu when hovered*/
}

nav ul li a {
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	/*maintains width of sub elements when rolled over main element*/
	width: 190px;
	position: relative;
}

nav ul li a:visited {
	color: #fff;
}

nav ul li a:hover {
	background-color: #44b6c1;
	color: #266b71;
}

nav ul ul {
	position: absolute;
	top: 100%;
	background-color: #266b71;
	display: none; /*this will hide the sub menu items*/
}

nav ul ul li {
	position: relative;
}

nav ul ul ul {
	left: 100%;
	top: 0px;
}

/* navigation top levels */
nav > ul {
	padding-left: 500px;
}
nav > ul > li {
	float: left;	
}
nav > ul > li > a {
	/* override 125px width*/
	width: auto;
	padding: 10px 20px 15px 20px;
}

/*this is to target an anchor tag with a particular property*/
/* aria-haspopup="true"  is for touch enable window computers */
/* this makes a right pointing arrow */
nav a[aria-haspopup="true"]::after {
	content: '';
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 16px;
	right: 5px;
	
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #fff;
}
/* down pointing arrow on the main links */
nav > ul > li > a[aria-haspopup="true"]::after {

	top: 18px;
	right: 3px;
	
	border-top: 6px solid #fff;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}

/*footer across bottom of page*/
footer {
	clear: both;
	margin: 10px 10px;
	border-top: 1px solid #ccc;
	font-family: 'Open Sans', sans-serif;
}

footer p {
	float: left;
	font-size: .9em;
	font-family: 'Open Sans', sans-serif;
}

footer ul {
	float: right;
	list-style: none;
	/*width: 550px;*/
	margin-left: 0;
	padding-top: 5px;
	text-align: right;
	border: none;
}

footer ul li {
	display: inline;
	margin: 0 5px;
	border: none;
}
footer ul li a {
	font-size: 0.9em;
}
footer ul li a:hover {
	color: #A5D6E3;
}

/* TODO - make sure i have right sizing - some are still from course */

/* media queries - for sizing*/
/*any screens less than 1000px use this */
@media screen and (max-width:1000px) {
	h1 {
		font-size: 1.4em;
	}
	
	a.btn {
		font-size: 1em;
		border: 3px outset #fff;
		padding: 3px 7px;
		text-decoration: none;
	}		
	
	/*header */
	header {
		margin-bottom: 40px;
		height: 186px;
	}	
	header div.hero {
		left: 56%;
	}
	header div.hero h1 {
		margin-bottom: 20px;
	}

	header div.hero div.socialengage{
		width: 75%;
	}	
	
	/*am i using this?*/
	/*section.atmosphere article {
		padding-left: 400px;
		background-size: 375px auto;
	}	*/
	
	nav > ul {
		padding-left: 300px;
	}	
	
	
	section.mainContentSingleEntity aside.ProdProse p {
		margin: 0 0 0.5em 0;
	}		
	
	
	section.MainContentBottomZ {
		margin-top: 10px;
		margin-bottom: 20px;
	}	
	
	footer p {
		margin-bottom: 0px;
	}

	footer ul {
		text-align: left;
		width: 300px;
		margin-top: 0px;
	}		
	
} 

@media screen and (max-width:850px) {
	h1 {
		font-size: 1.3em;
	}
	h2 {
		font-size: 2em;
		line-height: 1em;
	}
	h3 {
		font-size: 1.5em;
	}
	h4 {
		font-size: .8em;
	}	
	
	a.btn {
		font-size: 1em;
		border: 2px outset #fff;
		padding: 1px 5px;
		text-decoration: none;
	}	
	
	/*header */
	header {
		margin-bottom: 30px;
		height: 176px;
	}	
	header a.logo {
		/*width: 320px;*/
		height: 150px;
	}
	header div.hero {
		left: 56%;
	}
	header div.hero h1 {
		margin-bottom: 20px;
	}
	
	header div.hero div.socialengage{
		width: 50%;
	}		
	
	aside p {
		/*font-family: 'Poiret One', cursive; */
		font-family: 'Poiret One', cursive; 
		font-size: 1.4em;
		margin: 0 0 1em 0;
		line-height: 1.7em;
	}
	
	section {
		padding: 0 10px 10px 0;
		margin-bottom: 0px;
	}		
	
	section TitleArea {
		width: 100%;
		float: left;
		margin-bottom: 2px;
	}
	section.TitleArea aside.headerup-left {
		width: 25%;
	}
	section.TitleArea aside.headerup {
		width: 60%;
		margin-left: 5px;
		margin-right: 10px;
	}
	section.TitleArea aside.headerup-right {
		width: 15%;
		float: left;
	}			
	
	section.mainContentSingleEntity {
		margin-top: 1px;
		margin-bottom: 10px;
		margin-left: 10px;		
	}
	
	
	section.mainContentSingleEntity aside.ProdImage {
		width: 25%;
	}
	
	section.mainContentSingleEntity aside.ProdImage img {
		width: 100%;
	}
	
	section.mainContentSingleEntity aside.ProdProse {
		width: 42%;
	}

	
	section.mainContentSingleEntity aside.ProdLine {
		width: 30%;
	}		
	
	nav > ul {
		padding-left: 200px;
	}	
	
	section.MainContentBottomZ {
		margin-top: 10px;
		margin-bottom: 20px;
	}	
	
	footer p {
		margin-bottom: 0px;
	}

	footer ul {
		text-align: left;
		width: 300px;
		margin-top: 0px;
	}		
	
}

/* TODO: almost good - still have too much space between title area and main content single entity */
@media screen and (max-width:690px) {

	h1 {
		font-size: 0.9em;
	}
	h2 {
		font-size: 2em;
		line-height: 1em;
	}
	h3 {
		font-size: 1.5em;
	}
	h4 {
		font-size: .8em;
	}	
	
	a.btn {
		font-size: .9em;
		border: 2px outset #fff;
		padding: 1px 5px;
		text-decoration: none;
		/*background-color: #9fd9df;*/
	}	
	
	aside p {
		font-size: 1.1em;
		margin-top: 0.1em;
	}	
	
	/*header */
	header {
		margin-bottom: 40px;
		height: 120px;
		/*to set up for navigation at the bottom*/
		/*background-position: left top;*/
	}
	
	/*in order for navigation on small screens to be at the bottom, in html, you need to have it after everything but footer*/
/*	
	nav {
		position: static;
		width: auto;
		padding: 5px 2px; background-color: #000;
	}
*/
	header a.logo {
		/*width: 100px;*/
		height: 125px;
	}
	header div.hero {
		top: 25px;
		left: 50%;
	}
	header div.hero h1 {
		line-height: .5em;
		margin: 0 0 10px 0;
	}
	
	section {
		padding: 0 10px 10px 0;
		margin-bottom: 0px;
	}	
	
	section TitleArea {
		width: 100%;
		float: left;
		margin-bottom: 0px;
	}
	section.TitleArea aside.headerup-left {
		width: 12%;
	}
	section.TitleArea aside.headerup {
		width: 65%;
		margin-left: 5px;
		margin-right: 10px;
	}
	section.TitleArea aside.headerup-right {
		width: 10%;
		float: left;
	}	
	
	section.mainContent {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 5px;	
		margin-right: 10px;
	}
	
	section.mainContent aside.ProdImage {
		/* width: 25%;*/
		width: 30%;
		margin-left: 1px;
		margin-right: 1px;
		margin-bottom: 8px;
	}
	
	section.mainContent aside.ProdImage img {
		/*width: 100%;*/
		width: 90%;
	}
	
	section.UnderProdImage  {
		width: 88%;
	}	
	
	/*Product prose section - middle*/
	section.UnderProdImage aside.mainLeftContent {
		/*width: 35%;*/
		width: 100%;
	}
	
	/*Product Line section - right*/
	section.UnderProdImage aside.mainRightContent {
		/*width: 35%;*/
		width: 90%;
		text-align: center;
	}	
	
	section.UnderProdImage aside.mainRightContent ul li {
		text-align: center;
		list-style-type: none; 
		width: 88%;
		/*list-style-position: inside;*/
	}
	section.UnderProdImage aside.mainRightContent a.btn {
		font-size: 1.2em;
		border: 4px outset #fff;
		padding: 3px 8px;
		text-decoration: none;
	}
	
	nav > ul {
		padding-left: 10px;
	}
	
	section.MainContentBottomZ {
		margin-top: 10px;
		margin-bottom: 20px;
	}	
	
	footer p {
		margin-bottom: 0px;
	}

	footer ul {
		text-align: left;
		width: 300px;
		margin-top: 0px;

	}	
	
}
/* TODO: almost good - still have too much space between title area and main content single entity */
@media screen and (max-width:500px) {

body {
	width: 95%;
}

	h1 {
		font-size: 1.1em;
	}
	h2 {
		font-size: 2.2em;
	}
	h3 {
		font-size: 1.9em;
	}
	h4 {
		font-size: 1em;
	}	

	a.btn {
		font-size: .9em;
		border: 2px outset #fff;
		padding: 1px 5px;
		text-decoration: none;
	}	
	
	header {
		margin-bottom: 20px;
		height: 125px;
		width: 88%;/**/
	}
	
	header a.logo {
		/*width: 100px;*/
		height: 100px;
		
	}	
	header div.hero {
		top: 25px;
		left: 50%;
	}

	header div.hero h1 {
		line-height: .5em;
		margin: 0 0 10px 0;
	}

	aside p {
		font-size: 1.em;
		margin-top: 0em;
	}
	
	nav {
		margin-top: 0px;
	}
	
	nav a {
		font-size: 0.9em;
	}

	nav ul li a {
		width: 90px;
		/* padding: 5px 10px 5px 5px; */
	}
	
	nav > ul {
		padding-left: 5px;
	}		
	
	nav > ul > li > a {
		padding: 10px 2px 10px 15px;
	}
	
	/*this is to target an anchor tag with a particular property*/
	/* aria-haspopup="true"  is for touch enable window computers */
	/* this makes a right pointing arrow */
	nav a[aria-haspopup="true"]::after {
		top: 12px;
		right: 5px;
	}
	/* down pointing arrow on the main links */
	nav > ul > li > a[aria-haspopup="true"]::after {
		top: 16px;
		right: 6px;
	}	
	
	section TitleArea {
		width: 100%;
		float: left;
		margin-bottom: 0px;
	}
	section.TitleArea aside.headerup-left {
		width: 12%;
	}
	section.TitleArea aside.headerup {
		width: 60%;
		margin-left: 5px;
		margin-right: 10px;
	}
	section.TitleArea aside.headerup-right {
		width: 10%;
		float: left;
	}	
	
	section.mainContent {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 5px;	
		margin-right: 10px;

	}
	
	section.mainContent aside.ProdImage {
		/* width: 25%;*/
		width: 30%;
		margin-left: 1px;
		margin-right: 1px;
		margin-bottom: 8px;
	}
	
	section.mainContent aside.ProdImage img {
		/*width: 100%;*/
		width: 90%;
	}
	
	section.UnderProdImage  {
		width: 88%;
	}	
	
	/*Product prose section - middle*/
	section.UnderProdImage aside.mainLeftContent {
		/*width: 35%;*/
		width: 100%;
	}
	
	/*Product Line section - right*/
	section.UnderProdImage aside.mainRightContent {
		/*width: 90%;*/
		width: 88%;
		text-align: center;
	}	
	
	section.UnderProdImage aside.mainRightContent ul li {
		text-align: center;
		list-style-type: none; 
		width: 88%;
		/*list-style-position: inside;*/
	}
	section.UnderProdImage aside.mainRightContent a.btn {
		font-size: 1.2em;
		border: 4px outset #fff;
		padding: 3px 8px;
		text-decoration: none;
	}
	
	section.MainContentBottomZ {
		margin-top: 10px;
		margin-bottom: 20px;
		width: 88%;
	}	
	
	#ShopOnline2 {
		margin: 5px 5px 0 0;
	}	

footer {
	clear: both;
	margin: 5px 5px;
	width: 88%;
}	
	
	footer p {
		margin-bottom: 0px;
	}

	footer ul {
		text-align: left;
		width: 100%;
		margin-top: 0px;
		float: left;
	}	
	
}
/*according to class, there are still phones that are less than 425 px*/
@media screen and (max-width:425px)
{
	
}