/*******************************************************************
	1. FONTS
*******************************************************************/

@charset "utf-8";
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans_bold/OpenSans-Bold-webfont.eot');
    src: url('../fonts/opensans_bold/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans_bold/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/opensans_bold/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/opensans_bold/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans_light/OpenSans-Light-webfont.eot');
    src: url('../fonts/opensans_light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans_light/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/opensans_light/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/opensans_light/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.woff') format('woff'), url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../fonts/opensans_semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*******************************************************************
	2. ALLGEMEIN
*******************************************************************/

*
{
	box-sizing: border-box;
	-webkit-tap-highlight-color:transparent;
	cursor: none;
}

html
{
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	background: lightblue;
}

body,
body#login
{
	background: lightblue;
	font-size: 1em;
	line-height: 1em;
	color: #484e53;
}

body#login
{
	background: #98c5d8;
}

body.class

p
{
	margin: 0px 0px 15px 0px;
	font-size: 0.875em;
	line-height: 1.4em;
	text-align: left;
	font-family: "open_sanslight";
}

b
{
	font-family: "open_sanssemibold";
}

a:link, a:visited
{
	text-decoration: none;
	color: #484e53;
	font-family: "open_sanslight";
}

a:hover, a:active, a:focus
{
	text-decoration: underline;
	color: #484e53;
	outline: none;
	font-family: "open_sanslight";
}

h1
{
	font-size: 1.6em;
	line-height: 1.3em;
	font-family: "open_sansbold";
	color: #484e53;
	margin: 0px 0px 10px 0px;
}

form
{
	margin: 0px 0px 0px 0px;
}

.clear
{
	clear: both;
}

[class^='column']
{
  	float: left;
}

.column_25
{
	position: relative;
	width: 25%;
}

.column_33
{
	position: relative;
	width: 34%;
}

.column_50
{
	position: relative;
	width: 50%;
}

.column_66
{
	position: relative;
	width: 66%;
}

.column_75
{
	position: relative;
	width: 75%;
}

.column_100
{
	position: relative;
	width: 100%;
}

/*******************************************************************
	3.1 RESPONSIVE STARTET MIT DER KLEINSTEN BILDSCHIRMBREITE
*******************************************************************/

@media only screen and (min-width : 320px) {
	.container_headline
	{
		position: relative;
		background: red;
		
	}
	
	/*	ALLE KREISE MUESSEN 7% HOEHER SEIN DA DAS DISPLAY GESTAUCHT IST */
	.clock-wrapper
	{
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 50%;
		left: 0;
		width: 250px;
		height: 250px;
		margin: auto;
		padding: 5px;
		border-radius: 50%;
	}
	
	.clock-base
	{
		width: 250px;
		height: 250px;
		border: 2px solid white;
		border-radius: 50%;
		padding: 8px 0px 0px 8px;
	}
	
	.clock-di
	{
		position: absolute;
		z-index: 1;
		top: 15px;
		left: 15px;
		width: 230px;
		height: 230px;
	}
	
	.clock-dial .clock-indicator
	{
		position: absolute;
		width: 2px;
		height: 4px;
		margin: 113px 114px;
		background-color: white;
	}
	
	.clock-indicator:nth-child(1)
	{
		transform: rotate(30deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(2)
	{
		transform: rotate(60deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(3)
	{
		transform: rotate(90deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(4)
	{
		transform: rotate(120deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(5)
	{
		transform: rotate(150deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(6)
	{
		transform: rotate(180deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(7)
	{
		transform: rotate(210deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(8)
	{
		transform: rotate(240deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(9)
	{
		transform: rotate(270deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(10)
	{
		transform: rotate(300deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(11)
	{
		transform: rotate(330deg) translateY(-113px);
	}
	
	.clock-indicator:nth-child(12)
	{
		transform: rotate(360deg) translateY(-113px);
	}
	
	.clock-hour
	{
		position: absolute;
		z-index: 2;
		top: 80px;
		left: 128px;
		width: 4px;
		height: 65px;
		background-color: white;
		border-radius: 2px;
		transform-origin: 2px 50px;
		transition: .5s;
		-webkit-animation: rotate-hour 43200s linear infinite;
		-moz-animation: rotate-hour 43200s linear infinite;
	}
	
	.clock-minute
	{
		position: absolute;
		z-index: 3;
		top: 60px;
		left: 128px;
		width: 4px;
		height: 85px;
		background-color: white;
		border-radius: 2px;
		
		transform-origin: 2px 70px;
		transition: .5s;
		-webkit-animation: rotate-minute 3600s linear infinite;
		-moz-animation: rotate-minute 3600s linear infinite;
	}
	
	.clock-second
	{
		position: absolute;
		z-index: 4;
		top: 20px;
		left: 129px;
		width: 2px;
		height: 130px;
		background-color: white;
		transform-origin: 1px 110px;
		transition: .5s;
		-webkit-animation: rotate-second 60s linear infinite;
		-moz-animation: rotate-second 60s linear infinite;
	}
	
	.clock-second:after
	{
		content: "";
		display: block;
		position: absolute;
		left: -5px;
		bottom: 14px;
		width: 8px;
		height: 8px;
		background-color: white;
		border: solid 2px white;
		border-radius: 50%;
	}
	
	#pin_selector
	{
		position: absolute;
		background-color: transparent;
		width: 80px;
		height: 80px;
		bottom: 10px;
		right: 10px;
		border: 1px solid white;
		border-radius: 44px;
		display: block;
		text-align: center;
		float: left;
		margin: 0px 15px 15px 0px;
		padding: 19px 0px 0px 0px;
		color: white;
		font-family: "open_sanslight";
		font-size: 2.5em;
		transition: background-color 0.3s linear;
	}
	
	#pin_selector:hover, #pin_selector:active, #pin_selector:focus
	{
		cursor: pointer;
		background-color: white;
		color: #98c5d8;
	}

	#keyboard
	{
		display: none;
		position: absolute;
		width: 270px;
		height: 540px;
		top: 50%;
		left: 50%;
		margin: -260px 0px 0px -135px;
		overflow: hidden;
	}

		.list_control
		{
			position: relative;
			width: 270px;
			height: 79px;
			top: 0;
			left: 50%;
			margin: 0px 0px 0px -135px;
			background: green;
		}

			.item_control,
			.item_control_active
			{
				width: 20px;
				height: 20px;
				margin: 0px 20px 0px 0px;
				border: 1px solid white;
				border-radius: 20px;
				float: left;
			}

			.item_control_active
			{
				background: white;
			}

			.item_control:first-child
			{
				margin: 0px 20px 0px 65px;
			}

			.item_control:last-child
			{
				margin: 0px 0px 0px 0px;
			}

		.list_keys
		{
			list-style-type: none;
		}

			.item_digits
			{
				background-color: transparent;
				width: 80px;
				height: 80px;
				border: 1px solid white;
				border-radius: 44px;
				display: block;
				text-align: center;
				float: left;
				margin: 0px 15px 15px 0px;
				padding: 30px 0px 0px 0px;
				color: white;
				font-family: "open_sanslight";
				font-size: 2.5em;
				transition: background-color 0.3s linear;
			}

			.item_digits:nth-child(3n)
			{
				margin: 0px 0px 15px 0px;
			}

			.item_digits:nth-child(3n+1)
			{
				clear: both;
			}

			.item_digits:nth-child(10)
			{
				margin: 0px 15px 0px 95px
			}

			.item_digits:hover, .item_digits:active, .item_digits:focus
			{
				cursor: pointer;
				background-color: white;
				color: #98c5d8;
			}

		#login_success,
		#login_failed
		{
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -100px 0px 0px -100px;
			background: white;
			width: 200px;
			height: 200px;
			border-radius: 200px;
			color: #98c5d8;
		}
			#login_success > i,
			#login_failed > i
			{
				position: relative;
				top: 50%;
				left: 50%;
				margin: -65px 0px 0px -59px;
				font-size: 8em;
				color: #98c5d8;
			}

			#login_failed > i
			{
				margin: -65px 0px 0px -49px;
			}
			
	#container_userinterface
	{
		position: relative;
		width: 100vw;
		height: 100vh;
	}
	
		#wrap_userinterface
		{
			position: relative;
			width: 100%;
			padding: 30px;
		}
		
			#wrap_learn
			{
				position: relative;
				width: 80%;
				margin: 30px auto 0px auto;
			}
			
				#wrap_learn > h1
				{
					
				}
				
				#wrap_learn > p
				{
					font-size: 1em;
					line-height: 1.4em;
					font-family: "open_sanslight";
					margin: 0px 0px 15px 0px;
				}
			
				.learn_select
				{
					width: 100%;
					height: 40px;
					border-radius: 5px;
					margin: 0px 0px 20px 0px;
				}
				
				.learn_input
				{
					width: 100%;
					height: 40px;
					border-radius: 5px;
					margin: 0px 0px 20px 0px;
					padding: 0px 4px 0px 4px;
				}
				
				.learn_submit
				{
					background: red;
					width: 50%;
					height: 40px;
					border: none;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					float: left;
					font-size: 1em;
					font-family: "open_sanslight";
				}
				
				.learn_cancel
				{
					display: block;
					background: green;
					width: 50%;
					height: 40px;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
					margin: 0px 0px 0px 50%;
					text-align: center;
					padding: 12px 0px 0px 0px;
					font-size: 1em;
					font-family: "open_sanslight";
				}
		
			#statistics_headline
			{
				font-size: 1em;
				margin: 20px 0px 30px 0px;
				font-size: 1.6em;
				line-height: 1.3em;
				font-family: "open_sanslight";
				color: white;
				text-align: center;
			}
			
				#statistics_headline > i
				{
					margin: 0px 20px 0px 20px;
					color: white;
				}
		
			#wrap_bar
			{
				position: relative;
				width: 100%;
				overflow: hidden;
			}
		
				#list_week
				{
					width: 100%;
					overflow: hidden;
					margin: 0px 0px 20px 0px;
				}
				
					.item_week
					{
						width: 14.2857142857%;
						float: left;
					}
					
						.item_bar
						{
							height: 205px;
							padding: 0px 5% 5px 5%;
							border-bottom: 1px solid white;
						}
					
						.first_bar
						{
							border-left: 1px solid white;
						}
						
							.bar_rest
							{
								background: transparent;
								width: 100%;
							}
						
							.bar_pause
							{
								background: rgba(255,255,255,0.5);
								width: 100%;
							}
						
							.bar_total
							{
								position: relative;
								background: white;
								width: 100%;
							}
							
								.total_text
								{
									position: absolute;
									width: 100%;
									bottom: 5px;
									text-align: center;
									font-family: "open_sanslight";
									font-size: 0.75em;
								}
						
						.item_weekday
						{
							padding: 5px 0px 5px 0px;
							text-align: center;
							font-family: "open_sanslight";
							font-size: 1em;
							color: white;
							
						}
				
					#daily_minimum
					{
						position: absolute;
						background: red;
						width: 100%;
						height: 2px;
					}
					
			#list_printables
			{
				width: 100%;
				overflow: hidden;
			}
			
				.item_printables
				{
					width: 33.3333333333%;
					padding: 5px;
					float: left;
				}
				
					.headline_printables
					{
						font-size: 0.875em;
						font-family: "open_sanssemibold";
						margin: 0px 0px 5px 0px;
						color: white;
					}
					
					.item_printables > p
					{
						font-family: "open_sanslight";
						font-size: 1.6em;
						color: white;
						margin: 0px;
						padding: 0px 0px 3px 0px;
					}
			
			#logout
			{
				position: absolute;
				width: 25px;
				height: 25px;
				top: 20px;
				right: 20px;
				color: white;
				font-size: 1.5em;
			}
			
			#close
			{
				position: absolute;
				width: 25px;
				height: 25px;
				top: 20px;
				left: 20px;
			}
			
			#hamburger
			{
				position: absolute;
				width: 25px;
				height: 25px;
				top: 20px;
				left: 20px;
			}
			
				#hamburger > a:link,
				#close > a:link > i
				{
					color: white;
					font-size: 1.5em;
				}
		
			#user_image
			{
				position: relative;
				width: 150px;
				height: 150px;
				margin: 10px auto 0px auto;
				border: 5px solid white;
				border-radius: 75px;
				overflow: hidden;
				box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
				text-align: center;
			}
			
				#user_image > img
				{
					width: 100%;
				}
			
				#user_image > i
				{
					font-size: 8em;
					color: white;
					margin: 14px 0px 0px 0px;
				}
				
			#daily_date
			{
				width: 100%;
				margin: 40px 0px 0px 0px;
				text-align: center;
				font-family: "open_sanslight";
				font-size: 1.2em;
				color: white;
			}
				
			#daily_user
			{
				width: 100%;
				height: 50px;;
				margin: 20px 0px 0px 0px;
				text-align: center;
				font-family: "open_sanslight";
				font-size: 3em;
				color: white;
			}
			
			#list_dailycontrol
			{
				position: relative;
				width: 380px;
				overflow: hidden;
				margin: auto auto;
			}
			
				.item_dailycontrol
				{
					width: 80px;
					height: 80px;
					padding: 22px 0px 0px 0px;
					margin: 0px 20px 0px 0px;
					border: 1px solid white;
					border-radius: 40px;
					float: left;
					text-align: center;
				}
				
				.item_dailycontrol:last-child
				{
					margin: 0px 0px 0px 0px;
				}
				
					.item_dailycontrol > i,
					.item_dailycontrol > a > i
					{
						color: white;
						font-size: 2em;
					}
					
				.item_dailycontrol:hover, .item_dailycontrol:active, .item_dailycontrol:focus
				{
					cursor: none;
					background-color: white;
				}
				
					.item_dailycontrol:hover > i, .item_dailycontrol:active > i, .item_dailycontrol:focus > i,
					.item_dailycontrol:hover > a > i, .item_dailycontrol:active > a > i, .item_dailycontrol:focus > a > i
					{
						color: #98c5d8;
						font-size: 2em;
					}
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 460px) and (orientation : landscape) {

}

/* Tablets (Portrait) ----------- */
@media only screen and (min-width : 768px) {

}

/* Tablets (landscape) ----------- */
@media only screen and (min-width : 768px) and (orientation : landscape) {

}