/**
 * webtrees: online genealogy
 * Copyright (C) 2020 webtrees development team
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

 /* ----------- webtrees.css ------------------------ */
 
 :root {
     --background-color: #edf7fd;
     --white-color: #fff;
}

/* reset */
 p,img,ul,li, fieldset {
     border: 0;
     margin: 0;
     padding: 0;
}
 html {
     height: 100%;
     margin-bottom: 1px;
     overflow-y: scroll;
}
 body {
     color: #555;
     background-color: var(--white-color);
     font: 12px tahoma, arial, helvetica, sans-serif;
     margin: 1px;
     padding-left: 0;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
 fieldset,img {
     border: 0;
}
 q:before,q:after {
     content: '';
}
 input,button,textarea,select,optgroup,option {
     font-family: inherit;
     font-size: inherit;
     font-style: inherit;
     font-weight: inherit;
}
 input,button,textarea,select {
     font-size: 100%;
}
 a {
     color: #555;
     text-decoration: none;
     outline: none;
}
 a:hover {
     color: #f00!important;
     text-decoration: none!important;
}
 a:focus {
     outline-style: none;
}
 h1, h2 {
     font-weight: bold;
     font-size: 18px;
     padding: 10px;
     text-align: center;
}
 h3 {
     font-weight: bold;
     font-size: 14px;
     padding: 5px 10px 10px 0;
     width: 100%;
     margin: 0;
     padding: 0;
}
 img {
     vertical-align: middle;
}
 label {
     font-weight: 900;
}
 .menu2 .moduletable_menu ul li {
     list-style: none;
}
/* LAYOUT ******************************************** */
 #overall {
     height: 100%;
     margin: 0 auto;
     text-align: left;
     width: 99%;
}
/* header area */
 .header_img {
     float: left;
}
 .header_title {
     clear: both;
     font-size: 20px;
     float: left;
     padding: 0 0 0 10px;
     margin: 0 0 5px 0;
}
 .header_search {
     float: right;
}
 #tomMenuContainer {
     clear: both;
     width: 100%;
     height: 65px;
     margin: 5px auto;
     padding: 5px 0;
     border-bottom: 2px solid #81a9cb;
     border-top: 2px solid #81a9cb;
}
 #topMenu {
     clear: both;
     float: right;
     position: relative;
     left: -50%;
     text-align: left;
}
#topMenu ul {
	margin-left: 0;
}
 #topMenu ul.menu {
     position: relative;
     padding: 0;
     margin: 0;
     list-style: none none;
     white-space: nowrap;
}
 #topMenu ul.menu a {
     display: block;
     white-space: nowrap;
     overflow: hidden;
}
 #topMenu ul.menu li {
     float: left;
     position: relative;
     left: 50%;
     width: 80px;
     height: 64px;
     text-align: center;
     list-style-type: none;
}
 #topMenu ul.menu li ul {
     position: absolute;
     display: none;
     background-color: var(--white-color);
     border: thin solid #aaa;
     padding: 5px 0;
     z-index: 999;
     min-width: 120px;
}
 #topMenu ul.menu li:hover > ul {
     display: block;
     position: absolute;
     top: 0;
     left: 100%;
     right: auto;
}
 #topMenu ul.menu > li:hover > ul {
     left: 0;
     right: auto;
     top: 64px;
}
 #topMenu ul.menu li li {
     clear: both;
     height: auto;
     left: 0;
     text-align: left;
     width: 100%;
}
 #topMenu ul.menu li li a {
     margin: auto 5px;
     line-height: 2;
     font-size: 11px;
}
 #topMenu ul.menu li li .image-title {
     display: inline;
     margin-left: 3px;
}
 .image-title {
     display: block;
}
/* Languages */
 .menu2 {
     font-weight: bold;
     float: right;
     white-space: nowrap;
     margin: 20px 10px 0 0;
     position: relative;
}
 .menu2 ul {
     font-weight: normal;
     position: absolute;
     min-width: 90px;
     left: auto;
     right: 8px;
     top: 1.1em;
     background-color: var(--white-color);
     border: thin solid #aaa;
     z-index: 999;
}
 .menu2 li {
     padding: 2px;
}
 .menu2 .moduletable {
     float: right;
     visibility: hidden;
}
 .menu2 h3 {
     padding: 0 10px 10px 5px;
     visibility: visible;
     font-size: 12px;
}
 .menu2 .moduletable:hover {
     visibility: visible;
}
/* other extra menu items */
 .menu2 .moduletable_menu {
     float: left;
     font-size: 12px;
}
 .menu2 .moduletable_menu ul {
     font-weight: bold;
     position: relative;
     min-width: 0;
     right: auto;
     top: auto;
     background: none;
     border: none;
     z-index: 0;
}
 .menu2 .moduletable_menu ul li {
     float: left;
     width: auto;
     left: auto;
     height: auto;
     border-right: 2px solid;
     padding: 0 5px;
}
 .menu2 .mod-languages li.lang-active a {
     color: #006;
     font-weight: 900;
}
/* content area */
 .col-full {
     float: left;
     width: 100%;
}
 .col-left {
     float: left;
     width: 66%;
}
 .col-right {
     float: right;
     width: 33%;
}
 .col-full .item-page {
     margin: 10px auto;
     width: 98%;
}
 .col-left .custom {
     background-color: var(--background-color);
     border: solid #81a9cb 1px;
     height: auto;
     padding: 10px;
     text-align: justify;
}
 .col-left .custom p, .col-right .custom p {
     padding: 5px 0;
}


.col-left h3 {
	font-size: 16px;
	padding-top: 5px;
}

.col-left p {
	font-size: 14px; 
	margin: 0 0 5px 0;
}


 .custom a, .custom a:hover {
     font-weight: 900;
}
 .col-right .moduletable {
     background-color: var(--background-color);
     border: solid #81a9cb 1px;
     padding: 10px;
}
 .col-left .custom ul {
     list-style-type: square;
     padding: 0;
}
 .col-left .custom ul li {
     list-style-position: outside;
     margin: 1px 30px;
     padding: 0;
}
/* login register pages */
 .btn-primary {
     margin-top: 10px;
}
 .col-full .login form {
     background-color: var(--background-color);
     border: 1px outset #81A9CB;
     border-bottom: none;
     margin: 10px auto 0 auto;
     padding: 10px;
     width: 280px;
}
 .col-full ul.nav {
     margin: 0 auto 10px auto;
     padding: 10px;
     width: 280px;
     list-style: none;
}
 .col-full .login-description {
     font-weight: bold;
     font-size: 18px;
     padding: 10px;
     text-align: center;
}
 .col-full .login form fieldset {
     width: 250px;
     text-align: center;
     margin: 10px auto 0;
}
 .col-full .login form label, .col-full .reset form label {
     text-align: right;
}
 .col-full .login form .login-fields {
     margin: 10px 0;
     text-align: right;
}
 .col-full .login form .login-fields:nth-of-type(3) {
     text-align: center;
}
 .col-full ul li {
     margin: 5px;
}
 .col-full .reset form, .col-full .remind form {
     background-color: var(--background-color);
     border: 1px outset #81A9CB;
     margin: 10px auto 0 auto;
     padding: 10px;
     width: 450px;
}
 .col-full .reset form fieldset, .col-full .remind form fieldset {
     text-align: center;
     margin: 20px auto;
}
 .control-label {
     margin: 5px 0;
}
 .col-full .reset form p, .col-full .remind form p {
     text-align: justify;
}
 .col-full .reset form dl, .col-full .remind form dl {
     text-align: right;
}
 .col-full .reset form dt, .col-full .remind form dt {
     float: left;
     padding-top: 5px;
     width: 100px;
}
 .col-full .reset form dd, .col-full .remind form dd {
     margin-left: 100px;
}
 .col-full .reset #user-registration div, .col-full .remind #user-registration div {
     text-align: left;
}
 .col-full .reset h1, .col-full .remind h1 {
     display: block;
     font-weight: bold;
     font-size: 18px;
     padding: 10px;
     text-align: center;
}
/*registration */
 .col-full .registration form {
     background-color: var(--background-color);
     border: 1px outset #81A9CB;
     margin: 10px auto 0 auto;
     padding: 10px;
     width: 550px;
}
 .col-full .registration form fieldset {
     width: 500px;
     text-align: center;
     margin: 10px auto;
}
 .col-full .registration form fieldset legend {
     font-weight: bold;
     font-size: 14px;
     padding: 0 10px 10px 0;
}
 .col-full .registration form dl {
     text-align: right;
}
 .col-full .registration form dt {
     float: left;
     padding-top: 5px;
     width: 150px;
}
 .col-full .registration form dd {
     margin-left: 170px;
     text-align: left;
}
 .col-full .registration form dd:nth-of-type(1) {
     margin-bottom: 20px;
}
 .form-horizontal .control-group {
     margin-bottom: 10px;
     text-align: left;
}
 .form-horizontal .control-group:before, .form-horizontal .control-group:after {
     display: table;
     content: "";
     line-height: 0;
}
 .form-horizontal .control-group:after {
     clear: both;
}
 .registration .form-horizontal .control-label {
     float: left;
     width: 160px;
     padding-top: 5px;
     text-align: right;
}
 .registration .form-horizontal .controls {
     padding-left: 180px;
}
 .form-horizontal .controls:first-child {
}
 .form-horizontal .help-block {
     margin-bottom: 0;
}
 .form-horizontal input + .help-block, .form-horizontal select + .help-block, .form-horizontal textarea + .help-block, .form-horizontal .uneditable-input + .help-block, .form-horizontal .input-prepend + .help-block, .form-horizontal .input-append + .help-block {
     margin-top: 9px;
}
 .form-horizontal .form-actions {
     padding-left: 180px;
}
/*system messages */
 .col-full #system-message-container #system-message {
     width: 100%;
     background-image: none;
     border: none;
     padding: 0;
     font-weight: normal;
     text-align: center;
     background-color: #b2c7d7;
     color: #0031c5;
}
 .col-full #system-message-container #system-message {
     line-height: 1;
}
 #system-message-container {
     margin: auto;
     width: 50%;
}
/* weblink submit page */
 .col-full form.form-validate {
     background-color: var(--background-color);
     border: 1px outset #81A9CB;
     margin: 10px auto 0 auto;
     padding: 10px;
}
 .col-full form.form-validate fieldset {
     margin: 10px auto 0;
}
 .col-full form.form-validate fieldset legend {
     font-size: 150%;
     font-weight: 900;
     margin-bottom: 20px;
     text-align: center;
}
 .col-full form.form-validate fieldset label {
     text-align: left;
     width: 80px;
}
 .col-full form.form-validate fieldset .formelm-buttons {
     text-align: center;
     margin: 20px auto;
}
 .col-full form.form-validate fieldset .toggle-editor {
     margin-top: -5px;
}
 .login.col-full form.form-validate {
     width: 280px;
}
 .registration .col-full form.form-validate {
     width: 600px;
}
 .mce-path-item {
     display: none!important;
}
 #jform_tags-lbl, .search-field, .chzn-choices {
     display: none;
}
 li {
     text-align: left;
}
 .list-edit {
     clear: both;
     float: right;
     margin-right: 60px;
}
 .btn-group {
     display: inline;
}
 .filter-search-lbl .label {
     display: none;
}
 .toggle-editor {
     display: none!important;
}
/* weblinks pagination */
 .pagination {
     border: 1px solid #B2C7D7;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
     background: #e7eef3 url(../images/ui-bg_highlight-soft_100_e7eef3_1x100.png) 50% 50% repeat-x;
     color: #222;
     margin: 10px auto;
     padding: 10px 0 10px 0;
     width: 80%;
}
 .pagination ul {
     border: none;
     background: none;
     text-align: left;
     width: auto;
     list-style-type: none;
     margin: 0;
     padding: 0;
}
 .pagination li {
     border: 1px solid #CCC;
     background: #E6E6E6 url(../images/ui-bg_glass_80_e6e6e6_1x400.png) 50% 50% repeat-x;
     font-weight: normal;
     color: #555;
     display: inline;
     padding: 2px 5px;
     text-align: center;
     margin: 0 2px;
}
 .pagenav {
     padding: 2px;
     clear: both;
     text-align: center;
}
 .pagination li.pagination-start,.pagination li.pagination-next,.pagination li.pagination-end,.pagination li.pagination-prev {
     border: 0;
     text-align: center;
}
 .pagination li.pagination-start,.pagination li.pagination-start span {
     padding: 0;
     text-align: center;
}
 p.counter {
     float: right;
     margin: 0 10px;
}
/* Footer area */
 #footer {
     clear: both;
     padding: 30px 0;
}
 #footer p {
     text-align: center;
     margin: 5px 0;
}
 #footer img {
     display: block;
     margin-left: auto;
     margin-right: auto;
}
/* Tooltips */
 .tip-wrap {
     z-index: 10000;
}
 .tip {
     float: left;
     background: #ffc;
     border: 1px solid #D4D5AA;
     padding: 5px;
     max-width: 200px;
}
 .tip-title {
     font-size: 100%;
     font-weight: bold;
     margin: -15px 0 0;
     padding: 15px 0 5px;
     background: url(../images/selector-arrow.png) no-repeat;
}
 .tip-text {
     font-size: 100%;
     margin: 0;
}
 .hasTooltip img {
     margin-top: -25px;
}
/* Icons */
 #main ul.actions {
     background: none;
     border: none;
     margin: 0;
     text-align: right;
     padding: 0;
     width: 100%;
}
 #main ul.actions li {
     display: inline;
}
 #main ul.actions a {
     text-decoration: none;
}

.d-flex {
    display: flex;
}

.flex-grow-1 {
    flex-grow: 1;
}

 .hp1-image img {
     width: 120px;
     height: 120px;
}
 .hp3-image img {
     width: 100px;
     height: 100px;
}
 .hp4-image img {
     width: 125px;
     height: 125px;
}
/*=========== Special pages ========*/
/* Advertising */
 #advts table {
     border: 1px outset #81A9CB;
     background-color: var(--background-color);
     margin: 30px auto;
     border-collapse: collapse;
}
 #advts td {
     padding: 10px;
     border-bottom: 1px solid grey;
     text-align: center;
}
 #advts .banner {
     border-top: 1px solid grey;
}
 #advts .center-banner {
     border-left: 1px solid grey;
     border-right: 1px solid grey;
     text-align: center;
}
 #advts .names {
     font-weight: bold;
     font-style: italic;
}
 .nav-tabs:before, .nav-tabs:after, .nav-pills:before, .nav-pills:after {
     display: table;
     content: "";
     line-height: 0;
}
 .nav-tabs:after, .nav-pills:after {
     clear: both;
}
 .nav-tabs > li, .nav-pills > li {
}
 .nav-tabs > li > a, .nav-pills > li > a {
     padding-right: 12px;
     padding-left: 2px;
     margin-right: 2px;
     line-height: 14px;
}
 .nav-tabs {
     border-bottom: 1px solid #ddd;
}
 .nav-tabs > li {
     margin-bottom: -1px;
}
 .nav-tabs > li > a {
     padding-top: 8px;
     padding-bottom: 8px;
     margin-left: 50px;
     line-height: 18px;
     border: 1px solid transparent;
     border-radius: 4px 4px 0 0;
}
 .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
     border-color: var(--white-color);
}
 .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
     color: #555;
     background-color: var(--white-color);
     border: 1px solid #ddd;
     border-bottom-color: transparent;
     cursor: default;
}
 #jd_edit_fileTabs {
     width: 99.5%;
     margin: 0;
     padding-bottom: 2px;
     padding-left: 0;
}
 .tab-content > .tab-pane, .pill-content > .pill-pane {
     display: none;
}
 .tab-content > .active, .pill-content > .active {
     display: block;
}
 #jd_edit_fileContent td {
     padding: 2px 2px;
}
 .componentheading {
     width: 81.4%;
     margin: auto;
}
 #editForm {
     width: 81%;
     margin: auto;
 }
 .editor {
     width: 600px;
}
 #editor-xtd-buttons {
     display: none;
}
 #editForm ul {
     border-bottom: 1px solid #ddd;
     border-right: 1px solid #ddd;
     border-left: 1px solid #ddd;
     margin-bottom: 10px;
}
 .osol_captcha {
     margin-top: 10px;
}
/* PayPal donate */
 #osdonatestatic br {
     display: none;
}
 .osdonate-form {
     float: right;
}
/* Mobile Devices */
/* ------------------------------------------------------------------------------ */
 @media (max-width: 800px) {
     .osdonate-form {
         display: none!important;
    }
     .hash img {
         width: 40%;
    }
     .col-left {
         width: 50%;
    }
     .col-right {
         width: 50%;
    }
     #topMenu ul.menu li {
         width: 80px;
    }
     ul.menu > li:hover > ul {
         top: 55px;
    }
    /* Advertisement */
     .banner img {
         width: 250px;
         height: 75px;
    }
}
/* -------------------------------------------------------------------------------- */
 
 @media (max-width: 579px) {
     .block5, .img-circle, .kpbox, .ksectionbody, #topic-actions, #kforum-head, .hp1-image img, .hp3-image img,
     .hp4-image, .moduletable p, .klatest-item img, .klatest-more, .block5p1, .block5p2, .block5p3, .hidden-phone, 
      #advts span, .nav img  {
         display: none;
    }
    
    .kbuttonbar-left .kmessage-buttons-row a {
    padding: 0 5px;
}

	#kunena.layout div.kmsgbody {
		display: table;
    }
    
    .input span {
	display: inline-block;
	}

	#topMenu ul {
		margin-left: -20px;
	}
	#topMenu ul.menu > li:hover > ul {
		top: 30px;
	}
    #topMenu ul.menu li {
		width: auto;
		left: 50%;
		font-size: 14px;
		font-weight: 700;
		height: 10px;
    }
	#topMenu ul.menu a {
		white-space: nowrap;
		overflow: visible;
	}
	#topMenu ul.menu li li a {
		margin:0;
		line-height: 0;
		font-size: 11px;
	}
	.nav li {
		display: inline-block;
		padding: 10px;
		text-align: center;
	}
	.nav-child {
		margin-right: 150px;
	}

    /* Advertisement */
     .banner img {
         width: 200px;
         height: 60px;
    }
     #advts span {
         font-size: 18px;
    }
     .header_img img {
         width: 60%;
    }
    .col-left {
         width: 100%;
    }
    .col-right {
         width: 100%;
    }
     h3 {
         padding: 0;
    }
     #kunena.layout ul.kpost-profile {
		padding-left: 0;
    }
     #kunena.layout tr.krow1 td, #kunena.layout tr.krow2 td, #kunena.layout div.kthead-title a {
		padding: 2px 0 2px 5px;
    }
     #kunena.layout div.kthead-title a {
         font-size: 14px!important;
    }
	#kunena.layout div.kmsgattach {
		margin-bottom: 0;
	}
	#kunena.layout div.kmsgbody {
		padding-bottom: 0;
	}   
    #kunena.layout table, #kunena.layout tbody {
         float: left;
    }
	.klatest-subject {
		padding: 5px 0 5px 0!important;
	}
     .klatest-posttime {
         padding-bottom: 5px;
    }
  
}