/*
 *   ToDO: 
 * */

@CHARSET "ISO-8859-1";
/* picture table  */

/* main definitions */
body {
		background-color: #ffffff;
		color:#4e4e4e;
}


div {
	background-color: #ffffff;
}
^

div.mainDiv {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 11000;
 }

 div.generalDiv {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000; 
	overflow-x: scroll;
	overflow-y: scroll;	
 }
 
 /* header for content with name and last actualisation date */
div.headDiv {
    z-index : 10000;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 7%;
    	border: 1px solid #959595;
	float:left; 
	display: inline-block;
	display:table;
}

div.malerHP {display:table-cell; width=25%; left : 2%; top: 0%;  }
div.meinName { display:table-cell;width=50%; left:26%; top: 0%; }
div.changeT {display:table-cell; width=25%; left: 76%; right:10%;top: 0%;  }

/* data */
div.dataDiv {
	z-index: 10000;
	position: relative; 
	top: 11%; 
	left: 0%;
	width: 100%;
	height: 89%;
}

/* left column for navigation and popups like Exifdata */
div.leftDiv {
	z-index: 10000;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 22%;
	height: 100%;
}

/* navigation div with links to photo galeries and information */
div.navigationDiv {
	z-index: 10000;
	position: absolute;
    	float:  left;
	top: 10%;
	left: 1%;
	width: 100%;
	height: 100%;
	overflow-x:scroll; 
	overflow-y:scroll; 
}

/* div for the right part containing all the data like photo galeries etc. */
div.contentDiv {
	position: absolute;
	float: right;
	top: 0%;
	left: 20%;
	width: 80%;
	height: 100%;
}

/* div for the viewer - the photo galeries */
div.pageDiv {
	z-index: 9999;
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	border: 2px solid #FFFFFF;
	/* border: 1px solid #959595; */
}

div.cummunicationDiv {
	z-index: 10000;
	position: absolute;
	top: 10%;
	left: 20%;
	width: 80%;
	height: 80%;
	border: 2px solid #FFFFFF;
	/* border: 1px solid #959595; */
}

div.gedankenDiv {
	z-index: 10000;
	position: absolute;
	top: 10%;
	left: 20%;
	width: 70%;
	height: 80%;
	border: 2px solid #FFFFFF;
	overflow-x: auto;
	overflow-y: auto;
	/* border: 1px solid #959595; */
}

div.cvDiv {
	z-index: 10000;
	position: absolute;
	top: 10%;
	left: 20%;
	width: 70%;
	height: 80%;
	border: 2px solid #FFFFFF;
/*	overflow-x: auto !important; */
	overflow-y: auto !important;
	/* border: 1px solid #959595; */
}

/******************************************************************************************/
.startImageDiv{
max-width:80%;
height:auto;
position: relative;
display:block;
margin:5 auto;
}

.startImageDiv img{
width:80% !important;
height:auto !important;
display:block;
}

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

.bigImageDiv{
/* max-width:100%; */
height: 100% ;
width: 80%;
left: 10%;
position: absolute;
display:block;
//margin: auto;
}

.bigImageDivLandscape{
max-width:90%;
height:auto !important;
max-heigth:50% !important;
position: relative;
display:block;
margin:0 auto !important;
}

.bigImageDivPortrait{
max-height:90%;
width:auto !important;
max-width:50% !important;
position: relative;
display:block;
margin:0 auto !important;
}

/*
.bigImageDiv{
max-width:80%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}

.bigImageDiv img{
width:100% !important;
height:auto !important;
display:block;
}
*/

/*
.landscape{
width:160% !important;
height:auto !important;
display:block!important;
margin-right: auto;
margin-left: auto;
}

.portrait{
height:auto !important;
width: 100% !important;
display:block !important;
margin-right: auto;
margin-left: auto;
}
*/
.landscape{
height:90% !important;
width:auto !important;
display:block !important;
margin:0 auto;
}

/*
.landscape{
width:80% !important;
height:auto !important;
display:block!important;
margin:0 auto;
}
*/
.portrait {
height:90% !important;
width:auto !important;
display:block !important;
margin:0 auto;
}

.quadrat {
	height:90% !important;
	width:auto !important;
/*
height:90% !important;
width: 90% !important;

height:90% ;
width: 90% ;

max-height:90% !important;
max-width: 90% !important;
*/
display:block !important;
margin:0 auto;
}


/***************************** galery *****************************/
div.galeryDiv {
 	position: absolute; 
	top: 0%;
	bottom: 5%;
	left: 0%;
	width: 100%;
	height: 95%;
	/* overflow-x: auto; */
	/* overflow-y: auto; */
}

img.galery {
 	display:block; 
	width:90% !important;
	max-width:90% !important;
	height:auto !important;
	/*
	width:auto !important; 
	height:90% !important;
	 */
}

div.galeryInnerDiv {
	max-width:90% !important;
	/* width:100% !important; */
	height:auto !important;
	/* height:100% !important; */
	display:block; 
}

div.galeryDesc {
	max-width:90% !important;
	/* width:100% !important; */
	height:auto !important;
	/* height:100% !important; */
	display:block; 
	/* visibility: hidden; */
	text-align: center;
}

galeryDesc.galeryText {
	visibility: hidden;
	text-align: center;
}

table.galeryPhotos {
	position: absolute;
	display: table-row; 
	left: 5%;
	width: 95%;
	height: 98%;
	top: 10%;
	bottom: 5%;
	border-collapse: separate;
	border: 2px solid white;
	border-spacing: 20px;
 	overflow-y:scroll;
	/* background-color: #006600; */
	/* table-layout: auto; */
	/* table-layout: fixed;
 	/* overflow-x:scroll; */
	/*----------------------------*/
	/* table-layout: fixed; */
 	/* text-align: center; */
	/*----------------------------*/
	white-space: nowrap;
	/* display: block; */
	/* overflow-y:hidden; */ 
	/* display: table-row; */
	/* display: table; */
	/* table-layout: fixed; */
}

/*.browserPhoto tbody */
table.galeryPhotos tbody {
	border: 1px solid white;
	overflow-x: scroll;
	overflow-y: hidden;
	/* display: block; */
}

table.galeryPhotos   th {
	text-align: left;
	padding-left: 5px;
	font-weight: bold;
	border: 1px solid #F0F0F0;
}

table.galeryPhotos  tr {
	/* display: block; */
	overflow-x: scroll; 
	border: 3px solid white;
	height: 90%;
}
/*.browserPhoto  td   {border: 3px solid #F0F0F0; border-spacing: 10px;  width: 100px; height: 100px; overflow: hidden; } */

.markedtd {
	border: 9px solid #FFFFFF;
	border-spacing: 10px;
	overflow: hidden;

}

.markedtd2 {
	border: 9px solid #FFFFFF;
	border-spacing: 10px;
	overflow: hidden;
	width: 30%;
	height: 30%;
}


.markedtd3 {
	border: 9px solid #FFFFFF;
	border-spacing: 10px;
	overflow: hidden;
	width: 30%;
	height: 30%;
}

.markedtd4 {
	border: 9px solid #FFFFFF;
	border-spacing: 10px;
	overflow: hidden;
	width: 20%;
	height: 20%;
}
/****************************** viewer ****************************/
div.viewerDiv {
	z-index: 999;
	opacity:1;
/*	position: absolute; */
	position: fixed; 
	top: 0%; 
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 999;
}
div.viewerDataDiv {
	z-index: 999;
	position: absolute; 
	top: 5%; 
	left: 10%;
	width: 80%;
	height: 90%;
}

div.moveForwardDiv {
	z-index: 999;
	position: fixed;
	top: 0%;
	left: 88%;
	right: 0%; 
    width: 10%; height:100%; 
}

div.moveBackDiv {
	z-index: 999;
	position: fixed;
	top: 0%;
	left: 2%;
    width: 10%; height:100%; 
 }

div.viewerFooterDiv {
	z-index: 999;
	position: absolute;
	top: 85%;
	bottom: 05%;
	left: 0%;
    width: 100%; height:10%; 
 }

div.viewerFooterReturnButtonDiv{
	position: absolute;
	top: 10%;
	left: 3%;
    width: 7%; height:80%; 
 }

div.ReturnButton{
    border: 2px;
    color: #FFFFFF;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
 }


div.viewerFooterTitleDiv{
	position: absolute;
	top: 10%;
	left: 10%;
    width: 80%; height:100%; 
    	text-align: center;
 }

 
 div.viewerFooterDiaShowDiv{
 	position: absolute;
	top: 10%;
	right: 3%;
    width: 7%; height:80%; 
 }
 
 div.DiaShowButton{
 /*	position: absolute; */
    border: 2px;
    color: #FFFFFF;
    background: #FFFFFF;  
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
 }
 
.scrollLeft {
		position: absolute;
		bottom: 30%;
		left: 1%;
		width:50%;
}

.scrollRight {
		position: absolute;
		bottom: 30%;
		right: 1%;
		width:50%;
}

/******************************************************************************************/
.startImageDiv{
max-width:90%;
left: 20%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}

.startImageDiv img{
width:80% !important;
height:auto !important;
display:block;
}

/******************************************************************************************/
.bigImageDiv_old{
/*max-width:90%;*/
position: relative;
display:block;
margin:0 auto;
}

.bigImageDiv.img{
width:auto !important;
height:100% !important;
display:block;
}

.bigImageDiv1.img{
width:100% !important;
height:auto !important;
display:block;
}
.bigImageDiv1.img{
width:100% !important;
height:auto !important;
display:block;
}