StyleSheet

@font-face {
  font-family: 'Gentium Basic';
  font-style: normal;
  font-weight: 400;
  src: local('Gentium Basic'), local('GentiumBasic'), url(/fonts/GenBasR.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Basic';
  font-style: normal;
  font-weight: 700;
  src: local('Gentium Basic Bold'), local('GentiumBasic-Bold'), url(/fonts/GenBasB.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Basic';
  font-style: italic;
  font-weight: 400;
  src: local('Gentium Basic Italic'), local('GentiumBasic-Italic'), url(/fonts/GenBasI.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Basic';
  font-style: italic;
  font-weight: 700;
  src: local('Gentium Basic Bold Italic'), local('GentiumBasic-BoldItalic'), url(/fonts/GenBasBI.woff) format('woff');
}

@font-face {
  font-family: 'Gentium Plus';
  font-style: normal;
  font-weight: 400;
  src: local('Gentium Plus'), local('GentiumPlus'), url(/fonts/GentiumPlus-R.woff) format('woff');
}
@font-face {
  font-family: 'Gentium Plus';
  font-style: italic;
  font-weight: 400;
  src: local('Gentium Plus Italic'), local('GentiumPlus-Italic'), url(/fonts/GentiumPlus-I.woff) format('woff');
}

@font-face {
  font-family: 'Symbola';
  src: local('Symbola'), url('/fonts/Symbola.woff') format('woff') url('/fonts/Symbola.ttf') format('truetype');
}

body {
    background:#fff;
    padding:2% 5%;
    margin:0;
    font-family: "Gentium Basic", "Gentium Plus", "Symbola", serif;
    font-size: 12pt;
}

div.header h1 {
    margin-top:2ex;
}

a {
    text-decoration: none;
    color: #0000ee;
}

a:visited {
    color: #551a8b;
}

div.content a.edit { color: red; }

div.header h1 a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
a:hover, span.caption a.image:hover {
    background:#fee;
}

img.logo {
    float: right;
    clear: right;
    border-style:none;
    background-color:#fff;
}
img.ccimg {
    max-width: none;
}
img {
    padding: 0.5em;
    margin: 0 1em;
    height: auto;
}
@media screen and (max-width: 600px) {
  img {
    max-width: 80%;
  }
}
@media screen and (min-width: 601px) and (max-width: 700px) {
  img {
    max-width: 70%;
  }
}
@media screen and (min-width: 701px) and (max-width: 800px) {
  img {
    max-width: 60%;
  }
}
@media screen and (min-width: 801px) and (max-width: 900px) {
  img {
    max-width: 50%;
  }
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
  img {
    max-width: 40%;
  }
}
@media screen and (min-width: 1001px) {
  img {
    max-width: 30%;
  }
}

a.image:hover {
    background:inherit;
}

a.image:hover img {
    background:#fee;
}

/* a.definition soll aussehen wie h2 */
h2, p a.definition {
    display:block;
    clear:both;
}

/* Such Link im h1 soll nicht auffallen. */
h1, h2, h3, h4, h1 a, h1 a:visited, p a.definition {
    color:#666;
    font-size: 22pt;
    font-weight: normal;
    margin: 4ex 0 1ex 0;
    padding: 0;
    border-bottom: 1px solid #000;
}

h3, h4 {
    font-size: inherit;
}

div.diff {
    padding: 1em 3em;
}
div.old {
    background-color:#FFFFAF;
}
div.new {
    background-color:#CFFFCF;
}
div.old p, div.new p {
    padding: 0.5em 0;
}
div.refer { padding-left:5%; padding-right:5%; font-size:smaller; }
div[class="content refer"] p { margin-top:2em; }
div.content div.refer hr { display:none; }
div.content div.refer { padding:0; font-size:medium; }
div.content div.refer p { margin:0; }
div.refer a { display:block; }
table.history { border-style:none; }
td.history { border-style:none; }

table.user {
    border-collapse: collapse;
}

table.user td {
    border: 2px solid black;
    text-align: left;
    padding: 0.5ex 1ex;
}

dt {
    font-weight:bold;
}
dd {
    margin-bottom:1ex;
}

textarea {
    width:100%;
    height:80%;
    font-size: 9pt;
}
textarea#summary { height: 3em; }
input {
    font-size: 9pt;
}
div.image span.caption {
    margin: 0 1em;
}
li img, img.smiley, .noborder img {
    border:none;
    padding:0;
    margin:0;
    background:#fff;
    color:#000;
}
/* Google +1 */
a#plus1 img {
    background-color: #fff;
    padding: 0;
    margin: 0;
    border: none;
}

div.header img, div.footer img { border:0; padding:0; margin:0; }
/* No goto bar at the bottom. */
.footer .gotobar, .footer .edit br { display: none; }

.left { float:left; }
.right { float:right; }
div.left .left, div.right .right {
    float:none;
}
.center { text-align:center; }

span.author {
    color: #501;
}
span.bar a {
	padding-right:1ex;
}

.rc .author {
    color: #655;
}

.rc strong {
    font-weight: normal;
    color: inherit;
}

.rc li {
    position:relative;
    padding: 1ex 0;
}

hr {
    border:none;
    color:black;
    background-color:#000;
    height:2px; 
    margin-top:2ex;
}

div.footer hr {
    height:4px;
    margin: 2em 0 1ex 0;
    clear:both;
}

div.content > div.comment {
    border-top: none;
    padding-top: none;
    border-left: 1ex solid #bbb;
    padding-left: 1ex;
}

div.wrapper > div.comment {
  border-top: 2px solid #000;
  padding-top: 2em;
}

pre {
    padding: 0.5em;
    margin-left: 1em;
    margin-right: 2em;
    white-space: pre;
    overflow:hidden;
    white-space: pre-wrap;      /* CSS 3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* Internet Explorer 5.5+ */
}

tt, pre, code {
    font-size: 80%;
};