/* Background color and margins for page, list, and comments are at the bottom of generic.css!!! */
/* THIS: "flex: 1 0 auto;" was the KEY for the "sticky footer" in the tertairy/quatro/cinco, the list pages, and the comments!!!*/


/* START WOOKALAR SECTION!!! */
	.wookalar > article {display: flex; flex-flow: row wrap; }

/*START HEADER ITEMS*/
	.wookalar > article > h1 {order: 1; flex: 0 1 100%; word-break: break-word;
    word-wrap: break-word; /* This breaks everything. */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;/* font-weight: bold; font-size: 2.5em; padding: 2px 0 2px 0; */}
	
	.wookalar > article > h1 > time {display: inline;}
	
	.wookalar > article > .subtitle {order: 2; flex: 0 1 100%; font-style: italic; color: gray; padding: 2px 0 2px 0;}
	.wookalar > article > .header.line.top {order: 3; width: 100%; border-bottom: 2px dashed black; margin: 5px 0 5px 0;}
/*END HEADER ITEMS*/

/*START INFO DIV*/
	.wookalar > article > .info {order: 4; display: flex; flex-flow: row wrap; width: 100%; justify-content: space-between;}

	.wookalar > article > .info > .author {margin: 2px;}
	.wookalar > article > .info > .author p {display: inline; font-weight: bold; font-size: .7em;}
	.wookalar > article > .info > .author > a {text-decoration: none;}

	.wookalar > article > .info > time,
	.wookalar > article > .info > .updated {font-style: italic; color: gray; margin: 2px;}
	.wookalar > article > .info > time:before {}

	.wookalar > article > .info > .updated {}
	.wookalar > article > .info > .updated time{display: inline;}
	.wookalar > article > .info > .comments-bubble {margin: 2px 2px 0 2px;}
/*END INFO DIV*/

/*START FIGURE BLURB DIV*/
	.wookalar > article > .figure.blurb {order: 5; display: flex; flex-flow: row wrap; flex-basis: 100%;}

	.wookalar > article > .figure.blurb > figure {margin: 5px 1.25% 2px 0; flex-basis: 70%;}
		@media only screen and (max-width: 479px) { .wookalar > article > .figure.blurb > figure {flex: 0 1 100% !important;} }
	.wookalar > article > .figure.blurb > figure > img {width: 100%; border-radius: 5px;}
	.wookalar > article > .figure.blurb > figure > figcaption {text-align: center; font-weight: bold; font-size: .7em;}

	.wookalar > article > .figure.blurb > .figure.spacer {flex-basis: 1.25%; display: none;}

	/* Blurb Text!!! */
	.wookalar > article > .figure.blurb > .blurb {flex: 1; padding: 5px 0 2px 0; font-size: 1.2em; font-weight: bold; line-height: 1.2em;} /* Don't forget to copy to blurb2! */
@media only screen and (max-width: 1400px) { .wookalar > article > .figure.blurb > .blurb {font-size: 1.1em;} }
@media only screen and (max-width: 1200px) { .wookalar > article > .figure.blurb > .blurb {font-size: 1.0em;} }
@media only screen and (max-width: 1100px) { .wookalar > article > .figure.blurb > .blurb {font-size: .8em;} }
@media only screen and (max-width: 1024px) { .wookalar > article > .figure.blurb > .blurb {font-size: 1.2em;} } /* At 1024, the page/lists go to Dragon with Elephant-Rooster underneath! */
@media only screen and (max-width: 479px) { .wookalar > article > .figure.blurb > .blurb {flex: 0 1 100% !important;} }
	
	
			/*START BIG-FIGURE!*/
			.wookalar > article > .figure.blurb.big-figure > figure {flex-basis: 100%; margin-right: 0px !important;}
			.wookalar > article > .figure.blurb.big-figure > .blurb {flex: 0 1 100%;}
			/*END BIG-FIGURE*/

			/*START NO-FIGURE!*/
			.wookalar > article > .figure.blurb.no-figure > figure {display: none;}
			.wookalar > article > .figure.blurb.no-figure > .blurb {flex: 0 1 100%;}
			/*END NO-FIGURE*/
			
			/*START NO-BLURB!*/
			.wookalar > article > .figure.blurb.no-blurb > figure {flex-basis: 100%; margin-right: 0px !important;}
			.wookalar > article > .figure.blurb.no-blurb > .blurb {display: none;}
			/*END NO-BLURB*/
			
/*END FIGURE BLURB DIV*/

.wookalar > article > .blurb2 {display: none; padding: 5px 0 2px 0; font-size: 1.4em; line-height: 1.1em;}

/* START TAGS ICONS DIV! */
	.wookalar > article > .tags.icons {order: 6; width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between;}
	.wookalar > article > .tags.icons > .tags {padding: 5px 0 5px 0;}
	.wookalar > article > .tags.icons > .tags p {font-weight: bold; font-size: .7em;}
	.wookalar > article > .tags.icons > .tags a {align-self: flex-end;}
	.wookalar > article > .tags.icons > .icons {
		align-self: flex-end;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		padding: 5px 0 5px 0;
		}
	.wookalar > article > .tags.icons > .icons > span {margin: 0 2px 0 2px;}
	.wookalar > article > .tags.icons > .icons > span.adjustment {margin: -2px 2px 0 2px;}
			/*NO TAGS*/
			.wookalar > article > .no-tags > .tags {display: none;}
			.wookalar > article > .no-tags> .icons {width: 100%; text-align: right; align-self: flex-end;}
			
			/*NO ICONS*/
			.wookalar > article > .no-icons > .icons {display: none;}
/* END TAGS ICONS DIV! */


/* START ARTICLE HEADER LINE BOTTOM! */
	.wookalar > article > .header.line.bottom {order: 7; height: 1px; width: 100%; border-top: 1px dotted gray; margin: 5px 0 5px 0;}
/* END ARTICLE HEADER LINE BOTTOM! */

.wookalar > article > #big-show {order: 8; width: 100%;}

/* START ARTICLE FOOTER */
	.wookalar > article > .footer  {order: 9; width: 100%;}
	.wookalar > article > .footer > .footer.line {width: 100%; height: 1px; border-bottom: 1px dotted gray; margin: 5px 0 5px 0;}
	.wookalar > article > a.footer {}
/* END ARTICLE FOOTER! */

.wookalar > article > .shout-out {order: -1; flex: 0 1 100%; padding: 2px 0 2px 0; font-size: .8em;}

/* START RELATED ARTICLES/ASIDE! */
	.wookalar > aside {display: flex; flex-flow: row wrap; margin: 60px 0 0 0;}
	.wookalar > aside > h2 {flex: 0 1 100%;}
	.wookalar > aside > a {align-self: flex-end; text-decoration: none; font-size: .8em;}
	.wookalar > aside > .line {flex: 0 1 100%; height: 2px; background-color: black; margin: 2px 0 10px 0;}
	.wookalar > aside > .repeater {flex-basis: 160px; margin: 0 10px 0 10px;}
/* END ASIDE! */

/* END WOOKALAR SECTION!!! */

/* START HIDE EVERYTHING!!! */
	.wookalar.hide-everything > nav {display: none;}
	.wookalar.hide-everything > article > h1 {display: none;}
	.wookalar.hide-everything > article > .subtitle {display: none;}
	.wookalar.hide-everything > article > .header.line.top {display: none;}
	.wookalar.hide-everything > article > .info {display: none;}
	.wookalar.hide-everything > article > .figure.blurb {display: none;}
	.wookalar.hide-everything > article > .blurb2 {display: none;}
	.wookalar.hide-everything > article > .tags.icons {display: none;}
	.wookalar.hide-everything > article > .header.line.bottom {display: none;}
	.wookalar.hide-everything > article > #big-show {margin-top: 10px; margin-bottom: 60px;}
	.wookalar.hide-everything > article > .footer  {display: none;}
	.wookalar.hide-everything > article > .shout-out {display: none;}
	.wookalar.hide-everything > aside {display: none;}
/* END HIDE EVERYTHING!!! */

/* START ALTERNATE VIEW 1!!! */
	.wookalar.alternate1 > nav {}
	.wookalar.alternate1 > article > h1 {order: 2;}
	.wookalar.alternate1 > article > .subtitle {order: 3;}
	.wookalar.alternate1 > article > .header.line.top {order: 4;}
	.wookalar.alternate1 > article > .info {order: 5;}
	.wookalar.alternate1 > article > .figure.blurb {order: 1;}
	.wookalar.alternate1 > article > .figure.blurb > figure {flex-basis: 100%; margin-right: 0px !important;}
	.wookalar.alternate1 > article > .figure.blurb > .blurb {display: none;}
	.wookalar.alternate1 > article > .blurb2 {order: 6; display: block;}
	.wookalar.alternate1 > article > .tags.icons {order: 7;}
	.wookalar.alternate1 > article > .header.line.bottom {order: 8;}
	.wookalar.alternate1 > article > #big-show {order: 9;}
	.wookalar.alternate1 > article > .footer  {order: 10;}
	.wookalar.alternate1 > aside {}
/* END ALTERNATE VIEW 1!!! */



/* -----------------Retro Comments Section! ------------------ */
#dragon-column > .section.spacer {height: 40px;}

section.comments {flex: 0 1 100%; display: block;}

section.comments > h2 {}
section.comments > .header.line {height: 1px; background-color: black; margin: 5px 0 10px 0;}
section.comments > .disclaimer {font-style: italic; color: gray; margin-bottom: 20px;}
section.comments > .center {text-align: center; margin: 10px 30px 15px 30px; font-style: italic;}
section.comments > .center.box {border: 1px solid gray; padding: 10px; border-radius: 5px;}

section.comments > article {
	flex: 0 1 100%; 
	display: flex; 
	flex-flow: row wrap; 
	border-radius: 20px; 
	padding: 10px 10px 10px 10px; 
	margin-bottom: 15px;}
section.comments > article.switch-1 {background-color: #E1EAEF; }
section.comments > article.switch-2 {background-color: #F9FAD0; }

section.comments > article > .left {
	flex: 0 1 150px;
	display: flex;
	flex-flow: column nowrap;
	text-align: right;
	padding-right: 10px;
	border-right: 1px solid black;} /* Make the flex-basis the same as the max-width of the avatar! */
	
section.comments > article > .left > figure {padding-bottom: 10px;}
section.comments > article > .left > figure > img {max-width: 150px; border-radius: 5px;}
section.comments > article > .left > div > .author {font-weight: bold;}
section.comments > article > .left > div > .author  a {align-self: flex-start;}
section.comments > article > .left > div > .rank {font-style: italic; color: gray; font-size: .8em;}

section.comments > article > .right {flex: 1; display: flex; flex-flow: column nowrap; padding-left: 10px;}
section.comments > article > .right > .top {
	display: flex; 
	flex-flow: row wrap;
	justify-content: space-between;
	border-bottom: 0px dotted black;
	padding-bottom: 0px;
	margin-bottom: 10px;}
section.comments > article > .right > .top > span,
section.comments > article > .right > .top > time {font-size: .7em; font-weight: bold;}
section.comments > article > .right > .top > span > a {text-decoration: none;}
section.comments > article > .right > .middle {flex: 1 0 auto;} 
section.comments > article > .right > .middle > img {max-width: 100%;}

section.comments > article > .right > .bottom {border-top: 1px dotted black; margin-top: 10px; padding-top: 3px; min-height: 30px;}
section.comments > article > .right > .bottom > figure {}
section.comments > article > .right > .bottom > figure > img {max-width: 100%;}
section.comments > article > .right > .bottom > span {font-style: italic; font-size: .8em; color: gray;}


/* Pagination/Total Comments and LEAVE A COMMENT/SMILEYS at the bottom! */
section.comments  > .left {float: left; font-weight: bold; font-size: .7em;}
section.comments  > .right {float: right; font-weight: bold; font-size: .7em;}

section.comments > .added {display: flex; flex-flow: row wrap; padding: 2px 0 10px 0;}
section.comments > .added > .left{flex: 1; font-size: 1em; font-weight: bold; color: red;}
section.comments > .added > .right{font-size: 1em;}

#entry {width: 100%; color: pink;}
#entry  #textarea {width: 100%;}
#entry div{margin-top: 5px; font-weight: bold; font-size: .8em;}
#entry div img {margin-top: 3px;}
#entry  input {margin: 10px 5px 0 0;}


/* -----------------Disqus Section! ------------------ */

section.disqus {flex: 0 1 100%; display: block;}