@charset "UTF-8";
/* CSS Document */

/*
Colour Ref:
Light Green:#e8f4d9
Mid Green:#c3dfa4
Dark Green:#8cc63f
Grey:#717074
Orange:#fa9a4d
Blue:#3685e2
*/


/* Rollover Link Colours for main body of website*/

.style1 {font-weight:bold;}

.style2 {
	color: #FFFFFF;
	font-weight: bold;
	}

a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration:underline;
	color: #FFFFFF;
}
a:active {
	text-decoration:underline;
	color: #FFFFFF;
}

/* This Centers the Website within the browser window and tell the text to align left. It also adds a background image with a slight drop shadow on either edge that repeats on the Y axis to form the sites boarder */

body {
text-align:center;
}

#wrapper {
text-align:left;
margin-left:auto;
margin-right:auto;
width:1000px;
}

/* The start of the header section, this contains Logo, Login button nd news button */

#header {
background:url(../images/bg_white.jpg) repeat-y center;
width:1000px;
height:80px;
padding:0 0 0 0;
margin:-10px 0 0 5px;
}

img {
border-style:none;
}

#header img{
float:left;
padding:0 0 5px 5px;
margin:10px 0 0 0;
}

/* This puts the Login and news buttons on the right hand side of the website*/

#header_btns {
float:left;
width:100px;
padding:0 10px 0 0;
margin:-12px 0 0 660px;
}

/* This puts adds a background image to the Login link and moves the dive to the top of the screen */

#login_btn {
background:url(../images/login.jpg) no-repeat;
height:28px;
padding:0 0 0 0;
margin:0 0 15px 0;
}

#login_btn p {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
padding:5px 0 0 35px;
}

/* This puts adds a background image to the News link and reduces the gap between this and the login button */

#news_btn {
background:url(../images/news.jpg) no-repeat;
height:28px;
padding:0 0 0 0;
margin:-10px 0 0 0;
}

#news_btn p {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
padding:5px 0 0 35px;
margin:0;
}

/* This is the navigation section, adding background colour and the links are an un-ordered list */

#nav {
float:left;
background:url(../images/bg_grey.jpg) repeat-y center;
width:1000px;
height:28px;
margin:0 0 0 5px;
}

#nav ul {
text-align:right;
list-style:none;
padding:0 0 0 0;
margin:0 0 0 0;
}

#nav li {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:18px;
font-weight:600;
display:inline;
padding:0 30px 0 40px;
margin:0;
}

/*This is the start of the main content*/
/* This adds backgound colour to the main content area and makes sure its form edge to edge*/

#main_content {
float:left;
background:url(../images/bg_green.jpg) repeat-y center;
height:100%;
width:980px;
padding:10px 10px 20px 10px;
margin:0 0 0 5px;
}

/*This is the start of the footer section*/
/* This styles the llinks within the footer section*/

#footer a:link {
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
#footer a:hover {
	text-decoration:underline;
	color: #FFFFFF;
}
 #footera:active {
	text-decoration: underline;
	color: #FFFFFF;
}

/* this is the main green section that contains the kadence logo, copyright, quote and links */

#footer {
float:left;
background:url(../images/bg_white.jpg) repeat-y center;
width:1000px;
margin:0 0 0 5px;
}


#quote {
background:url(../images/bg_darkgreen.jpg) repeat-y center; 
height:60px;
width:1000px;
margin:0 0 0 0;
}

/* the left side contains Kandece logo and copy right info, this aligns the two at the bottom of the green bar and styles the text */

#footer_left {
float:left;
width:150px;
padding:15px 0 0 10px;
margin:0 0 0 0;
}

#footer_left p {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
padding:0 0 0 4px;
margin:0 0 0 0;
}

#footer_left img {
padding:0 0 0 0;
margin:0 0 0 0;
}

/* This dive styles the quote/ text in the middle of the green bar */

#footer_center {
float:left;
text-align:center;
width:660px;
padding:0;
margin:0;
}

#footer_center h2 {
font-family: Arial, Helvetica, sans-serif;
color:#c3dfa4;
text-align:center;
font-size:18px;
font-weight:lighter;
padding:9px 0 0 0;
margin:0;
}

/* This contains, styles and positions the footer links on the right hand side of the footer bar */

#footer_right {
float:right;
width:180px;
padding:40px 0 0 0;
margin:0 0 0 0;
}

#footer_right p{
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
padding:0 0 0 0;
margin:0 0 0 40px;
}

/* This adds a backgound colour to the bottom grey bar and controls width and margins */

#bar {
background:url(../images/bottom.jpg) no-repeat center;
height:38px;
width:1000px;
margin:14px 0 0 0;
}

#bar p {
text-align:right;
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
padding:0 0 0 0;
margin:3px 20px 0 0;
}