/*
   WWW asignment2
   Page1 treeworks Style Sheet
   Author: Matthew C. McNutt
   Date:   10/18/2014

   Filename:         page1_styles.css
   Supporting Files: tree1.jpg

*/
/* Styles for the Page Body */

body {
   background: green url(images\tree1.jpg) top left no-repeat;
   position: relative;
   width: 95%;
   min-width: 1000px;
   max-width: 1400px;
}



/* Styles for the Page Header */

header {
   position: center-left;
   backgroun-repat:no-repeat;
   background-size: 200% 200%;
}


/* General Navigation List Style */

nav a {
   text-decoration: none;
}

/* Horizontal Navigation List */

nav.horizontalNAV {
   margin-left: 33%;
   width: 66%;
}

nav.horizontalNAV li {
   font-size: 87.5%;
   float: left;
   padding: 15px 0px;
   text-align: center;
   width: 20%;
   text-decoration:none
}

nav.horizontalNAV a {
   color: rgb(255, 255, 99);
}

nav.horizontalNAV a:hover {
   color: red;
}



/* President's message */

#president {
   background-color: rgb(105, 96, 87);
   background-color: rgba(255, 255, 255, 0.3);
   background-image: url(images\president.jpg);
   background-position: bottom right;
   background-repeat: no-repeat;

   -o-background-size: 40%;
   -moz-background-size: 40%;
   -webkit-background-size: 40%;
   background-size: 40%;

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

   clear: left;
   float: left;
   margin-left: 33%;
   width: 40%;
}

#president h1 {
   font-family: 'Lucida Calligraphy', 'Apple Chancery', cursive;
   font-size: 158%;
   font-weight: bold;
   margin: 10px 0px 0px 10px;
}

#president h2 {
   font-size: 105%;
   margin: 0px 0px 10px 15px;
}

#president p {
   font-size: 87.5%;
   margin: 0px 40% 20px 15px;
}



/* Story section styles */

#story {
   background-color: gray;
   background-color: rgba(255, 255, 255, 0.8);
   clear: left;
   float: left;
   margin: 20px 0px 0px 33%;
   width: 66%;
}



/* Article styles */

#story article {
   border-right: 4px solid black;
   float: left;
   width: 50%;
}

#story article hgroup {
   background: rgb(97, 30, 2) url(images\miles.jpg) bottom right no-repeat;

   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;

   color: rgb(145, 98, 78);
   color: rgba(255, 255, 255, 0.3);

   height: 90px;
   text-indent: 10px;
}

#story article hgroup h1 {
   font-size: 158%;
   letter-spacing: 3px;
}

#story article hgroup h2 {
   font-size: 105%;
}

#story article p {
   font-size: 80%;
   margin: 10px;
}

#story article ul li {
   font-size: 80%;
   margin: 15px 25px;
}

#story article ul li strong {
   font-weight: bold;
}



/* Figure box styles */

#story figure {
   float: right;
   width: 35%;
}

#story figure img {
   border: 5px inset rgb(227, 168, 145);
   display: block;
   margin: 30px auto 10px;
   width: 80%;
}

#story figure figcaption {
   font-size: 75%;
   font-style: italic;
   text-align: center;
}



/* Sidebar styles */

aside {
   color: rgb(145, 98, 78);

   position: absolute;
   top: 400px;
   left: 10px;

   width: 30%;
   height: 650px;
   overflow: auto;
}



/* Page footer styles */

footer {
   clear: left;
   margin-left: 33%;
   width: 66%;
}

footer address {
   color: rgb(182, 182, 92);
   font-size: 80%;
   font-style: normal;
   padding-top: 10px;
   text-align: center;
}