@font-face {
    font-family: 'Libre Baskerville';
    src: url('font/LibreBaskerville-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Regular.ttf') format('truetype');
}

/*------ General ---------------------- */
html {
    overflow-y:scroll;
}

body {
font-family: 'Libre Baskerville', serif;
background-color:#fff;
padding:0;
margin:0;
}

a { 
color:#1a8bb0;
text-decoration:none;
}

a:hover {
color: #17b3e6;
text-decoration:underline;
}

a[href^="http://"] {
    background: url(bilder/external.png) center left no-repeat;
    padding-left:13px;
}
a[href^="https://"] {
    background: url(bilder/external.png) center left no-repeat;
    padding-left:13px;
}

.screenshot  {
	border:2px;;
	border-style: solid;
	border-color:#1a8bb0;
	padding:0;
}

.thumbnail {
	margin-right:20px;
	margin-bottom:10px;
	vertical-align: top;
	width:200px;
    height:auto;
	padding:3px;
	border:1px solid #f0f0f0;
	float:left;

}

.thumbnail:hover {
	width:800px;
    height:auto;
	float:none;
	clear:both;
	display:block;
}

#roem img.thumbnail {
	margin-top:0px;
}


.bu {
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:300;
	color:#000;
	letter-spacing:0.5px;
	font-style: italic;

}

p {
margin-bottom:1em;
}

sub, sup 
{ line-height: 0 
}

/*------ Überschriften ---------------------- */
h1{
font-family: 'Roboto', sans-serif;
font-size:28px;
margin:10px 0;
padding:0 0 5px 0;
border-bottom:1px dashed #fff;
color:#474747;
letter-spacing:0.5px;
line-height:1.4em;
}

h2{
font-family: 'Roboto', sans-serif;
font-size:20px;
margin:2em 0 0.2em 0;
color:#000;
letter-spacing:0.5px;
}

h3{
font-family: 'Roboto', sans-serif;
font-size:16px;
margin:10px 0;
color:#525252;
letter-spacing:0.5px;
}

/*------ Struktur ---------------------- */
#wrapper {
width:900px;
margin:30px auto;
}

#logo  {
font-family: 'Roboto', sans-serif;
font-size:28px;
font-weight:bold;
color:#ff9900;
text-decoration:none;
letter-spacing:1px;
}

#logo:hover {
color:#ffe761;
}

/*------ Topnavigation ---------------------- */
#topnav {
width:100%;
height:50px;
padding:0 0 0 10px;
margin:20px 0 0 0; 
border-top:1px solid #17b3e6;
border-bottom:1px solid #17b3e6;
font-variant:small-caps;
letter-spacing:1px;
vertical-align: middle;
display: inline-block;
}

#topnav ul {
margin:15px 0;
padding:0 ;

}

#topnav li {
font-family: 'Roboto', sans-serif;
color:#cc0000;
font-weight:bold;
text-decoration:none;
list-style-type:none;
display: inline-block;
padding: 0 20px 0 20px;
}

#topnav li.a {
color:#474747;
}

#topnav li.a:hover {
color:#17b3e6;
}


/*------ Content ---------------------- */
#content {
font-size:16px;
line-height:1.7em;
color:#474747;
overflow:hidden;
height:auto;
text-align:left;
margin:10px 20px 30px 20px;
}

#haken li {
list-style-type: "\2713";
padding-left:10px;
}

#roem li {
list-style-type: upper-roman;
padding-top:1em;
}

#roem img {
	margin-top:1em;
}

table {
margin:1em 0 1em 0;
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}	/*	muss nach  tr:nth-child(even) stehen */

th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  vertical-align: top;
  background-color: #71c172;
  color: #000000;
}

#tdgrn {
background-color:#00ff00;
}
#tdglb {
background-color:#ffff00;
}
#tdrot {
background-color:#ff0000;
}

/*------ Footer ---------------------- */
#footer {
font-family: 'Roboto', sans-serif;
width:100%;
border-top:1px solid #17b3e6;
color:#aaaaaa;
font-size:11px;
font-weight:300;
margin:0 20px 0 0;
text-align:right;
}