/*  ==========================================================================
    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:   rgb(128,0,0);
  --duenbier_lila:  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; */

}

body a:link { color:DarkGreen; }
body a:visited { color:DarkOliveGreen; }
body a:hover, 
body a:active {
    background-color: #07892F;  /* var(--gelsengruen); */
    color: white;
}


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

#container {
    background-color: #EEF1F6; /*  var(--duenbier_grau); */
    
        background-image: url(../images/GE_Collage_3496x2552.jpg); 
        background-position: left top;
        background-repeat: repeat-y;
        background-size: 100% auto;
    /* 
        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
*   ==========================================
*/



#contentDiv, .contentDiv, #auskunftDiv {
  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%;
    background-color:
}

.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-block a { text-decoration: none; display: block; }

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

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

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

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


/*
.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;
}

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;    
}


.zitat, .zitat-zentriert, .zitat-attrib {
    margin-left: 50px;
    margin-right: 50px;
    background-color: PowderBlue;
}
.zitat-zentriert {
    text-align: center;
}
.zitat-attrib {
    font-style: italic;
    text-align: right;
}

.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; }


/*  ==========================================
*       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;
}

.display-block a,
.display-block a:link,
.display-block a:visited,
.display-block a:hover,
.display-block a:active  {
    display: block;
    text-decoration: none;
}

/*  ==========================================
*       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; 
}



/*  ==========================================
*       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 {
    text-align: left;
}

.link-table th {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    background: url(../images/GE120x72.jpg);
    background-size: contain;
    /*
    background: url(../images/GE120x21_b50pc.jpg);
    */
    /*
    background-size: cover;
    background-repeat: no-repeat repeat;
    */
}

.link-table th a {
    color: black;
    background-color: white;
}

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

.small p, .small li, .small a,
.mini p,  .mini li,  .mini a 
{
    text-align: left;
    font-size: 10pt;
}

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

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

.link-table img {
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}
.mid img {
    max-width: 640px;
    max-height: 480px;
}
.small img {
    max-width: 160px;
    max-height: 120px;
}
.mini img {
    max-width: 80px;
    max-height: 60px;
}


/*  ------------------------------------------
*       DEPRECATED
*   ------------------------------------------
*/
.link-table-small {
    text-align: left;
}

.link-table-small th {
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    background: url(../images/GE120x72.jpg);
    background-size: contain;
    /*
    background: url(../images/GE120x21_b50pc.jpg);
    */
    /*
    background-size: cover;
    background-repeat: no-repeat repeat;
    */
}
.link-table-small th a {
    color: black;
    background-color: white;
}

.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: 10pt;
}
.link-table-small a {
    font-size: 10pt; 
    /* 
    font-size: 12pt; 
    */
}


.link-table-small  tr:hover {
    background-color: #f5f5f5
}
.link-table-small {
    margin: 0 auto 0 auto;
    border-spacing: 12px;
    text-align: left;
}
.link-table-small img {
    max-width: 160px;
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
}



/*  ==========================================
*       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 {
    display: block;
    background-color: white;
    color: DarkGreen;
}
.header a:link { color:DarkGreen; }
.header a:active {
    color: DarkGreen;
}

.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
*/