*, html {
    margin:						0;
    padding:					0;
}

html {
	width: 						100%;
	height: 					100%;
	-webkit-font-smoothing: 	antialiased;
	-webkit-text-size-adjust: 	none;
	
}

body {
	font-family: 				'Open Sans', sans-serif;
    font-size: 					16px;
    color: 						#333;
    background-color:			#e0e0e0;
    padding: 					0;
    -webkit-font-smoothing: 	antialiased;
	-webkit-text-size-adjust: 	none;
}

input {
	font-family: 				'Open Sans', sans-serif;
	font-size: 					1em;
	-webkit-box-sizing: 		border-box;
	-moz-box-sizing: 			border-box;
	box-sizing: 				border-box;
	padding: 					6px 8px;
	background-color: 			#efefef;
	border: 					1px solid #ccc;
	color: 						#666;
}

#main {
	margin: 					0 auto;
	width: 						768px;
	height: 					1004px;
	background-color:			white;
	overflow: 					scroll;
}

#main div.error {
	display: 					none;
	text-align: 				center;
	margin-top: 				24px;
	margin-bottom: 				24px;
}

#main div.error > span {
	background-color: 			#c00;
	color: 						white;
	padding: 					8px 16px;
	border-radius: 				20px
}

#homeLogo {
	display: 					block;
	margin: 					200px auto 32px auto;
}

#login {
/* 	display: 					none; */
	text-align: 				center;
}

#login input {
	width: 						36%;
	display: 					block;
	margin: 					16px auto;
}


#login input[type="submit"] {
	width: 						18%;
	color: 						white;
	background-color: 			#666;
	border: 					none;
	cursor: 					pointer;
}

#login input[type="submit"]:hover {
	text-decoration: 			underline;	
}

#error,
#chooser {
	display: 					none;
	position: 					fixed;
	left: 						0;
	top: 						0;
	width: 						100%;
	height: 					100%;
	background-color:			rgba(0,0,0,0.5);
	z-index: 					2;
}

#chooser {
/* 	display: 					block; */
}

#error > div {
	position: 					relative;
	margin: 					64px auto;
	width: 						400px;
	background-color: 			#c00;
	color: 						white;
	font-weight: 				600;
	padding: 					8px 16px 64px 16px;
	border-radius: 				20px
}


#error button {
	position: 					absolute;
	right: 						16px;
	bottom: 					16px;
	-webkit-appearance: 		none;
	-moz-appearance:			none;
	background-color:			white;
	border: 					none;
	font-family: 				'Open Sans', sans-serif;
	color: 						#333;
	font-weight: 				600;
	font-size: 					1em;
	padding: 					4px 16px;
	border-radius: 				12px;
	cursor: 					pointer;
}

#chooser button {
	position: 					absolute;
	right: 						16px;
	bottom: 					16px;
	color: 						white;
	background-color: 			#666;
	border: 					none;
	-webkit-appearance: 		none;
	-moz-appearance:			none;
	font-family: 				'Open Sans', sans-serif;
	font-weight: 				600;
	font-size: 					1em;
	padding: 					4px 16px;
	border-radius: 				12px;
	cursor: 					pointer;
}

#chooser > div {
	position: 					relative;
	margin: 					64px auto;
	width: 						600px;
	background-color: 			white;
	padding: 					8px 16px 64px 16px;
	border-radius: 				20px
}

#chooser > div > ul {
	list-style: 				none;
	color: 						#78c81e;
}

#chooser > div > ul > li {
	line-height: 				48px;
	border-bottom: 				1px solid #999;
}

#chooser > div > ul.table > li {
	float: 						left;
	width: 						60px;
	text-align: 				center;
	border-bottom: 				none;
	border-top: 				1px solid #999;
}

#chooser > div > ul.table > li.front,
#chooser > div > ul.table > li.back {
	width: 						50%;
	font-weight: 				600;
}

#chooser > div > ul.table > li.front {
	border-top:					none;
}

#chooser > div > ul.table > li.week {
	width: 						100%;
	border-top:					none;
	color: 						#333;
	font-weight: 				600;
}

#chooser > div > ul.table > li.clear {
	clear: 						left;
	width: 						0;
	border: 					none;	
}

#chooser > div > ul:not(.table) > li:last-child {
	border-bottom: 				none;	
}


#chooser > div > ul > li:hover {
	cursor: 					pointer;
	text-decoration: 			underline;
}

#content {
	display: 					none;
	position: 					relative;
	padding-left: 				76px;
	padding-left: 				48px;
	height: 					100%;
}

#content div.letterBar {
	position: 					absolute;
	right: 						0;
	top: 						0;
	bottom: 					0;
	width: 						62px;
	background-color:			#78c81e;
	padding-top: 				6px;
}

#content div.letterBar > ul {
	list-style: 				none;
	text-align: 				center;
	color: 						white;
	font-weight: 				600;
	line-height: 				38px;
}

#content div.letterBar > ul > li {
	cursor: 					pointer;
}


#buttonBar {
	position: 					absolute;
	left: 						0;
	top: 						0;
	bottom: 					0;
	width: 						76px;
	background-color:			#78c81e;
	padding-top: 				24px;
	border-right:				2px solid white;
	z-index: 					1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#buttonBar > div,
#buttonBar > a > div {
	background: 				url(../if/ifElements.png);
	background-size: 			76px 700px;
	width: 						76px;
	opacity: 					0.5;
}

#buttonBar > #home {
	height: 					52px;
}

#buttonBar > #abfall {
	height: 					54px;
	background-position: 		0 -52px;
}

#buttonBar > #gemeinde {
	height: 					60px;
	background-position: 		0 -106px;
}

#buttonBar > #schulen {
	height: 					47px;
	background-position: 		0 -166px;
}

#buttonBar > #vereine {
	height: 					49px;
	background-position: 		0 -213px;
}

#buttonBar > #inserenten {
	height: 					62px;
	background-position: 		0 -262px;
}

#buttonBar > #kalender {
	height: 					62px;
	background-position: 		0 -324px;
}

#buttonBar > #medizinischeDienste {
	height: 					60px;
	background-position: 		0 -386px;
}

#buttonBar > #notfall {
	height: 					61px;
	background-position: 		0 -446px;
}

#buttonBar > #geheZuSeiteX {
	height: 					66px;
	background-position: 		0 -507px;
}

#buttonBar > div.enabled {
	cursor: 					pointer;
	opacity: 					1;
}

#buttonBar > a > #faceTime {
	height: 					47px;
	background-position: 		0 -573px;
	margin: 					32px 0;
	opacity: 					1;
}

#buttonBar > div.line {
	background: 				white;
	height: 					2px;
	min-height: 				2px;
	margin: 					24px 0;
	opacity: 					1;
}
	
#years {
	position: 					fixed;
	left: 						0;
	top: 						0;
	width: 						100%;
	height: 					0;
	z-index: 					1;
}

#years > div {
	margin: 					0 auto;
	width: 						556px;
}

#years ul {
	list-style: 				none;
	width: 						540px;
	height: 					48px;
	margin-left: 				14px;
	opacity: 					0.9;
	border-left: 				1px solid #78c81e;
	border-bottom: 				1px solid #78c81e;
	border-right: 				1px solid #78c81e;
}

#years li {
	float: 						left;
	width: 						33.333333%;
	height: 					48px;
	line-height: 				60px;
	text-align: 				center;
	background-color: 			#eaffd3;
	font-weight: 				600;
	color: 						#78c81e;
	cursor: 					pointer;
}

#years ul.fifty li {
	width: 						50%;
}

#years li:hover {
	text-decoration: 			underline;
}

#years li.active {
	background-color: 			#78c81e;
	color: 						white;
}

#years li.active:hover {
	cursor: 					default;
	text-decoration: 			none;
}

#agendas {
	list-style: 				none;
	margin: 					0 108px 0 74px;
	height: 					100%;
	overflow: 					scroll;
	-webkit-overflow-scrolling: touch;
}

#agendas > li {
	line-height: 				48px;
	border-bottom: 				1px solid #999;
	cursor: 					pointer;
}

#agendas > li:first-child {
	padding-top: 				53px;
}

#agendas > li > div.left {
	float: 						left;
	width: 						70%;
	color: 						#78c81e;
	white-space: 				nowrap;
	overflow: 					hidden;
	text-overflow: 				ellipsis;
}

#agendas > li:hover > div.left {
	text-decoration: 			underline;
}


#agendas > li > div.right {
	float: 						left;
	width: 						30%;
	font-size: 					0.8em;
	color: 						#999;
	text-align: 				right;
	white-space: 				nowrap;
	overflow: 					hidden;
	text-overflow: 				ellipsis;
}

#agenda {
	display: 					none;
	position: 					relative;
	overflow: 					hidden;
	width: 						720px;
	height: 					1004px;
}

#agenda > div {
	float: 						left;
	display: 					inline;
	padding: 					0;
	margin: 					0;
/* 	width: 						2170px; */
	white-space: 				nowrap;
	transition-property: 		transform;
	transition-duration: 		0.5s;
	transition-timing-function: ease-out;
	/*apply a transform to kick in the hardware acceleration.  Without this, the first
	            time we add the transform you get odd rendering of the divs (half missing) */
	transform:					translate(0, 0);
}

#agenda > div > img {
	width: 						720px;
	vertical-align: 			top;
}

#landscape {
	display: 					none;
	margin: 					0 auto;
	width: 						1024px;
	height: 					748px;
	background-color:			white;
	overflow: 					scroll;
	text-align: 				center;
}

#landscape > div {
	margin: 					300px 0;
}

#landscape > div > span {
	background-color: 			#c00;
	color: 						white;
	padding: 					8px 16px;
	border-radius: 				20px
}

@media (orientation: landscape) {
	#main {
		display: 				none;
	}
	
	#landscape {
		display: 				block;
	}
}

div.clear {
	clear: 						both;
}