@charset "utf-8";

/* CSS Document */



body {

	font-family:"Arial Black", Gadget, sans-serif;
	color: #ff6b01;
	font-size: 14px;
	/*background:url(../images/33-images.jpg); /*this link to an external image for the background */

background-color:#413e3a;

}

/*This is the colour of the sidebars*/


/*to set the properties for the h1 element*/
h1 {

	font-family:"Arial Black", Gadget, sans-serif;

	font-size: 36px;

	color: #ff6b01;

}

/*to set the properties for the h2 element*/
h2 {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 24px;
	color: #ff6b01;
}

/*to set the properties for the h3 element*/
h3 {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 20px;
	color: #ff6b01;
}

/*to set the properties for the h4 element*/
h4{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 16px;
	color: #ff6b01;
}

/*to set the properties for the h5 element*/
h5{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	color: #ff6b01;
}

/*to set the properties for the h6 element*/
h6 {
	font-family: "Arial Black", Gadget, sans-serif;
	text-align:center;
	font-size: 8px;
	color: #ff6b01;
}

/*to set the properties for the links*/
a:link{color:blue;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:#cc9933;}

/*to set up a container box for the page*/
#page-container {
	width: 800px;  /*width of the container box */
	margin-top: 5px;   /*create margin at top of container */
	margin-left: auto;  /*sets margings auto adjust for screen width */
	margin-right: auto;   /*sets margings auto adjust for screen width */
	border: 2px solid Black

; /*thickness of container border*/
	height: 100%;  /*height of  the container box */
	background-color: #000000; /*colour of the container */
	}


#header{ /*container for the header image */
	position: relative; 
	margin-top:10px;
	width:250px;

/*border: 10px solid red;*/
	float:left;
	}


#navbar{
	position: relative;
	margin-top:10px;
	width:250px;

/*border:10px solid #FFF ;*/
	float:right;
	}

/*for centering text*/
.centred {
text-align:center;

				}

/*container for floating images*/
.inbox{ /*box for containing images and text*/
	position: relative;
	background-color:#000000;	/*colour of the inline box */

/*border: 1px solid white;*/
	padding:10px;
	top: 10px;
	left:30px; /*in from left margin*/
	width:700px; /* box width*/
	text-align:justify; /*fully justify text*/
	line-height: 160%; /*height of text giving space between lines*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

/*a class set up to specifiy a certain text color different to body text */		
.intext{color:#000;
}

.SmallBox{ /*box for containing images and text*/
	position: relative;
	top: 10px;
	left:30px; /*in from left margin*/
	width:400px; /* box width*/
	text-align:justify; /*fully justify text*/
	line-height: 160%; /*height of text giving space between lines*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

/*to set the properties for floating images to the left*/

img.floatLeft {
	border: 5px solid yellow;
	position: relative;
	float: left; /* float image to left of box*/
	margin-right: 20px;
	width: 150px;
	height: 150px;
	}	



/*to set the properties for floating images to the right*/

img.floatRight {
	position: relative;
	float: right;  /* float image to right of box*/
	margin-left: 20px;
	width: 150px;
	height: 150px;
	}			

img {border:none;}   /*stops the border appearing around hyperlinkied images */







/* From line 173 to 392 is CSS from Responsive */


/* Mobile */
@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	display: none;
}
header nav ul {
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 90%;
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 12px;
	float: none;
	text-align: center;
}
.banner {
	background-color: #2D9AB7;
	background-image: none;
}
.tagline {
	margin-top: 20px;
	line-height: 22px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #043745;
}
.container header nav {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	float: none;
	overflow: auto;
	display: inline-block;
	background: #52bad5;
}
header nav ul {
	padding: 0px;
	float: none;
}
nav ul li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.thumbnail {
	width: 100%;
}
.footer_column {
	width: 100%;
	margin-top: 0px;
}
.parallax {
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 40%;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 100%;
	font-size: 18px;
}
.parallax_description {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: none;
	width: 100%;
	text-align: center;
}
.thumbnail {
	width: 50%;
}
.parallax {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 20%;
}
.parallax_description {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	padding-top: 30px;
}
.banner {
	padding-left: 20px;
	padding-right: 20px;
}
.footer_column {
	width: 100%;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
	width: 100%;
}
.thumbnail {
	width: 50%;
}
.text_column {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.banner {
	margin-top: 0px;
	padding-top: 0px;
}
}