@import url("//fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,greek");

html, body {
	background: #FFFFFF;
	line-height: 140%;
	font-size: 12pt;
	font-family: 'Open Sans', sans-serif
}

.light { font-weight: 300 }
.bold { font-weight: 700 }

a { color: #EE3010; font-size: inherit }
a:link { text-decoration: none }
a:visited { text-decoration: none }
a:hover { text-decoration: underline }
a:active { text-decoration: none }

a.pointy:link { color: #999999; text-decoration: none }
a.pointy:visited { color: #999999; text-decoration: none }
a.pointy:hover { color: #111111; text-decoration: none }
a.pointy:active { color: #999999; text-decoration: none }

.boxHover:hover { background: rgba(143,28,9,0.5); border-radius: 3px }

.link { cursor: pointer; text-decoration: none; color: inherit }
.link:hover { text-decoration: underline; color: inherit }

.wTxtShadow { text-shadow: 0px 1px 0px #FFFFFF }
.bTxtShadow { text-shadow: 0px 1px 1px #000000 }
.scTxtShadow { text-shadow: 0px 1px 1px #d0290d }

.whiteGreyBg { background: #F6F6F6 }
.whiteBlueBg { background: #F2F4F6 }

div.message {
	position: relative;
	padding: calc(3% + 1px) calc(3.5% + 1px);
	margin: calc(3% + 1px) 0px;
	border-radius: 3px;
	text-shadow: 0px 1px 0px #FFFFFF
}

div.closemessage {
	position: absolute;
	line-height: 100%;
	cursor: pointer;
	top: 0;
	right: 0;
	margin: calc(0.5% + 1px)
}

hr { height: 1px; border: none; border-top: 1px dashed #CCCCCC; margin: 0px }

.siteColor { color: #EE3010 }
.siteColorBg { background: #EE3010 }
.petrol { color: #006C6C }
.petrolBg { background: #006C6C }

.siteGradientBg {
	background: #EE3010;
	background-image: linear-gradient(to bottom right, #EE3010, #f68a1e)
}

.patternBg { background: url(../images/pattern.png) repeat }
.lrgPatternBg { background: url(../images/bgpattern.png) center center; background-repeat: no-repeat; background-size: cover }
.lrgPatternOtBg { background: url(../images/bgpattern.png) top center; background-repeat: no-repeat; background-size: initial }
.lrgPatternObBg { background: url(../images/bgpattern.png) bottom center; background-repeat: no-repeat; background-size: initial }
.lrgPatternOlBg { background: url(../images/bgpattern.png) center left; background-repeat: no-repeat; background-size: initial }
.lrgPatternOrBg { background: url(../images/bgpattern.png) center right; background-repeat: no-repeat; background-size: initial }

.roundCorners { border-radius: 3px }
.roundCornersBig { border-radius: 9px }
.border { border: 1px solid #CCCCCC }
.bBorderS { border: 1px solid #333333 }
.bBorderM { border: 2px solid #333333 }
.wBorderS { border: 1px solid #FFFFFF }
.wBorderM { border: 2px solid #FFFFFF }

.fMargin { margin: calc(2% + 10px) }
.vfMargin { margin-top: calc(2% + 10px); margin-bottom: calc(2% + 10px) }
.hfMargin { margin-left: calc(2% + 10px); margin-right: calc(2% + 10px) }
.fxMargin { margin: 10px }
.vfxMargin { margin-top: 10px; margin-bottom: 10px }
.hfxMargin { margin-left: 10px; margin-right: 10px }
.tfxMargin { margin: 6px }
.vtfxMargin { margin-top: 6px; margin-bottom: 6px }
.htfxMargin { margin-left: 6px; margin-right: 6px }

.fPadding { padding: calc(2% + 10px) }
.vfPadding { padding-top: calc(2% + 10px); padding-bottom: calc(2% + 10px) }
.hfPadding { padding-left: calc(2% + 10px); padding-right: calc(2% + 10px) }
.fxPadding { padding: 10px }
.vfxPadding { padding-top: 10px; padding-bottom: 10px }
.hfxPadding { padding-left: 10px; padding-right: 10px }
.tfxPadding { padding: 6px }
.vtfxPadding { padding-top: 6px; padding-bottom: 6px }
.htfxPadding { padding-left: 6px; padding-right: 6px }

.socialIcon { min-width: 50px; width: calc(9%); margin: calc(1%) }
.socialIcon img { padding: 20% }
.socialIconSmall { width: 32px; height: 32px }
.socialIconSmall img { width: 32px; padding: 6px }

.leftCenter { text-align: left }
.leftJustify { text-align: justify }
.centerJustify { text-align: justify }
.rightCenter { text-align: right }
.visibleHidden { position: inherit }
.visibleHiddenEarly { position: inherit }

header {
	width: 100%;
	position: fixed;
	z-index: 90;
	height: 80px;
	top: 0;
	left: 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 3px #999999;
}

#menubar { height: 100% }

#menulogo {
	height: 50px;
	margin: auto 10px;
	float: left
}

#siteloadingicon {
	height: 22px;
	float: left
}

.mainmenu, .submenu { display: inline-block }

.mainmenu span, .mainmenumore {
	display: inline-block;
	margin: auto 10px auto 0px; 
	font-size: 11pt;
	line-height: 100%;
	padding: 10px 12px;
	cursor: pointer;
	vertical-align: middle
}

.mainmenu span:hover, .mainmenumore:hover, .mainmenuhover { color: #FFFFFF; background-color: #111111; border-radius: 3px }

.submenu span, .submenumore {
	display: inline-block;
	margin: 0px;
	height: 50px;
	padding: 18px 14px;
	font-size: 10.5pt;
	line-height: 100%;
	color: #FFFFFF;
	cursor: pointer;
	vertical-align: middle
}

.submenu span:hover, .submenumore:hover, .submenuhover { background-color: #EE3010 }

.responsivemenu {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	right: 0;
	background: rgba(0,0,0,0.9);
	height: 100%;
	width: 100%
}

.responsivemenu span {
	display: block;
	background: #999999;
	width: 100%;
	padding: 22px;
	text-align: center;
	white-space: nowrap;
	border: 1px solid #111111;
	border-top: 0px;
	border-radius: 0px;
	color: #FFFFFF;
	cursor: pointer
}

.responsivemenu span:hover { background-color: #DDDDDD; color: #111111 }

#menuspacer {
	height: 80px;
	display: table-row
}

#menuoptioncontentparent {
	width: 100%;
	position: fixed;
	max-height: calc(100% - 81px);
	z-index: 70;
	top: 80px;
	background: #FFFFFF;
	box-shadow: 0px 3px 3px #CCCCCC;
	overflow-y: auto
}

.showHideParentA div[name='showHideToggle'] { left: -3000px; z-index: 10 }

#announcements { display: table-row }

.notification {
	color: #FFFFFF;
	background-color: #EE3010;
	padding: 2px 8px;
	border-radius: 4px;
	margin: 0px 7px
}

#pageparent { display: table; height: 100%; width: 100% }
#pagecontent { display: table-cell; height: 100%; width: 100%; vertical-align: top }
#pagesidecontent { display: table-cell; height: 100%; width: 0%; vertical-align: top }
main { display: table-row; height: auto }

.borderspacer { height: 10px }
.footerspacer { height: 60px }

#footerpeople {
	position: relative;
	height: 0px
}

#footerpeople div:first-child {
	position: absolute;
	top: -60px;
	width: 100%;
	height: 60px;
	background: url(../images/community.png) repeat;
	z-index: 10
}

footer {
	background: #000000;
	display: table-row;
	height: 0px
}

.gridstd, .contentstd { margin-left: auto; margin-right: auto }
.gridfull, .contentfull { margin: auto; width: 100% }

.contentstdfloat { margin-left: auto; margin-right: auto; overflow: hidden }
.contentfullfloat { margin: auto; width: 100%; overflow: hidden }
.contentstdfloat > div, .contentfullfloat > div { float: left }

.griditem { border: 10px solid transparent; display: inline-block }
.gridsizer { }

.hs { min-height: 115px }
.hm, .harticle { min-height: 250px }
.hm-s { min-height: 250px }
.hl { min-height: 385px }
.hl-m { min-height: 385px }
.hxl { min-height: 520px }
.hxl-l, .hfarticle { min-height: 520px }
.hxxl { min-height: 655px }
.hhuge { min-height: 790px }

.harticleimg { height: 115px }

.box {
	background: #FFFFFF;
	box-shadow: 0px 1px 2px #AAAAAA
}

.shadow {
	box-shadow: 0px 1px 2px #AAAAAA
}

.flex { display: flex }
.inlineFlex { display: inline-flex }
.flexWrap { display: flex; flex-wrap: wrap }
.flexSelfCenter { align-self: center }
.flexCenter { align-items: center }
.flexCenterMiddle { align-items: center; justify-content: center }

.middlePE { font-size: 0px }
.middlePE:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%
}

.articleObject {
	display: block;
	margin: auto
}

.articleText {
	text-align: justify;
	line-height: 175%
}

.cScroll::-webkit-scrollbar { width: 6px; height: 6px }
.cScroll::-webkit-scrollbar-track { border-radius: 3px; background: #EEEEEE }
.cScroll::-webkit-scrollbar-thumb { border-radius: 3px; background: #111111; height: 60px }

.pointypoint { border-left: 1px solid #333333; border-top: 1px solid #333333; width: 40px; height: 40px; background-color: #FCFCFC; transform: rotate(45deg); position: absolute; margin: 20px 0px 0px -20px; display: inline-block }
.pointyflat { width: 100%; border-top: 1px solid #333333; background-color: #FCFCFC; height: 30px; margin-top: 40px }
.wGradientBg { background-image: linear-gradient(to bottom, #FCFCFC, transparent); }

.encourageButton {
	background-color: #EE3010;
	background: linear-gradient(to bottom, #EE3010, #EE3010, #CC0000);
	box-shadow: inset 0px 0px 0px 1px rgba(250, 100, 50, 0.5), 0 1px 3px #999999;
	border: 1px solid #CC0000
}

.encourageButton:hover {
	background: linear-gradient(to bottom, #F94020, #F94020, #E33010);
	box-shadow: inset 0px 0px 0px 1px rgba(250, 100, 50, 0.5), 0 1px 3px #666666;
	cursor: pointer
}

.discourageButton {
	background-color: #BBBBBB;
	background: linear-gradient(to bottom, #BBBBBB, #BBBBBB, #888888);
	box-shadow: inset 0px 0px 0px 1px rgba(150, 150, 150, 0.5), 0 1px 1px #CCCCCC;
	border: 1px solid #BBBBBB
}

.discourageButton:hover {
	background: linear-gradient(to bottom, #CCCCCC, #CCCCCC, #999999);
	box-shadow: inset 0px 0px 0px 1px rgba(150, 150, 150, 0.5), 0 1px 2px #999999;
	cursor: pointer
}

@media (max-width: 679px) {
	
	.articleText { text-align: left; line-height: 170% }
	.articleObject { width: 100% }
	.visibleHidden { position: absolute; top: -9999 }
	
	.hm-s, .harticle { min-height: 115px }
	.hl-m, .hfarticle { min-height: 250px }
	.hxl-l { min-height: 385px }
	
	.hfarticleld, .harticlembimg, .harticlembname { display: none }
	
	.harticleimg { height: 80px }
	
	.gridstd, .contentstdfloat, .contentstd { min-width: 320px; width: 100% }
	.gridsizer, .c2_1 { min-width: 160px; width: calc(100% * 0.50) }
	.c2_2 { min-width: 320px; width: 100% }
	.c2_0 { width: 0px; display: none }
	
	.prohoi { line-height: 120%; font-size: 22pt }
	.prohof { line-height: 120%; font-size: 8pt; font-weight: bold }
}

@media (max-width: 999px) {
	
	.leftCenter { text-align: center; margin: auto }
	.leftJustify { text-align: left; margin: auto }
	.centerJustify { text-align: center; margin: auto }
	.rightCenter { text-align: center; margin: auto }
	.visibleHiddenEarly { position: absolute; top: -9999 }
}

@media (min-width: 680px) and (max-width: 999px) {

	.gridstd, .contentstdfloat, .contentstd { max-width: 660px }
	.gridsizer, .c4_1 { min-width: 160px; width: calc(100% * 0.25) }
	.c4_2 { min-width: 320px; width: calc(100% * 0.50) }
	.c4_3 { min-width: 480px; width: calc(100% * 0.75) }
	.c4_4 { min-width: 640px; width: 100% }
	.c4_0 { width: 0px; display: none }
	
	.prohoi { line-height: 120%; font-size: 26pt }
	.prohof { line-height: 120%; font-size: 10pt; font-weight: bold }
}

@media (min-width: 1000px) and (max-width: 1319px) {

	.gridstd, .contentstdfloat, .contentstd { max-width: 980px }
	.gridsizer, .c6_1 { min-width: 160px; width: calc(100% * 0.1666) }
	.c6_2 { min-width: 320px; width: calc(100% * 0.3333) }
	.c6_3 { min-width: 480px; width: calc(100% * 0.50) }
	.c6_4 { min-width: 640px; width: calc(100% * 0.6666) }
	.c6_5 { min-width: 800px; width: calc(100% * 0.8333) }
	.c6_6 { min-width: 960px; width: 100% }
	.c6_0 { width: 0px; display: none }
	
	.prohoi { line-height: 120%; font-size: 30pt }
	.prohof { line-height: 120%; font-size: 12pt }
}

@media (min-width: 1320px) and (max-width: 1639px) {

	.gridstd, .contentstdfloat, .contentstd { max-width: 1300px }
	.gridsizer, .c8_1 { min-width: 160px; width: calc(100% * 0.125) }
	.c8_2 { min-width: 320px; width: calc(100% * 0.25) }
	.c8_3 { min-width: 480px; width: calc(100% * 0.375) }
	.c8_4 { min-width: 640px; width: calc(100% * 0.50) }
	.c8_5 { min-width: 800px; width: calc(100% * 0.625) }
	.c8_6 { min-width: 960px; width: calc(100% * 0.75) }
	.c8_7 { min-width: 1120px; width: calc(100% * 0.875) }
	.c8_8 { min-width: 1280px; width: 100% }
	.c8_0 { width: 0px; display: none }
	
	.prohoi { line-height: 120%; font-size: 34pt }
	.prohof { line-height: 120%; font-size: 14pt }
}

@media (min-width: 1640px) {

	.gridstd, .contentstdfloat, .contentstd { max-width: 1620px }
	.gridsizer, .c10_1 { min-width: 160px; width: calc(100% * 0.10) }
	.c10_2 { min-width: 320px; width: calc(100% * 0.20) }
	.c10_3 { min-width: 480px; width: calc(100% * 0.30) }
	.c10_4 { min-width: 640px; width: calc(100% * 0.40) }
	.c10_5 { min-width: 800px; width: calc(100% * 0.50) }
	.c10_6 { min-width: 960px; width: calc(100% * 0.60) }
	.c10_7 { min-width: 1120px; width: calc(100% * 0.70) }
	.c10_8 { min-width: 1280px; width: calc(100% * 0.80) }
	.c10_9 { min-width: 1440px; width: calc(100% * 0.90) }
	.c10_10 { min-width: 1600px; width: calc(100% - 24px) }
	.c10_0 { width: 0px; display: none }
	
	.prohoi { line-height: 120%; font-size: 38pt }
	.prohof { line-height: 120%; font-size: 16pt }
}