/* ERIC MEYERS CSS RESET - Thanks Mr.Meyers ;) - http://meyerweb.com/ */
/* v1.0 | 20080212 */
/* THIS RESETS ALL TAGS SO THAT WE CAN HAVE A 'FIXED' STARTING POINT FOR ALL BROWSERS - DO NOT EDIT*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;}
/* MEYER RESET END */

/****************************************************************************************************************/
/************************************************TUTORIAL********************************************************/

/* NOTES FOR MARK:												*/

/* Right okay Mark - heres a little bit of a tutorial regarding how cascading style sheets (CSS) work		*/

/* When included in a page this controls the look of the page - all styling should be done on this CSS file	*/

/* INCLUDES:													*/
/* To include the style page in a document use the following tag in the head section of the page:		*/
/*  <link rel="stylesheet" href="main.css" type="text/css"/> 							*/

/* SELECTORS: 													*/
/* If you look at the source code of the page you will notice in certain 'tags' (tags are what all the elements are called i.e <a></a>(anchor tag),<img/>(image tag)) that I have added i.e. id="uniqueName" or class="groupingName"*/
/* In the previous example uniqueName and groupingName can be anything BUT... id names HAVE TO BE UNIQUE (used only once in whole document) whereas class names can be used many times by ANY tag - see below example*/

/*CODE SNIPPET (this is HTML page going to be used in examples further on aswell)				*/
/*<div id="topDiv">												*/
/*<ul>														*/
/*<li><a class="class1" href="whatever1.html">Link1 Text</a></li>						*/
/*<li><a href="whatever2.html">Link2 Text</a></li>								*/
/*</ul>														*/
/*</div>													*/
/*														*/
/*<div id="otherDiv">												*/
/*<table>													*/
/*<tr>														*/
/*<td>row 1, cell 1</td>											*/
/*<td class="class1">row 1, cell 2</td>										*/																								
/*</tr>														*/
/*<tr>														*/
/*<td class="anotherClass">row 2, cell 1</td>									*/
/*<td id="specificCell" class="class1">row 2, cell 2</td>							*/
/*</tr>														*/
/*</table>													*/
/*</div>													*/

/*These 'id' and 'class' attributes allow easy targeting of selectors in order to style a specific tag element or set of elements */

/*NOTATION*/

/*[prefix]selector{stylingAttribute:value;}*/
/*where [prefix] is either nothing (all standard HTML tags require no prefix), a '#' to target a tag with that named 'id', or a '.' to target a tag with that named 'class'.*/
/*Where selector is the target tag, stylingAttribute is an attribute that the tag can have (i.e. font-weight) and value is a suitable value. PLEASE NOTE: the colon and semicolon at the end and EVERYTHING IS CASE-SENSITIVE. */

/*EXAMPLES (look at the CODE SNIPPET to see what I'm selecting:							*/
/*Standard HTML tags require no prefix:										*/
/*	body{													*/
/*		background-color:#898989;									*/
/*		text-align:center;										*/
/*	}													*/
/*Target a tag by 'id' name:											*/
/*	#topDiv{												*/
/*		float:left;											*/
/*		font-family:Arial, Helvetica;									*/
/*Target a tag by class:											*/
/*	.class1{												*/
/*		font-weight:bold;										*/
/*		color:red;											*/
/*		}												*/

/*NESTED TARGETING EXAMPLES:											*/

/*#otherDiv table.class1{...}											*/
/*targets any tag with class=class1 in a table residing in any tag (a div in this case) with id=otherDiv	*/

/*.otherClass{...}												*/
/*targets all elements in whole page with class=otherClass							*/

/*div.class1{...}												*/
/*targets all tags with class=class1 in any div on the page							*/

/*AND FINALLY INHERITANCE:											*/

/*All styling is inherited from the parent container. 								*/
/*So if you set the font-family in say body (thats the whole page btw)						*/
/*then all other tags will inherit it ifthey have that attribute - not in all cases but start with that in mind	*/

/*If you want to change a specific tags look further down then you have to write a 				*/
/*bit of css to over-ride the parent style.									*/

/*Hope this helps Mark - good luck :)										*/

/****************************************************************************************************************/
/************************************************THE END.********************************************************/

/* CSS PAIN BEGIN */
body{
    background: #363636;
    text-align: center;
    border:0;
    font-family: Arial, Helvetica, sans-serif;
    color: #191919
}

h1{
    font-size:2em;
    padding-bottom:1.5em
}

h2{
    
    font-size:1.5em;
    padding-bottom:1.25em;
}

h3{
    font-size:1.25em;
    padding-bottom:1em;
}

h4{ color: red;

}

h2{ color: navy;

}

h3{ color: navy;

}

h5{ color: red;
    font-size:2em;
	
}

p,li{
    font-size:0.80em;
    padding-bottom:0.85em;
}

b{
    font-weight:normal;
}

#wrap{/*wraps entire page in div for centering*/
    position:relative;
    margin-left:auto;
    margin-right:auto;
    text-align:justify;
    width:60em;
    padding-top:1em;
}

#header{/*wraps header divs*/
    width:100%;
}

#logo{
    overflow:hidden;
    float:left;
    width:100%;
}

#logo img{
    width:100%;
}

#logo h1 {
    display:none;
}

/*START menu bar*/

.skiplink{
    display:none;
}

#menubar{
    text-align:center;
    background-image:url(images/menubg.JPG);
    width:100%;
    float:left;
    clear:both;
}

#menubar h2{
    display:none;
}

#menubar li{
    display:inline;
}

#menubar ul{
    padding-left:5.5em;
    margin-right:auto;
}

#menubar a{
    float:auto;
    padding-left:0.6em;
    padding-right:0.6em;
    padding-top:0.25em;
    padding-bottom:0.25em;
    background-image:url(images/menubg.jpg);
    color:white;
    text-decoration:none;
    font-size:0.9em;
    font-weight:bold;
}

#menubar a:hover{
    color:black;
}

/*END menu bar*/



#main{/*wraps main content*/
    background-color:#ffffff;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    float:left;
}

#main div{
    margin-left:0%;
    margin-right:0%;
    margin-bottom:0.25%;
}

#middle{/*wraps main content in a div*/
    background-color:#ffffff;
    float:left;
    width:62.0%;
    height:inherit;
    padding:2.5%;
}

#middle ul{
    padding-left:2em;
    padding-bottom:2em;
    list-style-type:circle;
    list-style-position:inside;
}

#linkLogoDiv{
    width:100%;
    text-align:justify;
}

#linkLogoDiv a{
    text-align:center;
}

#linkLogoDiv a img{
    padding:1em;
}

#linksTop {
    width:100%;
    text-align:center;
}

#linksTop img {
    width:20%;
}

#linksMid {
    width:100%;
    text-align:center;
}

#linksMid img {
    width:20%;
}

#linksBot {
    width:100%;
    text-align:center;
}

#linksBot img {
    width:20%;
}

#right{/*wraps right content*/
    text-align:center;
    background-color:#ffffff;
    float:right;
    width:26.0%;
    padding:2%;
    
}

#right img{
    width:95%;
}

#right h3{
    display:none;
}

#footer{/*wraps footer content*/
    clear:both;
    width:auto;
    text-align:justify;
    padding:1.5%;

}

#footer p{
    color:grey;
    text-decoration:none;
    font-size:0.5em;

}

#footer .w3clogo{
    width:7em;
}

#contact_form{
    padding-left:9em;
}

#contact_form p{
    padding-bottom:0;
    padding-top:1em;
}