<!--

html {height: 100%;}

ul li#onit	a	{	color: #9a9a9a;
					text-decoration: none;
					font-size: 100%;		}


 a 	{	color:inherit; 	text-decoration: none;	}
 a:hover {	color:inherit; 	text-decoration: none; 	}
			
img	{	border-width: 0px;	}

h4 {color:black; margin:10px 0px 0px 0px; padding: 0px;}
h3 {color:black; margin:8px 0px 0px 0px; padding: 0px;}

*+html .items h4 {color:black; margin:10px 0px 0px 0px; padding: 0px; font-size:100%; }



/*________________________________  _______________________________*/

body	{
		background: #CCD3D9;
		overflow-y: auto;
	
		}
		
#indexpage	{
		/* background-image:url('http://www.altnacht.com/img/Page 0.jpg'); */
		  width: 89%;
			overflow-y: auto;
			background-position: top; 
			background-repeat: no-repeat;
			padding: 25px 0px 25px 0px;
			
	}			


@font-face {
  font-family: cocosharp; /* set name */
  src: url('Coco-Sharp-Regular-trial.ttf'); /* url of the font */
}

p {
  font-family: myFont; /* use font */
}


#logo	{				
			position: fixed;
			left:40px;
			top: 20px;	 					 						
			z-index: 9;
		 	border: 0px solid green; 
			font-family: cocosharp;	
			color : #20538A;
			text-align: center;	
			font-size:40px;			
			padding: 15px;
			margin:0px;  			
			
			}	

#logo img	{ max-width:220px;  }


#nav_banner	{				
			position: fixed;
			background: none;
			left:5%;
			top: 0px;	 					 						
			z-index: 8;
		 	border: 0px solid green; 
			font-size: 80%; 
			font-family : helvetica;			 			
			text-align: center;			
			padding: 60px 0px 20px 10px;
			margin:0px auto;
			width: 77%;   
			height:6%;
			border: 0px solid green;
			}	

#nav_banner img	{ max-width:7%; max-height:25px; }




nav {	}

section {	border: 0px solid red; }

#menu {	position: fixed;
			min-width:10%;
			max-width:220px;
		top: 17%;
		left: 60px;	}


#menu	li {	border: 0px solid red;
			list-style-type: none;
			font-size: 80%;											
			font-family: verdana;						
			display:block;
			margin: 3px 6px 0px 3px;
			padding: 0px 2px ;											
			height: 16px;	
			text-align: left;
			background: none; 
			z-index: 4;
			}

#menu li.current 	{	color: white;} 

#menu li a img {width:25px;	}

	
/*----------------------------- pop -------------------------*/



.popup {
  position: relative;
  width: 70%;
  display: inline-block;
  border: 0px solid red;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popuptext {
  visibility: hidden;
  width: 130%;
  background-color: #555;
  border: 0px solid green;
  color: #fff;
  text-align: center;
  border-radius: 12px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 5%;
  left: -20%;
  margin-left: 0px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  top: 100%;
  left: 70%;
  max-width:60%;
  margin-left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popuptext  img { list-style-type: none; 												
			border: 0px solid red;						
			margin: 0px;
			padding: 0px;	
			max-width:70%;				
			box-shadow: 3px 3px 3px #999;				
			width: 100%;
			}



.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/*----------------------------- Content -------------------------*/



#lineview  {
		font-family: verdana; 
		position: relative;	
		left:30%;					
		top: 10%;
		padding: 5px;
		margin: auto 0px;	
		border: 0px solid #c4c4c4; 
		width: 66%;	
		z-index:4;	
	
		}
				
			
#lineview  img { list-style-type: none; 												
			border: 0px solid red;						
			margin: 0px;
			padding: 0px;	
			max-width:auto;				
			box-shadow: 3px 3px 3px #999;
			height:280px;	
			}



#gridview  {
		font-family: verdana; 
		position: relative;	
		left:330px;
		top: 170px;				
		font-size: 80%;
		color : black;
		padding: 0%;
		margin: 0%;	
		border: 0px solid green; 
		min-width: 35%;
		max-width:70%;	
		min-height	:	100%;
		z-index:4;	
		}


#choice  {
		font-family: verdana; 
		position: absolute;	
		left:0px;
		top: 23%;				
		font-size: 80%;
		text-align: center;
		color : black;
		padding: 0%;
		margin: 0%;	
		border: 0px solid blue; 
		width:100%;
		height:30%;
		z-index:4;	
		display:inline-block;	
		}

#choice li.enter {		position: relative; 	top: 0px;	 left: 0px; 
						max-width: 30%;
						text-align: left;
						border: 0px solid red;
						margin: 10px;
						padding: 2% 0% 2% 1%;
						display:inline-block;					
						list-style-type: none;
					}


#gridview  img 
			{ list-style-type: none; 																					
			margin: 0% 1% 2% 0%;
			padding: 0px;								
					
			}
#choice  img 																									
			{
			max-width:40%;							
			max-height:35%;
			margin: 0% 3%;	
			}		

#gridview  img.landscape 																									
			{
			max-width:100%;							
			height:35%;
				box-shadow: 3px 3px 3px #999;
			margin:25px 0px;
			}
			
#gridview  img.home 																								
			{
			width:180px;							
			height:35%;
			box-shadow: 3px 3px 3px #999;
			}			
			
#gridview  img.large 																									
			{
			max-width:90%;							
			height:25%;
			box-shadow: 3px 3px 3px #999;
			}
			
#gridview  img.vertical 																									
			{
			max-width:60%;							
			height:30%;
			box-shadow: 3px 3px 3px #999;
			margin: 0px 0px 60px 0px;
			}	

#gridview  img.portrait 
			{																			
			max-width:60%;							
			height:30%;
			box-shadow: 3px 3px 3px #999;			
			}
			

#gridview  img.dispo {	box-shadow: 3px 3px 3px #999;
						border-bottom: 2px solid hsl(120, 60%, 65%); 
						margin: 5%;
						padding: 0px;
						}
						
#gridview  img.sold {	box-shadow: 3px 3px 3px #999;
						border-bottom: 2px solid hsl(0, 100%, 75%); 
						margin: 5%;
						padding: 0px;
						}			

	


#gridview li {			position: relative; 	top: 0px;	 left: 20px; 
						max-width: 62%;						
						border: 0px solid red;
						margin: 20px 4%;
						padding: 2% 0% 2% 1%;
						float: left;						
						list-style-type: none;
					}	
					

				
					

#gridview li.spacer {	position: relative; 		top: 20px;		 left: 0px; 
						min-width: 39%;						
						text-align: left;
						border: 0px solid red;
						margin: 1%;
						padding: 1% 2% 2% 2%;
						float: left;
						min-height:7px;
						list-style-type: none;
					}	


	
#gridview li.text {		position: relative; 		top: 0px;		 left: 20px; 
						width: 90%;
						
						border: 0px solid red;
						margin: 4% ;
						padding: 2%;					
					
						list-style-type: none;
						display:inline-block;
					}	
				

#gridview li.media {	position: relative; 		top: 60px;		 left: -50px; 
						width: 35%;
						text-align: left;
						border: 0px solid red;
						margin: 0px;
						padding: 10px;
						float: left;
						min-height:140px;
						list-style-type: none;
					}
					
#gridview .arttext  {
		font-family: verdana;							
		position: relative; 		top: 100px;		 left: 50px; 
		text-align:center;
		font-size: 70%;
		color : black;
		padding: 20px 20px 40px 20px;
		margin: 0px auto;	
		border: 8px solid white; 
		width: 35%;
		z-index:4;
		min-height: 20%;		
		overflow-y: auto;
		display:inline-block;		
	}
			
.index  {
		font-family: verdana; 
		position: relative;	
		left:23%;					
		top: 6%;				
		font-size: 70%;
		color : black;
		padding: 5px;
		margin: auto 0px;	
		border: 0px solid #c4c4c4; 
		width: 50%;   
		height:80%;
		z-index:4;	}

		
.index li {	
			list-style-type: none; 																				
			margin: 8px auto;
			padding: 80px 10px 35px 10px;								
			height: 65%;
			text-align: left;	
			color: #828282;
			border: 0px solid black;
			float: left;
			}	
			
	
			
.index  img { list-style-type: none; 												
			border: 0px solid red;						
			margin: 15px 3px 5px 3px;
			padding: 0px;		
			
			box-shadow: 3px 3px 3px #999;
			height:90%;
			display: block;
			}					
					



#text {
		font-family: verdana;							
		position: relative; 		top: 100px;		 left: 50px; 	
		font-size: 70%;
		color : black;
		padding: 20px 20px 40px 20px;
		margin: 0px auto;	
		border: 0px solid #c0c0c0; 
		width: 45%;
		z-index:4;
		min-height: 20%;
		text-align:left;
		overflow-y: auto;
		display:inline-block;		
	}

#text li {	border: 0px solid red;
			list-style-type: none;			
			
					}
					
					


	
	
				
			

.footnote   { font-family: verdana;
			list-style-type: none; 	
			font-size: 70%;
			color:#787d84;
			border: 0px solid red;						
			margin: 0px 0px 0px 0px;
			padding: 7px 5px 0px 80px;							
			height:30px;
			display: block;
			min-width:90%;
			position: absolute; 		bottom: 0px;		 left: 0px;
			background: #dde0e4;
			}					
				


/*
			
@media only screen and (max-width: 738px) {


  
#indexpage	{
		background-image:url('img/page1.jpg');
		height: 95%;  width: 89%;
			overflow-y: auto;
	}	 
  
   
#logo	{				
			background-color: none;			
			top: 0px;
			left:-5%;
			z-index: 1;
		 	border: 0px solid green; 
			font-size: 80%; 
			font-family : helvetica;		
			text-align: center;			
			padding: 10px 0px 20px 0px;
			width: 100%;
			margin:0px auto;
			}	

#logo img	{ width:150px; max-height:38%;  padding:0 auto;}	
	
#nav_banner	{				
			position: fixed;
			left:12%;
			top: 80px;	 					 						
			z-index: 2;
		 	border: 0px solid green; 
			font-size: 80%; 
			font-family : helvetica;			 			
			text-align: center;			
			padding: 10px 0px 20px 10px;
			margin:0px auto;
			width: 65%;   
			height:10%;
			}	

#nav_banner img	{ max-width:7%; max-height:25px; }	
	
	
	
#gridview  {
		font-family: verdana; 
		position: relative;	
		left:18%;					
			top: 16%;				
		font-size: 70%;
		color : black;
		padding: 5px;
		margin: auto 0px;	
		border: 0px solid #c4c4c4; 
		width: 66%;   
		height:auto;
		z-index:4;	}
		
		
.index  {
		font-family: verdana; 
		position: relative;	
		left:28%;					
			top: 14%;				
		font-size: 70%;
		color : black;
		padding: 5px;
		margin: auto 0px;	
		border: 0px solid #c4c4c4; 
		width: 30%;   
		height:auto;
		z-index:4;	}	
	


.index li {	
			list-style-type: none; 																				
			margin: 8px auto;
			padding: 15px 10px 15px 10px;								
			height: 260px;		
			text-align: center;	
			border: 0px solid black;
			float: left;
			}	
			
.index  img { list-style-type: none; 												
			border: 0px solid red;			
			float: center;
			margin: 5px 3px 5px 3px;
			padding: 0px;	
			max-width:auto;				
			box-shadow: 3px 3px 3px #999;
			height:60%;
			display: block;
			}		
			
#gridview li {			position: relative; 		top: 20px;		 left: 0px; 
						width: 70%;
						text-align: left;
						border: 0px solid red;
						margin: 0% 50% 0% 0% ;
						padding: 2% 2% 2% 7%;
						float: left;
						min-height:140px;
						list-style-type: none;
					}
																	
#gridview li.text {			position: relative; 		top: 20px;		 left: -20px; 
						width: 70%;
						text-align: left;
						border: 0px solid red;
						margin: 0% 50% 0% 0% ;
						padding: 2% 2% 2% 7%;
						float: left;
						min-height:140px;
						list-style-type: none;
					}	
	
#gridview li.media {			position: relative; 		top: 30px;		 left: -50px; 
						width: 87%;
						text-align: left;
						border: 0px solid red;
						margin: 0px;
						padding: 10px;
						float: left;
						min-height:140px;
						list-style-type: none;
					}
					
#gridview li.mediagrid {			position: relative; 		top: 30px;		 left: -50px; 
						width: 87%;
						text-align: left;
						border: 0px solid red;
						margin: 0px;
						padding: 10px;
						float: left;
						min-height:140px;
						list-style-type: none;
					}
																	
																	
#text {
		font-family: verdana;							
		position: relative; 		top: 100px;		 left: 50px; 	
		font-size: 70%;
		color : black;
		padding: 0px 20px 90px 20px;
		margin: 0px auto;	
		border: 0px solid #c0c0c0; 
		width: 55%;
		z-index:4;
		height: 60%;
		text-align:center;
		overflow-y: auto;
	}	
	
#text li {	border: 0px solid red;
			list-style-type: none;
			
					}																
																	


	
	-->
*/