/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* fokianou247.gr -    copyright 2012 Blanka Amezkua                                  */
/*                                                                                    */
/* UPDATES                                                                            */
/* v20231121 : italicmedium110                                                        */
/* v20230401 : Add a logos container   logos-cont class                               */
/* v20220227 : Added styles for past show titles to deal w weird backgrounds.         */
/*             Radius for Photos title                                                */
/* v20210607 : Saved some  space in menus, topBanner, mmenu-wrap,                     */
/*              contentsWrap, and rules for smaller screens                           */
/* v20220323 : toned down opacity of box announcements box-ann                        */
/* TODOs :   responsive flex or btsrp or..                                            */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a:link { color: #3181c4; text-decoration: none; } 
a:visited { color: #3181c4; text-decoration: none; }
a:hover { font-weight:bold; text-decoration: none;  color:#b1752d; }
a:active { color: #3181c4; text-decoration: none; }


/* 
	These are for the main menu..  bland and boring (why?)  ORDER IMPORTANT
	link, visited either way and then hover, active
*/

a.stdtxt:link { color: #000000; text-decoration: none; } 
a.stdtxt:visited { color: #000000; text-decoration: none; }

a.stdtxt:hover { font-weight:bold; text-decoration: none; }
a.stdtxt:active { color: #000000; text-decoration: none; }



/* A simpler non underlined link for  the NewsPress entries.  */
a.simple:link {
	color:#009;
	font-size:90%;
	text-decoration:none;
}
a.simple:visited {
	color:#551a8b;
	font-size:90%;
	text-decoration:none;
}
a.simple:hover {
	color:#3D81EE;
	font-size:90%;
	text-decoration:underline;
}


/* Slightly bigger font */
a.simplebig:link {
	color:#009;
	font-size:120%;
	font-style: italic;
	text-decoration:none;
}
a.simplebig:visited {
	color:#551a8b;
	font-size:120%;
	font-style: italic;
	text-decoration:none;
}
a.simplebig:hover {
	color:#3D81EE;
	font-size:120%;
	font-style: italic;
	text-decoration:underline;
}




a.pastshow:link {
	color: red;
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;
	
}
a.pastshow:visited {
	color: red;
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;

}

a.pastshow:hover {
	color: red;    
	text-decoration: underline;
	font-weight:bold;
	font-style: italic;
	font-size: 75%;
}

a.pastshow:active {
	color: red;   
	text-decoration: underline;
	font-style: italic;
	font-size: 75%;
}



body { 
	background-color: white;
	color: #000000;
	font-family: "Trebuchet MS", "Tahoma", "Arial", sans-serif;
	font-size: 14px;
	width:100em;
}

h1, h2, h3, h4, h5 {
	font-family: "Calibri","Lucida Sans","Trebuchet MS","Arial","Tahoma",sans-serif,serif;
	/*text-shadow: 2px 1px 0px #c0c0c0;*/
	padding: .3em;
	background-color: #b0c4de;
}


h1 { 
	font-size: 2.5em; 
}

h2 { 
	font-size: 2.1em; 
}

h3 { 
	font-size: 1.8em; 
}

h4 { 
	font-size: 1.6em; 
}




h1, h2, h3 {
	margin-bottom:1.5em;
}


img {
	border-style :none;  /* works definitely better than border-width: 0 */
}

/*  CLEAR ALL */
div.clear {
	clear:both;
}



.mmenu-wrap {
	float:left;
	margin-right: 1em;
	width: 9em;  /* v20210607 was 10em; */
	padding-left: 1.2em;  /* v20210607  was 4.0em; */
}

.mmenu-wrap a.active {
	font-weight:bold;
	color:blue;
}

/* the vertical, fixed, menu */
table.mmenu {
	font-size: 14px;
	/* L.A. Generic font family values (5) MUST be unquoted */
	font-family: "Century Gothic", "Trebuchet MS", "Arial", "Tahoma", sans-serif, serif;
}

table.mmenu td { 
	height:2em;
}


/* *************** For Dynamic Menus .  No font stile or size here **************** */
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
  /*font-size: 14px;    of top -level menu. was 10pt */
  font-style: normal;
  font-weight: normal;
  color: #000000;
  text-decoration: none; /* do NOT underline the Main Menus */
}

div.menuBar {
  /* LA background-color: #e0e0e0; THIS IS THE BOX LIKE COLOR AROUND top MENU*/
  padding: 0px 2px 0px 0px; /* L.A. originally left val was 2px not 0 and top+bot were 4 not 0 */
  text-align: left; /* L.A. originally was center */
  text-decoration: none; /* do NOT underline the Main Menus */
}

div.menuBar a.menuButton {
  background-color: transparent;
  /*border: 1px solid #e0e0e0;  The border of the top level menu button*/
  color: #000000;  /*  color black. top level... m button */  
  cursor: default;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 0px; /* L.A. originally left val was 6px not 0*/
  position: relative;
  text-decoration: none; /* do NOT underline the Main Menus */
  top: 0px;
  z-index: 100;
}

div.menuBar a.menuButton:hover {
  background-color: transparent;
  /* border: 1px outset #e0e0e0; border when hovering over, now NONE. only change color */
  color: #009;

}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
  /* background-color: #5050f0;
  border: 1px inset #e0e0e0; */
  color: #000000;
  font-weight: bold;
  left: 1px;
  top: 1px;
}

div.menu {
  background-color: #e0e0e0;
  /* border: 2px outset #e0e0e0; */
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;   /* originally submenu is hidden */
  z-index: 101;
}

div.menu a.menuItem {
  color: #000000;
  cursor: default;
  display: block;
  /*padding: 3px 1em;  L.A.  Uncomment if you want indentation to R of main button*/  
  text-decoration: none;
  white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  background-color: #5050f0;  /* of submenu option (blueish..) */
  color: #ffffff;   /* submenu font color when hovering over (white) */

}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
  margin-right: -.75em;
}

div.menu div.menuItemSep {
  border: 1px inset #e0e0e0;
  margin: 4px 2px;
}
/* **************** End Menus *********************** */


/* TOP BANNER Areas */

.topBanner {
	margin: 2em 0em 1.5em 0em; /* v20210607 6em 0em 4em 0em; */
	background-color: #ffffff;
	color: gray;
	
	width: 76em; /* v20210607 was 80em; */
	
	border-width: 0;  /* ???? doesnt work? */
	border-style: none;  /* ? */
	border-color: white;  /* instead of black which makes it a boxlike */
}


.topBannerContent {
	margin-right:auto; margin-left:auto;
	text-align: center;
	font-size: 6em;
	font-weight: 800;
	font-family:'Calibri','Arial Rounded MT Bold','Century', 'Trebuchet MS';
	color:black;
	line-height: 0.8em;
}

.topBannerContent a {
	text-decoration: none;
	color: black;
}
.topSubtitle {
	line-height: 0.45em;
}

.topSubtitle .topSubtitle1, 
.topBannerContent .topSubtitle  .topSubtitle2 {
	font-size: 0.60em;
	font-weight: 600;
	color: #5a5841; /*#58462e; grey brown red */
	line-height: 1.40em;
}

/* main contents wrapper */

.contentsWrap {
	float:left;
	/*	
	background-image: url('../images/fokianou-backgr.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size:100% auto;
	*/
	color: black;
	font-size: 100%;
	width:58em;
	margin-left:auto; 
	margin-right:auto;
	margin-bottom: 5em; /* v20210607  was 10em; */
	
	padding: 0em 0.8em 0.8em 0em;
}

/* inner Contents Wrap */
.contentsInnerWrap {
	/*width:90%; */   /* turn to this one for backgrounds etc */
	width:100%;
	margin-left:auto;  margin-right:auto;
	/*background-color:gray;*/
}

/* main contents holder - we want it aligned over first menu */
.mainContents {
	margin: 0;
	color: black;
}


.dblspace {
	line-height:2em;
}

.trplspace {
	line-height:3em;
}


/* Best for larger BLOCKs.. */
.hilite-liteblue {
	background-color: #cde2fb;
	padding: 1em 2em;
	border-radius: 0.4em;
}


/* best NOT for BLOCK use... */
.hilite-white-on-black-inl {
	background-color: rgba(0,0,0,0.8);
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-blue-inl {
	background-color: rgba(80, 123, 210, 1);
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-darkgray-inl {
	background-color: darkgray;
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-litegray-inl {
	background-color: silver;
	color:white;
	padding: .1em .1em;
	border-radius: 0.1em;
}

.hilite-white-on-litegray-bold-inl {
	background-color: silver;
	color:white;
	font-weight:bold;
	padding: .1em .1em;
	border-radius: 0.1em;
}





/* ------ Announcement Boxes for Dates / Openings..------- */

/*   image in here... */
.img-cont-ann {
	width:32em;
	margin-top:1.5em;
	margin-bottom:2em;
	border:0;
}
.img-cont-ann-full {
	margin-top:1.5em;
	margin-bottom:2em;
	border:0;
}

/* Dates etc..  */
.box-ann {
	width:32em;
	background-color:rgba(176,196,222,0.1); /* used to be 0.3 */
	padding:1em 2em;
	border-radius: 0.4em;
}

.box-ann-lg {
	width:42em;
	background-color:rgba(176,196,222,0.1); /* used to be 0.3 */
	padding:1em 2em;
	border-radius: 0.4em;
}


.box-ann-full {
	background-color:rgba(176,196,222,0.1); /* used to be 0.3 */
	padding:1em 2em;
	border-radius: 0.4em;
}

.box-ann span:first-child,
.box-ann-lg span:first-child,
.box-ann-full span:first-child {
	font-weight:600;
	letter-spacing:.2em;
}
/* ------ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ------- */


/*  for Language icon  */
.lang-icon {
	margin:2em 0;
}

.lang-icon:hover {
	cursor:pointer;
}


.other-lang {
	display:none;
}

td#first {
	padding-left: 30px;
}

/* Bold emphasis */
.boldit {
	font-weight: bold;
	/*font-style: normal;*/ /* for no italic-izing as well */
} 
.bolditnorm {
	font-weight: bold;
	font-style: normal; /* for no italic-izing as well */
} 

.boldititalic {
	font-weight: bold;
	font-style: italic; /* italic-izing as well */
} 


.bolditmedium {
	font-weight: bold;
	font-size: 120%;
	/* font-style: normal; */  /* for no italic-izing as well */
} 

.bolditbig {
	font-weight: bold;
	font-size: 140%;
	/* font-style: normal; */  /* for no italic-izing as well */
} 

.bolditbig150 {
	font-weight: bold;
	font-size: 150%;
	/* font-style: normal; */  /* for no italic-izing as well */
} 

.bolditmediumnorm {
	font-weight: bold;
	font-size: 110%;
	font-style: normal;  /* for no italic-izing as well */
} 

.redit {
	color: red;
	font-style: normal;  /* for no italic-izing as well */
} 

.smallitalic {
	font-style: italic;
	font-size: 85%;
	
}
.regitalic {
	font-style: italic;
	
}

.italicmedium {
	font-style: italic;
	font-size: 120%;
}

.italicmedium110 {
	font-style: italic;
	font-size: 110%;
}

.regsmall75 {
	font-style: normal;
	font-size: 75%
}

.allcaps {
	text-transform:uppercase;
}

.fontsize110 {
	font-size: 110%;
}

/* News and Announcements  - serif family , slightly calligraphic..*/
em.news {
	font-style: italic;
	font-size: 90%;
	font-family: "Times New Roman", "Stone Serif", serif;
}

/* Bulleted list.  This is otherwise misbehaving; different ways yield different results */
ul.bullit {
	list-style-type: disc;
}
ul.circleit {
	list-style-type: circle;
}

/* No bullet lists */
ul.nobullit {
	list-style: none;
	padding-left: 1em;
	/*text-indent: -1em;*/ /* negative : causes 1st line in a block to be moved to LEFT (for indentation) */
}

/* Main for image */
div.mainimg {
margin: 20px 60px;
margin-left: 80px;  /* lazy override */
}


/* Main for text */
div.maintxt {
margin: 20px 60px;
padding-top: 30px;
}


/* xxxxxxxx   v20230401
a container to be used with a description of logo and an inline img. Many logos can fit next to each other 
 xxxxxxxxx 
 */
.logos-cont {
/* no margins enforced. add separately */
}

.logos-cont > span {
	font-style: italic;
	padding: 0.2em 0.1em 0.2em 0.4em;
}
.logos-cont > img {
	display:inline-block;   /* so you can def a img width as needed */
	vertical-align: middle;
	padding: 0.2em 0.4em 0.2em 0.1em;
}




/* xxxxxxx  H R s... xxxxxxxx */
div.hr-litegray {
	height:2px;
	background-color:#ddd;
}

div.hr-litegray-margins {
	height:2px;
	background-color:#ddd;
	margin: 1.5em 0;
}

hr.def {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid #777;
}


hr.full-spacy-top {
	width: 100%;
	margin-top: 60px;
	margin-bottom: 20px;
}

hr.half-spacy-top {
	width: 50%;
	margin-top: 60px;
	margin-bottom: 20px;
}
hr.sm-spacy-top {
	width: 20%;
	margin-top: 60px;
	margin-bottom: 20px;
}


hr.full-spacy-top-bottom {
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

hr.half-spacy-top-bottom {
	width: 50%;
	margin-top: 60px;
	margin-bottom: 60px;
}

hr.half-md-spacy-top-bottom {
	width: 50%;
	margin-top: 30px;
	margin-bottom: 30px;
}

hr.sm-spacy-top-bottom {
	width: 20%;
	margin-top: 60px;
	margin-bottom: 60px;
}



hr.full-spacy-bottom {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 60px;
}

hr.half-spacy-bottom {
	width: 50%;
	margin-top: 20px;
	margin-bottom: 60px;
}
hr.sm-spacy-bottom {
	width: 20%;
	margin-top: 20px;
	margin-bottom: 60px;
}

hr.full-sm-margins {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

hr.half-sm-margins {
	width: 50%;
	margin-top: 20px;
	margin-bottom: 20px;
}
hr.sm-sm-margins {
	width: 20%;
	margin-top: 20px;
	margin-bottom: 20px;
}


hr.liteblue {
	border-color: #00adec;
}

hr.litered {
	border-color: #f6acac;
}

hr.red {
	border-color: red;
}

hr.litered-dot {
	border-color: #f6acac;
	border-style: dotted;
}
hr.red-dot {
	border-color: red;
	border-style: dotted;
}

hr.litepurple {
	border-color: #e9d9f6;
}

hr.litegray {
	border-color: #777;
}

hr.litegray2 {
	border-color: #d7d6d6; /* liter gray */
}
hr.litegray3 {
	border-color: rgba(231, 231, 231, 0.3); /* lite liter gray */
}


hr.black {
	border-color: #000000;
}
hr.black-dot {
	border-color: #000000;
	border-style: dotted;	
}


/* paddings, margins.. */

.sm-pad {
	padding: 0.4em;
}

.md-pad {
	padding: 0.75em;
}

.x-pad {
 	padding: 1.3em;
}
 
.xx-pad {
  	padding: 2.0em;
}

.xxx-pad {
  	padding: 6.0em;
}

/* margins var */
.sm-tb-mar {
	margin: 0.4em 0;
}

.md-tb-mar {
	margin: 0.75em 0;
}

.x-tb-mar {
 	margin: 1.3em 0;
}
 
.xx-tb-mar {
  	margin: 2.0em 0;
}

.xxx3-tb-mar {
  	margin: 3.0em 0;
}
 
.xxx-tb-mar {
  	margin: 6.0em 0;
}


.sm-top-mar {
	margin-top: 0.4em;
}

.md-top-mar {
	margin-top: 0.75em;
}

.x-top-mar {
 	margin-top: 1.3em;
}
 
.xx-top-mar {
  	margin-top: 2.0em;
}


.xx-top-neg-mar {
  	margin-top: -2.0em;
}

.xxplus-top-mar {
  	margin-top: 4.0em;
}

.xxx-top-mar {
  	margin-top: 6.0em;
}

.sm-bot-mar {
	margin-bottom: 0.4em;
}

.md-bot-mar {
	margin-bottom: 0.75em;
}

.x-bot-mar {
 	margin-bottom: 1.3em;
}
 
.xx-bot-mar {
  	margin-bottom: 2.0em;
}
.xxx-bot-mar {
  	margin-bottom: 2.0em;
}


.xx-bot-neg-mar {
  	margin-bottom: -2.0em;
}


p.tab20 {
margin-left: 20px;
}


p.tab30 {
margin-left: 30px;
}

p.tab40 {
margin-left: 40px;
}

p.alignR {
text-align: right;
}

p.alignC {
text-align: center;
}

table.footerBanner {
	margin: 0;
	background-color:white; /* 00bfff blue is out*/ 
	color: gray;
	width: 100%;
	/*align: center; TBDel*/
	
	/* to center a table */
	margin-left:auto; 
	margin-right:auto;
	
	
	border-width: thin;  
	border-style: solid outset outset solid;  
	/*border-color: #00bfff; */ /* instead of black which makes it a boxlike */
	padding: 12px 12px 12px 12px;
	font-style: italic;
	font-size: 74%;
}

.ind30 {
	margin-left: 30px;
}

.ind60 {
	margin-left: 60px;
}

.ind30-bordL-red {
	margin-left: 30px;
	padding: 5px 10px;
	border-left: 1px dotted #F00;
}

.ind60-bordL-red {
	margin-left: 60px;
	padding: 5px 10px;
	border-left: 1px dotted #F00;
}

.ind30-bordL-bluegray {
	margin-left: 30px;
	padding: 5px 10px;
	border-left: 1px dotted #b0c4de;
}


.ind60-bordL-bluegray {
	margin-left: 60px;
	padding: 5px 10px;
	border-left: 1px dotted #b0c4de;
}

.underl {
text-decoration: underline;

}

blockquote,
blockquote > span,
blockquote > p,
blockquote > div
{
	color: #888; /* #202121 */
	font-size: larger;
	font-family: Helvetica, Georgia, Tahoma, sans-serif;
}


/* -------------------------------------------------------- */
/* a few Media queries just to ease the pain a bit..        */
/*  DO NOT PLACE BASIC ELEMENTS styles BELOW HERE           */
/* -------------------------------------------------------- */
/* smaller screens v20210607 */
@media only screen and (max-width : 767px) {
	.mmenu-wrap {
		width: 6.5em;
		padding-left: 0.5em;
	}

	.topBanner {
		margin: 2em 0em 1.5em 0em;
		width: 74em;
	}

	.contentsWrap {
		margin-bottom: 2em;
	}
}




/* -------------------------------------------------------- */
/* Photo GALLERY layout    (slimbox )                       */
/* -------------------------------------------------------- */
div.gallery-wrap {
	margin: 15px 5px;
	background-color: white;   
	border-radius:8px;
	border: 1px dotted #f7e8fa;   /* v20210607 no border fine too. */
}


div.thumbrow-wrap {
	padding: 0.4em;

}

div.thumb-wrap {
	float:left;
	padding: 0.6em 1em;
}



/* ---------------------------------------------------------- */
/* - Past Entry wrappers etc                                - */
/* ---------------------------------------------------------- */

div.past-entry {
	position:relative;
	width:28em;
	margin-right: 1em;
	margin-bottom: 2.5em;
	float:left;
}

div.past-entry-photos {
	display:none;
	background-color: silver;
	color:white;
	position:absolute;
	bottom:1em;
	left:0;
	width:5em;  
	padding-top:1em;
	padding-bottom:1em;
	text-align:center;
	border-radius: 0.2em;
}

div.past-entry-photos > a.stdtxt {
	color:white;
}

.past-entry-title {
	position: absolute;
	top: 60%;
	left: 1em;
	font-size: 120%;
	color: white;
	font-weight: bold;
}

.past-entry-title-nocolor {
	position: absolute;
	top: 60%;
	left: 1em;
	font-size: 120%;
	font-weight: bold;
}

.past-entry-title-blk {
	position: absolute;
	top: 60%;
	left: 1em;
	font-size: 120%;
	color: black;
	font-weight: bold;
}


/* Following 2 defs have a slight silver bak with transp. for past titles over images that are ..busy */
.past-entry-title-sil-bak {
	position: absolute;
	top: 60%;
	left: 1em;
	font-size: 120%;
	color: white;
	font-weight: bold;
	background-color: silver;
	opacity: 0.8;
	border-radius: 0.2em;
}

.past-entry-title-sil-bak-blk {
	position: absolute;
	top: 60%;
	left: 1em;
	font-size: 120%;
	color: black;
	font-weight: bold;
	background-color: silver;
	opacity: 0.8;
	border-radius: 0.2em;
}


/* a generic container hidden at first to be displayed later on */
.cont-showhide {
	display:none;
}


.ref-showhide {
	cursor: pointer;
}

.small, small {
	font-size:80%;
	font-weight: 400;
	color: #636c72;
}


.font-liteblue {
	color: #00adec;
}

.font-litered {
	color: #f6acac;
}

.font-red, .font-attn {
	color: red;
}


.font-litepurple {
	color: #e9d9f6;
}

.font-litegray {
	color: #777;
}

.font-litegray2 {
	color: #d7d6d6; /* liter gray */
}
.font-litegray3 {
	color: rgba(231, 231, 231, 0.3); /* lite liter gray */
}


.font-black {
	color: #000000;
}
.font-white, .font-bright {
	color: #fff;
}
.font-size-105 {
	font-size: 105%;
}
.font-size-100 {
	font-size: 100%;
}


/* animations */

/* home page image */
.animate-top-md-main { 
	position: relative; 
	animation: animatetopmain 1.8s;
}
@keyframes animatetopmain { 
	from { 
		top: -600px;
		opacity: 0; 
	} 
	to {
		top: 0;
		opacity: 1; 
	} 
}

/* home page logos.. FOLLOWS main.. */
.animate-left-main-logos {
	position: relative;
	animation: animateleftmainlogos 2.2s;
}
@keyframes animateleftmainlogos {
	from {
		left: -400px;
		opacity: 0;
	} 
	to {
		left: 0;
		opacity: 1;
	}
}

/* diagonal movement */
.animate-topdiag-main-logos {
	position: relative;
	animation: animatetopdiagtmainlogos 2.8s;
}
@keyframes animatetopdiagtmainlogos {
	from {
		top: -1200px;
		left: 1000px;
		opacity: 0;
	} 
	to {
		top: 0;
		left: 0;
		opacity: 1;
	}
}



/* generic */
.animate-top { 
	position: relative; 
	animation: animatetop 0.5s;
}
@keyframes animatetop { 
	from { 
		top: -300px;
		opacity: 0; 
	} 
	to {
		top: 0;
		opacity: 1; 
	} 
}
.animate-left {
	position: relative;
	animation: animateleft 0.5s;
}
@keyframes animateleft {
	from {
		left: -300px;
		opacity: 0;
	} 
	to {
		left: 0;
		opacity: 1;
	}
}

.animate-opac {
	animation: opac 0.8s;
}
@keyframes opac {
	from { 
		opacity: 0;
	} 
	to {
		opacity: 1;
	}
}