/************************************************ 
Style sheet for Veg World web site.
Created by Mike Lewis, March 2010.

This version makes the page printer-friendly.
It hides the advertising, navigation, etc,
and renders the main content in a variable-width
block.

July 2010.

*************************************************/

body 
{
    /* All page content. This will occupy a fixed width in the 
	centre of the window. Anything outside this width will assume
	the background colour defined for the page as a whole.
	*/
    width:90%;
	font-size: 10pt; 
	line-height: 1.2em; 
	margin: 0 auto;
	background: white;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
}

body h1
{
    font-size: 14pt;
    font-weight:bold;
    color: Darkgreen;
    padding: 0.2em 0 0 0;
    line-height:1.4em;
	margin: 0;
}

body h2
{
	/* Typically used for introductory text at start of article 
	or a deckhead */
	font-weight:bold;
    color: Darkgreen; 
    padding: 0;
	font-size: 11pt;
	line-height: 1.5em;
	font-weight:bold; 
}
  

body h3
{
    font-size: 10pt;
    font-weight:bold;
    padding: 0.8em 0 0 0;
}

body li
{
    margin-bottom: 0.5em;
}
/*a { text-decoration:none; color:Blue;}*/
a {color:Black;}
a:active {background-color:Silver;}
a:hover {background-color:Silver; }
a:focus {background-color:Silver;}

body img
{
	border-width: 0;
	background-color: White;
}

.main-banner
{
	/* For banner or other advertising in main part of page (
	  (not masthead or nav bar) */
	  display:none;
	}

.masthead
{
    /* Region at top of screen holding logos, banners, navigation, etc */
  /*  position:relative;*/
	margin-top: 5px;


}

.masthead h3
{
	/* Holds the tag line within the masthead */
	font-weight: bold;
	font-size: 12pt;
	line-height: 1.3em;
	padding-top: 0;
	color: Darkgreen;

}

.masthead-left
{
	/* Holds the main logo */
	float:left;
	width: 280px;
	padding: 6px 0 0 8px;
	margin: 6px 0 0 8px;

	
}

.masthead-right
{
	/* Banner, search box and main menu */
	float:left;
	width:640px;
	display:none;
}

.masthead-banner
{
	/* Position of the banner advert within the masthead */
	display:none;
}


.searchbox
{
	/* Holds the search form and related matter */
	display:none;
}

.social
{

	display:none;

}
.main-menu 
{
	/* Main navigation links within the masthead */
	margin-left:-5px;
	margin-bottom:-5px;
}
.main-menu td 
{
	/* Table cell holding main menu items */
	background-color: Darkgreen; 
	font-size: 12pt;
	text-transform: uppercase;
	color: white;
	padding:6px 10px 6px 10px;
}

.masthead-bottom
{
	/* Region just below the masthead, to provide separation from 
	the content */
	padding: 0 0 20px 0;
	clear:both;
	border-top-color: Darkgreen;
	border-top-style: solid;
	border-top-width: 2px; 
}	
	
/* Links within the main menu */
.main-menu a { text-decoration:none; color:White; }
.main-menu a:active {background-color: Green;  }	
.main-menu a:hover {background-color: Green; }	
.main-menu a:focus {background-color: Green;  }	

.navigation
{
    /* A vertical space to hold navigation links, adverts and similar paraphernalia.
       This is a fixed width, and will float to one side of the main content. */
       display:none;
    width: 165px;
    float: left;
    margin: 10px 0 0 15px;
	padding: 0 0 0 0;
  	border-width: 1px;
	border-color: #0F0F0F;
	border-style: solid;
	
}

.navigation p
{
	/* Normal text for the navigation bar. This is mainly used for links
	to similar articles and other related content */
	line-height: 1.2em; 
	padding: 3px;
	margin: 3px;
	font-size:9pt;
	
}

.navigation h3
{
	/* Used for sub-headings within the navigation bar */

	color: black;
	font-weight: bold;
	margin: 0;
	padding: 0 5px 0 5px; 
}

.navigation hr
{
	/* A horizontal rule to separate the sections of the navigation bar */
	width: 100%;
	height: 1px;
	
}	

.light_rule
{
	/* A lighter colour for use with less-important horizontal rules */
	color:#AFAFAF;
	height: 1px;
}
	
.side-banner
{
	/* Banner or other advertising matter in nav bar */
	padding: 1em 0 1em 0;

}
	
.small-print
{
	/* Copyright notice and similar, usually in the navigation bar */

}	

.small-print p {font-size: 8pt; padding-bottom: 0;}

.main-content
{
    /* Main body of the page. Holds the actual article, recipe or whatever. */
	padding-left: 30px;
	padding-right: 30px;
}

.main-content p
{
	margin-right: 20px;
}

.main-content-sig
{   
    /* By-line for main article; can also be used for article datestamp  */
    font-style:italic;
	font-size: 9pt;
}
 
   
.endpiece
{
	/* Extra navigation links and other small print usually at
	the foot of the page */
   
  display:none;

}

.Figure-L 
{
	/* Left-floating image. For use with DIVs that contain an <img> and a
	<p> for the caption. The DIV should have the width of the image.
	If a photo credit is required, place this in the same <p> as the caption-side
	(possibly with a line break between) and style it with the credit class.
	
	The image will float to the left of the adjacent text 
	
	Example:
		
	<div class="Figure-L" style="width:300px">
		<img src="mypic.jpg" width="300" height="234" /> 
		<p>This is a caption.<br />
		<span class="credit">Photo by ML</span></p>
	</div>
	
	*/
	
	float:left; 
	margin-right: 1em;
	text-align:center;
}

.Figure-L p  
{
	font-weight:bold; 
	font-size:9pt; 
	margin: 1em 0 1em 0;
}

.Figure-L .credit
{
	color:gray;
	font-weight: normal;
	margin-top: 0;
}

.Figure-R 
{
	/* Like Figure-L except that the image will float to the right
	of the text */
	float:right; 
	margin-left: 1em; 
	text-align:center;
}

.Figure-R p  
{
	font-weight:bold; 
	font-size:9pt; 
	margin: 0.5em 0 1em 0;
}

.Figure-R .credit
{
	color: gray;
	font-weight: normal;
	margin-top: 0;
}

.unit-note
{
	/* For note on unit conversions at the foot of recipes */
	font-size: 8pt; 
	line-height: 1.1em;
	padding: 1em 0 1em 0;
	
}

.print-only
{
	/* Stuff at bottom of the page that will only appear in printed version */
	padding-top: 1px;
    clear: both;

}	

.print-only p
{
    font-size: 8pt;
	text-align: center;
	

}