/* 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 */
	
/*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: #8A0000; font-weight: bold;} /*Not used in header* #6699FE*/
h2 {font-weight: bold; color: #8A0000; font-size: 1.2em; text-shadow: 0.5px 0.5px 0.5px Gray; line-height: 2em;}
h3 {padding-bottom: 1%; padding-top: 1%; font-weight: bold;}

/*------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: #333477; padding-left: 1%; padding-top: 0.5%; clear: both; color: White; font-size: 0.8em;}
#header {min-height: 249px; text-align: right;}
#home #header {background: url(images/Header01.jpg) no-repeat right bottom; min-height: 249px;}
#about #header {background: url(images/Header02.jpg) no-repeat center bottom; min-height: 249px;}
#company #header {background: url(images/Header04.jpg) no-repeat center bottom; min-height: 249px;}
#contact #header {background: url(images/Header03.jpg) no-repeat center bottom; min-height: 249px;}
#header h1 {font-size: 2em; color: #333477; font-weight: bolder; margin-top: -3%;}

/*-----------HEADER RESPONSIVE------------*/
@media screen and (max-width: 640px) {
#header {min-height: 180px; max-height: 180px;}
#header h1 {font-size: 1.2em;  margin-top: -5%;}
} 

#skipNav {visibility: hidden;}
#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  {padding-left: 5%; line-height: 1.5em; font-size: 95%;}
.indented {margin-left: 5%; margin-right: 5%;}
.indented p {margin-bottom: 1%;}

/*---------picbox responsive --------------------*/
@media screen and (max-width: 800px) {
.picbox {float: none;}
}


/*----------- 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: #8A0000; height: 2.2em; background-image: url(images/menubackgrndbar.gif); 
		background-repeat: repeat-x; /*padding-left: 1em;*/}
/* #nav ul {padding-left: 3%;} */
#nav li {padding-bottom: 1%; font-size: 1.3em; line-height: 1.5em;}
#tabnav {list-style: none;	font-size: 0.8em;	text-align: center;}
#tabnav li {display: inline-block; padding-top: 0.5%; font-weight: bold;}
#tabnav li a {text-decoration: none; color: #FFFFFF; height: 2em;	line-height: 2em;	letter-spacing: 1px; padding:0 1em;} 
#tabnav li a:hover {font-style: italic; color: #FAEBD7;}
/*Hyperlink colours when on page */
#home li.home a,
#about li.about a,
#company li.company a,
#contact li.contact a
{color: #FAEBD7; text-transform: uppercase;} 

#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%;}
}