/* CSoL - 5 break points********************************************************************************* */
/* 1st breakpoint */
@media all and (min-width: 960px) and (max-width: 1199px) {
	img {
		max-width: 100%;
		height: 95%;
	}
	#banner {
		height:7.5em;
	}
	#navbar{
		position: relative;
		height: 4.5em;
	}
	#navbar-links {					/* navigation bar links*/
		width: 100%;
		margin: 0;
		padding: 0;
		left: 0;
		bottom: 0;						
		background: #000066;		/* navigation bar background colour */
		border-radius: 8px;					
	}
	#navbar-links li {				
		margin: 0.4em 0 0.4em 0;
		font-family: Arial, Helvetica, sans-serif;
		list-style: none;
		float: left;
		position: relative;
	}
	#navbar-links a {
		padding: 0.5em 1.5em;	
		font-size: 0.9em;
	    padding: 6px 11px;			/* link text padding top and bottom, then link text padding right and left */
	}
	#page {
		width: 100%;
	}
	#content {
		margin: 10px 0;
		width: 100%;
	}
	.imageright {
		max-width: 12em;
		height: 21em;
		margin: 1.0em 0em 0em 1.8em;
	}
	.imageleft {
		max-width: 12em;
		height: 20em;
		margin: 0.8em 1.8em 0em .8em;
	}
	.centerimage {
		height:15em;				/* Tour pic */
		width: 70%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}
	.nobleleft {
		float: left;	
		max-width: 10em;
		height: 9em;
		margin: 0 1em 0 3em;
	}
	.nobleright {
		float: right;
		max-width: 10em;
		height: 9em;	
		margin: 0 3em 0 1em;
	}
	h1 {
		font-size: 3em;
	}
	h2 {
		padding: 20px 0px 0px 0px;
		margin: 10px 10px 0px 10px;
		font-size: 2.5em;
		text-align: center; 
		color: #363636;      		/* text colour */        		
		font-family: "Times New Roman", Times, serif;
	}
	p {
		margin: 0 1em 0 1em;
		padding: 15px;
		font-size: 0.9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #000066;            	/* text colour */
	}
	p.first {
		padding: 0;
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #0d268c;             
	}
	p.second {
		padding: 15px;
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify;
		color: #FF0000;           
	}
	p.third {
		padding: 15px;
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FF0000;            	 
	}
	p.dpa {  					 
		padding: 15px;
		font-size: .75em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #191970;             
	}
	.table1 td a {               	
		font-size: 1em;
	}
	.table2 td a {               	
		font-size: 1em;
	}
	.buttonformat {
		padding: 0.1em;
		font-size: 1.2em;
		border-radius: 8px;	
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		color: #FFFFFF;       	
		background:#000066; 
		border:0 none;
		border: 7px solid #000060;
	}
	.buttonformat:hover {
		color: #000066;
		background: #C2C2C2;
	}
}
/* 2nd breakpoint *******************************************************************************/
@media all and (min-width: 768px) and (max-width: 959px) {
	img {
		max-width: 100%;
		height: 90%;
	}	 
	#banner {
		height: 7.5em;
	}
	#navbar {
		position: relative;
		height: 5em;
	}
	#navbar-links a {
		padding: 1em .7em;	
		font-size: 0.8em;
	        padding: 6px 0px;			/* link text padding top and bottom, then link text padding right and left */
	}
	#page {
		width: 100%;
	}
        #content {
		width: auto;
		float: none;
		margin: 10px 0;
        }
	.imageright {
		max-width: 12em;
		height: 20em;
		margin: 1.0em 1em 1em 2.0em;
	} 
	.imageleft {
		max-width: 12em;
		height: 18em;
		margin: 0.8em 1.8em 0em 1em;
	}
	.centerimage {
		height:12em;				/* Tour pic */
		width: 60%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}	
	.nobleleft {
		float: left;	
		max-width: 8em;
		height: 8em;
		margin: 0 1em 0 3em;
	}
	.nobleright {
		float: right;
		max-width: 8em;
		height: 8em;	
		margin: 0 3em 0 1em;
	}
	.biglonglogo {
		height: 3.5em;
		margin: 0 0 0 0;
	}
	.longlogo {
		height: 3em;
		margin: 0 0 2em 0;
	}
	.talllogo {
		height: 5em;
	}
	h1 {
		font-size: 1.8em;
	}
	h2 {
		margin: 10px;
		font-size: 1.8em;
		color: #363636;      		/* text colour */     
	}
	p {
		margin: 0 1em 0 1em;
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #0d268c;           
	}
	p.first {
		padding: 0;
		font-size: 1em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #0d268c;            
	}
	p.second {
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify;
		color: #FF0000;          
	}
	p.third {
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FF0000;          
	}
	p.dpa {  					
		padding: 15px;
		font-size: .6em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #191970;           
	}
	.table1 td a {               	
		font-size: .8em;
	}
	.table2 td a {               	
		font-size: .8em;
	}
	.buttonformat {
		padding: 0.1em;
		font-size: 1.0em;
		border-radius: 8px;	
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		color: #FFFFFF;       	
		background:#000066; 
		border:0 none;
		border: 7px solid #000060;
	}
	.buttonformat:hover {
		color: #000066;
		background: #C2C2C2;
	}
}
/* 3rd breakpoint **********************************************************************************/
@media all and (min-width: 535px) and (max-width: 767px){
    img {
		max-width: 100%;
		height: 80%;
	}
	#banner {
		height: 7em;
	}
	#navbar {
		position: relative;
		height: 2.5em;
    	}
    	#navbar-links li {				
		margin: 0 0 0 0;
	}
	#navbar-links a {
		padding: 0 0 0 0;	
		font-size: 0.7em;
	}
	#page {
		width: 100%;
	}
	#content {
		width: auto;
		float: none;
		margin: 6px 0;
	}
	.imageright {
		max-width:8em;
		height: 19em;
		margin: 1.0em 0 0 1.2em;
	}  
	.imageleft {
		max-width: 12em;
		height: 13em;
		margin: 0.8em 1.2em 0em 1em;
	}
	.centerimage {
		height:12em;				/* Tour pic */
		width: 65%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}	
	.lettercenter {
		height:30em;				/* HRH letter */
		width: 90%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}
	.nobleleft {
		float: left;	
		max-width: 5em;
		height: 8em;
		margin: 0 1em 0 3em;
	}
	.nobleright {
		float: right;
		max-width: 5em;
		height: 8em;	
		margin: 0 3em 0 1em;
	}
	.biglonglogo {
		height: 4em;
		margin: 0 0 0 0;
	}
	.longlogo {
		height: 2.5em;
		margin: 0 0 2em 0;
	}
	.talllogo {
		height: 4em;
	}
	h1 {
		margin: 20px;
		font-size: 1.8em;
	}
	h2 {
		margin: 0 1.2em 0 1.2em;
		font-size: 1.5em;
		color: #363636;      		/* text colour */     
	}
	p {
		margin: 0 1.2em 0 1.2em;
		padding: 5px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #0d268c;           
	}
	p.first {
		padding: 0;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #0d268c;            
	}
	p.second {
		padding: 15px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify;
		color: #FF0000;  
	}
	p.third {
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FF0000;            	
	}
	p.dpa {  						
		padding: 5px;
		font-size: .55em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #191970;            
	}
	.table1 td a {               	
		font-size: .7em;
	}
	.table2 td a {               	
		font-size: .7em;
	}
	.contact-container {
		font-size: 0.8em;
		margin: 0 2em 0 2em;
		padding: 1em 2em 1em 2em;
	}
	.buttonformat {
		padding: 0.1em;
		font-size: 1em;
		border-radius: 8px;	
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		color: #FFFFFF;       	
		background:#000066; 
		border:0 none;
		border: 7px solid #000060;
	}
	.buttonformat:hover {
		color: #000066;
		background: #C2C2C2;
	}
	#footer {
		height: .8em;
	}
	p.foot{
		padding: 2px;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #363636;           		
	}
}
/* 4th breakpoint ************************************************************************************/
@media all and (min-width: 320px) and (max-width: 534px){
    img {
		max-width: 100%;
		height: 80%;
	}
	#banner {
		height: 5em;
		padding-left:10px
	}
	#navbar {
		position: relative;
		height: 4.5em;
    	}
    	#navbar-links li {				
		margin: 0 0 0 0;
	}
	#navbar-links a {
		padding: 0 0 0 0;	
		font-size: 0.7em;
	}
	#page {
		width: 100%;
	}
	#content {
		width: auto;
		float: none;
		margin: 6px 0;
	}
	.imageright {
		max-width: 8em;
		height: 16em;
		margin: 1.0em 0 0 1em;
	}  
	.imageleft {
		max-width: 12em;
		height: 13em;
		margin: 0.8em 1.2em 0em 1em;
	}
	.centerimage {
		height:10em;				/* Tour pic */
		width: 65%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}
	.lettercenter {
		height:20em;				/* HRH letter */
		width: 100%;

	padding-top: 1em;
	text-align: center; 
	}	
	.nobleleft {
		float: left;	
		max-width: 5em;
		height: 7em;
		margin: 0 .5em 0 .5em;
	}
	.nobleright {
		float: right;
		max-width: 5em;
		height: 7em;	
		margin: 0 .5em 0 .5em;
	}
	h1 {
		margin: 20px;
		font-size: 1.8em;
	}
	h2 {
		margin: 0 1.2em 0 1.2em;
		font-size: 1.5em;
		color: #363636;      		/* text colour */     
	}
	p {
		margin: 0 1.2em 0 1.2em;
		padding: 5px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #0d268c;           
	}
	p.first {
		padding: 0;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #0d268c;            
	}
	p.second {
		padding: 15px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify;
		color: #FF0000;  
	}
	p.third {
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FF0000;            	
	}
	#flyer {
		height:32em;				/* size, colour and corners of banner bar */
		background: #000066;
		width: 80%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
		border-radius: 8px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	}
	.flyerp1 {
		font-size: 0.8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerp2 {
		font-size: 1.1em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerp3 {
		font-size: 0.6em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerbutton {
		padding: 0.1em;
		font-size: 1em;
		font-weight: bold;		
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		border-radius: 8px;
		color: #000066;       	
		background:#FFFFFF;  
		border:0 none;
		border: 7px solid #FFFFFF;
	}
	p.dpa {  						
		padding: 5px;
		font-size: .55em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #191970;            
	}
	.table1 td a {               	
		font-size: .7em;
	}
	.table2 td a {               	
		font-size: .7em;
	}
	.table3 td {
	font-size: 0.7em;
}
	.contact-container {
		font-size: 0.8em;
		margin: 0 2em 0 2em;
		padding: 1em 2em 1em 2em;
	}
	/* Submit Button Formatting */
	.buttonformat {
		padding: 0.1em;
		font-size: 1.1em;
		border-radius: 8px;	
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		color: #FFFFFF;       	
		background:#000066; 
		border:0 none;
		border: 7px solid #000060;
	}
	.buttonformat:hover {
		color: #000066;
		background: #C2C2C2;
	}
	#footer {

		height: .8em;
	}
	p.foot{
		padding: 2px;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #363636;           		
	}
}
/* 5th breakpoint ************************************************************************************/
@media all and (min-width: 100px) and (max-width: 319px){
    img {
		max-width: 100%;
		height: 80%;
	}
	#banner {
		height: 5em;
		padding-left: 10px;
	}
	#navbar {
		position: relative;
		height: 6.5em;
    	}
    	#navbar-links li {				
		margin: 0 0 0 0;
	}
	#navbar-links a {
		padding: 0 0 0 0;	
		font-size: 0.71em;
	}
	#page {
		width: 100%;
	}
	#content {
		width: auto;
		float: none;
		margin: 6px 0;
	}
	.imageright {
		max-width: 8em;
		height: 18em;
		margin: 1.0em 0 0 1.5em;
	}  
	.imageleft {
		max-width: 12em;
		height: 13em;
		margin: 0.8em 1.2em 0em 1em;
	}
	.centerimage {
		height:7em;				/* Tour pic */
		width: 90%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}	
	.nobleleft {
		float: left;	
		max-width: 1em;
		height: 1em;
		margin: 0 1em 0 3em;
	}
	.nobleright {
		float: right;
		max-width: 1em;
		height: 1em;	
		margin: 0 3em 0 1em;
	}
	.lettercenter {
		height:10em;				/* HRH letter */
		width: 80%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
	}
	h1 {
		margin: 20px;
		font-size: 1.8em;
	}
	h2 {
		margin: 0 1.2em 0 1.2em;
		font-size: 1.5em;
		color: #363636;      		/* text colour */     
	}
	p {
		margin: 0 1.2em 0 1.2em;
		padding: 5px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #0d268c;           
	}
	p.first {
		padding: 0;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #0d268c;            
	}
	p.second {
		padding: 15px;
		font-size: .8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify;
		color: #FF0000;  
	}
	p.third {
		padding: 15px;
		font-size: .9em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FF0000;            	
	}
	#flyer {
		height:28em;				/* size, colour and corners of banner bar */
		background: #000066;
		width: 80%;
		margin: auto;
		padding-top: 1em;
		text-align: center; 
		border-radius: 8px;
		box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	}
	.flyerp1 {
		font-size: 0.7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerp2 {
		font-size: 0.8em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerp3 {
		font-size: 0.6em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		font-weight: bold;	
		color: #FFFFFF;            	/* text colour */
	}
	.flyerbutton {
		padding: 0.1em;
		font-size: 1em;
		font-weight: bold;		
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		border-radius: 8px;
		color: #000066;       	
		background:#FFFFFF;  
		border:0 none;
		border: 7px solid #FFFFFF;
	}
	p.dpa {  						
		padding: 5px;
		font-size: .55em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: justify; 
		color: #191970;            
	}
	.table1 td a {               	
		font-size: .7em;
	}
	.table2 td a {               	
		font-size: .7em;
	}
	.table3 td {
		font-size: 0.6em;
}
	.contact-container {
		font-size: 0.8em;
		margin: 0 1em 0 1em;
		padding: 1em 1em 1em 1em;
	}
	.buttonformat {
		padding: 0.1em;
		font-size: 1em;
		border-radius: 8px;	
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center;
		color: #FFFFFF;       	
		background:#000066; 
		border:0 none;
		border: 7px solid #000060;
	}
	.buttonformat:hover {
		color: #000066;
		background: #C2C2C2;
	}
	#footer {

		height: .8em;
	}
	p.foot{
		padding: 2px;
		font-size: .7em;
		font-family: Arial, Helvetica, sans-serif; 
		text-align: center; 
		color: #363636;           		
	}

}