/*	This is where I design Entry (post) layout
	Remember: # is for id=, and . (dot) is for class=

	Entry may order items as follows:
	LTR: Left to Right
	RTL: Right to Left
	TTD: Top to Down
	DTT: Down to Top

	E_ stands for Entry


	We can even embed article (post) inside an article:
	<div class="wrapper">
	<article class="E_RTL">
	<span class="item" style="flex: 0 1 60%; color: #FF0000; background-color: #0000FF">
	<article class="E_DTT">
	<span style="flex: 0 1 stretch; color: #FF0000; background-color: #0000FF">TEXT</span>
	<span style="flex: 0 1 stretch; color: #00FF00; background-color: #FF0000">PICTURE</span>
	<span style="flex: 0 1 stretch; color: #0000FF; background-color: #00FF00">VIDEO</span>
	</article>
	</span>
	<span class="item" style="flex: 0 1 20%; color: #00FF00; background-color: #FFEE00">PICTURE</span>
	<span class="item" style="flex: 0 1 20%; color: #0000FF; background-color: #00FFEE">VIDEO</span>
	</article>
	</div>
*/

.wrapper
{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

.wrapper > * {
  flex: 1 100%;
}

.E_LTR
{	/* Entry: Left to Right. */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-box;
	display: flex;
	-webkit-flex-flow: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.E_RTL
{	/* Entry: Right to Left. */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -webkit-box;
	display: -moz-box;
	display: flex;
	-webkit-flex-flow: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.E_TTD
{	/* Entry: Top to Down. */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.E_DTT
{	/* Entry: Down to Top. */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column-reverse;
	-webkit-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.item
{
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 0 1 auto;
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-align-self: auto;
	-ms-flex-item-align: auto;
	align-self: auto;
	display: inline-block;
	position: relative;
}

.item img
{	/*	Making image occupy whole item width (span)  */
	width: 100%
}