html {height:100%; width:100%;}
body { height:100%; width:100%; background-color:rgb(97,85,73); margin:0px;}
/* 885px;
text-weight:100-900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold*/
/* when use percentages define width and height in order to cover page background-color:red; border-style:solid;*/
/* .whiteleft {width:40px; height:100%; background-color:brown; position:absolute; left:0px;}
.whiteright {width:40px; height:100%; background-color:green; position:absolute; left:922px;} */
.contentpane {margin:0 auto; width:1042px; height:100%; background-color:white; position:relative;
overflow:auto; } /*if we dont set height so scroll bar is set based on center pane height BUT also the height is accustomed to heigher child pane so color appeared on the down side */
.center-pane {margin-left:80px; text-align:right; width:882px; font-size:14px; font-family:"Arial",Serif;
font-weight:500; text-decoration:none; color:rgb(115,102,86); background-color:white;}
.center-pane a {text-decoration:none; color:rgb(115,102,86);} /*it's the menu an english greek links */
/* dont use min-height in order to sale in smaller windows border-style:solid;*/
iframe { overflow:hidden; width:882px; height:580px; padding:0px; margin:0px;}
.desc-pane {position:relative; background-color:white; width:882px; height:580px; text-align:left; color:rgb(115,102,86);
margin-top:50px; margin-bottom:-10px; padding:0px; } /*it's the text below the horizontal menu */
.desc-pane a {text-decoration:none; color:rgb(189,129,73);} /* make links orange not underlined */
.HMenu { list-style: none; margin-top:0px; z-index:3; -webkit-z-index:3;} /*<--------to move hr*/
.HMenu li a:hover {color:rgb(189,129,73); z-index:3; -webkit-z-index:3;}
.HMenu li { float:right; padding:0px 5px;z-index:3; -webkit-z-index:3;} /* */
.HMenu li ul li {float:left; margin-left:-40px; padding:0; background-color:white; z-index:3; -webkit-z-index:3; font-size:12px;}
.HMenu ul {display: none; z-index:3; -webkit-z-index:3;}
.HMenu li:hover ul { list-style:none; display:block; position:absolute; z-index:3; -webkit-z-index:3;} /*block wont move other objects p.e. the desc pane below */
a img {border-style:none;} /*for older IE7 */
hr { margin-top:0px; margin-bottom:0px; border-style:inset; border-color:rgb(115,102,86); } /*<--------to move hr*/
#line { margin-top:0px; margin-bottom:0px; width:100%; }
.arxikipane {width:882px; height:580px; text-align:center; background-color:white;
margin-top:50px; margin-bottom:-10px; padding:0px; } /* set specifiv width heigt to put hr and copywritght on same spot at very page */
.comingsoon {width:882px; height:580px; line-height: 600px; text-align:center; background-color:white;
margin-top:50px; margin-bottom:-10px; padding:0px; }
.textpane {position:relative; width:882px; height:580px; text-align:justify; background-color:white;
margin-top:50px; margin-bottom:-10px; padding:0px; } /* border-style:solid; border-color:green; */
.textpaneshort {position:relative; width:620px; height:580px; text-align:justify; background-color:white;
padding:0px; margin-top:50px; margin-bottom:-10px; }
.textpane a, .textpaneshort a {color:rgb(189,129,73); }
#arxikismall {position:absolute; bottom:60px; left:0; }
.arxikipane img {position:absolute; top:0; left:0; position:absolute; bottom:60px; left:0;}
.shortcutmenu {width:620px; text-align:justify; position:absolute; bottom:200px; left:0; font-size:13px;}
.shortcutmenu a {color:rgb(115,102,86); }
.shortcutmenu a:hover {color:rgb(189,129,73); }
#popup {position:absolute; left:0; top:0; width:100%; height:100%; display:none; text-align:center; z-index:4; }
#popuptransp { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5; z-index:-1; background-color:black; }
#constrpane {width:300px; position:absolute; top:0px; left:0px;}
#cimgpane {width:440px; position:absolute; top:0px; right:0px; }
#img1 { animation: change 20s linear 0s infinite; -webkit-animation: change 20s linear 0s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img2 { animation: change 20s linear 2s infinite; -webkit-animation: change 20s linear 2s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img3 { animation: change 20s linear 4s infinite; -webkit-animation: change 20s linear 4s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img4 { animation: change 20s linear 6s infinite; -webkit-animation: change 20s linear 6s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img5 { animation: change 20s linear 8s infinite; -webkit-animation: change 20s linear 8s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img6 { animation: change 20s linear 10s infinite; -webkit-animation: change 20s linear 10s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img7 { animation: change 20s linear 12s infinite; -webkit-animation: change 20s linear 12s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img8 { animation: change 20s linear 14s infinite; -webkit-animation: change 20s linear 14s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img9 { animation: change 20s linear 16s infinite; -webkit-animation: change 20s linear 16s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img10 { animation: change 20s linear 18s infinite; -webkit-animation: change 20s linear 18s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
/*
#img11 { animation: change 20s linear 20s infinite; -webkit-animation: change 20s linear 20s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img12 { animation: change 20s linear 33s infinite; -webkit-animation: change 20s linear 33s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img13 { animation: change 20s linear 36s infinite; -webkit-animation: change 20s linear 36s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#img14 { animation: change 20s linear 39s infinite; -webkit-animation: change 20s linear 39s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
*/
/*set the percentage to match the time of img to stay still so 100% / numOfImgs = percentage to stat still */
@keyframes change {
0%{opacity:1; z-index:1;}
1% {opacity:1; z-index:2;}
10%{opacity: 1; z-index:2;}
11%{opacity:0; z-index:2;}
100%{opacity:0; z-index:1;}
}
@-webkit-keyframes change {
0% {opacity:1; z-index:1;}
1% {opacity:1; z-index:2;}
10%{opacity: 1; z-index:2;}
11%{opacity:0; z-index:2;}
100%{opacity:0; z-index:1;}
}
#cimg1 { animation: cchange 84s linear 0s infinite; -webkit-animation: cchange 84s linear 0s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg2 { animation: cchange 84s linear 3s infinite; -webkit-animation: cchange 84s linear 3s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg3 { animation: cchange 84s linear 6s infinite; -webkit-animation: cchange 84s linear 6s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg4 { animation: cchange 84s linear 9s infinite; -webkit-animation: cchange 84s linear 9s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg5 { animation: cchange 84s linear 12s infinite; -webkit-animation: cchange 84s linear 12s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg6 { animation: cchange 84s linear 15s infinite; -webkit-animation: cchange 84s linear 15s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg7 { animation: cchange 84s linear 18s infinite; -webkit-animation: cchange 84s linear 18s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg8 { animation: cchange 84s linear 21s infinite; -webkit-animation: cchange 84s linear 21s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg9 { animation: cchange 84s linear 24s infinite; -webkit-animation: cchange 84s linear 24s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg10 { animation: cchange 84s linear 27s infinite; -webkit-animation: cchange 84s linear 27s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg11 { animation: cchange 84s linear 30s infinite; -webkit-animation: cchange 84s linear 30s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg12 { animation: cchange 84s linear 33s infinite; -webkit-animation: cchange 84s linear 33s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg13 { animation: cchange 84s linear 36s infinite; -webkit-animation: cchange 84s linear 36s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg14 { animation: cchange 84s linear 39s infinite; -webkit-animation: cchange 84s linear 39s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg15 { animation: cchange 84s linear 42s infinite; -webkit-animation: cchange 84s linear 42s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg16 { animation: cchange 84s linear 45s infinite; -webkit-animation: cchange 84s linear 45s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg17 { animation: cchange 84s linear 48s infinite; -webkit-animation: cchange 84s linear 48s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg18 { animation: cchange 84s linear 51s infinite; -webkit-animation: cchange 84s linear 51s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg19 { animation: cchange 84s linear 54s infinite; -webkit-animation: cchange 84s linear 54s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg20 { animation: cchange 84s linear 57s infinite; -webkit-animation: cchange 84s linear 57s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg21 { animation: cchange 84s linear 60s infinite; -webkit-animation: cchange 84s linear 60s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg22 { animation: cchange 84s linear 63s infinite; -webkit-animation: cchange 84s linear 63s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg23 { animation: cchange 84s linear 66s infinite; -webkit-animation: cchange 84s linear 66s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg24 { animation: cchange 84s linear 69s infinite; -webkit-animation: cchange 84s linear 69s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg25 { animation: cchange 84s linear 72s infinite; -webkit-animation: cchange 84s linear 72s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg26 { animation: cchange 84s linear 75s infinite; -webkit-animation: cchange 84s linear 75s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg27 { animation: cchange 84s linear 78s infinite; -webkit-animation: cchange 84s linear 78s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
#cimg28 { animation: cchange 84s linear 81s infinite; -webkit-animation: cchange 84s linear 81s infinite; animation-play-state:paused; -webkit-animation-play-state:paused;}
@keyframes cchange {
0%{opacity:1; z-index:1;}
1% {opacity:1; z-index:2;}
3.58%{opacity: 1; z-index:2;}
4%{opacity:0; z-index:2;}
100%{opacity:0; z-index:1;}
}
@-webkit-keyframes cchange {
0% {opacity:0; -webkit-z-index:1;}
1% {opacity:1; -webkit-z-index:1;}
3.58%{opacity: 1; -webkit-z-index:2;}
4%{opacity:0; -webkit-z-index:2;}
100%{opacity:0; -webkit-z-index:1;}
}
@media all and (max-width:1042px) {
.contentpane {width:1024px;}
.center-pane {margin-left:76px;}
}
@media all and (max-width:950px) {
/* required to set width:100% so to overide previous setting and allow text to flow in div */
.contentpane {margin:0; width:100%; height:100%; background-color:white; position:relative; overflow:auto; }
.center-pane {margin:0px; width:100%; height:100%; border-color:red;}
/* dont use height in order to scale accordingly on iframe descpane*/
iframe { overflow:hidden; width:100%; padding:0px; margin:0px;}
.desc-pane {width:100%; height:78%; }
.arxikipane {width:100%; }
.textpane {width:100%; height:78%; } /* we set height at 80% because if 100% then extends lower tahnn center-pane since it starts under the menu */
.textpaneshort {width:100%; height:78%; }
#constrpane {width:100%; position:relative; }
#cimgpane {position:relative; width:100%; height:300px; max-width:440px;}
.shortcutmenu {width:100%; margin-top:6em; max-width:620px; text-align:justify; position:static; font-size:13px; }
#arxikismall {position:static; margin-top:6em; display:block; width:100%; max-width:359px;}
}