@charset "utf-8";
/*
   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
   Tutorial 13
   Case Problem 2
   

   DeLong Enterprises Layout Style Sheet

   Filename: dl_layout.css
   
*/


/* HTML and Body Styles */

html {
   background: white;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
}

body {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;   
   background: white;
   max-width: 1024px;
   min-width: 420px;
   margin: 0px auto;
   border: 1px solid rgb(221, 221, 221);
}





/* Header Styles */

header {
   border-bottom: 1px solid rgb(41, 170, 226);
}

body > header {
   width: 100%;   
}

img#logoImg {
   display: block;
   width: 100%;
}



/* Horizontal Navigation Styles */

nav.horizontal ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
   background-color: rgb(91, 151, 213);
   height: 40px;
}
   
nav.horizontal ul li {
   -webkit-flex: 0 1 80px;
   flex: 0 1 80px;   
   margin: 10px;
}

nav.horizontal ul li a {
   color: rgb(74, 50, 6);
   display: block;
   font-size: 1.2em;
   text-align: center;
   padding: 50% 0%;
}

nav.horizontal ul li a:hover, nav.horizontal ul li a:active {
   color: rgb(211, 211, 211);
   text-shadow: 0px 0px 2px black, 0px 0px 8px black;
}




/* Section Styles */

section {
   padding: 20px;
   width: 100%;
}

section h1 {
   font-size: 2em;
   letter-spacing: 0.3em;
   line-height: 1em;
   margin-bottom: 20px;
}

section p {
   font-size: 1.2em;
   line-height: 1.4em;
   margin-bottom: 15px;
}
/* Table Styles */

table {
   margin: 15px 0px;
   border-collapse: separate;
   width: 95%;
}


td {
   vertical-align: top;
   border: 1px solid rgb(101, 131, 181);
   font-weight: normal;
   height: 30px;
}

table#empInfo {
   clear: left;
}
table#empInfo caption {
   font-size: 1.7em;
   text-align: right;
   caption-side: top;
   margin: 10px 0px 15px 0px;
}

table#empInfo th {
   background-color: rgb(91, 151, 213);
   color: white;
   font-weight: normal;
}

table#empInfo input {
   border: none;
   width: 98%;
   margin: 1%;
   background-color: rgb(231, 231, 231);
   display: block;
   height: 80%
}

table#empInfo tr:first-of-type th:nth-of-type(3), table#empInfo tr:nth-of-type(2) td:nth-of-type(3) {
   width: 4em;
}

table#travelSummary {
   width: 55%;
   float: left;
}

aside {
   width: 40%;
   float: left;
   margin-left: 30px;
   font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

table#travelSummary th {
   background-color: rgb(91, 151, 213);
   color: white;
   font-weight: normal;
   height: 30px;
}

table#travelSummary td {
   width: 100%;
   padding: 12px;
}

table#travelSummary textarea {
   width: 100%;
   height: 150px;
   font-size: 1em;
   color: rgb(51, 81, 121);
   display: block;
}

table#travelExp th {
   background-color: rgb(91, 151, 213);
   color: white;
   font-weight: normal;
   height: 30px;
}

table#travelExp input {
   border: none;
   width: 94%;
   margin: 1%;
   background-color: rgb(231, 231, 231);
   display: block;
   height: 80%;
   padding-right: 3px;
   text-align: right;
}

table#travelExp tfoot::before
{
  content: '';
  display: block;
  height: 6px;

}

input[type="submit"] {
   display: block;
   width: 120px;
   height: 40px;
   margin: 10px auto;
   background-color: rgb(101, 141, 181);
   border-radius: 10px;
   color: white;
}

table#empInfo input:invalid, table#travelSummary textarea:invalid {
   color: red;
   background-color: rgba(237,231,148,1.00);
}


/* Footer Styles */

footer {
   width: 100%;
}

/* Vertical Navigation Styles */

nav.vertical {
   background-color: rgba(228, 114, 35, 0.5);
   padding: 20px;
   width: 100%;
}

nav.vertical ul {
   -webkit-column-count: 5;
   column-count: 5;
}


nav.vertical ul li {
   line-height: 1.8em;
}

nav.vertical ul li a {
   color: rgb(61, 61, 61);
}

nav.vertical ul li a:hover {
   text-decoration: underline;
}

footer p {
   color: rgb(211, 211, 211);
   font-size: 0.9em;
   text-align: center;
   background-color: rgb(0, 113, 187);
   margin: 0px;
   padding: 10px 0px;
}