/*
	CSS for Myhalki.com
	Copyright(c) 2011-2019 S. Camateros
*/
html
	{
	height: 100%;
	width:  100%;
	margin: 0px;
	padding: 0px;
	}
	
@font-face{
    font-family: Qlassik;
    src: url('qlassik_tb.ttf'),
	url('qlassik_tb.svg'),
    url('qlassik_tb.eot');
}
	
body 
	{
	height: 100%; 
	width:  100%;
	margin: 0px;
	padding: 0px;

	background-color: silver;
/*	background-image: url("img/FrontPage.jpg"); */ 
/*	background-image: url("img/001.jpg"); */
	background-image: url("img/FromVaggeli1.jpg"); 
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	font-family: Qlassik, "Myriad Web", Syntax, Verdana, sans-serif;
	}
	
a
	{
	text-decoration: none;
	}

a:link, a:visited
	{
	color: black;
	}

a:hover, a:active
	{
	text-decoration: underline;
	font-weight: bold;
	color: red /*black*/;
	}

table {
    border-collapse: collapse;
	}

table, td, th 
	{
    border: 1px solid black;
	}

img {
  max-height: 100%;
  width: auto;
}
	
/*------------------- Overall Page, Logo, Navigation ----------------------------------*/
*     {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
    }
  
#page	/* contains everything */
	{
	position: relative;
	height: 100%;
	width:  100%;
	}
	
#topContainer	/* contains logo */
	{
	position: absolute;
	top: 0;
	left: 0;
	
	height: 8%;
	width: 100%;
	}
	
#logo
	{
	position: absolute;
	top: 0;
	left: 0;
	
	padding: 0.5%;
	
	color: white;
	font-size: 500%;
	}

#logoD
	{
	position: absolute;
	top: 0;
	left: 0;
	
	padding: 0.5%;
	
	color: white;
	font-size: 800%;
	}

#middleContainer	/* contains navigation and content */
	{
	position: relative;
	top: 4%;
	left: 0;
	
	height: 90%;
	width: 100%;
	}
	
.spacing 
	{
	line-height: 16pt;
	} 

.grfont
	{
	font-family: "Arial Unicode MS Regular", sans-serif;
	font-size: large;
	}
	
.navigation
	{
    position: absolute;
	top: -4%;
	right: 2%;

	display: block;
	}

.navigationD	/* Devices, phones, etc. FOR LATER */
	{
    position: absolute;
	top: -4%;
	right: 2%;
	
	display: block;
	}

.navigation li 
	{
    position: relative;
    padding: 0 3px;
    margin: 0 0;

	font-size: 200%;
	font-weight: 550;
	font-variant: small-caps;
 
	text-align: center;


/*	color: black;	*/
/*  border: 1px #585858 solid;	*/
/*	border-radius: 0; 					/* for round edges 5px; */

/*	background: #d3eefb;				/* Old browsers */
/*	background: -moz-linear-gradient(left,  #d3eefb 0%, #e9f6fd 52%); /* FF3.6+ */
/*	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d3eefb), color-stop(52%,#e9f6fd)); /* Chrome,Safari4+ */
/*	background: -webkit-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* Chrome10+,Safari5.1+ */
/*	background: -o-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* Opera 11.10+ */
/*	background: -ms-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* IE10+ */
/*	background: linear-gradient(to right,  #d3eefb 0%,#e9f6fd 52%); /* W3C */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3eefb', endColorstr='#e9f6fd',GradientType=1 ); /* IE6-9 */

	color: white;
	display: inline-block;
	}

.navigationD li 	/* Devices, FOR LATER */	
	{
    position: relative;
    padding: 0 3px;
    margin: 0 0;

	font-size: 220%;
	font-weight: 550;
	font-variant: small-caps;

    text-align: center;

/*	color: black;
/*  border: 1px #585858 solid;
/*	border-radius: 0; /* for round edges 5px; */

/*	background: #d3eefb; /* Old browsers */
/*	background: -moz-linear-gradient(left,  #d3eefb 0%, #e9f6fd 52%); /* FF3.6+ */
/*	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d3eefb), color-stop(52%,#e9f6fd)); /* Chrome,Safari4+ */
/*	background: -webkit-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* Chrome10+,Safari5.1+ */
/*	background: -o-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* Opera 11.10+ */
/*	background: -ms-linear-gradient(left,  #d3eefb 0%,#e9f6fd 52%); /* IE10+ */
/*	background: linear-gradient(to right,  #d3eefb 0%,#e9f6fd 52%); /* W3C */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3eefb', endColorstr='#e9f6fd',GradientType=1 ); /* IE6-9 */

	color: white;
	display: inline-block;
	}

/*----------------------------- Content ----------------------------------*/

#contentContainer	/* contains the actual content (filler) and the links */
	{
	position: absolute;
	top: 12%;
	left: 5%;
	
	height: 88%;
	width: 90%;
	line-height: 120%;

	font-size: 140%;
	letter-spacing: 0.03em;
	color: black;
	}
	
#contentContainerD	/* For Devices */
	{
	position: absolute;
	top: 12%;
	left: 4%;
	
	height: 88%;
	width: 92%;
	line-height: 120%;

	font-size: 160%;
	letter-spacing: 0.03em;
	color: black;
	}
	
#contentContainerP	/* For iPad */
	{
	position: absolute;
	top: 12%;
	left: 1%;
	
	height: 88%;
	width: 99%;
	line-height: 120%;

	font-size: 120%;
	letter-spacing: 0.03em;
	color: black;
	}
	
.fullwrap
	{
	position: absolute;
	top: 0;
	left: 0;
	
	height: 98%; 
	width: 98%;

	padding: 1%;
	
	background: white;
	}
	
	
#aboutPicture
	{
	height: 100%; 
	width: 52%; 

	float: right;

	overflow: hidden;
	}
	
#aboutText
	{
	height: 100%; 
	width: 46%; 

	padding: 0 1%; 
	border-top: 1px solid black; 
	border-right: 1px solid black; 

	overflow: auto;

	background: linear-gradient(to top,  #fcf3cf 0%, white 100%);
	}
	
#linksPicture
	{
	height: 100%; 
	width: 49%; 

	float: right;

	overflow: hidden;
	}
	
#linksText
	{
	height: 100%;
	width: 50%; 

	padding: 0 1%;
	border-top: 1px solid black; 
	border-right: 1px solid black; 

	line-height: 24pt;

	background: linear-gradient(to top, #B0E0E6 0%, white 80%);

	overflow: auto;
	}

.moreLinks
	{
    position: relative;

	padding: 1%;
	margin-top: auto;
	margin-bottom: auto;

	list-style: none;

	line-height: 20pt;
	}

.moreLinks li 
	{
    position: relative;

	padding: 1.5% 0;
    margin: 5px 0px;

    display: block;

	font-size: 100%;
	font-style: italic;
    text-align: center;
	color: #424242;
	}
	
.smallerLinks
	{
    position: relative;

	padding: 2px;
	margin-top: auto;
	margin-bottom: auto;

	list-style: none;

    line-height: 8px;
	}

.smallerLinks li 
	{
    position: relative;

	padding: 2px 0;
    margin: 2px 0;

    display: block;

	font-size: 150%;
	font-style: italic;
    text-align: center;
	color: #424242;
	}
	
/*--------------------------------------------------------------------------*/
#moreLinksContainer
	{
    position: relative;

	height: 100%; 
	width: 15.5%;
	
	margin-right: 0.5%;
	
	float: left; 

	overflow: auto;
	}
	
#moreContent		/* contains "More" text and picture for each "More" link */
	{
	height: 100%;
	}

/*--------------------------------------------------------------------------*/
#moreContentPicture
	{
	height: 100%; 
	width: 50%;
	
	float: right;

	overflow: hidden;
	}

#moreContentEmpty
	{
	height: 0.1%; 
	width: 0.1%; 

	float: right;
	}
	
#moreContentAll		/* Covers all of moreContent but overflows as needed */
	{
	height:100%;
	width: 84%;
	
	float: right;
	
	overflow: auto;

	font-size: 150%;
	}

#moreContentOther
	{
	height: 100%; 
	width: 40%; 

	float: right;

	overflow: auto;
	}

#moreContentText
	{
	height: 100%; 
	width: 33%;
	
	padding: 0 1%; 
	
	border-top: 1px solid black; 
	border-right: 1px solid black; 
	
	overflow: auto;	

	background: linear-gradient(to top,  #fcf3cf 0%, white 100%) !important;
	}

#moreContentAllText
	{
	height: 100%; 
	width: 83%;
	
	padding: 0 1%; 
	
	border-top: 1px solid black; 
	border-right: 1px solid black; 
	
	overflow: auto;	

/*	background: linear-gradient(to top, darkgray 0%, white 100%); */
	}
	
/* -------------- 1966 ------------------- */	
#Halki1966Text
	{
	height: 100%; 
	width: 38%; 

	border-top: 1px solid black; 
	border-right: 1px solid black; 

	overflow: auto;

	background: linear-gradient(to top,  #fcf3cf 0%, white 100%);
	}
	
#Halki1966Picture
	{
	height: 100%; 
	width: 62%; 

	float: right;

	overflow: hidden;
	}
	
/* -------------- Contact ------------------*/ 	
#contactWrap
	{
	display:block;
	
	height: 90%; 
	width: 70%;
	padding: 2%;
	background: white;

    margin-left:auto;
	margin-right:auto;
	}
	
#contactPicture
	{
	height: 100%; 
	width: 50%; 

	float: right;

	overflow: hidden;
	}
	
#contactText
	{
	height: 100%; 
	width: 50%;
	
	overflow: auto;
	}
	
/*------------------- Bottom part, Title, copyright, certification ------------*/

#copyrightAndCertificationContainer	/* conains title, copyright, certification */
	{
	position: absolute;
	top: 94%;
	left: 0;
	
	height: 6%;
	width: 100%;

	color: white;
	clear: both;
	}
	
#title
	{
	height: 10%;

	margin: 0.5% 1%;
	
	font-size: larger;
	font-style: italic;
	}

#copyright
	{
	height: 10%;

	margin: 0.5%;

	font-size: 90%;
	}

#certification
	{
	height: 10%;

	margin: 0 0.5%;

	float: right;
	}
	
/*---------- Miscellaneous appearance -----------------*/
.lightblue {
  background-color : #66FFFF;
}
.lightyellow {
  background-color : #FFFF99; /* #FFFFCC; */
}
.lightbeige {
  background-color : #FFCC66;
}
.lightgreen {
  background-color : #99FF99;
}
.lightgrey {
  background-color : #D3D3D3;
}
.lightpurple {
  background-color : #9999CC;
}
.lightsalmon {
  background-color : #FF9966;
}
.lightcyan {
  background-color : #E0FFFF;
}
.lightolive {
  background-color : #CCCC00;
}
.orange {
  background-color : #FF9900;
}
.pink {
  background-color : #FFCCFF;
}
.olive {
  background-color : #808000;
}
.white {
  background-color : #FFFFFF;
}

.oddraw {
  background-color : #D3D3D3;
}

.center
{
margin-left:auto;
margin-right:auto;
width:99%;
}

.centertext
{
  text-align: center;
}

.boldtext
{
  font-weight: bold;
}

.smallertext
{
  font-size: smaller;
}

.floatright {
 float: right;
 clear: both;
}