@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=greek,greek-ext,latin-ext');

body, html { width:100%; height: 100%; margin: 0; padding: 0; background-color: #fff; position: relative; }
body { font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; }
body, p, div { font-size: 100%; }

.small { font-size: .8em !important; }
.smaller { font-size: .9em !important; }
.larger { font-size: 1.25em !important; }
.large { font-size: 1.5em !important; }

.normal { font-weight: 400 !important; }
.strong, strong, b { font-weight: 700 !important; }
.em { font-style: italic; }
.underline { border-bottom: 1pt #aaa solid; }

h1, h2, h3 { color: #454545; }

a { text-decoration: none; color: inherit; }

h1.on, h2.on, h3.on { color: #5d96af; }
h1.off, h2.off, h3.off { color: #e03c31; }
h1.alert, h2.alert, h3.alert { color: #ff6648; }

p, li { line-height: 1.5em; }

/*
Main DIVs:
#app-header (fixed)
	#app-header-overlay-menu-switch
	#app-header-bar
	#app-navpath
	#SERVER_MSG
#top-blank (simple padding)
#home-main
#home-footer

.content-area defines content boundaries
*/

/* Main area definition (start) */
div#app-header { position: fixed; overflow: hidden; width: 100%; top: 0; left: 0; z-index: 9999; }
div#top-blank { height: 100px; }
div#SERVER_MSG { width: 100%; }
div#home-main { padding: 1em; }
div#home-footer { padding: 1em 1em 3em 1em; }

div.content-area { width: 1200px; padding: .5em; margin: 0 auto; }
/* Main area definition (end) */

/* Header (start) */

div#app-header-bar { display: table; background-color: #eee; vertical-align: middle; width: 100%; padding-left: 1em; }
div#app-header-overlay-switch { width: 24px; padding: 0 .5em; }
div#app-header-menu { display: table-cell; vertical-align: middle; margin: .5em; }
div#app-header-menu div { display: inline-block; vertical-align: middle; }
div#app-header-menu div.menu-item, div#app-header-menu div.app-identity { font-size: 1.1em; margin: .5em; display: inline-block; vertical-align: middle; }
div#app-header-menu div.menu-item a { color: #333; }
div#app-header-menu div.menu-item a:hover { border-bottom: 1px #da7163 solid; }
div#app-header-menu div.menu-item img { vertical-align: middle; }
div#app-header-menu div.separator { color: #da7162; }

div#app-header-tabs { display: table-cell; text-align: left; vertical-align: middle; }
div#app-header-tabs div#tab-group { float: right; }
div#app-header-tabs div#tab-group > div { display: table-cell; padding: .75em .75em .6em .75em; }
div#app-header-tabs div#tab-group div.tab.active { background-color: #ddd; }
div#app-header-tabs div#tab-group div.section-tab.active { background-color: #eee; border-bottom: 2px #777 solid; }
div#app-header-tabs div#tab-group div.tab img { vertical-align: middle; max-width: 24px; }
div#app-header-tabs div#tab-group div.tab-separator { color: #777; padding: 0 .6em; }

div#app-header div#app-navpath { text-align: right; background-color: #f9f9f9; padding: .5em 1em .5em .5em; }
div#app-header div#app-navpath span { color: #444; }
div#app-header div#app-navpath span a { color: inherit; }

div#app-overlay { display: none; position: fixed; top: 47px; width: 100%; background-color: #eee; padding: .5em .5em 1.5em .5em; z-index: 10000; }
div#app-overlay div.table-cell { border-bottom: 1px #ccc solid; }
div#app-overlay div.table-cell.icon { width: 40px; text-align: right; }
div#app-overlay div.table-cell.icon img { display: inline-block; vertical-align: middle; }
div#app-overlay div.table-cell.link { font-size: 1em; color: #333; padding: .75em .5em .75em 1em; }
/* Header (end) */

/* Operation result start */
div.op-result-success, div.op-result-error, div.op-result-warning, div.op-result-info { padding: .5em 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: #676767; background-color: #f5e1a4; }
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 */

div.data > div > div { padding: .3em .5em; background-color: #f9f9f9; border: .5px #fff solid; }
div.data > div > div.header { background-color: #eeeeee; font-weight: 700; }
div.data > div.active > div { background-color: #d9e1e2 !important; }
div.data > div.inactive > div { background-color: #ecbaa8 !important; }

/* Form elements (start) */
label { display: block; margin: 1em 0 .5em .2em; }
label.mandatory { font-weight: 700; }
input.text { font-size: 1em; color: #333; width: 250px; border: 1px #ccc solid; padding: .3em; }
select { font-family: 'Roboto', sans-serif; font-size: 1em; color: #333; border: 1px #ccc solid; padding: .3em; }
div.form-error-msg { font-size: .9em; color: #bd675a; margin: .5em 0 .5em .2em; }

fieldset { border: none; padding: 0; margin: 0; }
legend { display: none; }
button, .button { font-size: 1em; font-family: 'Roboto', sans-serif; padding: .4em 1em; border: none; white-space: nowrap; }
.action-button { background-color: #98b3b2; color: #fff; }
.close-button { background-color: #ff6666; color: #fff; }
.reset-button { background-color: #efefef; color: #777; }
/* Form elements (end) */

/* Listed offering (start) */
div#featured-items .icon { width: 150px; text-align: center; vertical-align: top; padding: 10px; }
div#featured-items .icon img { width: 130px; display: block; }
div#featured-items .summary { text-align: left; vertical-align: top; padding: 0 10px; }
div.meta { display: inline-block; margin: 0 .5em .5em 0; padding: .2em .5em;; background-color: #ededed; }
/* Listed offering (start) */

/* Offering page */
div.runtime-report { background-color: #fafafa; border: 2px #fafafa solid; padding: 0 1em .5em 1em; }
div.runtime-report div.table-cell { padding: .3em; }

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

@media only screen and (max-width: 960px) {
	img.rt-question { max-width: 100%; }
	div#app-header-overlay-switch { display: table-cell; }
	div#app-header-menu div.menu-item { display: none; }
}

@media only screen and (max-width: 640px) {
	div#app-header-tabs div#tab-group div.section-tab { display: none; }
	div#app-header-tabs div#tab-group div.tab-separator { display: none; }
}

@media only screen and (max-width: 320px) {

}