/* START INDEX MAIN CONTENT!!! */
.index #dragon-column {order: 7; flex: 1;}
	
.index #elephant-column {order: 5; flex: 0 0 350px;}

.index #rooster-column {order: 9; flex: 0 0 350px;}

		@media only screen and (max-width: 1400px) { .index #elephant-column {flex-basis: 325px;} .index #rooster-column {flex-basis: 325px;} }
		@media only screen and (max-width: 1300px) { .index #elephant-column {flex-basis: 300px;} .index #rooster-column {flex-basis: 300px;} }
		@media only screen and (max-width: 1200px) { .index #elephant-column {flex-basis: 275px;} .index #rooster-column {flex-basis: 275px;} }
		@media only screen and (max-width: 1100px) { .index #elephant-column {flex-basis: 250px;} .index #rooster-column {flex-basis: 250px; } }
		@media only screen and (max-width: 1024px) { .index #elephant-column {flex-basis: 25%;} .index #rooster-column {flex-basis: 25%;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
		@media only screen and (max-width: 900px) {  }  /* Just an intermediary stopping point! */
		@media only screen and (max-width: 768px) {  } /* Index 2 columns  {iPad Portait}*/
		@media only screen and (max-width: 736px) {  } /* 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: 480px) {  } /* One column everywhere */

/* END INDEX MAIN CONTENT!!! */


/* START PAGE/LIST MAIN CONTENT!!! */
.page #dragon-column, .list #dragon-column {order: 5; flex: 1;}
	
.page #elephant-column, .list #elephant-column {order: 7; flex: 0 0 350px;}

.page #rooster-column, .list #rooster-column {order: 9; flex: 0 0 200px;}

		@media only screen and (max-width: 1400px) { .page #elephant-column, .list #elephant-column {flex-basis: 325px;} .page #rooster-column, .list #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1300px) { .page #elephant-column, .list #elephant-column {flex-basis: 300px;} .page #rooster-column, .list #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1200px) { .page #elephant-column, .list #elephant-column {flex-basis: 275px;} .page #rooster-column, .list #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1100px) { .page #elephant-column, .list #elephant-column {flex-basis: 250px;} .page #rooster-column, .list #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1024px) { .page #elephant-column , .list #elephant-column {flex-basis: 25%;} .page #rooster-column, .list #rooster-column {flex-basis: 20%;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
		@media only screen and (max-width: 900px) {  }  /* Just an intermediary stopping point! */
		@media only screen and (max-width: 768px) {  } /* Index 2 columns  {iPad Portait}*/
		@media only screen and (max-width: 736px) {  } /* 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: 480px) {  } /* One column everywhere */

/* END PAGE MAIN CONTENT!!! */


/* START WEEKLY-NOTES MAIN CONTENT (ROOSTER is next to the main article!!!) */
.list.weekly-notes #dragon-column {order: 5; flex: 1;}

.list.weekly-notes #rooster-column {order: 7; flex: 0 0 200px;}
	
.list.weekly-notes #elephant-column {order: 9; flex: 0 0 350px;}

		@media only screen and (max-width: 1400px) { .list.weekly-notes #elephant-column {flex-basis: 325px;} .page #rooster-column, .list.weekly-notes #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1300px) { .list.weekly-notes #elephant-column {flex-basis: 300px;} .page #rooster-column, .list.weekly-notes #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1200px) { .list.weekly-notes #elephant-column {flex-basis: 275px;} .page #rooster-column, .list.weekly-notes #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1100px) { .list.weekly-notes #elephant-column {flex-basis: 250px;} .page #rooster-column, .list.weekly-notes #rooster-column {flex-basis: 200px;} }
		@media only screen and (max-width: 1024px) { .list.weekly-notes #elephant-column {flex-basis: 25%;} .page #rooster-column, .list.weekly-notes #rooster-column {flex-basis: 20%;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
		@media only screen and (max-width: 900px) {  }  /* Just an intermediary stopping point! */
		@media only screen and (max-width: 768px) {  } /* Index 2 columns  {iPad Portait}*/
		@media only screen and (max-width: 736px) {  } /* 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: 480px) {  } /* One column everywhere */

/* END WEEKLY-NOTES MAIN CONTENT */



/*START GENERIC ARTICLE/SECTION SETTINGS!*/

section {}
section.tile {justify-content: space-around;}
	
/* H1 Headers on all Pages/Lists/Etc! */
	.wookalar > article > h1,
	.dungeon > section > h1 {
		font-family: "Arial Narrow", Arial, sans-serif; 
		font-weight: bold; 
		letter-spacing: -.04em; 
		font-size: 2.5em; 
		padding: 2px 0 2px 0;
		}	
		
		@media only screen and (max-width: 480px) {.wookalar > article > h1,
	.dungeon > section > h1 {font-size: 2.0em;}  }
		
	

/*Main Sidebar, Comments, Etc. Section Headers*/
	h2.header, .wookalar > aside > h2, .omg-status h2 { 
		font-weight: bold; 
		font-family: "Arial Narrow", Arial, sans-serif; 
		letter-spacing: -.04em; 
		font-size: 2em; /*was 1.7em */
		}
	h2.header {flex: 1;}
	h2.header a {color: #000000; text-decoration: none;}
	h2.header a:hover {color: #a33c3d;}
	h2.header.loner {flex: 0 1 100%;}
	
	div.header.link {align-self: flex-end;}
	div.header.link a {text-decoration: none;}
	div.header.description {flex: 0 1 100%; font-style: italic;}
	div.header.line {flex: 0 1 100.01%;}
	
	/* Lines and Spacers! */
	.squib > div.header.line, .monster > div.header.line, .wizard > div.header.line
		{margin: 5px 0 20px 0; height: 2px; background-color: black;}
		
	.squib > div.header.spacer, .monster > div.header.spacer, .wizard > div.header.spacer
		{height: 20px; flex: 0 1 100%;}  /* Not currently used! */

	
	.repeater {display: flex; flex-flow: row wrap; }
	
/* **Article Titles in Sidebars, Dungeon, Etc.(Category Archive has to be seperate -it has attributes built in or something)! */
	.repeater > h3,
	.repeater > .added > h3,
	.dungeon .repeater > .added > h2,
	.dungeon section li	{font-weight: bold; 
		font-family: "Arial Narrow", Arial, sans-serif; 
		letter-spacing: -.04em; 
		font-size: 1.4em;
		padding-bottom: 4px;}
	
/* Category Archive List Titles */
	.dungeon section  li.archive{font-weight: bold; 
		font-family: "Arial Narrow", Arial, sans-serif; 
		letter-spacing: -.04em; 
		font-size: 1.2em;}
	
	.dungeon section li > a {text-decoration: none;}
	
	
	.repeater > h3 > a, 
	.repeater > .added > h3 > a  {text-decoration: none; }
	
	.repeater > .subtitle, 
	.repeater > .added > .subtitle {font-style: italic;  color: gray; font-size: .85em; padding-bottom: 3px;}
	
	.repeater > figure {padding-bottom: 2px;}
	.repeater > figure img {width: 100%; border-radius: 5px;}
	.repeater > figure a {border: 0;}
	.repeater > figure > figcaption {font-weight: bold; text-align: center; font-size: .65em; padding-bottom: 2px;}
	
/* *****REPEATER BLURB TEXT!!!**** */
	.repeater > .blurb {font-size: .9em; padding-bottom: 2px;}
	
	.repeater > .info, 
	.repeater > .added > .info  {font-size: .85em;}
	
	.repeater > .info > .author, 
	.repeater > .added > .info > .author {}

	.repeater > .info > .author > p, 
	.repeater > .added > .info > .author > p  {display: inline; font-weight: bold; font-size: .7em;}
	
	.repeater > .info > .author > a, 
	.repeater > .added > .info > .author > a  {text-decoration: none;}
	
	.repeater time {display: inline;}
	.repeater > .info > time, 
	.repeater > .added > .info > time,
	.repeater > .info > .updated,
	.repeater > .added > .info > .updated {font-style: italic;  color: gray;}
	
	.repeater > .shout-out {font-style: italic;}
	
	.monster .tile, .squib .tile, .wookalar .tile {align-self: flex-start !important;}
	.monster .tile .blurb, .squib .tile .blurb, .wookalar .tile .blurb {font-size: .7em;}

	
	div.repeater.line {width: 100%;}  /* Use one or the other! */
	div.repeater.spacer {width: 100%;} /* Use one or the other! */

	div.footer.line {flex: 0 1 100%;}
	div.footer.link {flex: 0 1 100%;}
	div.footer.link a {}
/*END GENERIC ARTICLE/SECTION SETTINGS!*/


/*START SQUIB SECTION!*/
	.squib {	display: flex; flex-flow: row wrap; }
		
	.squib > h2.header {text-shadow: 3px 3px 5px rgba(0,0,0, 0);}
	.squib > div.header.link {font-size: .8em;}
	.squib > div.header.description {text-shadow: 3px 3px 5px rgba(0,0,0, 0); font-size: .7em;}
	.squib > div.header.description a {}
	.squib > div.header.line {}
	.squib > div.header.spacer {}

	.squib .repeater h2 {}
	.squib .repeater a {}
	.squib .repeater .subtitle {}
	.squib .repeater figure {}
	.squib .repeater figure img {}
	.squib .repeater figcaption {}
	.squib .repeater .blurb {}
	.squib .repeater .blurb p {}
	.squib .repeater time {}

	.squib .secondary figure {}
	.squib .tertiary  figure {}
	.squib .quatro figure {}
	.squib .cinco figure {flex: 0 1 80px;}

	.squib .tile {flex: 0 1 120px;}
	.squib .tile figcaption {/* display: none; */}


	.squib > div.repeater.line {
		margin-top: 20px; 
		margin-bottom: 20px;
		height: 1px; 
		background-color: #000000;}

	.squib > div.footer.line {
		margin: 10px 0 2px 0;
		height: 2px; 
		background-color: black;
		border-radius: 0px;
		box-shadow: 3px 3px 5px rgba(0,0,0, 0);
		}
	.squib > div.footer.link {font-size: .8em;}
	.squib > div.footer.link a {}
/*END SQUIB SECTION!*/


/* START MONSTER SECTION! */
	.monster  {display: flex; flex-flow: row wrap; }

	.monster h2.header {color: #000000; text-shadow: 3px 3px 5px rgba(0,0,0, 0);}
	.monster div.header.link {font-size: .8em;}
	.monster div.header.description {}
	.monster div.header.description a {}
	.monster div.header.line {}
	.monster > div.header.spacer {}

	.monster .repeater h2 {}
	.monster .repeater a {}
	.monster .repeater .subtitle {}
	.monster .repeater figure {}
	.monster .repeater figure img {}
	.monster .repeater figcaption {}
	.monster .repeater .blurb {}
	.monster .repeater .blurb p {}
	.monster .repeater time {}

	.monster .secondary figure {min-width: 250px;}
	.monster .tertiary  figure {min-width: 200px;}
	.monster .quatro figure {max-width: 400px; min-width: 200px; }
	.monster .cinco figure {flex: 0 1 160px; }

	.monster .tile {flex: 0 1 160px; }

	.monster > div.repeater.line {
		margin-top: 30px; 
		margin-bottom: 30px;
		height: 1px; 
		background-color: #000000;}

	.monster > div.footer.line  {
		margin: 10px 0 3px 0;
		height: 2px; 
		background-color: #000000;
		border-radius: 0px;
		box-shadow: 3px 3px 5px rgba(0,0,0, 0);
		}	
	.monster > div.footer.link {font-size: .8em;}
	.monster > div.footer.link a {}
/* END monster SECTION! */


/*START WIZARD SECTION!*/
	.wizard {display: flex; flex-flow: row wrap;}
		
	.wizard > h2.header {text-shadow: 3px 3px 5px rgba(0,0,0, 0);}
	.wizard > div.header.link{font-size: .8em;}
	.wizard > div.header.description {text-shadow: 3px 3px 5px rgba(0,0,0, 0); font-size: .7em;}
	.wizard > div.header.description a {}
	.wizard > div.header.line {}
	.wizard > div.header.spacer {}
	
	.wizard .repeater h2 {}
	.wizard .repeater a {}
	.wizard .repeater .subtitle {}
	.wizard .repeater figure {}
	.wizard .repeater figure img {}
	.wizard .repeater figcaption {}
	.wizard .repeater .blurb {}
	.wizard .repeater .blurb p {}
	.wizard .repeater time {}

	.wizard .secondary figure {}
	.wizard .tertiary  figure {}
	.wizard .quatro figure {}
	.wizard .cinco figure {flex: 0 1 80px;}

	.wizard .tile {flex: 0 1 48%; padding: 0 0 0 0 !important;}
	.wizard .tile figcaption {/* display: none; */}


	.wizard > div.repeater.line {
		margin-top: 10px; 
		margin-bottom: 10px;
		height: 1px; 
		background-color: #000000;
	}

	.wizard > div.footer.line {
		margin: 10px 0 2px 0;
		height: 2px; 
		background-color: black;
		border-radius: 0px;
		box-shadow: 3px 3px 5px rgba(0,0,0, 0);
		}
	.wizard > div.footer.link {font-size: .8em;}
	.wizard > div.footer.link a {}
/*END WIZARD SECTION!*/


/* START WOOKALAR/DUNGEON SECTION!!! */  



/* START BREADCRUMB! */
nav.breadcrumb {display: inline-flex; flex-flow: row wrap; align-items: center; margin: 0 0 15px 0;}
nav.breadcrumb > img {padding: 0 10px 0 10px;}
		/*NO BREADCRUMB*/
		nav.no-breadcrumb {display: none;}
nav.breadcrumb > a {}

@media only screen and (max-width: 479px) {nav.breadcrumb  a {font-size: .8em;} nav.breadcrumb > img {height: 15px; width: 25px;}   }

/*END BREADCRUMB! */

/* END WOOKALAR/DUNGEON SECTION!!! */




/* START SUPERHEADER/SUBHEADER SECTIONS!!! */
	ul.navbar, .superheader {
		display: flex; 
		flex-flow: row nowrap;
		align-items: center; 
		justify-content: space-between;
		}
		
	.superheader time {display: inline;}

/* NAVBAR TEXT SIZE! */	
	ul.navbar li, .superheader > div {
		font-family: "Arial Narrow", Arial, sans-serif; 
		color: white;
		padding: 0 10px 0 10px;
		letter-spacing: -1.5px;
		font-size: 30px;
		text-align: center;
		}
			@media only screen and (max-width: 1500px) { ul.navbar li, .superheader > div {padding: 2.5px 10px 2.5px 10px; font-size: 25px;} }
			@media only screen and (max-width: 1400px) { ul.navbar li, .superheader > div {padding: 5px 10px 5px 10px; font-size: 20px; font-weight: bold; letter-spacing: -1px;} }
			@media only screen and (max-width: 1100px) { ul.navbar li, .superheader > div {padding: 6px 5px 6px 5px; font-size: 18px; font-weight: bold; letter-spacing: -.75px;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
			@media only screen and (max-width: 900px) { ul.navbar li, .superheader > div {padding: 7.5px 5px 7.5px 5px; font-size: 15px; font-weight: bold; letter-spacing: -.75px;} } /* Index 3 columns, Page/List 2 Columns {iPad Landscape} */
			@media only screen and (max-width: 900px) {  }  /* Just an intermediary stopping point! */
			@media only screen and (max-width: 768px) {  } /* Index 2 columns  {iPad Portait}*/
			@media only screen and (max-width: 736px) {  } /* 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: 480px) {  } /* One column everywhere */


	ul.navbar li > a, .superheader > div > a {text-decoration: none; color: white;}
	ul.navbar li > a:hover , .superheader > div > a:hover {color: #a33c3d;}



	

	

/* 404 page! */
.error {padding: 10px; }
.error  h1 {order: -4; flex: 0 1 100%; font-weight: bold; font-size: 3em;}
.error  .header.line {order: -3; flex: 0 1 100%; height: 3px; background-color: black; margin: 5px 0 20px 0;}
.error .added {order: 4; margin: 0 auto; display: flex; flex-flow: row wrap; justify-content: center; max-width: 1200px; padding-top: 20px;}
.error .added > figure {flex: 0 1 400px; padding-right: 20px;}
.error .added > figure > img {width: 100%; border-radius: 5px;}
.error .added > figure > figcaption {text-align: center; font-weight: bold; font-size: .8em; padding: 5px 0 10px 0;}


.error .added > span {flex: 1; min-width: 400px; }
.error .added > span > p {line-height: 1.1em; padding: 0 0 10px 0 ;}
.error .added > span > div {text-align: center; padding: 0 0 10px 0;}