/*  ==========================================================================
    hb_main.css
    by  Philip A. C. Ralph
    for Heimatbund Gelsenkirchen
    ==========================================================================
*/


/*  ==========================================
*       Colours
*   ==========================================
*   Variables for the standard colours used,
*   common to all Heimatbund websites,
*   are defined in the file
*       hb_colours.css
*   ------------------------------------------
*   Variablen für die für die BS verwendeten
*   Standardfarben gelten für all Webauftritte
*   des Heimatbundes und sind in der Datei
*       hb_colours.css
*   definiert.
*/


/*  ==========================================
**    NO SUPPORT FOR variables IN iExplore !!!
**  ==========================================
*/
:root {
  --gelsengruen:    #07892F;
  --anthrazit:      #333;
  --duenbier_rot:   #80; /* rgb(128,0,0);
  --duenbier_lila:  #800080; /* rgb(128,0,128); */
  --duenbier_grau:  #EEF1F6;
}


/*  ==========================================
*       Basics
*   ==========================================
*/
body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* font-family: Arial,Helvetica,sans-serif; */
    background-color: #EEF1F6; /*  var(--duenbier_grau); */
        /* background-image: url(../images/maps/Bauerschaft_Rotthausen_1823__mid.jpg); */ 
        background-image: url(../images/maps/1823__mid.jpg); 
        background-position: left top;
        background-repeat: repeat-y;
        background-size: 100% auto;

}

body a:link { color:#800000; }
body a:visited { color:#800000; }
body a:hover, 
body a:active {
    background-color: #800000;  /* var(duenbier_rot); */
    color: white;
}


#galleryContainer {
    background-color: #EEF1F6; /*  var(--duenbier_grau); */
    width: 100%;
}

#container {
    
    /* 
        background-image: url(../images/GE_Collage_400x292.jpg);
        background-position: left top;
        background-repeat: repeat;
        background-size: auto;
    */
        /*
        background-repeat: no-repeat;
        background-size: contain;
        background-size: cover;
        */
}

/*
PowderBlue;
.header a,
.header a:link,
.header a:visited,
.header a:hover,
.header a:active {
    background-color: white;
}
*/

/*
* #example1 {
*     background-image: url(images/SE_konst_1134x1134.png), url(images/Bergbausammlung-Rotthausen_1134x1134.png);
*     background-position: left top, right bottom;
*     background-repeat: repeat, no-repeat;
* }
*/

/*
* #example2 {
*     background: url(images/SE_konst_1134x1134.png) left top repeat, url(images/Bergbausammlung-Rotthausen_1134x1134.png right bottom no-repeat) ;
* }
*/



/*  ==========================================
*       Classes and Objects
*   ==========================================
*/

.link-table-small img {
    max-width: 160px;
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
}

#contentDiv, .contentDiv {
  margin: 16px 16px 16px 16px;
  /* according to w3schools, order is:
  *     top right bottom left
  *  but Firefox interprets it as:
  *     left top right bottom
  * therefore, to avoid misinterpretation,
  *     quote in full
  */
  /* padding: 0px 16px 0px 16px; */
  background-color:white;
}


#contentDiv img, .contentDiv img{
    max-width: 860px;
}


/*
 * When using the shorthand property the order of the property values is:
 *
 * background-color
 * background-image
 * background-repeat
 * background-attachment
 * background-position
 *
 * It does not matter if one of the property values is missing, as long as the other ones are in this order.
*/


/* The following table attributes are not supported in HTML5:
*  "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", and "width"
        align: center;
        cellpadding: 12;
        cellspacing: 0;
*/

.galerie-table {
    width: 100%;
}

.main-table {
    text-align: justify;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color:#FFFFFF;
    border: 0;
}
/* border="0" cellpadding="0" cellspacing="0" */

.header {
    text-align: left;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    height: 120px;
    border: 0;
    cellpadding: 0;
    cellspacing: 0;
}


.head3, .head4 {
    font-weight: bold;
    text-align: left;
}

.head3 {
    font-size: 16pt;
}

.head4 {
    font-size: 14pt;
}

.gestreift tr:nth-child(even) {
    background-color: PowderBlue;
}

.link-table-gestreift tr:nth-child(even) {
    background-color: Aquamarine;
}

.gestreift th {
    background-color: black; /* Horster Loewe 218, 19, 26 */
    color: white;
    font-weight: bold;
}
.link-table-gestreift th {
    background-color: black; /* Horster Loewe 218, 19, 26 */
    color: white;
    font-weight: bold;
}

.link-table-gestreift tr, .link-table-gestreift th, .link-table-gestreift td {
    padding: 6px 14px 6px 12px;
    text-align: left;
}


.link-table-gestreift a { text-decoration: none; display: block; }
.link-table-gestreift a:link,
.link-table-gestreift a:visited {
    color: black;
}
.link-table-gestreift a:hover,
.link-table-gestreift a:active {
    color: white;
    background-color: red;
}


/*
.link-table h3, .link-table-small h3,
.link-table h4, .link-table-small h4 {
  text-align: left;
}
*/

/*  ==========================================
        Fonts
    ==========================================
*/


@font-face {
    font-family: "Comic-Sans";
    src: url("../fonts/COMIC.TTF");
}

@font-face {
    font-family: "Comic-Sans";
    font-style: bold;
    src: url("../fonts/COMICBD.TTF");
}

@font-face {
    font-family: "Rockwell";
    src: url("../fonts/ROCK.TTF");
}

@font-face {
    font-family: "Rockwell-Bold";
    font-weight: bold;
    src: url("../fonts/ROCKB.TTF");
}




/*  ==========================================
 *          HEADING STYLES
 *  ==========================================
 *  header.html (Importdatei für den Seitenkopf)
 *      centered title (zentrierter Titel)
 *          h1
 *  contentDiv (Bereich für den Seiteninhalt)
 *      centered headings (zentrierter Überschriften)
 *          h2
 *          h3
 *          h4
 *      ranged left (linksbündig)
 *          h5
 *          h6
 *  ==========================================
*/

/* font-family: Georgia, "Times New Roman", Times, serif; */
/* font-family: arial, helvetica, sans-serif; */
h1 {
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
}
h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1, h2, h3, h4 {
  text-align: center;
}
h5, h6 {
  text-align: left;
}

h1 {
  font-size: 36pt;
}
h2 {
  font-size: 24pt;
}
h3 {
  font-size: 18pt;
}
h4 {
  font-size: 14pt;
}
h5 {
  font-size: 13pt;
}
h6 {
  font-size: 12pt;
}

h1 img {
    width: 42px;
    height: 41px;
}
h2 img {
    width: 28px;
    height: 27px;
}
h3 img {
    width: 19px;
    height: 18px;
}


/*  ==========================================
*       PARAGRAPH & LIST STYLES
*   ==========================================
*/

p, li { font-size: 12pt; }

p {
    text-align: justify;
}

.zitat, .zitat-zentriert, .zitat-attrib {
    margin-left: 50px;
    margin-right: 50px;
    /* background-color: PowderBlue; */
    background-color:#ffffdc; /* 255. 255, 220 */
    /* background-color:#ffff0; */ /* 255. 255, 240 */
    color: #645842; /* 100, 88, 66 */
}
.zitat-zentriert {
    text-align: center;
}
.zitat-attrib {
    font-style: italic;
    text-align: right;
}

li {
    /* font-size: 14pt; */
    /* font-family: Comic-Sans; */
    /* font-family: Comic-Sans-Bold; */
    /* font-weight: bold; */
    text-align: left;
}

li a {
    font-size: 14pt;
    /* font-family: Comic-Sans-Bold; */
    font-weight: bold;
    text-align: left;
}

.list-small li a {
    font-size: 11pt;
    font-weight: normal;    
}



/*  ==========================================
*       Text styles
*   ==========================================
*/

.lft, .links, .linksbuendig {text-align: left;}
.rgt, .rechts, .rechtsbuendig {text-align: right;}
.cnt, .zentriert {text-align: center;}
.block, .blocksatz {text-align: justify;}

.top {vertical-align: top;}
.mid {vertical-align: middle;}
.top {vertical-align: bottom;}

.rockwell-bold {
    font-family: Rockwell-Bold;
    text-align: center;
}

.autor {
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
}
.titel {
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
}
.untertitel {
    text-align: center;
    font-size: 14pt;
}



/*  ==========================================
*       Images
*   ==========================================
*/


.bild img, .bild-shadow img {
    max-width: 500px;
}    

img.shadowed {
    border: 1px solid;
    /* padding: 10px; */
    box-shadow: 5px 10px #888888;    
}


.div-links { float:left; }
.div-rechts { float:right; }

.div-links, .div-rechts { 
    width:300px; 
}

.div-links img, .div-rechts img { 
    max-width:280px; 
}



/*  ==========================================
*       Images
*   ==========================================
*/

/* 
div .bild-box {
    width: 600px;
    background-color:#2222;
    margin: auto;
    padding: 20px 20px 20px 20px;
    padding: 2px 1px 2px 1px;
}
*/
div .bild-box {
    max-width: 502px;
}
div .bild-box, .video-box {
    /*background-color:#2222;*/ 
    /*background-color:#e4f5ce;*/ 
    /*background-color:#c3edf6;*/
    background-color:#ffffdc; /* 255. 255, 220 */
    /* background-color:#ffff0; */ /* 255. 255, 240 */
    margin: auto;
    padding: 0px 0px 2px 0px;
    /* top rgt btm lft */
}

.bild img, .bild-shadow img {
    max-width: 500px;
}    

div.shadowed, img.shadowed {
    border: 1px solid;
    /* padding: 10px; */
    box-shadow: 5px 10px #888888;    
}


.div-links { float:left; }
.div-rechts { float:right; }

.div-links, .div-rechts { 
    width:300px; 
}

.div-links img, .div-rechts img { 
    max-width:280px; 
}

.indent1 { margin-left: 25px; }
.indent2 { margin-left: 50px; }
.indent3 { margin-left: 75px; }
.indentR1 { margin-right: 25px; }

.indentLR { margin-left: 10px; margin-right: 10px; }





/*  ==========================================
*       Image Captions
*   ==========================================
*       Bild-Unterschriften
*   ==========================================
*/


.bild {
    text-align: center;
    font-size: 6pt;
}

.bild-unterschrift-l { font-size: 12pt; }
.bild-unterschrift-m { font-size: 11pt; }
.bild-unterschrift-s { font-size: 10pt; }
.bild-unterschrift-xs { font-size: 8pt; }


.bild-unterschrift, .bild-quelle {
    text-align: right;
    font-style: italic;
}
.bild-unterschrift-zentriert {
    text-align: center;
}
.bild-unterschrift-left {
    text-align: left;
}
.bild-unterschrift-zentriert {
    font-size: 11pt;
}
.bild-quelle, .bild-unterschrift-left {
    font-size: 10pt;
}
.bild-credit {
    font-size: 10pt;
    font-style: italic;
}
.link-klein {
    font-size: 10pt;
    font-style: italic;
}



/*  ==========================================
*       HEADINGS ( MUNICPAL FLAG )
*   ==========================================
*/

.flag {
    margin: auto;
    text-align: center;
    min-width: 225px;
}

.flag-top {
    background-color: black;
    color: white;
}
.flag-mid {
    background-color: white;
    color: black;
}
.flag-btm {
    background-color: #07892F;
    color: white;
}

/*  ------------------------------------------
*       Headings ( Municpal Flag ) DEPRECATED
*   ------------------------------------------
*/
.h2-table th {
    text-align: center;
    font-size: 24pt;
    font-weight: bold;
    background: url(../images/GE120x72.jpg);
    /*background-repeat: no-repeat;*/
    background-size: contain;
    /*background-size: cover;*/
}

.h3-table th {
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    min-width: 150px;
    min-height: 100px;
    background: url(../images/GE120x72.jpg);
    /*background-repeat: no-repeat;*/
    background-size: contain;
    /*background-size: cover;*/
}

.h2-table td a, .h3-table td a {
    font-weight: bold;
}

.h2-table td a {
    font-size: 18pt;
}

.h3-table td a {
    font-size: 14pt;
    font-weight: bold;
}


/*  ==========================================
*       LINK TABLES
*   ==========================================
*/


.link-table, .link-table-small {
    margin: 0 auto 0 auto;
    border-spacing: 12px;
    text-align: left;
}

.link-table img {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}

.link-table-small img {
    max-width: 160px;
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
}


.gestreift tr:nth-child(even) {
    background-color: PowderBlue;
}

.link-table-gestreift tr:nth-child(even) {
    background-color: Aquamarine;
}

.gestreift th {
    background-color: black; /* Horster Loewe 218, 19, 26 */
    color: white;
    font-weight: bold;
}
.link-table-gestreift th {
    background-color: black; /* Horster Loewe 218, 19, 26 */
    color: white;
    font-weight: bold;
}

.link-table-gestreift tr, .link-table-gestreift th, .link-table-gestreift td {
    padding: 6px 14px 6px 12px;
    text-align: left;
}


.link-table-gestreift a { text-decoration: none; display: block; }
.link-table-gestreift a:link,
.link-table-gestreift a:visited {
    color: black;
}
.link-table-gestreift a:hover,
.link-table-gestreift a:active {
    color: white;
    background-color: red;
}



/* ---------------------------------- */

.link-table, .link-table-small {
    text-align: left;
}

.link-table th, .link-table-small th {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    color: #800000;
    background-color: #ffeb99;
}

.link-table th a, .link-table-small th a {
    color: #800000;
    background-color: #ffeb99;
}

.link-table th img, .link-table-small th img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.link-table-small p, 
.link-table-small li {
    text-align: left;
    font-size: 12pt;
}

.link-table-small a {
    font-size: 12pt; 
    /* 
    font-size: 12pt; 
    */
}

.link-table a:hover,
.link-table-small  a:hover {
    color: white;
    background-color: #800000;
}

.link-table tr:hover,
.link-table-small  tr:hover {
    background-color: #f5f5f5;
}


/*  ==========================================
*       EVENTS - VERANSTALTUNGEN
*   ==========================================
*/

.event-category, .event-title, .event-venue, .event-annotation {
    text-align: left;
}
.event-description {
    text-align: justify;
}

.event-category {
    font-size: 14pt;
    font-weight: bold;
    /*font-variant: small-caps;*/
    text-transform: uppercase;
}  
.event-title {
    font-size: 20pt;
    font-weight: bold;
}  
.event-subtitle {
    font-size: 18pt;
    font-weight: bold;
}  
.event-subsubtitle {
    font-size: 14pt;
    font-weight: bold;
}  
.event-date {
    font-size: 12pt;
    font-weight: bold;
}  
.event-venue {
    font-size: 12pt;
    font-weight: normal;
}  
.event-description {
    font-size: 12pt;
}  
.event-annotation {
    font-weight: bold;
    font-style: italic;
}

/*  ==========================================
*       Links
*   ==========================================
*/


/*  ==========================================
 *      PAGE HEADER ( header/header.html )
 *  ==========================================
*/

.td-h1 { text-align: left; }

.header tr { height: 160; }

.header td {
    vertical-align: center;
    /*width: 173px; */
    height: 160px;
}

.header a,
.header a:link,
.header a:visited,
.header a:hover,
.header a:active {
    background-color: white;
}

.header img {
    border: 0px solid ;
    width: 159px;
    height: 159px;
}


/*  ==========================================
*       In-Line Images
*   ==========================================
*/
.img_txt_top { vertical-align: text-top;    }
.img_txt_mid { vertical-align: middle;      }
.img_txt_btm { vertical-align: text-bottom; }



/*  ==========================================
 *      Facebook
 *  ==========================================
 *  see bs_fbook.css
*/


.flash { font-weight:bold; background-color:red; color:yellow; }
.flash_neg { font-weight:bold; background-color:yellow; color:red; }

.border_6_16_36 { border-style: solid; border-width: 6px; padding: 16px; margin: 36px;}
.border_5_5_5 { border-style: solid; border-width: 5px; padding: 5px; margin: 5px;}
.border_5_10_10 { border-style: solid; border-width: 5px; padding: 10px; margin: 10px;}
.border_10_10_20 { border-style: solid; border-width: 10px; padding: 10px; margin: 20px;}
.border_10_30_50 { border-style: solid; border-width: 10px; padding: 30px; margin: 50px;}

.border_green { border-color: green; }
.border_red { border-color: red; }