/*
   IT-270 Web Site Design
   Final Website


   Just Desserts Style Sheet
   Author: Emily Finch
   Date:   

   Filename: jdstyle.css       
   Supporting files: asideimg.jpg, navimg.jpg                     
*/

/* For All JD Webpages */

/* General Styles */
article, aside, figure, figcaption, footer, header, section, nav, video {
   display: block;
}
body {
   background-color: rgb(110, 110, 110);
   background: -webkit-radial-gradient(rgb(185, 185, 185), rgb(110, 110, 110)); 
   background: -o-radial-gradient(rgb(185, 185, 185), rgb(110, 110, 110)); 
   background: -moz-radial-gradient(rgb(185, 185, 185), rgb(110, 110, 110)); 
   background: radial-gradient(rgb(185, 185, 185), rgb(110, 110, 110)); 
   width: 98%;
   min-width: 1000px;
   max-width: 1400px;  
   font-family: Verdana, Geneva, sans-serif;
}
a {
   text-decoration: none;
   color: rgb(110, 110, 110); 
}
a:hover {
   text-decoration: underline;
   color: black; 
}
header {
   text-align: center;
}

/* Navigation Menu Styles */
header nav ul li {
   display: block; 
   float: left; 
   width: 200px;
   margin: 0px 5px 10px 5px;
   text-align: center;        
}
header nav ul li a {
   display: block;
   background-color: rgb(130, 180, 255);
   background: url(image+video/navimg.jpg) bottom left no-repeat;
   border: 5px solid rgb(255, 175, 200);
   color: rgb(110, 110, 110); 
   height: 40px;     
   padding: 10px 5px;  
   text-decoration: none;
   font-size: 110%; 
}
header nav ul li:hover {
   -moz-box-shadow: black 5px 5px 15px;
   -webkit-box-shadow: black 5px 5px 15px;
   box-shadow: black 5px 5px 15px;
}

/* Heading Styles */
h1, h2, h3 {
   background-color: rgb(130, 180, 255);
   border: 5px solid rgb(255, 175, 200);
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px; 
   color: rgb(110, 110, 110);
   font-family: 'Edwardian Script ITC', 'Brush Script MT',cursive;
   text-align: center;
   margin: 5px auto;
   padding: 5px;
}
h1 {  
   font-size: 300%;
   word-spacing: 3px; 
   width: 90%;
}
h2 {
   font-size: 250%;
   word-spacing: 3px;
   width: 90%;
}
h3 {
   font-size: 200%;
   word-spacing: 2px;
   width: 50%;
}

/* Aside Styles */
aside {
   float: right;
   background-color: rgb(200, 220, 255);
   background: url(image+video/asideimg.jpg) bottom left no-repeat;
   border: 8px double rgb(255, 175, 200);
   width: 300px;
   height: 350px;
   margin-top: 10px;
   position: relative;
   top: 90px;
}
aside h1 {
   background-color: rgb(255, 175, 200);
   border: 5px solid rgb(130, 180, 255);
   text-align: center;
   padding: 0px;
}
aside li {
   padding: 0px 10px;
   list-style-type: none;
}

/* Article Styles */
/* article width is set internally in HTML pages */
article {
   background-color: rgb(255, 240, 245);
   border: 8px double rgb(130, 180, 255);
   padding: 10px;
   margin: 10px;  
}

/* Figure Styles */
article figure {
   float: left;
   margin: 0px;
}
article figure img{
   border: 15px double rgb(130, 180, 255);
}
article figure figcaption {
   background-color: rgb(130, 180, 255);
   border: 5px solid rgb(255, 175, 200);
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;   
   color: rgb(110, 110, 110);
   text-align: center;
   margin: 5px;
   padding: 5px;
   font-size: 95%;
   font-weight: 700;
   letter-spacing: 2px;
   word-spacing: 2px;
   font-style: italic; 
}

/* Table Styles */
table {
   border: 8px double rgb(255, 175, 200);
   border-collapse: collapse;
   margin: 10px auto;
}
table th, td{
   background-color: rgb(200, 220, 255);
   border: 2px solid rgb(255, 175, 200);
   padding: 2px 10px;
   color: rgb(110, 110, 110);
   text-align: center;
   font-size: 90%;
}
table th {
   background-color: rgb(130, 180, 255);
}
table tr th#head {
   background-color: rgb(110, 110, 110);
   color: rgb(130, 180, 255);
}

/* Multimedia Styles */
video {
   background-color: black;
   display: block;
   margin: 20px auto;
   width: 75%;
}

/* Footer Styles */
footer {
   clear: left; 
   border-top: 8px double rgb(130, 180, 255);
   width: 99%;
   margin: 0px auto;        
}
footer nav ul li {
   display:  block;
   float:  left;
   text-align: center;
   width: 16%;
   margin-top: -10px;
}
footer nav ul li a {  
   color: rgb(130, 180, 255);    
   padding: 15px 0px;  
   text-decoration: none;
   font-size: 70%;
   letter-spacing: 1px;
   font-variant: small-caps;
}
footer nav ul li a:hover {
   color: rgb(130, 180, 255);
   text-decoration: underline;
}