/*
   New Perspectives on HTML and CSS
   Tutorial 8
   Case Problem 2

   Mobile Styles
   Author: David Katelansky
   Date:   07/10/2015

   Filename:         wcmobile.css
   Supporting Files: 

*/

body
{
   background-color: rgb(107, 140, 80);
}

header nav, header img, #main, aside, footer
{
   display: none;
}

header
{
   background-color: rgb(151, 201, 151);
   background-image: url("willet.jpg");
   background-position: left center;
   background-repeat: no-repeat;
   background-size: contain;
   width: 100%;
   height: 50px;
}

#holes
{
   width: 100%;
}

#holes h1
{
   font-size: 25px;
   color: white;
   margin: 15px;
   text-align: center;
}

#holes li
{
   display: block;
   background-image: url("arrow.png");
   background-position: right center;
   background-repeat: no-repeat;
   width: 60%;
   height: 50px;
   margin: 5px auto;
   border: 1px solid white;
   border-radius: 10px;
   
   -moz-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;
   -webkit-box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;
   box-shadow: inset rgba(51, 51, 51, 0.5) 10px -5px 20px;
}

#holes li a
{
   display: block;
   width: 100%;
   line-height: 50px;
   color: white;
   text-align: center;
}

#holes li:nth-of-type(odd)
{
   background-color: rgb(187, 105, 123);
}

#holes li:nth-of-type(even)
{
   background-color: rgb(150, 80, 100);
}

/* Mobile styles under landscape orientation */
@media screen and (orientation: landscape)
{
   #holes li
    {
	  width: 30%;
	  float: left;
	  margin: 5px;
  }
}