/* General body styling */
body
{
   padding:0;
   background-color:#000;
   color:#fff;
   font-size:62.5%;
   font-family:Arial, Helvetica, sans-serif;

   max-width: 600px;
   margin: 0 auto;
}

/* Style the site logo */
h1
{
   font-family: 'Nosifer', cursive;
   text-align:center;
   color:#ff9900;
   font-size:300%;
}

/* Hide navigational bullets */
nav ul
{
  list-style-type:none;
  padding:0;
  margin:0;
}

/* Style navigational links */
nav li a
{
   /* Typography */
   font-family:'Creepster', cursive;
   font-size:200%;
   color:black;
   line-height:30px;
   text-decoration:none;
   
   /* Dimensions */
   display:block;
   margin:1%;
   padding:15px 0;

   /* Link icons */
   background-color:white;
   padding-left:80px;
   background-image:url('../images/sprites.png');
   background-repeat:no-repeat;
   
   /* Rounded corners */
   border-radius: 5px;

   /* Link transitions (background color and transform only) */
   -webkit-transition:background-color .5s, transform 1s;
   -moz-transition:background-color .5s, transform 1s;
   -o-transition:background-color .5s, transform 1s;
   -ms-transition:background-color .5s, transform 1s;
   transition:background-color .5s, transform 1s;
}

/* Position specific icons (using sprite img) */
nav li a#monsters     { background-position:5px 0; }
nav li a#casper       { background-position:5px -120px; }
nav li a#sleepyHollow { background-position:5px -240px; ; }
nav li a#wolfman      { background-position:5px -360px; ; }
nav li a#walkingDead  { background-position:5px -480px; ; }
nav li a#nightmare    { background-position:5px -600px; ; }
nav li a#saw          { background-position:5px -720px; ; }

/* Background color change on hover */
nav li a:hover
{
   background-color:#ff9900;
   
   /* Adjust the size of the element to 110% of its original size. */
   transform: scale(1.1);
}

/* Icon change on hover */
nav li a#monsters:hover     { background-position:5px -60px; }
nav li a#casper:hover       { background-position:5px -180px; }
nav li a#sleepyHollow:hover { background-position:5px -300px; ; }
nav li a#wolfman:hover      { background-position:5px -420px; ; }
nav li a#walkingDead:hover  { background-position:5px -540px; ; }
nav li a#nightmare:hover    { background-position:5px -660px; ; }
nav li a#saw:hover          { background-position:5px -780px; ; }

/* Style the footer */
footer
{
   font-size:150%;
   text-align:center;
   color:white;
   padding:.5%;
}

footer a { color:white; }