/* -----------------------------------------------------------------------------
Dateiname: mediothek.css                             
Version: 1.5
Autor: Michael Havemann                             
Änderungsdatum: 19/11/2011
Änderung: neue .plakat
----------------------------------------------------------------------------- */
body {
        background-color: #edfbfc;
      	color: #101782;
        width: 750px;
	      font: normal 0.81em/1.4 'Trebuchet MS', Helvetica, sans-serif;
}
h1, h2, h3 {
	      font-weight: bold;
	      line-height: 1.2;
	      margin-top: 1.4em;
	      margin-bottom: 0.7em;
}
h1 {
	      margin-top: 0.5em;
	      font-size: 140%;
	      text-transform: uppercase;
        color: #b62544;
        border-bottom: 1px solid #b62544;
}
h2 {
	      font-size: 140%;
}
h3 {
        font-size: 125%;
}
hr {
        width: 15em;
        height: 1px;
        text-align: left;
        margin: 1.5em 0 0 0;
        color: gray;
}
a:link, a:visited {
      	color: #101782;
      	text-decoration: underline;
}
a:active, a:hover {
        color: #b62544;
}
ul {
        list-style: bullet;
        padding-left: 1em;
}
#nav {
        background: url(../images/logo_schmoll_750x149.jpg) top left no-repeat;
        height: 210px;
        margin-bottom: 1.0em;
}
#nav ul {
        position: absolute;
        top: 150px;
        left: 8px;
        padding: 0;
        background-color: #101782;
	      list-style: none;
        font-weight: bold;
        font-size: 125%;
        text-align: center;
	      text-transform: uppercase;
        -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
             -o-border-radius: 10px;
                border-radius: 10px;
}
#nav ul li {
        display: inline;
}
#nav a {
        display: inline;
        float: left;
        width: 149px;
        margin: 0.5em 0;
        padding: 0.3em 0;
        border-right: 1px solid #9ea0a0;
        -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
}
#nav a.letzte {
        border-right-width: 0px;
}
#nav a:link, #nav a:visited {
  	    color: #9ea0a0;
	      text-decoration: none;
	      font-weight: bold;
}
#nav a:focus, #nav a:hover {
	      color: #fff;
      	text-decoration: none;
      	font-weight: bold;
        text-shadow: 0 0 2px #fff,  
                     0 0 4px #fff, 
                     0 0 6px #fff, 
                     0 0 8px #ff00de, 
                     0 0 14px #ff00de, 
                     0 0 16px #ff00de, 
                     0 0 20px #ff00de, 
                     0 0 30px #ff00de;
        /* Quelle dieses Neon-Effekts: www.line25.com */                   	
}
.seite {
        clear: both;
        width: 100%;
        margin: 0 0 1.5em 0;
        padding: 0;
}
.seite img {
	      border: none;
        -webkit-box-shadow: 3px 3px 5px #000;
           -moz-box-shadow: 3px 3px 5px #000;
                box-shadow: 3px 3px 5px #000;
        margin: 0 1em 2em 0;
        float: left;
        width: 600px;
        max-width: 75%;
        -webkit-transform: rotate(-3deg);  /* Saf3.1+, Chrome */
           -moz-transform: rotate(-3deg);  /* FF3.5+ */
            -ms-transform: rotate(-3deg);  /* IE9 */
             -o-transform: rotate(-3deg);  /* Opera 10.5 */
                transform: rotate(-3deg);  
}
.zweispaltig {
        text-align: justify;
        -webkit-column-count: 2;
           -moz-column-count: 2;
                column-count: 2;
        -webkit-column-gap: 2em;
           -moz-column-gap: 2em;
                column-gap: 2em;
        -webkit-column-rule: 1px solid #101782;
           -moz-column-rule: 1px solid #101782;
                column-rule: 1px solid #101782;   
}                
.zweispaltig h1 {
        -webkit-column-span: all;
           -moz-column-span: all;
                column-span: all;
}                
.linkespalte {
        clear: left;
        float: left;
        width: 340px;
        background: -webkit-gradient(linear, left top, left bottom, from(#8998db), to(#4355b7));
        background: -moz-linear-gradient(top, #8998db, #4355b7);
        background: -o-linear-gradient(top, #8998db, #4355b7);
        background: linear-gradient(top, #8998db, #4355b7);
        color: white;
        border: 1px solid #101782;
        -webkit-border-radius: 20px 0 0 20px;
           -moz-border-radius: 20px 0 0 20px;
             -o-border-radius: 20px 0 0 20px;
                border-radius: 20px 0 0 20px;
        -webkit-box-shadow: 3px 3px 5px #000;
           -moz-box-shadow: 3px 3px 5px #000;
                box-shadow: 3px 3px 5px #000;
        margin: 0 0 1.5em 0;
        padding: 1em;
}
.rechtespalte {
        clear: right;
        float: right;
        width: 340px;
        background-color: #ffff98;
        border: 1px solid #101782;
        -webkit-border-radius: 0 20px 20px 0;
           -moz-border-radius: 0 20px 20px 0;
             -o-border-radius: 0 20px 20px 0;
                border-radius: 0 20px 20px 0;
        -webkit-box-shadow: 5px 5px 7px rgba(0,0,0,0.5) inset;
           -moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5) inset;
           -moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5) inset;
        margin: 0 0 1.5em 0;
        padding: 1em;
}
.versteckt {
        visibility: hidden;
}
p:hover {
        visibility: visible;
}
.avatar {
	      list-style: none;
	      padding-left: 0;
}
.avatar li { 
        clear: left;
}
.avatar li:first-line { 
        font-weight: bold;
}
.avatar img { 
        width: 40px;
        height: 40px;
        float: left;
        margin-right: 1em;
        margin-bottom: 1em;
        -webkit-box-shadow: 2px 2px 3px #000;
           -moz-box-shadow: 2px 2px 3px #000;
                box-shadow: 2px 2px 3px #000;
        -webkit-transition: all 0.5s ease-in-out;
           -moz-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;
}
.avatar img:hover { 
        -webkit-transform: scale(1.5);
           -moz-transform: scale(1.5);
                transform: scale(1.5);
        -webkit-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.6);
           -moz-box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.6);
                box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.6);     
}
.plakat {
        width: 15em;
        margin-left: 3em;
        padding: 1em;
        font-size: 125%;
        text-align: center;
        color: white;
        background: #4355b7; /* Old browsers */
        background: -moz-linear-gradient(top, #4355b7 0%,
                                              #8998db 50%,
                                              #4355b7 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, 
                                              color-stop(0%,#4355b7),
                                              color-stop(50%,#8998db),
                                              color-stop(100%,#4355b7)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #4355b7 0%,
                                                 #8998db 50%,
                                                 #4355b7 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #4355b7 0%,
                                            #8998db 50%,
                                            #4355b7 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #4355b7 0%,#8998db 50%,#4355b7 100%); /* IE10+ */
        background: linear-gradient(top, #4355b7 0%,
                                         #8998db 50%,
                                         #4355b7 100%); /* W3C */
        -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
             -o-border-radius: 10px;
                border-radius: 10px;
        -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
           -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
                box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
}
#fusszeile {
        font-size: 85%;
}
#fusszeile p {
        margin: 0;
}