/*
This Website is my Final Project for IT 270. It is a mock-up of an actual site
I am in the process of building for a non-profit Veterans Organization I am part
of. While I plan on using an Apache/PHP/MySQL solution for my actual site, this
will represent a basic structure while demonstrating the competencies required
for this course. I hope you enjoy my work.

Author: Sean Lathrop
Date: 28 May 2016
 
    Created on : May 28, 2016, 1:51:28 PM
    Author     : tpk63
*/

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


/* Set the default page element styles */

body * {
   font-family: Verdana, Geneva, sans-serif;
   color: white;
   background-color: black;
   font-size: 100%;
   font-weight: inherit;
   line-height: 1.2em;
   list-style: none;
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   vertical-align: baseline;
}

/* Body Styles */
body {
   width: 95%;
   min-width: 900px;
   max-width: 1000px;
   font-family: Verdana, Geneva, sans-serif;
   font-weight: normal;
   font-size: 16px;
   margin: 0px auto;
   position: relative;
   border-left: 1px solid red;
   border-right: 1px solid red;
   background-color: black;
}

/*Header Styles*/

header {
    background-color: black;
}

header img {
   display: block;
   float: left;
}

/*Navigation List Styles*/

nav {
   float: left;
   width: 15%;
   margin: 10px;
}

nav li {
   display: block;
   width: 100%;
   margin-bottom: 10px;
}

nav li a {
   display: block;
   width: 100%;
   height: 25px;
   line-height: 25px;
   text-align: center;
   color: white;
   font-size: 0.8em;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   background-color: #cc0000;
}

nav li a:hover {
    background-color: #ff9933;
}

/*Article Styles*/

article {
    width: 80%;
    float: right;
    padding: 5px;
}

h1.title {
   font-size: 2.5em;
   font-family: "Times New Roman", serif;
   font-weight: bold;
   color: #cc0000;
   letter-spacing: 3px;
   margin-left: 5%;
   margin-top: 5%;
}

h1.duty {
   font-size: 1.5em;
   font-family: "Times New Roman", serif;
   font-weight: bold;
   color: #cc0000;
   letter-spacing: 3px;
   margin-top: 2%;
}

h2 {
   font-size: 1.25em;
   font-family: "Times New Roman", serif;
   color: #ffff00;
   margin-left: 5%;
   margin-bottom: 5%;
}

p.mission {
    margin: 10px;
    border-bottom: 2px inset #cc0000;
    padding-bottom: 5px;
}

p {
    padding: 10px;
}

a.email {
    float: right;
    font-style: italic;
    color: gold;
}
/*Calendar Placement*/
figure#events {
    float: right;
    width: 90%;
    margin-right: 10%;
}

li.position {
    margin: 10px;
    border-bottom: 2px inset #cc0000;
    padding-bottom: 5px;
}
em.rank {
    padding-left: 10px;
    font-size: 1.5em;
    color: gold;
}

/*Table Styles*/

table#gallery {
    margin-right: 10%;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

td.img_title {
   font-size: 1.5em;
   font-family: "Times New Roman", serif;
   font-weight: bold;
   color: #ffff00;
   letter-spacing: 3px;
   margin-left: 5%;
   margin-top: 5%;
}

td.caption {
    margin: 10px;
    border-bottom: 2px inset #cc0000;
    padding-bottom: 20px;
}

/*Footer Styles*/

footer {
   border: 1px solid red;
   background-color: rgb(255, 191, 165);
   clear: right;
   margin-top: 20px;
   padding: 10px 0px;
}

footer address {
   color: #cc0000;
   font-style: normal;
   font-size: 0.8em;
   text-align: center;
}