/*------ index_shtml.css ------*/

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,500,500italic);

@media screen {

	html {
		font-family: Ubuntu, arial, verdana, sans-serif;
		font-size: 100%;
	}

	body {
		font-size: 13px;
		font-size: 0.875rem;
	}

	header {
		min-height: 100px;
		margin-top: 10px;
		width: 100%;
		text-align: center;
	}

	h1 {
		font-weight: bold;
		font-size: 1.4rem;
	}

	.folder {
		margin-top: 30px;
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
	}

	.force {
		padding: 10px 0;
		font-weight: bold;
		font-style: italic;
		text-decoration: underline;
	}

	.plain {
		display: inline-block;
		margin-top: 30px;
		width: 100%;
		text-align: center;
		font-weight: bold;
		color: white;
		background: lightgrey;
	}

	.ip {
		display: inline-block;
	}

	.href {
		text-decoration: none;
		color: white;
	}

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

	a:hover {
		text-decoration: underline;
		background: #eaeaea;
	}

		div.date, div.clock {font-size: 16px;}
		div.clock {font-size: 57px;}



	/*************	Calendar  ***************/

	section.theCalender {
		width: 100%;
	}

	section.links {
		text-align: center;
	}

	section.links header {
		min-height: 30px;
	}

	.calender {
	    margin: 0 auto;
	    width:280px;
	    border:1px solid black;
	    border-radius: 3px;
	}
	* html .calender,
	* + html .calender {
	    width:282px;
	}
	.calender div.after,
	.calender div.before{
	    /*color:silver;*/
	    color: rgb(228,116,85);
	}
	.day {
	    float:left;
	    width:40px;
	    height:40px;
	    line-height: 40px;
	    text-align: center;
	}
	.day.headline {
	    background: rgb(162,182,229);
	}
	.day.current {
	    background-color: lightgreen;
	    color: rgb(229,31,0);
	    font-weight:bold;
	    border-radius: 5px;
	}
	.clear {
	    clear:left;
	}
	.pagination {
	    text-align: center;
	    height:20px;
	    line-height:20px;
	    font-weight: bold;
	}
	.pagihead {
	    display:inline-block;
	    background: white;
	    width: 140px;
	    height: 20px;
	    color: black;
	}
	.pagination a {
	    width:20px;
	    height:20px;
	}
} /* Ende @media */


/* min-width = oberhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   min-width => Desktop-Bereich weil größerer Bereich
   min-width => Mobile-First, weil die Hauptdefinitionen (@media ohne Breite) für kleinere Bildschirme passen.
   ----------------------------------------------------------------------------------------
   max-width = unterhalb einer Breite von XXXpx des Screens sind diese Eigenschaften aktiv.
   max-width => Mobile-Bereich weil kleinerer Bereich 
   max-width => Desktop-First, weil die Hauptdefinitionen (@media ohne Breite) für größere Bildschirme passen.*/

@media screen and (max-width: 400px) {

	html {
		font-size: 80%; /* bei 100% wäre das Browserdefault, 16px  */
	}

	.link {
		display: inline;
	}

} /* Ende @media screen min-width 400px */