/*
   New Perspectives on HTML, CSS, and JavaScript
   Final Project
   
   Jen Green Professional Page
   Author: Jen Green
   Date: March 18, 2016

   Filename: green.css
*/

/* Import fonts */
@font-face {
   font-family: Header;
   src: url('headerfont.otf');
}


/* Page background color */
body {
background-color: #e6e6e6; /* light grey */
}


/* Header styles */
header {
   margin-bottom: 0px;
}

header p {
   background-color: #0aa6c4; /* light blue */
   color: white;
   font-family: Header, sans-serif;
   font-size: 120px;
   letter-spacing: 4px;
   margin: 0 auto;
   padding-top: 10px;
   text-align: center;
   width: 1100px;
}


/* Navigation styles */
#nav {
   background-color: #ffff66; /* yellow */
   font-family: Header, sans-serif;
   font-size: 35px;
   height: 40px;
   letter-spacing: 2px;
   margin: 0 auto;
   margin-top: 0;
   text-align: center;
   width: 1100px;
}

#nav ul {
   list-style-type: none;
   margin-top: 0px;
   padding-top: 2px;
}

#nav ul li {
   display: inline;
   padding-left: 35px;
   padding-right: 10px;
   text-align: center;
   vertical-align: middle;
}

#nav ul li:first-child {
   padding-left: 0px;
}

#nav ul li a {
   color: #0aa6c4; /* light blue */
   text-decoration: none;
   vertical-align: middle;
}

#nav ul li a:hover {
   color: white;
}


/* General page styles */
#mainContainer {
   background-color: white;
   font-family: Verdana, sans-serif;
   height: 500px;
   margin: 0 auto;
   padding-top: 5px;
   width: 1100px;
}

#mainContainer p {
   padding: 10px;
}

#mainContainer img {
   display: block;
   margin: 0 auto;
   padding: 10px;
}

#mainContainer ul li a {
   color: #0aa6c4; /* light blue */
   text-decoration: none;
}


/* Table styles */
table {
   margin: 0 auto;
}

table tr td {
   text-align: center;
}

table tr td img {
   height: 120px;
   width: 95px;
}

table tr td img.resize:hover {
   height: 400px;
   width: 375px;
}


/* Footer styles */
footer {
   background-color: #ffff66; /* yellow */
   color: #0aa6c4; /* light blue */
   font-family: Header, sans-serif;
   font-size: 20px;
   height: 20px;
   letter-spacing: 1px;
   margin: 0 auto;
   text-align: center;
   width: 1100px;
}


/* Form styles */
#contactInfo {
   margin: 0 auto;
   width: 70%;
}

#contactInfo label {
   display: block;
   width: 40%;

}

#contactInfo input {
   display: block;
   width: 50%;
}

#contactInfo input.button {
   display: inline;
   width: 100px;
}