body, html { width:100%; height: 100%; margin: 0; padding: 0; }
body { -webkit-text-size-adjust: 100%; font-family: 'Roboto', sans-serif; font-weight: 300; background-color: #fff; color: #333; text-align: center; }
body, p, div { font-size: 16px; }

div { box-sizing: border-box; }

.strong { font-weight: 700; }
.thin { font-weight: 300; }
.em { font-style: italic; }

h1 { font-weight: 400; font-size: 2em; }

a img { border: 0; }
a, img, button { outline: none; }

a { text-decoration: none; color: inherit; }
a.underline { text-decoration: none !important; border-bottom: 1px #ccc solid; }

.content-area { width: 1100px; margin: 0 auto; padding: 1em; }

.asterisk { vertical-align: super; font-weight: 700; color: #b73226; }
.asterisk-txt { font-weight: 700; color: #b73226; }

h1#section-header { margin-top: 5em; text-align: center; }

#header { width: 100%; top: 0; background-color: #ededed; padding: 2em 2em 1em 2em; }
#header #sakkoulas-logo, #header #akmi-logo { display: table-cell; white-space: nowrap; }
#header #sakkoulas-logo img, #header #akmi-logo img { max-width: 200px; margin: 1em auto; }

#header #main-menu { font-size: 18px; font-weight: 400; text-align: center; padding: 1em 1.5em 0 1.5em; }
#header #main-menu a.selected { color: #1d3a8f; }

#footer { width: 100%; top: 0; background-color: #fff; padding: 5em 2em 5em 2em; }
#footer img { max-width: 200px; }

img#main-img { max-width: 900px; }

/* form (start) */
form div.form-label, form div.form-label-left { padding: .4em; }
form div.error-msg { font-size: .95em; color: #aa2323; padding: .5em; text-align: left; height: 1.5em !important; }

label, .label { display: inline-block; width: 15em; opacity: 1; vertical-align: top; font-size: 16px; line-height: 1.5em; }
label.mandatory { font-weight: 700; color: #303030; opacity: 1; }
div.form-value { display: inline-block; line-height: 1.5em; }
div.form-info { margin: .2em 0; opacity: .75; font-style: italic; font-size: .9em; }

form input.text, form textarea, form select { font-size: 1em; }
form input.text, form textarea { color: #444; border: 1px #d2d2d2 solid; padding: .4em .5em; }
form textarea { font-family: 'Roboto', sans-serif !important; }
form select { padding: .4em .5em; color: #444; border: 1px #d2d2d2 solid; }
.flexwidth, .flexwidth { width: 250px; }

form input.full-width, form textarea.full-width { width: 90% !important; }
form div.text { background-color: white; border: 1px #d2d2d2 solid; padding: .1em; }

form input.invalid-input { background-color: #f5f5f6; }

button, input.button { font-size: 1.1em; font-weight: normal; padding: .4em 2.5em; margin: 0 .2em .2em 0; }
button.normal, input.normal-btn { background-color: #fff; color: #777; border: 1px #ccc solid; }
button.action, input.action-btn { background-color: #717c7e; color: #dedede; border: 1px #717c7e solid; }
button.reset, input.reset-btn { background-color: #a4b9cc; color: #fff; border: 1px #a4b9cc solid; }
/* form (end) */

/* Operation result start */
div#SERVER_MSG { font-size: 1.1em; }
div.op-result-success, div.op-result-error, div.op-result-warning, div.op-result-info { padding: .5em 1em .3em 1em; white-space: normal; }
div.op-result-success { color: white; background-color: #9ad25d; }
div.op-result-error { color: white; background-color: #ce563f; }
div.op-result-warning, .warning { color: #bc79a1 !important; background-color: #f1dede !important; }
div.op-result-info { color: #777; background-color: #fff8dc; }
ul.op-result-list { margin: 0; padding-left: 1em; }
div.op-result-success a, div.op-result-error a, div.op-result-warning a, div.op-result-info a { color: inherit; }
span.clear-msg { float: right; }
/* Operation result end */

@media only screen and (max-width: 1380px) {
	.content-area { width: 100%; }
}

@media only screen and (max-width: 960px) {
	img#main-img { width: 100%; }
}

@media only screen and (max-width: 640px) {
	label, .label { display: block; line-height: 1.5em; }
	input.flexwidth, textarea.flexwidth { width: 95%; }
	#header #sakkoulas-logo img, #header #akmi-logo img { max-width: 150px; margin: 1em; }
}

@media only screen and (max-width: 414px) {
	#header { padding: 0 0 .5em 0; }
	#header #sakkoulas-logo img, #header #akmi-logo img { max-width: 120px; margin: 1em 1.5em; }
}

@media only screen and (max-width: 320px) {
	input.flexwidth, textarea.flexwidth { width: 92%; }
}