body { background-attachment: fixed !important;
	background: url(../media/rules.png);
	background-size: auto;
	background-position:center;
    background-repeat: no-repeat;
    background-color: #e9e7d9;    }

h1 {
	font-size: 2.0em;
	color: black;
	letter-spacing: 1px;
	border-bottom: 2px solid #ddd;
	margin: 0;
	-webkit-font-smoothing: antialiased; /* none - subpixel-antialiased möglich */ 
   text-shadow: 2px 2px 0px #fff;
}

h3 {
color: black;
text-align:center;

}

footer {
font-size: small;
	    width: 100%;
height: 50px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px; 
left: 0px; 
text-align: center; 
        }

h4 {
color: black;
text-align:center;
font-size: 9pt;

}


.container {
	text-align: center;
	margin: auto;
	color: #00000;
	text-shadow: -2px 0 black, 0 2px black,
      2px 0 black, 0 -2px black;
}


/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black;
}

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: center;
    font-size: 25pt;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Century Gothic', Arial;
    font-weight:bold;
    color: gold;
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Century Gothic', Arial;
    font-size: 300%;
    margin-top: 0.4em;
    font-weight: bold;
    color: diamant;
}