@import url("html5reset.css");/*all about resetting the browser defaults*/
@import url(http://fonts.googleapis.com/css?family=Nosifer|Princess+Sofia);
/*@import tags MUST be at top of document, before ANY selectors.
they do not work in IE3 or less....does not save you anything on performance,
but you don't have to add an additional link into the head of every html page now.*/

#fontFamily
{
    font-family: 'Nosifer', cursive;
    font-family: 'Princess Sofia', cursive;
}
/*id above is for reference only - quick copy/paste...but we'll never actually call
        on fontFamily ID.  Same with Color scheme below...*/
        
#colorscheme
{
    color: #C0C4A9; /*sickly green skin*/
    color: #333333; /*dark gray background*/
    color: #CAE1EA; /*lab coat blue*/
    color: rgb(239, 235, 210); /*eyeball yellow*/
}

nav ul.articleNav
{
    text-align: center;
    list-style-type: none;
}

nav ul li.horizontal
{
    display: inline;
    margin: 0 5px;
    background-color: #F00;
    border-radius: 7px;
    box-shadow: 2px 2px 1px 2px rgba(0, 150, 0, 0.5);
    font-size: small;
    float: left;
}

.horizontal a
{
    text-decoration: none;
    color: Cyan;
}

.horizontal a:hover, .horizontal a:focus
{
    text-decoration: underline;
}

.horizontal a:active
{
    text-decoration: line-through;
}

/*********************BASIC TAGS**********************/
body 
{
    background-color: #333; /*Dark gray background*/
    color: #FFF; /*White*/
    line-height: 1em; /*em is 1 character size*/
    font-size: 16px; /*px is number of pixels - each one reps smallest point of light onscreen*/
    font-family: 'Trebuchet MS', Helvetica, Sans-Serif;
}

h2
{
    font-size: 2.5em; /*2.5 times bigger than original base font we'd have otherwise gotten*/
}

h3
{
    font-size: 1.8em;
}

h4
{
    font-size: 1.1em;
}

p
{
    margin: 15px 0 0 10px; /*0 doesn't ever need a measurement (15px top & 10px left)*/
}

a
{
    color: black;
}

a:hover /*only applied to links that are bieng hovered over*/
{
    color: #FFF;
}

h1, h2, h3, h4
{
    font-family: 'Nosifer', cursive;
    line-height: 100%;
}
    
/*********************TABLE FORMATTING**********************/


/*********************PAGE LAYOUT*********************/
header
{
    background-image: url('../images/Header.png');
    background-repeat: no-repeat; /*shows up only once, no tiling*/
    min-height: 130px; /*at least tall enough for height of background image*/
    margin-top: 10px;
}

h1
{
    margin-left: 128px; /*moves h1 just far enough to the right that it doesn't overlap
    with the image*/
    padding-top: 40px;
    font-size: 3em;
}

#outer-wrapper
{
    width: 80%; /*fluid layout*/
    margin: 0 auto; 
    /*0 margin top/bottom, auto for Left/Right = centers container within parent container*/
}

#top-nav
{
    float: right;
    margin-top: 10px;
}

#inner-wrapper
{
    clear: both; /*ensures this is displayed beneath item floated left or right above it*/
    background-color: #FFF; /*white*/
    color: #000; /*black*/
    padding: 20px;
    border: 2px solid black;
    border-radius: 20px;
    min-width: 320px; /*regardless of content, this container will be at least 320px*/
}

#top-nav ul li
{
    display: inline;
    border-color: #FFF;
    border-style: solid;
    border-width: 2px;
    line-height: 2em;
    border-radius: 5px;
    padding: 3px;
    background: blue;
    /*css3 gradient from css3generator.com*/
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #bff5ff 50%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#bff5ff), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#bff5ff 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#bff5ff 50%,#1e5799 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#bff5ff 50%,#1e5799 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1e5799 0%,#bff5ff 50%,#1e5799 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */

}

#top-nav a
{
    color: #FFF;
    text-decoration: none; /*removes underline*/
    font-size: 1.2em;
    padding-right: 10px;
}

#top-nav a:hover, #top-nav a:focus
{
    text-decoration: underline; /*puts underline back in when hovering*/
    background: #AAA; /*note, same as below*/
}

#top-nav ul li.current
{
    background: #AAA; /*lighter shade of gray - NOTE background better here than
    background-color*/
}

/*we can use the child (direct descendant) selector to target h2s that are direct
children of inner-wrapper.  This will NOT target h2s in header (different container)
        NOR h2s inside an aside in the inner-wrapper (that would be grandchild)*/
#inner-wrapper > h2
{
    text-align: center;
}

#main
{
    width: inherit;
    max-width: 74%;
    float: right;
}

#historyMain
{
    width: inherit;
    float: right;
}

#contactMain
{
    max-width: 74%;
    float: right;
    margin-right: 24%;
    padding-right: 15px;
}

#left-side
{
    float: left;
    width: 15%;
    min-width: 140px;
    background-color: #C0C4A9; /*sickly green skin*/
    padding: 10px;
    margin: 10px;
    border: 5px ridge #666; /*darker gray*/
}

#side-nav
{
    margin-top: 10px;
    margin-bottom: 10px;
}

aside li
{
    margin-top: 10px;
    margin-left: 5px;
}

aside li a
{
    font-size: 0.8em;
    color: #222; /*darker gray*/
}

.links ul
{
    list-style-type: none; /*removes bullets*/
}

.links h4
{
    margin-top: 25px;
}

footer ul
{
    list-style-type: none;
    margin-top: 10px;
}

footer ul li
{
    background-image: url('../images/spacer.gif');
    background-repeat: no-repeat;
    background-position: right;
    display: inline;
    padding-right: 30px; /*leave enough room between li's for image to show up on right*/
    padding-left: 10px;
}

footer
{
    margin: 20px 0;
    text-align: center;
}

footer li a
{
    text-decoration: none;
    color: #CAE1EA; /*lab coat blue*/
}

footer ul li:last-child
{
    /*the LAST li*/
    background-image: none;
}

/*
        the :last-child above is called a pseudo element or speudo class selector
        Not necessarily supported in all browsers.
                we could also target the :first-child or
        "nth-child(2) -->second child
        or "nth-child(3) -->third child
*/

footer a
{
    color: #CAE1EA;
    text-decoration: none;
}


/*********************MISC CLASSES***********************/

.clear
{
    clear: both; /*clear any elements floated above*/
}


/*********************Blog Posts/"Articles"***********************/

article
{
    margin-top: 20px;
    padding: 10px
}

article h3
{
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
}

article div > a
{
    /*a tags that are immediate children of a div that is somewhere inside an article*/
    color: #000; /*black*/
    font-size: 1.1em;
    margin-top: 5px;
    display: block;
}

article a:hover
{
    color: #F00;/*Red*/
}

.blog-time
{
    float: right;
    font-size: 0.8em;
}

/*********************About Us*************************/

figure.right
{
    float: right;
    padding: 10px 0 10px 10px; /*padding everywhere but right side*/
}

figure.left
{
    float: left;
    padding: 10px 10px 10px 0;/*padding everywhere but left side*/
    margin-left: 10px;/*lines it up with the text*/
}

figcaption
{
    font-size: 0.7em;
    text-align: center;
}

/**************************SHOP************************/

.product
{
    width: 20%;
    float: left;
    min-width: 200px;
    border: 1px solid black;
    height: 350px;
    padding: 10px;
    margin: 0.3em;
    box-shadow: 5px 5px rgba(187, 0, 0, 0.3); /*horizontal offset (pos = to the right)
            vertical offset (pos = down) - color is using rgba so last value is for
            transparency: 0 = transparent up to 1 = opaque.*/
    background-color: rgba(0, 255, 175, 0.5);/*you can use this rgba anywhere for CSS colors*/
}

.title
{
    display: block;
    font-family: 'Princess Sofia', cursive;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.price
{
    display: block;
    text-decoration: underline;/*recommended you don't normally do this unless it's a link*/
    font-size: 1.1em;/*110%*/
    margin: 10px 0 0 10px;/*T R B L*/
}

/************************TABLE FORMATTING**********************/

table
{
    border-collapse: collapse; /*removes overlapping borders for certain browsers*/
    margin-top: 10px;
}

table, th, td
{
    border: 1px solid Lime;
}

th, td /*cells (header vs normal)*/
{
    padding: 0.2em 0.7em; /*T/B L/R*/
}

table tr:first-child
{
    background-color: #C0C4A9; /*sickly green skin*/
}

/*you can also target even or odd -numbered child using 
    :nth-child(even) or :nth-child(odd)*/
table tr:nth-child(even)
{
    background-color: #CAE1EA; /*lab coat blue*/
}

/*target the cells with worker ids and make them bold*/
table tr td:first-child
{
    font-weight: bold;
}

/*******************LIGHTBOX**************/
#lightbox
{
    position: fixed;
    top: 0;
    left: 0;
    background: url(../images/overlay.png);
    /*could use rgba, but poor support in older versions
        this effect is too important*/
    width: 100%;
    height: 200%;
    text-align: center;
}
#lightbox p
{
    color: white;
    font-size: 2em;
    text-align: right;
    margin: 20px 20px 0 0;
    z-index:10;
}
#lightbox img
{
    max-width: 940px;
    margin-top: -40px;
    box-shadow: 5px 5px 10px #111;
    background-color:white;
}
#lightbox_content
{
    margin-top: 50px;
}