/*pale green dff8ce*/

body {
margin : 0;
padding : 0;
font-family: Georgia, Garamond, serif;
font-size: 16px;
/*background : #ffe;*/
background : #ffffff;
}

#container {
width : auto;
margin:1px 10px 1px 10px;
padding : 5px; 
border : 2px solid #548941;
border-radius:8px;

background : #ffffff;
/*container is  WHITE*/
}

/*TOP HEADER  was ffa*/
#header1 {
background : #dff8ce;
font-size : 100%;
padding: 5px 0 5px 0;
margin: 5px 0 5px 0;
position:relative;
}
/* was width:80% */
#lefthlogo {float:left; width: 100%; text-align:center
; background-color:#dff8ce;margin: 0 0 0 0;padding:0 0 0 0;
}

#centerlogo { text-align:center
; background-color:#dff8ce;margin: 0 0 0 0;padding:0 0 0 0;
}

	
#cartbox {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 90%;
	text-align: center;
	/*right:5px;top:5px;*/
	z-index: 2;
	padding: 2px 3px 2px 3px;
	border : 1px solid #548941;
	border-radius: 8px;
	background : #dff8ce;
	height: 38px;	
}

/*TOP NAVIGATIONY*/
.topnav {margin: 0 0 0.5em 0;}
		
.topnav ul {
font-size : 80%;font-family: arial, helvetica, sans-serif;
float : left; width: 100%;
padding: 0.3em 0 0.3em 0;margin : 0 0 0 0;
background : #548941;
/*this is the colour of the ENTIRE strip across the page*/
}

.topnav ul li {
display : inline;
float : right;
}

.topnav ul li a {
text-decoration:none;
padding : 0 1em 0em 1em;
color: #FFF;
background:#548941;
}


.topnav ul li a:hover,  .topnav ul li:hover, .topnav ul li a#current {
background : #a5e489;
color:#000;
}

/*LEFTNAV COLUMN*/
#sidebar {
float : left; width : 200px;padding :0 0 0 0; background : inherit; 
/*specify padding  if used, in px  so that position of content can be exact*/
   z-index: 25; /* so the menu or its navicon stays above all content */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}

/*GENERAL CLASSES*/
.serif-italic {font-family: Georgia, Garamond, serif; font-style: italic}
.small-sans-centered {font-family: Arial, Helvetica, sans-serif; font-size: smaller; text-align: center }
.redText { color:#C00;}
.center1  {display:block; margin-left:auto ;margin-right:auto; margin-top:0.5em; margin-bottom:0; text-align:center}

/*SIDE MENU - each individual menu in the SIDEBAR*/
.sidemenu     {background : #dff8ce; border :4px solid #548941;margin: 0 0 1em 0; padding: 0 0 0.5em 0;border-radius:8px;}

.sidemenu h2  {background: #548941; color:#fff;text-align: center; font-size: 100%;text-transform:uppercase;margin: 0 0 0.5em 0;padding: 0 0 0 0;}

.sidemenu p{text-align:center;}

.sidemenu img{text-align:center;}

.sidemenu ul  {font-size : 95%;list-style-type: none;margin : 0 0 0 0;padding: 0 0 0 0;text-align: left;}

.sidemenu ul li {font-family: arial, helvetica, sans-serif;width:100%;}

.sidemenu ul li a {
display : block; 
margin : 0 0.5em 0 0.5em;
padding: 0.2em 0.5em 0.2em 0.5em;
border: 1px solid #dff8ce;

}
.sidemenu ul li a:hover, .sidemenu img:hover {
border:1px solid #AAA;border-radius:8px;
}
.sidemenu ul li a#current {

}

.sidemenu ul li input[type="text"] {margin-left : 0.5em;}

.smallscreensonly {
	display: none;
	font-family: Georgia, Garamond, serif;
	font-style: italic;
	font-size: 80%;
	text-align: center;
}

/*MAIN CONTENT OF PAGE*/
#content {
margin-left: 210px;
/*this has to MATCH THE width of left navbar. (or be bigger)*/
padding : 1em 1em 1em 1em;
background : inherit;
color : #333;
font-family: Georgia, Garamond, serif;
font-size:16px;
}

img {
    max-width: 100%;
    height: auto;
	margin-left: 5px;
	margin-bottom: 5px
}

#content h1{text-align:center;font-size:120%;font-family: Georgia, Garamond, serif; text-transform:uppercase;}
/*H1 is for page headers*/

#content h2{text-align:center;font-size:100%; font-family: Georgia, Garamond, serif;text-transform:uppercase;}
/*H2 is for page sub headers*/


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: green;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
   /* fade it in */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.subheading {text-align:center; font-style:italic; font-size:100% ;text-transform:none;}

.seedtitle {text-align:left;font-size:100%; font-family:arial, helvetica, sans-serif;text-transform:none;}

.price img {position:static;float:none;vertical-align:bottom;}

.seedsummary  {font-style:italic;}

.float-right {float:right;margin:4px 0 4px 4px;}

.float-left {float:left;margin:4px 4px 4px 0px;}

.cleared-divider {width:95%;margin-left:auto;height:2px;margin-right:auto; margin-top:1em; margin-bottom:1em;clear:right;background:#999;}

.cleared-divider-small {width:65%;margin-left:auto;height:2px;margin-right:auto; margin-top:1em; margin-bottom:1em;clear:right;background:#999;}


/*
.feedback {float:right; width:80%; background:#ffff66; font-family:"Courier New", Courier, monospace; font-size:100%;
padding: 0.5em 0.5em 0.5em 0.5em; margin: 4px 0 4px 4px; border: 1px solid #AAA;}
*/

.feedback {float:right; width:90%; background:#dff8ce; font-family:"Courier New", Courier, monospace; font-size:90%;
padding: 0.5em 0.5em 0.5em 0.5em; margin: 4px 0 4px 4px; border: 1px solid #AAA;}



.iconbox {float:right; width:10em; background:#ffff66; font-family:"Courier New", Courier, monospace; font-size:90%;padding: 0.5em 0.5em 0.5em 0.5em; margin: 4px 0 4px 4px; border: 1px solid #AAA;text-align:center;}

.orangeinfobox {padding:0.5em 0.5em 0.5em 0.5em; width:80%; margin-left:auto; margin-right:auto; clear:right; background:#ffb366}
.yellowinfobox {padding:0.5em 0.5em 0.5em 0.5em; width:80%; margin-left:auto; margin-right:auto; clear:right; background:#ffffa3}

.imgContainer img{max-width:100%; display:inline-block;}

.calendarDisplay {align:right; }
.bigcalendarDisplay {align:right; }
.calendarDisplay img {max-width: none; width: auto; height: auto; margin: 0 0 0 0 }
.bigcalendarDisplay img {max-width: none; width: auto; height: auto; margin: 0 0 0 0}


/*FOOTER*/
#footer {
background: #dff8ce;
border: 4px solid #548941;
margin: 0px;
padding: 1em;
border-radius: 8px;
clear : both;
/*padding : 5px;
margin : 0;
font-size : 80%;
border 2px solid #548941;
border-radius:8px;
background : #ff9;*/
color : #548941;
text-align:center;
}
#footer h1 {
font-size:120%;}

#footer p{font-size:80%;}
			
			
/* ------------------------------------------------ RESPONSIVE ------------------------------------*/
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
`.menu-link`  menu toggle that shows/hides on
small screens.
*/
.menu-link {
   position: relative;
   display: none; /* show this only on small screens */
   top: 0;
   left: 0; /* "#menu width" */
   background: #000;
   background: rgba(0,0,0,0.7);
   font-size: 12px; /* change this value to increase/decrease button size */
   z-index: 30;
   width: 2em;
   height: auto;
   padding: 1.6em 1.2em;
}

   .menu-link:hover,
   .menu-link:focus {
       background: #000;
   }

   .menu-link span {
       position: relative;
       display: block;
   }

   .menu-link span,
   .menu-link span:before,
   .menu-link span:after {
       background-color: #fff;
       width: 100%;
       height: 0.2em;
   }

       .menu-link span:before,
       .menu-link span:after {
           position: absolute;
           margin-top: -0.6em;
           content: " ";
       }

       .menu-link span:after {
           margin-top: 0.6em;
       }


/* -- Responsive Styles (Media Queries) --- */
/* --small calendar 419 px   big calendar 602 px ----- */
/* --small phone 320 x 480 px   big phone 480 x 584 px ----- */

@media (max-width: 900px) {
	.bigcalendarDisplay {
	display:none;}
	#container {margin:1px 2px 1px 2px;}
}

	
@media (max-width: 680px) {
#container {margin-left: 20px;}
/*
make tap targets bigger & further apart for fat fingers
*/

.sidemenu ul li a {padding: 0.5em 0.5em 0.5em 0.5em;}
.topnav ul li {margin: 0.5em 0.5em 0.5em 0.5em;}

#sidebar img { display: none; }
#sidebar {
    width: 220px;
	position: absolute;
   left: -230px;
   top: 0px;
	z-index: 29 }
	
#sidebar.active {width : 230px;
	border-radius: 8px;
       position: absolute;
   left: -15px;
   top: 0px;
	z-index=31;
    padding: 5px;
    box-shadow: 10px 5px 20px   rgba(0,0,0,0.8);
   }	
	
#container {position: relative; left: 0px;}

#paymentSideMenu img{display: inline;}

#socialmediaSideMenu img{display: inline;}

#content {
margin-left: 0px;} 

.menu-link {
       position: fixed;
       left: 0;
       display: block;
		z-index=30}
.hiddenonsmalldevices {display: none;}
/*.hiddenonbigdevices {display: initial}  haven't got this working yet*/
/*
Add transition to containers so they can push in and out.
*/

#sidebar,
.menu-link {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
}


@media (max-width: 500px) {
	.calendarDisplay {
	display:none;}
	.smallscreensonly {display: inline;}
	#content {margin-left: 0px;font-size: 14px} 
}