/* animaux.de CSS 2011 Alexander Rutz */

@charset 'utf-8';
@import url(reset.css);
@import url('http://fonts.googleapis.com/css?family=Alegreya:400italic,400,700|Alegreya+SC');

/*@import url('http://fonts.googleapis.com/css?family=IM+Fell+English+SC|IM+Fell+English:400,400italic');*/

html {
font-size: 125%;
line-height: 1.5em;
height: 100%;
} 

body {
font-size: 1em;
font-family: 'Alegreya', 'IM Fell English', Constantia, Georgia, 'Liberation Serif', 'serif';
text-align: left;
vertical-align: baseline;
color: #000;
padding: 0 0 0.1em 0;
margin: 0;
background: white url('../img/whitenoise.png') repeat top left;
}

p {
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
margin: 0em 0em 0.666em 0em;
clear: right;
}

p.description, li.subkat {
font-family: 'Alegreya SC', 'IM Fell English SC';
letter-spacing: 0.1em;
text-transform: lowercase;
}

h1 {
font-size: 1em;
line-height: 1.25em;
font-style: italic;
margin: 0em 0em 0.666em 0em;
}

p.ccpp, header ul {
font-family: 'Lucida Grande', Calibri, Arial, 'sans';
}

/* Use Google Fonts for Safari/Webkit-only! */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  body {
  font-family: 'IM Fell English';
  font-size: 1.15em;
  }
  
  p.description, li.subkat {
  font-family: 'IM Fell English SC';
  letter-spacing: 0.1em;
  text-transform: lowercase;
  }
}
*/

section {
position: relative;
left: 0em;
padding: 1.25em 1em 1em 12em;
text-shadow: 0px 1px 0px white;
}

header {
position: fixed;
left: 0;
top: 0;
width: 8em;
line-height: 1.25em;
margin: 0em 0em 1.5em 0em;
padding: 1.25em 1em 0.75em 1.5em;
z-index: 9;
}

header p.subtitel {
line-height: 1.25em;
}

header ul {
font-size: 0.5em;
line-height: 2em;
margin-top: 1.25em;
}

header ul a, header ul span {
padding: 0.2em 0.5em 0.3em 0.5em;
border-radius: 1em;
-moz-border-radius: 1em;
}

header ul span {
color: white;
background: #999;
}

header a:hover {
color: #000;
}

nav li.label {
color: #666;
}

hr {
background: #000;
height: 0.083em;
border: none;
margin: 0.5em 0em;
}

img.adlogo, img.lpaqpflogo {
padding: 0em 1em 0em 0em;
z-index: 9;
}

img.adlogo {
width: 12.875em; 
height: 3.125em;
}

img.lpaqpflogo {
width: 10.25em; 
height: 3.125em;
}

h2 {
font-weight: normal;
font-size: 1em;
line-height: 1.25em;
border-bottom: 0.125em solid #000;
margin: 0em 0em 0.5em 0em;
padding: 0 0 0.1em 0;
clear: both;
} 

p.ccpp {
font-size: 0.5em;
line-height: 1.75em;
}

div.ccpp {
padding: 0.25em 0em 0em 0em;
}

div.ccpp form {
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
padding: 0em;
float: left;
}

input.donate {
width: 74px;
height: 21px;
margin: 0em 0.75em 0em 0em;
padding: 0;
border: 5px solid #999;
background: #999;
border-radius: 15px;
-moz-border-radius: 15px;
}

input.donate:hover {
border: 5px solid white;
background: white;
}

div.ccpp img {
margin: 0em 0.5em 0em 0em;
float: left;
}

div.p_expander {
font-weight: normal;
font-size: 1.333em;
line-height: 2em;
margin: 0.5em 0em 0.5em 0em;
clear: right;
}

ul {
list-style-type: none;
border: 0em;
padding: 0em;
}

section li {
font-size: 0.75em;
line-height: 1.5em;
margin: 0em 0em 0.5em 0em;
}

ul.subkat {
list-style-type: none;
margin: 0em 0.75em 1.5em 0em; 
border: 0em;
float: left;
}

ul.album {
width: 100%;
}

li.subkat {
width: 12.5em;
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
border-bottom: 0.083em solid #000;
margin: 0em 0em 0.667em 0em;
clear: both;
}

li.widesubkat {
width: 100%;
font-style: normal;
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
border-bottom: 0.083em solid #000;
margin: 0em 0em 0.667em 0em;
clear: both;
}

subkat li.widesubkat {
border-bottom: 0.083em solid #444;
}

li.widesubkat-h2 {
font-style: normal;
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
border-bottom: 0.166em solid #000;
margin: 0em 0em 0.667em 0em;
clear: both;
}

li.entry {
font-style: normal;
font-weight: normal;
width: 12.5em;
font-size: 0.75em;
line-height: 1.75em;
clear:both;
}

div.beschreibung {
max-width: 41em;
}

div.beschreibung li:before, footer li.subentry:before {
content: "›";
padding:0 0.5em 0 0;
}

div.beschreibung ul, footer ul {
padding-left: 0.5em;
text-indent: -0.5em;
}

li.entry span {
font-style: italic;
}

li.subentry {
font-style: normal;
font-weight: normal;
font-size: 0.75em;
line-height: 1.75em;
clear: both;
border-bottom: 0.083em solid #DDD;
}

li.subentrysans {
border-color: transparent;
}

a, span.detail,
a:visited {
text-decoration: none;
color: #000;
background-color: white;
border-bottom: 1px solid #EEE;
cursor: pointer;
}

nav a,
footer a {
border-bottom: none;
}

a:hover, span.detail:hover {
text-decoration: none;
color: white!important;
background-color: rgb(180,0,0);
background-color: rgba(180,0,0,0.75);
text-shadow: none;
}

/* 
section a:before { content: ' ' }
section a:after { content: ' ' }

section a:hover {
border-bottom: 1px solid transparent;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
}
 */

p.navtext a:hover {
color: white;
background: #d00;
text-shadow: none;
}

a:active, span.detail:active {
text-decoration: none;
color: #000;
text-shadow: #f33 0em 0em 12em;
background-color: transparent;
}

span.grau {
font-style: normal;
color: #888;
}

img {
border: 0em;
}

img.normal, input {
padding: 0em;
margin: 0em 0.666em 0.666em 0em;
float: left;
}

img.cover {
padding: 0em;
margin: 0em 0.666em 0.666em 0em;
float: left;
}

/*
img.cover, img.normal {
-webkit-box-reflect:below 0em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(rgba(255, 255, 255, 0.25)));
}
*/

img.visual {
padding: 0em 0em 0em 0em;
margin: 0em 0.666em 0.666em 0em;
border: 0em;
float: left;
height: 7em;
}

img.visual:hover {
-webkit-box-shadow: #f33 0em 0em 4em;
-moz-box-shadow: #f33 0em 0em 4em;
box-shadow: #f33 0em 0em 4em;
}

object {
margin: 0em 0em 0.25em 0em;
border: 0em;
display: inline;
vertical-align: top;
}

pre {
font-size: 0.75em;
line-height: 1.5em;
}

#clear {
clear: both;
}

#zoom {
cursor: url('../img/lupe.cur'), pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}

#zoom:hover {
-webkit-box-shadow: #f33 0em 0em 4em;
-moz-box-shadow: #f33 0em 0em 4em;
box-shadow: #f33 0em 0em 4em;
}

audio {
height: 1.5em;
background: #FFF;
}

.iesucks {
background: #ffcccc;
padding: 0.25em 0.5em;
border: 0.2em solid #ff0000;
}

footer {
margin: 0 1em 1em 12em;
padding: 1em 1em 0.5em 1em;
background: #ccc url(../img/noise.png) repeat;
color: #222;
clear: both;
text-shadow: 0px 1px 0px #ddd;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-box-shadow: #ccc 0em 0em 0.25em;
-moz-box-shadow: #ccc 0em 0em 0.25em;
box-shadow: #ccc 0em 0em 0.25em;
}

footer a {
color: #333!important;
background: rgba(255,255,255,0.25)!important;
text-shadow: none!important;
}

footer a:hover {
color: white!important;
background: none!important;
text-shadow: #666 0em 0em 0.25em;
}

footer hr {
background: #444;
}

footer ul.subkat {
float: none;
margin-bottom: 1em;
margin-right: 0;
}

footer ul li span {
color: #999;
}

footer li.subentry {
border-color: #999;
}

header span, header a {
text-shadow: none;
}

fieldset {
margin: 0em;
padding: 0em;
border: none;
}

span.spieler {
float: right;
display: none;
}

span.trackjplay {
display: none;
}

::selection {
color: rgb(180,0,0);
}

a {
-webkit-transition-property: all;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: all;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
}

/* Soundmanager */

.sm2_link,
.sm2_link:visited {
font-family: 'Alegreya SC', 'IM Fell English SC';
letter-spacing: 0.1em;
text-transform: lowercase;
color: #666;
font-weight: 400;
font-size: 13px;
line-height: 16px;
background: #EEE;
border: 1px solid #CCC;
padding: 0 0.25em 0.1em 0.25em;
margin: 0 0.25em 0 0;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
}

.sm2_link:before { content: 'play'; }
.sm2_link:hover { border-color: rgb(180,0,0);}

.sm2_loading:before { content: 'loading …'; }
.sm2_loading { background: white; }
.sm2_playing:before { content: 'playing …'; }
.sm2_playing { background: #666; border-color: #666; color: white; text-shadow: none; }
.sm2_paused:before { content: 'paused'; }
.sm2_paused { background: white; border-color: rgb(180,0,0); color: rgb(180,0,0);}

/* iPhone specific Layout */
@media only screen and (max-device-width: 480px) {
  html {
  -webkit-text-size-adjust: 125%;
  }
  
  html, body, header, section, footer {
  padding: 0;
  margin: 0;
  }
  
  header {
  position: relative;
  width: 100%;
  background: #ccc url(../img/noise.png) repeat;
  padding-bottom: 20px;
  border-bottom: 2px solid #999;
  }
  
  header h1, header p {
  padding: 10px 0 0 10px;
  margin: 0;
  -webkit-text-size-adjust: 110%;
  }
  
  nav ul {
  padding: 0 0 0 10px;
  line-height: 1.2em;
  }
  
  nav li {
  display: inline-block;
  border-radius: 0;
  padding: 0 5px 0 0;
  margin: 0;
  }
  
  nav li a {
  background: white!important;
  }
  
  section {
  -webkit-text-size-adjust: 73%;
  margin: 0;
  padding: 10px!important;
  }
  
  li.subkat, li.subentry {
  border-bottom-width: 0.1em;
  }
  
  p.navtext {
  font-size: 0.8em;
  line-height: 2em;
  margin-top: 1.25em;
  }
  
  div.beschreibung img {
  width: 100%;
  }
  
  footer {
  -webkit-text-size-adjust: 100%;
  -webkit-border-radius: 0!important;
  border-radius: 0!important;
  padding: 10px;
  -webkit-box-shadow: none;
  border-top: 2px solid #999;
  }
}

/* iPad specific Layout */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}