body 
{
	background-color:	#ffffff;
	
	margin:			0;
	width:			100%;
	
	font-family:	"adriane", "Adriane Text", serif;
	font-size:		16px;
	text-align:		justify;
	
	line-height:	1.5em;
	font-weight:	400;
	font-style:		normal;
	color:			#4a4a4a;
}
/*
colours from logoButterfly:
	lilac 	#d7c6f9
	yellow 	#fefba2
	green	#9eee58
*/

#flexWhole
{
	display:			flex;
	flex-direction:		row;
	align-items:		flex-start;
	justify-content:	center;
	width:				100%;
	
	background-image:		url("images/smallThornGrey.png");
    background-repeat: 		no-repeat;
	background-position:	bottom right;
	background-size:		50px
}

nav
{
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
	align-items:		stretch;
	
	/*position:			fixed;*/
	top:				0;
	width:				160px;
	
	background:			#ffffff;
	border:				none;
	
	margin-left:		10px;
	margin-right:		30px;
}
nav a	
{
	display:			block;
	flex-grow:			1;
	width:				100%;
	
	/*font-family:		Palatino, Georgia, serif;*/
	/*font-family:		futura, Montserrat, sans-serif;*/
	text-transform:		uppercase;
	text-decoration:	none;
	text-align:			center;
	color:				#4a4a4a;
	font-weight:		normal;
	font-size:			1.0rem;
	letter-spacing:		0.2rem;
	
	background:			#ffffff;
	
	/*max-width:			700px;*/
	
	margin:				0;
	padding-left:		5px;
	padding-right:		5px;
	padding-top:		25px;
	padding-bottom:		25px;
	
	border-bottom:		1px solid #b7b7b8;
	
	-webkit-transition:	background 0.3s;
	transition:			background 0.3s;
}
nav a:last-child
{
	border-bottom:		none;
}
nav a:hover, a:active
{
	text-decoration:	none;
	color:				#4a4a4a;
	background:			#f0f0f0;
}

/* nav menu moves to top */
@media (max-width: 630px)
{
	#flexWhole
	{
		flex-direction:		column;
		align-items:		stretch;
		justify-content:	flex-start;
	}
	
	nav
	{
		flex-direction:		row;
		flex-wrap:			wrap;
		align-items:		stretch;
		
		width:				100%;
		
		border-top:		none;
		border-right:	none;
		padding:		0;
		margin:			0;
		margin-bottom:	2rem;
	}
	#navLogo
	{
		display:		none;
	}
	nav a
	{
		width:				auto;
		
		padding-top:		0.5rem;
		padding-bottom:		0.5rem;
		padding-left:		1.5rem;
		padding-right:		1.5rem;
		
		margin:				0;
	}
	nav a:last-child
	{
		border-bottom:		1px solid #b7b7b8;
	}
	
	#paddingFixed
	{
		padding:			0;
		margin:				0;
		margin-left:		5px;
		margin-right:		5px;
	}
}

/* end of nav */

h1
{
	/*
	text-transform:		uppercase;
	letter-spacing:		0.0rem;
	*/
	text-transform:		uppercase;
	color:				#4a4a4a;
	font-weight:		normal;
	font-size:			1.0rem;
	letter-spacing:		0.2rem;
	
	text-decoration:	none;
	text-align:			left;
	
	clear:			both;
	margin-bottom:	1rem;
	padding-left:	5px;
	border-bottom:	solid 1px #b7b7b8;
}

h2
{
	font-family:	"adriane", "Adriane Text", serif;
	font-size:		19px;
	text-align:		left;
	
	line-height:	1.5em;
	font-weight:	400;
	font-style:		none;
	color:			#101010;
	
}

figcaption
{
	text-align:			center;
}

aside
{
	display:			block;
	background-color:	#e3e3e3;
	padding:			15px 20px 15px 15px;
	border-left:		6px solid #b7b7b8;
	margin-top:			0;
	margin-bottom:		2rem;
}

article
{
	display:		block;
	margin-left:	auto;
	margin-right:	auto;
	max-width:		720px;
	
	padding-left:	5px;
	padding-right:	5px;
	padding-top:	0;
	padding-bottom:	1em;
	/*
	background-image:		url("images/smallThornGrey.png");
    background-repeat: 		no-repeat;
	background-position:	bottom right;
	background-size:		50px
	*/
}

article a:link, article a:visited
{
	color:					#5d5294;
	-webkit-transition:		color 0.3s;
	transition:				color 0.3s;
}
article a:hover
{
	color:			#d7c6f9
}

article>p, article>ul, article>ol
{
	margin-top:		0;
	margin-bottom:	40px;
}

p.price
{
	
}

article canvas, article img
{
	display:	block;
	padding:	0;
	/*border:		solid 1px #b7b7b8;*/
	
	margin-left:	auto;
	margin-right:	auto;
	margin-top:		10px;
	margin-bottom:	10px;
}

img figure
{
	display:		block;
	float:			none;
	clear:			none;
	width:			auto;
	max-width:		100%;
	
	margin-left:	auto;
	margin-right:	auto;
	margin-top:		5px;
	margin-bottom:	30px;
	
	padding:		0;
}
img.left, figure.left
{
	display:		block;
	float:			left;
	clear:			left;
	max-width:		500px;
	
	margin-top:		0;
	margin-bottom:	10px;
	margin-left:	0;
	margin-right:	40px;
}
img.right, figure.right
{
	display:		block;
	float:			right;
	clear:			right;
	max-width:		500px;
	
	margin-top:		0;
	margin-bottom:	10px;
	margin-left:	40px;
	margin-right:	0;
}

/* within a figure only needs margin to separate from caption */
figure img, figure canvas
{
	margin-top:		0;
	margin-bottom:	10px;
	margin-left:	0;
	margin-right:	0;
}

/* -- Adjust images for narrow displays, bringing in the floaters */
@media (max-width: 630px)
{
	img.left, img.right, figure.left, figure.right
	{
		display:		block;
		float:			none;
		clear:			none;
		max-width:		100%;
		
		padding-top:	15px;
		padding-bottom:	15px;
		padding-left:	0px;
		padding-right:	0px;
		
		margin-left:	auto;
		margin-right:	auto;
	}
}

/*	allows multiple images to be displayed that will appear on a single line if
	space allows, or spread nicely if not.
*/
div.imageBox
{
	display:			block;
	
	display:			flex;
	width:				100%;
	flex-wrap:			wrap;
	justify-content:	space-around;
	align-items:		center;
	
	padding-top:	15px;
	padding-bottom: 15px;
}
div.imageBox img, div.imageBox canvas, div.imageBox figure
{
	padding:		0;
	margin:			8px;
}

div.product
{
	display:			flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	center;
	align-items:		center;
	
	border:		1px solid #b7b7b8;
	margin-bottom:		2rem;
}
div.product img
{
	margin:			0;
	padding:		0;
	max-width:		100%;
}
div.productDesc
{
	height:		100%;
}

p.price
{
	display:	block;
	
}

sup
{
	font-size:				0.7rem;
	font-weight:			normal;
	font-style:				normal;
}

small
{
	font-size:				0.6rem;
	font-weight:			normal;
	font-style:				normal;
	color:					#4a4a4a;
}

header
{
	display:				flex;
	flex-direction:			row;
	align-items:			center;
	justify-content:		center;
}
header #headerImgWrap
{
	display:			block;
	max-width:			100%;
	width:				auto;
	height:				auto;
	padding-top:		10px;
}
@media (max-width: 630px)
{
	header
	{
		flex-direction:		column;
	}
}
header img
{
	max-width:			160px;
}


footer
{
	font-size:				0.6rem;
	font-weight:			normal;
	font-style:				normal;
	color:					#4a4a4a;
	text-align:				right;
}

img.smallIcon
{
	margin-left:			4px;
	padding:				0;
	border:					none;
}

footer a:link, footer a:visited
{
	color:					#303030;
	-webkit-transition:		color 0.3s;
	transition:				color 0.3s;
}
footer a:hover
{
	color: 			#d7c6f9;
}