
div.tabsArea { background-color:#8D8E8E;}
span.tabsArea { }
ul.tabsArea { padding:0; margin:0; list-style:none; }
li.tabsArea { padding:0; margin:0; float:left; }
a.tabsArea { color:#000; text-decoration:none; padding:5px 10px; display:inline-block;  }
/*a.tabsArea:hover, a.tabsArea:focus { text-decoration:underline; background-color:#8E4F34; }
a.tabsArea { background-image:url(images//tabs_more.png); background-position:right; background-repeat:no-repeat; }
#tabsnav li:hover a.tabsArea { background-image:url(images//tabs_more_rollover.png); } */
a.tabsArea:only-child { background-image:none; }
#tabsnav li:hover a.tabsArea:only-child { background-image:none; }
.tabSelected { background-color:#343434;}
ul.tabsExpanded { background-color:#e37256; padding:0; margin:0; list-style:none;  }
li.tabsExpanded { padding:0; margin:0; background-color:#8D8E8E;}
a.tabsExpanded { color:#000; text-decoration:none;  padding:0.2em 10px;  display:inline-block;  }
a.tabsExpanded:hover, a.tabsExpanded:focus { text-decoration:underline; }
div.unhideMenu { display:none; }
a.unhideMenu { }
div.hideMenu { display:none; }
a.hideMenu { }


/* HIDDEN MENU */
#hidden_menu { display:none; font-weight:bold; text-decoration:none; color:#fff; background-image:url(images//icon_hidden_menu_hover.png); background-repeat:no-repeat; background-position:left; background-color:#8D8E8E; border:2px solid #8D8E8E; padding:6px 10px 6px 34px; }
#hidden_menu:hover { background-color:#F1631C;  }
#hidden_menu:focus { background-color:#8D8E8E;  }
#hidden_menu:active { background-color:#F1631C;  }
/* #hidden_menu:focus { background-image:url(images//icon_hidden_menu_hover_black.png); background-color:#CFF; color:#039; border-color:#BBBFC2; }  */

/* TABS MENU */
			
#tabsnav ul.tabsArea { margin: 0; padding:0; }
#tabsnav li.tabsArea { margin: 1px; padding: 0; }
#tabsnav ul.tabsExpanded { margin:-1px 0 0 -4px; padding: 0; width:135%; min-width:150px; max-width:250px; border-radius: 6px;  box-shadow:0 5px 5px rgba( 0,0,0,0.3);  }
#tabsnav li.tabsExpanded { border-radius: 6px; }
div.tabsArea { padding-right: 40px; }

/*q:before, q:after { content: ""; } */
#tabsnav { float: left; list-style: none outside none; width: 100%; }
#tabsnav li { float: left; position: relative; }
#tabsnav a { color: #fff; display: block; text-decoration: none; }
#tabsnav a:hover, #tabsnav a:active, #tabsnav a:focus{ color: #fff; }
#tabsnav ul { left: -9999px; position: absolute; }
#tabsnav ul li { float: none; }
#tabsnav ul.tabsExpanded a { white-space:normal; /*	white-space: nowrap;*/ }
#tabsnav li:hover a, #tabsnav li:focus a { background-color:#F1631C; text-decoration: none; }
/*#tabsnav li:hover a.tabsArea, #tabsnav li:focus a.tabsArea { border-radius:4px 4px 0 0; }
#tabsnav li:hover a.tabsArea:only-child, #tabsnav li:focus a.tabsArea:only-child { border-radius:4px; }*/
#tabsnav a.tabsExpanded { border:#8D8E8E solid 4px; } 
#tabsnav li.tabsExpanded:first-child a.tabsExpanded { border-radius:6px 6px 0 0;  }
#tabsnav li.tabsExpanded:last-child a.tabsExpanded { border-radius: 0 0 6px 6px;  }
#tabsnav li:hover ul a, #tabsnav li:focus ul a { text-decoration: none; }
#tabsnav li:hover ul li a:hover, #tabsnav li ul li a:focus { background-color:#F1631C;}
#tabsnav li:hover ul li a, #tabsnav li ul li a { background-color:#8D8E8E;}

/* Expand with FOCUS ... alla einai problhmatiko ? ...   */
#tabsnav li a.tabsArea:focus ~ ul.tabsExpanded { left: 0; z-index:2;   }
a:focus > ul.tabsExpanded { left: 0 ; z-index:2;   }  

/*#tabsnav li:hover ul {     left: 0;  } */
#tabsnav li:hover ul.tabsExpanded { left: 0; z-index:3;  }
#tabsnav li.tabsArea:hover { z-index:4;   }
#tabsnav li.tabsArea:hover a.tabsArea { z-index:5; box-shadow:0 0 3px rgba( 0,0,0,0.3);  }


#tabsnav ul li { z-index:1; }


#menu:target #tabsnav ul { position:relative; }
#menu:target ul.tabsExpanded { left: 0 ; z-index:2;   }  
#menu:target ul.tabsArea, #menu:target li.tabsArea { float:none; max-width:100%; min-width:100%; width:100%; }
#menu:target ul.tabsExpanded, #menu:target li.tabsExpanded { float:none; max-width:97%; min-width:97%; width:97%; }
#menu:target a.tabsArea {  background-color:#8D8E8E; }
#menu:target a.tabsArea, #menu:target a.tabsArea:hover, #menu:target a.tabsArea:focus {  border-radius:6px; }

#menu:target ul.tabsExpanded { margin-left:1.5%; }  
#menu:target #tabsnav a:focus { background-color:#fff; color:#039; text-decoration:underline; }
#menu:target #tabsnav a:hover { background-color:#eee; color:#039; /*text-decoration:underline;*/ }
#menu:target #tabsnav ul.tabsExpanded { box-shadow:none; }
#menu:target { padding:5px; }

#menu:target ~ a { display:none; }



@media (max-width: 640px) {
#menu #tabsnav ul { position:relative; }
#menu ul.tabsExpanded { left: 0 ; z-index:2;   }  
#menu ul.tabsArea, #menu:target li.tabsArea { float:none; max-width:100%; min-width:100%; width:100%; }
#menu ul.tabsExpanded, #menu:target li.tabsExpanded { float:none; max-width:97%; min-width:97%; width:97%; }
#menu a.tabsArea {  background-color:#8D8E8E; }
#menu a.tabsArea, #menu:target a.tabsArea:hover, #menu:target a.tabsArea:focus {  border-radius:6px; }
#menu ul.tabsExpanded { margin-left:1.5%; }  
#menu #tabsnav a:focus { background-color:#fff; color:#039; text-decoration:underline; }
#menu #tabsnav a:hover { background-color:#eee; color:#039; /*text-decoration:underline;*/ }
#menu #tabsnav ul.tabsExpanded { box-shadow:none; }
#menu { padding:5px; }
#tabsnav li { float:none; }
li.tabsArea { float:none; }
}



/* END */