body {
margin: 0;
padding:0;
background-color: #f8f8ff;
opacity: 1;
font-family: Abel;
font-size: 1.25rem;
font-weight: 200;
letter-spacing: rem;
}

#navigation {
position: fixed;
top: 1.35rem;
right: 52%;
text-align: right;
line-height: 1.5rem;
padding-right: 0%;
font-size: 1.1rem;
font-family: ;
font-weight: 200;
letter-spacing: rem;
opacity: .4;
}

#content {
position: absolute;
top: 0;
right: 1%;
width: 49%;
padding-left:;
background-color:#f8f8ff;
opacity: 1;
}

#content-index {
position: absolute;
top: 0;
right: 1%;
width: 49%;
padding-left:;
background-color:#f8f8ff;
opacity: 1;
}

.id, .datum, .autor, .category {
	font-size: 1rem;
}

.media {
    float: left;
    width: 160px;
    margin: 0 .8rem 0 0;
    padding: 0;
}

h1 {
	margin: 1rem 0 1rem -.1rem;
	padding: 0;
	letter-spacing: -.25rem;
	font-size: 3rem;
}

ul {
	padding-left: 1.2rem;
	list-style: circle;
}

li {
	padding: 4px 0;
	margin: 0 0 0 .6rem;
}

p {
	padding-left: 0;
}

sup {
	font-size: .9rem;
}

pre {
	font-family: Abel;
	font-size: .9rem;
}

a:link { color:black; text-decoration:none;opacity:1; }
a:visited { color:black; text-decoration:none;opacity:1; }
a:hover { color:crimson; text-decoration:none;opacity:1; }
a:active { color:black; text-decoration:none;opacity:1; }

a.red:link { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.red:visited { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.red:active { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }







@media only screen and (max-width:768px) {
body {
margin:0;
padding:0;
background-color:#f8f8ff;
font-size:1.4rem;
line-height:1.55rem;
letter-spacing: rem;
}

#navigation {
position: absolute;
top: 20px;
left: 5%;
width: 95%;
margin-bottom: 2rem;
text-align: left;
font-size: 1.35rem;
line-height: 3.5rem;
font-weight: 200;
letter-spacing: -.1rem;
background-color: ;
}

#content {
position: absolute;
top: 50%;
left: 5%;
width: 93%;
border-top: 1px solid #666;
padding: 1rem 0 0 0;
}

#content-index {
position: absolute;
top: 2%;
left: 5%;
padding-left: 0;
width: 93%;
border-top: 0px solid #666;
}

.id, .datum, .autor {
	font-size: 1rem;
}

.media {
	float: left;
    width: 98%;
    margin: 0 0 .8rem 0;
    padding: 0;
}

h1 {
	font-size: 2.5rem;
	margin: 0 0 2rem -2px;
	letter-spacing: -.3rem;
	font-weight:600;
}

p {
	line-height: 1.7rem;
	font-size: 1.35rem;
}

ul {
	padding-left: 18px;
}

li {
	padding: 1rem 0;
}

sup {
	font-size: 80%;
}

a.red:link { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.red:visited { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.red:active { color:crimson; text-decoration:none;opacity:1; cursor:pointer; 
}
}