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

   Willet Creek Layout Style Sheet

   Filename:         wclayout.css
   Supporting Files: 

*/

html {
   background-color: rgb(111, 139, 94);
}

body {
   background: white url(wcback.png) top right no-repeat;
   outline: 1px solid rgb(51, 92, 51);
   float: none;
   margin: 0px auto;
   width: 90%;
   max-width: 1000px;
   min-width: 800px;
}


header {
   height: 100px;
   border: 1px solid rgb(95, 112, 82);
}

header nav.horizontal {
   width: 100%;
}

header nav.horizontal li {
   background-color: rgb(65, 82, 52);
   display: block;
   float: left;
   width: 14.28%;
   outline: 1px solid black;
   text-align: center;
}

header nav.horizontal li a {
   color: white;
   font-size: 14px;
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   letter-spacing: 1px;
}

#holes {
   background: url(gray.png) repeat;
   width: 15%;
   float: left;
   padding-bottom: 30px;
}

#holes h1 {
   width: 85%;
   padding-left: 15%;
   font-size: 16px;
   font-weight: bold;
   background-color: rgb(229, 144, 160);
   color: white;
   line-height: 200%;
   margin-bottom: 20px;
}


#holes li {
   line-height: 2em;
   margin-left: 15%;
}

#holes li a {
   color: rgb(241, 255, 241);
   font-size: 14px;
}


#main {
   width: 58%;
   margin-left: 2%;
   float: left;
   padding-bottom: 20px;
}

#main p {
   font-size: 16px;
   margin: 20px 0px 0px 0px;
}

#main h2 {
   font-size: 18px;
   color: rgb(101, 101, 101);
   letter-spacing: 3px;
   margin: 20px 0px 0px 0px;
}

aside {
   width: 25%;
   float: left;
}

aside div {
   width: 90%;
   margin: 30px 4.9%;

   border: 1px solid rgb(101, 151, 101);

   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
}


aside #div1 {
   margin-top: 120px;
}

aside div h1 {
   font-size: 16px;
   line-height: 2em;
   text-align: center;
   border-bottom: 1px solid rgb(101, 151, 101);
   border-radius: 15px 15px 0px 0px;
}

aside div p {
   font-size: 14px;
   margin: 10px;
   text-align: center;
}

#div1 h1 {
   background-color: rgb(88, 87, 255);
   color: rgb(241, 255, 241);
}

#div1 {
   background-color: rgb(158, 158, 255);
}

#div2 h1 {
   background-color: rgb(128, 128, 0);
   color: rgb(241, 255, 241);
}

#div2 {
   background-color: rgb(228, 228, 30);
}

#div3 h1 {
   background-color: rgb(207, 66, 207);
   color: rgb(241, 255, 241);
}

#div3 {
   background-color: rgb(232, 156, 232);
}

#div4 h1 {
   background-color: rgb(103, 160, 103);
   color: rgb(241, 255, 241);
}

#div4 {
   background-color: rgb(172, 204, 172);
}



footer {
   clear: left;
   border-top: solid 1px rgb(101, 151, 101);
   text-align: center;
   font-size: 10px;
   font-variant: small-caps;
   color: rgb(101, 101, 101);
   padding: 10px 0px;
}