/************************************************ 
Style sheet for Veg World web site.
Created by Mike Lewis, March 2010.
This version (Dec 2014) is for all page types, and 
uses responsive web design with media queries.
*************************************************/
body 
{
    /* All page content. This will occupy the width of the viewport, 
	but subject to an overall maximum of 970 px. */
    max-width: 970px;
	font-size: 80%; 
	line-height: 1.4em; 
	margin: 0 auto;
	background: white;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
.masthead
{
    /* Extends across the top of the page */
    padding-top: 1.5em;
}
.masthead-left
{
	/* Holds the logo and related text*/
     margin-left: 2%;
}
.masthead-right
{
	/* Banner, search box and main menu */
}
.main-content
{
    /* Main body of the page. Holds the actual article, recipe or whatever. */
    margin-left: 2%;
	margin-right: 2%
}
.navigation
{
    /* A vertical space to hold navigation links, adverts and similar paraphernalia. */
  	border-width: 0px;
	border-color: #0F0F0F;
	border-style: solid;
}
.endpiece
{
	/* Extra navigation links and other small print usually at
	the foot of the page */
    padding-top: 1em;
    font-size: 1em;
	line-height:1.5em;
    clear: both;
	text-align: center;
	width: 98%; 
}
.searchbox
{
	/* Holds the search form and related matter */
	margin: 0 0 1em 1em; 
	float:left;    
}
h1
{
    font-size: 1.4em;
    font-weight:bold;
    color: Green;
    padding: 0.2em 0 0 0;
    line-height:1.4em;
	margin: 0;
}
h2
{
	font-weight:bold;
    color: Green; 
    padding: 0;
	font-size: 1.1em;
	line-height: 1.5em;
	font-weight:bold; 
}
h3
{
    font-size: 1em;
    font-weight:bold;
    padding: 0.8em 0 0 0;
}
li
{
    margin-bottom: 0.5em;
}
a { text-decoration:none; color:Blue;}
a:focus {background-color:Silver;}
a:hover {background-color:Silver; }
a:active {background-color:Silver;}
img
{
	border-width: 0;
	background-color: White;
	max-width: 100%;
    height: auto;
}
.main-banner
{
	/* For banner or other advertising in main part of page 
	  (not masthead or nav bar) */
	 margin-top:2em;
	 margin-bottom:2em;
	 }
.masthead h3
{
	/* Holds the tag line within the masthead */
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.3em;
	padding-top: 0;
	color: Green;
}
.masthead-banner
{
	/* Position of the banner advert within the masthead;
       Review this after re-instating banner advert */
	padding: 0 0 1em 0;
}
.social
{
	/* For social media sites (such as Facebook Like button) */
	margin-bottom: 1em;
	width:100%;
}
.social img
{
	margin: 0 2px 0 2px;
	padding: 0 2px 0 2px;
}
.main-menu 
{
	/* Main navigation links within the masthead */
	margin: 0.5em 0 -0.2em 1.5em;
	clear:both;
}
.main-menu td 
{
	/* Table cell holding main menu items */
	background-color: Green; 
	font-size: 1.2em;
	font-weight:bold;
	text-transform: uppercase;
	color: white;
	padding:0.5em 0.2em 0.5em 0.2em;
}
.masthead-bottom
{
	/* Region just below the masthead, to provide separation from 
	the content */
	padding: 0 0 2em 0;
	clear:both;
	border-top-color: Green;
	border-top-style: solid;
	border-top-width: 2px; 
}	
/* Links within the main menu */
.main-menu a { text-decoration:none; color:White; }
.main-menu a:focus {background-color: Green;  }		
.main-menu a:hover {background-color: Silver; }	
.main-menu a:active {background-color: Green;  }
.navigation p
{
	/* Normal text for the navigation bar. This is mainly used for links
	to similar articles and other related content */
	line-height: 1.4em; 
	padding: 0.3em;
	margin: 0.3em;
	font-size:1em;
}
.navigation h3
{
	/* Used for sub-headings within the navigation bar */
	color: black;
	font-weight: bold;
	margin: 0;
	padding: 0.2em 0.5em 0 0.5em; 
}
.navigation hr
{
	/* A horizontal rule to separate the sections of the navigation bar */
	width: 98%;
	height: 1px;
	display: none;
}	
.light_rule
{
	/* A lighter colour for use with less-important horizontal rules */
	color:#AFAFAF;
	height: 1px;
	width: 98%;
}
.side-banner
{
	/* Banner or other advertising matter in nav bar */
}
.products img
{
	/* Images (mainly product shots) in the navigation panel */
	padding: 2em 0 0.2em 0;	
}	
.small-print
{
	/* Copyright notice and similar, usually in the navigation bar */
}	
.small-print p {font-size: 0.85em; padding-bottom: 0;}
.main-content-sig
{   
    /* By-line for main article; can also be used for article datestamp  */
    font-style:italic;
	font-size: 1em;
}
.Figure-R 
{
	/* To hold photos for recipe; these will occupy the full width of the 
       vuewport on small screens, and will otherwise float to the right. */
	float:right; 
	margin-left: 1em; 
	text-align:center;
	width:100%;
}
.Figure-L
{
	/* To hold photos for recipe; these will occupy the full width of the 
       vuewport on small screens, and will otherwise float to the left. */
	float:left; 
	margin-right: 1em; 
	margin-top: 0.5em;
	text-align:center;
	width:100%;
}
.Figure-R  a, .Figure-L  a  { text-decoration:underline; color:gray; }
.Figure-R  p, .Figure-L  p
{
	font-size:1em; 
	margin: 0.5em 0 1em 0;
}
.Figure-R  .credit, .Figure-L  .credit
{
	color: gray;
	font-weight: normal;
	margin-top: 0;
	font-size:0.85em;
}
.unit-note
{
	/* For note on unit conversions at the foot of recipes */
	font-size: 0.85em; 
	line-height: 1.1em;
	padding: 0 0 1em 0;
}
.toc1
{
	/* First column in ToC pages */
	margin-right: 2%;
}
.toc2
{
	/* Second column in ToC pages */
	margin-right: 2%;
}
.toc1 img, .toc2 img
{
	float:right; 
	margin-left: 1em; 
	text-align:center;
	width: 100%;
}
.adslot_1
{
	/* For any ad block that we want to selectively show or hide
	   at selected screen sizes */
	display: none; 
}
.small-print
{
	display: none;
}
/* Media queries start here */
@media (min-width: 700px)
{
  .masthead-left
	{
	    float: left;
	    width: 21.5%;
	    margin-right: 2%;  
	}
  .masthead-right
	{
	    float: left;
	    width: 74.5%;
    }
  .main-content
	{
	    float: left;
	    width: 71.5%;   
	    margin-right: 3%;      
    }
  .navigation
	{
	    float: left;
	    width: 22.5%;  
		border-width: 1px;
		border-color: #0F0F0F;
		border-style: solid;		
    }
	.navigation hr
	{
		/* A horizontal rule to separate the sections of the navigation bar */
		width: 98%;
		height: 1px;
		display: block;
	}
	.toc1, .toc2
	{
		float: left;
		width: 48%;
	}
	.toc1 img, .toc2 img
	{
		width: 60%;
	}
    .Figure-R 
	{
        width:38%;
    }
		    .Figure-L  
	{
        width:38%;
    }
	.adslot_1
	{
		display: block;
	}
	.small-print
	{
		display: block;
	}
}
@media (min-width: 500px) and (max-width: 699px)
{
    .masthead-left
	{
	    float: left;
	    width: 98%;
	    margin-right: 0%;     
    }
    .masthead-right
	{
	    float: left;
	    width: 98%;      
    }  
     .main-content
	{
	    float: left;
	    width: 97%;
	    margin-right: 2%;     
    }
    .navigation
	{
	    float: left;
	    width: 98%;      
    }
	.toc1, .toc2
	{
		float: left;
		width: 98%;
	}
	.toc1 img, .toc2 img
	{
		float: left;
		width: 100%;
	}
	.toc1 img, .toc2 img
	{
		width: 40%;
	}
    .Figure-R  
	{
        width:38%;
    } 
	    .Figure-L  
	{
        width:38%;
    } 
	.adslot_1
	{
		display: none;
	}
	.small-print
	{
		display: none;
	}
}