@charset "utf-8"; {
font-family:Arial, Helvetica, sans-serif;
}

th {
	font-family:Arial, Helvetica, sans-serif;
}

body {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
	color: #000;
	background-image:url(images/blueback1.png);
	background-size: 100% 600px;
	background-position: top;
	background-repeat:no-repeat;
}

p {
	font-size: 2.5vmin;
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 2vw;
	font-weight: bold;
	font-style:italic;
	color: #C00;
	text-align: center;
}
h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.8vw;
	font-weight: bold;
	font-style: italic;
	color: #00F;
	text-align: center;
}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.6vw;
	font-weight:bold;
	color: #FFF;
	text-align: center;
}
h4 {
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	font-size: 1.25vw;
	font-weight: normal;
}
h5 {
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
	text-align: right;
	font-weight: normal;
	font-size: 1vw;
}
h6 {
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	text-emphasis: none;
	font-size: 12px;
}

td {font-size: 2.5vmin;
	min-width: 90px;}

.title {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 2.25vw;
	font-weight: normal;
	color: #794A9F;
	text-align: center;
}

/* Cycle Slideshow */ 

.cycle-slideshow {
	width: 100%;
	margin: 0 auto;
	background: transparent;
}
.cycle-slideshow img {
	width: 100%; 
	text-align:center; 
}

.cycle-slideshow img { display: none }
.cycle-slideshow img.first { display: block }



table { 
  width: 90%; 
  border-collapse: collapse;
  margin:0 auto; 
}

/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #4A519A; 
  color: white; 
  font-weight: normal;
  font-size: 1.0vw; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: center; 
}

td img  {min-width: 120px;  }


/* General Divs */

#container {
	width: 90%;
	height: auto;
	border: 0px;
	margin: 0 auto;
	background-color: transparent;
	}
	
#header  {
	width: 100%;
	height: auto;
	float: left;
	margin: 0 auto;
	text-align: center;
	background-color: transparent;
	
}

#leftheader  {
	width: 20%;
	height: auto;
	float: left;
	margin: 0 auto;
	text-align: center;
	background-color: transparent;
	
}

#centerheader  {
	width: 60%;
	height: auto;
	float: left;
	margin: 0 auto;
	text-align: center;
	background-color: transparent;
	
}

#rightheader  {
	width: 15%;
	height: auto;
	float: right;
	margin: 0 auto;
	text-align: center;
	background-color: transparent;
	
}


#menubar {
	width: 100%;
	margin-top: 10px;
	float:left;
	z-index: -9999;
}

.content {
	width: 95%;
	float: none;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	color: #794a9f;
	font-size: 1.8vw;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

.lefttext {
	width: 60%;
	height:auto;
	float: left;
	padding: 5px;
	margin: 10px auto;
	display: inline;
	vertical-align: middle;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: justify;
	position: relative;
	color: #5A3966;
}

.lefttext p    {font-size: 2.2min;
				color:#5A3966;    
}

.righttext {
	width: 35%;
	float: right;
	height: auto;
	vertical-align: middle;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 16px;
	padding: 5px;
	color: #5A3966;
	text-align: justify;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.righttext p    {font-size: 2.2min;   
				color:#5A3966;
				}

.threequarterwidthobject   {width:75%;
margin: 0 auto;   }	
				
.wholewidthobject   {width:100%;
float: left;
flex: auto;   }	

.youtubevideowrap {
	width: 80%;
	height: auto;
	max-width: 640px;
	margin: 0 auto;
	border-style: solid;
	border-radius: 10px;
	border-width: thick;
	border-color: #794a9f;
}

.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: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#newslefttext {
	width: 45%;
	height:auto;
	float: left;
	padding: 5px;
	margin: 10px auto;
	display: inline;
	vertical-align: middle;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: justify;
	position: relative;
	color: #5A3966;
}

#newslefttext p    {font-size: 2.2min;
				color:#5A3966;    
}

#newsrighttext {
	width: 45%;
	float: right;
	height: auto;
	vertical-align: middle;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 16px;
	padding: 5px;
	color: #5A3966;
	text-align: justify;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

#newsrighttext p    {font-size: 2.2min;   
				color:#5A3966;
				}






/* In Memorium */

#memcontent {
	width: 95%;
	float: none;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	color: #794a9f;
	font-size: 1.8vw;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

#memcontent table { 
  width: 50%; 
  border-collapse: collapse;
  margin: 0 auto; 
}

/* Zebra striping */
#memcontent tr:nth-of-type(odd) { 
  background: none; 
}
#memcontent th { 
  background: #4A519A; 
  color: white; 
  font-weight: normal;
  font-size: 1.0vw; 
}
#memcontent td, th { 
  padding: 0px; 
  border: 0px solid #ccc; 
  text-align: center; 
}

#memcontent td img  {min-width: 120px;  }

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#memcontent table, #memcontent thead, #memcontent tbody, #memcontent th, #memcontent td, #memcontent tr { 
		display: block;
		text-align:center; 
	}
	
	#memcontent tr { border: 0px solid #ccc; }
	
	#memcontent td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee;
		font-size: 2.5vw; 
		position: relative;
		 
	} 
	
	#memcontent td img {max-width: 150px;  }
	
		/*
	Label the data
	*/
	#memcontent td:nth-of-type(1):before { content: " "; }
	#memcontent td:nth-of-type(2):before { content: ""; }
	#memcontent td:nth-of-type(3):before { content: ""; }

	
}



				

/* Gallery */

.gallframe   {width: 50%;
              margin: 0 auto;
			  padding: 0.5%;
   }
.gallframe p  {font-size: 1vw ;   }

.gallframe h6   { font-size: 1vw;
				font-style:italic;
				  color: #00F;  }

.gallframe img  {max-width: 300px;  

}

#linkcontent {
	width: 95%;
	float: none;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	color: #794a9f;
	font-size: 1.8vw;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

#linkcontent table { 
  width: 90%; 
  border-collapse: collapse;
  margin:0 auto; 
}

/* Zebra striping */
#linkcontent tr:nth-of-type(odd) { 
  background: transparent; 
}
#linkcontent th { 
  background: #4A519A; 
  color: white; 
  font-weight: normal;
  font-size: 1.0vw; 
}
#linkcontent td, #linkcontent th { 
  padding: 6px; 
  border: 1px solid #000; 
  text-align: center;
  width: 50%; 
}

#linkcontent td img  {min-width: 120px;  }


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	#linkcontent table, #linkcontent thead, #linkcontent tbody, #linkcontent th, #linkcontent td, #linkcontent tr { 
		display: block;
		text-align: center; 
	}
	
	#linkcontent tr { border: 0px solid #ccc; }
	
	#linkcontent td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #000; 
		position: relative;
		width: 95%; 

	} 
	
	#linkontent td img {max-width: 300px;  }
	
		/*
	Label the data
	*/
	#linkcontent td:nth-of-type(1):before { content: " "; }
	#linkcontent td:nth-of-type(2):before { content: ""; }

	
}

#formcontent {
	width: 95%;
	float: none;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	color: #794a9f;
	font-size: 1.8vw;
	text-align: center;
	background-color: transparent;
	overflow: hidden;
}

#formcontent table { 
  width: 90%; 
  border-collapse: collapse;
  margin:0 auto; 
}

/* Zebra striping */
#formcontent tr:nth-of-type(odd) { 
  background: transparent; 
}
#formcontent th { 
  background: #4A519A; 
  color: white; 
  font-weight: normal;
  font-size: 1.0vw; 
}
#formcontent td, #linkcontent th { 
  padding: 6px; 
  border: 1px solid #333; 
  text-align: center;
  width: 50%; 
}

#formcontent td img  {min-width: 120px;  }


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
	
	#formcontent img   {min-width: 400px;  }

	/* Force table to not be like tables anymore */
	#formcontent table, #formcontent thead, #formcontent tbody, #formcontent th, #formcontent td, #formcontent tr { 
		display: block;
		text-align: left; 
	}
	
	#formcontent tr { border: 0px solid #ccc; }
	
	#formcontent td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #000; 
		position: relative;
		width: 95%; 

	} 
	
	#formcontent td img {max-width: 300px;  }
	
		/*
	Label the data
	*/
	#formcontent td:nth-of-type(1):before { content: " "; }
	#formcontent td:nth-of-type(2):before { content: ""; }				 
				 
/* Footer */							  

#footer {
	width:100%;
	height: auto;
	float: none;
	margin: 0 auto;
	overflow: hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #794A9F;
	text-align: center;
}

.footermenu {
	width: 95%;
	text-align: center;
	margin: 0 auto;
	padding: 5px;
 	background:transparent;
	color: #030;
	display: inline-block;
}

.footericon    {
	width: 19%;
	float: left;
	padding: 5px ;
	display: inline-block;
	font-family:Arial, Helvetica, sans-serif;
	color: #794A9F;
	text-align: center;
	font-size: 1vw;
	font-weight: normal;
	
}

#leftfoot {
	width: 40%;
	float: left;
	padding-top: 15px;
	padding-bottom: 5px;
	height: auto;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 14px;
	color: #794A9F;
}

#centerfoot {
	width: 20%;
	float: left;
	height: auto;
	text-align: center;
	vertical-align: top;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 12px;
	color: #060;
	padding-top: 5px;
	padding-bottom: 5px;
	display: inline-block;
}

#rightfoot {
	width: 25%;
	float: right;
	padding-top: 15px;
	padding-bottom: 5px;
	height: auto;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	font-family:Arial, Helvetica, sans-serif;
	position: relative;
	font-size: 12px;
	color: #030;
}

#rightfoot img {
    max-width: 180px;
}



.smedia {text-align:center;   }


@media only screen and (max-width: 767px)
{
	
	#container   {width: 100%;  }
	
    #centerfoot, #rightfoot, #leftfoot, .content, .rightobject, .centerobject, .lefttext, .righttext,
    #header, .footericon, .gallframe, #newslefttext, #newsrighttext
	
	{	height: auto;
        display: block;
        float: none; 
        width: 98%;
        padding: 5px 5px;
		}
		
	.gallframe p, .gallframe h6  {font-size: 2em;   }
		
	 #header img {width: 85%;  }
	
	.smedia a img  {width: 25%   }
	.footericon a img  {width: 20%   }
	
	#form  {margin-top: 0}
		
	.content img {width: 100%;
	margin: 0 auto; }
	
	h1, .title  { font-size: 6vw;}
	
	h2, h3, h4, .footericon, .footericon a { font-size: 4.5vw;}
	
	p, .righttext p, pcenter, a {font-size: 3.5vw; } 
	
	td {font-size: 5vmin;
	min-width: 90px;}
	
	.righttext { margin-top: -10px; }
	
	.cycle-slideshow {
	width: 100%; 
	float: none;
	margin: 0 auto;
	}
	
	.cycle-slideshow img
	 {width: 95%;
	margin-left: 2%}
	

}


 @Media Image Swop 

@media only screen and (min-width: 768px) { <<<large
#info-1 { display: block; }
#info-2 { display: none; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) { <<<medium
#info-2 { display: block; }
#info-1 { display: none; }
}

@media only screen and (max-width: 479px) { <<<small
#info-2 { display: block;}
#info-1 { display: none; }
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block;
		text-align:left; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	th    {color: black;
	font-style:italic;   }
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 30%; 
	} 
	
	td img {max-width: 150px;  }
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 65%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: " "; }
	td:nth-of-type(2):before { content: "Surname"; }
	td:nth-of-type(3):before { content: "First name"; }
	td:nth-of-type(4):before { content: "Trade"; }
	td:nth-of-type(5):before { content: "Start Date"; }
	td:nth-of-type(6):before { content: "End Date"; }
	td:nth-of-type(7):before { content: "Sqns"; }
	td:nth-of-type(8):before { content: "Location"; }

}