* {
    box-sizing: border-box;
}


/*  clearfix can be used to force div to wrap around floating content */
/*  For example on the map card */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/*.clearfix {display: inline-block;}*/

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




/* Add a gray background color with some padding */
/* Note that if you want to maintain consistency yoy need to edit the wyzz editarea style sheet */
body {
    padding-left: 20px;
	padding-right:20px;
    background: #f1f1f1;
    color: #0000A0;
    font-family: Arial;
    font-size:16px;
}

.overlay_back {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgb(0,0,0,0.4);
	z-index:99990;
}

.overlay_fore {
	position: absolute;
	width:90%;
	max-width:600px;
	top: 50%;
	left:50%;
	border-radius: 8px;
	background-color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	
}

.overlay_close {
	position:absolute;
	top:20px;
	right:20px;
	width:40px;
	height:40px;
	background-color:rgb(0,0,0,0.2);
	border-radius: 20px;
	background-image:url("pix/closex.png"); )
	background-repeat:no-repeat; 
	background-position:center;
	/*background-size:1.2em 1.2em;*/
	background-size: 90%;
}
.overlay_close:hover {
	background-color:rgb(0,0,0,0.6); 
	cursor:pointer;
}



/* Header/Blog Title */
.header { 
	position:fixed;
	top:0px;
	left:30px;
	right:30px;
	height:240px;
    text-align: center;
    background-color: #ffffff;
	color:#0000A0;
 	font_color:#0000A0;
    border-radius:8px;
	z-index:9999;
}

.header_banner {
	background-image:url("pix/skybanner.png");
	background-position:top;
    background-repeat:no-repeat;
 }


.main {
	position:relative;
	width: 100%;
	margin-top:250px;
	
}


.htlogo { 
	position:absolute:
	top:10px;
	left:0px;
	width:200px; 
	height:200px; 
	background-image:url("pix/htcross200.png"); 
	background-repeat:no-repeat; 
	background-position:left top;
	background-position:center;
}
.name { 
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	height:240px; 
	text-align:center; 
	/*overflow:hidden; */
	font-color:#0000A0;
	color:#0000A0;
} 
.name_offset {
	position: absolute;
	top:0px;
	left:200px;
	right:0px;
	height:240px; 
	text-align:center; 
	/*overflow:hidden; */
	font-color:#0000A0;
	color:#0000A0;
}
	
.htlabel { 
	position:absolute;
	top:10px;
	left:0px;
	right:0px;
	height:120px; 
	font-size:2.2em;
	font-weight:bold;
	overflow:hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/*display:table-cell;*/
	/*text-align:center;*/
	/*vertical-align:bottom;*/
}

.htlabel_pix {
	background-image:url("");
	background-position:top;
    background-repeat:no-repeat;
	background-size:contain;
 }

.htstatement {
	position:absolute;
	bottom:40px;
	left:0px;
	right:0px;
	height:70px;
	padding-top:8px;
	font-size:1.4em;
	overflow:hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/*text-align:center;*/
	/*vertical-align:top;*/
}

.flexbox {
	display: flex;
}
.tightbox {
	display: block;
}

      
.menubar {
	/*position:relative;*/
	position:absolute;
	bottom:8px;
	left:8px;
	right:8px;
	padding:0px 20px;
	/*height:40px*/;
	height:1px;
	color:#ffffff; 
	font-size:18px;
	z-index: 99;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.menubar_full {
	/*float:left;*/
	/*display:block;*/
	/*width:95%;*/
	display:flex;
}

.menubar_min {
	position:absolute;
	left: 20px;
	bottom: 8px;
	/* float:left; */
	display: none;
	width: 250px;
	color:#ffffff; 
}

.menubar_min_icon {
	float:left;
	height:40px;
	width:40px;
	border-radius:8px;
	background-color:#0000A0;
	background-image:url("pix/minmenu.png"); 
	background-repeat:no-repeat; 
	background-position:left top;
	background-position:center;
}

.menubar_min_icon:hover {
	cursor:pointer;
	background-color:#800080;
	background-image:url("pix/minmenu.png"); 
}

.clickable {
}

.clickable:hover {
	background-color:#800080; 
	cursor:pointer;
}


div.menuboxL {
	float:left;
	height:3em;
}

div.menuboxR {
	float:none;
	height:3em;
}


div.menuitem { 
	float:left; 
	clear:none;
	position: relative;
	margin:0px 3px; 
	padding:3px 6px; 
	border-radius:10px; 
	background-color:#0000A0; 
}
div.menuitem:hover {
	background-color:#800080; 
	cursor:pointer;
}



.menupopup {	
	display:none;
	position: absolute;
	padding:3px 6px;
	border-radius:10px; 
	background-color:#0000A0; 
	text-align:left;
	border:1.5px solid #ffffff;
	padding-bottom:0.8em;
	z-index:1000;
}

li.menuitemname { 
	list-style-type: none;
	margin:0px 8px;
	border-radius:10px; 
	background-color:#0000A0; 
	text-align:center;
	margin-bottom:0.8em;
}

div.menuitemclose {
	float:right;
	margin-right:2px;
	margin-top:0.5em;
	background-color:#0000A0;
	background-image:url("pix/closex.png"); 
	background-repeat:no-repeat; 
	background-position:center;
	background-size:1.2em 1.2em;
	border-radius:8px;
	width:1.3em;
	height:1.3em;
}
div.menuitemclose:hover {
	background-color:#800080;
	background-image:url("pix/closex.png"); 
	cursor:pointer;
}
div.menuitemhidden {
	color:#555555;
	background-color:#a5a5b8;
}

div.menuitemhidden:hover {
	background-color:#a390a3;
}

li.menuitem {
	list-style-type: none;
	margin:0px 8px;
}

li.menuitem:hover {
	background-color:#800080; 
	cursor:pointer;
}

li.menuitemhidden {
	color:#555555;
	background-color:#a5a5b8;
}

li.menuitemhidden:hover {
	background-color:#a390a3;
}


/* Create two unequal columns that floats next to each other */
/* Used by frontpage and extended standard and minimal pages */
/* Left column */
.leftcolumn {   
    float: left;
    width: 75%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 25%;
    padding-left: 20px;
}

/* Create a full width column used by basic pages */
.singlecolumn {
    float: left;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}


/* image */
.imaged {
    background-color: #aaaaaa;
    width: 100%;
    padding: 20px;
    background-repeat:no-repeat;
    background-size: contain;
    background-position:center;
}

/* Add a card effect for articles */
.card {
    background-color: #efefff;
    padding: 20px;
    margin-top: 20px;
    border-radius:8px;
}


/* Edit body */
.editbody {
     background-color: #efefff;
     padding: 20px;
     margin-top: 20px;
}

/* Card edit button */
.cardeditbtn {
	font-size:0.8em;
	padding:4px 6px;
	float:right;
	border-radius:10px; 
	color:white;
	background-color:#0000A0; 
	opacity:0.5;
}
.cardeditbtn:hover {
	background-color:#800080; 
	cursor:pointer;
	opacity:0.5; 
}



/* Clear floats after the columns */
.pagebody:after {
    content: "";
    display: table;
    clear: both;
}

/* generic close button div */
div.closebtn {
	float:right;
	margin-right:4px;
	margin-top:0.5em;
	background-color:#0000A0;
	background-image:url("pix/closex.png"); 
	background-repeat:no-repeat; 
	background-position:center;
	background-size:1.2em 1.2em;
	border-radius:8px;
	width:1.3em;
	height:1.3em;
}
div.closebtn:hover {
	background-color:#800080;
	background-image:url("pix/closex.png"); 
	cursor:pointer;
}
	
td.alignleft {
	text-align:left;
	padding-right:2em;
}

td.alignright {
	text-align:right;
	padding-right:2em;
}

td.aligncentre {
	text-align:center;
	padding-right:2em;
}

	
/* Close button div */
/* used to close pages */
.close {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

/* Footer */
.footer {
	position:relative;
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}

.textbutton {
	margin:0px auto;
	font-size:0.9em;
	text-align:center;
}
.textbutton:hover {
	color: white;
	background-color:#800080; 	
	cursor:pointer;
}

/* Collapsable cards details */
.collapse_expanded {
	position:relative;
}
.collapse_collapsed {
	position:relative;
}
.collapse_collapse_icon {
	position:absolute;
	top:-1.8em;
	right:2px;
	background-image:url("pix/collapse.png");
	background-repeat:no-repeat; 
	background-position:center;
	background-size:3.0em 1.5em;
	border-radius:8px;
	width:3.2em;
	height:1.6em;
	opacity:0.5;	
}
.collapse_collapse_icon:hover {
	background-color:#800080;
	background-image:url("pix/collapse.png");
	cursor:pointer;
}
.collapse_expand_icon {
	position:absolute;
	bottom:-1.8em;
	right:2px;
	background-image:url("pix/expand.png");
	background-repeat:no-repeat; 
	background-position:center;
	background-size:3.0em 1.5em;
	border-radius:8px;
	width:3.2em;
	height:1.6em;
	opacity:0.5;
}
.collapse_expand_icon:hover {
	background-color:#800080;
	background-image:url("pix/expand.png");
	cursor:pointer;
}


/* Login details */
.loginbutton {
	width:200px;
	margin:0px auto;
	font-size:0.8em;
}
.loginbutton:hover {
	color: white;
	background-color:#800080; 	
	cursor:pointer;
}

.logindiv {
	position: absolute;
	left:30px;
	right:30px;
	bottom:4px;
	width: 360px;
	height: 120px;
	margin: 0px auto;
	padding-top: 8px;
	padding-left: 2px;
	padding-right: 2px;
	font-size:0.8em;
	text-align:left;
	background-color: white;
	border: 2px solid black;
	display:none;
}

#cookie-message {
	position: fixed;
	left:30px;
	right: 30px;
	bottom: 2px;
	height: 40px;
	font-style: italic;
	text-align:center;
	vertical-align:center;
	background-color:#77b8f8;
	color:#0000A0;
	border-radius:10px;
	padding-top:8px;	
	padding-left:20px;
	padding-right:20px;
}

/* Link div buttons */
.link {
	padding:0.4em 8px;
	margin:1px auto;
	max-width:250px;
	border-radius:10px;
	background-color:#0000A0;
	color: #ffffff;
	text-align:center;
	vertical-align:middle;
}

.linkhorizontal {
	margin:auto 1px;
	max-width:600px;
}

.linknobackground {
	background-color:transparent;
	border: 1px solid #0000A0;
}


.link:hover { 
	background-color: #800080;
	cursor:pointer;
}

.linkbox_vertical {
	height:100%;
}

.linkbox_horizontal {
	width:100%;
	padding:0px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.linkbox_frame {
	display: flex;
}



/* Lists on cards */
.cardlist {
	width:90%;
	margin:0px auto;
}

.cardlist td { 
	vertical-align:top; 
	background-color:#ffffff;
}

/* If we want the grid drawing in on the classlist */
.cardlistgrid {
	background-color: #0174df;
}

/* Background for alerts, confirms and waits */
.greyout {
	z-index:999999;
	display:none; 
	position:fixed;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	cursor:wait;
	background-color:rgba(238,238,238,0.5);
		
}
.preloader {
	position: absolute;
	top:calc(50% - 13px);
	left:calc(50% - 110px);
	width:220px;
	height:25px;
	background-image:url("pix/preloader.gif");
}

.marquee-hor {
	position: absolute;
    animation: marquee-h 10s linear infinite;
}


/* Make scrolling stuff move */

@keyframes marquee-h {
    0%   { left:100%; }
    100% { left:-100%; }
}



/* Responsive layouts */
/* - when the screen is greater than 700px high used a fix position for header */
/* - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
/* @media screen and (max-height: 700px) {*/
@media screen and ( height <= 700px) {
  .header {
		position: absolute;
	}
}


@media screen and (max-width: 1000px) {
	body {
		font-size:15px;
	}
    .htlabel {   
    }
    .htstatement {   
    }
    .menubar { 
		font-size:15px;
	}
}

@media screen and (max-width: 800px) {
	body {
		font-size:14px;
	}
   .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
	.htlogo {
		display:none;
	}
	.name_offset {
		left:0px;
	}
    .menubar { 
		font-size:14px;
	}
}

@media screen and (max-width: 600px) {
	body {
		font-size:11px;
	}
	.htstatement {
	}
	
	.menubar_full {
		display:none;
		flex-direction:column;
	}
	.menubar_min {
		display:block;
	}
	div.menuitem {
		clear:left;
	}
    .menubar { 
		font-size:16px;
	}
    .menuitem { 
		font-size:16px;
	}
   .menuitemname { 
		font-size:16px;
	}
}