/* 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: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:#49798e; 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:#49798e 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:#407086; background-color:#669cb8; }


/* 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:#49798e; }
#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:#49798e; }
#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 */