/* Imports and Reset */
@import url("reset.css");
@import url("global-forms.css");

/* HTML5 tags */

logo, html, header, section, footer,
aside, nav, article, figure {
  display: block;
}


/* Header Section */


#logo {display: block; float: none; margin: 5px auto; padding: 0;}





#nav {
    background: #3b3b3b;
    font-size: 1em;
    height: 31px;
    line-height: 20px;
    margin: 0 auto 1.5em auto;
    padding: 0;
    text-align: center;
    width: 800px; 

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}

ul#navigation {
	
	width: 62%;
	margin: 0px auto;
	position: relative;
	float: none;

	border-left: 0px solid #fff;
	border-right: 0px solid #fff;
}

ul#navigation li {
	display:inline;
	font-size:12px;
	font-weight:bold;
	margin:0;
	padding:0;
	float:left;
	position:relative;

	border-top: 0px solid #ddd;
	border-bottom:0px solid #ddd;
}

ul#navigation li a {
	padding: 5px 38px;
	color:#fff;  /* Text color - change later */
	text-shadow: 0px 0px 0px #ccc;
	text-decoration:none;
	display:inline-block;
	border-right: 0px solid #fff;
	border-left: 0px solid #C2C2C2;
	border-top: 0px solid #fff;
	background: ##3b3b3b;  /* Box Color to match back bar */
    	text-decoration: none; 

	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;	

	
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

/* Text change on hover */

ul#navigation li a:hover {
	background:##3b3b3b;
	color:#282828;
  	text-decoration: none;
  	text-shadow: 0px 0px 0px #333333;


}

/* Selection change on hover */

ul#navigation li:hover > a {
	background:#0496a6;
    	text-decoration: none; 

	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;

}

/* Active Selection */

ul#navigation li .active a:link, ul#navigation li .active a:visited {
	border-bottom: 4px solid ##3b3b3b;
	background:##3b3b3b;
	color:#282828;
  	text-decoration: none;
  	text-shadow: 0px 0px 0px #333333;
	border-radius: 0px;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
	visibility:visible;
	opacity:1;
	text-decoration: none; 
	
	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;


}

/* Navigation Dropdown Border attributes */

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    	margin: 0;
    	padding: 0;    
	visibility: hidden;
    	position: absolute;
    	z-index: 99999;
	width: 110px;
	background: #616161;
	box-shadow: 0px 0px 0px #ccc;
	opacity:0;

	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
	
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    	top: 32px;
    	left: 0px;

	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;

}

ul#navigation ul li ul {
    	top: 0;
    	left: 180px;


	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:0px solid #c9c9c9;

	border-radius: 5px; 
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
}

/* Dropdown Section */

ul#navigation ul li a {
	background: ##3b3b3b;
	padding:7px 15px;
	color:#fff;   /* Dropdown Menu Text Color non-selected */
	text-shadow: 0px 0px 0px #333333;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:80px;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}



/***** Global *****/

/* Body */


/* Content Box */

#content {
  background: #000;
  color: #ffffff;
  margin-bottom: 2em;
  overflow: hidden;
  padding: 0px 0px;
  width: 800px;
 
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}



  body {
    background: #000 url('../images/bg.png');
    color: #FFFFFF;
    font-size: 87.5%; /* Base font size: 14px */
    	font-style: Verdana, Tahoma, sans-serif;
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    overflow-y: scroll;
  }

 
 
/* Headings */


h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1.000em} /* 14px */
 
h2 {

  text-align: center;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.responsive {
  max-width: 100%;
  height: auto;

}
/* Anchors */


a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
  color: #C74350;
  padding: 0 0px;
  text-decoration: underline;
}
a:hover, a:active {
  background-color: #64a0d6;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #333;
}
 
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
 
strong, b {font-weight: bold;}
em, i {font-style: italic;}
 
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
 
/* Lists */
ul {
  list-style: outside disc;
  margin: 1em 0 1.5em 1.5em;
}
 
ol {
  list-style: outside decimal;
  margin: 1em 0 1.5em 1.5em;
}
 
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
 

 
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
 
  /* Table header */
  thead th {padding: .5em .4em; text-align: left;}
  thead td {}
 
  /* Table body */
  tbody td {padding: .5em .4em;}
  tbody th {}
 
  tbody .alt td {}
  tbody .alt th {}
 
  /* Table Footer */

  tfoot th {}
  tfoot td {}
 



/*    ====== Contact Form =======  */


input, textarea {

	font-family: Verdana, Tahoma, sans-serif;
	padding: 10px;
	border: 1px solid #E5E5E5;
	width: 200px;
	color: #999999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;		
}

textarea {

	
	width: 400px;
	height: 150px;
	max-width: 700px;
	line-height: 18px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {

	font-family: Verdana, Tahoma, sans-serif;
	border-color: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

.form label {
	margin-left: 10px;
	color: #999999;
}


/*    ====== Submit Button ======  */


.submit input {
	width: 100px; 
	height: 40px;
	background-color: #0496a6; 
	font-size:12px;
	font-weight:bold;	
	color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;		
}


#footer {
    position:fixed;
    bottom:0;
	position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: gray;
  color: white;
  text-align: center;
  align-self: end;
}

/* **** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}