@charset "utf-8";
/*
   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
   Tutorial 14
   Case Problem 1

   Bubbla Bubbles Style Sheet

   Filename: bu_layout.css
   
*/


/* HTML and Body Styles */

html {
   background: rgb(255, 255, 244);
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
}

body {   
   background: white;
   width: 1024px;
   margin: 80px auto;
   box-shadow: rgb(51, 51, 51) 0px 0px 1px, rgb(51, 51, 51) 0px 0px 10px, 
               rgb(51, 51, 51) 0px 0px 20px, rgb(51, 51, 51) 0px 0px 40px;
}

body > header > section {
   position: relative;
   background: radial-gradient(rgba(235, 200, 136, 0.6) 40%, rgba(51, 51, 51, 0.8));

   width: 1024px;
   height: 500px;
}

body > header > section > img {
   display: block;
   width: 1024px;
   height: 500px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 2;
}

body > header > section > div#bubbleBox {
   display: block;
   width: 1024px;
   height: 500px;
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 1;
}


/* Header Styles */

body > header {
   width: 100%;
   position: relative;   
}

body > header > img {
   margin-left: 10px;
}

body > header > div {
   margin: 10px 0px;
   height: 50px;
}



/* Middle Navigation Styles */

nav#middle ul {
   clear: left;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
   background-color: rgb(0, 104, 141);
   height: 40px;
   box-shadow: 0px 5px 15px rgb(51, 51, 51);
}
   
nav#middle ul li {
   -webkit-flex: 0 1 110px;
   flex: 0 1 110px;   
   margin: 5px;
}

nav#middle ul li a {
   color: rgb(255, 255, 199);
   display: block;
   font-size: 1.2em;
   text-align: center;
   padding: 50% 0%;
}

nav#middle ul li a:hover, nav#middle ul li a:active {
   color: rgb(255, 255, 3);
   text-shadow: 0px 0px 2px black, 0px 0px 8px black;
}






/* Footer styles */   

footer {
   clear: both;
   color: rgb(255, 255, 199);    
   background: linear-gradient(rgb(0, 104, 141), rgb(0, 28, 46));
   font-size: 1.1em; 
   line-height: 1.4em;
   font-style: normal;
   width: 100%;
   letter-spacing: 0.1em;
}

footer nav ul, footer section {
   float: left;
   padding: 20px 30px;
   width: 20%;
}

footer section {
   float: left;
   padding: 20px 30px;
   width: 40%;
}

footer nav ul a {
   color: rgb(255, 255, 199);
}

footer nav ul a:hover {
   text-decoration: underline;
}


footer p {
   clear: both;
   color: rgb(211, 211, 211);
   font-size: 0.9em;
   text-align: center;
   margin: 0px;
   padding: 10px 0px;
   border-top: 1px solid rgb(255, 255, 199);
}