/* Headlight Heroes - external stylesheet used by every page.
   Organization: 1) tag selectors (in page order), 2) ID selectors (in page order),
   3) custom classes, 4) media queries (mobile first, larger screens last). */

/* ===================== 1. TAG SELECTORS (page order) ===================== */
* {box-sizing:border-box;}

/* page container: width + auto margin centers the page, but not the text */
body {width:98%; margin:auto; background-color:#f2f2f2; font-family:Tahoma, Geneva, sans-serif;}

/* masthead */
header {background-color:#0a1a33; background-image:url('images/header-bg.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; padding:20px; border-radius:6px 6px 0 0;}
h1 {color:#ffffff; text-align:center; font-family:Arial, Helvetica, sans-serif;}
h2 {color:#036; text-align:center; font-family:Arial, Helvetica, sans-serif;}
header h2, footer h2 {color:#fff;}

/* navigation: normal, hover, and (in the class section) selected */
nav {text-align:center; padding:12px; background-color:#CCF; font-size:1.5em;}
nav ul {list-style:none; margin:0; padding:0;}
nav li {display:block; padding:6px 0;}
nav a {display:block; color:#036; text-decoration:none; font-weight:bold; font-variant:small-caps; letter-spacing:1px; padding:4px 8px; border-radius:4px; transition:background-color 0.3s ease, color 0.3s ease;}
nav a:hover {color:#fff; background-color:#036;}

/* page content */
p {font-size:16px; line-height:1.5; color:#222;}
img {max-width:100%; height:auto; display:block;}
blockquote {text-align:justify; line-height:1.6; margin:15px 20px;}
blockquote:first-letter {font-size:2.2em; font-weight:bold; color:#900;}
address {font-style:normal;}
abbr {border-bottom:1px dotted #036; cursor:help;}
small {color:#555;}
dl dt {font-weight:bold; color:#036; margin-top:10px;}
dl dd {margin-left:24px; line-height:1.5;}

/* contact page table */
table {width:90%; max-width:650px; margin:20px auto; border-collapse:collapse; border:2px solid #036; background-color:#fff;}
th {text-align:center; background-color:#036; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:1.3em;}
td, th {border:1px solid #036; padding:10px;}

/* contact form controls */
fieldset {border:0; margin:0; padding:0;}
input[type="text"], input[type="email"], select, textarea {width:100%; padding:8px; border:1px solid #888; border-radius:4px; font-family:inherit; font-size:1rem;}
textarea {resize:vertical;}
input:focus, select:focus, textarea:focus {outline:2px solid #900;}
input[type="submit"], input[type="reset"] {color:#fff; border:0; border-radius:4px; padding:10px 24px; margin:2px 6px 2px 0; font-size:1rem; font-weight:bold; cursor:pointer; transition:background-color 0.3s ease;}
input[type="submit"] {background-color:#900;}
input[type="reset"] {background-color:#036;}
input[type="submit"]:hover, input[type="reset"]:hover {background-color:#333;}

/* footer */
footer {color:#fff; background-color:#369; font-size:14px; text-align:center; padding:15px; border-radius:0 0 6px 6px;}
footer a {color:#fff;}

/* ===================== 2. ID SELECTORS (page order) ===================== */
#wrapper {background-color:#fff; border:2px solid #036; padding:0 0 10px 0;}
header img#logo {max-width:220px; margin:0 auto 10px auto;}
section#gallery {padding:15px; text-align:center;}
#figureContainer {text-align:center; padding:10px 0;}
#figureContainer figure {display:inline-block; width:450px; max-width:calc(100% - 16px); margin:8px; text-align:center; vertical-align:top;}
#figureContainer figure img {width:100%; border:3px solid #036; border-radius:6px;}
#figureContainer figcaption {font-size:0.95em; color:#333; padding-top:6px; line-height:1.4;}
#social {background-color:#eee; padding:10px; text-align:center; border-top:1px solid #ccc;}

/* ===================== 3. CLASS SELECTORS ===================== */
/* navigation: selected page (placed after nav a:hover so it stays red on hover) */
nav a.selected {color:#fff; background-color:#900;}

/* shared */
.important {color:#0a6e0a; font-weight:bold;}
.highlight {color:#630a63;}

/* home page gallery */
.gallery-pair {display:inline-block; width:45%; margin:10px 2%; vertical-align:top;}
.gallery-pair img {border:2px solid #036; border-radius:4px; margin:0 auto;}
.gallery-caption {font-size:14px; color:#555; margin-top:4px;}

/* resume page (stacked on phones) */
main.resume {display:block; padding:15px;}
main.resume aside {padding:14px; text-align:left;}
main.resume section {padding:14px; text-align:left;}
main.resume h2 {text-align:left; border-bottom:2px solid #036; padding-bottom:4px;}
main.resume ul {padding-left:20px;}
main.resume li {margin-bottom:4px;}
main.resume .clearfix {clear:both;}
.job-title {font-weight:bold;}
.job-dates {color:#555; font-style:italic;}
.transcript-link {text-align:center; font-size:1.1em; padding:10px;}

/* transcript page */
main.transcript {padding:15px;}
main.transcript section {width:90%; margin:0 auto; padding:10px 0;}
main.transcript h2 {text-align:left; border-bottom:2px solid #036; padding-bottom:4px;}
ul.courses {list-style-type:square; font-size:1.1em; line-height:1.6;}
ul.professors {list-style-image:url(images/bullet.png); font-size:1.1em; line-height:1.6;}
ol.references {list-style-type:upper-roman; font-size:1.1em; line-height:1.6;}
.special {color:purple; font-weight:bold; font-size:1.3em;}

/* portfolio page */
main.portfolio {padding:15px 5px;}
main.portfolio h2 {border-bottom:2px solid #036; padding-bottom:4px;}
main.portfolio > p {text-align:center; max-width:700px; margin:10px auto;}

/* newsletter page */
main.newsletter {padding:15px 20px;}
main.newsletter h2 {font-family:Georgia, "Times New Roman", serif; color:#900; text-align:left;}
main.newsletter p {text-align:justify; line-height:1.6;}
.byline {text-align:center; font-style:italic; color:#555; margin:0;}
main.newsletter hr {width:80%; height:0; border:4px solid #036; border-radius:6px; margin:12px auto;}
.infobar {background-color:#036; color:#fff; text-align:center; font-weight:bold; font-size:1.2em; letter-spacing:1px; padding:10px; margin:20px 0;}
.box {border:2px solid #036; border-radius:8px; background-color:#f4f8ff; padding:15px 20px; margin:20px auto; max-width:700px; box-shadow:4px 4px 10px rgba(0,0,0,0.3);}
.box h2 {text-align:center; margin-top:0;}
ul.tips {list-style-image:url(images/bullet.png); line-height:1.7;}
.news-photos {text-align:center;}
.news-photos figure {display:inline-block; width:240px; max-width:calc(100% - 16px); margin:8px; vertical-align:top;}
.news-photos img {width:100%; border:3px solid #036; border-radius:6px;}
.news-photos figcaption {font-size:0.95em; color:#333; padding-top:6px;}

/* contact page table */
main.contact {padding:15px 5px;}
main.contact > p {text-align:center; max-width:650px; margin:10px auto;}
.label {width:35%; text-align:right; font-weight:bold; vertical-align:top;}
.choices label {display:inline-block; margin-right:16px;}
.sr-only {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.hp {position:absolute; left:-9999px;}
.required {color:#c00; font-weight:bold;}

/* ===================== 4. MEDIA QUERIES (last) ===================== */
/* tablets and larger: nav goes horizontal, resume goes to 2 columns */
@media only screen and (min-width:720px){
   nav a {display:inline;}
   nav li {display:inline; padding:0 10px;}
   main.resume aside {width:30%; float:left;}
   main.resume section {width:68%; float:right;}
} /* Close 720 Media Query for larger screens */

/* desktop: cap the page width */
@media only screen and (min-width:1000px){
   body {max-width:1000px;}
} /* Close 1000 Media Query */