@charset "utf-8";

/*HTML*/
html {
   padding-top:3%;
   padding-bottom: 3%;
   background:linear-gradient(white, black) no-repeat;
   max-height: 300%;
   min-height: 88%;
   max-width: 100%;
   min-width: 100%;
}


/*BODY*/
body {
   background-color: white;
   border:20px solid silver;
   font-family:'Courier New', Courier, monospace;
   margin-left:auto;
   margin-right:auto;
   max-width: 1150px;
   min-width: 1150px;
}


/*NAV*/
nav, nav ul, nav li {
   background: transparent;
   font-size: 100%;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
   box-sizing:border-box;
}

nav {
   clear:both;
}

nav::after {
   clear: both;
   content: "";
   display: table;
}

nav ul {
   list-style: none;
   list-style-image: none;
}

nav li {
   float: left;
   width: 16.667%;
   border: 1px solid silver;
}

nav a {
   display: block;
   text-align: center;
   text-decoration: none;
   padding: 10%;
}

nav > ul > li > a:link, nav > ul > li > a:visited {
   color: black;
   font-size: large;
   background: grey;
}

nav > ul > li > a:hover, nav > ul > li > a:active {
   color: black;
   background: rgb(231, 228, 18);
}


/*INDEX*/
body#intro h1 {
   margin-bottom: -2%;
}

body#intro h4 {
   color:grey;
}

body#intro h1, body#intro h4 {
   text-align: center;
}

body#intro img {
   width: 50%;
   float: left;
   margin-left: 2%;
}

p.icenter {
   display: block;
   text-align: center;
   float: left;
   width: 48%;
}

p.ileft {
   float: left;
   margin: 1%;
   width: 20%;
   text-align: right;
}

p.iright {
   float: left;
   margin: 1%;
   width: 20%;
}


/*RESUME*/
div.row {
   clear:both;
   padding:1%;
}

div.row::after{
   clear: both;
   content: "";
   display: table;
}

div [class^="col-"]
{
   float:left;
}

div.col-1-1 {width: 100%;}
div.col-1-3 {width: 25%;}
div.col-2-3 {width: 70%;}


/*CURRICULUM*/
table {
   padding: 1%;
   border-collapse: collapse;
   border: 2px solid silver;
}

caption {
   text-align: center;
   caption-side: top;
   padding:2%;
}

th, td {
   border: 2px solid silver;
   vertical-align: top;
 }

th.transp{
   border: transparent;
}

td > a {
   text-decoration: none;
   color:sienna;
}


/*ABOUT ME*/
body#about div{
   clear:both;
}

body#about div::after{
   clear: both;
   content: "";
   display: table;
}

body#about figure {
   border: grey solid 10px;
   background: grey;
}

body#about figcaption{
   text-align: center;
   color: white;
}

.aLeft {
   float: left;
   width: 45%; 
}

p.aLeft{
   margin-left: 1%;
}

.aRight {
   float: left;
   width: 45%; 
}

figure.aRight img {
   width: 100%;
}

figure.aLeft img{
   width: 100%;
}

.aH1 {
   padding-left: 16%;
}

.aH2 {
   padding-left: 69%;
}

.aH3 {
   padding-left: 15%;
}


/*MY FAMILY*/
body#family figure {
   border: 10px solid grey;
   background-color: grey;
   margin: 2% auto 0px; 
   width: 50%; 
}

body#family figure figcaption{
   padding: 5px; 
   text-align: center;
   color:white;
}

body#family figure img {
   display: block;
   width: 100%; 
}

body#family p {
   text-align: center;
   padding-left: 2%;
   padding-right: 2%;
   padding-top: 2%;
   margin-bottom: -1%;
}


/*MEMBERS*/
body.members h1, body.members h4 {
   text-align: center;
}

body.members h1 {
   margin-bottom: -2%;
}

body.members figcaption{
   padding: 5px; 
   text-align: center;
   color:white;
}

body.members figure {
   border: 10px solid grey;
   background-color: grey;
   margin: 2% auto 0px; 
   width: 40%; 
}

body.members figure img {
   display: block;
   width: 100%; 
}

body.members p {
   text-align: center;
   padding-left: 2%;
   padding-right: 2%;
   padding-top: 2%;
   margin-bottom: -1%;
}

body.members a{
   text-decoration: none;
}

body.members a:link, body.members a:visited {
   color: black;
   font-size: large;
}

body.members a:hover, body.members a:active {
   color: black;
   background: rgb(231, 228, 18);
}


/*CONTACT*/
body#contact > h1, body#contact > p {
   text-align: center;
}

body#contact form div{
   margin: 3%;
   margin-left: 20%;
}

input#fname {
   margin-left: 15%;
}

input#telNumber{
   margin-left: 8.5%;
}

input#email{
   margin-left: 19.5%;
}

textarea {
   height: 100px;
   width: 95%;
   margin-top: 2%;
}

body#contact div:last-child {
   text-align: center;
}

input#sumb, input#res {
   margin-right: 7%;
}

input:focus:valid, textarea:focus:valid{
   background: rgb(255,255,180);
}

input#fname:focus:valid, input#lname:focus:valid, input#email:focus:valid {
   background: rgb(220, 254, 255) url(../img/Contact_Me/checkMark.jpg) right /contain no-repeat;
}

input#fname:focus:invalid, input#lname:focus:invalid, input#email:focus:invalid {
   background: rgb(255,230,230) url(../img/Contact_Me/wrongMark.jpg) right /contain no-repeat;
}


/*FOOTER*/
footer {
   clear: both;
	text-align: center;
	padding: 5%;
   padding-bottom: 1%;
}

footer::after{
   clear: both;
   content: "";
   display: table;
}