body {
	width:1000px; /*--  --*/
	margin:0 auto;
	margin-top:30px;
	background-color:#EDEDED;
	text-align: center;
}



/* ----- HEADER ----- */



div.header {
width:1000px; /* -- sets the with of the header to 1000 pixels in length --*/
height:197px; /* -- sets the height of the header to 197 pixels --*/
background-image:url(style/head_logo.png);/* -- sets the backround of the header to the head_logo.png image --*/

}

/* ----- menue bar ----- */


div.navigation-container{
	background-image:url(style/menubar.png) /*-- sets the background image for the menue bar --*/
}

div.navigation
{
	height:50px; /*-- sets height of the navagation area to 50 pixels --*/
}


div.navigation ul
{
	margin: 0;
	padding: 0;
}


div.navigation ul li
{
	list-style-type: none; /*-- removes any style type from the list --*/
	display: inline; /*-- ensures the element line up --*/
}

div.navigation li a
{
	display: block;/*-- sets up so that each list elament is desplayed as a block --*/
	float: left;/*-- ensures the list runs from left to righ so it snaps to the left side of the menue bar--*/
	padding: 15px 10px;/*-- alines the text corectly--*/
	color: #fff; /*-- sets the colour of the font in the lists to white --*/
	text-decoration: none; /*-- removes the underline from the links--*/
	border-right: 1px solid #fff; /*-- creates the thin white line inbetwen each link --*/
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}

div.navigation li a:hover { 
background: #195682; /*-- makes the background image change when the player hovers over that link--*/
}



/* ----- MAIN CONTENT ----- */



div.content {
	width:980px;/*-- sets the with of the content to 980 20 les than the actual width to allow for the pading --*/
	background-color:#FFF; /*-- sets the background colour of the main content section to white --*/
	margin-top:10px; /*-- creates a 10 pixel gap at the top and the bottom of the content section --*/
	padding:10px; /*-- aplyes 10 pixels at the side so the actual conent is not at the very edge of the content section --*/
	min-height:500px; /*-- makes sure there is a minumum height for the content --*/
	height:auto; /*-- sets the hights to auto alllowing the content within the section to define the side of the content section --*/
	text-align: left; /*-- make sure all text in the content section is aligned left --*/
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
}


div.content h1 {
	color: #195682; /*-- sets the colour of the font for the headings in the content section to the same colour blue as the logo --*/
	font:"Palatino Linotype", "Book Antiqua", Palatino, serif /*-- sets the font of the heading --*/
	
}

div.content h2 {
	color: #195682; /*-- sets the colour of the font for the headings in the content section to the same colour blue as the logo --*/
	font:"Palatino Linotype", "Book Antiqua", Palatino, serif /*-- sets the font of the heading --*/
	
}

div.content h3 {
	color: #195682; /*-- sets the colour of the font for the headings in the content section to the same colour blue as the logo --*/
	font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-align:left;
	font-size: 16px;
}

div.content h4 {
	color: #195682; /*-- sets the colour of the font for the headings in the content section to the same colour blue as the logo --*/
	font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 16px;
}

div.image_right{
	padding:5px;/*-- aplyes 5 pixel gap around the tag to ensure the image has a border --*/
float: right;/*-- allows the image to float to the right of the text --*/
width: auto;/*-- ensures the tag will conform to the size of the image contained inside the tag --*/
}

div.image_left{
	padding:5px;/*-- aplyes 5 pixel gap around the tag to ensure the image has a border --*/
float: left;/*-- allows the image to float to the right of the text --*/
width: auto;/*-- ensures the tag will conform to the size of the image contained inside the tag --*/
}

div.text_center{
	text-align:center
}


div.pic_container_left {
	width:450px;
	height:450px;
	float:left;
	border-width: 8px;
	border-style:solid;
	border-color:#195682;
	margin-bottom: 10px;
	
}


div.pic_container_right {
	width:450px;
	height:450px;
	float:right;
	border-width: 8px;
	border-style:solid;
	border-color: #195682;
	margin-bottom: 10px;
}



div.content2 {
	padding: 20px;	
}



/* ------SIDEBAR ---- */


div.sidebar {
background-color: #195682; /*-- sets the background colour for the sidebar --*/
float: right; /*-- makes the sidebar position to the right of the page --*/
width: 270px; /*-- sets the width of the sidebar --*/
}

div.sidebox {
border-style: solid;/*-- creates a solid border around the iner sidebox --*/
border-width: 2px;/*-- sets the width of the border to 2 pixels --*/
border-color:#000;/*-- sets the colour of the bordeer to black --*/
margin: 9px;/*-- margin in place to center the iner box --*/
width: 250px;/*-- sets the width of the sidebox --*/
background: white;/*-- sets the background color of the sidebox to white --*/
}

div.Union_Links {
	padding-left: 265px;
}

div.Association_links {
	padding-left: 225px;
}

div.sidebox a:link {
	font:"Palatino Linotype", "Book Antiqua", Palatino, serif;/*-- sets the font of the links in the sidebox --*/
	color: #195682;/*-- set the coulur of the links in the sidebox --*/
	text-decoration:none;/*-- removes the underline from the links --*/
}

div.sidebox a:hover {
	color:#000;/*-- changes the colour of the links to black when hovered over --*/
}

div.sidebox ul li
{ 
  margin: 0 0 6px 0; /*-- applyes a margin to the lists in the sidebox ensureing for corect spacing --*/
  line-height: 1.5em; /*-- increases the distance betwen each list element --*/
  }

div.sidebox h1 {
background-color:#164e76; /*-- applyes a background colour to the heading in the sidebox --*/
font-size: 15pt;/*-- sets the font sise of the heading in the sidebox --*/
color: white;/*-- sets the colour of the heading in the sidebox --*/
margin: 0px;/*-- sets the margin to 0 --*/
text-align: center;/*-- makes the heading centered in the sidebox --*/
font:"Palatino Linotype", "Book Antiqua", Palatino, serif;/*-- sets the font of the heading in the sidebox --*/
}






/* ----- FOOTER ----- */



div.footer { 
width:1000px;/*-- defines the width of the footer --*/
height:100px;/*-- defines the height of the footer --*/
background-image:url(style/footer.png);/*-- makes footer.png image the gackground of the footer --*/
margin-top:10px;/*-- applyes a margen to the top of the footer --*/
}