﻿/*****************************************************************************
* CSS-Layout von Uwe Prochnow <uwepr@online.de> für                          *  
* http://www.aquarienverein-rossmaessler-halle.de                            *
* 2008/2009 letzte Änderung: 05.02.2015                                      *
******************************************************************************/
@font-face {
    font-family: 'gandhi_serifbold_italic';
    src: url('GandhiSerif-BoldItalic-webfont.eot');
    src: url('GandhiSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('GandhiSerif-BoldItalic-webfont.woff') format('woff'),
         url('GandhiSerif-BoldItalic-webfont.ttf') format('truetype'),
         url('GandhiSerif-BoldItalic-webfont.svg#gandhi_serifbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gandhi_serifbold';
    src: url('GandhiSerif-Bold-webfont.eot');
    src: url('GandhiSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('GandhiSerif-Bold-webfont.woff') format('woff'),
         url('GandhiSerif-Bold-webfont.ttf') format('truetype'),
         url('GandhiSerif-Bold-webfont.svg#gandhi_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gandhi_serifitalic';
    src: url('GandhiSerif-Italic-webfont.eot');
    src: url('GandhiSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('GandhiSerif-Italic-webfont.woff') format('woff'),
         url('GandhiSerif-Italic-webfont.ttf') format('truetype'),
         url('GandhiSerif-Italic-webfont.svg#gandhi_serifitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gandhi_serifregular';
    src: url('GandhiSerif-Regular-webfont.eot');
    src: url('GandhiSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('GandhiSerif-Regular-webfont.woff') format('woff'),
         url('GandhiSerif-Regular-webfont.ttf') format('truetype'),
         url('GandhiSerif-Regular-webfont.svg#gandhi_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* 
Farben alt:
#eefded Texthintergrund
#daf6d7 Überschriftenhintergrund, Nav-Hintergrund
#d4f2d1 Zitathintergrund
#ceedcb hover-Hintergrund
#c8e9c5 body

#eefded Texthintergrund
#adc2ab
#7b8a79
#485246 Zitat-Border
#151a14 Textfarbe


für Links, Border für Überschriften, li, Navigation:
#ebfce9 background
#ff0000 hover
#cc0011 aktiv, focus
#990022 link
#660033 visited, Border für Überschriften, li, Navigation
Umrechnung hex==>dez
#c8e9c5 = 200, 233, 197
#660033 = 102, 0, 51
#adc2ab = 173, 194, 171
 */
/**** Grundformatierung ****/
/*für Bildschirmbreite 300-759px/420-759px*/
* {
margin: 0;
padding: 0;
}
body {
font-family: gandhi_serifregular, Verdana, Arial, serif;
font-size: 1.2em;
line-height: 1.4em;
background-color:#eefded;
color:#151a14;
padding: 5px;
-moz-box-shadow: inset 0 0 3px 3px #c8e9c5;
-webkit-box-shadow: inset 0 0 3px 3px #c8e9c5;
box-shadow: inset 0 0 3px 3px #c8e9c5;
}
img {
width: 100%;
height: auto;
display:block;
margin: 20px auto;
}
#logo {
display:block;
width: 33%;
float:right;
margin: 0px auto;
}
h1, h2, h3, h4 {
margin: 10px 0 10px 0;
padding: 5px 0;
}
h1, h2, h3, h4, h5, h6 {
	text-align: center;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
h3 {
font-size: 120%;
}
h4 {
font-size: 120%;
}
h5 {
font-size: 120%;
}
h6 {
font-size: 120%;
}
#Rahmen {
position:relative;/*Positionierung Navigation absolute*/
}
#Inhalt {
background:url(Grafik/Blattgruen.jpg); 
background-repeat: no-repeat;
background-position:center center;
}
h1 {
margin:10px 0px; 
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
letter-spacing:-0.03em;
font-weight:normal;
font-style:italic;
padding-top:20px;
}
h1:first-letter {
font-size:1.3em;
}
h2, h3, h4, h5, h6 {
margin:10px 0px; 
background-color: #daf6d7;
border-style: solid; 
border-color:#660033; 
border-width: 1px 0px 1px 0px;
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-weight:normal;
font-style:italic;
background: -moz-linear-gradient(top, #daf6d7, #f4fdf3);    
background: -webkit-linear-gradient(top, #daf6d7, #f4fdf3);
background: -ms-linear-gradient(top, #daf6d7, #f4fdf3);
background: -o-linear-gradient(top, #daf6d7, #f4fdf3);
}
h3, h4, h5, h6 {
box-shadow: 1px 2px 4px rgba(173, 194, 171, .2);
}
h2 {
font-variant:small-caps;
letter-spacing:-0.03em;
margin-bottom:29em;/*Platz für Navigation*/
}
h2:first-letter {
font-size:1.3em;
}
h3 {
letter-spacing:-0.01em;
}
.part {
margin:10px 0px;
}
.Text {
margin-bottom:30px;
}
ul, ol {
list-style-position:inside;
margin-bottom:30px;
}
.part ul li {
margin-bottom:10px;
}
.part ol li {
margin-bottom:10px;
}
/* Grundformatierung Links, Links im Fließtext */
a {
text-decoration:none;
font-family: gandhi_serifbold, Georgia, "Times New Roman" , serif;
font-weight:bold;
letter-spacing:-0.01em;
}

a img {
border:0;
}

a:link {
color:#990022;
}

a:visited {
color:#660033;
}

a:hover {
color:#ff0000;
text-decoration:underline;
background-color:#f4fdf3;
}
a:focus {
color:#990022;
background-color:#f4fdf3;
}
/* Hauptmenu */
div#menu {
position:absolute;
top:12em;
left:0em;
width: 100%;
background-color:#daf6d7;
background: -moz-linear-gradient(top, #daf6d7, #f4fdf3);    
background: -webkit-linear-gradient(top, #daf6d7, #f4fdf3);
background: -ms-linear-gradient(top, #daf6d7, #f4fdf3);
background: -o-linear-gradient(top, #daf6d7, #f4fdf3);
box-shadow: 1px 2px 4px rgba(173, 194, 171, .2);
}

#menu ul {
margin-bottom:0px;
list-style-type:none; 
text-align: center;
}
#menu ul li {
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-style:italic;
display: -moz-inline-box;
display:inline-block;
width:80%;
vertical-align: middle;
margin: 5px; 
letter-spacing:-0.01em;
}
#menu ul li a {
display:block;
line-height: 1.6em;
padding:0.2em;
border:1px solid #660033;
text-decoration:none;
background-color:#ebfce9;
background: -moz-linear-gradient(top, #ebfce9, #f4fdf3);    
background: -webkit-linear-gradient(top, #ebfce9, #f4fdf3);
background: -ms-linear-gradient(top, #ebfce9, #f4fdf3);
background: -o-linear-gradient(top, #ebfce9, #f4fdf3);
box-shadow: 1px 2px 4px rgba(102, 0, 51, .2);
}
#menu ul li a:hover {
border:1px solid #f00;
background-color:#f4fdf3;
text-decoration:underline;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#menu ul li a:focus {
border:1px solid #f00;
background-color:#f4fdf3;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#menu ul li span {
display:block;
text-decoration:none;
line-height: 1.6em;
padding:0.2em;
}
/* Menu rechts */
div#menurechts {
width: 100%;
background-color:#daf6d7;
background: -moz-linear-gradient(top, #daf6d7, #f4fdf3);    
background: -webkit-linear-gradient(top, #daf6d7, #f4fdf3);
background: -ms-linear-gradient(top, #daf6d7, #f4fdf3);
background: -o-linear-gradient(top, #daf6d7, #f4fdf3);
box-shadow: 1px 2px 4px rgba(173, 194, 171, .2);
}

#menurechts ul {
margin-bottom:0px;
list-style-type:none;
text-align: center;
}

#menurechts ul li {
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-style:italic;
display: -moz-inline-box;
display:inline-block;
width:80%;
vertical-align: middle;
margin: 5px; 
letter-spacing:-0.01em;
}

#menurechts ul li a {
display:block;
line-height: 1.6em;
padding:0.2em;
border:1px solid #660033;
text-decoration:none;
background-color:#ebfce9;
background: -moz-linear-gradient(top, #ebfce9, #f4fdf3);    
background: -webkit-linear-gradient(top, #ebfce9, #f4fdf3);
background: -ms-linear-gradient(top, #ebfce9, #f4fdf3);
background: -o-linear-gradient(top, #ebfce9, #f4fdf3);
box-shadow: 1px 2px 4px rgba(102, 0, 51, .2);
}


#menurechts ul li a:hover {
border:1px solid #f00;
background-color:#f4fdf3;
text-decoration:underline;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}

#menurechts ul li a:focus {
border:1px solid #f00;
background-color:#f4fdf3;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
/* Fussleiste */
div#untenNav    {
width: 100%;
margin:40px 0px 10px 0px;
background-color:#daf6d7;
background: -moz-linear-gradient(top, #daf6d7, #f4fdf3);    
background: -webkit-linear-gradient(top, #daf6d7, #f4fdf3);
background: -ms-linear-gradient(top, #daf6d7, #f4fdf3);
background: -o-linear-gradient(top, #daf6d7, #f4fdf3);
box-shadow: 1px 2px 4px rgba(173, 194, 171, .2);
}

#untenNav ul {
margin-bottom:0px;
list-style-type:none; 
text-align: center;
}

#untenNav ul li {
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-style:italic;
display: -moz-inline-box;
display:inline-block;
width:80%;
vertical-align: middle;
margin: 4px; 
border-width: 1px;
letter-spacing:-0.01em;
}

#untenNav ul li a {
display:block;
line-height: 1.6em;
padding:0.2em;
border:1px solid #660033;
text-decoration:none;
background-color:#ebfce9;
background: -moz-linear-gradient(top, #ebfce9, #f4fdf3);    
background: -webkit-linear-gradient(top, #ebfce9, #f4fdf3);
background: -ms-linear-gradient(top, #ebfce9, #f4fdf3);
background: -o-linear-gradient(top, #ebfce9, #f4fdf3);
box-shadow: 1px 2px 4px rgba(102, 0, 51, .2);
}
#untenNav ul li a:hover {
border:1px solid #f00;
background-color:#f4fdf3;
text-decoration:underline;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#untenNav ul li a:focus {
border:1px solid #f00;
background-color:#f4fdf3;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#untenNav ul li span {
display:block;
text-decoration:none;
line-height: 1.6em;
padding:0.2em;
}
#VDA-Link {
width: 200px;
margin:0px auto;
margin-top:10px;
margin-bottom:10px;
border: 1px solid #660033;
background-color:#e0fadd;
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-style:italic;
text-align: center;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
#VDA-Link a {
display:block;
}
#VDA-Link a:hover {
background-color:#e0fadd;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#VDA-Link a:focus {
background-color:#e0fadd;
box-shadow: 1px 2px 4px rgba(255, 0, 0, .2);
}
#aktuell ul li {
margin-bottom: 20px;
}
.Bild {
padding: 10px;
border: 1px solid #adc2ab;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
#Rossmaessler {
margin:0px auto;
width:228px;
}
/* Tabellen */
table {
margin:0px auto;
width:90%;
margin-bottom:30px;
border-collapse:collapse;
border-spacing:0;
border-style:#660033 solid 0px 0px 1px 0px;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}

caption {
font-family: gandhi_serifitalic, Georgia, "Times New Roman" , serif;
font-size:110%;
font-style:italic;
background-color:#daf6d7;
background: -moz-linear-gradient(top, #daf6d7, #f4fdf3);    
background: -webkit-linear-gradient(top, #daf6d7, #f4fdf3);
background: -ms-linear-gradient(top, #daf6d7, #f4fdf3);
background: -o-linear-gradient(top, #daf6d7, #f4fdf3);
border-style: solid; 
border-color:#660033; 
border-width: 1px 0px 1px 0px;
line-height: 1.5em;
box-shadow: 1px 2px 4px rgba(173, 194, 171, .2);
}

tr.A {
background-color:#ebfce9;
}
tr.B {
background-color:#daf6d7;
}
th, td {
padding: 0.2em;
}
strong {
font-family:gandhi_serifitalic;
}

/*Zeilenumbrüche/Abstände korrigieren, die Fussleiste entsteht, kleine Objekte dürfen floaten*/
@media only screen and (min-width: 530px) {
h2 {
margin-bottom:18em;
}
div#menu {
top:10em;
}
#menu ul li {
width:47%;
}
#menurechts ul li {
width:47%;
}
#untenNav ul li {
width:47%;
}
/*css für Fassung Vorträge als Liste*/
.part ol li {
clear:left;
}
.part ol li img {
float:left;
margin-right:10px;
}
/*classen für float*/
.links {
float:left;
margin: 0.3em 10px 0.3em 0px;
}
.rechts {
float:right;
margin: 0.3em 0px 0.3em 10px;
}
}
/* Tabletts */
@media only screen and (min-width: 760px) {
body {
padding:10px;
background-color:#c8e9c5;
-moz-box-shadow: inset 0 0 15px 5px #eefded;
-webkit-box-shadow: inset 0 0 15px 5px #eefded;
box-shadow: inset 0 0 15px 5px #eefded;
}
#Rahmen {
background-color:#eefded;
padding:10px;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
h2 {
margin-bottom:15em;
}
div#menu {
top:11em;
}
#menu ul li {
width:30%;
}
.part {
width: 720px;
margin: 0px auto;
}
#Rossmaessler {
float:right;
margin:10px;
}
}
/* Mittlere Größe/Desktop */
@media only screen and (min-width: 980px)  {
body {
padding:20px;
font-size: 1em;
}
#Rahmen {
padding:20px;
border: 1px solid #adc2ab;
}
h2 {
margin-bottom:14em;
}
div#menu {
top:14em;
}
#menu ul li {
width:22%;
}
#menurechts ul li {
width:22%;
}
}
/* große Bildschirme/Vollbild */
@media only screen and (min-width: 1200px)  {
#Rahmen {
max-width:1980px;/*IE6?*/
}
#menurechts ul li {
width:18%;
}
#Inhalt {
width:100%;
min-width:1110px;/*IE6?*/
margin:0px auto;
margin-bottom:20px;
}
.part {
width:47%;
min-width: 520px;/*IE6?*/
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
margin: 4px;
padding: 10px;
border: 1px solid #adc2ab;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
}

/*Werte für Galerieseiten
@media only screen and (min-width: 1620px)  {
#Inhalt {
width:1510px;
margin:0px auto;
margin-bottom:20px;
}
.part {
display: inline-block;
vertical-align: middle;
margin: 4px;
padding: 10px;
border: 1px solid #adc2ab;
box-shadow: 1px 2px 4px rgba(0,0,0, .2);
}
}
*/
