/* @charset "iso-8859-1"; */

@charset "utf-8";

@font-face { 
	font-family: "daunpenh"; 
	src: url("../images/logoFont/daunpenh.ttf"); 
}

@font-face { 
	font-family: "nyala"; 
	src: url("../images/logoFont/nyala.ttf"); 
}

@font-face { 
	font-family: "centurygothic"; 
	src: url("../images/logoFont/centurygothic.TTF"); 
}

/*--------------------------------
    kalibrierung der seite
--------------------------------*/

* { padding: 0; margin: 0; }

/*----------------------------------------
    allgemeine formatierungsanweisungen
----------------------------------------*/

body {
	color: #552;
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 15px;
	overflow: none;
	background: #eee;
}

div.placeholder {
	float: left;
	display: inline;
	width: 100%;
}


div.errorMessageBox {
	position: relative;	
	color: #a00;
	font-size: 100%;
}

h1 {
	position: relative;
	float: left;
	width: 100%;
	font-size: 26px;
	font-weight: normal;
	color: #205fa8;
	font-family: centurygothic, century gothic;
}


h2 {
	position: relative;
	display: block;
	padding: 24px 0 6px 0;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	position: relative;
	display: block;
	padding: 12px 0 4px 0;
	font-size: 14px;
	font-weight: bold;
}

.backgroundUmbra {	
	background: #332f2c; /* RAL 7022 Umbra */
	opacity: 0.8;
	color: #fff;
}

.showOnLogin { display: none; }

.showPointerOnMouseOver:hover { cursor: pointer; }

a { text-decoration: none; }

img { border: none; }

dfn { cursor: help; }

html[lang="de"] q { quotes: """ """; }      /* fuer alle ausser */
q:lang(de) { quotes: """ """; }             /* internet explorer */

/* Layoutbereiche */

#wrapper{
	margin: 0 auto 0 auto;
	width: 100%;
	z-index: 950;
}

.cookiesBackground {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #000;	
	z-index: 998;	
	opacity: 0.8;	
}

.cookiesNotice {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	padding: 3%;
	background: #555;
	color: #fff;
	z-index: 999;
	transform: translate(-50%, -50%);	
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);  	
}

.cookiesNoticeContent { width: 100%; }

.cookiesNotice a {
	color: #fff;
	text-decoration: underline;
}

.cookiesYes,
.cookiesNo  {
	position: relative;
	display: inline;
	float: left;
	margin: 2% 1% 0 0;
	padding: 2%;
	background: #bbb;
	color: #000;
	border-radius: 2px;
}					 
					 
/**********************/
/* page loader screen */
/**********************/

#pageLoaderScreen {
	position: fixed;
	width: 100%; 
	height: 100%;
	background: #fff;
	z-index: 995;
}

#contentLoaderScreen {
	position: fixed;	
	top: 50%;	
	left: 50%;	
	transform: translate(-50%, -50%);	
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);  
	font-size: 700%;
	font-family: nyala, daunpenh, calibri, Helvetica, Arial, sans-serif;
	color: #205fa8;
	z-index: 995;
}

div#logoLoaderScreen {
	position: relative;	
	float: left;
	width: 266px;
	height: 112px;		
	background: #fff url( '../images/fundamentals/logoLoadingPage.jpg' ) no-repeat center center;
}

div#progessBarWrapper {
	position: relative;	
	float: left;	
	width: 100%;
	height: 3px;
	margin: 7% 0 0 0;
	background: #eee;
	border-radius: 2px;
}
	
div#progessBar {
	position: absolute;	
	width: 100%;
	height: 100%;
	background: #205fa8;
	border-radius: 2px;
	display: none;
} 

#startPageContent,
#startPageContent h1 {
	font-size: 11px;
	color: #fff;
}

/*****************/
/* fixed top bar */
/*****************/

div#fixedTopBar {	
	position: fixed;
	top: 0;
	left: 0;	
	padding: 12px 0;	
	width: 100%;
	z-index: 900;	
	opacity: 0.8;	
}

div.logo {	
	position: relative;
	float: left;
	width: 98px;
	height: 53px;
}

div.logo img {
	position: absolute;	
	width: 100%;
	height: 100%;
}

div.logoDistanceHolder {
	position: relative;
	float: right;
	top: 11px;
	right: 10%;	
	width: 49.5%;
	margin: 0 0 12px 0;
}

div.logoDistanceHolder div {
	float: right; 
	width: 108px;
	height: 28px;
	margin: 1px;
}

/* Navi-Block */

div#navi {	
	position: fixed;
	top: 21px;
	right: 10%;
	width: 80%;
	z-index: 920;
	text-shadow: #000 0 0 3px;
}				

div.naviDistanceHolder {
	float: left; 
	width: 38%;
	height: 90px;
}

div.naviMainLink {	
	float: right;
	padding: 1px 0;
	margin: 0 0 0 36px;
	font-size: 22px;
	color: #fff;
	font-family: centurygothic, century gothic;
}

.naviActiveFilter { color: #205fa8; }

/* feedback window */

div#feedbackWindow {	
	position: fixed;
	top: 14%;
	right: 10%;	
	padding: 2%;	
	max-width: 30%;
	z-index: 950;
	color: #0d0;	
	font-size: 160%;
	background: #fff;
	text-align: center; 
	border: 1px solid #888;
	box-shadow: 0 0 8px #000;
	display: none;
}

/***************************************/
/* start page fav project images block */
/***************************************/

div#startPageImageBox {
	position: relative;
	width: 100%; 
	height: 100vh;
	/* padding-bottom: 56.25%; */
	box-shadow: 0 0 8px #000;
}

div#titleImageCycler {
	position: relative;
	width: 100%;	
}

div#titleImageCycler div.mainTitleImage {
	position: absolute;	
	width: 100%;
	height: 100vh;
	/*padding-bottom: 56.25%;	*/
	border: none;
	z-index: 650;
	background: center center no-repeat;
	background-size: cover;
}

div#titleImageCycler div.sliderActiveImage { z-index: 700; }

/* description box */

div#startPageProjectDescriptionBox  {	
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1% 0;
	z-index: 800;
	opacity: 0.8;
}

div#startPageProjectTitle,
div#startPageProjectDescription {
	position: relative;
	left: 10%;	
	width: 80%;			
	color: #fff;
	text-shadow: #000 0 0 3px;
}

div#startPageProjectTitle {
	font-size: 26px;
	font-family: centurygothic, century gothic;
}

div#startPageProjectDescription {
	margin: 0 0 0.8% 0;
	font-size: 120%;
}

.sliderRefMoreLink {
	display: inline;
	color: #205fa8;
}

.sliderRefMoreLink:hover { cursor: pointer; }

div#sliderFunctionButtonList {
	position: absolute;
	display: inline-block;
	top: -36px;
	left: 50%;	
	z-index: 800;
	
	transform: translate(-50%,0);	
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0); 
	
	opacity: 0.3;
}

div#sliderFunctionButtonList  div {
	float: left;
	width: 12px;
	height: 12px;
	margin: 0 6px;
	border: 1px solid #fff;
	background: #ccc;
	border-radius: 12px;
}

div#sliderFunctionButtonList  div:hover { cursor: pointer; }

div#sliderFunctionPrevious,
div#sliderFunctionNext {
	position: absolute;
	display: inline-block;
	top: 50%;
	width: 48px;
	height: 48px;
	border: 1px solid #fff;
	z-index: 800;	
	border-radius: 50%;	
	opacity: 0.3;
}

div#sliderFunctionPrevious:hover ,
div#sliderFunctionNext:hover { cursor: pointer; }

div#sliderFunctionPrevious { left: 5%; }
div#sliderFunctionNext { right: 5%; }

div#sliderFunctionPreviousLine1,
div#sliderFunctionPreviousLine2,
div#sliderFunctionNextLine1,
div#sliderFunctionNextLine2 {
	position: absolute;
	display: inline-block;
	width: 42%;
	height: 1px;
	background: #fff;
	border: 1px solid #fff;		
	border-radius: 1px;
	z-index: 800;	
}

div#sliderFunctionPreviousLine1,
div#sliderFunctionNextLine2 {
	transform:rotate(-26deg);	
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

div#sliderFunctionPreviousLine2,
div#sliderFunctionNextLine1 {
	transform:rotate(45deg);	
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

div#sliderFunctionPreviousLine1,
div#sliderFunctionNextLine1 { top: 32%;	}
div#sliderFunctionPreviousLine2,
div#sliderFunctionNextLine2  { top: 62%; }
div#sliderFunctionPreviousLine1,
div#sliderFunctionPreviousLine2  { left: 20%; }
div#sliderFunctionNextLine1,
div#sliderFunctionNextLine2  { right: 20%; }

/* save function buttons in main title slider area */

div#mainTitleSave,
div#changeTitleImage {
	position: absolute;
	right: 150px;
	padding: 12px;
	background: #f42;
	color: #fff;	
	border-radius: 20px;	
	display: none;
	z-index: 890;
}

div#mainTitleSave { bottom: 150px; }
div#changeTitleImage { bottom: 202px; }			

div#mainTitleSave:hover,
div#changeTitleImage:hover { cursor: pointer; }

/***********************/
/* block of references */
/***********************/

div#referencesWrapperBox {
	position: relative;
	float: left;
	padding: 2% 9.2%;
	width: 81.6%;
	z-index: 700;
}

div.refChapterHeadline { 
	position: relative;
	float: left;
	margin: 0 0 1% 0;
	width: 100%;
}

div.refChapterHeadline div { 
	float: left;
	margin: 1.1% 0 0 1%;
	padding: 0.3% 2%;	
	color: #999;	
	background: #fff;
	border: 1px solid #999;
	border-radius: 15px;
}		

div.refChapterHeadline div.refActiveFilter {
	background: #205fa8;
	color: #fff;
	border: 1px solid #102f78;
}

div.refBox {
	position: relative;
	float: left;
	width: 31%;	
	padding-bottom: 23.25%;
	margin: 1%;	
	box-shadow: 0 0 4px #333;
	background: #fff;
}

div.refBoxNotDisplayedOnLoading {
	position: absolute;
	width: 100%;
	height: 100%;
}

.refBoxSortOrderInput {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 20%;
}

.additionalContentStorageContainer {
	display: none;
}

div.unpublishedRef {
	display: none;
}

div.unpublishedRef img.previewImage{
	opacity: 0.4;
}

div.refBox img {
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
}

div.projectImageTitleBox {
	position: absolute;
	bottom: 0;
	width: 90%;
	padding: 3% 5%;
	font-size: 100%;
}

div.arrowRefContentToPreviewImage {
	position: absolute;
	bottom: 0;
	margin: 0 0 -32px 50%;
	z-index: 800;
	
	transform: translate(-50%, 0);
	border: 36px solid #ccc;
	z-index: 800;
	border-top-color:    transparent;
	border-right-color:  transparent;
	border-left-color:   transparent;
	display: none;
}
	
div.refAdditionalContent {
	position: relative;
	float: left;
	width: 97.5%;
	margin: 1% 0 2% -11.3%;
	padding: 2% 12.5%;
	background: #ccc;
	box-shadow: 0 0 8px #222;
	color: #000;
	display: none;
}

div.closeReferenceCross {
	position: relative;
	float: right;
	width: 40px;
	height: 40px;
	background: #ccc url( '../images/fundamentals/closeRefCross.jpg' ) no-repeat center center;
	z-index: 850;
}

div.closeReferenceArrow {
	position: relative;
	float: left;
	
	left: 50%;
	width: 60px;
	height: 26px;
	margin: 28px 0 0 0;
	background: #ccc url( '../images/fundamentals/closeRefArrow.jpg' ) no-repeat center center;
	z-index: 850;
	
    transform: translate( -50% , 0 );	
	-ms-transform: translate( -50% , 0 );
	-webkit-transform: translate( -50% , 0 );
}

div.refAdminButtonsContainer {
	position: absolute;
	top: 2%;
	right: 10%;
	width: 12%;
	z-index:999;
}

div.refFunctionalityImageContainer {
	position: relative;
	float: left;
	width: 21%;
	padding-bottom: 21%; /*    56.25% = 16:9     //////////     75% = 4:3    */
	margin: 0 0 0 4%;
}

div.refFunctionalityImageContainer img {
	position: absolute;
	float: left;
	width: 100%; 
	height: 100%; 
}



div.refImageContainer {
	position: relative;
	float: left;
	width: 100%;
	margin: 0 0 10% 0;
	z-index: 810;
	margin: 1% 0 0 0;	
}


div#refImageExtendedContainer {
	position: relative;
	float: left;
	width: 100%;
	padding-bottom: 56.25%; /*    56.25% = 16:9     //////////     75% = 4:3    */
}

img.refImageExtended {
	position: absolute;
	float: left;
	width: 100%; 
	height: 100%;
	box-shadow: none;
}		

div.refImageContainerUserPreview {
	width: 100%;
	float: left;
}

div.refImageContainerUserPreview img {
	margin: 3% 1% 1% 0;
	float: left;
	box-shadow: 0 0 3px #222;
}
					
					
								
/* admin area for images in reference */

div.refImageSmallDivContainer {
	position: relative;
	float: left;
	width: 12%;
	margin: 1% 0.5%;
	padding: 0.5%;
	border: 1px solid #888;
}

div.refImageSmallDiv {
	position: relative;
	float: left;
	width: 100%;
	padding-bottom: 100%;    /* 56.25% = 16:9     //////////     75% = 4:3   */  
}

img.refImageSmall {
	position: absolute; 
	top: 50%;
	left: 50%;
    display: block;
    margin: auto;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
	transform: translate(-50%, -50%);	
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%); 
}

div.favStatus { display: none; }

div.refImageSmallDivFunctionButtonContainer {
	position: relative;
	width: 100%;
}

div.refImageSmallDivFunctionButtonContainer div {
	position: relative;
	float: left;
	width: 20%;
	padding-bottom: 20%; /*    56.25% = 16:9     //////////     75% = 4:3    */
	margin: 4% 0;
}

div.refImageSmallDivFunctionButtonContainer img {
	position: absolute; 
	float: left;
	width: 100%; 
	height: 100%; 
}

div.refImageSmallDivFunctionButtonContainer input {
	width: 100%;
	float: left;
	margin: 4% 0 0 0;
}

/* Textfelder im Referenz */

div.refAddContTitle {
	position: relative;
	width: 100%;
	
	font-size: 26px;
	/*font-size: 3vw;
	font-size: 300%;*/
	/*font-family: nyala, daunpenh, calibri, Helvetica, Arial, sans-serif;*/
	font-family: centurygothic, century gothic;	
	color: #205fa8;	
	z-index: 810;
	background: #ccc;
	
	
	
}


div.refAddContSlogan {
	position: relative;
	float: left;
	width: 100%;
	
	font-size: 20px;
	/*font-size: 2vw;
	font-size: 200%;*/
	font-family: centurygothic, century gothic;	
	z-index: 810;
}

div.refAddContContest {
	position: relative;
	float: left;
	width: 100%;
	margin: 2% 0;
	font-size: 15px;
	/*font-size: 1.5vw;*/
	z-index: 810;
}


div.refAddContYear {
	width: 100%;
}

div.refAddContPlace {
	width: 100%;
}

div.refAddContDescription {
	float: left;
	width: 100%;
	margin: 1% 0 0 0;
}

/* adding images */

div#imagePreviewWindow {
	position: relative;
	float: left;
	width: 60%; 
}

div.imageBorder {
	border: 1px solid #999;
}

div.loading {	
	position: absolute; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff url( '../images/fundamentals/lade.gif' ) no-repeat center center;
	opacity: 0.8;
	z-index: 900;
	display: none;
}

div#imagePreviewWindow img {
	float: left;
	width: 100%;
	z-index: 880;
}

div.imageSizeAnnounceTitle {
	float: left;
	font-weight: bold;
	text-decoration: underline;
	font-size: 10px;	
}

div.imageSizeAnnounceLeft {
	float: left;
	width: 44%;
	font-size: 10px;		
	font-weight: bold;
}

div.imageSizeAnnounceRight {
	float: right;
	width: 28%;
	font-size: 10px;	
	text-align: center;
}

div.imageAnnounceTitleIndicator {
	float: right;
	width: 24px;
	height: 24px;
	margin: 18px 12px;
	border-radius: 12px;
}			

div.addImages_FunctionButtonContainer {
	position: relative;
	float: right;
	width: 35%;
}

div.addImages_InputFieldContainer {
	position: relative;
	float: left;
	height: 70px;
}

div.addImages_InputFieldContainer div {
	position: absolute; 
	top: 0; 
	left: 0;
}

div.addImages_InputFieldContainer input {
	position: absolute; 
	top: 0; 
	left: -70px;
	height: 14px;
	width: 10px;
	opacity: 0.01;
}

div.addImages_FunctionButton {
	clear: both;
	float: left;
	border: 1px solid #ccc;
	margin: 1.1% 0 0 1%;
	padding: 0.8% 8%;
	font-size: 100%;
	/*font-size: 1vw;	*/	
	color: #999;	
	background: #fff;
	border: 1px solid #999;
	border-radius: 15px;
}

div.addImages_FunctionButton:hover,
div.addImages_InputFieldContainer input:hover {
	cursor: pointer;
}

div.imageSizeFrame {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 100%;
	height: 100%;
	border: 1px solid #c00;
	z-index: 920;
}

div#resizeButton_TopLeft,
div#resizeButton_TopMiddle,
div#resizeButton_TopRight,
div#resizeButton_MiddleLeft,
div#resizeButton_MiddleRight,
div#resizeButton_BottomLeft,
div#resizeButton_BottomMiddle,
div#resizeButton_BottomRight {
	position: absolute;	
	width: 8px;
	height: 8px;
	background: #c00;
	transform: translate(-50%, -50%);	
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%); 
	display: none;
	z-index: 930;
}
		
div#resizeButton_TopLeft { top: 0; left: 0; }
div#resizeButton_TopMiddle { top: 0; left: 50%; }
div#resizeButton_TopRight { top: 0; left: 100%; }
div#resizeButton_MiddleLeft { top: 50%; left: 0; }
div#resizeButton_MiddleRight { top: 50%; left: 100%; }
div#resizeButton_BottomLeft { top: 100%; left: 0; }
div#resizeButton_BottomMiddle { top: 100%; left: 50%; }
div#resizeButton_BottomRight { top: 100%; left: 100%; }	

div#frameShiftButton {
	position: absolute;	
	top: 50%; left: 50%;
	width: 31px;
	height: 30px;
	background: url( '../images/fundamentals/translate.jpg' ) no-repeat center center;	
	transform: translate(-50%, -50%);	
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%); 
	display: none;
	z-index: 930;
}

/* checkboxes for adding categories */

div.refAddContCategories {
	float: left;
	width: 100%;
	margin: 2% 0 0 0;
}

div.refAddContCategoriesTitle {
	font-size: 14px;
	font-weight: bold;
}

div.catBlock { padding: 1% 0; }

div.catBlock label {
	float: left;
	width: 160px;
}

div.catBlock input { float: left; }			

/* number of clicks */

div.numberOfClicks,
div.refOrder { display: none; }

/* sort & filter criteria information boxes */

.refSortInformationContainer {
	display: none;
}

/***********************/
/* block for office */
/***********************/

div#officeWrapperBox {
	position: relative;
	float: left;
	padding: 2% 10%;
	width: 80%;	
	z-index: 700;
}

div.officeChapterHeadline { 
	position: relative;
	float: left;
	width: 100%;
}

div#officeSave {
	position: relative;
	float: right;
	width: 32px;
	height: 32px;
	background: url( '../images/fundamentals/saveBright.jpg' ) no-repeat center center;
	display: none;
}

div#officeSave:hover {
	cursor: pointer;
}

div#ourOfficeDescription { 
	position: relative;
	float: left;
	margin: 2% 0 0 0;
	width: 100%;	
}



/********/
/* BLOG */
/********/
	
div#blogWrapperBox {
	position: relative;
	float: left;
	padding: 1% 10% 2% 10%;
	width: 80%;	
	z-index: 700;
}
	
div#blogContent {
	position: relative;
	float: left;
	margin: 2% 0 0 -1%;
	width: 102%;	
}

div.blogColumn,
div#blogStorageContainer {
	float: left;
	width: 23%;
	margin: 0 1%;
}

#blogStorageContainer { display: none; }
			
div.blogEntryBox {
	float: left;
	width: 92%;
	margin: 4% 0;
	padding: 4%;
	background: #585553;
	color: #fff;
}

div.blogEntryTitle {
	font-size: 14px;	
}

div.blogEntryDate {
	float: left;
	width: 33%;
	font-size: 9px;	
}

div.blogEntryText {
	margin: 20px 0 0 0;	
}

img.blogEntryImage {
	width: 100%;
	margin: 12px 0 -12px 0;	
}

a.blogEntryText {
	float: left;
	margin: 8px 0 0 0;	
	color: #eee;
	text-decoration: underline;
}
				
div.blogEntryEdit  {
	float: right;
	width: 33%;
	font-size: 9px;		
	text-align: right;
	text-decoration: underline;
}				
					
div.blogEntryEdit:hover  {
	cursor: pointer;
}



div.blogInputFormContainer {
	width: 100%;
}

label.blogLabel {
	width: 30%;
}

input.blogInput {
	width: 70%;
}

textarea.blogTextarea {
	float: right;	
	width: 74%;
	height: 140px;
	border: 1px solid #ccc;
}

div.bottomLineBlogEdit{
	position: relative;
	float: left;
	width: 100%; 
	height: 50px;
}

/****************/
/* contact form */
/****************/
		
div#contactFormWrapperBox {
	position: relative;
	float: left;
	padding: 2% 10%;
	width: 80%;		
	background: #ccc;
	box-shadow: 0 0 8px #585553;
	color: #000;
	z-index: 600;	
}	

div#contactFormWrapperBox form {
	position: relative;
	float: left;
	margin: 2% 0 0 0;
	width: 100%;
}

div#inputFieldContainer {
	position: relative;
	float: left;
	width: 100%;
}

div#inputFieldContainerLeft {
	float: left;
	width: 36%;
}	

div#contactFormWrapperBox input {
	float: left;
	margin: 0 0 10px 0;
	padding: 12px;	
	width: 92%;
	border: none;	
	color: #999;	
	font-size: 110%;	
	background: #eee;
}

div#inputFieldContainerRight {
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	bottom: 0;
	width: 55%;
}	
		
div#contactFormWrapperBox textarea {
	position: absolute;
	float: left;
	padding: 10px 1%;	
	width: 98%;
	top: 0;
	height: 184px;
	border: none;	
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size: 110%;	
	background: #eee;
}
		
div#submitContactRequest {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px 2%;
	margin: 0 0 10px 0;
	background: #eee;
	font-size: 110%;
	color: #333;
}

/****************/
/* bottom field */
/****************/

div#bottomBox {
	position: relative;
	float: left;
	padding: 1% 10%;
	width: 80%;
	font-size: 100%;
	font-weight: bold;
	z-index: 800;
}

div.bottomBoxInner {
	float: left;
	width: 50%;	
}

/* login form */

div.fadeInMessageBox {
	position: fixed;	
	top: 0;	
	left: 50%;
	padding: 5% 2% 2% 2%;	
	width: 40%;
	max-height: 86%;
	
	transform: translate(-50%, 0);	
	-ms-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	
	background: #fff;
	border: 1px solid #ddd;	
	box-shadow: 0 0 12px #222;
	display: none;
	z-index: 940;
	overflow-y: auto;
	overflow-x: hidden;
}

div#closeLoginForm {
	position: absolute;
	top: 3%;
	right: 1%;
	width: 3%; 
	padding-bottom: 3%; /*    56.25% = 16:9     //////////     75% = 4:3    */
	z-index: 999;
}

div#closeLoginForm img {
	position: absolute;
	width: 100%; 
	height: 100%;	
}

div.fadeInMessageBox label {
	position: relative;
	float: left;
	width: 20%;	
	margin: 0 0 3% 0;
	padding: 2% 0;
	font-size: 100%;
	/*font-size: 1vw;*/
}

div.fadeInMessageBox input {
	position: relative;
	float: right;
	width: 70%;
	margin: 0 0 3% 0;
	padding: 2%;	
	border: 1px solid #ccc;
	font-size: 100%;
	/*font-size: 1vw;*/
}

div.fadeInMessageBox div#aboveSubmitLoginRequest {
	float: left;
	width: 100%;
}

div.fadeInMessageBox div#submitLoginRequest {
	position: relative;
	float: right;
	padding: 2%;
	margin: 3% 0 0 0;
	background: #fc0;
	border: 1px solid #ccc;
}

div.fadeInMessageBox div#submitLoginRequest:hover {
	cursor: pointer;
}

div.fadeInMessageBox div.errorMessageBox {	
	margin: -5% 0 3% 0;	
}

div.messageBoxSubmitButton {
	position: relative;
	float: right;
	padding: 2%;
	margin: 3% 0 0 0;
	background: #fc0;
	border: 1px solid #ccc;
}

/* fade out page */

div#fadeoutPage {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	
	z-index: 930;
	display: none;
	opacity: 0.5;
}

/* yes and no buttons */

div.no {
	float: left;
	margin: 16px 0 0 48px;
	padding: 48px 72px;
	background: #0a0;
	border: 1px solid #070;
	color: #fff;
	font-size: 24px;
}

div.yes {	
	float: right;
	margin: 60px 48px 0 0;	
	padding: 12px;
	background: #a00;
	border: 1px solid #700;
	color: #fff;
}

div.no:hover,
div.yes:hover {	
	cursor: pointer;
}

/* juice box */

div.refShowJuiceBoxImageGallery {
	position: relative;
	float: left;
	padding: 24px; 
	color: #eee;
	border: 1px solid #222;
	background: #333;
	font-weight: bold;
	
}

div#juicebox-container {
	position: fixed;
	top: 0;
	z-index: 998;
	display: none;
}

div#hide-juicebox-container {
	position: fixed;
	top: 60px;
	right: 25px;
	width: 104px;
	z-index: 999;
	font-size: 16px;
	color: #eee;
	background: #131313;
	text-align: center;
	padding: 12px;
	border-radius: 3px;
	display: none;
}
	
div#hide-juicebox-container:hover {	
	cursor: pointer;
}	

#contentDatenschutzbestimmungen {
	position: relative;
	float: left;
	margin: 10% 5% 5% 5%;
}