@font-face {
font-family:elite;
src: url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/specialelite.eot);
}
@font-face {
font-family:elite;
src: url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/specialelite.ttf);
} * {
margin:0;
padding:0;
}
html, body { 
background:#323232; 
height: 100%;
width:100%;
font-family:elite, verdana, arial, sans-serif;
font-size:14px;
word-spacing:0.3em;
line-height:1.5em;
}
.w{ color:#fff !important; }
#wrap{
position:realative;
margin:20px auto 60px;
width:300px;
}
h1 img{
width:100%;
max-width:500px;
}
article, h1, #menu, .inhalt{
background-color: #eee;
border-radius: 10px;
margin-bottom: 15px;
padding:5% 3%;
width:94%;
}
.site{
padding:5% 3%;
width:94%;
position:relative;
float:left;
margin-bottom:60px;
}
.site img{
max-width:100%;
}
h1{
text-align:center;
font-size:0.8em;
text-shadow: 1px 1px #333,-1px -1px #333;
background-color: #e01a21;
}
article a, .inhalt a{
color:#e01a21;
text-decoration:none;
}
.site a{
color:#e01a21;
}
.title, h2{
font-weight:700;
font-size:1.5em;
display:block;
border-bottom:1px dashed #999;
width:100%;
margin-bottom:10px;
}
article .date{
font-weight:300;
font-size:0.9em;
display:block;
border-top:1px dashed #999;
width:100%;
margin-top:10px;
}
article img, .inhalt img{
max-width:100% !important;
height:auto !important;
}
article *{
max-width:100%;
}
#menu{
position:fixed;
bottom:0px;
margin:0;
padding:0 10px;
left:50%;
margin-left:-150px;
width:280px;
height:42px;
box-shadow: 0 0 3px #999;
}
#nav, #links, .facebook, .mail, .google, .twitter{
position:relative;
float:left;
}
.facebook, .mail, .mobile_nav, .google, .twitter{
display:block;
float:right;
width:32px;
height:32px;
margin:5px;
}
.facebook{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat top left;}
.facebook:hover{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat bottom left;}
.mail{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat top center;}
.mail:hover{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat bottom center;}
.mobile_nav{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat top right; float:left;}
.mobile_nav:hover{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons.png) no-repeat bottom right;}
.google{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons2.png) no-repeat top left;}
.google:hover{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons2.png) no-repeat bottom left;}
.twitter{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons2.png) no-repeat top right;}
.twitter:hover{ background:url(//blog-n-roll.de/wp-content/themes/blog-n-roll-theme/style/icons2.png) no-repeat bottom right;}
#links{
position:relative;
float:left;
border-top:1px dashed #999;
width:100%;
margin-top:10px;
padding-top:10px;
overflow:hidden;
height:125px;
}
.inhalt{
position:relative;
float:left;
margin-bottom:60px;
}
.info{
font-weight:300;
font-size:0.8em;
}
.teilen, .teilen2{
width:100%;
margin-top:15px;
display: block;
}
.teilen2{
border-top:1px dashed #999;
padding-top:10px;
} #nav input[type=checkbox] {
position: absolute;
left: -9999px;
}
#nav label {
position:relative;
display:block;
cursor: pointer;
user-select:none;
}
#nav ul{
}
#nav ul li{
position:relative;
float:left;
width:100%;
background:none;
list-style:none;
padding:5px 0;
}
#nav ul li a{
text-decoration:none;
color:#E01A21;
font-weight:700;
display:block;
text-align:center;
font-size:1.2em;
}
#nav ul li a:hover{
background:rgba(224,26,33,0.05);
}
.navigation{
display:none;
position:absolute;
width:280px;
padding:10px;
height:260px;
background:#f9f9f9;
top:-280px;
left:-10px;
border-radius: 10px;
box-shadow: 2px 0 2px #999;
}
#nav[role="custom-dropdown"] input[type=checkbox]:checked ~ div {
display:block;
} @media (min-width: 480px) {
#wrap{
width:460px;
}
#menu{
width:440px;
margin-left:-230px;
}
.navigation{
width:440px;
}
h1{
font-size:1.3em;
}
}
@media (min-width: 767px) {
#wrap{
position:relative;
float:left;
left:50%;
margin:20px 0 60px -265px;
width:300px;
}
#menu{
position:relative;
float:left;
margin:150px 0 60px 30px;
padding:20px 0;
width:200px;
height:auto;
}
#nav[role="custom-dropdown"] input[type=checkbox], #nav[role="custom-dropdown"] label{
display:none;
}
.navigation{
display:inline;
position:relative;
float:left;
width:94%;
height:auto;
padding:0 3%;
background:none;
top:auto;
left:auto;
border-radius:0;
box-shadow: 0 0 0 #999;
}
.menu-navigation-container{
position:relative;
float:left;
}
#links{
position:relative;
float:left;
border-bottom:1px dashed #999;
margin-bottom:20px;
padding:10px 0;
}
.facebook, .mail, .google, .twitter{
position:relative;
float:left;
display:inline;
left:25%;
margin:5px 10px;
}
h1{
font-size:0.8em;
}
#links{
height:auto;
}
}
@media (min-width: 979px) {
#wrap{
width:650px;
margin:20px 0 60px -465px;
}
#menu{
width:250px;
margin-top:260px;
}
.menu-navigation-container{
position:relative;
float:left;
width:100%;
}
.facebook, .mail{
left:30%;
}
h1{
font-size:1.5em;
line-height:1.5em;
}
}