/**
 * Flexbox Spec
 */

body {
	font-family: 'Oxygen', sans-serif;
	font-weight: 300;
	color: #777;
}

hr {
	margin: 2em 0;
	color: transparent;
	border-bottom: .5em solid yellowgreen;
}

/* --------------------------------------------- EXAMPLE 1 ----------------------------------------------------------- */
#deals {
	display: flex;        /* Flex layout so items have equal height  */
	flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}

/* If I resize the view-port, the item shrinks up to the image dimensions */
.sale-item {
	xvisibility:collapse;
	xbox-sizing: border-box;
	display: flex;        /* Lay out each item using flex layout */
	flex-flow: column;    /* Lay out item’s contents vertically  */

	width: 20em;
	margin: 1em;
	padding: 1em;
	border: 0.3em solid #0af;
	border-radius: 1em;
	background-color: #efefef;
}

/* If I comment the last line, img stretches */
.sale-item > img {
	xposition: absolute;
	order: -1;            /* Shift image before other content (in visual order) */
	align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
	margin-top: auto;     /* Auto top margin pushes button to bottom */

	padding: .5em;
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	background-color: #f06;
	border: 0;
	border-radius: .5em
}

/* --------------------------------------------- EXAMPLE 3 ----------------------------------------------------------- */
@media (min-width: 60em) { /* 960px */
	/* two column layout only when enough room (relative to default text size) */
	#example-3 {
		display: flex;
	}

	#main_ {
		flex: 1;         /* Main takes up all remaining space */
		order: 1;        /* Place it after (to the right of) the navigation */
		min-width: 12em; /* Optimize main content area sizing */

		border: 1px dashed yellowgreen;
	}
}

/* menu items use flex layout so that visibility:collapse will work */
#example-3 nav > ul > li {
	display: flex;
	flex-flow: column;
}

/* dynamically collapse submenus when not targeted */
#example-3 nav > ul > li:not(:target):not(:hover) > ul {
	visibility: collapse;
}
#example-3 nav > ul > li > ul {
	xvisibility: collapse;
}
#example-3 nav > ul > li:hover > ul {
	xvisibility: visible;
}
#example-3 a {
	max-width: 10em;
	margin:  .2em;
	padding: .5em;
	text-decoration: none;
	color: #f06;
	background-color: gold;
	border: .1em solid orange;
	border-radius: .5em;
}




/* --------------------------------------------- EXAMPLE 4 ----------------------------------------------------------- */
.tabs {
	display: flex;
	position: relative;
	margin: 3em;
	margin-bottom: 20em;
}
.tabs > * {
	min-width: min-content; /* Prevent tabs from getting too small for their content. */
}
.tabs > .current {
	order: -1; /* Lower than the default of 0 */
}
.tab {
	display: flex;
}
.tab label {
	background: #eee;
	padding: .8em;
	border: 1px solid #ccc;
	border-radius: 1em 1em 0 0;
	cursor:pointer;
}
.tab [type=radio] {
	display: none;
}
.content {
	visibility: collapse;
	position: absolute;
	top: 2.9em;
	left: 0;
	width: 100%;
	background: white;
	padding: 1em;
	border: 1px solid #ccc;
}
.tab [type=radio]:checked ~ label {
	background: white;
	border-bottom: 1px solid white;
	z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
	visibility: visible;
	z-index: 1;
}


/* --------------------------------------------- EXAMPLE 5 ----------------------------------------------------------- */
/* the columns will all be equal-height by default */
#main           { display: flex; }
#main > article { order: 2; min-width: 12em; flex: 1; }
#main > nav     { order: 1; width: 200px; }
#main > aside   { order: 3; width: 200px; }

@media all and (max-width: 600px) {
	/* Too narrow to support three columns */
	#main { flex-flow: column wrap; }
	#main > article,
	#main > nav,
	#main > aside {    /* Return them to document order */
		order: 0;
		width: auto;
	}
}

#example-5 {
	font-family:      mono;
	color:            #fff;
	background-color: #555;
	padding:          .5em;
	border-radius:    1em;
	text-align:       center;
}
#example-5 header,
#main article,
#main nav,
#main aside,
#example-5 footer {
	padding:          inherit;
	background-color: #999;
	border-radius:    .5em;
}

#example-5 header {	margin-bottom: .5em;}
#main article     { margin:      0 .5em;}
#example-5 footer {	margin-top:    .5em;}





/***** SECOND ONE *****/
/* Fluid navigation that changes when resizing the window */
.navigation {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;

	list-style: none;
	margin: 3em 0 0;
	background: #66bbcc;
}
.navigation a {
	text-decoration: none;
	display: block;
	padding: 1em;
	color: white;
}
.navigation a:hover {
	background: hotpink;
}

@media all and (max-width: 800px) {
	.navigation {
		justify-content: space-around;
	}
}
@media all and (max-width: 600px) {
	.navigation {
		flex-flow: column wrap;
		padding: 0;
	}
	.navigation a {
		text-align: center;
		padding: 10px;
		border-top: 1px solid rgba(255,255,255,0.3);
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.navigation li:last-of-type a {
		border-bottom: none;
	}
}

/* Fluid layout that changes when resizing of the window */
.wrapper {
	display: flex;
	flex-flow: row wrap;

	font-weight: bold;
	text-align: center;
}
.wrapper > * {
	flex: 1 100%;
	padding: 10px;
}
.header  { background: tomato; }
.footer  { background: lightgreen; }
.main    { background: deepskyblue; text-align: left; }
.aside-1 { background: gold; }
.aside-2 { background: hotpink; }
@media all and (min-width: 600px) {
	.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
	.main    { flex: 2 0px; }
	.aside-1 { order: 1; }
	.main    { order: 2; }
	.aside-2 { order: 3; }
	.footer  { order: 4; }
}



/* --------------------------------------------- EXAMPLE 6 ----------------------------------------------------------- */
#flex1,
#flex2 {
	display: flex;
	flex-flow: row wrap;
	width: 300px;

	margin: 3em;
	padding: 0 .2em .2em 0;
	background-color: #555;
	border-radius: .5em;
}

.item {
	width: 80px;

	margin:  .2em 0 0 .2em;
	padding: .2em;
	font-size: 1.2em;
	text-align: center;
	color: #fff;
	background-color: #999;
	border-radius: .25em;
}

#flex2 .item {
	xflex: 0 0 auto;
	xflex: 0 1 auto;
	xflex: 1 1 auto;
	xflex: 1 0 0%;
	xflex: 0 0 30%;
	xflex: 1 0 30%;
	flex: 0 0 0%
}



/* --------------------------------------------- EXAMPLE 7 ----------------------------------------------------------- */
#example-7 > ul {
	display: flex;

	background-color: #efefef;
	border-radius: .5em;
}
#example-7 > ul > li {
	min-width: min-content;  /* Prevent items from getting too small for their content. */

	list-style-type: none;
	margin: .5em 0;
	padding: 0 .5em;
	border-right: .15em solid;
}
#example-7 > ul > #login {
	margin-left: auto;

	border: 0;
}

#example-7 a {
	text-decoration: none;
	padding: 0 .3em;
}

#example-7 a:hover {
	color: #efefef;
	background-color: #999;
	text-decoration: underline;
	border-radius: .2em;
}


/* --------------------------------------------- EXAMPLE 8 ----------------------------------------------------------- */
#example-8 {
	display: flex;
}

#example-8 .box {
	display: flex;
	flex-flow: column wrap;
	margin: auto;
	max-width: 5em;

	padding: .5em;
	padding-bottom: 0;
	background-color: #999;
	border-radius: 1em;
}

#example-8 .box:first-child div {
	margin: auto;

	margin-bottom: .5em; /* :first-child overwrites this =( */
}

#example-8 .box:last-child div {
	align-self: center;
	xjustify-content: center;
	xjustify-content: flex-start;
	xjustify-content: flex-end;
}

#example-8 .box div {
	margin-bottom: .5em;
	padding: .5em;
	background-color: #efefef;
	border-radius: .5em;
}

/* --------------------------------------------- Example 9 ----------------------------------------------------------- */
#without p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);

	text-align: center;
	margin: 0; padding: 0;	/* Only needed for the resizing */
}

#with {
	display: flex;
	align-items: center;
	justify-content: center;
}

#with p {
	text-align: center; /* if you know the exact width of the content, you can use width instead of text-align */
	xborder: 1px dashed;
}

#without,
#with {
	margin: auto 3em;
	width: 20em;
	height: 6em;
	background: #f06;
	font: bold 150% sans-serif;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	resize: both;
	overflow: hidden; /* un-comment this if you want to resize the box, but it'll break the #without one, unless you add margin:0; padding:0; */
}