@charset "UTF-8";

/*
 * on time clock v1.4 - CSS Design
 * © 2013 by Jano Kaltenbach - jano.kaltenbach[at]uni-weimar[dot]de
 *
 * */

* {
        margin: 0;
        padding: 0;
}

body {
	background-color:black;
	padding-top: 10px;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: black;
	opacity: 0;
}

#title {
	margin: 30px auto 0 auto;
	height: 42px;
	width: 679px;
	font-size: 35px;
	text-decoration: none;
	color: black;
	
}

#about {
	float: left;
	background-image: url(images/title.png);
	height: 42px;
	width: 529px;
	background-position: left;
}
#contact {
	float: left;
	background-image: url(images/title.png);
	height: 42px;
	width: 150px;
	background-position: right;
}
	
#uhr {

	position: relative;
	width: 100%;
	height: 550px;
	margin: 0 auto 0 auto;
	background: url(images/bg.png);
	background-color: black;
        background-position: center;
    background-repeat: no-repeat;
}

#sec, #min, #hour {
	position: absolute;
	width: 29px;
	height: 550px;
	top: 0px;
	left: 48%;
	color: white;
}

#sec {
	/*background: url(images/sekunden.png);*/
	background-color: darkred;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	
	width: 3px;
	height: 50%;
	margin-left: 19px;
	z-index: 1;
}

#min {
	background: url(images/minuten.png);
	z-index: 3;
	margin-left: 7px;
	top: -3px;
}

#hour {
	background: url(images/stunden.png);
	z-index: 2;
	margin-left: 7px;
	top: -3px;
}

#abouttext {
	margin: 0 auto 0 auto;
	color: grey;
	font-family: Helvetica, Arial;
	font-size: 14px;
	width: 100%;
	min-width: 560px;
	max-width: 1050px;
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;
}

#realuhr {
	margin: auto;
	text-align: center;
	color: white;
}

p {
        text-align: left; 
        padding: 10px 0 0 0;
        }
        
@media only screen and (max-width: 500px) { 
        #uhr {zoom: 0.6;}
        #title {display:none;}
        #abouttext {column-count: 1; min-width: 100%;}

}