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

* {
	box-sizing: border-box;
}
body {
background: url(../image-files/body-bg2.jpg) top center no-repeat #fff; 
background
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, san-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 .BreadcrumbBlock .BreadcrumbTiers {
list-style: none;
margin:30px 0 0;
padding:0;
}

#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
display: inline-block;
}

#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
padding: 15px;
color: black;
content: ">";
}

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