/*
   New Perspectives on HTML, CSS, and JavaScript
   Final Project

   Press Start

   Author: Joshua Aguilar
   Date: 1/31/2016
   Filename:   ps2.css


*/



/* Default Styles */

* {
   list-style: none;
   margin: 0px;
   padding: 0px;
}

header, figure, hgroup, footer, article, nav, section {
   display: block;
}


  body {
    background: url(stars.jpg);
    width: 95%;
    min-width: 1000px;
    max-width: 1400px;
    font-family:impact, Geneva, sans-serif;
    font-weight: normal;
  }
}

html, body {
 height: 100%;
}


/* Main Section Styles */
section#main {
   background-color: rgb(191, 191, 191);
   background-image: url(back2.png), url(back3.png);
   background-position: top right, top left;
   background-repeat: no-repeat;

   font-family: Century Gothic, Geneva, sans-serif;
   margin: 0px auto;
   min-height: 100%;
   position: relative;
   width: 900px;

   border-left: 1px solid black;
   border-right: 1px solid black;

   -moz-box-shadow: 5px 0px 20px rgb(101, 101, 101),
                      -5px 0px 20px rgb(101, 101, 101);
   -webkit-box-shadow: 5px 0px 20px rgb(101, 101, 101),
                      -5px 0px 20px rgb(101, 101, 101);
   box-shadow: 5px 0px 20px rgb(101, 101, 101),
              -5px 0px 20px rgb(101, 101, 101);
}

/* Header styles */
header {
   position: relative;
   height: 150px;
}

header div {
   position: absolute;
   top: 10px;
   right: 10px;
   color: white;
   text-align: right;
   font-size: 12px;
}

header div input {
   font-size: 12px;
   text-align: left;
}

/* Navigation Styles */

nav.horizontal {
   margin-top: -3px;
}

nav.horizontal ul {
   height: 40px;
   background-color: rgb(215, 0, 0);
}

nav.horizontal ul li {
   padding: 0px;
   float: left;
   width: 13%;
   line-height: 20px;
   height: 30px;
}

nav.horizontal ul li a {
   display:block;
   text-align: center;
   width: 100%;
   font-size: 14px;
   text-decoration: none;
   color: white;
}

nav.horizontal ul li:hover {
   background-color: rgb(171, 171, 231);
   background-color: rgba(255, 255, 255, 0.4);

}


/* Article styles */

article {
  width: auto;
   border-left: 1px solid black;
   background-color: white;
}

article hgroup {
   background-color: rgb(101, 101, 101);
   color: white;
   margin: 0px;
}

article h1 {
   font-size: 30px;
   font-weight: normal;
   letter-spacing: 5px;
   padding: 5px 0px 0px 15px;
}

article h2 {
   font-size: 20px;
   font-weight: normal;
   padding: 0px 0px 10px 15px;
}

article div#fontbuttons {
   float: right;
   font-size: 12px;
   margin: 10px 10px 0px 0px;
}


article figure {
   float: right;
   margin: 10px;
}

article p {
   font-family: 'Century Gothic', Times, serif;
   margin: 15px;
}

/* Footer Styles */
footer address{
  font-size: 0.9em;
  font-style: italic;
  color: black;
  text-align: center;
  margin-top: auto;
  height: auto;
}

/* Elastically Sized Objects in the Web Page */

article figure img {
   float: left;
   width: 20em;
 }

article p {
  font-size: 1em;
}
