/*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;
}

#lefthlogo p {font-family: Georgia, Garamond, serif; font-size:-1; font-style: italic;}

#lefthlogo img {margin: 0;}

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

#cartbox {
	border-radius: 4px;
	border : 2px solid #dff8ce;	
	padding-right: 0.5em;
	padding-left: 0.5em;
	margin-right: 0.2em;
}

/*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;
}

#cartnav :hover {background : #548941;}
/*#ROC_infototal:hover {background : #548941;}*/

.topnav input[type=submit] {
text-decoration:none;
font-size : inherit;
font-family: arial, helvetica, sans-serif;
padding : 0 1em 0em 1em;
text-decoration:none;
color: #FFF;
background:#548941;
border:none;
}

.topnav input[type=submit]:hover {color:#000;background: #a5e489;}

/*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, also used for main body & footer*/
.sidemenu, .footer     {background : #dff8ce; border :4px solid #548941;margin: 0 0 1em 0; padding: 0 0 0.5em 0;border-radius:8px;}

.sidemenu h2, .footer 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, .footer p {text-align:center;padding: 0 0.2em}

.sidemenu img{text-align:center;border-radius:6px;}

.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 {
border:1px solid #AAA;border-radius:6px;
}

.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: 200px;
/*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;
	border-radius: 6px;
}



#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, .bigcalendarDisplay  {align:right; }
.calendarDisplay img , .bigcalendarDisplay img  {max-width: none; width: auto; height: auto;border-radius: 0px; margin: 0 0 0 0 ; padding:0;}

.footertitle {text-transform:uppercase}

.footer {clear: both}
/*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" */
  text-decoration: none;   
   z-index: 30;
	color: #548941;
	text-align: center;
	font-weight: bold;
	font-size:0.7em;
	background: rgba(255,255,255,0.80);
	border :3px solid #548941;margin: 0 0 0 0; padding: 0.2em 0.5em ;border-radius:4px;
	box-shadow: 5px 5px 5px   rgba(0,0,0,0.7);
  /*
	 border: 1px solid #dff8ce;
	background: rgba(84,137,65,0.90); 
	color:#fff;
	text-align: center;
	font-size: 100%;
	margin: 0 10 20 0;padding: 15 15;*/
}

   .menu-link:hover
    {background :#ADE694; 
       /*background: rgba(84,137,65,1.00);
	   color: #FFFFFF*/
   }

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

 


/* -- 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;padding: 0px; border:0 }
}

	
@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;}
	
img{max-width:290px; height:auto;}
	
.topnav ul li {margin: 0.3em 0.1em;}
	
/* make RS logo smaller on phones*/
#lefthlogo img {max-width: 70%;padding-top: 0.5em}

#header1 {
font-size : 80%;
padding: 2px 0 0px 0;
margin: 2px 0 2px 0;
}

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

#paymentSideMenu img{display: inline;}

#socialmediaSideMenu img{display: inline;}

#content {margin-left: 0px;padding: 0.5em 0.5em} 

.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;
}

}  /*********************** end of 680px************************/

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