/* START HEADER! */
header > .left {order: 1; 
	flex: 0 1 200px;
	background-image: url("../uploads/backgrounds/animated-laser/animated-left.gif"), 
		url("../uploads/backgrounds/animated-laser/static-left.png");
	background-repeat: no-repeat, no-repeat;
	background-position: right center, right center;
	}
header > .middle {order: 2; 
	flex: 1;
	background-image: url("../uploads/backgrounds/animated-laser/animated-middle.gif"),
		url("../uploads/backgrounds/animated-laser/static-middle.png");
	background-repeat: repeat-x, repeat-x;
	background-position: left center, left center;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	}
header > .right {order: 3;
	flex: 0 1 200px;
	background-image: url("../uploads/backgrounds/animated-laser/animated-right.gif"),
		url("../uploads/backgrounds/animated-laser/static-right.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left center, left center;
	}
	
	
#mobile-header-text {
		order: 3; 
		flex: 0 1 100%;
		background: #a33c3d;
		color: white;
		font-weight: bold;
		padding: 5px 10px;
		text-align: center;
		font-size: .8em;
		text-shadow: 3px 3px 5px rgba(0,0,0, .25);
		line-height: 1em;
		}
#mobile-header-text a {color: white; font-size: .7em;}
#mobile-header-text a:hover {color: #e3e83b;}

			/* mobile text div disappears at 480px!*/
			@media only screen and (min-width: 480px) { #mobile-header-text {display: none;} }


		/* Animated Laser Background Space! */
		@media only screen and (max-width: 1200px) { header > .left, header > .right {flex: 0 1 175px;} }
		@media only screen and (max-width: 1100px) { header > .left, header > .right {flex: 0 1 162.5px;} }
		@media only screen and (max-width: 1024px) { header > .left, header > .right {flex: 0 1 150px;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
		@media only screen and (max-width: 768px) { header > .right {flex: 0 1 10px; background-image: none;}  }
		
		/* Narrowing of Laser Background at 479 and below! */
		@media only screen and (max-width: 479px) {
		header > .left, header > .middle {background-size: auto 75px;}
		header > .left {flex: 0 1 75px;} 

	
		}


/* OverMachoGrande Logo! Visible at 480px and up!*/	
	header > .middle > .top {
		order: 1;
		height: 85px;
		width: 100%;
		background-image: url("../uploads/graphics/overmachogrande-logo.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 80%;
		}
			@media only screen and (max-width: 1400px){header > .middle > .top {background-size: 100%; }}
			@media only screen and (max-width: 1024px){header > .middle > .top {background-size: 120%; }}
			@media only screen and (max-width: 768px){}
			@media only screen and (max-width: 650px){ header > .middle > .top {background-size: 130%; } }
			
			/* Shrinking and centering logo! */
			@media only screen and (max-width: 479px) { header > .middle > .top {height: auto; 
			background-position: center 43%;}		}

			
/* MAIN SITE HEADER TEXT!!! Visible at 480px and up!*/				
	header > .middle > .bottom  {order: 2; text-align: center;}
	header > .middle > .bottom  {
		font-size: 1.3em; 
		font-weight: bold; 
		text-shadow: 3px 3px 5px rgba(0,0,0, .25);
		}
			@media only screen and (max-width: 1300px) { header > .middle > .bottom   {font-size: 1.2em;} }
			@media only screen and (max-width: 1250px) { header > .middle > .bottom   {font-size: 1.1em;} }
			@media only screen and (max-width: 1100px) { header > .middle > .bottom   {font-size: 1.0em;} }
			@media only screen and (max-width: 1024px) { header > .middle > .bottom   {font-size: .9em;} } 
			@media only screen and (max-width: 850px) { header > .middle > .bottom   {font-size: 1.0em;} } 
			@media only screen and (max-width: 810px) {  header > .middle > .bottom   {font-size: .9em;} } 
			@media only screen and (max-width: 755px) {  header > .middle > .bottom   {font-size: .85em;} } 
			@media only screen and (max-width: 736px) { header > .middle > .bottom   {font-size: 1em;} } /* iPhone 6+ Landscape, same as above */
			@media only screen and (max-width: 667px) {  } /* iPhone 5/6 Landscape, same as above */
			@media only screen and (max-width: 650px) { header > .middle > .bottom   {font-size: .9em;} } /* One column everywhere */		
			@media only screen and (max-width: 479px) { header > .middle > .bottom{display: none;} }
/* END HEADER */


/* START SUPERHEADER!!! */
	section.superheader {margin-top: 10px;}
	
	/*Site time appears at 568px (iPhone 5 portrait) and above!*/
	#site-time {}
		@media only screen and (max-width: 567px) { #site-time {display: none;} }
		
	/*Email OMG is always visible*/
	#email-omg {}

	/* google_translate_element appears at 480px (iphone landscape) and above */
	#google_translate_element {letter-spacing: 0 !important; font-weight: normal !important; }
		/* @media only screen and (max-width: 479px) { #google_translate_element {display: none;} } */
	
	/* search-submit appears at 480px (iphone landscape) and above */
	#search-submit {
		background: transparent url('../uploads/icons/magnifying-glass-white(20x20).png'); 
		border: none;
		height: 20px; width: 20px;
		cursor: pointer;
		}
		@media only screen and (max-width: 479px) { #site-search {display: none;} }
	
	.superheader .item {padding: 0 10px 0 0;}
	.superheader .desktop {display: inline-block;}
	.superheader .mobile {display: none;}

		/* APPEARANCE OF THE MAGNIFYING GLASS!!! */
			@media only screen and (max-width: 1024px) { 
				.superheader .desktop {display: none;}
				.superheader .mobile {display: block; cursor: pointer;}
				.superheader .item {padding: 0 5px 0 0;} }
		
/* END SUPERHEADER!!! */



/* START SUBHEADER!!!  768 is iPad portrait, so this is where the graphic starts! */

	#menu-icon {
		display: none;
		width: 75px;
		height: 28px;
		background: url("../uploads/icons/menu(80x30).png");
		background-repeat: no-repeat;
		}

	nav.subheader > .added {}

/* APPEARANCE OF THE MENU ICON!!! */
@media only screen and (max-width: 768px) {
		#menu-icon {	display:inline-block; cursor: pointer; margin: 0 10px 0 0;}

		nav.subheader {text-align: right; width: 75px;}
		nav.subheader .added {display: inline-block; position: relative;}

		ul.navbar {right: 0; display: none; position: absolute; background-color:rgba(0,0,0,0.8); border-radius: 10px; width: 300px; z-index: 100;}

		ul.navbar > li {}
		ul.navbar > li > a {display: block; padding: 0px 10px 0px 10px;}

		nav.subheader .added:hover ul.navbar {display: block;} /* This says that when you hover over the added div, the navbar will display! */

		ul.navbar li {font-size: 30px;}
}
/* END SUBHEADER!!! */



/* SPOTLIGHT!!! */
section.monster.spotlight {
	border: 2px dotted black;
	padding: 20px;
	border-radius: 10px;}


	
	
/* OMG-STATUS!!! */
.omg-status {
	display: flex; flex-flow: row nowrap;
	padding: 5px 10px 5px 10px;
	justify-content: center;
	align-items: center;
	margin: 0 9.55%;
	}
	
.omg-status > figure {margin-right: 15px; flex: 0 0 50px; text-align: center; }
.omg-status >  figure > figcaption {font-weight: bold; font-size: .50em;}
.omg-status >  figure > img {border-radius: 5px; /* width: 50px; height: 50px; */}

.omg-status > div {}
	.omg-status > div > h2 {flex: 1; font-size: 1.4em;}
	.omg-status > div > h2 > a {text-decoration: none; color: #000000;}
	.omg-status > div > h2 > a:hover {color: #a33c3d}
	
	.omg-status > div > a {text-decoration: none; align-self: flex-end; font-size: .8em;}
	

.omg-status time {display: inline;}
.omg-status > div > p {flex: 0 1 100%; font-size: .9em;}



	/* OMG Status Margin Spacing and Text Size! */
	@media only screen and (max-width: 1024px) {
		.omg-status {margin: 0 5%;}
		.omg-status > div > h2 {font-size: 1.2em;}
		.omg-status > div > p {font-size: .8em;}
		.omg-status > div > a {font-size: .7em;}
		}
		
	@media only screen and (max-width: 736px) {
		.omg-status {margin: 0;}
		.omg-status > div > h2 {font-size: 1.1em;}
		.omg-status > div > p {font-size: .8em;}
		.omg-status > div > a {font-size: .7em;}
		}
		
	
	@media only screen and (max-width: 479px) {
		.omg-status > div > h2 {font-size: 1.1em;}
		.omg-status > div > p {font-size: .8em;}
		.omg-status > div > a {font-size: .7em;}
		}

		
/* ANNOUNCEMENTS!!! */
.announcements {/* margin-bottom: -15px; */}

.announcements  a {text-decoration: none;}

.announcements  >  article.repeater { /*#F3F3F2 for normal, #e4e4e2 for hover ! */
	display: flex; 
	flex-flow: row nowrap; 
	padding: 5px 20px; 
	border-radius: 4px;
	background-color: white;
	background-color: #F3F3F2;
	background-color: #F3F3F2;
	}
	
.announcements  >  .repeater > a { max-width: 38%;}

.announcements  >  .repeater  h3 {
	font-weight: bold; 
	font-family: "Arial Narrow", Arial, sans-serif;
	letter-spacing: -.04em; 
	padding-right: 10px;
	font-size: 1.4em;}
		
.announcements  >  .repeater > span  {flex: 1;}
		/* Stacking the parts on top of each other!!! */
		@media only screen and (max-width: 414px) { 
		.announcements  >  article.repeater { flex-flow: row wrap !important; }
		.announcements  >  .repeater > a { max-width: 100% !important; flex: 0 1 100%;}
		.announcements  >  .repeater > span  {flex: 0 1 100%;}
		.announcements  >  .repeater > span .desktop-only {display: none;}
		}

	
.announcements  >  article.repeater:hover {background-color: #e4e4e2;}
.announcements  >  article.repeater:hover  h3 {color: #a33c3d;}
	



.announcements  >  .repeater > span > a > p {display: inline; color: black; font-size: 1em;}
.announcements  >  .repeater > span > div.info {float: right; display: flex; flex-flow: row wrap; padding-left: 10px;}
.announcements  >  .repeater > span > div.info > * {padding-left: 10px;}
.announcements  >  .repeater > span > div.info > time {color: gray; font-style: italic; font-size: 1em;}

.announcements > .section.footer {text-align: right; padding: 2px 10px 0 0; font-size: .8em;}

.announcements .repeater.spacer {height: 7px;}

		@media only screen and (max-width: 1200px)
		{ 
		.announcements  >  .repeater  h3 {font-size: 1.2em;} 
		.announcements  >  .repeater > span > a > p  {font-size: .8em;}
		.announcements  >  .repeater > span > div.info > time {font-size: .8em;}
		}
		
		
/* READ THIS FIRST SPECIAL SECTION for hiding Index Elephant "Read this first" and showing top bar version! */
#read-this-first-mobile {display: none; background-color: #f5f0e3; border-top: 5px solid #E4E4E2; border-bottom: 5px solid #E4E4E2;}
#read-this-first-mobile .repeater.cinco  {padding: 5px;}
#read-this-first-mobile .repeater.cinco  > figure {flex: 0 1 200px;}
#read-this-first-mobile .repeater.cinco  > figure  > figcaption {/* font-size: .55em; */}
#read-this-first-mobile .repeater.cinco  > .added > .blurb{font-size: .8em;}
.spacer.top.mobile-only {display: none;}

@media only screen and (max-width: 944px) {
#read-this-first-mobile  {display: block; width: 100%;}
.must-reads .desktop-only {display: none;}
.spacer.top.mobile-only {display: block;}
}
@media only screen and (max-width: 479px) {
#read-this-first-mobile .repeater.cinco  > .added > .info {display: none;}		
}
@media only screen and (max-width: 413px) {
#read-this-first-mobile .repeater.cinco  > figure {flex: 0 1 100%;}
#read-this-first-mobile .repeater.cinco  > .added {flex: 0 1 100%;}
#read-this-first-mobile .repeater.cinco  > .added > .info {display: flex;}
}



/* WHO AM I? */
.who-am-i {font-size: .9em;}

			/* iPad portrait! */
			@media only screen and (max-width: 768px)
			{
			.who-am-i .desktop-only {display: none;}
			}

			
			
/* FOOTER!!! */

footer {
	background-color: black; 
	color: white; 
	padding: 20px;
	text-align: center;
	margin-bottom: 10px;
	}

footer h2 {
	font-weight: bold;
	font-family: "Arial Narrow", Arial, sans-serif;
	letter-spacing: -.04em; 
	font-size: 1.2em;
	padding-bottom: 5px;}
	
footer  time {display: inline;}
footer p {font-size: .8em;}
footer p.smaller {padding-top: 5px; font-size: .6em}


		@media only screen and (max-width: 768px) { footer {font-size: 80%;} }
		
		
/*  START WEEKLY-NOTES PAGE!!!  */







/*  END WEEKLY-NOTES PAGE!!!  */