/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 * 
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */
 /* ZUM Debuggen */
 pre.dump{font-family:monospace; font-size:.7em;-moz-tab-size: 16;}
 
 /* CHRISEMM */
 .clearfix::after{content:' ';display:block;height:1px;margin-top:-1px;font-size:1px;line-height:1px;visibility:hidden;clear:both;}
 ul.family_overview {list-style-type:none;margin:0;padding:0;text-align:center;}
.family_overview li{display: inline-block;width: 19em;max-width: 100%;margin: .2em;vertical-align: top;text-align: left;background-color: #f3f3f3;border: .5em solid #f3f3f3;border-radius:.4em;line-height:1.2;}
.family_overview li *{line-height:1.2;}
.family_overview li .links{margin-top:1em;}
.family_overview li .links a{font-size:1.8em;display:inline-block;padding:0 .2em;margin-right:.1em;border:none;color:#555;background-color:#fff;border-radius:.2em;}
.family_overview li .date{display:block;font-size:.8em;margin-top:.3em;}
.family_overview li img{display:block;float:left;margin:0 1em 0 0;border-radius:.3em;}
.family_overview li .links{font-size:.8em;}
.family_overview li.subtitle{display:block;background:none;margin: 2em auto 0 auto;text-align:center;border:none;padding:0;}
h2.dateRange{border:none;margin:0;}
 

/* Stammbaum svg-js */
 .stammbaum,.center{text-align:center;}
 .stammbaum{margin-top:2em;}
svg{display:block;max-width:100%;height:auto;margin: auto;}
svg text{transform:translate(0,155);text-anchor:middle;font-weight:500;font-size:10px;fill:#000;}
svg tspan.date{font-style:italic;font-size:8px;}
svg text.dumm{font-size:120px;fill:#ccc;}
svg rect,svg path.arrow{fill:#eee;stroke:#ccc;stroke-width:.5;}	
svg .current rect{fill:#dfd;}	
svg path.connection{stroke:#ccc;stroke-width:1;}
svg circle.connection{fill:#fff;stroke:#ccc;stroke-width:1;}	
 
 /* Solo-Seite */
 h1 .bith_name{font-size:.6em;font-weight:400;}
 h1 .gender{margin:0 .3em;font-size:.8em;}
 .relation_out{margin-top:-1em;}
 .relation_box{margin:1em 0 0 0;border:1px solid #eee;}
#main ul{margin:1em 0;padding-left:1em;}
 .relation_box h3,aside h3{background-color:#eee;padding:.4em .5em;font-size:1.1em;}
 .relation_box h3{margin:0;}
aside h3{margin:0 0 .5em 0;}
.body_text h3{margin:1.5em 0 .3em 0;}
.body_text h3 + *{margin-top:0 !important;}
#main .relation_box ul{margin:.5em 0;padding:0 .5em 0 1.5em;}
#main .relation_box p{padding:0 .5em;margin:.5em 0;}
.stammbaum_link .icon{margin-right:.5em;}

@media(min-width:500px){
	.relation_out{margin-left:-1%;margin-right:-1%;}
	 .relation_box{display:inline-block;vertical-align:top;width:48%;margin:1em 1% 0 1%;}
}
@media(min-width:1400px){
	.relation_out{margin-left:-.5%;margin-right:-.5%;}
	 .relation_box{display:inline-block;vertical-align:top;width:24%;margin:1em .5% 0 .5%;}
}

 
 
figure.portrait{max-width:80%;margin:auto;}

/* Buttons zum Bearbeiten */
p.add_p{text-align:right;}
a.add_person,.edit_person{font-size:1.3rem;height:1.5em;width:1.5em;text-align:center;display:inline-block;text-decoration:none;background:no-repeat center center #900;line-height:1;padding:.2em;vertical-align:middle;font-weight:700;border-radius:50%;color:#fff;text-align:center;}
.edit_person{margin-left:.5em;float:right;}
.nojquery .edit_person{display:none;}
h2 .edit_person{margin-top:-.4em;}
h3 .edit_person{margin-top:-.1em;}
.edit_person span.txt{display:none;}
.edit_person.add_image,.edit_person.add_document{}


button,.button{display:inline-block; padding: .1em 1em !important; font: inherit; cursor: pointer; outline: inherit !important; background-color:#eee; border:1px solid #999;text-decoration:none;}

.filter{display:inline-block;margin:1em 0;}
.filter h4{margin:0 0 .5em 0}
.filter select{margin-right:1em;}
.filter button,.filter option{padding:.05em .5em !important;}
 
.flRight30{;margin-top:2em;}
 @media(min-width:700px){	  
	.flLeft70{width:70%;float:left;padding-right:2em;}
	.flRight30{width:30%;float:right;margin-top:0;}
 }

* {box-sizing: border-box; }
body,html{margin:0;padding:0;font-size:15px;color: #444; }
html{height:100%;}
body.superuser{min-height:100%;position:relative;padding-bottom:5em;}
.wrapper {padding: 0 1em; max-width: 80em; margin: 0 auto; }

.wrapMaxW60{max-width:60em;margin:auto;}
.wrapMaxW50{max-width:50em;margin:auto;}
.wrapMaxW40{max-width:40em;margin:auto;}
hr{margin:1em 0;border-width:2px 0 0 0;border-style:solid;border-color:#eee;}
header,footer{padding:1em 0;background-color:#eee;}
*{font-family: 'Quattrocento', serif; font-size: 1em; line-height: 1.5em; color: inherit; }
.error{color:#c00;}
img {max-width: 100%; }
h1 {font-size:1.8em;}
h1:first-child{margin-top:0;margin-bottom:.5em;}
h1.person_name{margin-bottom:.3em;}
h1.person_name + p{margin-top:.6em;}
h2 {font-weight: 700; font-size:1.1em;border-bottom: 1px solid #eee; padding: 1.5em 0 .5em 0;margin:1.5em 0 1em 0;text-transform:uppercase;letter-spacing:.1em;}
h3 {font-size:1.2em;}
h4{font-size:.9em;text-transform:uppercase;letter-spacing:.1em;font-weight:400;margin:1.5em 0 .5em 0;padding-bottom:.2em;border-bottom:1px solid #ddd;}
a {color: #333; }
a:hover, .nav a:hover {color: #000; border-color: #aaa; }
blockquote {margin-left: 0; padding-left: 1.5em; padding-right: 2em; border-left: 4px solid #ddd; font-style: italic; color: #777; }
pre, code {background: #eee; border: 1px solid #ddd; }
pre {line-height: 1.4em; padding: 1em; border-left: 4px solid #ddd; }
@media(min-width:800px){
.wrapper {padding: 0 2em; }
}

/*********************************************************************
* 2. Masthead area
*
*/


.topnav, .topnav li {list-style: none; padding: 0; margin: 0; }
.topnav li {float: left; margin-right: .5em;;}
.topnav a {padding: 0.5em; text-decoration: none; display: block; background: #eee; color: #333; border: 1px solid #eee; }
.topnav a .icon{font-size:2em;vertical-align:middle;color:#999;}
.topnav a .txt{display:none;}
.topnav a:hover {background: #ddd; border-color: #ddd; }
.topnav li.current a {background: #ddd; border-color: #ddd;}
.topnav li.current a .icon{color:#000;}
.topnav li a:hover .icon{color:#fff;}
.topnav li.edit a {background: none; }


/* Formularkram */

/*frontend Login */
.loginform{width:30em;max-width:100%;margin:auto;}

form.just_button{display:inline-block;vertical-align:top;margin-right:.5em;}

form.delete{text-align:right;margin-top:3em;}
form.search {width: 100%; }
form.search input {margin: .5em 0 0 0; padding: 0.25em 0.5em; border: 1px solid #ccc; width: 100%; }


/* Seite link-person */
label {font-size:.8em;}
label.inzest{background-color:#eee;}
input[type=radio],input[type=checkbox],input[type=radio] + label ,input[type=checkbox] +label, label span {vertical-align:middle;display:inline-block;}


@media(min-width:500px){
	
	form.search {float: right; margin: 0; width: 30%; 	}
}

@media(min-width:800px){
	.topnav a .txt{font-size:.8em;display:inline-block;vertical-align:middle;margin-left:.3em;}
	
}
/*********************************************************************
* Pagination
*
*/
#main .MarkupPagerNav {clear: both;margin: 1em 0 0 0;display:inline-block;}
.MarkupPagerNav li {display: inline;list-style: none;margin: 0;}

.MarkupPagerNav li a,.MarkupPagerNav li.MarkupPagerNavSeparator {
display: block;float: left;padding: .2em .9em;background: #eee;border:1px solid #ccc;margin-right: .3em;font-size: .9em;font-weight: bold;text-transform: uppercase;text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavOn a,.MarkupPagerNav li a:hover {
background: #ccc;color:#fff;
}
.MarkupPagerNav li.MarkupPagerNavSeparator {
display: inline;background: #eee;padding-left: .3em;padding-right: .3em;
}

/*********************************************************************
* 3. Main content and sidebar
*
*/

#main {padding-top: 1em; margin-top: 1em;margin-bottom: 3em; clear: both; }
#content {width: 85%; }
#content, #sidebar {padding-bottom: 2em; }

.nav {margin-left: 0; padding-left: 0; list-style: none; }
.nav .nav {padding-left: 1.5em; list-style: disc; }
.nav li {margin: 1em 0; }
.nav-tree li {margin-top: 0; margin-bottom: 0; }
.nav a {font-weight: bold; }
.nav-tree li a {color: #777; }
.nav .current > a {color: #333; }

.align_left {/* for images placed in rich text editor */ 
float: left; margin: 0 1em 0.5em 0; position: relative; top: 0.5em; max-width: 50%; }

.align_right {/* for images placed in rich text editor */ 
float: right; margin: 0 0 0.5em 1em; max-width: 50%; }

.align_center {/* for images placed in rich text editor */ 
display: block; margin: 1em auto; position: relative; top: 0.5em; }


/*********************************************************************
* 4. Footer
*
*/

#footer {min-height:3.2em;margin-top:-3.2em;position:absolute;top:100%;left:0;width:100%;clear: both; }
#footer .inner_footer{font-size:.8em;text-align:center;}

/*********************************************************************
* 5. Media queries for responsive layout
*
*/

@media only screen and (max-width: 600px) {	/* mobile layout */ 

	body{	font-size: 15px; 	}
	#content {	width: 100%; 	}
	.align_left, .align_right, .align_center {	display: block; 	float: none; 	margin: 1em auto; 	max-width: 100%; 	}

}

@media only screen and (min-width: 1200px) {/* extra-wide desktop layout */ 
	body {	font-size: 16px; 	}
}
@media only screen and (min-width: 1400px) {/* extra-wide desktop layout */ 
	body {	font-size: 17px; 	}
}
/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: #fff;
}