/*
      
      IT270 - Website Design - Final Project

      Rattlesnake Football Club
      Author: Sean McLaughlin
      Date: 1/12/2016

      Filename: layout.css

*/

/* Display HTML5 structural elements as blocks */

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

/* Body styles */

body {
   background: url(bg1.png) no-repeat center center fixed;
   
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

/* Header Styles */

header {
   background: url(rattle2.png) top right no-repeat;
   height: 120px;
}

header h1 {
   color: yellow;
   font-size: 45px;
   font-variant: small-caps;
   opacity: 2;
   letter-spacing: 5px;
}
   
/* General Navigation List Style */

nav a {
   text-decoration: none;
}

/* Horizontal navigation List Style */

nav {
   background-color: black;
   height: 42px;
   opacity: 0.6;
}

nav li {
   display: block;
   float: left;
   line-height: 42px;
   text-align: center;
   width: 15%;
}

nav li a {
   color: yellow;
   font-variant: small-caps;
   font-size: 0.8em;
   text-decoration: none;
}

nav li a:hover {
   color: white;
}

/* Section styles */

section h1 {
   color: yellow;
   font-size: 40px;
}


/* Story section styles */


#story1 {
   background-color: rgb(105, 96, 87);
   background-color: rgba(32, 96, 63, 0.7);
   color: white;

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

   clear: left;
   float: left;
   
   Width: 80%
}

#story1 hgroup h1 {
   font-family: Times New Roman, sans-serif;
   font-size: 300%;
   font-weight: bold;
   margin: 20px 0px 0px 15px;
}

#story1 p {
   font-sixe: 87.5%;
   margin: 0px 0% 20px 15px;
}

#story2 {
   background-color: rgb(105, 96, 87);
   background-color: rgba(32, 96, 63, 0.7);
   background-image: url(action.jpg);
   background-position: top right;
   background-repeat: no-repeat;
   color: white;

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

   clear: left;
   float: left;
   
   Width: 80%
}

#story2 hgroup h1 {
   font-family: Times New Roman, sans-serif;
   font-size: 300%;
   font-weight: bold;
   margin: 20px 50% 0px 15px;
}

#story2 hgroup h2 {
   font-family: Times New Roman, sans-serif;
   font-size: 200%;
   font-weight: bold;
   margin: 20px 0px 0px 15px;
}

#story2 p {
   font-sixe: 87.5%;
   margin: 0px 0px 20px 15px;
}

#story3 {
   background-color: rgb(105, 96, 87);
   background-color: rgba(32, 96, 63, 0.7);
   color: white;

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

   clear: left;
   float: left;
   
   Width: 100%
}

#story3 hgroup h1 {
   font-family: Times New Roman, sans-serif;
   font-size: 300%;
   font-weight: bold;
   margin: 20px 0px 0px 15px;
}

#story3 p {
   font-sixe: 87.5%;
   margin: 0px 0% 20px 15px;
}

#story4 {
   background-color: rgb(105, 96, 87);
   background-color: rgba(32, 96, 63, 0.7);
   color: white;

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

   clear: left;
   float: left;
   
   Width: 100%
}

#story4 hgroup h1 {
   font-family: Times New Roman, sans-serif;
   font-size: 300%;
   font-weight: bold;
   margin: 20px 0px 0px 15px;
}

#story4 p {
   font-sixe: 87.5%;
   margin: 0px 0% 20px 15px;
}

#story5 {
   background-color: rgb(105, 96, 87);
   background-color: rgba(32, 96, 63, 0.7);
   color: white;

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

   clear: left;
   float: left;
   
   Width: 100%
}

#story5 hgroup h1 {
   font-family: Times New Roman, sans-serif;
   font-size: 300%;
   font-weight: bold;
   margin: 20px 0px 0px 15px;
}

#story5 p {
   font-sixe: 87.5%;
   margin: 20px 20px 20px 15px;
}

/* Article section styles */

article p {
   color: white;
   font-size: 35px;
}

article p a {
   color: white;
   font-size: 35px;
   font-weight: bold;
}

/* Article Image Styles */

figure img {
   border: 5px solid black;
   width: 15em;
}

/* Box shadow styles */

figure img {
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;

   -moz-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
   box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
}

/* Figure caption styles */

figure figcaption {
   color: yellow;
   font-size: 12px;
   font-style: italic;
   line-height: 12px;
   text-align: center;
   padding: 5px 0px;
}

/* Footer Styles */

footer {
   border-top: 2px solid black;
   background-color: black;
   clear: left;
   margin-top: 20px;
   opacity: 0.6;
   padding: 10px 0px;
}

footer address {
   color: white;
   font-style: normal;
   font-size: 0.8em;
   font-variant: small-caps;
   text-align: center;
}