/* The following styles have no impact on the layout  

  *********************************************
  *                                                                           *
  *     STYLING FOR EMC                                        *
  *                                                                           *
  *********************************************
          The colour pallet
  	#FCF2CC   Light sand (main background) 
	#FCEAA4   Dark sand (RH background).
	#EDCD78    Navigator background 
	#644B0D    Very dark brown (current page in nav)
	#916F13     Dark brown - hover colour
	#000000    Black
	#FFFFFF   White

 define standard setup so we know what we are about to change from! */
*	{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
	}
html, body, div
	{
	margin: 0;
	}
/* Ensure text has space around it */ 	
h1, h2, h3, h4, h5, h6, p 
	{	
	padding: 0;
	margin:0 10px 10px 10px; /*  Needs over-writing for IE if margins used */
	}
	/* Warning - retain margin-top: 0; on first item in footer or a gap appears ! */
h1	{
 	font-size: 1.5em; 
	}
h2	{
 	font-size: 1.3em; 
	}
h3	{
	font-size: 1.2em; 
	font-weight: bold;
	}
strong {
   text-decoration: underline;
   }
/* colours - user choice, but see notes.  */
body {	
	background-color: #ffffff;	/* White */
	}
/* background on container, under everything */	
#container
	{
	background-color: #FCEAA4;
	background-image: url(/images/ground.png);
	background-repeat: no-repeat;
	}
#header 
	{ 
	background-repeat: no-repeat;
	background-position: top center;
	font-size: 200%;     /* so things LOOK important to user, not search engines */
	height: 108px;
	text-align: center;
	margin: 0 auto 0 auto;
	}
#content 
	{
	position: relative;
	}
#footer
	{
	color: black;
	font-size: 80%;
	text-align: center;	
	}
#footer a  
	{
	color: black;
	}
#footer p
	{
	margin-bottom: 4px;
	}	
/* Style the navigator */
#navigation  h2
	{
	margin-bottom: 2px;
	}
#navigation ul 
	{
	margin-top: 0px;
	margin-left: 0;      /* no margin or padding */
	padding-left: 0;
	list-style-type: none;   /* no bullets */
	}
#navigation ul a 
	{
	display: block;       /*  extend clickable area to full width, not just word */
	text-decoration: none;   /*  remove underlines */
	color:  white;	
	background:  #EDCD78;          /*  and contrasting background */	
	padding: .2em  3px;
	border-bottom:  2px solid #FCF2CC;   /* background color on #navigation again */
	width:  140px;            /*   nav.width - 2*5 from padding */ 
	}
#navigation ul.depth2 a
	{
	margin-left: 15px;
	}
#navigation ul.depth3 a
	{
	margin-left: 30px;
	}
#navigation li.current a
	{
	background-color: #644B0D;
	}
#navigation li.current ul a
	{
    background-color: #EDCD78; 
	}
#navigation ul a:hover, #navigation li.current  a:hover
	{
	background-color: #916F13; 
	}
#navigation li.parent a, #navigation  ul.depth2 li.parent a
	{          
	font-weight: bold; /* parents */
	}
#navigation li.parent ul a, #navigation  ul.depth2 li.parent ul a
	{
	font-weight: normal; /* undo as under parents */
	}
#navigation ul a:before
	{
	content: "-";
	}
#navigation li.current>a:before        /* score = 112  */
	{
	content: ">";
	}
	
/* And styling for the links in the footer  */
#footer ul
	{
	margin: 0 0 5px 0;
	padding: 0;
	}
#footer li
	{
	display: inline; 
	margin: 0;
	padding: 0 10px 0 10px;
	font-weight: bold;
	border-right: 3px solid #7896B3;
	}
#footer li.first
	{
	border-left: 3px solid #7896B3;
	}
#footer .depth2 
	{
	display: none;
	color: red;
	}
	
pre_ {
	font-family: Courier,"Courier New","Andale Mono", Monaco, monospace;
	font-size: 90%;
	margin-left: 30px;
	}
	
code_	 {
	font-size: 90%
	}

#content_ .pullquote    /* note the space between the t and the .  */
	{
	border: 4px solid #7896B3;
	background-color: #ACD7FF;
	float: right;
	width: 200px;
	font-size: 110%;
	font-weight: bolder;
	}
	
#content  .author	
	{
	font-style: italic;
	text-align: right;
	}
	
#content .testimonial
	{
	border: 4px outset #7896B3;
	background-color: #ACD7FF;
	margin: 0 auto 0 auto;
	width: 66%;
	font-size: 110%;
	font-weight: bolder;
	}
	
#content .fancyquote
	{
	margin: 1em auto 1em auto;
	border: 1px solid #7896B3;
	background: url(/images/quote.gif) 5px 5px no-repeat;
	background-color: #FFF0AB;
	padding-top: 30px;	
	width: 80%;
	}
#content .fancyquote p
	{
	padding: 0 70px;
	}
#content .fancyquote p.author
	{
	background: url(/images/close.gif) no-repeat 100% 100%;
	padding-bottom: 30px;
	margin: 0 5px 5px 0;
	text-align: right;
	font-style: italic;	
	}

#content .user 
	{
	font-weight: bold;
	color: #A52A2A;  /* brown */
	}
	
.right 
	{
	float: right;
	}
.left
	{
	/* don't use if <li> items will butt against the flated element - bug in IE and FF */
	float: left;
	}
	
#content .center
	{
	text-align: center;
	margin: 0 auto 0 auto;
	}
#content .wide {
   margin-left: 20px;
}
#content .wide p {
   margin: 0 auto 15px 20px;
   }
#content .wide h6 {
   float: right;
   margin-right: 20px;
   margin-top: -1.7em;
  }
/* table.menu used on some menus */  
table.menu { width: 90%;
   margin-left: 30px;
}   
table.menu .head {
   text-align: center;
   font-size: 1.3em;
   font-weight: bold;
}
table.menu td.name {
   font-size: 1.05em;
   font-weight: bold;
   }
table.menu td.description {
   text-align: center;
}
table.menu td.descr {
   padding-left: 30px;
   font-size: 0.97em;
   padding-bottom: 5px;   
}
table.menu td.price {
   text-align: right;
}
  
/*  picture : use with left or right on div, containing image and <p> containing caption. 
     And ensure that List items do not but against floated left images - bug in Firefix and IE! */
	
div.picture { 
	background-color: white;   /* if content background not suitable */   
	margin: 0 12px;
	padding: 15px 15px 10px 15px;
	border-style: solid;   
	border-color: #ccc #999 #999 #ccc;
	border-width: 1px 2px 2px 1px;
	}
div.picture img {
	border: 1px solid;   
	border-color: #000 #ccc #ccc #000;
	}
div.picture p {
	margin-bottom: 1px; 
	}
div.swapper {
	width: 320px;
   height: 480px;
   margin: 0px;
	padding: 0px;
	border-width: 0;
   background-repeat: no-repeat;
   background-position: 0% 0%;
}   

div.swapper img  {
  padding: 0;
  margin: 0;
  width: 320px;
  height: 480px;
  border: 0;
  }
div.rounded {
	width: 80%;
	margin: 0 auto 0 auto;	
	}
/* curve height, background image */
.rounded .t, .rounded .b, .rounded .b b, .rounded .t b {
	height:10px;
	background-image:url(/images/rounded.gif);
	}
/* inner color, border color, border width */
.rounded .c {
	background:#edcd78;
	border-color:#916f13;
	border-left-width:4px;
	border-right-width:4px;
	}
/* surrounding margins (optional)  */
.round {
	margin-bottom: 5px;
	}
.round .c	{
/* inner content padding */
	padding:0 10px 0 10px;
	border-top:0;
	border-bottom:0;
	border-style:solid;
	}
.round .t, .round .b, .round .t b, .round .b b {
	display:block;
	overflow:hidden;
	}
.round .t b, .round .b b {
	float:right;
	width:50%;
	}
/*  need to add background colour on right, or top.bottom borders show through */
.round .t .r {
	background-position:top right;
	background-color: #FCEAA4;   
	}
.round .b .r {
	background-position:bottom right;
	background-color: #FCEAA4;
	}
.round .b {
	background-position:bottom left;
	}
.round .br {
	display:block;
	overflow:hidden;
	height:0px;
	}
.small {
	font-size: 80%;
	}
#footer .modest {
	color: gray;
	font-size: 80%;
	}
#footer .modest a {
	color: gray;
	}
#footer .modest a:hover {
	color: black;
	}
.ingredients {
   margin-left: 4em;
}