/* GENERAL */

* {margin: 0; padding: 0;}

body, input, select, textarea, main h1, main h2, main h3, legend {font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal; color: #191919; background-color: #fff; text-align: left;}
body {padding-left: 300px;}
main {font-family: "KlinicSlab Book", "Times New Roman", serif;}
header h1, header h2 {font-family: "KlinicSlab Light", "Times New Roman", serif;}

a {color: #00f; text-decoration: underline;}
a:hover {text-decoration: none;}

label {width: 100px; float: left; line-height: 25px;}
label.default {width: auto; float: none;}
label.block {display: block;}
input, select, textarea {width: 200px; height: 25px; line-height: 25px; padding: 0 5px; border: 1px solid #ccc;}
input.default, select.default, textarea.default, input[type=checkbox], input[type=radio] {width: auto; height: auto;}
input.button {width: 170px; font-size: 20px; height: 40px; line-height: 40px; background-color: #1b191c; color: #fff; border: none; font-weight: bold; text-align: center; text-transform: uppercase;}
input.button:hover {text-decoration: none;}
input[type=image] {width: auto !important; height: auto !important; padding: 0; border: none; background-color: transparent;}
textarea {height: auto; max-width: 100%; line-height: 100%;}
fieldset {border: 1px solid #004eb5; border-radius: 3px; padding: 1em 40px;}
legend {border: 1px solid #004eb5; border-radius: 3px; margin-left: -1em; padding: 0.3em 1em; color: #004eb5; font-weight: bold; text-transform: uppercase;}
.required {color: #c00;}

table {width: 100%; border: none; border-collapse: collapse; font-size: 100%;}
table.default {width: auto;}
th, td {padding: 0.2em 0.5em; text-align: left;}
th, th a {background-color: #515153; color: #fff !important;}
.even td {background-color: #ccc;}

img {border: none; max-width: 100%;}
ul, ol {list-style-type: none;}
sub, sup {line-height: 100%;}
hr {border: none; border-bottom: 1px solid #004eb5;}

.hidden {display: none !important;}
.fll {float: left; /* margin: 0 inherit !important; */}
.flr {float: right; /* margin: 0 inherit !important; */}
.cl {clear: both; display: block;}

.col-2 {width: 50%;}

.center {text-align: center;}
.right {text-align: right;}

.modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.modal .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 500px;}
.modal button {position: absolute; right: 10px; width: 40px; height: 30px; margin-top: -5px; background-color: transparent; border: 0; opacity: 0.5; overflow: hidden; font-size: 30px; font-weight: bold; color: #000;}
.success, .alert {padding: 1em 45px; font-size: 110%; font-weight: bold;}
.success {color: #090; border: 1px solid #090; background: #e1f7e1 url(../images/success.gif) no-repeat 15px 50%;}
.alert {color: #f00; border: 1px solid #f00; background: #ffeded url(../images/alert.gif) no-repeat 15px 50%;}

.note {color: #666; font-size: 85%; font-style: italic;}

.ui-widget {font-family: inherit !important; font-size: 1em !important;}
.ui-widget button {font-family: inherit !important;}

.content {width: 80%; margin: 0 auto; }

/* HEADER */

header {color: #fff;}
header a {color: #fff; text-decoration: none;}
header .content {width: 100%;}

nav {width: 300px; height: 100%; position: fixed; top: 0; left: 0; background: #222222 url(../images/menu.png) repeat top right; text-align: right; text-transform: uppercase; overflow: auto;}
nav h1 {position: absolute; top: 40px; right: 25px; font-size: 30px; font-weight: normal; line-height: 150%;}
nav ul {padding: 225px 25px 20px 0; font-size: 14px; font-weight: bold; line-height: 35px;}
nav ul li a:hover, .button:hover {text-decoration: underline;}
nav ul li.active a {color: #004eb5;}

#banner {min-height: 383px; background: url(../images/header.jpg) no-repeat center left; font-size: 18px; text-align: center; overflow: hidden; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
#banner h1 {font-size: 60px; font-weight: normal; line-height: 100%;}
#banner h2 {font-size: 36px; font-weight: normal; margin-top: 30px;}
#banner h3 {font-size: 24px; font-weight: bold; margin-top: 10px;}
#banner p {margin-top: 55px; text-transform: uppercase;}
#banner p:last-child {margin-top: 45px; margin-bottom: 30px;}
#banner .button {display: inline-block; font-size: 14px; font-weight: bold; text-transform: uppercase; padding: 8px 15px; border: 1px solid #fff; border-radius: 3px;}

/* MAIN */

main {padding: 40px 0; line-height: 150%;}
main h1 {font-size: 36px; margin: 0 0 0.7em 0;}
main h2 {font-size: 25px; margin: 1em 0;}
main h3 {font-size: 20px; margin: 1em 0;}
main p, main fieldset {margin: 1em 0;}

/* MODULES */

form.applications p.fll, form.applications p.flr {width: 48%;}
form.applications #input_degree_prefix, form.applications #input_degree_postfix {width: 50px;}
form.applications #input_workplace, form.applications #input_participation_name, form.applications #input_participation_author {width: 450px;}
form.applications .indent {padding-left: 20px; display: block;}
form.applications strong, form.applications label {margin-right: 10px;}
form.applications #input_roommate, form.applications #input_participation_text {width: 80%;}
form.applications #input_comments {width: 97%;}

/* RESPONSIVE */

@media screen and (max-width: 992px) {
	body {padding-left: 0;}
	nav {width: auto; position: static; padding: 1em; text-align: center;}
	nav h1 {position: static; margin-bottom: 0.5em;}
	nav ul {display: block; padding: 0;}
	nav ul li {display: inline-block; margin: 0.2em 1em;}
}