/*!
    Own CSS definitions
*/

/* set default text color for headings */
h1,
h2,
h3,
h4,
h5,
h6 {
   color: navy;
   font-family: Arial, Helvetica, sans-serif;
}

/* set default text color for paragraph */
p {
    color: navy;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

p.large {
    color: navy;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
}

ul {
    color: navy;
}

/* set blue and orange link styles */
a {
    color: navy;
    background-color: transparent;
    text-decoration: none;
}

a.scroll100{
    scroll-margin-top: 120px;
}

a.orange {
    color: #fa7300;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: navy;
    font-weight: bold;
    background-color: transparent;
    text-decoration: underline;
}

a.orange:hover {
    color: #fa7300;
    font-weight: bold;
    background-color: transparent;
    text-decoration: underline;
}
  
a:visited {
    color: navy;
    background-color: transparent;
    text-decoration: none;
}

a.orange:visited {
    color: #fa7300;
    background-color: transparent;
    text-decoration: none;
}
  
a:active {
    color: navy;
    background-color: transparent;
    text-decoration: none;
}

a.orange:active {
    color: #fa7300;
    background-color: transparent;
    text-decoration: none;
}

/* definitions for header, body, footer */
.bg_header {
    background-image: url('/images/banner_1300_250.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg_body_img {
    background-image: url('/images/hintergrund_polinik3_opacity50.jpg');
    background-repeat: no-repeat;
}

.bg_body_color {
    background-color: #e6e6e6;
}

.bg_footer {
    background-color: #fa7300;
    color: #000080;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

/* row container settings */
.row {
    color: #000080;
}

/* Navigation bar definitions */
.nav_icon_padding {
    padding-left: 1px;
    padding-right: 10px;
}

.nav-link {
    color: #000080;
    font-size: 22px;
    font-weight: bold;
}

.nav-link:hover {
    background-color: #ff9538;
    color: #000080;
    border-radius: 15px;
}

.navbar-nav > li > .dropdown-menu 
{ 
    background-color: #fa7300;
}

.dropdown-menu li a,
.dropdown-menu li a:hover {
    font-size: 18px;
    color: #000080;
}

.dropdown-menu li a:hover {
    background-color: #fd8f34;
    border-radius: 15px;
    color: #000080;
}


.custom-toggler.navbar-toggler {    
    color: #000080;
    font-size: 40px;
}

/* Definition of layout for Touren-, Blumen-, Tiere- and Reisen-Button */
.img_button_label {
    text-align: center;
}

.img_button_large {
    display: block;
    width: 70%;
    border-radius: 10px;
    border-color: navy;
    border-style: solid;
    border-width: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.img_button_small {
    display: block;
    width: 20%;
    border-radius: 10px;
    border-color: navy;
    border-style: solid;
    border-width: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.img_button_large:hover, 
.img_button_small:hover {
    color: #fa7300;
    box-shadow: 0 0 15px #fa7300;
    border-color: #fa7300;
}

/* define image characteristics for Überuns.php */
.img_ueber_uns {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    width: 300px;
    height: 450px; 
    border-radius: 10px;
    border-color: navy;
    border-style: solid;
    border-width: 5px;
}

/* define image characteristics for table of Tiere.php */
.img_tier,
.img_blume {
    width: 120px;
    height: 120px;
    align-items: center;
    border-radius: 10px;
    border-color: navy;
    border-style: solid;
    border-width: 2px;
}

/* define aspect ratio of images used in Pflanzenfamilien.php */
.img_inner_row {
    display: flex;
    justify-content: space-around;
    aspect-ratio: 4/3;
}

/* define characteristics for error pages */
.img_error {
    width: 70%;
}

p_error {
    font-size: 24px;
}


/* margin for text areas */
.text_area_margin {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
}

.text_area_margin_left_right {
    margin-left: 5%;
    margin-right: 5%;
}

.text_area_margin_top_150 {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 150px;
}

.text_area_margin_top_100 {
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 100px;
}

.text_area_padding {
    padding: 3%;
}

/* set colors for bootstrap accordion on start page */
.accordion-button,
.accordion-button:focus {
    background-color: rgba(128, 128, 128, 0.32);
    color: #000080;
    box-shadow: 0 0 0 0.25rem #fa7300;
}

.accordion-item {
    background-color: rgba(128, 128, 128, 0.32);
    color: #000080;
}

/* define style for counter of tours and flowers on startpage */
.counter_pill {
    color: navy;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    background-color: #fa7300;
    border-radius: 10px;
    text-align: center;
    padding: 5px 5px 5px 5px;
}

/* define style for bootstrap cards on reise-archiv.php */
.card {
    background-color: rgba(128, 128, 128, 0.1);
    background-clip: border-box;
    border: 1px solid navy;
    border-radius: 5px;
    box-shadow: 10px 10px 7px 0px rgba(192,192,192,0.75);
}

.card-footer {
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.btn_search,
.btn_reset {
    color: navy;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2);  ;
    border-color: navy;
}

.btn_search:hover,
.btn_reset:hover
{
    color: navy;
    background-color: #fa7300;
    border-color: navy;
    box-shadow: 0 0 15px #fa7300;
}

/* define offsets for internal anchors on page reise-archiv.php (necessary due to sticky header) */
#fernreisen {
    scroll-margin-top: 110px;
}

#europa {
    scroll-margin-top: 130px;
}

#regional {
    scroll-margin-top: 130px;
}

/* define offsets for internal anchors on page touren->erklärungen.php (necessary due to sticky header) */
#oben {
    scroll-margin-top: 110px;
}

/*************************************************/
/* define styles for latest entries on startpage */
/*************************************************/
.latest_entry {
    display: inline-block;
    margin-bottom: 3px;
    width: 80%;
    height: 40px;
    padding: 10px 0px 0px 10px;
    background-color: rgba(85, 84, 84, 0.32);
    border-radius: 10px;
    text-align: left;
  }
  
.latest_entry_date {
    display: inline-block;
    margin-bottom: 3px;
    width: 20%;
    height: 40px;
    padding: 10px 0px 0px 0px;
    background-color: #fa7300;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

/****************************************/
/* define styles for flower description */
/****************************************/
.flowerDescription,
.animalDescription,
.tourDescription,
.geschichten {
    width: 90%;
    color: navy;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 15px 15px;
    background: rgb(231,231,231);
    background: -moz-radial-gradient(circle, rgba(231,231,231,1) 0%, rgba(173,173,173,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(231,231,231,1) 0%, rgba(173,173,173,1) 100%);
    background: radial-gradient(circle, rgba(231,231,231,1) 0%, rgba(173,173,173,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7e7e7",endColorstr="#adadad",GradientType=1); 
    box-shadow: 10px 10px 15px silver;
    margin-bottom: 15px;
}

.flowerImage,
.animalImage {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 10px 10px 15px  #c5c5c5;
    margin: 5%;
}
  
.flowerBox,
.animalBox,
.tourBox,
.geschichteBox {
    margin-left : 4%;
    margin-right : 4%;
    margin-bottom: 10px;
    border: 2px solid #aaaaaa;
    border-radius: 15px 15px;
    padding-left: 10px;
}

.flowerGrau,
.tourGrau,
.animalGrau {
    background:navy;
    color: #eeeeee;
    width: 120px;
    padding-left: 5px;
    display: block;
}

/* define colors for Vebreitungsgebiete.php */
.flowerDescription.wald {
    background: #679966;
}

.flowerDescription.mardetum {
    background: #cd9967;
}

.flowerDescription.legfoehren {
    background: #99ff99;
}

.flowerDescription.loiseleurietum {
    background: #feccff;
}

.flowerDescription.elynetum {
    background: #ffcc9a;
}

.flowerDescription.zwergstraeucher {
    background: #ff999a;
}

.flowerDescription.curvuletum {
    background: #ffcc33;
}

.flowerDescription.salicetum {
    background: #99ff99;
}

.flowerDescription.polsterpflanzen {
    background: #ffffcd;
}

.flowerDescription.kleinstbewuchs {
    background: #99cdff;
}

.flowerDescription.caricetum {
    background: #cccc9a;
}

.flowerDescription.festucetum {
    background: #cb99cd;
}

.flowerDescription.thlaspietum {
    background: #cccccc;
}

.flowerDescription.seslerio {
    background: #9a99ff;
}

.flowerDescription.firmetum {
    background: #fffe65;
}

.flowerDescription.androsacetum  {
    background: #cdffff;
}

/* style definitions of bootstrap tables */
.thead_orange {
    background-color: rgb(250, 115, 0);

}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: navy;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: navy;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: navy;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.2);    
    color: navy;
    width: 98%;
    box-shadow: 10px 10px 7px 0px rgba(192,192,192,0.75);
}

/* style definitions of jQuery dataTables */
:root {
    --dt-row-hover: 0, 0, 0;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.2);
}

div.dataTables_wrapper div.dataTables_filter {
    color: navy;
    font-weight: bold;
    margin-right: 4%;
}

div.dataTables_wrapper div.dataTables_filter label {
    color: navy;
    font-weight: bold;
}

/* style definitions of bootstrap list-group */
.list-group-item {
    background-color: #e6e6e6;
}

.list-group-item-action:hover, 
.list-group-item-action:focus {
    background-color: rgba(0, 0, 0, 0.2);
}

/* captcha */
canvas {
    max-width: 100%;
}

/* h*o*n*e*y*p*o*t */
.hp_email {
    display: none;
}