/* reset elements */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 font-size: 100%;
 font-weight: normal;
}
* {margin: 0; padding: 0;}
table {border-collapse: collapse; border-spacing: 0;}
td, th, caption {font-weight: normal; text-align: left;} 
img, fieldset {border: 0;}
html {height: 100%;} /*  padding-bottom: 1px;force scrollbars */
/* End reset */
/*Lib Dem Colour   color: #F99D16; */
	
/*Basics */
body {font-family: Verdana, Helvetica, sans-serif; color: #003500; line-height: 110%;}
abbr {cursor: help;}
p {line-height: 1.5em; font-size: 1em;}
h1 {font-size: 1.6em; line-height: 2em; color: #F99D16; text-shadow: 0.5px 0.5px 0.5px Gray;} /*Not used in header*/
h2 {font-weight: bold; color: #F99D16; font-size: 1.2em; text-shadow: 0.5px 0.5px 0.5px Gray; line-height: 2em;}
h3 {padding-bottom: 1%; color: #F99D16; padding-top: 1%; font-weight: bold;}
img {max-width: 100%; height:auto;}
ul {padding-left: 3%;}
li {padding-bottom: 1%; font-size: 1.3em; line-height: 1.5em;}
sup {font-size: 70%;}

/*------CONTAINER ----------*/
#container {padding: 0% 2% 3% 2%; width: 74%; margin: auto; margin-top: 0.5%; max-width: 940px; padding-bottom: 2%;}
/*----------- CONTAINER RESPONSIVE------------*/
@media screen and (max-width: 1000px) {
#container {width: 95%;}
} 
/*------CONTENT ------*/
/*-----------CONTENT RESPONSIVE------------*/
@media screen and (max-width: 640px) {
#Content h1 {font-size: 1.4em; font-weight: bold;}
} 
/*------  IDs --------*/
#footer {min-height: 28px; background-color: #F9CB85; padding-left: 1%; font-size: 0.8em; clear: both;}
#header {background: url(images/4thTrainBridgev3.jpg) no-repeat left bottom; min-height: 249px;}
#header h1 {font-size: 2em; color: #F99D16; line-height: 3em; font-weight: bolder; text-shadow: 2px 2px 2px Gray;}
#header p {margin-left: 5%; font-weight: bold;}
/*-----------HEADER RESPONSIVE------------*/
@media screen and (max-width: 640px) {
#header {min-height: 180px; max-height: 180px;}
#header h1 {font-size: 1.6em; line-height: 1.8em;}
} 

#skipNav a:link {color: #FFFFFF;}
#skipNav a:hover {color: #00A4A6; text-decoration: underline; font-weight: normal;}
#skipNav a:focus {color: #00A4A6; text-decoration: underline; font-weight: normal;}
#skipNav: a:active {color: #00A4A6; text-decoration: underline; font-weight: normal;}
/*Becomes visible & underlined when user tabs to it. :active pseudo-class necessary for IE :focus pseudo-class necessary for Mozilla   */

/*-----------------------------------------CLASSES-------------------------------------------------*/
.alist  {font-size: 80%; padding-left: 5%;}
.clearit{clear: both;}
.column {padding: 1%; margin-bottom: 2%; float: left; width: 46%;}
.boxheader {font-weight: bold; padding-bottom: 0.5%; padding-top: 1%; color: #F99D16; font-size: 1.2em; text-shadow: 1px 1px Gray;}
.eventdate {font-weight: normal; font-style: italic; margin-bottom: 0%;}
.indented {margin-left: 5%; margin-right: 5%;}
.indented p {margin-bottom: 1%;}
.menu {width: 50%; margin: auto; text-align: center;}
.mybulletList {font-size: 75%; padding-left: 10%; list-style-type: disc;}
.venue {font-style: italic;}
.picbox {float: right; margin: 5px 5px 5px 5px; text-align: center; max-width: 100%;} /* to allow for sizing of images */
.picbox p {font-weight: bold;  font-size: 1em;}
/*---------picbox responsive --------------------*/
@media screen and (max-width: 800px) {
.picbox {float: none;}
}
.picboxleft {float: left; margin: 5px 5px 5px 5px; text-align: center;max-width: 100%; text-align: center;} /* to allow for sizing of images */
.picboxleft p {font-weight: bold; font-size: 1em;}
.centreit {text-align: center;}
.nofloat {float: none;}
.warning {font-size: 80%; color: Red; font-weight: bold;}
.quote {margin-left: 10%; margin-right: 10%; font-style: italic;}
.strong {font-size: 100%; font-weight: bold;}
.box {padding: 1%; margin-bottom: 2%; float: left; width: 46%; /*min-height: 250px;*/ margin-right: 2%;}

#home h3 {
	padding-bottom: 1%;
	color: #005301;
	font-weight: bold;
	font-size: 120%;
	font-style: italic;
}

.box h2 {line-height: 1.5em; font-size: 120%; color: Black; /*#005301*/	font-weight: normal;	text-shadow: none;}
.year {font-size: 1.4em; line-height: 2em; color: #F99D16; text-shadow: 0.5px 0.5px 0.5px Gray;}
/*----------- COLUMN + Box RESPONSIVE------------*/
@media screen and (max-width: 940px) {
.column {width: 90%;}
.box {width: 95%;}
}

/*----------- INDENTED RESPONSIVE------------*/
@media screen and (max-width: 320px) {
.indented {margin: 0;}
}

/*------------------------------------------- LINKS ---------------------------------------------------------*/
a:link {text-decoration: none; color: #005301; font-weight: bold}
a:visited {text-decoration: none; color: #005301; font-weight: bold}
a:hover {text-decoration: underline; color: #005301;	font-weight: bold;}
a[href$='.pdf'] {background: url(images/acrobat.png) no-repeat right top; padding-right: 3%;}

/*----------------------------------------------------MAIN NAVIGATION FORMATTING -----------------------------*/
#nav {margin:0 auto; background-color: #005301; height: 2.2em; background-image: url(images/greenbackgrndbar.gif); 
		background-repeat: repeat-x; padding-left: 1em;}
#tabnav {list-style: none;	font-size: 0.8em;	text-align: center;}
#tabnav li {display: inline-block; padding-top: 0.5%; font-weight: bold;}
.spaceit {margin-right: 1em;}
#tabnav li a {text-decoration: none; color: #FFFFFF; height: 2em;	line-height: 2em;	letter-spacing: 1px; padding:0 1em;} 
#tabnav li:hover {background-image: url(images/down_arrowWhite.gif); background-repeat: no-repeat;	background-position: 50% top;}
#tabnav li a:hover {color: #FFEF95;}
#mobile-menu {display: none; float: right;}
#mobile-menu p {font-size: 0.8em;}
	
/*-----------RESPONSIVE------------*/
@media screen and (max-width: 940px) {
#tabnav li a {padding-left: 0px;} 
.menu {width: 100%;}
}
@media screen and (max-width: 640px) {
#mobile-menu {display: block; visibility: visible; max-width: 50%;}
#tabnav {display: none;  text-align: left;}
#nav {padding-left: 1em; background-image: none; background-color: transparent; height: 45px;}
#nav:hover {height: 200px;}
#tabnav li {padding-top: 0.5%; font-weight: bold; display: list-item;}
#tabnav li a {text-decoration: none; color: #005300; padding-left: 0px; font-size: 1.2em;} 
#tabnav li:hover {background-image: none; text-decoration: underline;}
#tabnav li a:hover {color: #005300;}
#nav:hover #tabnav {display: block; visibility: visible;}
.narrowcolumn {width: 100%;}
}