@charset "utf-8";

@import url(////fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(////fonts.googleapis.com/css?family=Arimo);

*								{ margin: 0; padding: 0; }
html,body				{ background: #bfbfbf; background-image: url("../img/site/stripes.jpg"); color: #333; height: 100%; font-size: 20px; font-family: "Arimo", sans-serif; }

h1							{ color: #000; font-size: 1.25em; }
h2							{ color: #d0192e; font-size: 1.25em; font-weight: normal; margin-bottom: 20px; font-family:"Libre Baskerville", Times, serif; }
h3							{ color: #666; font-size: 1em; font-weight: normal; margin-bottom: 15px; text-transform: uppercase; font-weight: normal;  }
h3.sub					{ color: #666; font-size: 0.875em; font-weight: normal; margin-bottom: 15px; text-transform: uppercase; font-weight: normal; }
h4							{ color: #333; font-size: 1.125em; font-weight: normal; margin-bottom: 20px; font-family:"Libre Baskerville", Times, serif; }
h5							{ color: #666; font-size: 0.75em; margin-bottom: 20px; text-transform: uppercase; font-weight: normal; }

p								{ color: #000; font-size: 0.750em; line-height: 1.2; margin-bottom: 15px; }
.img_site				{ float: left; width: 590px; height: auto; overflow: auto; background: #444; padding: 4px; border: 1px solid #000; margin-bottom: 20px; }
.box_note				{ width: 588px; height: auto; overflow: auto; padding: 5px; border: 1px solid #000; font-size: 0.688em; font-weight: normal; margin-bottom: 20px; display: block; }

h1 a:link,h2 a:link,h3 a:link,h4 a:link,
h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited
											{ color: #000; text-decoration: none; }
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover
											{ color: #666; text-decoration: none; }

p a:link, p a:visited	{ text-decoration: none; color: #000; }
p a:hover							{ text-decoration: none; color: #666; }
p a:link:before, p a:visited:before
											{ content: "\f0da"; color: #000; font-family: FontAwesome; margin-right: 5px; }
p a:hover:before			{ content: "\f0da"; color: #666; font-family: FontAwesome; margin-right: 5px; }

.map									{ width: 100%; height: 400px; margin: 0 0 20px 0; border: none; background: url(https://www.4illusion.com/img/site/map.jpg); }
.label								{ float: left; margin: 0 10px 5px 0; border: none;  }
.label a:link:before	{ content: " "; }
/* Spans */
.left									{ float: left; width: 60px; line-height: 1.5;}
.right								{ float: right; width: auto;  line-height: 1.5;}
hr										{ clear: both; border: none; color: transparent; margin-bottom: 20px; }

/************************* 
********* HEADER *********
**************************/

header					{ width: 100%; }
.topnav					{ width: 960px; height: 30px; background: #eee; margin: 0 auto; border-bottom: 1px solid #fff; }
.logo						{ width: 960px; height: 200px; background: none; margin: 0 auto; }
.logo a					{ border: none; }
#nav						{ width: 960px; height: 40px; background: #ffffff; /* Old browsers */
									background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 34%, #e1e1e1 41%, #e1e1e1 70%, #eaeaea 83%, #f6f6f6 96%); /* FF3.6+ */
									background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(34%,#f1f1f1), color-stop(41%,#e1e1e1), color-stop(70%,#e1e1e1), color-stop(83%,#eaeaea), color-stop(96%,#f6f6f6)); /* Chrome,Safari4+ */
									background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 34%,#e1e1e1 41%,#e1e1e1 70%,#eaeaea 83%,#f6f6f6 96%); /* Chrome10+,Safari5.1+ */
									background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 34%,#e1e1e1 41%,#e1e1e1 70%,#eaeaea 83%,#f6f6f6 96%); /* Opera 11.10+ */
									background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 34%,#e1e1e1 41%,#e1e1e1 70%,#eaeaea 83%,#f6f6f6 96%); /* IE10+ */
									background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 34%,#e1e1e1 41%,#e1e1e1 70%,#eaeaea 83%,#f6f6f6 96%); /* W3C */
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
									margin: 0 auto;
								}

/************************* 
******** CONTENT *********
**************************/

#main												{ width: 100%; }

/************************* 
******* Startseite *******
**************************/

/* Slider */

#carousel               { margin: 0 auto; width: 920px !important; }
#carousel .slide        { margin: 0 12px 0 0 !important; position: relative; }
#carousel .slide   img  { width: 294px; height: auto; border: 1px solid #4ab3d9; z-index:-9999 !important; }
#carousel .slide .text  { position:absolute; bottom: 8px; left: 1px; width: 264px; height: 50px; background:rgba(255,255,255,0.7); padding:15px; }
#carousel .slide  h4    { font-size: 1.250em; color: #347e99; padding: 0; 	}
#carousel .slide  p     { font-size: 0.750em; color: #392508; margin: 0; padding: 0; }	

.carousel-nav           { display: block;  margin: -17px auto 0;  height: 40px; text-align: center; }	
#ui-carousel-next > span,
#ui-carousel-prev > span{ display: none; }

#ui-carousel-next       { background: url(https://www.4illusion.com/img/site/next.png) center center no-repeat; height: 32px; width: 18px; display: inline-block; margin: 0 90px;}
#ui-carousel-prev       { background: url(https://www.4illusion.com/img/site/prev.png) center center no-repeat; height: 32px; width: 18px; display: inline-block; margin: 0 90px; }


#slider									{ width: 960px; height: 360px; margin: 0 auto; }
#slider .slide          { position: relative; }
#slider .slide   img    { width: 960px; height: 360px; z-index:-9999 !important; }
#slider .slide .text    { position: absolute; left: 0px; bottom: 0px; margin-bottom: -10px; width: 960px; height: 60px; line-height: 50px; text-transform: uppercase; background:rgba(0,0,0,0.5); text-align: center; }
#slider a:link,
#slider a:visited				{ color: #fff; }

.bullet                 { background: url(https://www.4illusion.com/css/img/site/bullet-off.png) center center no-repeat; display: inline-block; width: 18px; height: 32px; margin: 0; margin-right: 5px; text-align: center; }
.bullet:last-child      { margin: 0; }

.ui-carousel                { height: 100px; margin: 0; overflow: auto; padding: 0; position: relative; /*for ie7 to work e.g in html carousels*/ width: 300px; }
.ui-carousel > .wrapper     { margin: 0; padding: 0; width: 9999px; }
.ui-carousel > .wrapper > * { border: 0; display: block; float: left; height: 100px; overflow: hidden; 	width: 100px; }

/* News Start */

#news										{ width: 910px; height: auto; overflow: auto; padding: 20px 25px; }
#news h5								{ margin-bottom: 10px; } 
.box_news_start					{ float: left; width: 290px; height: auto; overflow: auto; margin: 0 20px 0 0; }
.box_news_start:nth-of-type(3n) { margin: 0; }

.content										{	width: 960px; overflow: auto; background: rgba(255, 255, 255, 0.5); min-height: 450px; margin: 0 auto; }
.col_left										{ float: left; width: 600px; height: auto; overflow: auto; padding: 30px 20px; }
.col_right									{ float: right; width: 280px; height: auto; overflow: auto; padding: 30px 20px; }
.box_col_right							{ width: 100%; height: auto; overflow: auto; margin-bottom: 20px; }
.box_col_right h3						{ color: #666; font-size: 1.25em; font-weight: normal; margin-bottom: 20px; font-family:"Libre Baskerville", serif; text-transform: none; }
.box_col_right ul						{ list-style: none; }
.box_col_right ul li				{ list-style: none; line-height: 1.5; font-size: 0.75em; }
.box_col_right ul li:before	{ content: "\f0da"; color: #000; font-family: FontAwesome; margin-right: 5px; }

li a:link,   
li a:visited		{ color: #000; text-decoration: none; }
li a:hover			{ color: #666; text-decoration: none; }

/************************* 
********* FOOTER *********
**************************/

footer									{ width: 100%; padding-bottom: 30px; font-size: 0.925em; }
.footer									{ width: 960px; height: auto; overflow: auto; margin: 0 auto; border-top: 3px solid #666; border-bottom: 1px solid #666; }
.box_footer							{ float: left; width: 220px; padding: 10px 10px 10px 10px; }
.box_footer p						{ line-height: 1.5; }
.box_footer:first-child	{ width: 210px; padding: 10px 10px 30px 20px; }
.box_footer:last-child	{ width: 210px; padding: 10px 20px 30px 10px; }

ul.col									{	
												-moz-column-count: 2; -moz-column-gap: 20px;
												-webkit-column-count: 2; -webkit-column-gap: 20px;
												column-count: 2; column-gap: 20px;
												}
ul.col li								{ line-height: 1.5; font-size: 0.75em; display: block; }
ul.col li:before				{ content: "\f105"; color: #000; font-family: FontAwesome; margin-right: 5px; }

/************************* 
***** PROFILE DAMEN ******
**************************/
.box_slider			{ position: relative; width: 960px; height: 360px; z-index: 0; }
.box_vita				{ position: absolute; top: 0px; right: 0px; width: 280px; height: 320px; padding: 20px; z-index: 5; background-color: rgba(0, 0, 0, 0.4); font-size: 0.75em; color: #fff;}
.box_vita h4		{ font-size:  150%; color: #fff; }
.box_vita h5		{ font-size:  100%; color: #fff; margin-bottom: 15px; }
.box_vita ul		{ list-style: none; }
.box_vita ul li	{ list-style: none; float: left; }
.vita_left			{ float: left; width: 85px; line-height: 1.5; text-align: left; margin-bottom: 5px; }
.vita_right			{ float: left; width: 195px; line-height: 1.5; text-align: left; margin-bottom: 5px; }
.vita_contact		{ position: absolute; bottom: 0px; width: 280px; height: 40px; line-height: 40px; font-size: 1.75em; /* text-align: center; */ }

.box_info				{ width: 100%; height: auto; overflow: auto; }
.box_info ul		{ list-style: none; margin-bottom: 15px; }
.box_info ul li	{ margin-left: 15px; list-style-type: square; font-size: 0.750em; list-style-position: outside; }
.box_gal				{ width: 100%; height: auto; overflow: auto; padding: 20px 0 20px 0; border-top: 1px solid #666;  }
.note						{ width: 588px; height: 25px; line-height: 25px; padding: 5px; border: 1px solid #000; font-size: 0.75em; font-weight: normal; margin-bottom: 20px; display: block; }
.flag						{ float: left; width: 25px; height: 15px; border: none; margin-right: 5px; }

.box_teaser			{ width: 100%; overflow: auto; margin-bottom: 20px; }
.pic_teaser			{ float: left; width: 200px; height: auto; padding: 4px; border: 1px solid #000; background: #666; margin: 0 10px 10px 0; }

/*
************************** 
**** UEBERSICHT DAMEN ****
**************************
*/

.box_listing								{ float: left; width: 290px; height: auto; overflow: auto; margin: 0 20px 20px 0; }
.box_listing:nth-of-type(2n){ margin: 0 0 20px 0; }
.box_listing h3							{ color: #000; font-size: 1em; font-weight: normal; margin-bottom: 10px; }
.thumb_listing							{ padding: 4px; border: 1px solid #000; background: #666; margin-bottom: 10px; }

/*
/************************* 
***** NEWS + TERMINE *****
**************************
*/
.infobox							{ padding: 5px 10px; margin-bottom: 10px; background: #d0192e; color: #fff; font-size: 1.125em; line-height: 1.25em; }
.box_news							{ width: 600px; height: auto; overflow: auto; border-bottom: 1px dotted #666; padding-bottom: 0px; margin-bottom: 10px; }
.box_news:last-child	{ border-bottom: none; }
.date									{ font-size: 0.68em; }
.thumb_news						{ float: left; padding: 4px; background: #666; border: 1px solid #000; margin: 0 10px 20px 0; }
.box_news p						{ float: right; width: 300px; }

/*
**************************
*******  Galerien  *******
**************************
*/

.gallery_thumb				{ float: left; width: 102px; height: 102px; background: #666; margin: 0 10px 10px 0; padding: 4px; border: 1px solid #000; }
.gallery_thumb:nth-of-type(5n){ margin: 0 0 10px 0; }

/*
**************************
********  VIDEOS  ********
**************************
*/

.box_video						{ width: 600px; height: 338px; margin-bottom: 20px; }

/* Back to Top Button */

#back-top						{ position: fixed; bottom: 30px; left: 50%; margin-left: 500px; z-index: 90; display: none; }
#back-top a					{ width: 38px; line-height: 38px; display: block; text-align: center; color: #fff; font-size: 1.5em; background: #333; }
#back-top a:hover		{ background: #666; color: #fff; }


/*
****************************
*******  Navigation ********
****************************
*/

.ul-top               { list-style: none; margin: 0; padding: 0; }
.li-top               { float: left; display: inline-block; width: 137px; height: 40px; line-height: 40px; text-align: center; }
.li-top:last-child		{ width: 138px; }  
.li-top a             { display: block; color: #333; font-family: "Arimo", sans-serif; font-size: 0.75em; text-decoration: none; text-transform: uppercase; }
.li-top a:hover       { color: #d0192e; }

.ul-sub               { list-style: none; display: none; margin: 0; padding: 0; position: absolute; z-index:999; width: 274px; height: auto; overflow: auto; background: #e2e2e2; }
.li-sub               { list-style: none; }
.li-sub a             { float: left; width: 247px; padding-left: 25px; text-align: left; font-size: 0.75em; background: none; background: transparent; }
.li-sub a:hover       { box-shadow: none; color: #d0192e; background: #d9d9d9; }


/*
****************************
***** MEMBER BEREICH  ******
****************************
*/

.list_left												{ float: left; width: 290px; height: auto; overflow: auto; margin-right: 20px; }
.list_right												{ float: right; width: 290px; height: auto; overflow: auto; }
.box_list_member_start						{ float: left; width: 290px; height: auto; overflow: auto; border-bottom: 1px dotted #444; margin-bottom: 20px; }
.box_list_member_start h4 				{ color: #000; font-size: 1em; margin-bottom: 10px; font-family: Verdana, Geneva, sans-serif; }
.box_list_member_start a:link,
.box_list_member_start a:visited	{ color: #000; text-decoration: none; }
.box_list_member_start a:hover		{ color: #d0192d; text-decoration: none; }

#loginform				{ width: 300px; height: auto; overflow: auto; padding: 20px 150px; background: rgba(255, 255, 255, 0.4); font-size: 0.75em; }
.login_name				{ width: 300px; height: 20px; line-height: 20px; margin-bottom: 5px; }
.login_field			{ width: 300px; height: 20px; line-height: 20px; margin-bottom: 10px; }
.input_field			{ width: 300px; height: 20px; }
.error						{ font-weight: bold; color: #d0192d; }



/*
****************************
****** ARRANGEMENTS  *******
****************************
*/

.box_arr							{ width: 600px; height: 200px; padding-bottom: 20px; border-bottom: 1px dotted #444; margin-bottom: 20px; background-image: url(https://www.4illusion.com/img/site/back_arrangements.png); background-repeat: no-repeat}
.box_arr:last-child		{ border-bottom: none; }
.box_arr_cont					{ position: relative; float: right; width: 300px; height: 140px; overflow: auto; padding: 30px 0 30px 0; }
.price								{ position: absolute; bottom: 40px; }

/*
****************************
*****  Kontaktformular *****
****************************
*/
.box_form						{ float: left; width: 600px; height: auto; font-size: 0.75em; }
.name								{ float: left; width: 290px; height: 20px; line-height: 20px; border: none; margin: 0 20px 5px 0; }
.name:nth-child(2n)	{ margin: 0 0 5px 0; }
.field							{ float: left; width: 290px; height: 20px; line-height: 20px; margin: 0 20px 5px 0; border: none; background: #fff; }
.field:nth-child(2n){ margin: 0 0 5px 0; }
.name_long					{ float: left; width: 600px; height: 20px; line-height: 20px; margin-bottom: 10px; border: none; }
.subject						{ float: left; width: 600px; height: 20px; line-height: 20px; margin-bottom: 10px; border: none; background: #fff; }
.select_long				{ float: left; width: 600px; height: 20px; line-height: 20px; margin-bottom: 10px; border: none; background: #fff; }
.text								{ width: 600px; height: auto; border: none; margin-bottom: 10px; }
.text-field					{ width: 600px; height: auto; border: none; background: #fff; }
.meldung						{ width: 600px; height: auto; line-height: 40px; font-size: 100%; color: #fff; background: #333;  }
p.meldung:before		{ content: "\f129"; font-family: FontAwesome; margin-left: 10px; margin-right: 10px; font-size: 100%; }
.captchafield,
.captchapic					{ float: left; width: 124px; height: 30px; line-height: 30px; margin: 0 10px 10px 0; border: none; }
.button_field				{ float: left; width: 124px; height: 30px; margin: 0 10px 10px 0;  }
.button							{ width: 124px; height: 30px; line-height: 30px; color: #fff; cursor: pointer; border: none; background: #333; }

/* Fuer Gaestebucheintrag */
.gb_name						{ width: 100%; height: 20px; line-height: 20px; border: none; margin: 0 0 5px 0; }
.gb_field						{ width: 100%; height: 20px; line-height: 20px; margin: 0 0 5px 0; border: none; background: #fff; }
.gb_text						{ width: 100%; height: auto; border: none; margin-bottom: 10px; }
.gb_text_field			{ width: 600px; height: auto; border: none; background: #fff; }
.gb_datum						{ position:absolute;left: -99999px; }


/*
****************************
****** Gaestebuch  *******
****************************
*/

.box_eintrag							{ width: 100%; height: auto; overflow: auto; padding-bottom: 10px; border-bottom: 1px dotted #666; margin-bottom: 30px;  clear: both; font-size: 0.750em; }
.gb_date									{ width: 100%; height: 20px; line-height: 20px; font-size: 100%; font-weight: normal; border-bottom: 1px dotted #666; font-size: 75%; }
.user_name								{ float: left; font-weight: bold; width: auto; padding-right: 5px;  }
.user_data								{ width: 100%; height: auto; line-height: 1.5;  border-bottom: 1px dotted #666;}
.user_message							{ width: 100%; height: auto; line-height: 1.5; }
.box_message							{ width: 100%; height: auto; overflow: auto; }
.box_message p						{ font-size: 100%; }
.box_comment							{ background: rgba(255, 255, 255, 0.4); padding: 4px; }
.box_comment p						{ font-size: 100%; }
.comment_date							{ width: 100%; height: 20px; line-height: 20px; font-size: 100%; font-weight: normal; font-size: 75%; }

.box_pager								{ float: left; width: 598px; height: auto; margin-bottom: 20px; font-size: 0.750em; padding: 0 1px; display: block; }
.gb_pager									{ float: left; width: 134px; height: 20px; line-height: 20px; background: rgba(255, 255, 255, 0.4); padding: 4px; color: #000; text-align: center; margin-right: 10px; }
.gb_pager_entry						{ float: right; width: 134px; height: 20px; line-height: 20px; background: rgba(255, 255, 255, 0.4); padding: 4px; color: #000; text-align: center; }
.box_pager a:link,
.box_pager a:visited			{ color: #000; text-decoration: none; }
.box_pager a:hover				{ color: #666; }
.gb_meldung								{ width: 600px; height: auto; line-height: 40px; text-align: center;  font-size: 100%; color: #fff; background: #333;  }
.gb_meldung a:link				{ color: #fff; text-decoration: none; }