/**
*
*  title	: JavaScript Lab 05, Client-side Programming I && II
*  author	: orem18kz
*  email	: orem18kz[@]student,ju,se
*
*/
/****************
** General CSS **
****************/
body { font-family: 'Gentium Basic', serif; font-size: 100%; margin: 0 auto; }
button { position: relative; z-index: 999; }
section { display: block; }
/***********
** header **
***********/
header { width: 80%; margin: 0 auto; }
	header h1 { text-align: center; }
	header h2 { margin-bottom: 0; }
	header ul { width: 65%; margin-top: 0.5em; }
/***************
** playground **
****************/
#playground {  }
#playground {
	width: 90%;
	min-width: 600px;
	background-color: #EDEDED;
	font-family: 'Dosis', sans-serif;
	margin: 0 auto;
	border: 8px solid #474747;
	box-shadow: 3px 3px 6px rgba(43, 83, 117,.5);
	border-radius: 8px;
}
	#playground h2 { text-align: center; margin: 0 auto; padding: 0; }
/************
** Wrapper **
************/
#wrapper {
	width: 560px;
	min-height: 420px;
	background-color: #F2F2F2;
	margin: 0 auto;
	position: relative;
}
/************
** Buttons **
*************/
#controls {
	width: 60%;
	background-color: #fff;
	text-align: center;
	margin: 0 auto;
	padding: 0.56em 0;
	border: 6px solid rgba(43, 83, 117,1);
	border-radius: 10px;
	box-shadow: 3px 3px 6px rgba(43, 83, 117,1);
}
	#controls h3 { margin: 0 auto 0.25em; padding: 0; }
	#controls button,#add {
		color:rgba(255,255,255,0.75);
		font-family: 'Gentium Basic', serif;
		font-size: 100%;
		font-weight:700;
		text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
		text-align:center;
		margin:0 0.1em 0.5em 0;
		padding:0.3em 1.2em;
		border:0.16em solid #49A6FF;
		border-radius:2em;
		box-sizing: border-box;
		box-shadow: 2px 1px 4px rgba(43, 83, 117,.95);
		transition: all 0.2s;
		outline: none;
		cursor: pointer;
	}
	#controls button { background-color: DodgerBlue; }
	#controls button:hover { color:rgba(255,255,255,1); border-color: rgba(43, 83, 117,1); text-shadow: 0 0.04em 0.04em rgba(43, 83, 117,1); cursor: pointer; }
	#controls button:active,#add:active { transform:translate(1px,1px); cursor: pointer; }
	#controls button[disabled] { color: #3B3B3B; background-color: #DDD; border-color: #404040; cursor: default; }
	#controls button + button { margin-left: 0.56em; }

/***************
** Add button **
***************/
#add {
	background-color: #F1BB4E;
	border-color: #DFA126;
	margin: 1.12em auto;
	display: block;
}
/************
** Jukebox **
************/
#video {
	max-width: 560px;
	font-family: 'Dosis', sans-serif;
	background-image: linear-gradient(to left, rgba(21,49,95,1),rgba(255,255,255,.75),rgba(21,49,95,1));
	margin: 0 auto;
	box-shadow: 3px 3px 6px rgba(43, 83, 117,.5);
}
	#video h4,#video h5 { box-sizing:border-box; margin: 0; border: 0 none; }
	#video h4 {
		max-width: 560px;
		color: rgba(21,49,95,1);
		font-size: 2em;
		font-weight: 800;
		text-align: center;
		display: block;
		vertical-align:bottom;
		padding: 0.5%;
	}
	#video h5 {
		color: rgba(21,49,95,1);
		font-size: 1.5em;
		font-weight: 800;
		text-align: center;
		padding: 0.5%;
	}
	#video iframe { vertical-align:bottom; }
/*********************
** Background Image **
*********************/
#performer {
	width: 120px;
	height: 120px;
	background-image: url('img/smal-baby-got-back.jpg');
	background-size: cover;
	margin: 1.12em auto;
	border: 4px solid rgba(43,83,117,1);
	box-shadow: 0px -3px 6px rgba(43, 83, 117,.75);
	border-radius: 50%;
	transform: rotate(15deg);
	position: absolute;
    top: -15%;
    right: -15%;
}
	#performer img { width: 100%; min-width: 240px; max-width: 560px; vertical-align: bottom; border-radius: 50%;}
	#performer h4,#performer h3 { margin: 0; padding: 0; }
/***********
** footer **
***********/
footer p { text-align: center; }