* { padding: 0px; margin: 0px; border: 0px;}
img {
	max-width:100%;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
	height: auto;
}



body {
	background-color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	line-height:26px;
	font-size: 18px;
	color: #666;
	text-decoration: none;
		
}

a { 
  border: 0px;
  padding: 0px; 
  margin: 0px;
  text-decoration: none;
  outline: none;
}

#content li { 
  
  margin-left:20px;
  list-style:square; 
  color: #009;
  line-height:1.0em;


 }

a:link {color: #900;}
a:visited {color: #900;}
a:hover { color: #666;}
a:focus { color: #666; }
a:active { color: #666; }


h1  {
  text-decoration: none;
  color: #666;
  font-family: 'Raleway', sans-serif;
  font-size: 1.9em;
  line-height:1.4em;
  font-weight: lighter;
  text-align:left;
  padding-top:40px;
  padding-bottom:20px;
  margin:0px;
}


@media screen and (max-width: 600px) {
	
h1  {
  
  font-size: 1.5em;
  line-height:1.5em;
}
body {
	line-height:1.4em;
	font-size:1em;
}
	}
	
	
h2  {
  text-decoration: none;
  color: #222e5f;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  font-weight: 100;
  line-height: normal;

}

h3  {
  text-decoration: none;
  color: #666;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  line-height: normal;

}

h4  {
color: #333333;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  line-height: normal;
}

#nav a:link { color: #666;}
#nav a:visited { color:#666;}
#nav a:hover { color: #fff;}
#nav a:focus { color: #fff;}
#nav a:active { color: #fff;}
.navactive { color:red; }

	#nav
	{
	border-bottom:3px solid #666;
	background-color: #fff;
	width: 100%;
	font-size: 0.6em;
	height: 6em;		
	
	}
	ul { list-style: none;
		
			width: 100%; /* 1000 */
			font-family: 'Open Sans', sans-serif;
			font-weight: 300;
			position: absolute;
			
		
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
				
				
			}
				#nav li a
				{
			padding:0px 20px 0px 20px;
				color: #000;
				display: block;
				}
				#nav li a:active
				{
				background-color: #333333 !important;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #000;
				
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				width:100%;
				height: 6em; /* 60 */
								
			}
				#nav > ul > li
				{
					
					width:auto;
					
					height: 100%;
					float: left;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 1.3em; /* 24 */
						line-height: 6em; /* 60 (24) */
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 0px solid #fff;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							
							color:#fff !important;
						background-color: #333333;
						
						}


				/* second level */

				#nav li ul
				{
					width:150px;;
					color:#000 !important;
					background-color: #e3e3e3;
					
					text-align: center;
					display: none;
					position: absolute;
					top: 100%;
					z-index: 100;
				}
					#nav li:hover ul
					{
						
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							
							left: -1px;
						}
						#nav li ul a
						{
							color:#000 !important;
							font-size: 1.20em;
							border-top: 1px solid #333;
							padding: 0.5em; 
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
							color:#fff !important;
							background-color: #333333;
							}


	
		@media only screen and ( max-width: 1230px ) 
		{
			html
			{
				font-size: 100%; 
			}
			
			.logomenu
			{
				
				width:0px !important;
			}

			#nav
			{
				
				padding-left:0px !important;
				position: relative;
				top: auto;
				left: auto;
			}
				#nav > a
				{
					height:2em;
       			 }
       				 #nav:not( :target ) > a:first-of-type,
       				 #nav:target > a:last-of-type
       					 {
							height:6em;
							color:#000;
							background-color: #fff;
							text-align:center;
							padding-top:10px;
         				   	display: block;
							border-bottom:2px solid #666;
       					
				
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				width: 100% !important;
				background-color: #eee;
				height: auto;
				font-size:1.0em;
				line-height:1.3em;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{	
						width: 100% !important;
						height: 3em !important;
						line-height:3em !important;
						text-align: center;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px dotted #999;
						}
						
						#nav > ul > :last-child > a
						{
							border-right: none;
							border-bottom:3px solid #666;
						}


				/* second level */

				#nav li ul {	
					width: 100% !important;
					background-color:#CCC;
					position: static;
					height:auto;
					line-height: 3em;
					text-align: center;
					padding: 0;
					border-bottom: 1px solid #999;
				}
				#nav li ul a{	
					width: 100% !important;
	
					position: static;
					height:auto;
					line-height: 3em;
					text-align: center;
					padding: 0 0.9em;
					
				}
				
		}


#header {
	width: 100%;
	max-width: 1200px;
	margin:0px auto 0px auto;
	
}
#headerwrapper {
	background-color: #FFF;
	width:100%;
	padding-bottom:5px;
	padding-top:5px;
	border-bottom: 1px silver solid;
	border-top: 1px silver solid;
	margin:100px auto 0px auto;
	
}

#wrapper {
	width:100%;
}


#content {
	
	
	width:90%;
	max-width:1000px;
	color:#666;
	min-height:900px;
	
	padding-top:0px;
	padding-bottom:100px;
	margin:0px auto 0px auto;
	z-index:10;
}




#footer {
	
	background-color:#333;
	width:90%;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	line-height:1.5em;
	padding-left:5%;
	padding-right:5%;
	padding-bottom:20px;
    margin:0px auto 0px auto;
	float:left;
	}



/* ============ Das Kontaktformular */
form {
	color: #666;  
	font-family:Arial, Helvetica, sans-serif;

}

label {
  display: block;
  cursor: pointer;
}
input#absender, textarea, #name, #firma, #anschrift, #tel, #nachricht {
  
  min-height: 30px;
  font-size:16px;
  border: 2px solid #dddddd;
  
  
}



input#absender:focus, #name:focus, #firma:focus, #anschrift:focus, #tel:focus, #nachricht:focus,
textarea:focus {
  background-color:#F0F0F0;
  color:#666666;
  
}

.button {
  background: #666;
  color: white;
  font-family: Verdana, Arial;
  font-size:large;
  border:none;
  cursor: pointer;
  padding: 2px 5px 2px 5px;
}


/* ====================== */

select, option, textarea, input
{
font-size:14px;
color: #666;
background-color: #ffffff;
border: 2px solid #dddddd;

}

/* ===========BUTTONS=========== */

.btn {
  
  border-radius: 0px;
  padding: 0px 4px 4px 4px;
  text-decoration: none;
}

.btnhover, .btn:hover, .btnhover a:link, .btnhover a:visited {
  border-top:2px silver solid;
  color:#9C0 !important; 
  text-decoration: none;
}


/* ===========Works Artists=========== */
.artistdiv {
	
	width:180px;
	height:230px;
	text-align:left;
	padding-top:40px;
	margin-right:20px;
	float:left;
}

.artistNameSmall
{
	font-size:0.8em;
}
.artistPicSmall
{
	width:180px;
	height:180px;
}
	
#artistsShort {
	width:380px;
	background-color: #eee;
	min-height:760px;
	padding:10px 10px 10px 20px;
	margin-right:15px;
	float:left;
}

	
	
.timeline {

	width:10%;
	line-height:2.5em;
	padding:40px 5% 0px 0px;
	
	float:left;
}
.all_text {

	width:80%;
	padding:0px 0px 0px 0px;
	float:right;
}

.all_pic {

	padding:10px 0px 0px 0px;

}


.pic_public {

	width:20%;
	height:auto;
	padding:40px 10px 0px 0px;
}

.text_public {

	width:70%;
	padding:0px 0px 0px 0px;
	text-align:left;
	float:right;
}

.footer_divs {

	width:50%;
	max-width:450px;
	padding-right:20px;
	float:left;
}

.imgtitel {
	width:100%;
	height:auto;
	}

.mainPic {
	max-width:500px;
	height:auto;
	max-height:625px; 
	margin:40px 40px 40px 0px;
	float:left;

	}

.miniPic {
	float:left;
	width:85px;
	height:85px;
	margin:10px;
	padding:1px;
	background-color:#fff;
	border:2px solid #fff;
	}
	
.selected {
	border:2px solid #999;
	}

.miniPicsWrap {
	float:left;
	width:100%;
	height:auto;
	margin:0 5px 40px 0;
	padding:1px;
	background-color:#fff;
	}

.art_descr {
	width:380px;
	
	margin:40px 0px 40px 0px;
	float:right;
	}
	
.awTitle {
	font-style:italic;
	}
	
.awArtist {
	font-weight:bold;
	}
	
.awDate {
	font-style:italic;
	}
	
.awExhibition {
	font-weight:bold;
	}
	
.descrexpic {
	text-align: left;
	}
 

.bilduntertitel
{
  color: black;
  font-size:0.7em;
}

.postnl {
		width:350px;
		float:right;
	}
	
.mailnl {
		width:350px;
		float:left;
		
	}
	
.abmeldnl {
		width:350px;
		float:left;
		
	}
	
.logohide {
		width:280px;
		padding-right:10px;
	}
	
.logoshow {
		width:280px;
		padding-right:10px;
		padding-left:20px;
		float:left;
	}
.menushow {
		width:69px;
		padding-right:10px;
		
	}
	.nlwrap {
		max-width:800px;
	}
	.video {
		max-width:800px;
	}
	
	

@media screen and (max-width: 1230px) {
	.art_descr {
	width:505px;
	margin:40px 0px 40px 0px;
	float:left;
	}
	
	.mainPic {
	margin:40px 0px 40px 0px;
	float:left;
	}
	
	.postnl {
		float:left;
	}
	.logohide {
		width:0px;
		padding-right:0px;
	}
	
	.logoshow {
		width:250px;
		padding-right:0px;
		padding-left:20px;
		margin:0px;
		float:left;
	}
	.nlwrap {
		max-width:500px;
	}
}
@media screen and (max-width: 600px) {
	
	.postnl {
		width:280px;
		float:left;

	}
	
	.mailnl {
		width:280px;
		float:left;
		
	}
	
	.abmeldnl {
		width:280px;
		float:left;
		
	}
	
	.video {
		max-width:300px;
	}
	
	.art_descr {
	width:300px;
	margin:10px 0px 0px 0px;
	float:right;
	}
	
	.mainPic {
	width:280px;
	height:auto;
	margin:40px 0px 40px 0px;
	float:left;

	}
	.menushow {
		width:55px;
		padding-right:5px;
	}
	.logoshow {
		width:245px;
		padding-right:0px;
		padding-left:10px;
		margin:0px;
		float:left;
	}
	
	.logohide {
		width:0px;
		padding-right:0px;
	}
	
	.footer_divs {
	width:100% !important; 
	padding-right:0px;
	}
	
	.jahr {
	padding-left:10px;
	float:left;
	}
	
	.timeline {
	width:100%;
	float:left;
	}
	
	.all_text {
	width:100%;
	padding:0px 0px 0px 0px;
	float:left;
	}
	
	.text_public {
	width:100%;
	padding:0px 0px 0px 0px;
	float:left;
	}
	
	.pic_public {
	width:50%;
	height:auto;
	padding:40px 0px 0px 0px;
	}
	
	.art_descr {
	margin:40px 0px 0px 0px;
	float:left;
	}
	
	.miniPic {
	width:80px;
	height:80px;
	}
	
	
	.artistPicSmall {
	width:120px;
	height:120px;
}
.artistdiv {
	
	width:120px;
	height:200px;
	text-align:left;
	padding-top:20px;

}
	}
	
	
.magenta {
  color: fuchsia;
}

a.ball {
	color: #444;
	padding:5px 7px;
	background-color:#eee;
	margin-left:-5px;
	-webkit-border-radius: 4px;
	
	border-radius: 4px;
}
a.current {
	color: #fff;
	background-color:#333;
}
a.ball:hover {	
	color: #fff;
	background-color:#000;
	margin-left:-5px;
	-webkit-border-radius: 4px;
	
	border-radius: 4px;
	}


#image_preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	display:none;
	color:#fff;
	
	-webkit-box-shadow: 4px 4px 4px #666; 
	box-shadow: 4px 4px 4px #666;
	}