/* OMG Red 1 is #a33c3d!  Triad blue is #3c3da3!  Complementary greenish is #3ca3a2! */
/* Title Yellow is rgba(227, 232, 59, .5) #e3e83b */
/*OMG Grey: #e4e4e2!  rgba(228, 228, 226, 1);  Slightly darker for hover: #dededc*/

html,body { height:100%; /* word-wrap: break-word; overflow-wrap: break-word; */}
body {margin: 0;
/* 	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: .9em; */
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 16px;
	background-color: white;
	}
	
.no-show {display: none !important;}
.clear {clear: both; visibility: hidden;}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
	}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.oblique {font-style: oblique;}
.underline {text-decoration: underline;}
.red {color: red;}
.omg-red {color: #a33c3d;}
.white {color: white;}
.dark-red {color: #923636;}

.break {word-break: break-word;
    word-wrap: break-word; /* This breaks everything. */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;}

a {/* color: #3c3da3 */ word-wrap: break-word;}
a:hover {color: #a33c3d;}
a:visited {/* color: #a33c71 */;}


#body-container{
	margin: 0 auto; /*centers page!*/
	padding: 0 20px 0 20px;
	display: flex;
	flex-flow: row wrap;
	max-width: 1600px;
	}
		@media only screen and (max-width: 1400px) { #body-container {padding: 0 18px 0 18px;} }
		@media only screen and (max-width: 1300px) { #body-container {padding: 0 16px 0 16px;} }
		@media only screen and (max-width: 1200px) { #body-container {padding: 0 14px 0 14px;} }
		@media only screen and (max-width: 1100px) { #body-container {padding: 0 12px 0 12px;} }
		@media only screen and (max-width: 1024px) { #body-container {padding: 0 .5% 0 .5%;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
		@media only screen and (max-width: 736px) { #body-container {padding: 0 0 0 0;}} /* iPhone 6+ Landscape, same as above */
	

/* START Page and Section Spacers! */
#elephant-column .spacer.top {height: 25px;}
#elephant-column .spacer.section {height: 60px;}
#elephant-column .spacer.bottom {height: 50px;}

#dragon-column .spacer.top {height: 25px;}
#dragon-column .spacer.section {height: 60px;}
#dragon-column .spacer.bottom {height: 50px;}

#rooster-column .spacer.top {height: 25px;}
#rooster-column .spacer.section {height: 60px;}
#rooster-column .spacer.bottom {height: 50px;}
/* END Page and Section Spacers! */

	
/* START COLUMN SPACERS! */
/* At least the far left one HAS TO BE THERE there for the IE FIX when a Flex: 1 colum is followed by two fixed width columns (page and list pages)!!! */ 
/* It can be 0 0 .01 for the smallest size, but 1px is fine (for potential lines!) */
#column-spacer1 {flex: 0 0 1px; order: 4;}	
#column-spacer2 {flex: 0 0 20px; order: 6;}
#column-spacer3 {flex: 0 0 20px; order: 8;}	
#column-spacer4 {flex: 0 0 1px; order: 10;}

.page #column-spacer3 {display: none;}

/*END COLUMN SPACERS!*/



/* --- OMG-STATUS / HEADER / SUPERHEADER / SUBHEADER / ANNOUNCEMENTS --- */

	.omg-status {order: -2; flex: 0 1 100%;}

	.superheader {
		order: -1; 
		flex: 0 1 100%; 
		background: black;
		}
	
	header {
		order: 1;  
		flex: 0 1 100%;
		display: flex;
		flex-flow: row wrap;
		height: 170px;
		}
		
		/* Shrinking height of header below 480px! */
		@media only screen and (max-width: 479px) { header {height: 75px;} }
	

	.subheader {
		order: 2; 
		flex: 0 1 100%; 
		background: black; 
		}
		

		
	.announcements {order: 3; flex: 0 1 100%;}
	
/* --- OMG-STATUS / HEADER / SUPERHEADER / SUBHEADER / ANNOUNCEMENTS --- */





/* START MAIN INDEX / PAGE-LIST CONTENT!!! */
#dragon-column {min-height: 300px; padding: 0 7px 0 7px;}

#elephant-column {padding: 0 7px 0 7px;}

#rooster-column {padding: 0 7px 0 7px;}
/* END MAIN CONTENT!!! */


/* START COLUMN COLORS! */
.page-elephant {background-color: #fafafa;}
.list-elephant {background-color: #fafafa;}
.list-rooster {background-color: #fafafa;}
/*  END COLUMN COLORS!  */




/* START FOOTER! */
footer {
	order: 11;
	flex: 0 1 100%;
	}
/* END FOOTER! */