/* 
    Document   : style.css
    Created on : May 7, 2012, 9:44:31 AM
    Author     : Quann
    Description:
        Purpose of the stylesheet follows.


CSS Selectors
1. element
header, footer, p, ul, ol, dl
2. id
#page_header
3. class
.video
4. descendent
#page_nav ul li a
5. sibling
#page_nav ul li+li
6. attribute
#page_nav ul li a[title~=North] (~= means contains)
7. Psuedo-class ( : = psuedo means fake/kinda/imitation of)
#page_nav ul li a:hover
8. Pseudo-element
#page_nav ul li:nth-child(2)
*/

/*LAYOUT*/
/* Change the box model to the border-box. */
*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Set defaults -- override browser styles */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: top;
}	

body, p{
 font-size: 14px;
 font-family: times;
}


h2{
 font-size: 16px;
}

/* Makes sure the new structural elements display as blocks */
article, aside, figure, footer, header, hgroup, nav, section {display: block;}


/* let's clear some floats */
.clearfix:before, 
.clearfix:after { 
content: "\0020"; /* This is an ascii space */
display: block; height: 0; 
overflow: hidden; 
}  

.clearfix:after { 
clear: both; 
} 

body {
  display: inline;
  margin: 0px;
  background-color: #191814;
}

#page-header{
  background-image: url('../images/progrow.png');
  background-repeat: repeat-x;
  margin-top: -16px;
  height: 155px;
  border-bottom: 8px solid #9F0;
}

#logo {
  width: 100%;
  max-width: 960px;
  margin: 0px auto 5px auto;
  background-color: transparent;
}

#logo img, logo img a{
  width: 300px;
  max-width: 1000px;
  margin: 65px auto 0 auto;
  background-color: transparent;
  border: none;
  float: left;
}

#page-nav {
  width: 100%;
}

#page-nav ul {
  float: right;
  margin-top: 125px;
}

#page-nav li {
  float: left;
  position: relative;
  list-style: none;
  padding-right: 25px;
}

#page-nav li:last-of-type{
  padding-right: 0px;
}

#page-nav li a {
  text-decoration: none;
  display: inline;
  font-family: arial;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: bold;
}

#page-nav li a, #page-nav li a:visited {
  color: #000;
}

#page-nav li a:hover {
  color: #99ff00;
}

/*#main-nav {
  margin: 1em auto 0 auto;
  max-width: 1000px;
  width: 100%;
}*/

#thebox-wrapper{
  /*width: 100%;
  height: 500px;
  border: 1px solid black;
  height: 400px;
  background-color: #99ff00;*/
  position: relative;
  top: 0px;
  margin: 20px auto 10px auto;
  max-width: 960px;/*1010px;*/
  background-color: #E9E9E9;
  /*padding-left: 20px;*/
}
  
#thebox a {
  text-decoration: none;
  display: inline;
  font-family: arial;
  font-size: 14px;
  font-weight: bold;
}

#thebox a, #thebox a:visited {
  color: #000;
}

#thebox a:hover {
  color: #99ff00;
}

#content-section{
  overflow: hidden;
}

#thebox {
  max-width: 900px;
  background-color: white;
  height: auto;
  min-height: 800px;
  margin: 0 auto 0 auto;
  padding-bottom: 10px;
  box-shadow: 0px 0px 6px 0px #555;
}

#thebox img{
   /*border: 3px solid white; */
   /*float: right;*/
   margin-top: 7px;
   margin-right: 7px;
}

footer{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

footer, footer p, footer a, footer a:visited{
    color: #EEE;
    text-decoration: none;
}

footer a:hover{
    color: #99ff00; 
}

h1{
    color: #99ff00;
    background-color: #191814;
    display: inline;
    padding: 6px;
    position: relative;
    top: 15px;
    box-shadow: 2px 1px 7px 0px #555;
    font-size: 18px;
    font-weight: bold;
}

h3{
    color: #003df0;
    font-size: 15px;
    font-weight: bold;
}

h1,h2,h3{
    font-family: arial;
}

/*#division{
    background-image: url('../images/ribbon.png');
    background-repeat: no-repeat;
    background-attachment: initial;
    background-position-x: 50%;
    background-position-y: 0%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    height: 65px;
    position: relative;
    background: url("../images/ribbon.png") no-repeat scroll center top transparent;
    margin-top: -12px;
}*/

/*#ribbon{
    margin: 0 auto;
    padding-top: 15px;
    width: 980px;
}*/

#content img {
  width: 250px;
  height: auto;
  float: none;
  /*border: 1px solid black;*/
  margin: 4px 20px 30px 20px;
}

#content {
  padding: 20px;
  padding-top: 30px;
}
/*GLOBAL FORMATTING*/


/* Invalid styles for contact form */
input:invalid,
input:focus:invalid
textarea:invalid, 
textarea:focus:invalid, 
textarea[required]:invalid{
 background-color: #9F0 /*#ffff66;*/;
}

#content form fieldset {
border: 1px solid 
black;
padding: 1em;
margin: .5em 0 0;
}

#contactform input[name="firstname"] {
width: 25%;
}

#contactform input[name="lastname"] {
width: 35%;
}

#contactform input[name="email"] {
width: 60%;
}

#contactform input[name="subject"] {
width: 80%;
}

#contactform textarea {
width: 80%;
height: 10em;
}

img#captcha {
width: auto;
height: auto;
float: none;
border: 0px;
margin: 0px;
}

#content form input, #content form textarea, #content form details, #content form img + span {
display: block;
}

ul.noticeme{
list-style-type: none;
}

.subject{
    color: #888;
    font-weight: bold;
    font-family: arial;
    font-size: 14px;
}

#content ol, #content ul{
    margin-left: 35px;
}

#content h3, #content h2{
    margin-top: 20px;
}

.color-box{
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

#page-section{
    min-width: 980px;
}

.no-js #page-nav a{
    /*Enter code to edit the content in case of disabled js*/
}

#page-nav a[title ~="home"]:link,
#page-nav a[title ~="home"]:visited{
    /*This gathers a navigation link with the word home in it, and adds style to the link and visited state.*/
}

.example{
    background-color: whiteSmoke;
    border: 1px solid #CCC;
    border-radius: 5px;
}

.demonstration{
    color: blue;
    font-weight: bold;
}