/* HTML Elements */


header {
	text-align: center;
	font-size: 36px;
	background-color: rgba(51, 102, 137, .7);
	padding: 20px;
}

header span.author {
	color: white;
	/*color: red;*/
}

header span.writing {
	color: rgb(121, 211, 254);
}

h1, h2, h3, h4, h5, h6 {
	color: rgb(51, 102, 137);
}


table {
	border-collapse: collapse;
}

/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}

th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

th:first-child,
td:first-child {
  padding-left: 6px; }

th:last-child,
td:last-child {
  padding-right: 6px; }

figcaption {
	height: 30px;
	padding: 20px;
	border-top: 1px solid black;
	background-color: rgb(51, 102, 137);
	color: white;
}

ul {
	list-style: square inside;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1rem 0 1rem 3rem;
  font-size: 100%; }

 /* li {
  	font-size:  100%;
  }*/

#hero {
	text-align: left;
}

#hero p, #hero li, #hero h1 {
	width: 75%;
	vertical-align: center;
	color: white;
	margin: 0 auto;
	max-width:  800px;
	min-width: 300px;
}

#hero h1 {
	text-align: center;
}

#hero li {
	font-size:  1.8rem/
}


#writing-portfolio {
	background-color: white;
}

#writing-portfolio p, #writing-portfolio h1, #writing-portfolio h2, #writing-portfolio h3, #writing-portfolio h4, #writing-portfolio h5, #writing-portfolio h6, #writing-portfolio li, 
figure {
	width: 75%;
	vertical-align: center;
	margin: 0 auto;
	max-width:  800px;
	min-width: 300px;
	padding-bottom: 2rem;
}

/*#writing-portfolio h1 { font-size: 2.0rem; }
#writing-portfolio h2 { font-size: 1.8rem; }
#writing-portfolio h3 { font-size: 1.5rem; }
#writing-portfolio h4 { font-size: 1.2rem; }
#writing-portfolio h5 { font-size: 0.9rem; }
#writing-portfolio h6 { font-size: 0.75rem; }*/

#hero-portfolio ul, #hero-portfolio li {
	padding-bottom:  0;
	font-size: 1.8rem;
}

#writing-portfolio li{
	padding-bottom:  0;
	font-size: 1.8rem;
}

#writing-portfolio table {
	width: 75%;
	vertical-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
	max-width:  800px;
	min-width: 300px;
}


#portfolio-writing h1 {
	font-size: 2rem;
}

.serious-issue {
	color: red;
	font-weight: bold;
}

.moderate-issue {
	color: purple;
	font-weight:  bold;
}

.minor-issue {
	color: blue;
	font-weight:  bold;
}

.validation-image {
	max-width:  800px;
	min-width: 300px;
	border: 1px solid black;
	vertical-align: center;
}

.plain {
	border: none;
}

.plain figcaption {
	height: auto;
	padding: 0;
	padding-top: 10px;
	background: none;
	color: black;
}

.validation-image img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}

.box {
	border: 1px solid black;
	background-color: LightGray;
	padding: 10px;
	padding-left: 0;
	vertical-align: center;
	margin: 0 auto;
	max-width:  800px;
	min-width: 300px;
}

.box ol{
	margin-left: -20px;
}

.box pre {
	padding-left: 10px;
}

section .box {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Media queries */

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

		tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		position: relative;
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left:  50%;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 35%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	td:first-child {
 		 padding-left: 50%; 
 	}

	/*
	Label the data - each table needs unique id and section here!
	*/

		.terminology td:nth-of-type(1):before { content: "Term:"; }
		.terminology td:nth-of-type(2):before { content: "Definition:"; }

		#dbconnect-maintenance td:nth-of-type(1):before { content: "Maintenance Task"; }
		#dbconnect-maintenance td:nth-of-type(2):before { content: "Estimated Hours"; }
		#dbconnect-maintenance td:nth-of-type(3):before { content: "First Name"; }
		#dbconnect-maintenance td:nth-of-type(4):before { content: "Assigned To"; }

		#usability-subjects td:nth-of-type(1):before { content: "Participant's Agency:"; }
		#usability-subjects td:nth-of-type(2):before { content: "Job Role:"; }
		#usability-subjects td:nth-of-type(3):before { content: "EPAS Familiarity:"; }
		#usability-subjects td:nth-of-type(4):before { content: "City:"; }
		#usability-subjects td:nth-of-type(5):before { content: "State:"; }

		
	
}