/* The top line menu */
#menu_body { 
	font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:center;

}
#menu {
	z-index:40;
	position:absolute;
	top:20px;
	right:20px;
	list-style:none;
	width:auto; 
	margin:0px auto 0px auto;
/*	height:40px; */
	padding:0px 0px 7px 10px;
	/* Rounded Corners*/ 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	/* Background color and gradients */
	background: #0272a7;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3D86CA), to(#0B3A7E));
	background: -webkit-linear-gradient(#3D86CA, #0B3A7E);
	background: -moz-linear-gradient(top, #3D86CA, #0B3A7E);
	background: -ms-linear-gradient(#3D86CA, #0B3A7E);
	background: -o-linear-gradient(#3D86CA, #0B3A7E);
	background: linear-gradient(#3D86CA, #0B3A7E);
	/* Opacity */ 
	 opacity: 0.9;
	-ms-filter: ”alpha(opacity=90)”;
 	-moz-opacity:0.9; 
   	-webkit-opacity: 0.9;
	-khtml-opacity:0.9; 
}
#menu li {z-index:40;
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 5px 4px 5px;
	margin-right:10px;
	margin-top:7px;
	border: 1px solid transparent;
}
#menu li:hover {
	padding: 4px 5px 4px 5px;
 	border: 1px solid #777777;
 	border-bottom-color: #F4F4F4;
	background: #F4F4F4;
	/* Rounded corners */
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}
#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right:21px;
	background:url("../mainmenu/img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("../mainmenu/img/drop.png") no-repeat right 8px;
}
.dropdown_1columns, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 0px 5px;
	border:1px solid #777777;
	border-top:none;
	/* Gradient background*/
	background: #F4F4F4;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	background: -webkit-linear-gradient(#F4F4F4, #EEEEEE);
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -ms-linear-gradient(#F4F4F4, #EEEEEE);
	background: -o-linear-gradient(#F4F4F4, #EEEEEE);
	background: linear-gradient(#F4F4F4, #EEEEEE);
	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}
.dropdown_1columns {width: 330px;}
.dropdown_2columns {width: 320px;}
.dropdown_3columns {width: 210px;}
.dropdown_4columns {width: 130px;}
#menu li:hover .dropdown_1columns, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns {left:-1px;top:auto}
.col_1,
.col_2,
.col_3,
.col_4 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:155px;}
.col_2 {width:310px;}
.col_3 {width:200px;}
.col_4 {width:120px;}
#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
	left:auto;
	right:-1px; 
	top:auto;
}
#menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:2px;
	border-bottom:1px solid #888888;
}
#menu li:hover div a {
	font-size:13px;
	color:#104b8b
}
#menu li:hover div a:hover {
	color:#ff0000;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:auto;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}
#menu li.actlink, #menu li.actlink a,
#menu li.actlink_null, #menu li.actlink_null a{
	background-color:#D4D4D4; /*#F4F4F4;*/
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
	/* Rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#menu li:hover.null{
 	border: 1px solid #777777;
	background-color:#F4F4F4;
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
	/* Rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#menu li:hover.actlink_null, #menu li:hover.actlink_null a{
	background-color:#F4F4F4;
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
	/* Rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#menu li:hover.actlink{
	background-color:#F4F4F4;
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
	/* Rounded corners */
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

/* inside box (submenu) start*/
#menu li .box li {
	margin:0px 0px 2px 0px;
	padding:2px 4px 2px 4px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .box li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	margin:0px 0px 2px 0px;
	padding:2px 4px 2px 4px;
}
#menu li .box li a {background:none}
#menu li .box li.actlink {/* active choice in submenu*/
	margin:0px 0px 2px 0px;
	padding:2px 4px 2px 4px;
	background-color:#ffffff;
	border:1px solid #aaaaaa;
	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
/* inside box (submenu) end */
/* End of top line menu */
/*==================================================================*/
/*topbar for small devices */
.small_topbar {
  z-index:40;
  position:absolute; 
  top:10px;
  left:10px;
  margin:0px ;
  width:90%; padding:10px;
  height: auto;
  text-align:right; vertical-align:middle;
  font-family:'Times New Roman', Arial, verdana, helvetica, sans-serif;
  /* Background color and gradients */
	background:transparent;
/*	background: #0272a7;
	background: -webkit-gradient(linear, left top, left bottom, from(#3D86CA), to(#0B3A7E));
	background: -webkit-linear-gradient(#3D86CA, #0B3A7E);
	background: -moz-linear-gradient(top, #3D86CA, #0B3A7E);
	background: -ms-linear-gradient(#3D86CA, #0B3A7E);
	background: -o-linear-gradient(#3D86CA, #0B3A7E);
	background: linear-gradient(#3D86CA, #0B3A7E);*/
	 /* Rounded Corners*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; */ 
	/* Opacity */ 
	 opacity: 0.9;
	-ms-filter: ”alpha(opacity=90)”;
 	-moz-opacity:0.9; 
   	-webkit-opacity: 0.9;
	-khtml-opacity:0.9; 
}  
.small_topbar .small_topbar_1 a{
  color:#FFFF00; 
  text-shadow :2px 2px #333;
  font-size:30px;
  font-style:italic;
  letter-spacing:1px; 
  font-weight:bold}

/*end of topbar for small devices */

/* The sidepanel menu */
.sidepanel {
  height: auto; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 50; /* Stay on top */
  top: 19px;
  left: 19px;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 30px; /* Place content 30px from the top */
  line-height:10px;
  text-shadow :2px 2px #fff;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
  background: #F4F4F4;
  /* Rounded Corners*/ 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	/* Opacity  
	 opacity: 0.9;
	-ms-filter: ”alpha(opacity=90)”;
 	-moz-opacity:0.9; 
   	-webkit-opacity: 0.9;
	-khtml-opacity:0.9; */
}

/* The sidepanel links */
.sidepanel a {
  font-family:Arial, Helvetica, sans-serif;
  padding: 8px 8px 8px 40px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  font-size:14px; 
  color:#104b8b;
  outline:0;
}

/* The sidepanel lines without links */
.sideline {
  font-family:Arial, Helvetica, sans-serif;
  padding: 8px 8px 8px 25px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  font-size:14px; 
  font-weight:bold;
  color:  #000000; 
  outline:0;
}

/* The sidepanel lines with link and without submenu */
.sidepanel .sideline_link a {
  font-family:Arial, Helvetica, sans-serif;
  padding: 8px 8px 8px 25px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  font-size:14px; 
  color:#104b8b;
  outline:0;
}


/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
	color:#ff0000;
}

.sidepanel_left {
	padding:5px 5px 10px 5px
}

.sidepanel_right {
	padding:5px 5px 10px 5px
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
  position: fixed; /* Stay in place */
  z-index: 49; /* Stay on top */
  top: 20px;
  left: 20px;
  font-size: 40px;
  padding: 0px 10px ; 
  /*font-weight:bold;*/
  cursor: pointer;
  color: #ffff00;
  border: none;
  background: #0272a7;
 /* Rounded Corners*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; */ 
 /* Opacity */ 
	 opacity: 0.9;
	-ms-filter: ”alpha(opacity=90)”;
	-moz-opacity:0.9; 
	-webkit-opacity: 0.9;
	-khtml-opacity:0.9; 
} 

/*.slideshow_img {
   width: 100%;
   height: auto;
 }*/


/* Hide the link that should open and close the topnav on small screens */
.sidepanel, .openbtn, .small_topbar, .slideshow_on {display: none}

/* End of sidepanel menu */

/*portrait*/ 
@media  (max-width:479px)  
{
 
  .menu_body, .page_left, .topbar, .slideshow_off, .space_rem, .right_part, .topbar_bauble {display:none}
  div.topbar_chios_2021 {top:40px; left:auto; right:0px}
  
  .sidepanel, .openbtn, .small_topbar, .slideshow_on  {display:block}
  div.page_right, div.page_right_grad {width:100%; padding-left:0px; padding-right:0px; border:0px}
  table.page_main {width:100%}
  div.page_left_articles, div.page_bottom  {width:100%; padding:0px}
  
  body {margin:0px} 
  
  .small_topbar .small_topbar_1 a {font-size:25px;} 
  div.doc_index_initial {font-size:9px}
  
  div.topbar_tree {top:20px;left:40px;}
  div.topbar_candle {top:80px;left:40px;}
  div.topbar_egg {top:105px;left:60px;}
}

/*landscape*/
@media (min-width : 480px) and (max-width: 1002px) 
{
  .menu_body, .page_left, .topbar, .slideshow_off, .space_rem, .right_part, .topbar_bauble {display:none}
  div.topbar_chios_2021 {top:60px; left:auto; right:10px}

  .sidepanel, .openbtn, .small_topbar, .slideshow_on {display:block}
  div.page_right, div.page_right_grad {width:100%; padding-left:0px;padding-right:0px; border:0px}
  table.page_main {width:100%}
  div.page_left_articles, div.page_bottom {width:100%; padding:0px}
  
  body {margin:0px} 
   
  div.sidepanel_left {float:left}
  div.sidepanel_right {float:right}

  div.topbar_tree {top:100px}
  div.topbar_candle {top:200px;left:40px;}
  div.topbar_egg {top:225px;left:60px;}
}