@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3 and JavaScript, 6th Edition
   Tutorial 9
   
   Star Dust Stories Layout Styles

   Filename: sd_layout.css

*/

html {
   background: url(../images/sd_back.png) 100%/cover fixed;
}

strong {
   font-weight: bold;
}

p a {
   text-decoration: underline;
}

body {
   background: url(../images/sd_stars.png) rgb(51, 51, 51);
   color: rgb(231, 231, 231);
   float: none;
   margin: 0px auto;
   width: 90%;
   max-width: 1000px;
   min-width: 640px;
   margin-top: 30px;
}

header {
   width: 100%;
}

header nav.horizontal {
   width: 100%;
}


header nav.horizontal li {
   background-color: rgb(41, 41, 41);
   display: block;
   font-family: Tahoma, Geneva, sans-serif;
   float: left;
   width: 16.66%;
}


header nav.horizontal li a {
   color: white;
   display: block;
   font-size: 0.8em;
   height: 50px; 
   letter-spacing: 0.1em;   
   line-height: 50px; 
   text-align: center;     
   width: 100%;
}

header nav.horizontal li a:visited, header nav.horizontal li a:link {
	color: white;
}

/* Navigation List Styles */

body > header a {
   background-color: rgb(51, 51, 51);  
   border: 5px outset rgb(211, 211, 255);   
}

body > header:active, body > header a:hover {
   background-color: rgb(51, 51, 151);
}




header img {
   clear: left;
   display: block;
   margin: 5px auto;
}


/* section layout */


section#left {
   float: left;
   width: 50%;
}

section#right {
   float: left;
   width: 50%;
}


footer {
   clear: left;
   width: 100%;
}




/* left section */

section#left article {
   width: 95%;
   margin: 0px auto;
}

section#left article h1 {
   font-size: 34px;
   font-family: 'Courier New', courier, monospace;
   font-weight: bold;
   margin: 20px 0px 20px 20px;
}


section#left article p {
   margin: 0px 0px 20px 20px;
   font-family: Verdana, Geneva, sans-serif;
}


/* right section */

div#planisphere {
   position: relative;
   width: 100%;
}

div#planisphere img {
   display: block;
   position: absolute;
   top: 40px;
   left: 10%;
   width: 75%;
}

div#timeStamp {
   position: absolute;
   top: 5px;
   left: 30%;
}





/* footer styles */


footer {
   border-top: 2px solid rgb(171, 171, 171);  
   clear: left;    
   margin-top: 15px;
   background-color: rgb(71, 71, 71);
   text-align: right;
}

footer, footer span  a {
   color: rgb(231, 231, 231);
   font-size: 11px;
   padding: 10px;
}