/************************************************ 
Style sheet for Cycling Edinburgh site.
Created by Mike Lewis, August 2008.
Updated Feb 2009.
This version Dec 2014 - for responsive design.
*************************************************/
body 
{
    /* All page content. This will occupy the width of the viewport, 
	but subject to an overall maximum of 1070 px. */
    max-width: 1070px;
	font-size: 83%; 
	line-height: 1.3em; 
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	background-color: #FFFFCC;
}		
	h1 {font-size: 180%; color: #800000; line-height: 1.4em }
	h2 {font-size: 140%; color: #800000; padding-top: 0.5em;  }
	h3 {font-size: 100%; color: #800000 }
	h4 {font-size: 100%; color: #000000 ; font-weight: bold}
	li {padding-bottom: 0.5em }
	hr {color:#800000 }
	
		
	a { text-decoration:none; }
	a:focus {background-color:Silver;}
	a:hover {background-color:Silver; }
	a:active {background-color:Silver;}

    h2 a:hover { background-color: transparent;  }
		/* This applies to the three main section headings on the home page */
	
	img
{
	border-width: 0;
	max-width: 100%;
    height: auto;
  
}
.Masthead	
{
	width: 98%
}
.MainContent 
{
	margin-right: 1%;
	margin-left: 1%;		
}
.SideBar 
{
	margin-left: 1%;
	margin-right: 1%
}

.Figure-R 
{
	/* To hold photos for articles; these will occupy the full width of the 
       viewport on small screens, and will otherwise float to the right. */
	float:right; 
	margin-left: 1em;
	margin-top: 0.5em;	
	text-align:center;
	width:100%;
}
.Figure-L
{
	/* To hold photos for articles; 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:0.8em; 
	font-weight: bold;
	margin: 0.5em 0 1em 0;
	line-height: 1.4em;
}
.Figure-R  .credit, .Figure-L  .credit
{
	color: gray;
	font-weight: normal;
	margin-top: 0;
	font-size:0.85em;
}

.Weekly {	width:100%; }
.Col1 {width: 98%; float: left;}  
.Col2 {width: 98%; float: left;} 
.EventHead {font-size: 100%; color: #800000; font-weight: bold }
.SmallPrint {font-size: 80%; line-height: 1.2em;}
.Quote {font-family: Times New Roman, serif; color: #008000; font-size:125%; line-height: 1.4em; }
.PictureCaption {font-weight:bold }
.PictureCredit {color:dimgray; font-size: 0.8em}
/* Classes for use with weather forecast */
.Weather {display: none;}
.Weather .MaxTemp {font-size:150%; font-weight:bold; color:dimgray;text-align:left;}
.Weather .Weekday {font-weight:bold; font-size:80%; margin-top:0.5em; color:Maroon;}
.Weather .WindSpeed {font-weight:bold;font-size:0.8em;margin-top:0em;text-align:center;}
.Weather .Lighting {font-weight:bold; font-size:80%; margin-top:0.5em; margin-bottom: 0 em; color:Maroon;}
.WhenUpdated {font-weight:bold; font-size:100%; margin-top:1em;}	/* Date of last update */
.FootAd {margin-top:1em; margin-bottom:1em;}
.social
{
	margin-bottom: 2em;
	margin-top: 1em;
	width:100%;
	
}
.social img
{
	margin: 0 2px 0 2px;
	padding: 0 2px 0 2px;
}
.book-image 
{
	float:left; 
	margin-right: 1em; 
	margin-top: 0.5em;
	text-align:center;
	width:100%;
}
.narrow-only
{
	/* for content that is only visible on small screens */
	display: block;
}

	/* Media queries start here */
@media (min-width: 700px)
{
  .MainContent
	{
	    float: left;
	    width: 71.5%;   
	    margin-right: 2%; 
    }
	.Col1 {width: 74%; float: left;}  
	.Col2 {width: 24%; float: left;} 
	.SideBar
	{
	    float: left;
	    width: 23%;  	
    }
	.book-image 
	{
	width:45%;
	}
	.Weather {display: block;}

    .Figure-R 
	{
        width:38%;
    }
	.Figure-L  
	{
        width:38%;
    }
	
	.narrow-only
	{
	display: none;
	}
}

@media (min-width: 500px) and (max-width: 699px)
{
     .MainContent
	{
	    float: left;
	    width: 97%;
	    margin-right: 2%;     
    }
	.Col1 {width: 72%; float: left;}  
	.Col2 {width: 24%; float: left;} 
    .SideBar
	{
	    float: left;
	    width: 98%;      
    }
	.book-image 
	{
	width:25%;
	}
	.Weather {display: block;}
	 .Figure-R  
	{
        width:38%;
    } 
	 .Figure-L  
	{
        width:38%;
    } 
	.narrow-only
	{
	display: block;
	}
}