@charset "utf-8";
/* CSS Document */

body{
	padding:0px;
	margin:0px !important;
	font-family: 'PT Sans', sans-serif;
	overflow-y:scroll;
}

#wrapper{
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

header{
	display:block;
	width:100%;
	background-color:rgba(50,50,100,0.5);
	margin:0px;
	height:95px;
	z-index:999;
	position:fixed;
}

footer{
	height:50px;
}

header h1{
	display:block;
	text-align:center;
	width:1000px;
	margin:0 auto;
	font-family: 'Lobster Two', serif;
	font-size:40px;
	/* color:#5B73FF; */
	color:#fff;
	position:relative;
}

header h2{
	display:block;
	text-align:center;
	width:1000px;
	margin:0 auto;
	font-family: 'Lobster Two', serif;
	font-size:28px;
	/* color:#5B73FF; */
	color:#fff;
	position:relative;
}


.weiss{
	color:#fff !important;
}

#content{
	
	
	padding-top:125px;
	height: calc( 100% );
	padding-bottom:50px;
}

#content2{
	
	padding-top:125px;
	height: calc( 100% );
	padding-bottom:50px;
}

#content3{
	
	padding-top:125px;
	height: calc( 100% );
	padding-bottom:50px;
}

#begruessung{
	font-family: 'Lobster Two', serif;
	font-size:28px;
	background-color: rgba(255, 255, 255, 0.80);
	padding: 20px;
	margin-top: -5px;
	border-radius: 0px 0px 30px 30px;
	margin-bottom: 20px;
}

#content > article{
	clear:both;
	width:800px;
	margin:0 auto;
	margin-bottom:100px;
}

#content2 > .gaestebuch{
	clear:both;
	width:800px;
	margin:0 auto;
	margin-bottom:100px;
}


.ein_bild{
	position:relative;
}

.video-js{
	width:800px;
	height:450px;
	border-radius:40px 40px 0px 0px;
	padding-bottom:20px;
}

.bilddatum{
	display:none;
	opacity:0.5;
	color:#FF4D1C;
	top: 0px;
	right:0px;
	padding-right: 55px;
	padding-left: 55px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:22px;
	position:absolute;
	z-index:1000;
}

.bilddatum::hover{
	opacity:1.0 !important;
}

.ein_bild > .dasbild{
	width:800px;
	border-radius:40px 40px 0px 0px;
}

article h2{
	position: absolute;
	bottom: 50px;
	padding: 15px 50px;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 0px 20px 20px 0px;
	color: rgba(0, 0, 0, 0.65);
}

.kommentare{
	position:relative;
	background-color: #fff;
	padding: 20px;
	margin-top: -5px;
	border-radius: 0px 0px 20px 20px;
}

.plus_kommentar{
	float: right;
	background-color: rgba(91,115, 255, 0.55);
	color: #fff;
	font-size: 30px;
	position: absolute;
	width:15px;
	height:42px;
	right: 20px;
	bottom: 11px;
	border-radius: 25px;
	padding: 0px 13px !important;
	overflow:hidden;
	transition: all 0.5s;
	cursor:pointer;
}

.plus_kommentar:hover{
	background-color: rgba(91,115, 255, 1);
	width:175px !important;
}

.plus_eintrag{
	float: right;
	background-color: rgba(91,115, 255, 0.55);
	color: #fff;
	font-size: 30px;
	position: absolute;
	width:15px;
	height:42px;
	right: 20px;
	top: 11px;
	border-radius: 25px;
	padding: 0px 13px !important;
	overflow:hidden;
	transition: all 0.5s;
	cursor:pointer;
}

.plus_eintrag:hover{
	background-color: rgba(91,115, 255, 1);
	width:175px !important;
}

.schreiber{
	font-family: 'Lobster Two', serif;
}

.gbhg{
	border-radius: 30px 30px 0px 0px;
	width:800px;
}

.inp_schreiber{
	font-family: "Lobster Two",serif;
	width: 300px;
	font-size: 15px;
}

.inp_kommentartext{
	width: 750px;
	height: 100px;
	font-family:"PT Sans", sans-serif;
}

.inp_gaestebuchtext{
	width: 792px;
	height: 100px;
	font-family:"PT Sans", sans-serif;
}


.speichere_kommentar{
	color:#fff;
	background-color: rgba(91,115, 255, 0.55);
	transition: all 0.5s;
	padding:5px 20px 5px 20px;
	border:none;
	border-radius:15px;
	margin-top:4px;
}

.speichere_kommentar:hover{
	background-color: rgba(91,115, 255, 1);
}

.speichere_gaestebuch{
	color:#fff;
	background-color: rgba(91,115, 255, 0.85);
	transition: all 0.5s;
	padding:5px 20px 5px 20px;
	border:none;
	border-radius:15px;
	margin-top:4px;
}

.speichere_gaestebuch:hover{
	background-color: rgba(91,115, 255, 1);
}


.kommentartext{
	margin-bottom:10px;
}

.gaestebuchtext{
	padding:5px 20px 5px 20px;
	margin-bottom:10px;
	background-color: rgba(255, 255, 255, 0.95);
}

.gbschreiber{
	padding:5px 20px 5px 20px;
	background-color:rgba(255,255,255,0.95);
	font-family: 'Lobster Two', serif;
}

.gbschreiber > small{
	float:right;
}

.input_speichern{
	margin-bottom:20px;
}

.ein_kommentar{
	clear:both;
}

.ein_kommentar:before{
	content: " ";
	float: left;
	width: 50%;
	height: 1px;
	background-color: #5B73FF;
	margin: 10px 25% 10px 25%;
}

.ein_kommentar:first-child::before{
	background-color:#fff !important;
}

.ein_gbeintrag{
	clear:both;
}



.ein_kommentar_input{
	display:none;
}

.title_editor{
	position: absolute;
	left: 20px;
	bottom: 20px;
}

.inp_title{
	width: 300px;
	position: absolute;
	left: 50px;
	top: 5px;
	display:none;
}

.edit_title{
}

.save_title{
	display:none;
	position: absolute;
	left: 360px;
	top: 4px;
}

.title_editor img{
	width:30px;
}

#upload{
	float: right;
	position: absolute;
	right: 20px;
	font-size: 30px;
	bottom: 30px;
	cursor:pointer;
	width:30px;
}

.delete_bild{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
}

.delete_video{
	position: absolute;
	top: 20px;
	right: -30px;
	width: 30px;
}


#logout{
	float: right;
	position: absolute;
	right: 70px;
	font-size: 30px;
	bottom: 20px;
	cursor:pointer;
	width:30px;
}

.refresh_button{
	width: 200px;
	float: right;
	cursor:pointer;
}

.refresh_button > img{
	width:160px;
}

#logout img{
	width:30px;
}


.pw_fenster{
	display:block;
	width:500px;
	margin: 0 auto;
	text-align:center;
}

#btn_photos{
	width:50px;
	position:absolute;
	left:50px;
	top:18px;
	cursor:pointer;
}

#btn_guestbook{
	width:50px;
	position:absolute;
	right:50px;
	top:18px;
	cursor:pointer;
}

#btn_photos:hover,
#btn_guestbook:hover{
	transform: scale(1.05);
}


#uploader{
	display:none;
	width: 800px;
	margin: 0 auto;
	height: 220px;
	padding: 0px 30px 0px 30px;
	transition: all 0.5s;
}





.droparea {
                    position:relative;
                    text-align: center;
                }
				
.droparea > img{
	max-width:200px;
	max-height:200px;
}
                .multiple {
                    position:relative;
                    height: 20px;
                }
                .droparea div, .droparea input, .multiple div, .multiple input {
                    position: absolute;
                    top:0;
					left:0px;
                    width: 100%;
                    height: 100%;
                }
                .droparea input, .multiple input {
                    cursor: pointer; 
                    opacity: 0; 
                }
                .droparea .instructions, .multiple .instructions {
                    border: 2px dashed #333;
					opacity: .8;
					background-color: rgba(240,240,240,0.75);
                }
                .droparea .instructions.over, .multiple .instructions.over {
                    border: 2px dashed #000;
                    background: #ffa;
                }
                .droparea .progress, .multiple .progress {
                    position:absolute;
                    bottom: 0;
                    width: 100%;
                    height: 0;
                    color: #fff;
                    background: #6b0;
                }
                .multiple .progress {
                    width: 0;
                    height: 100%;
                }


                #areas { float: left; width: 480px; }
                div.spot {
                    float: left;
                    margin: 0 20px 20px 0;
                    width: 220px;
                    min-height: 220px;
                }
                .thumb {
                    float: left;
                    margin:0 20px 20px 0;
                    width: 140px;
                    min-height: 105px;
                }
                .desc {
                    float:right;
                    width: 460px;
                }
				
				
/* **************** PROMPT ********************************* */
.jqifade{
      position: absolute;
      background-color: #aaaaaa;
}
div.jqi{
      width: 400px;
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      position: absolute;
      background-color: #ffffff;
      font-size: 11px;
      text-align: left;
      border: solid 1px #eeeeee;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      padding: 7px;
}
div.jqi .jqicontainer{
      font-weight: bold;
}
div.jqi .jqiclose{
      position: absolute;
      top: 4px; right: -2px;
      width: 18px;
      cursor: default;
      color: #bbbbbb;
      font-weight: bold;
}
div.jqi .jqimessage{
      padding: 10px;
      line-height: 20px;
      color: #444444;
}
div.jqi .jqibuttons{
      text-align: right;
      padding: 5px 0 5px 0;
      border: solid 1px #eeeeee;
      background-color: #f4f4f4;
}
div.jqi button{
      padding: 3px 10px;
      margin: 0 10px;
      background-color: #2F6073;
      border: solid 1px #f4f4f4;
      color: #ffffff;
      font-weight: bold;
      font-size: 12px;
}
div.jqi button:hover{
      background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
      background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
      background-color: #BF5E26;
}

/* *********************************************************************************************** */				



@media (max-width : 1000px){

.pw_fenster{
	width:100%;
	margin: 0 auto;
	text-align:center;
}

.video-js{
	width:100% !important;
	height:auto !important;
	min-height:250px;
}


#wrapper{
	width:100% !important;
}
	
header{
	height:25px;
}
	
header h1{
	font-size:20px;
	width:100% !important;
}

header h1 img{
	display:none;
}
	
header h2{
	font-size:20px;
	width:100% !important;
	display:none;
}

#content{
	float:left !important;
	width:100% !important;
	padding-top:35px;
}

#content2{
	float:left !important;
	width:100% !important;
}

#content > article{
	width:100% !important;
	margin-bottom:10px;
}

#content2 > .gaestebuch{
	width:100% !important;
}

.ein_bild > .dasbild{
	width:100% !important;
	border-radius:20px  20px 0px 0px;
}

.gbhg{
	width:100%;
	
}

#logout{
	display:none;
}

#upload{
	/* display:none; */
	float: right;
	position: fixed;
	right: auto;
	left:20px;
	font-size: 30px;
	top: 2px;
	cursor: pointer;
	width: 20px;
	z-index: 99999;
	padding: 0px 10px 0px 10px;
}

div.spot{
	width:40%;
}	

.refresh_button > img {
    width: 60px;
}	
	
article h2{
	bottom: 10px !important;
	padding: 7px 25px !important;
	border-radius: 0px 10px 10px 0px !important;
	font-size:16px !important;
}

#btn_photos{
	width:40px !important;
	position:absolute;
	left:10px !important;
	top:35px !important;
	cursor:pointer;
}

#btn_guestbook{
	width:40px !important;
	position:absolute;
	right:10px !important;
	top:35px !important;
	cursor:pointer;
}

#begruessung{
	font-size:18px !important;
}

.inp_gaestebuchtext{
	width: 90% !important;
	margin-left:5%;
}

.inp_kommentartext{
	width: 90% !important;
}

.inp_schreiber{
	width: 50% !important;
	margin-left:5%;
}

.speichere_gaestebuch{
	margin-left:5%;
}

.delete_video,
.delete_bild{
	position: absolute;
	top: 2px;
	right: 2px;
	width: 30px;
}

.delete_video {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 30px;
    z-index: 99999;
}	

.video-js{
	border-radius:20px 20px 0px 0px;	
}	
	
#uploader{
	width: calc( 100% - 40px );	
	padding: 0px 0px 0px 40px;
}	

	.refresh_button{
		width:100px;
		float:left;
		padding:70px 0px 0px 50px;
	}
	
}