/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     font-family: Arial, sans-serif;
     font-size: 14px;
     width: 960px;
     margin: 0 auto;
}

body em {
	font-style: italic; /* reverts style.css for italics */
}

/******************************************
/* HEADER                   
/*******************************************/

header {
     padding-left: 110px;
}

header h1 {
     font-size: 64px;
     padding: 16px 10px;
}

header h2 {
     padding: 10px;
     font-size: 32px;
     border-top: 5px solid #B5182A;
     border-bottom: 5px solid #B5182A;
     width: 650px;
}

/******************************************
/* NAV                  
/*******************************************/

nav {
     width: 100px;
     float: left;
     position: relative;
     top: -62px;
     margin-right: 10px;
     border-top: 5px solid #B5182A;
}

.selected {
     background-color: #C4FAA2;
}

nav ul li:hover {
     background-color: #81E046;
}

nav ul li a {
     display: block;
     width: 100px;
     height: 30px;
     padding-left: 5px;
     padding-top: 7px;
     text-decoration: none;
     color: black;
}

/******************************************
/* MAIN                  
/*******************************************/

main {
     width: 650px;
     float: left;
     padding-top: 12px;
}

main section {
     padding-left: 10px;
}

main section h3 {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 10px;
     line-height: 1.4;
}

main section h4 {
     font-weight: bold;
     font-size: 14px;
	 color: dimgray;
     margin-bottom: 10px;
     line-height: 1.4;
}

main section blockquote {
	 margin-bottom: 20px;
	 line-height: 1.4;
	 font-style: italic;
}

main section p {
     margin-bottom: 20px;
     line-height: 1.4;
}

main section ul {
     list-style-type: disc;
     padding-left: 15px;
     margin-bottom: 20px;
}

main section ul li {
     margin-bottom: 5px;
     line-height: 1.4;
}

main section.special {
     border-top: 5px solid #B5182A;
     padding-top: 15px;
}

main section.special a {
     color: #00B0F0;
}

/******************************************
/* FOOTER               
/*******************************************/

footer {
     width: 190px;
     float: left;
     position: relative;
     top: -114px;
     margin-left: 10px;
}

footer h3 {
     font-size: 32px;
}

div.picture {
     margin-top: 52px; /* Reduce to 20px if adding back h3 */
     padding-top: 10px;
     border-top: 5px solid #B5182A;
     padding-bottom: 10px;
     border-bottom: 5px solid #B5182A;
     width: 190px;
     height: 374px;
     background-image: url(../img/jbeatonprofile.png);
     background-position: 0px 10px;
     background-repeat: no-repeat;
}

/******************************************
/* MOBILE           
/*******************************************/

@media screen and (max-width: 500px) {

     body {
          width: 100%;
          min-width: 320px;
     }

     header {
          padding-left: 10px;
          padding-right: 10px;
          width: 100%;
     }

     header h1 {
          font-size: 48px;
     }

     header h2 {
          font-size: 24px;
          width: 100%;
     }

     nav {
          display: none;
     }

     main {
          width: 100%;
          padding-left: 10px;
          padding-right: 10px;
     }

     footer {
          width: 100%;
          position: static;
          margin-left: 0px;
          padding: 0px 10px 10px 10px;
     }

     footer h3 {
          display: none;
     }

     footer div.picture {
          width: 100%;
          margin-top: 0px;
          background-position: center;
     }
}