/* CSS Document */

/*reset CSS from Eric Meyers*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/*Reset all items*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
img {max-width: 100%;} /*make sure all images stay within bounds*/
/*use box-sizing */
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/*add a border to the elements of the page*/
/*header, article, aside, footer {border: 1px solid #111; padding: 10px 1em; margin: 0 5% 10px;}*/
/*add a background image to the header*/
/*header {background-image: url(../images/pandabanner2.jpg); margin-top: 10px; background-position: center top;}*/
header {max-width: 63em; margin: auto;}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Apply broad styles*/
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1em;}
h1,h2,h3{font-weight: bold; margin: 5px 0;}
p {font-size: 1em; margin: 5px 0;}
ul{padding-left: 10px; margin: 10px 0; list-style-type: disc;}
li{margin-left: 10px; padding-left: 10px}
nav { font-size: 1.5em;}
body{
font-family: Arial, Helvetica, sans-serif; 
background-image: url("../images/backgroundTileFlipped.png");  
background-repeat: repeat; 
}
/*Specific styles*/
#fullpage{/*applied to the container to stop the page getting no wider than this, about 1008 px with font size of 16*/
max-width: 63em; 
margin: 10px auto; 
border: 2px solid #ccc; 
padding: 1em; 
background-color: #fff;
border-radius: 10px;
}
#pictureBanner{/*Flower image at the top of the index page*/
width: 100%;
}
#pictureBanner img{
border: none;
width: 100%;
border-radius: 10px;
}
#content{width:100%; margin: auto; padding: 0; line-height: 1.5; overflow: hidden;}
#contenttitle{width:100%; margin: 30px auto; padding: 0; text-align: center;}
#content ul {list-style-type: none;}
.clearboth{
	clear: both;
}
.centreTextBlock
{
	margin: 10px auto;
	padding: 10px;
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	display: inline-block;
	border-radius: 10px;
	
}
/*Trying to get the paypal button centred*/
#paypalbuttons
{
width: 100%;
text-align: center;
padding: 10%;
}
.centreTextBlock p{
	margin: 10px auto;
	width: 100%;
	padding: 3px;
}
#listOfLinks
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	display: inline-block;
	border-radius: 10px;
}
/*list of links on the index page*/
#listOfLinks ul{
	list-style-type: none;
	margin: 0;
	padding: 0;		
}
#listOfLinks ul li img{
	max-width: 200px;
	min-width: 150px;
	width: 100%;
	border: 2px solid #ccc;
	margin: 3px auto;
	text-align: center;
	float: none;
	padding: 0;
	border-radius: 10px;
}
#listOfLinks ul li{
	float: left;
	margin: 10px;
	width: 22%;
	max-width: 210px;
	min-width: 160px;
	height: 250px;
	text-align: center;	
	padding: 0;	
}
/*used on the blogs page as there are only 3 buttons*/
#listOfLinks2
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	/*border: 2px solid #C5D5CE;*/
	display: inline-block;
	/*border-radius: 10px;*/
}
/*list of links on the index page*/
#listOfLinks2 ul{
	list-style-type: none;
	margin: 0;
	padding: 0;		
}
#listOfLinks2 ul li img{
	max-width: 200px;
	min-width: 150px;
	width: 100%;
	border: 2px solid #ccc;
	margin: 3px auto;
	text-align: center;
	float: none;
	padding: 0;
	border-radius: 10px;
}
#listOfLinks2 ul li{
	float: left;
	margin: 4%;
	width: 25%;
	max-width: 210px;
	min-width: 160px;
	height: 250px;
	text-align: center;	
	padding: 0;	
}
/*Wedding page list*/
.weddingpagelist{
	width: 80%;
	margin: 10px auto;
	border: 2px solid #C5D5CE;
	/*display: inline-block; allows you to set a width and height on an element*/
	border-radius: 10px;
	overflow: hidden;
}
.weddingpagelist ul
{	
	list-style-type: none;
}
.listitemleft{
	width: 60%;
	float: left;
	margin: 5px;
}
.listitemright{
	width: 20%;
	float: right;
	margin: 5px;	
}
/*The Blog - List of blog items on the blog main page*/
#blogList
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	display: inline-block;
	border-radius: 10px;
	text-align: left;
}
/*list of links on the index page*/
#blogList ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;		
}
.blogItem{/*attached to li*/
	float: left;
	margin: 10px auto;
	width: 98%;	
	text-align: center;	
	padding: 5px 0;
	border: 2px solid #C5D5CE;
	border-radius: 10px;		
}
#bannerImg{
	width: 100%;	
	margin: 10px auto;
	text-align: center;
	padding: 0;
}
#bannerImg img{
	width: 100%;
	border-radius: 10px;
	margin: auto;
	text-align: center;
	padding: 0;
}
.blogItem img{
	max-width: 200px;
	min-width: 150px;
	width: 22%;
	border: 2px solid #C5D5CE;
	margin: 10px;
	text-align: center;
	float: left;
	padding: 0;
	border-radius: 10px;
}
.blogItem p
{
	float: left;
	margin: 10px;
	width: 73%;	
	text-align: left;	
	padding: 0;
	white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
.blogItem h2
{
	float: left;
	margin: 10px;
	width: 73%;	
	text-align: left;	
	padding: 0;
	font-size: 1.2em;
}
.centreImg{
	float: none;
	margin: 10px auto 5px auto;
	width: 100%;
	text-align: center;

}
.centreImg img{
	max-width: 500px;
	min-width: 200px;
	width: 100%;
	margin: 10px auto 5px auto;
	padding: 0;	
	box-shadow: 6px 6px 6px #888;
}
video {
  height: 90%;
  width: 90%;
}
.caption{
	float: none;
	width: 70%;
	margin: 0 auto 5px auto;
	padding: 5px;
	border: 1px solid #C5D5CE;
	border-radius: 10px;
	max-width: 500px;
	min-width: 200px;
}
.centreText{
	float: none;
	width: 90%;
	margin: 10px auto 20px auto;
	white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
.middleText{
	text-align: center;
}
#blogWrapper
{
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
}
#author{
	width: 100%;
	margin: 5px auto;
	font-family:"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive;/*without this the font is plain on mobile"*/
	text-align: center;
	font-size: 2em;		
}
#date{
	width: 100%;
	margin: 5px auto;	
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
}
#listOfOtherItems
{
	width: 100%;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 5px auto;
	text-align:left;	
}
/*For flowers.php pag - changes layout depending on how many categories*/
#list3Categories
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	/*border: 2px solid #C5D5CE;*/
	display: inline-block;
	/*border-radius: 10px;*/
}
/*list of links on the index page*/
#list3Categories ul{
	list-style-type: none;
	margin: 0;
	padding: 0;		
}
#list3Categories ul li img{
	max-width: 200px;
	min-width: 150px;
	width: 100%;
	border: 2px solid #ccc;
	margin: 3px auto;
	text-align: center;
	float: none;
	padding: 0;
	border-radius: 10px;
}
#list3Categories ul li{
	float: left;
	margin: 4%;
	width: 25%;
	max-width: 210px;
	min-width: 160px;
	height: 250px;
	text-align: center;	
	padding: 0;	
}
/*For flowers.php pag - changes layout depending on how many categories*/
#list2Categories
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	/*border: 2px solid #C5D5CE;*/
	display: inline-block;
	/*border-radius: 10px;*/
}
/*list of links on the index page*/
#list2Categories ul{
	list-style-type: none;
	margin: 0;
	padding: 0;		
}
#list2Categories ul li img{
	max-width: 200px;
	min-width: 150px;
	width: 100%;
	border: 2px solid #ccc;
	margin: 3px auto;
	text-align: center;
	float: none;
	padding: 0;
	border-radius: 10px;
}
#list2Categories ul li{
	float: left;
	margin: 4% 0 4% 16%;
	width: 25%;
	max-width: 210px;
	min-width: 160px;
	height: 250px;
	text-align: center;	
	padding: 0;	
}
/*For flowers.php pag - changes layout depending on how many categories*/
#list1Categories
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	/*border: 2px solid #C5D5CE;*/
	display: inline-block;
	/*border-radius: 10px;*/
}
/*list of links on the index page*/
#list1Categories ul{
	list-style-type: none;
	margin: 0;
	padding: 0;		
}
#list1Categories ul li img{
	max-width: 200px;
	min-width: 150px;
	width: 100%;
	border: 2px solid #ccc;
	margin: 3px auto;
	text-align: center;
	float: none;
	padding: 0;
	border-radius: 10px;
}
#list1Categories ul li{
	margin: 4% auto;
	width: 25%;
	max-width: 210px;
	min-width: 160px;
	height: 250px;
	text-align: center;	
	padding: 0;	
}
/*Product Pages*/
#productPageWrapper
{
	width: 100%;
	height: auto;
}
.productWrapper
{
	width: 29%;
	height: auto;	
	padding: 10px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	float: left;
	margin: 5px;
}
.productWrapper2
{
	width: 31%;
	height: 530px; /*needed to set this height or it kept leaving spaces on the rows*/	
	padding: 5px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	float: left;
	margin: 2px;	
}
.productWrapper2 .description{
	width: 100%;	
	padding: 0;	
	margin: 10px 0;
	height: 60px;	
}
.productWrapper2 .numAvailable{
	width: 100%;	
	padding: 0;	
	margin: 0;
	height: 40px;
}
.productWrapper2 .price{
	width: 100%;	
	padding: 0;	
	margin: 5px 0;
	font-weight: bold;
	height: 40px;
}
/*(for product list page)*/
.smallproductImg{
	width: 100%;
	margin: 10px auto 5px auto;
	padding: 0;
	}
.smallproductImg img{
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	/*display: block; to remove gap under an image*/ 
	border: none;
	border-radius: 10px;
}
/*for product detail page*/
.productImg{
	/*width: 100%;	
	padding: 10px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 5px auto;*/
	max-width: 500px;
	min-width: 200px;
	width: 100%;
	margin: 10px auto 5px auto;
	padding: 0;
}
.productImg img{	
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	/*display: block; to remove gap under an image*/ 
	border: none;
	border-radius: 10px;
}
.productTypeImg{
	/*width: 100%;	
	padding: 10px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 5px auto;
	max-width: 500px;
	min-width: 200px;*/
	width: 40%;
	margin: 10px auto 5px auto;
	padding: 0;
}
.productTypeImg img{	
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	/*display: block; to remove gap under an image*/ 
	border: none;
	border-radius: 10px;
}
.productName{
	height: 50px;
	width: 100%;	
	padding: 0;	
	margin: 0;
	font-weight: bold;
	text-align:center;
	font-size: 1.1em;
}
.price{
	width: 100%;	
	padding: 0;	
	margin: 5px 0;
	font-weight: bold;
	text-align: center;
}
.numAvailable{
	width: 100%;	
	padding: 0;	
	margin: 0;
}
.description{
	width: 100%;	
	padding: 0;	
	margin: 10px 0;
	height: 100px;	
}
/* buy button */
.addToBasket a {
  float: right;
  display: block;
  color: #C5D5CE;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 1em;
  width: 25%;
  border-radius: 10px;  
  margin: 3px 12px;
 /* background-color: #AE90AC;*/
 background-color: #9290AE;
  color: white;
}

/* Change the color of links on hover */
.addToBasket a:hover {
  background-color: #FFC380;
  color: #fff;
}
/*For the detail page*/
#detailWrapper
{
	width:80%;
	height: auto;	
	padding: 10px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;	
	margin: 5px auto ;	
}
.detailDescription{
	margin: 10px auto;
	text-align: center;
	padding: 0;
	width: 90%;
	height: auto;
	white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */			
}
/* Shopping Cart*/
#shopcartWrapper{
	width:90%;
	height: auto;	
	padding: 10px;
	border: 2px solid #D5E5DE;
	border-radius: 10px;	
	margin: 5px auto ;
	/*background-color: #BEB0BC;*/
}
.msgBox{
	width:80%;
	height: auto;
	color: #c91a98;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;	
}
.rowWrapper{
	width: 100%;	
}
.scnameimageWrapper{
	width: 40%;
	float:left;
}
.scpriceWrapper{	
	width: 50%;
	float: right;		
}
.scname{
font-weight: bold;
width: 100%;
margin: 3px;
text-align:left;
font-size: 1.1em;
}
.scimage{
	width: 40%;
	margin: 10px auto 5px auto;
	padding: 0;
	float: left;
}
.scimage img{	
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	/*display: block; to remove gap under an image*/ 
	border: 2px solid #C5D5CE;
	border-radius: 10px;
}
.scnuminstock{
width: 100%;
margin: 3px;
text-align:left;
}
/*.scquantity{
width: 100%;
margin: 3px;
text-align: left;
font-weight: bold;
}*/
.scprice{
width: 100%;
margin: 3px;
text-align: left;
font-weight: bold;
}
.sctotal{
margin: 3px;
width: 100%;
text-align: left;
font-weight: bold;
}
/*Update cart button
.scupdate a {
  float:right;
  display: block;
  width: 100px;
  margin: 3px;
  color: #C5D5CE;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 1em; 
  border-radius: 10px; 
  background-color: #9290AE;
  color: white;
}*/
/* Change the color of links on hover 
.scupdate a:hover {
  background-color: #FFC380;
  color: #fff;
}*/
.scline{
border-top: 2px solid #C5D5CE;
width: 100%;
margin: 10px auto; 
}
.scgrandTotal{	
	width: 100%;
	text-align: right;
	font-weight: bold;
}
.shopcartform{
width: 100%;
margin: 30px 0 10px 0;
}
.shopcartform label{
   	float: left;
   	width: 100px;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin: 3px;
}
.shopcartform input[type=text]{
	float: left;
    width: 50px !important;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
}
#explanation{
	width: 100%;
	margin: 25px 0;		
}
#explanation p{
	width: 100%;
	margin: 30px 0;
}
#buyform{
	width: 100%;
	margin: 10px 0;
}
#buyform label{
   	float: left;
   	width: 100px;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin: 3px;
}
#buyform input[type=text]{
	float: left;
    width: 50% !important;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
}
#buyform textarea{
	float: left;
    width: 100% !important;
	height: 60px;
	font-size: 1em;	
	text-align: left;
}
/*Collection page*/
.twoimages{
	width:100%;

}
.imageleft{
	width: 45%;
	float: left;

}
.imageright{
	width: 45%;
	float: right;

}
.animage img{
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	/*display: block; to remove gap under an image*/ 
	border: 2px solid #C5D5CE;
	border-radius: 10px;

}
/*article img{float: left; padding-right: 3%; padding-bottom: 10px; max-width: 80%; }  /*max width 100% means it will never be displayed bigger than the screen*/

/* all links */
a {
	text-decoration: none;
	color: #000000;
	font-weight: bold;	
}
a:visited{
	text-decoration: none;
	color: #92a29b;
}
a:hover {
	text-decoration: none;
	color: #FFC380;
}
/*Menu and header*/
nav {
    width: 100%; 
    overflow: hidden;
	font-family:Verdana;
	/*border: 1px solid #999; 
	background-color: #ffd900;*/
}

/* COLLAPSIBLE MENU FROM https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Add a black background color to the top navigation */
.topnav {
  background-color: #fff;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #C5D5CE;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 0.8em;
  width: 25%;
  border-radius: 10px;  
  margin: 3px 12px;
  background-color: #98b5af ;
  color: black;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #e3ccbd;
  color: #black;
}

/* Add an active class to highlight the current page - not using this because menus is now in a separate file used by all pages*/
.topnav a.active {
  background-color: #98b5af ;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/*END OF COLLAPSIBLE MENU*/

#header{	
	width: 100%;
	margin: 0 auto 10px auto;
	padding: 0;			
}
#title{
	width: 100%;
	margin: 20px;
	font-size: 3em;
	font-weight: bold;
	color: #000000;
	font-family: "Segoe Print", “Bradley Hand ITC”,  cursive, sans-serif;/*without this the font is plain on mobile"*/
	/*font-family: “Bradley Hand ITC”,  cursive, sans-serif;*/
	text-align: center;	
}
.logo{
width: 20%;
margin: 5px auto;
}
.logo img{
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	display: block; /*to remove gap under an image*/ 
}
#shopCartBanner{
	width: 100%;
	margin: 0;
	padding:0;	
	overflow: hidden;	
}
#shopCart{
	width: 60px;
	float: right;
}
#shopCart img{
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	display: block; /*to remove gap under an image*/
}
#tagline{
	float: right;
	width: 69%;
	font-size: 1.5em;
	color: #505050;
	text-align: right;
	font-family:Verdana;
	font-weight: bold;
	margin: 20px auto;	
}
.imgThenTextWrapper{
	width: 100%;
	display: inline-block;	
	margin: 10px auto;
	padding: 0;	
}
.leftimg
{	
	width:33%;	
	float: left;
	border: 2px solid #C5D5CE;
	margin: 0;
	border-radius: 10px;
	padding: 5px;
}
.leftimg img{	
	width: 100%;
	float: none;	
	margin: 0;
	padding: 0;
	display: block; /*to remove gap under an image*/ 
}
.righttext{
	width: 63%;	
	float: right;
	padding: 10px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 0;			
}
.horizontalLine{
border-top: 2px solid #C5D5CE;
width: 100%;
margin: 10px auto; 
}
#footer{
width: 100%;
text-align: center;
}
/*Flowers from the farm logo */
#footerImgs{
	width: 100%;	
	margin: 0;
	padding: 0;
}
#footerImgs img{
	max-width:150px;
	min-width: 100px;
	width: 30%;
	text-align: center;
	float: none;	
	margin: 10px auto;
}
/*Admin Area *********************/
#loginBox{
width: 50%;
margin: 10px auto;
border: 2px solid #C5D5CE;
border-radius: 10px;
overflow: hidden;
padding: 10px;
}
form {
    overflow: hidden;
	
} 
textarea, input, button, select,file { font-family: inherit; font-size: inherit; }
label {
    float: left;
    width: 200px;
    padding-right: 24px;
	font-size: 0.9em;
} 
input[type=text] {
    float: left;
    width: calc(100% - 100px);
	font-size: 0.9em;
} 
input[type=number] {
    float: left;
    width: calc(30% - 100px);
	font-size: 0.9em;
} 
input[type=submit] { 
	/*float: right;
  	display: block;	*/
  	text-align: center;
  	padding: 5px;
  	text-decoration: none;
  	font-size: 1em;
  	width: 25%;
  	border-radius: 10px;  
  	margin: auto 12px;
 	background-color: #AE90AC;
 /*	background-color: #9290AE;*/
  	color: white;
	border: 2px solid #C5D5CE;
}
input[type=file] {
    float: left;
    width: 250px;
	font-size: 0.9em;
}
textarea{
	float: left;
    width: calc(100%);
	height: 150px;
	margin: 0 0 10px 0;
	font-size: 0.9em;		
}
button{
	font-size: 0.9em;
}
/*menu*/
#menuWrapper
{
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
}
.menuLeft{
	width: 45%;
	height: 200px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 10px;
	float: left;
	padding: 10px;
}
.menuRight{
	width: 45%;
	height: 200px;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 10px;
	float: left;
	padding: 10px;
}
/*Add to database pages */
#formWrapper{
	width: 90%;
	margin: 10px auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	overflow: hidden;
	padding: 10px;
}
.formWrapperParagraph{
	width: 95%;
	margin: 10px auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	overflow: hidden;
	padding: 10px;
	/*white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
.formWrapperParagraph input[type=text]{
	width: calc(100% - 400px);	
}
.formWrapperParagraph label{
	width: 150px;
}
.formImgWrapper{
	width: 60%;
	margin: 10px auto;
	overflow: hidden;
	padding: 0;
	float: left;
}
.formImgParaWrapper{/*used for the form to update a paragraph image*/
	width: 50%;
	margin: 5px auto;
	float: none;
}
.formImgWrapperPopUp{
	width: 100%;
	margin: 10px auto;
	overflow: hidden;
	padding: 0;
	float: left;
}
#messageBar{
	width: 100%;
	margin: 5px auto;
	overflow: hidden;
	padding: 5px;
	color: red;
	text-align: center;
}
#backButton{
	width: 30%;
	float: left;
	margin: 5px auto;
}
#findBlogWrapper{
	width:50%;
	float: right;
	margin: 5px auto;
}
#dropDown{
	width:70%;
	margin: 5px auto;
	float: right;
	font-size: 0.9em;
	font-weight: bold;
}
#dropDownLabel{
	width:20%;
	margin: 10px auto;
	float: right;
	font-size: 0.9em;
	font-weight: bold;
}
#thumbnail{
    max-width: 200px;
	min-width: 100px;
	width: 20%;
	border: 2px solid #C5D5CE;
	margin: 10px;
	text-align: center;
	float: left;
	padding: 10px;
	border-radius: 10px;
	
}
#banner{
    max-width: 1300px;
	min-width: 500px;
	width: 80%;
	border: 2px solid #C5D5CE;
	margin: 10px;
	text-align: center;
	float: left;
	padding: 10px;
	border-radius: 10px;
	
}
.paragraphWrapper{
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 10px auto;
	/*white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
/*Form for the backend Add A Pick Up Date*/
#pickUpDateForm input[type=text]{
    width: 200px !important;
	float: left;
}
#pickUpDateForm input[type=date]{
    width: 200px !important;
	float: left;
}
#pickUpDateForm input[type=checkbox]{
    width: 200px !important;
	float: left;
}
#pickUpDateForm label{
	width: 150px;
	float: left;
	font-weight: bold;
}
/*div to display the pickup dates*/
#pickUpDayDisplay{
	width: 90%;
	margin: 10px auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	overflow: hidden;
	padding: 10px;
}
.formDeleteDate{
	width: 100%;
}
.formDeleteDate input[type=text]{
    width: 100px !important;
	float: left;
}
.dateTime{
	width: 400px;
	float: left;
	font-size: 0.9em;
	margin: 5px 0 0 0;
}
.dateTimeLine{
border-top: 2px solid #C5D5CE;
width: 100%;
margin: 5px auto; 
}
/*Backend - Administer Orders*/
.orderWrapper{
	width: 100%;
	height: auto;
	border: 2px solid #C5D5CE;
	border-radius: 10px;
	margin: 10px auto 20px auto;
	overflow: hidden;
}
.collectionDate{
	width: 100%;
	height: auto;
	font-weight: bold;
	font-size: 1.2em;
	margin: 20px;	
}
.orderDetails{
	width: 95%;
	height: auto;
	margin: 20px auto;	
}
.pname{
width: 35%;
margin:5px 5px 5px 20px;
float:left;
}
.pquantity{
width: 15%;
margin: 5px;
float:left;
}
.pprice{
width: 10%;
margin: 5px;
float:left;
}
.ptotal{
width: 10%;
margin: 5px;
float:left;
}
.pnumstems{
width: 10%;
margin: 5px;
float:left;
}
.customerDetails{
	width: 45%;
	float: left;
	height: auto;
	margin: 10px 20px;	
}
.orderButtons{
	width: 45%;
	float: left;
	height: auto;	
	margin: 10px;	
}
.orderButtons form input[type=submit] { 
  	text-align: center;
  	padding: 5px;
  	text-decoration: none;
  	font-size: 1em;
  	width: 200px;
  	border-radius: 10px;  
  	margin: 5px auto;
 	background-color: #AE90AC;
  	color: white;
	border: 2px solid #C5D5CE;
	float: left;
}

/*************MISC********************/
.middleButton{
	width: 150px;
	margin: 10px auto;	
	text-align: center;
	clear: both;
	float:none;
}
.boldText{
	font-weight: bold;
}
.boldTextMiddle{
	font-weight: bold;
	text-align: center;
}
/************General Button*****/
.pagebutton {
  background-color: #fff;
  overflow: hidden;
  margin: 5px auto;
  font-size: 1.1em;
  width: 250px;
}
/* Style the links inside the navigation bar */
.pagebutton a {  
  display: block;
  color: #C5D5CE;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border-radius: 10px; 
  background-color: #C5D5CE;
  color: white;
}

/* Change the color of links on hover */
.pagebutton a:hover {
  background-color: #FFC380;
  color: #fff;
}

/* Add an active class to highlight the current page - not using this because menus is now in a separate file used by all pages*/
.pagebutton a.active {
  background-color: #C5D5CE;
  color: white;
}
.instagramlogobar{
width: 100%;
overflow: hidden;
margin: 5px auto;
padding: 5px;
}
.InsFBLogos{
	width: 20%;
	margin: 3px auto;
}
.instagramtext{
	margin: 5px;
	width: 100%;
	text-align: center;
}
.instagramlogo{
	width: 30%;
	text-align: center;
	margin: 10px;
	float: left;
}
.instagramlogo img{
	float: none;	
	margin: 0;
	padding: 0;
	display: block; /*to remove gap under an image*/ 
	width: 100%;
}