/* @import url('reset.css'); */


@font-face {
  font-family: MuseoSansRounded300;
  src: url("MuseoSansRounded-300Web.eot");
}

@font-face {
  font-family: MuseoSansRounded300;
  src: url("MuseoSansRounded-300Web.woff") format("woff");
}

html {height:100%; overflow-y: scroll; }

body {
	background-color: #FFF;
	margin: 0 auto;
	height:100%;
	font-family: MuseoSansRounded300, sans-serif;
	-webkit-text-size-adjust: 100%;
}

textarea.request {
	font-family: MuseoSansRounded300, sans-serif;
	font-size: 14px;
	line-height: 18px;
	background-color: #fff;
	color: #999999;
	width: 50%;
	border: 1px solid #999999;
	margin-bottom: 5px;
	padding-left: 5px;
	margin-right: 10px;
	float: left;
}


#seite {	
	max-width: 950px; 
	min-width: 270px;
  	margin: auto; 
  	min-height: 100%; 
 	height: auto !important; 
  	height: 100%; /* IE soll wie gewünscht interpretieren */
  	overflow: hidden !important; /* Firefox Scrollleiste */
	padding-left:10px;
	padding-right:10px;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0 0 0 1.5%;
	min-height:1px;
}
.col:first-child { margin-left: 0;}


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
	
}
.group {
    zoom:1; /* For IE 6/7 */
	
}
                                               
/*  GRID OF TEN */
.span_10_of_10 {width: 100%;}
.span_9_of_10 {width: 89.85%;}
.span_8_of_10 {width: 79.7%;}
.span_7_of_10 {width: 69.55%;}
.span_6_of_10 {width: 59.4%;}
.span_5_of_10 {width: 49.25%;}
.span_4_of_10 {width: 39.1%;}
.span_3_of_10 {width: 28.95%;}
.span_2_of_10 {width: 18.8%;}
.span_1_of_10 {width: 8.65%;}

/*  GRID OF FOUR  */
.span_8_of_10 .col.span_3_of_4 {margin: 0 0 0 1.9%;}
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 74.52%;}
.span_2_of_4 {width: 49.05%;}
.span_1_of_4 {width: 23.57%; margin-left:0; margin-bottom:40px;}



/* --- HEADER --- */

#header {
	padding-top:25px;
	font-size:18px;
	padding-bottom:20px;
}
#logo img {width:100%; max-width:289px;}


/* NAVGATION */
#menuebt {float:right;display:none;}

.toggle {display:block;}
#mainnavi ul {text-align:justify; padding-top:13px;}
#mainnavi li {display: inline;}
#mainnavi li a {color:#999999;}
#mainnavi li a:hover {color:#000000; text-decoration:none;}
#mainnavi li.aktiv a {color:#000000;}
#mainnavi li:last-of-type::after {content: ''; padding-left: 100%; display: inline-block;}

.language {font-size:14px; line-height:22px;}

#artistname {height:60px; display:table;}
#artistname h1 {vertical-align:bottom; display:table-cell; height:60px;}

/* --- CONTENT --- */
#content {width:100%; padding-bottom:20px;}

#subnavi {font-size:15px; line-height:20px;color:#999999; margin-bottom:85px;}
#subnavi li a {color:#999999;}
#subnavi li a:hover {color:#000000;}
#subnavi li a.preventClick { color:#999999;}
#subnavi li.aktiv a {color:#000000;}
.counter {margin-left:20px;}
.counter a {color:#999999;}
#subnavi li.aktiv .counter a  {color:#999999;}
#subnavi li.aktiv .counter a:hover  {color:#000000;}

.item {float:left;}
.itemcontent {height:500px;}
.itemcontent img {width:100%;margin:0 auto;}
h1 {font-size:18px;}
p {font-size:14px; line-height:18px;}
.headline {font-size:18px; line-height:21px;}
#information {margin-left:0px; padding-left:0px;}
#information h2 {font-size:18px; margin-bottom:20px;}
#information h1 {font-size:18px;}
.grey {color:#999999;}
#img_information h2 {font-size:18px; margin-top:45px;}
#img_information p {color:#999999;}
.artistlist {font-size: 14px; line-height:20px;}

#content .span_10_of_10 img {width:100%}
#preview img {width:100%}
#preview {}


#previewwrapper {display:table; float:right;}
#preview {display:table-cell; height:500px; vertical-align:middle;}
#preview img {margin:0 auto;}

#bigimgwrapper {display:table; float:right; height:500px;}
#bigimg {display:table-cell; vertical-align:middle;}
#bigimg img {margin:0 auto; width:100%;}

.exhibition #subnavi {margin-bottom:45px;}


.span_8_of_10 h1 {color:#999999;}
.span_8_of_10 p {color:#999999;}
.span_8_of_10 a:hover {text-decoration:underline;}
.span_6_of_10 h1 {color:#999999;}
.span_6_of_10 p {color:#999999;}
.span_6_of_10 a:hover {text-decoration:underline;}

.span_1_of_4 img {width:100%; max-width:178px;}
.span_3_of_4 p {margin-bottom:40px; }

/*THUMB*/

#thumbs .span_7_of_10 {float:right; margin-left:1.5%}
#thumbs .span_3_of_10 {margin-left:0;}

#exhiintro .span_7_of_10 {float:right; margin-left:1.5%}
#exhiintro .span_3_of_10 {margin-left:0;}

#exhiimg .span_7_of_10 {float:right; margin-left:1.5%}
#exhiimg .span_3_of_10 {margin-left:0;}

.imageholder {
	position:relative;
	display:table;
	height: 200px;
	vertical-align: middle;	text-align: center;
	text-align:center;
	float:left;
	margin-right:15px;
	margin-bottom:15px;
}
.inner {
	width:100%;
	display:table-cell;
	vertical-align:bottom;
	position:relative;
	text-align:center;
}
.inner img {
	display:inline;
	vertical-align:bottom;
	max-height:200px;
	max-width:200px;
}


.span_6_of_10 .imageholder {
	position:relative;
	display:table;
	height: 150px;
	vertical-align: middle;	text-align: left;
	text-align:center;
	float:left;
	margin-right:30px;
	margin-bottom:15px;
	margin-top:15px;
}
.span_6_of_10 .inner {
	width:100%;
	display:table-cell;
	vertical-align:bottom;
	position:relative;
	text-align:left;
}
.span_6_of_10 .inner img {
	display:inline;
	vertical-align:bottom;
	height:auto;
	max-height: none;
	max-width: none;
}
.imageholder p {margin-top:10px;}

.ui-loader {display:none;}
/*TOOLTIPP*/

#tooltip {
	min-width:200px;
	max-width:250px;
	position:absolute;
	padding:10px 10px;
	color:#333;
	display:none;
	background-image:url(../img/trans.png)
}


/*VIDEO*/


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
	margin-bottom:10px;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*NEWSLETTER*/
#newsletter p {width:50%;}
#newsletter p.label {line-height:32px; width:auto;}

input {
	font-family: MuseoSansRounded300, sans-serif;
	font-size:14px; 
	line-height:18px;
	background-color:#fff;
	color:#999999;
}
input[type="text"] {
	width:50%;
	height:30px; 
	border:1px solid #999999; 
	margin-bottom:5px; 
	padding-left:5px;
	margin-right:10px;
	float:left; 
	}

input[type="submit"]{border:none; padding-left:0px; padding-top:10px;}
input[type="submit"]:hover {border:none; text-decoration:underline; color:#000}

label.error {font-size:12px; color:#F00; width:100%; display:block; float:right; margin-bottom:10px }


/* --- LINKS --- */

a:link {color: #999999; text-decoration: none;}
a:visited {color: #999999; text-decoration: none;}
a:hover {color: #000000; text-decoration: none;}
a:active {color: #000000; text-decoration: none;}



@media screen and (max-width: 800px) {
#mainnavi {float:none; clear:left; margin-left:0px;}
#mainnavi ul {display:none;}
#menuebt {display:block; padding-top:13px;}
.toggle {display:block;}

#mainnavi ul {}
#mainnavi li {float:none; display:block;}
li:last-of-type::after {display:none; }


}

@media screen and (min-width: 800px) {
.toggle {display:block !important;}

}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */



@media only screen and (max-width: 650px) {
.span_10_of_10 {width: 100%;}
.span_9_of_10 {width: 100%;}
.span_8_of_10 {width: 100%;}
.span_7_of_10 {width: 100%;}
.span_6_of_10 {width: 100%;}
.span_5_of_10 {width: 100%;}
.span_4_of_10 {width: 100%;}
.span_3_of_10 {width: 100%;}
.span_2_of_10 {width: 100%;}
.span_1_of_10 {width: 100%;}

.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 100%; float:left;}
.span_2_of_4 {width: 100%;}
.span_1_of_4 {width: 100%; float:right; padding-bottom:10px;}
}



@media only screen and (max-width: 650px) {
#seite {height:auto; padding-bottom:20px;}
.col { 
	  margin: 0 0 0 0%;
	  min-height:1px;
}
#header #mainnavi {line-height:30px;}
#logo.span_4_of_10 {width:210px !important; float:left;}
#toggle {width:80px !important; float:right;}
#menuebt { padding-top:5px;}
#preview {display:none;}
.moboff {display:none;}
#artistname {height:20px;}
#artistname h1 {height:40px;}
#tooltip {display:none!important;}
#subnavi { margin-bottom:20px; font-size:18px; line-height:30px;}
#bigimgwrapper {display:table; float:right; height:auto; margin-bottom:20px;}

/*EXHIBITIONS */

.group:before,
.group:after {content:none;}

.exhibition #exhiintro  {display:table; width:100%;}
.exhibition #exhiintro #information p {margin-bottom:20px;}
.exhibition #exhiintro #subnavi.col   {display:table-header-group; float:none;}
.exhibition #exhiintro #subnavi ul   {margin-bottom:20px;}
.exhibition #exhiintro #imgwrapper.col  {display:table-footer-group; float:none;}
.exhibition #exhiintro #information.col   {display:table-row-group; float:none;}

.exhibition #thumbs   {display:table; width:100%;}
.exhibition #subnavi.col   {display:table-footer-group; float:none;}
.exhibition #imgwrapper.col  {display:table-row-group; float:none;}
.exhibition #information.col   {display:table-header-group; float:none;}

.exhibition #exhiimg  {display:table;}
.exhibition #exhiimg #subnavi.col   {display:table-row-group; float:none;}
.exhibition #exhiimg #subnavi ul   {margin-bottom:20px;}
.exhibition #exhiimg #imgwrapper.col  {display:table-footer-group; float:none;}
.exhibition #exhiimg #information.col   {display:table-header-group; float:none;}
.exhibition #exhiimg p {margin-bottom:20px;}
#img_information h2 {margin-top:0}
p {font-size:18px; line-height:normal;}
.artistlist {font-size: 18px; line-height:30px;}
.videotxt {font-size:16px; line-height:20px;}
#information a {font-size:16px; line-height:20px;}
#information p {font-size:16px; line-height:20px;}
#img_information p {font-size:16px; line-height:20px;}
.artistlist a {font-color:#999999 !important;}

/*THUMBNAILS*/
.imageholder {
	height: auto;
	float:none;
	margin-right:0px;
	margin-bottom:15px;
	width:100%;
}
.inner {}
.inner img {
	display:inline;
	max-width:100%;
	width:100%;
	max-height: none;
}

.span_6_of_10 .imageholder {
	position:relative;
	display:table;
	height: auto;
	vertical-align: middle;	text-align: left;
	text-align:center;
	float:left;
	margin-right:30px;
	margin-bottom:15px;
	margin-top:15px;
}

.span_6_of_10 .inner {
	width:100%;
	display:table-cell;
	vertical-align:bottom;
	position:relative;
	text-align:left;
}

.span_6_of_10 .inner img {
	display:inline;
	vertical-align:bottom;
	height:auto;
	width:auto;
	max-height: 150px;
}

/*NEWSLETTER*/
#newsletter p {width:100%;}
#newsletter p.label {line-height:18px; margin-bottom:10px;}

input {
	font-family: MuseoSansRounded300, sans-serif;
	font-size:18px; 
	line-height:18px;
}
input[type="text"] {
	width:98%;
	height:30px; 
	border:1px solid #999999; 
	margin-bottom:5px; 
	padding-left:5px;
	padding-right:-5px;
	float:left; 
	}

input[type="submit"]{border:none; padding-left:0px; padding-top:10px;}
input[type="submit"]:hover {border:none; text-decoration:underline; color:#000}

label.error {font-size:12px; color:#F00; width:100%; display:block; float:right; margin-bottom:10px }
}

.viewInRoom {
	color: #000 !important;
}

.viewInRoom:hover{
	font-weight: bold;
}

.viewInRoom img{
	padding:10px;
	opacity: 0.5;
	border:2px solid #999;
	width:24px;
	margin-bottom:5px;
}

.viewInRoom:hover img{
	border:2px solid #333;
	opacity: 0.7;
}

#bigimg{
	display:block;
	text-align: center;
}

#bigimg:hover{
	cursor: zoom-in;
}

#bigimg > span {
	line-height: 170%;
}

#bigimgwrapper .thumbnails{
	margin-top:20px;
	text-align: center;
}

#bigimgwrapper .thumbnails a{
	display:inline-block;
	vertical-align: bottom;
	margin-right:10px;
	height:100px;
}

#bigimgwrapper .thumbnails a img{
	max-height:100%;
}

.artwork_thumbnail{
 	padding-bottom:6px;

	/*opacity: 0.5;*/
}

.artwork_thumbnail.active {
	border-bottom: 3px solid orange;
	padding-bottom:3px;

	/*opacity: 1;*/
}

.requestArtwork {
	color: #000 !important;
	font-weight: normal;
	opacity: 1;
}

.requestArtwork:hover{
	font-weight: bold;
	color: #000;
}


.vitaHeadline{
	font-size: 24px;
	margin-bottom: 20px;
}