/* ------ Section 1 - Global Body, Font and Link Settings ------ */ 

/*Edited for new body bg 12/11/2020*/

* {
	box-sizing: border-box;
}
body {
background: url(../image-files/body-bg2.jpg) top center no-repeat #fff; 
margin: 0;
padding: 0;
font-family: Verdana, Arial, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
color: #000;
font-size: 100%;
}

h2, h3, h4, h5, h6 {
background-color: transparent;
color: #000066;
clear: both;
}

h2, h3, h4, h5, h6 {
margin-top: 26px;
}

h1 {
margin-top: 5px;
font-family: Verdana, Arial, sans-serif;
color: darkblue;
text-align: center;
}

h2 {
font-family:  Verdana, Arial, sans-serif;
border-bottom: 1px solid #8f8fb3;

}

h3 {
font-family:  Verdana, Arial, sans-serif;
border-bottom: 0 solid #8f8fb3;
text-align: center;
}

blockquote {
margin: 12px 56px;
color: #006;
font-size: 100%;
line-height: 20px;
font-family: 'Courier New', Courier, monospace;
}

code {
color: navy;
}

img {
border: 0 solid #ddd;
}

a:link img {
border: 0;
}


/* -- General Link Styling -- */

a:link {
color: blue; 
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

a:hover {/*<img src="../image-files/rss.jpg" width="138" height="161" alt="" border="0">*/
color: red;
text-decoration: underline;
}



/* ------ Section 3 - Page Structure Details ------ */



#PageWrapper {
background: rgba(255, 255,255,0.2);
width:95%;
max-width: 1100px;
border: 2px solid darkblue; 
border-radius:6px;
padding:0;
margin: 10px auto;
}


#Header {
position: relative;
height: 300px;
background: url(../image-files/cyprus-header3.png) center no-repeat;
background-size:contain;
border-bottom:3px solid darkblue;
}

img {max-width:100%; height:auto;}

#ContentWrapper {
width: 100%;
padding: 0;
background: transparent;
}
/*
#ContentWrapper::after {
    content: "";
    display: table;
    clear: both;
 }
*/
#NavColumn {
display:none;
}

#ContentColumn {
display:inline-block;
width: calc(100% - 340px);
padding:10px 15px;
float:left;
background:white;
border-right: 1px dotted #eee;
 }

#ExtraColumn {
display:inline-block;
float: left;
width: 340px; 
padding: 10px 15px;
background:white;              
}


#Footer {
clear: both;
width: 100%;
padding: 8px 0;
border-top: 1px solid #80B9E5;
background-color: #80B9E5;
text-align: center;
font-size: 85%;
}

#NavColumn {
font-size: 90%;
color: #000066;
}

#ExtraColumn {
font-size: 90%;
}

#NavColumn h4 {
font-size: 90%;
color: #000066;
margin-top: 0;
}

#ExtraColumn h4 {
font-size: 90%;
color: #000066;
margin-top: 0;
}

.Liner {
padding: 0;
}

#Header .Liner,
#Footer .Liner {
padding: 0;
margin: 0;
}



/* ------ Section 4 - Left Column Navigation ------ */

.Navigation {
width: 100%;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color: transparent;
}

/* -- Nav Headers -- */

.Navigation h3 {
padding: 0;
font-size: 110%;
color: #fff;
border-bottom: 1px solid #fff;
margin: 12px 0;
}

/* -- Nav List -- */

.Navigation ul {
list-style-type: none;
padding: 0 0 8px 5px;
margin: -6px 0 0 0;
}

.Navigation li {
background-color: #80B9E5;        /* tan, for button and RSS box backgrounds -- */
border: 1px solid #8f8fb3;
margin-bottom: 3px;
}

/* -- Navigation Link styles -- */

.Navigation a:link {
color: #000066;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:visited {
color: purple;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:hover {
color: red;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
background-color: #d3e4fb;   
text-decoration: underline;
}



/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
color: #000066;
text-decoration: none;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: red;
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
}

.ExtraNav ul {
list-style-type: none;
padding: 0;
}

.ExtraNav ul li {
display: inline;
background-color: #80B9E5;
text-align: center;
}

.ExtraNav a:link {
color: #000066;
text-decoration: none;
text-align: center;
padding: 0 4px;
}

.ExtraNav a:visited {
color: purple;
text-decoration: none;
}

.ExtraNav a:hover {
color: red;
background-color: #d3e4fb;
text-decoration: underline;
}

#Header .ExtraNav {
font-size: 85%;
position: absolute;
bottom: 0;
right: 0;
}

#Header .ExtraNav ul { 
margin: 0;
}

#Footer .ExtraNav {
margin: 12px auto;
background-color: transparent;
}



/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #49d0fc;
width: 85%;
border: 1px solid #8f8fb3;
margin: 18px auto 24px auto;
padding: 4px;
color: black;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {          
background-color: #ddd;
width: 24%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 18px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 5px;
background-color: #d3e4fb;
border: 0px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}

.ReturnToNavBox {
background-color: #fff;
width: 95%;
border-top: 1px solid #8f8fb3;
border-bottom: 1px solid #8f8fb3;
margin: 0 auto 12px auto;
padding: 4px;
}

/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: #80B9E5;
border: 1px solid #8f8fb3;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #1d487e;
line-height: 120%;
text-align: center;
}



/* ------ Section 7 - Frequently Used Styles ------ */

.Clear,
.clear {
clear: both;
}

.Caption {
font-size: 85%;
font-weight: bold;
color: #000;
display: block;
line-height: 150%;
margin-bottom:10px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}



/***************
TOPNAV AND DROPDOWN STYLES
***************/

/***********************
Styles for down arrow (for both desktop and mobile views)
***********************/

.arrow {
	display:inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #fff;
}


.sticky-nav { /*used if we require our nav to be sticky */
	z-index:10000;
	color:#ccc;
	border-bottom:2px solid #123456;
	background: darkred;
    background-image: linear-gradient(darkred, orange);
	width:100%;
	height:55px;
	padding:2px;
	text-align:center;
	position:relative;
	top:0;
	margin-top:0;
}

.table {
    display: table;   /* Allows the navlink centering to work */
    margin: 0 auto;
}

.topnav {
  font-family: georgia, serif;
  font-size: 1rem;
  overflow: hidden;
  background: darkblue;
  background-image: linear-gradient(darkblue, blue);
  margin:0;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  margin-right:5px;
  border-radius:5px;
  text-align: center;
  padding: 13px 8px 11px 8px;
  text-decoration: none;
}


.topnav a:hover {
  background-color: #ddd;
  color: #003;
}

.active {
  background-color: darkblue;
  ;
  font-weight:bold;
}

.topnav .icon {
  display: none;
}


/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  margin-top:1px;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-family: georgia, serif;
  font-size: 1rem; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: transparent; 
  border-radius:5px;
  margin: 0 0 2px 0;
}



.dropdown-content > div {
	width:100%;
	background:#eee;
	padding-top:6px;
	padding-left:10px;
	font-size:1rem;
	text-align:left !important;
	font-weight:bold;
	margin:6px 0;
	border-top:1px solid #999;
	color:#000;

}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
 font-family: georgia, serif;
  font-size: 1rem; 
  border-top:2px solid #123456;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 4px 10px;
  margin:4px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: darkblue;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #eee;
  color:black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */


.dropdown:hover .dropdown-content {
  display: block;
}



@media screen and (max-width: 800px) {

/**************
This stops the nav being "sticky" on phones and tablets. If we have a lot of links, 
we don't want those to be cut off on small screens.

*************/
.sticky-nav {
	position:initial !important;
	height:55px;

	}

.hamburger {
display:inline-block;
background: url(../image-files/sv-hamburger.png) transparent center no-repeat;
width:29px;
height:15px;
}

.table {
    display: block;   /* Allow the centering to work */
    margin: 0;
}

.active {
  
  padding-bottom:20px;
}

.topnav a:not(:first-child) {
	display: none;
}
  
.topnav a.icon {
    float: right;
    display: block;
}

.topnav.responsive {
	
	position: relative;	
	margin-left:-2px;
	margin-right:-2px;
	z-index: 99999;
}


.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}

.topnav.responsive a {
	
    float: none;
    display: block;
    text-align: left;
    border:1px solid #666;
border-radius:3px;
margin:5px 5px;
   
}



/* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look
good on small screens (display the links vertically instead of horizontally) */

	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    border:1px solid #ccc;
    text-align: left;
    margin:10px 30px 10px 10px;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {
  	position: relative; 
  	background-color:#c1c1c1; 
  	padding: 2px; 
  	margin-top:2px;}

  	
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    border:1px solid white;
    width: 80%;
    margin: 10px auto;
    text-align: left;
    font-weight:bold;
    color:#f0f0f0;

  }

  .dropdown-content a:link {
  	background-color: #aaa;
  	display:block;
  	margin-top:10px !important;
  	margin-bottom:10px !important;
  }

  .dropdown-content a:hover {
  background-color: darkblue;
  color: white;
}


/** SET TEMPLATE LAYOUT TO MOBILE VIEW *****/

#PageWrapper {
width:98%;
max-width: 98%;
border: 1px solid darkblue; 
border-radius:0;
padding:0;
margin: 10px auto;
}


#Header {
position: relative;
height: 200px;
background: url(../image-files/cyprus-header3.png) center no-repeat;
background-size:contain;
}

#ContentWrapper {
width: 100%;
padding: 0;
background: #fff;
}

#NavColumn {
display:none;
}

#ContentColumn {
display:block;
width: 100%;
padding:10px 10px;
float:none;
background:white;
border-right:none;
 }

#ExtraColumn {
display:block;
float: none;
width: 100%; 
padding: 10px 10px;
background:white;              
}


#Footer {
clear: both;
width: 100%;
padding: 8px 0;
border-top: 1px solid #80B9E5;
background-color: #80B9E5;
text-align: center;
font-size: 85%;
}

#NavColumn {
font-size: 90%;
color: #000066;
}

#ExtraColumn {
font-size: 90%;
}

}

/*Styles for the return to top button */

#btnTop{
display:none;
position:fixed;
font-size: 2rem;
line-height: 2rem;
bottom:50px;
right:5px;
z-index:99999;
border:none;
outline:none;
background-color:#000;
opacity:.6;
color:#fff;
cursor:pointer;
padding:10px;
border-radius:50%;
}
#btnTop:hover{
background-color:#333;
}


/************************
New CSS for recent work in September 2020
*************************/

/*****************
STYLE HTML5 SEMANTIC ELEMENTS. This is done because 
IE 10 and 11 do not place these as block by default
******************/
a:link img{
  opacity:1;
  transition:opacity .25s ease-in-out;
  -moz-transition:opacity .25s ease-in-out;
  -webkit-transition:opacity .25s ease-in-out;
}

a:hover img{opacity:.6;}


img {
  max-width:100%;
  height:auto;
}


figure { /* this over rides the browser default of 40px margin so we can use our preferred paddings and margins */
  display:inline-block;
  margin:10px;
  padding:0;
}

header, 
footer, 
main, 
section {
  display:block;
  height:auto;
}

section::after {
  content: "";
  display: table;
  clear:both;
}



footer {
  text-align:center;
}

details {
  display:block;
  clear:both;
  width:100%;
}
figcaption {
  font-size:13px;
  font-style:italic;
  text-align: center;
  margin-top:0;
}

aside {
  display:inline-block;
}

mark {
  font-size:30px;
  color:#ff0; 
  background:transparent;
  text-shadow:1px 1px #000;
  padding:0; 
  border-radius:3px;
}

/*************************
CSS FOR RESPONIVE VIDEO WRAPPER
*************************/

.video-wrapper {
  text-align:center;
  width: 640px;
  max-width: 100%;
  margin:20px auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*************************
GALLERY CSS
************************/


/* The overlap class is added to a figcaption tag, to give it some styling and overlapping of the image */
.overlap {
  width:80%;
  max-width:300px;
  margin:0 auto -35px auto;
  border:1px solid #ccc;
  padding:15px 6px;
  background: rgba(255,255,255, .8);
  position: relative;
  top:-35px;
}

/***********************
GALLERY STYLES FOR SINGLE COLUMN PAGE. 2 COLUMN IS AFTER THIS GROUP OF STYLES
***********************/

.gallery-s figcaption, 
.gallery-m figcaption, 
.gallery-l figcaption {
  margin-top:-10px;
  padding:15px 5px;
}

.gallery-s h4, 
.gallery-m h4, 
.gallery-l h4 {
  margin:10px auto;
}


.gallery-s, 
.gallery-m, 
.gallery-l {
  border:1px solid #ccc;
  text-align:center;
  background:#fff;
  margin:20px 0;
  padding-bottom:30px;
}

.gallery-s p, 
.gallery-m p, 
.gallery-l p {
  font-size:14px;
  color:black;
  text-align:left;
  padding-left:70px;
  padding-right:70px;
}

.gallery::after,
.gallery-s::after,
.gallery-m::after,
.gallery-l::after{
  content: "";
  display: table;
  clear:both;
}

/*****************/
 .gallery-s figure {
     vertical-align: text-top;
     max-width:160px;
     margin-bottom:10px;
     margin:10px;
}

.gallery-s img {
    border-radius:5px;
    margin:10px 5px;
    max-width:150px;
    max-height:150px;
    padding:2px;
    border:1px solid #ddd;
    background: #fff;
    
}

.gallery-s figcaption {
  max-width:150px;
  
}



 /************
 MEDIUM SIZED IMAGE GALLERY
 ************/


.gallery-m img {
    border-radius:5px;
    max-width:200px;
    max-height:200px;
    padding:2px;
    border:1px solid #ddd;
    background: #fff;
}

 .gallery-m figure {
     vertical-align: text-top;
     max-width:200px;
     margin-bottom:10px;
 }

 .gallery-m figcaption {
  max-width:200px;
  
}


 /************
 LARGER SIZED IMAGE GALLERY
 ************/

.gallery-l {  
   /* margin:20px auto; */
}
.gallery-l img {
    border-radius:5px;
    margin:10px 5px;
    max-width:260px;
    max-height:260px;
    padding:2px;
    border:1px solid #aaa !important;
    background: #fff;
    box-shadow: 2px 2px 2px #333;
}

 .gallery-l figure {  
     vertical-align: text-top;
     max-width:260px !important;
     /*overflow:hidden;*/
     margin-bottom:10px;
     
 }

 .gallery-l figcaption {
  max-width:260px;

}