/* this is for grouping the 4 boxes properly */
@media (max-width: 1427px) {
		
	.boxcontain{
		width: 430px;
		height: auto;
	
		margin-left: auto;
		margin-right: auto;	
	}

	.box2{
		display: inline-block;
		width: 190px;
		min-width: 173px;
		height: 300px;
	  	padding: 5px;
  		margin: 1%;
  		background-size: contain;
  		background-origin: border-box;
  		background-repeat: no-repeat;
	}	
}

@media (max-width: 1107px) {
	
	#headtel  {
		float: none;		
		position: absolute;
		width: 18%;
		min-width: 240px;
		border-style: none;
		border-width: 1px;
		right: 10px;
		margin-right: 10px;
	}

	.right{
		float: left;
		width: 100%;
	}

	.box {
		max-width: 100%;
	}		
}

@media (max-width: 1000px) {
	h3{color: black; font-family:"Arial", sans-serif; ; font-size:1em; text-align:center; }

	#mainpage{
		width: 100%;
		top: 0;
	}

	#headline{
		top: 0;
		height: auto;
	}
		
	#headlineinner{
		position: relative;
		left: 0;
		width: 100%
	}

	#prevnext{
		top: 0;	
	}
	
	.left{
		position: relative;
		top: 0px;
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}


	.leftinner {
		margin: auto;
	}

	.centre{
		width: 100%;
		top: 0;
	}
	
	.right{
		float: left;
		width: 100%;
	}
	
	.edgeinner{
		max-width: 100%;
		margin-left: auto;
	}
	
	.box {
		max-width: 100%;
	}

	.headmenu{
		visibility: visible;
		height: auto;
		border-style: solid;
		border-width: 1px;
		border-radius: 10px;
		width: 85%;
		margin: auto;
	}
	
	.spotlightmenu ul{
		text-align: center;
	}
}

/*	=============================================================== */
@media (max-width: 700px) {

	.headlinetext{color:black; font-family:"verdana,geneva", sans-serif; font-size:1.2em; font-weight: bold;}	
	
	#page {
		width:99%;    	
    	margin: 1px;
    	padding: 1px;
	}

	#topspacer{
		height: 0px;
	}
	
	#header {
		width: 100%;
		height: auto;
		text-align: center;

		}

	#strapline {
		position: absolute;
		top: 70px;
		left: 0;
		font-family: "trebuchet ms","helvetica", sans-serif;
		font-size:.811em;
		width: 100%;
		margin: auto;
		text-align: center;
		color: darkolivegreen;		
	}

	#headlogo{
		position: relative;
		top: 0px;
		float: none;
		width: 100%;
		margin: auto;
		text-align: center;			
	}	
	
	#headtel{
		position: absolute;
		top: 200px;
		left: 9%;
		float: none;	
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		height: auto;
		padding: 0;
		text-align: center;
		background-color: transparent;
		border-style: none;
	}	
	
	#headline{
		position: relative;		
		width: 100%;
		margin: auto;
		height: auto;
		top: 180px;
		float: none;
		border-style: none;
	}
	
	#prevnext{
		top: 170px;	
	}	
	
	#mainpage{
		top: 140px;
	}	
	
	.left{
		position: relative;
		top: 0px;
		float: none;
		width: 80%;
		margin: auto;
		text-align: center;
		
		visibility: hidden;
		height: 0;
	}


	.leftinner {
		margin: auto;
	}
	
	.centre{
		width: 100%;
	}

	.centreinner{
		float: left;		
		width: 100%;
		margin: auto;	
	}
	
	.inner{
		padding-left: 5px;
		padding-right: 5px;
	}

	.box{
		float: none;
		width: 90%;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}
	
	.largebox{
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 5px;
	}
	
	.boxcontain{
		width: 200px;
		height: auto;
	
		margin-left: auto;
		margin-right: auto;	
		border-style: solid;
	  	border-width: 0px;
	}

	.box2{
		display: inline-block;
		width: 190px;
		min-width: 173px;
		height: 300px;
	  	padding: 5px;
  		margin: 5px;;
  		background-size: cover;
  		background-origin: border-box;
  		background-repeat: no-repeat;
	}


.centreheading{
	width: 90%;
	margin: auto;
}

.centreblock{
	width: 95%;
	margin: auto;
}
/* ======================Menu====================== */
	
	#headmenu{
		visibility: visible;
		height: auto;
		margin-top: 10px;
	}

	.spotlightmenu li{
		display: list-item;
	}
	
	.spotlightmenu li a{
		height: 15px;
	}
	
	.spotlightmenu li a span{
	position:relative;
	top:2%; /* move text down so it appears centered within menu item */
	}

	
	#smallmenu{
		position: relative;
		top: 90px;		
		height: 0;
		width: 100%;
		margin: auto;
		text-align: center;
		color: darkolivegreen;		
		visibility: hidden;
	}	

} /* end of @media */

@media (max-width: 350px) {
	.imagebox{	
	max-width:100%;
	margin: auto;
}
} /* end of @media */