/* BGRA CSS Sheet */

/* (C) John Rymer & Butterley Garden Railway Association 2017 */
/* Inspired by W3Schools CSS Tutorial */

/* Sets up basic layout in boxes */
* {
    box-sizing: border-box;
}

/* declares global variables (for colours) */
/* Not used because variables not supported in some browsers */
/* Notably Internet Explorer (all versions)*/
:root{
	--main_bg:#3f6844;
	--main_light_bg:#87db91;
	--main_very_light_bg:#9fffaa;
	--main_light_fg:#ffffff;
	--main_dark_fg:#000000;
	--main_logo_color:#fc4713;
}

/* Sets hyperlink colours */
/* unvisited link */
a:link {
	color: #00bfff;
	font-weight:bold;
	text-decoration:none;
}
/* visited link */
a:visited {
	color: #f2a127;
}
/* mouse over link */
a:hover {
	color: #000036;
	text-decoration:underline;
}
/* selected link */
a:active {
	color: Red;
}

/* Sets up (re-defines) HTML elements where needed */
html {
	font-family: "Lucida Sans", sans-serif;
}

H1{
	margin-top:4px;
}

hr{
	border-color: #3f6844;
	border-width:1px;
	border-style:solid;
}
img{
	max-width:100%;
	height:auto;
}
iframe {
	max-width:100%;
}

/* Formats the current page in Menu */
locator{
	color:#fc4713;
	font-weight:bold;
}
/* Defines the left hand menu list */
.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.menu li {
	padding: 8px;
	margin-bottom: 7px;
	background-color: #3f6844;
	color: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Redefines hyperlink colours for left menu */
/* unvisited link */
.menu a:link {
	color: #ffffff;
	text-decoration:none;
	font-weight:normal;
}
/* visited link */
.menu a:visited {
	color: #ffffff;
}
/* mouse over link */
.menu a:hover {
	color:#000000;
	font-weight:bold;
}
/* selected link */
.menu a:active {
	color: Red;
}
.menu li:hover {
	background-color: #87db91;
	color:#000000;
}

/* Sets up right hand notices element */
.notices {
	background-color: #3f6844;
	padding: 15px;
	color: #ffffff;
	text-align: left;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Sets up notices style element for newsletters type A Yellow*/
.newsletter_a {
	background-color: #F2A127;
	padding: 15px;
	color: #ffffff;
	text-align: left;
	font-weight:bold;
	font-size: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Sets up notices style element for newsletters type B Blue*/
.newsletter_b {
	background-color: #00BFFF;
	padding: 15px;
	color: #ffffff;
	text-align: left;
	font-weight:bold;
	font-size: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Sets up notices style element for newsletters type C Green*/
.newsletter_c {
	background-color: #3F6844;
	padding: 15px;
	color: #ffffff;
	text-align: left;
	font-weight:bold;
	font-size: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Sets up page footer */
.footer {
	background-color: #3f6844;
	color: #ffffff;
	text-align: center;
	font-size: 12px;
	padding: 8px;
}

/* Sets up page header for index page */ 
/* (banner is background image, Logo applied in HTML */
.header {
	color:#fc4713;
	text-align:left;
	background-color:#3f6844;
	padding:none;
	width: auto;
	height: auto;
    	background-image: url('images/2017BANNER001A.PNG');
 	background-repeat: no-repeat;
	background-position:214px 0px;
	border: 8px solid #3f6844;
	margin-left:12px;
	margin-right:0px;
}

/* Sets up alternative header for non-index pages */
.header02 {
	color:#fc4713;
	text-align:left;
	background-color:#3f6844;
	padding:none;
	width: auto;
	height: auto;
    	background-image: url('images/2017BANNER002.PNG');
 	background-repeat: no-repeat;
	background-position:214px 0px;
	border: 8px solid #3f6844;
	margin-left:12px;
	margin-right:0px;
}

/* Defines the picture area for all pages */
.pics{
	text-align: center;
}
/**/
.pics p{
	margin-left:20%;
	margin-right:20%;
	font-size:1em;
}

/* Defines the pictures within the picture area */
.pics img{
	max-width:100%;
	height:auto;
	display: block;
    	margin: 15px auto;
	border:1px solid black;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* Defines gallery index display*/
.gallery{

}
.gallery img{
	height:80px;
	margin-right:5px;
	margin-bottom:0;
	border:0;
}
.gallery p{
	margin-right:8px;

}
.gallery td{
	text-align:left;
	min-width:150px;
	margin-bottom:0;
}

.gallery ul{
	list-style-type: none;
	margin: 0;
	padding: 4px;
}
.gallery li {
	padding: 4px;
	margin-bottom: 7px;
	background-color: #87db91;
	color: #000000;
}


/* Redefines hyperlink colours for left menu */
/* unvisited link */
.gallery a:link {
	color: #000000;
	text-decoration:none;
	font-weight:normal;
}
/* visited link */
.gallery a:visited {
	color: #ffffff;
	background-color:#3f6844;
}
/* mouse over link */
.gallery a:hover {
	color:#ffffff;
	font-weight:bold;
}
/* selected link */
.gallery a:active {
	color: Red;
}
.gallery li:hover {
	background-color: #3f6844;
	color:#ffffff;
}

/* To reset the hyperlink colours but keep in the div */
.override {
}
	/* link */
	.override a:link {
		color: #00bfff;
		font-weight:bold;
		text-decoration:none;
	}
	/* visited link */
	.override a:visited {
		color: #f2a127;
	}
	/* mouse over link */
	.override a:hover {
		color: #000036;
		text-decoration:underline;
	}
	/* selected link */
	.override a:active {
		color: Red;
	}


/* Sets up row and column classes used in HTML divs */
.row:after {
	content: "";
	clear: both;
	display: block;
}

/* Outlines the basic column setup */
[class*="col-"] {
	float: left;
	padding-top: 10px;
	padding-left: 13px;
}

/* Lays out the column widths */
/* For desktop (wider than 600px) */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Sets up alternative values for smaller screens */
/* This should allow ipads and older 640px screens to show normally */
/* but with a more compact menu and the logo over the banner. */

@media only screen and (max-width: 768px) {
    	/* For Smaller Screens */
    	
	.header {
		background-position:0px 0px;
	}
	.header02 {
		background-position:0px 0px;
	}

	.menu li {
		padding: 6px;
		margin-bottom: 3px;
	}
	[class*="col-"] {	
	padding-top: 3px;
	padding-left:13px;
	}
	.gallery{
		width:75%;
	}
}

@media only screen and (max-width: 500px) {
    	/* For Smart Phones */
    	[class*="col-"] {
        width: 100%;
	}
	.pics p{
		margin-left:0%;
		margin-right:0%;
	}
}