@import "jquery.rating.css";
@import "formulare.css";
@import '../shariff/shariff.complete.css';

#content { max-width:var(--layout-max-width); float:none; margin:0 auto;padding: 3% 5%!important;}

#content video, #content iframe {max-width:100%;max-height:auto; margin-bottom:30px; }

#content .section {background:none !important; }
#content h1 { margin-bottom:5px; }
#content .ckeditor-html5-video { width:auto;display:inline;}
#content small { font-weight:bolder;}

.schedule { width:100%;}
.schedule .weekday {float:left; width:100%;}
.schedule .weekday .name { float:left; width:130px;font-weight:500;}
.schedule .weekday .events { float:right; width:calc(100% - 130px); }
.schedule .weekday:hover {background:rgba(255,255,255,.2);}

.shariff {margin-left:-10px;}



/* Tabelle Betreuungsplan */

 .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
	width:100%
  }

  table.wochenplan {
	float:left;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px;
    border-collapse: collapse;
    table-layout: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
  }

  table.wochenplan caption h2 {
    margin: 0;
    font-size: 1.25em;
    font-weight: bold;
  }

  table.wochenplan th,
  table.wochenplan td {
    border: 1px solid #ddd;
    padding: 18px 15px;
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }

  table.wochenplan thead th {
    background-color: #f4f4f4;
  }

  table.wochenplan tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  table.wochenplan tbody tr:hover {
    background-color: #ececec;
  }

  table.wochenplan tfoot td {
    border: none;
    font-style: italic;
    padding-top: 10px;
  }
  
  @media (max-width: 600px) {
    table.wochenplan th,
    table.wochenplan td {      
      white-space: normal;
      padding: 12px 10px;
    }
  }




/* CSS3 Rating -----------------------------------------------*/

.glyphicon-star-empty, .glyphicon-star { font-size:20px; color:#313193; cursor:pointer  }
.glyphicon-star { color:gold }
/* ------------   hreview Formatierung ----------------- */

div#company-rating { float:left; width:300px;  line-height:25px }
.fn, .votes, .count { display:none }

#ratingName { float:left }
div.hreview-aggregate { float:left}
#starwrapper2 {  float:left; display:inline-block;  margin-left:5px; margin-top:5px; width:90px;  overflow:hidden; }
/* span.average { margin-left:10px} */
span.rating { float:left; line-height:25px;}


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

.flexbox-item:first-child { background:#f6f6f6;}


div#breadcrumb { position:relative; float:left; left:0; width:100%; margin:0; top:0}
div.inner-crumb {max-width:var(--layout-max-width); margin:0 auto }


#contentbottom		{ float:left; width:100%; height:30px }


div.art-wrapper			{ float:left; width: 100%;  margin: 0 0 0;padding: 20px 0 50px 0;}


.media {padding:0 5% 5% 0; box-sizing:border-box }





/* Formular neuen Kommentar schreiben */
h4#wnr						{ float:left; width:100%;}

.review-wrp  { background:#f9f9f9; padding:3% 0}

.review-wrapper {
	float: left;
	clear: both;
	width: 100%;
	background: var(--section-color-even);
	padding: 5% 5%;
	box-sizing: border-box;
}
div#review-frm		{	max-width: 1375px;margin: 0 auto; padding:0 5%;}  
#review-frm DIV		{ float:left;  }

#review-frm DIV.kname, 
#review-frm DIV.kmail, #review-frm DIV.kfon 	{ width:100%; background:none; margin:5px 0; }

	.r-frm-caption 					 { float:left;   line-height:20px; text-align:left; text-indent:0px; margin-right:10px; margin-top:5px }
	.r-frm-caption.rate  		{ float:left;  width:auto; line-height:20px; text-align:left; text-indent:0px; margin-right:10px; margin:5px 0;  }
	
	.r-frm-value						{ float:left; width:100%; line-height:20px; text-align:left; padding-top:0px; background:none}
	.r-frm-value.rate				{ float:left; width:150px; line-height:20px; text-align:left; padding-top:0px; position:relative; top:-4px; margin-left:5px;  }
	
	
	INPUT.t_input,
	Textarea#r_text,
	Textarea#itext	{ width:100%;border-radius:0px!important; box-shadow:none!important; font-size:1em;}

	
	#frm-sbm 		{ float:left;  margin:15px 0 0 0; }
	
	span.sbm_de 		{width:100%; transition: all ease 0.3s}
	span.sbm_de:hover 	{  }
	




.hint { font-size:.8em; line-height:1.2em;}


	/*  Fehlermeldungen und Erfolgsmeldungen  */
	#msg {width:100%;}

	/* Kommentare und Bewertungen Liste */
	
	#review-comments			{ width:100%; max-width:var(--layout-max-width); padding:5% 5%; margin:1em auto 0 auto; box-sizing:border-box; border-top:1px solid #eee;}
	#review-comments H4 	{ width:100%; margin:5px 0 10px 0; padding:0px; text-indent:4px; font-size:1em; text-align:left; }	
	#review-comments OL		{  width:100%;  list-style-type:none; padding:0 0 0 0; margin:0 auto;  }
	#review-comments LI 		{ float:left; width:100%; margin:0 0 30px 0; padding:0; }
	#review-comments .small { margin:0;}
	
	.reviewer								{ float:left; clear:both; line-height:1em;width:auto; text-align:center; margin:5px 0 0 25px; }	
	.comment-wrapper			{ float:left;  width:auto; padding:1.5em 2em; text-align:left; background:#f4f4f4; box-sizing:border-box; position:relative; margin:0 0 15px 0; border-radius:10px;}
	.comment-wrapper::after {
    content: " ";
    position: absolute;
    top: 100%;  /* At the top of the tooltip */
    left: 100px;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: #f4f4f4 transparent transparent transparent;}
	
	.comment-wrapper P		{ float:left; width:100%; margin:10px 0 0 0; text-align:left; background:none; }

	
	.gstar			{ float:left; width:16px; height:16px; overflow:hidden; background:url('../images/star.png') center -32px no-repeat }
	.grstar		{ float:left; width:16px; height:16px; overflow:hidden; background:url('../images/star.png') center 0px no-repeat }
	.startext		{ float:left; width:80px; height:16px; font-size:13px }

	.fa-star		{ color:#daa470; margin:0; padding:0 }
	.fa-star.disabled		{ color:grey; }	



/* -------- Blogeinträge teilen -------------------------------------------------------------- */

div#shareblog	   	{ float:right; width:100%; height:auto; background:none; margin:0 0 30px 0; }
div#shareblog ul li {margin: 10px;}
#shareblog a { color:#fff;}
#shr-btn	   				{ float:right; background:; margin-top:8px; text-align:left }
#shr-btn Img   	  	{ vertical-align:middle }
#shr-btn A	   			{ font-size:11px; font-weight:normal }
/* ----------------------------------------------------------------------------------------------*/  
/* Empfohlene Blogs */

.additional-articles { background: #fff; width:100%;  padding-top: 2.0em; }

.additional-articles h2 {max-width:var(--layout-max-width);}
.recommend-articles { 
	width: 100%;
    list-style-type: none;
    margin: 0% auto;
    background:#fff;
    padding: 2em 0%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    box-pack: justify;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	max-width:var(--layout-max-width);
}
.recommend-articles li { width: 31.333%;
    float: left;
    background:var(--section-color-even);  
    margin: 0 1% 1em;
    padding: 2em 2em 3em 2em;
    box-sizing: border-box;
    position: relative;
	box-shadow: 0 0 3px #ccc;
	border-radius:3px;
}
.recommend-articles div.art-wrapper { border:none; padding:0; }
.recommend-articles h3 { font-size:1.3em; text-align:left; color: var(--headline-color); font-family:var(--basic-font-family); }
.recommend-articles h3 a { font-size:1.0em; color: var(--headline-color); font-weight: 500; }
.recommend-articles .pure-u-1-1 div.lnkwrp { position: absolute; bottom: 0px; right: 0px; width:100%; text-align:center; padding-bottom:20px;}
.recommend-articles .pure-u-1-1 div.lnkwrp a { margin-left: calc(50% - 100px); border-radius:20px;}

.recommend-articles .artmedia { position:absolute;left:0;top:0; max-height:300px; overflow:hidden;}
.recommend-articles .desc { margin-top:290px;}

.gstar		{ float:left; width:16px; height:16px; overflow:hidden; background:url('../images/star.png') center -32px no-repeat }
.grstar		{ float:left; width:16px; height:16px; overflow:hidden; background:url('../images/star.png') center 0px no-repeat }
.startext	{ float:left; width:80px; height:16px; font-size:13px }

.fa-star		{ color:gold; margin:0; padding:0 }
.fa-star.disabled		{ color:grey; }	

#reviews .rating-stars .empty:before { content:"\f005"; color:#ccc; font-family:FontAwesome; font-size:20px; }
#reviews .rating-stars .base-points .empty:before { content:"\f005"; color:#ccc; font-family:FontAwesome; font-size:20px; }
#reviews .rating-stars .given-points .empty:before { content:"\f005"; color:gold; font-family:FontAwesome; font-size:20px; }

div[itemprop="creativeWorkSeries"] { display:none; }


.fa-star		{ color:#f7ca60; margin:0; padding:0; font-size:16px;}
.fa-star.disabled		{ color:#ccc; }	

.rate .stars { display:none; }
.rate .stars + label { display:inline-block; width:auto; }
.rate .stars + label:before { content:"\f006"; font-family:FontAwesome; font-size:16px; }
.rate .stars.given + label:before { content:"\f005"; font-family:FontAwesome; color:#f7ca60; }




@media screen and (max-width: 1200px) {
	.recommend-articles { padding:2.0em; }
	.recommend-articles li { width:48%; }
}
@media screen and (max-width: 800px) {	
	#content { padding:50px 5% !important; }
}
@media screen and (max-width: 700px) {	
	.media { max-width:100%; padding:0 0 5%}
	.recommend-articles { padding: 20px 15px; }
	.recommend-articles li { width:100%; padding:20px; }
	.recommend-articles .pure-u-1-1 div.lnkwrp { position:unset; text-align:right; width:100%;  }
	.recommend-articles .pure-u-1-1 div.lnkwrp  a { float:right; }
	.shariff .orientation-horizontal li { min-width:29% !important; }
	div#shareblog ul li {margin: 2%;}
	.paragraph.image-left .text, .paragraph.image-right .text {padding:0;}
	.paragraph.image-left .image, .paragraph.image-right .image { width:100%;}
	.r-frm-value.rate {top:4px;}
 }
@media screen and (max-width: 480px) {	
	.pure-form input:not([type]), .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form label {
		margin:0!important;
	}
	.shariff .orientation-horizontal li { min-width:unset; width:14.333% !important; }
}