body {
	background-color: #B20228;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

	font-family:Verdana;
	color:#000000;
	font-size: 10pt;

	scrollbar-face-color: #e7bc5d;
	scrollbar-arrow-color: #B20228;
	scrollbar-highlight-color: #B20228;
	scrollbar-shadow-color: #B20228;
	scrollbar-3dlight-color: #e7bc5d;
	scrollbar-darkshadow-color: #e7bc5d;
	scrollbar-track-color: #e7bc5d;
/*


scrollbar-base-color: #e7bc5d;
scrollbar-arrow-color: #e7bc5d;
scrollbar-3dlight-color: #e7bc5d;
scrollbar-darkshadow-color: #e7bc5d;
scrollbar-highlight-color: #e7bc5d;
scrollbar-shadow-color: #e7bc5d;
scrollbar-track-color: #e7bc5d;

*/

}

.body2{
	background-color: #e7bc5d;
	margin-left: 20px;
	margin-top: 10px;

}
/*  
	This is used only because we want to have a second layer: To be able to align the 'syllogos' submenu the way we want to,
    we are putting it in another layer that hovers avove this one. If we don't do that, the submenu items ('melh', 'ds', etc)
    push the table row down as they expand, thus screwing up the layout.  
*/
#baseLayer {			
	position:absolute;
	z-index:1;
}


td {
	text-align:left;
}


a:link {
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	font-size: 8pt;
}

a:visited {
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	font-size: 8pt;
}

a:hover {			/* WATCH OUT, :hover psudo-class MUST always come AFTER :visited, otherwise it doesn't work! */
	color:#e7bc5d;
	font-size: 8pt;
}


a.leftLink:link {	/* The links in the thumbnail area have different hover colour than the submenu links */
	color:#ffffff;
	font-weight:bold;
	font-size: 9pt;
}


a.leftLink:visited{
	color:#ffffff;
	font-size: 9pt;
}

a.leftLink:hover {
	color: #B20228;  /*    */
	font-size: 9pt;
}

#mainLayer {			/* This is the big box on the right, where the main content is displayed */

	font-family:Verdana;
	width:420px;
	height:395px;
	border-style:none;
	overflow: auto;

}

#criticalCell{
	text-align:right;
}

#thumbLayer {			/* This is the small box on the left, for the thumbnails */

	position:relative;
	padding-left:10px;
	align:right;
	width:180px;
	height:180px;
	border-style:none;
	overflow: auto;

}

#expAreaLeft {
	vertical-align:top;
	font-family:Verdana;

}

#subNea {
	display:none;
	position:relative;
	top:5px;
}

#subDrast {
	display:none; 		/* other attempts:: display:table-cell ,  border-style:groove; */
	position:relative;
	top:7px;
}

#subEkdoseis {
	display:none;
	position:relative;
	top:38px;
}

#subSemin {
	display:none;
	position:relative;
	top:63px;
}

#subGallery {
	display:none;
	position:relative;
	top:92px;
}

#subLinks {
	display:none;
	position:relative;
	top:100px;
}


#subFiloi {
	display:none;
	position:relative;
	top:147px;
}

#subSyllogos {
	z-index:3;
	position:absolute;
	display:none; 
	padding-left:140px;	
}


#topMenuTable {
	position:relative;
	top:0px;
	left:20px;
	z-index:2;
}


.superTitle {			/* This is for top headings of WHOLE SECTIONS, like 'Drasthriothtes' */
	font-size:xx-large;
}


.title {				/* Titles of entries - drasthriothtes, ekdoseis, klp */
	font-weight:bold;

}

.yellow {				/* For the 'Designed and hosted by' text */
	color:#e7bc5d;
}

.description {			/* Descriptions of entries - drasthriothtes, ekdoseis, klp */
	color:#000000;
}


.generic {				/* For various messages to be displayed (for example, 'no entries for the chosen year') */
	font-weight:bold;
}

.galBar {				/* This is the bar below every entry (drast, ekdoseis) with the link to the relevant gallery items */
	color:#ffffff;
	background-color: #B20228;
	text-align:right;
}

.backBar {				/* Similar to galBar: Appears at the bottom of a list of gallery items, for a specific 'drasthriothta', 'ekdosh', etc */
	color:#ffffff;
	background-color: #B20228;
	text-align:right;
}