/**
*
*  title	: JavaScript Lab 04, Client-side Programming I && II
*  author	: orem18kz
*  email	: orem18kz[@]student,ju,se
*
*/
body { font-family: 'Gentium Basic', serif; font-size: 100%; margin: 0 auto; }
header { width: 80%; text-align: center; margin: 0 auto; }
	header ul:first-of-type { width: 50%; margin: 0 auto; text-align: left; }
main { width: 80%; font-family: 'Dosis', sans-serif; margin: 0 auto; /*border: 1px solid red;*/ }
	main > div {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	main h2,main h3 { font-family: 'Dosis', sans-serif; font-size: 1.5em; text-align: center; }
	main section { background-color: #ddd; }
		main > div > section {
			width: 30%;
			min-height: 520px;
			padding: 0.5%;
			border-width: 3px;
			border-style: solid;
			border-radius: 10px;
			box-shadow: 1px 1px 4px #000;
		}
		main>div>section:nth-child(1) {
			border-color: #6D0A00;
			background: #CB356B;
			background: -webkit-linear-gradient(to top, #BD3F32, #CB356B);
			background: linear-gradient(to top, #BD3F32, #CB356B);
		}
		main>div>section:nth-child(2) {
			border-color: #AF5A0E;
			background: #F2994A;
			background: -webkit-linear-gradient(to top, #F2C94C, #F2994A);
			background: linear-gradient(to top, #F2C94C, #F2994A);
		}
		main>div>section:nth-child(3) {
			border-color: #246A02;
			background: #56ab2f;
			background: -webkit-linear-gradient(to top, #a8e063, #56ab2f);
			background: linear-gradient(to top, #a8e063, #56ab2f);
		}
h1,h2,h3 { font-weight: 800; }
h3 { text-transform: capitalize; }
section p { text-align: center; }
button[disabled="disabled"] { display: none; }
/**************
*     tags    *
**************/
span.tag {
	color: #F2F2F2;
	background-color: #999; /* darkGrey */
	font-family: 'Muli', sans-serif;
	font-size: 75%;
	text-align: center;
	text-transform: capitalize;
	text-decoration: none;
	margin: 0 2px;
	padding: 5px;
	display: inline-block;
	border: none;
	border-radius: 10px;
	cursor: default;
	text-shadow: 1px 1px 1px #333;
	box-shadow: 1px 1px 4px #000;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
span.remove-tag {
	width: 3px;
	height: 12px;
	line-height: 0.85;
	font-size: 75%;
	color: #ce3232;
	background-color: #fff;
	text-align: center;
	text-transform: lowercase;
	padding: 0px 6px 0px 2px;
	border-radius: 50%;
	border: 2px solid #ce3232;
	position: absolute;
	top: -6px;
	right: -3px;
}
#orders ul:first-of-type span.tag { background-color: #357df3; /* blue */ }
#orders ul span.tag { cursor: pointer; }
#orders ul span.tag:active { transform:translate(1px,1px); }
#wip ul:first-of-type span.tag { background-color: #AF5A0E; /* orange */}
#wip p + ul span.tag { color: #111111; background-color: #F2C94C; /* yellow */ }
#wip #tempLI span.tag { color: #F2F2F2; background-color: #FFFFFF;  background-image: linear-gradient(to right, #666 0%, #999 51%, #666 100%); }
#finished span.tag { background-color: #4CAF50; /* Green */ }
/***************
*     /tags    *
***************/
/***************
*  list styles *
***************/
main ul {
	width: 90%;
	min-height: 112px;
	background-color: #f4f4f4;
	text-align:center;
	list-style-type: none;
	margin: 0 auto;
	padding: 5px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border: 1px solid #696969;
	border-radius: 10px;
	box-shadow: 1px 1px 6px #000;
}
	main ul li { display: inline; margin: 4px 2px; position: relative; }
	#finished li :after { content:  " × " attr(data-count) }
/***************
* /list styles *
***************/
/******************
*  prices styles  *
******************/
#orders p:first-of-type,#wip p:first-of-type ,#served p:first-of-type {
	width: 80%;
	min-height:68px;
	background-image: none;
	margin: 1.12em auto;
	border-radius: 8px;
	border: 0 none;
}
#orders p:first-of-type {
	min-height:60px;
	background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
	border: 4px solid #66AB6E;
	box-shadow: 1px 1px 4px #000;
}
#orders ul+p span,#sales { font-size: 140%; font-family: 'Orbitron', sans-serif; font-weight: 900;}
#orders ul+p span:before,#wip ul+p span:before { font-size: 60%; font-weight: 400; content: "Pre-order value:\A"; white-space: pre; font-weight: normal; }
#orders ul+p span:after,#wip ul+p span:after,#sales:after { content: ":-"}
#sales { font-weight: bold; font-size: 150%; display: none; }
#sales:before { font-weight: normal; font-size: 75%; content: "Total Sales:\A"; white-space: pre; }
/******************
*  /prices styles *
******************/