/* Julia van den Bosch 2013 */

/* HTML Tags*/
body {font: .8em Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #ffffff; background-color: #000000;}
h1 {font: 250% Arial, Helvetica, sans-serif; color: #ffffff; margin: 0;}
h2 {position: relative; font: 100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: left; padding: 3px 9px; border: 1px solid #666666;}
h5 {font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 2em 0 0.5em 0;}
p {margin: 0 0 15px 0;}
img {border: none; color: #888888; font-style: italic;}
ul {margin-left: 1em; padding-left: 1em;}
table {margin: 0 0 20px 0;}
th, td {padding: 3px 24px 3px 3px; text-align: left; vertical-align: top;}
a {color: #f4e398; text-decoration: none}

/* Page Structure */
.page {position: relative; width: 86%; max-width: 1100px; margin: 20px auto 40px auto; padding: 1% 2%; text-align: left;}
header {min-height: 60px; margin: 0; text-align: center;}
header img {margin: -1%;}

#sidebar, sidebar2, #maincontent, footer {position: relative; text-align: left;}
#sidebar {display: inline-block; width: 21%; padding: 0 4% 0 0; vertical-align: top;}
#sidebar2 {display: inline-block; width: 21%; padding: 0 0 0 5%; vertical-align: top;}
#sidebar1 img, #sidebar2 img {width: 70%; max-width: 150px; height: 70%;}
#maincontent {display: inline-block; width: 69%; padding: 0 2%; vertical-align: top;}
#maincontent .heading-image {width: 66%; text-align: center;}
#home #maincontent {max-width: 44%;}

#navigation {list-style: none; margin: 2em 0 3em -0.5em; padding: 0;}
#navigation li span img {display: none;}
#navigation ul {margin: 0; padding: 0; list-style: none;}
#navigation li {margin: 0.5em;}
#navigation ul li {margin: 0 0 0 10px; padding: 2px 10px; background: url('images/sub-bullet.gif') no-repeat left 1ex;}
#navigation a {display: inline-block; width: auto; padding: 0.1em 0.2em;}
#main-image {display: inline-block; width: 100%; margin: 0 auto; text-align: center;}
#main-image img {max-width: 100%;}
#main-image img.portrait {max-width: 70%; max-height: 550px;}
footer {clear: both; font-size: 90%; padding: 30px 0 0 0;}

#exhibitionlist {border-collapse: collapse;}
#exhibitionlist th, #exhibitions td {padding: 4px 24px 4px 4px;}
#exhibitionlist tr td:last-child {padding: 4px;}

/* Image Gallery */
#gallery {padding: 0; text-align: center;}
#gallery li {display: inline-block; min-width: 150px; line-height: 150px; text-align: center; margin: 3px; padding: 4px 5px 6px 5px; border: 1px solid #666666; border-radius: 3px;}
#gallery li img {vertical-align: middle;}

/* Contact Form */
form {width: 60%; max-width: 300px;}
form label {display: block; margin: 10px 0 3px 0;}
form input, form textarea, form select {width: 100%; font: 100% Verdana, Arial, Helvetica, sans-serif; background-color: #dddddd; border: 1px solid #666666;}
form textarea {height: 9.5em; margin: 0;}
form fieldset {display: inline-block; width: 100%; padding: 20px; border: 1px solid #666666;}
form #submit {width: 125px; margin: 25px 0 0 0; padding: 5px; color: #f4e398; background-color: #000000; border: 1px solid #666666; border-radius: 3px; font-weight: bold;}
form #submit:hover {background-color: #333333;}

/* Classes */
.credit {font-size: 90%; color: #666666; margin: 0; text-align: right;}
.errors {display: inline-block; padding: 10px; margin: 0 0 10px 0; color: #000000; background-color: #cccccc; border: 2px solid #ff0000;}
.intro {text-align: center; font-size: 120%;}
.links li {margin-bottom: 10px;}
.maintext {}
.plain {list-style: none; margin-left: 0; padding-left: 0;}
.plain li {padding: 3px 0;}
.promo {position: relative; left: 0; top: 2em;}
.promo img {padding: 0.5em 0;}
.sideimage-r {float: right; width: 33%; margin-left: 5%; text-align: right;}
.subhead {padding-top: 15px; border-bottom: 1px solid #666666;}
.support-text {}
.thispage>a {color: #000000; background-color: #f4e398;}
.submenu {display: none;}
.submenu ul {list-style: none; margin: 0.25em 0; padding: 0; text-align: center;}
.submenu li {display: inline-block; margin: 0.2em;}
.submenu a {padding: 0.1em 0.25em;}
.support-text {text-align: center;}
.totop {text-align: right;}

@media screen and (max-width: 1070px) {
	.page {width: 100%; min-width: 100%; min-height: auto; margin: 20px auto; padding: 0; text-align: center; font-size: 120%;}
	#navigation {font-size: 120%; text-align: center; margin: 0 auto 3em auto;}
	#navigation li {position: relative; display: inline-block; width: 10em; vertical-align: top; text-align: center;}
	#navigation li span img {display: inline; width: 7px; height: 7px;}
	#navigation ul {display: none; position: absolute; z-index: 10; left: -1em; width: 120%; list-style: none; padding: 0.5em 0; background-color: #000000;}
	#navigation ul li {width: 100%; margin: 0; padding: 4px 0; background-color: #000000; background-image: none;}
	#sidebar, #sidebar2 {display: block; width: 96%; margin: 0 auto; padding: 0;}
	#maincontent {display: block; width: 100%; margin: 0 auto 2em auto; padding: 0;}
	#maincontent .heading-image {width: 100%; text-align: center;}
	#home #maincontent {max-width: 96%;}
	.promo {top: 1em; padding-bottom: 2em; text-align: center;}
	.promo img {padding: 0;}
	.submenu {display: block; margin: -2.5em 0 3em 0;}
}

@media screen and (max-width: 560px) {
	#exhibitionlist {display: block; width: 100%;}
	#exhibitionlist tr {display: inline-block; width: 100%; margin: 0 auto 1em auto; border: 1px solid #cccccc;}
	#exhibitionlist th, #exhibitions td {display: block; width: 100%; padding-right: 1em;}
	.sideimage-r {float: none; position: relative; width: 60%; left: 15%;}
	.widen {margin-left: 0; margin-right: 0;}
	form {width: 85%;}
	#gallery li {width: 100px; line-height: 100px;}
	#gallery li img {max-width: 100px; max-height: 100px;}
}