﻿/*
SELECTOR
{
        property: value;
}
*/
/*HTML5 Update for older browsers*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section 
{
     display:block;
}

body 
{
    background-color: #009900;
            /*any repeated digit for color code other than 0 or F is gray*/
    line-height: 1.5;
    padding-left: 40px;
}

img
{
        float: left;
        border: 2px #000000;/*black border*/
        margin: 5px;
}

header
{
    background-color: #99FF00;
    color: Navy;
    border: 4px groove GoldenRod;
    padding: 5px;
}

/*
    In CSS you can make up your own "names" to apply to html tags, and they'll
    get the formatting you specified.
    Either create an ID (intended to UNIQUELY identify a tag on the page) with #
    OR you can create a CLASS (use as many times per page as needed) with .
*/

#mainContent /*ID*/
{
    width: 800px;
    background-color: #FFFFBB;/*OR hex shorthand #fff*/   
    margin: 0 auto;/*auto margin on the left & right means center this container inside its
                            parent container*/
    padding-left: 40px;
    padding-right: 40px;
}

.disclaimer /*CLASS*/
{
       font-size: xx-small;
       color: RosyBrown;
}

footer
{
    text-align: center;/*centers content INSIDE the container*/
    font-style: italic;
    border-top: 2px dashed #0000BB;
    font-size: small;
}

p
{
    font-family: "Times New Roman";
    font-size: large;
}

h2
{
    font-family: "Lucida Bright", Arial Black;
    text-align: center;
    color: Maroon;
    font-size: 30px;
}

h3
{
    font-family: "Lucida Sans Unicode", Arial Black;
    text-align: center;
    color: Navy;
}

ul li
{
    font-size: 12pt;
    font-family: "Times New Roman";
    list-style-image: url(../../img/RedArrow.gif);
}

ul li ul li
{
    list-style-type: square;
    list-style-image: none;
}

.h4ListHeads
{
    margin-bottom: 0px;
}

nav ul li
{
    margin-right: 20px;
    display: inline;/*so no line break after each LI - means horizontal list*/
    border: 1px solid Lime;
    border-radius: 5px;/*css3 feature, some browsers may not support*/
    padding: 1px;
    box-shadow: 2px -2px 5px 1px blue;
    background-color: #FFF;/*White*/
}