/* ~~~~~~~~~ layout ~~~~~~~~~~ */

#container {
	width: 75%;
	margin: 20px auto;
	background: #fff;
	padding: 30px;
	overflow: hidden;
}

body
{
background-image:url('../images/BKG.png');
}

/*
Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative.
http://www.strangenative.com
@strangenative

Creative Commons License by Attribution. 
Feel free to take it, adapt it, & use it on both commercial and non-commercial projects.
Though I'd like a smidgeon of credit, so just leave this bit in here. K?
*/
body, h3, h4, h5, h6, .run-in, dt {font-family: "museo-sans-1","museo-sans-2", Helvetica, Arial, sans-serif;}
h1, h2, .pullquote, blockquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite  {font-family: "museo-slab-1","museo-slab-2", Helvetica, Arial, sans-serif;}

/*Size & Vertical Rhythm*/
body{font-size:100%;font-size:16px;line-height:1.5em;}

/*HTML Standard Elements*/
address{font-size:.75em;letter-spacing:.05em;margin:2.2em 0 -.2em;font-style:italic;line-height:1.75em;}
h1{font-size:2em;line-height:1.333em;margin:.97em 0 0em; color:#000000} 
h2{font-size:1.2em;line-height:1.1em;margin:2em 0 .5em;}
h1 + img, h2 + img{margin-top:1em;}
h3{font-size:1.125em;}
h4{font-weight:bold;font-size:1em;}
h1, h2, h3, h4, h5, h6{font-weight:500;}
small{display:block;font-size:.75em;letter-spacing:.05em;margin:2.2em 0 -.2em;font-style:italic;line-height:1.75em;}
p, ul, ol, form{margin:1.5em 0 1em;}
ul{list-style-position:outside;list-style-type:disc;line-height:1.5;}
li{margin-bottom:.75em; margin-left:2em;}
ol{list-style-position:outside;list-style-type:decimal;}

p {margin-bottom:0;hyphenate: auto;hyphenate-before:2;hyphenate-after:3;hyphenate-lines: 3;orphans:4}
p span.pullquote{text-indent:0;}

td {text-align:center}


/* ~~~~~~~~~ Content Resize ~~~~~~~~~~ */

/*  GRID OF EIGHT   ============================================================================= */

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
	
.span_8_of_8 {
	width: 100%;
}

.span_7_of_8 {
	width: 87.3%; 
}

.span_6_of_8 {
	width: 74.6%; 
}

.span_5_of_8 {
	width: 61.9%; 
}

.span_4_of_8 {
	width: 49.2%; 
}

.span_3_of_8 {
	width: 36.5%;
}

.span_2_of_8 {
	width: 23.8%; 
}

.span_1_of_8 {
	width: 11.1%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_8_of_8 {
		width: 100%; 
	}
	.span_7_of_8 {
		width: 100%; 
	}
	.span_6_of_8 {
		width: 100%; 
	}
	.span_5_of_8 {
		width: 100%; 
	}
	.span_4_of_8 {
		width: 100%; 
	}
	.span_3_of_8 {
		width: 100%; 
	}
	.span_2_of_8 {
		width: 100%; 
	}
	.span_1_of_8 {
		width: 100%; 
	}
}

/* ~~~~~~~~~ NAVIGATION ~~~~~~~~~~ */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background: #790024;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  float: left;
  display: block;
  padding: 0;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #dbdbdb;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #dbdbdb;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #dbdbdb;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    height: 1px;
    background: #ffffff;
    width: 100%;
    opacity: .2;
  }
  #cssmenu ul li.last > a:before,
  #cssmenu ul li:last-child > a:before {
    display: none;
  }
}
		
		
		
/* ~~~~~~~~~ Table ~~~~~~~~~~ */	
	.hoverTable{

		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; 
		border:#999999 1px solid;
		
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #f0f0f0;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }	
		
			
/* ~~~~~~~~~ article ~~~~~~~~~~ */


/* ~~~~~~~~~ footer ~~~~~~~~~~ */
			
footer {
	width: 75%;
	margin: 20px auto;
	font-size: 1.4em;
	text-align: right;
}