@font-face { font-family: FontKNUS; src: url('fonts/font.ttf'); }
@font-face { font-family: FontKNUSBold; src: url('fonts/font-bold.ttf'); }

body{ margin: 0px; padding: 0px; overflow-y: scroll; }
*{ font-family: FontKNUS, Verdana; font-size: 14px; }

header.main{ max-width: 950px; margin-left: auto; margin-right: auto; }
header.main div.wp{ width: 100%; background: url('img/header-bg.png') no-repeat center center; background-size: cover; }
/*header.main a{ float: right; margin-top: 20px; margin-right: 20px; }*/
/*header.main{ max-width: 950px; height: 175px; margin-left: auto; margin-right: auto; background: url('img/header-bg.png') no-repeat center center; }*/
header.main a{ float: right; margin-top: 20px; margin-right: 20px; }
nav{margin-top: -4px; max-width: 950px; background: #19313e; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
nav ul{ width: 100%; list-style-type: none; margin: 0px; padding: 0px;}
nav ul li{ float: left; }
nav ul li a{ display: inline-block; color: #ffffff; line-height: 42px; padding: 0px 10px; text-decoration: none; font-size: 18px; }
nav ul li a:hover{ text-decoration: underline; }

h1{ font-size: 22px; font-family: FontKNUSBold, Verdana; }
aside#subheader{ margin-bottom: 20px; max-width: 950px; margin-left: auto; margin-right: auto; background: #19313e url('img/subheader-bg.png') center top no-repeat; background-size: contain; }
aside#subheader section{ padding-left: 23%; padding-right: 10px; width: 100%; box-sizing: border-box;}
aside#subheader section article{ padding-bottom: 10px;}
@media screen and (max-width: 500px) {
	aside#subheader div.wp:before{ padding-top: 54%; }
	aside#subheader section{ padding-left: 10px; }
}
/*@media screen and (max-width: 720px) { aside#subheader{ padding-left: 90px; } }*/
/*@media screen and (max-width: 570px) { aside#subheader{ padding-left: 10px; } }*/
aside#subheader section{ color: #ffffff; }

section#main-content{ padding: 0px 20px; max-width: 910px; margin-left: auto; margin-right: auto; }
section#main-content h1{ color: #19313e; }

section#workshops{ max-width: 950px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
section#workshops h2{ margin: 0px; line-height: 55px; font-size: 21px; font-family: FontKNUSBold, Verdana; background: #19313e; color: #ffffff; text-align: center; }
section#workshops article.workshop{ padding: 5px 20px; background: #f6f4f3 url('img/workshop-bg.png') no-repeat top center; }
section#workshops article.workshop:not(:first-child){ border-top: 3px solid #19313e;  }
section#workshops article.workshop h3{ margin: 10px 0px 0px 0px; font-size: 21px; color: #19313e; }
section#workshops article.workshop div.content{ margin-top: 20px; color: #19313e; }

section#workshops article.workshop.withimage { min-height: 370px; }
section#workshops article.workshop.withimage h3{ margin-top: 20px; }
section#workshops article.workshop.withimage div.image { width: 489px; float: right; margin-left: 20px; margin-right: -20px; }
section#workshops article.workshop.withimage:nth-child(odd) div.image { float: left; margin-left: 0px; margin-right: 20px;}
section#workshops article.workshop.withimage div.image img{ position: absolute; width: 100%; height: 100%; }
section#workshops article.workshop.withimage div.image div.photo{ margin: 8% 0px 0px 9%; position: absolute; width: 81%; height: 76%; background-size: cover; background-repeat: no-repeat; background-position: center center; }

section#links{ text-align: center; padding: 10px 20px; max-width: 910px; margin-left: auto; margin-right: auto; }
/*section#workshops article.workshop.withimage div.image div.photo{ margin: 44px 0px 0px 48px; position: absolute; width: 387px; height: 271px; background-size: cover; background-repeat: no-repeat; background-position: center center; }*/
@media screen and (max-width: 950px){
	section#workshops article.workshop.withimage div.image { width: 326px; }
}
@media screen and (max-width: 650px){
	section#workshops article.workshop.withimage div.image { width: 217px; }
}
@media screen and (max-width: 480px){
	section#workshops article.workshop.withimage div.image { width: 100%; margin-left: 0px; margin-right: 0px; }
}


footer{ max-width: 950px; margin-left: auto; margin-right: auto; background: #19313e url('img/footer-bg.png') no-repeat center center; }
footer div.column{ float: left; width: 276px; margin: 20px 0px; padding: 0px 20px; border-left: 1px solid #ffffff; height: 149px; }
@media screen and (max-width: 400px) { footer div.column{ width: 100%; box-sizing: border-box; } }
footer div.column:first-child{ border-left: none; }
footer div.column:nth-child(3) p:first-child{ margin-top: 45px; margin-bottom: 20px;}
footer div.column:nth-child(3) img{ margin-top: 10px; }
footer div.title{ font-size: 14pt; font-family: FontKNUSBold, Verdana; }
footer table td{ padding-left: 20px; }
footer table td:first-child{ padding-left: 0px; }
footer *{ color: #ffffff; font-size: 12px; }

.c{ clear: both;}
.b{ font-family: FontKNUSBold, Verdana; }
.wp{ display: inline-block; position: relative; width: 200px; }
.wp:before{ content: ""; display: block; }
.wp div.wpcontent{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.wp18:before{ padding-top: 18%; }
.wp41:before{ padding-top: 41%; }
.wp75:before{ padding-top: 75%; }

table td{ vertical-align: top;}
img{ border: none; outline: none; }
/*
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
*/