/*
   New Perspectives on HTML
   Tutorial 2
   Case Problem 1

   Higher Ed Style Sheet
   Author: Adella Coronel
   Date:   3/1/2014

   Filename:         hestyles.css
   Supporting Files: none

*/

/* Section Styles */

html {
background-color: rgb(200, 200, 200);
}

body {
/*background-color: rgb(255, 255, 255);*/
background-color: rgb(150, 230, 250);
margin: 1px auto;
padding: 10px;
line-height: 1.5em;
width: 100%;
max-width: 1280px;
min-width: 250px;
font-family: Verdana, Geneva, sans-serif;
/*    background: rgb(150, 230, 250) url('pictures/seal.png') scroll center center no-repeat*/;
}

main {
   display: block;
   padding: 25px 0px 0px 0px;
}

header {
width: 100%;
text-align: left;
/*background-color: rgb(196, 59, 155);*/
background-color: rgb(150, 230, 250);
padding-bottom: 5px;
}

h1 {
font-weight: bold;
font-size: 2.0em;
color: rgb(0, 0, 0);
}

h2 {
font-weight: bold;
font-size: 1.5em;
color: rgb(0, 0, 0);
}

header div#logo {
display: block;
float: left;
width: 20%;

}


header nav.horizontal {
float: left;
height: 40px;
width: 90%;
padding-bottom: 15px;
}

header nav ul {
margin: 0px;
padding: 10px;
font-size: 0.8em;
}

header nav ul li {
display: block;
float: left;
width: 25%;
font-size:14px;
font-weight: bold;
height: 30px;
letter-spacing: 1px;
text-align: center;
padding-bottom: 10px;
border: 1px solid rgb(0, 0, 0);
list-style-type: none;\-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: rgb(60, 183, 250);
/*background-color: rgb(240, 245, 85);*/
line-height: 3em;
margin: 5px 0.5%;
}



header nav a{
color: rgb(0, 0, 0);
text-decoration: none;
}

header nav a:hover{
color: rgb(0, 100, 160);
text-decoration: underline;
}

header ul {
list-style-type: none;
}

main {
   clear: left;
}

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

section#center{
   float: left;
   width: 60%;
}

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

.auto-resizable-iframe {
  max-width: 560px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

footer {
   clear: left;
}

section#left nav.vertical {
   width: 80%;
   margin: 0px auto 20px;
   border: 1px solid rgb(221, 221, 221);

   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;
   background-color: rgb(60, 183, 250);
}

/*
section#left nav.vertical h2 {
   font-size: 14px;
   text-align: center;
   width 100%;
   color: white;
   background-color: rgb(22, 170, 167);
   -moz-border-radius: 25px 25px 0px 0px;
   -webkit-border-radius: 25px 25px 0px 0px;
   border-radius: 25px 25px 0px 0px;
}
*/

section#left nav.vertical ul {
   list-style-type: none;
   padding-left: 0;
}

section#left nav.vertical ul li {
   font-size: 12px;
   line-height: 2;
   margin: 5px 5px 5px 20px;
}

section#left nav.vertical ul li:last-of-type {
   margin-bottom: 20px;
}

section#left nav.vertical a {
   color: rgb(0, 0, 0);
   text-decoration: none;
}

section#left nav.vertical a:hover {
   text-decoration: underline;
}

section#center h1 {
   text-align: center;
}
section#center div {
   display: block;
   width: 100%;
   margin: 20px auto;
}

section#right h2 {
   padding-left: 10px;
}

section#right {
   display: block;
   margin: 20px auto;
}

section#right div {
   width: 75%;
   padding: 20px;
   border: 1px solid rgb(221, 221, 221);

   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;
   background-color: rgb(60, 183, 250);
}

footer {

display: block;
width: 100%;
font-size: 0.8em;
text-align: center;
font-variant: small-caps;
color: rgb(0, 0, 0);
border-top: 1px solid rgb(0, 0, 0);

}