/******^^^^^ GENERAL FORMATTING STYLES FOR CHUNKY WRITING LAYOUT ^^^^^***** */
/*
*	use in conjunction with | <meta name="viewport" content="width=device-width, initial-scale=1"> |
*	formatted text lies within |content| div
*	starts with basic layout
*/
body, * { margin:0; padding:0;}
.content { width: 80%; margin: auto auto;}
/* *** formatting *** */
/*	
*	grey - #3b3738			-	text color
*	red - #c53c0e			-	secondary color
*	lighter grey - #6d6667;	-	lighter text color
*/
/* header */
header  {text-align:center; margin-bottom:2em;}
header h1 {font-size: 4em; color: #c53c0e; margin-bottom:1em;}
/* general */
.content {color: #3b3738;}
.content, .formBasic input, .formBasic textarea, .formBasic select {font-family: Arial, Helvetica Neue, Helvetica, sans-serif;}
.content h1, .content h2,.content h3 {color: #c53c0e; letter-spacing:.05em; margin-bottom:.5em;}
.content p { padding-bottom: .75em; text-align: justify; line-height: 150%;}
/* divs & special classes */
.section {margin: 1em 0; clear: left;}
.content .start {text-align:right; clear:both;}
/* font sizes */
body { font-size: 20px;} /* = 1.25em */
.content h1 {font-size:3em;}
.content h2 {font-size: 1.5em;}
.content h3{font-size: 1em;}
.formBasic input, .formBasic textarea { font-size: 1em;}
.content a {font-size: 1em;}
.tableBasic td a {font-size: 1em; } /* keeps the link font size the same as general */
/* links */
.content a {text-decoration: none; color: #c53c0e;}
.content a:hover { opacity:.7;}
.content a:visited {color:#c53c0e;}
/* lists */
.content ul.bullets{padding-left: 1.5em;}
.content li {text-align: justify; padding-bottom: .75em;}
ul.noBullets {list-style-type: none; -webkit-margin-start:0;-webkit-padding-start:0; padding-left:0;}

/* forms */
.formBasic h2 { font-style: normal; margin:0 0 .5em 0; /* .5 = 30px as font-size = 2.5em */ text-align: center;}
.formBasic label, .formBasic input { display: inline-block; margin-bottom: 1em;}
.formBasic select {display: inline-block; margin-bottom: 1.5em; font-size: 1em;}
.formBasic option {font-size: 1em; padding: 1.5em 0;}
	/* - form widths - */
.formBasic {width: 24em;} /* label(5)+input(15)+ 4*/
.formBasic form {width: 100%;}
.formBasic label{width: 5em;}
.formBasic input {width: 15em;}
.formBasic input[type=submit] {width: 6em; margin-left: 17em;}
.formBasic input[type=number] {width: 7em;}
.formBasic input[type=date] {width: 10em;}
.formBasic input{padding: .5em 1em; border: none; border-bottom: solid #3b3738 1px; }
.formBasic select {padding: 1em 1em;}
.formBasic input[type=submit] { border: none; border-radius: 1em; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 1em 1em;  color: white; background-color:#3b3738; cursor: pointer;}
.formBasic input[type=submit]:hover {background-color: #6d6667;}
.formBasic input[type=submit]:active {opacity: .5;}
.formBasic p {margin-top: 0;}
.formBasic textarea { display: block; width: 22em; /* submit button & margin */ height: 11.5em; /* 1/2 width */ max-width: 96%; margin-bottom:1em; border: solid 1px #3b3738; padding: .5em .5em; color: #3b3738;}
/* tables */
img {
//	max-width: 100%;
	//max-height: auto;
}
.content .tableBasic {}
.tableBasic h2 {margin:0 0 1em 0;}
.tableBasic td, .tableBasic th {padding-right: 1em; padding-bottom: 1em;white-space: nowrap;}
/* images */
	/*basic img styles */
.imgBasic { max-width: 40%; height:auto; }
.imgCenter {  display: block; margin-left: auto; margin-right: auto;}
.imgRight {float: right; padding: 1em 0 1em 1em;}
.imgLeft {float: left; padding: 1em 1em 1em 0;}
.imgSmall {max-width: 33%;}
.imgXtraSmall {max-width: 20%;}
	/* multiple images across page */
.twoAcross, .threeAcross, .fourAcross {margin: 0 auto; text-align: center; clear:both;}
.twoAcross img, .threeAcross img, .fourAcross img {display:inline;}
.twoAcross img {max-width:42%;}
.threeAcross img {max-width:32%;}
.fourAcross img {max-width:23%;}
	/* images with captions - sized according to imgBasic*/
.imgCaption {max-width:40%;}
.imgCaptionLeft {float:left; margin-right:1em;}
.imgCaption img {min-width:100%;}
.imgCaption p {color:#c53c0e; clear:both;text-align:center;}
/* captions */
.content .captionCenter {text-align: center;}

/* *****^^^^^ RESPONSIVENESS ^^^^^***** */
@media screen and (max-width: 800px) {
	.content {width: 95%;}
}
@media screen and (max-width: 640px) {
	/* reduce font-sizes by 1/6th */
	body {font-size: 20px;}
	.content h1 {font-size:2.5em;}
	.content h2 {font-size: 2em;}
	.content h3{font-size: 1.66em;}
/* table */
	.tableBasic table {margin: 0 auto; text-align: center;}
	.tableBasic h2 {text-align: center;}
	.tableBasic td:last-child {padding-bottom: 2em;}
	.tableBasic td {display: block;}
}
@media screen and (max-width: 480px) {
/*  images */
	.imgRight {float: none; padding: 0; display:block; margin: 0 auto;}
	.imgLeft {float: none; padding: 0;display:block; margin: 0 auto;}
	.imgBasic { max-width: 100%; height:auto;}
	/* center the form */
	.formBasic {width:100%;}
	.formBasic input, .formBasic label, .formBasic select {display: block; width:85%;}
	.formBasic input, .formBasic input[type=submit], .formBasic select { margin-left: auto; margin-right:auto;}
	.formBasic label{text-align: center;}
}
//div {border: darkgreen solid 1px;}
.test { width:48px; height: 10em; background-color: green;}