/* CSS Document
 ------------------------------
 Version: 1
 Author: Anthony Fryer
 */
/* Colour Pallette for the site
 --------------------------------
 
 Light green - #30B457
 Dark Green - #215B33
 Aqua blue - #007EA3
 Burnt orange - #E06F1D
 Purple - #393996
 Pink - #C70752
 Blue - #065E9C
 Yellow - #FBAA29
 Light Blue - #00B1F1
 Light grey - #EDEFEF
 off black - color:#373536    used in text and as the background of the body.
 
 Color as per user section
 -----------------------------
 home page Light green - #30B457
 .staying-healthy {color:#FBAA29;}
 .spare-time  {color:#00B1F1;}
 .working-jobs  {color:#393996;}
 .money-benefits  {color:#E06F1D;}
 .body2 {color:#007EA3;}
 .skills {color: #C70752;}
 .body5 {color:#065E9C;}
 
 */
/*----------------------------------------------------------------------------------------------------------
 Notes
 ------------------------------------------------------------------------------------------------------------
 
 How about visited ticks on anchors? Especially secopndary nav
 
 External links icons for external sites?
 
 Need a site map and content
 
 images??
 
 */
/* Basic Grid based layout for learning disabilities site
 
 ------------------------------------------------------------------------------------------------------------*/
#wrapper {
    width: 963px;
    margin: 0 auto;
    height: 100%;
    border-left: 10px solid #fff;
    border-right: 10px solid #fff;
    background: #fff;
}

#header {
    float: left;
    margin-right: 10px;
    margin-right: 0;
    width: 100%;
    margin: 0;
    height: 130px;
    background: #30B457 url(../images/logo.gif) right no-repeat;
}

/* --------------------------------------------------------------
 reset.css
 * Resets default browser CSS.
 Eric Meyer styleee!
 -------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1.3;
}
.hide {
	position: absolute;
	left: -4000px;
	width: 990px;
}
.hide_tab {
	position: absolute;
	left: -40000px;
	overflow:hidden;
	width: 165px;
	width: 0;
}
.hide_tab:active, .hide_tab:focus {
	text-decoration: none;
	text-align: center;
	background-color: #F00;
	color: #FFF;
	font-weight: bold;
	border-left: 1px solid #FFF;
	padding: 4px;
	margin-left: 1px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 165px;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

table, td, th {
    vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/* Remove annoying border on linked images. */
a img {
    border: none;
}

/* -----------------------------------------------------------------------
 typography.css
 * Sets up some sensible default typography.
 ----------------------------------------------------------------------------- */
/* Default font settings.
 
 The font-size percentage is of 16px. (0.625 * 16px = 10px) */
body {
    font-size: 100.01%;
}

body {
    font-size: 62.5%;
    color: #222;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* -----------------------------------------------------------------------
 
 Headings
 
 ---------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: #111;
}

h1 {
    font-size: 3.5em;
    line-height: 1;
    color: #ffffff;
    padding: 0.5em 0 0.5em 0.5em;
}

h2 {
    font-size: 4.0em;
    margin-bottom: 10px;
    color: #30B457;
    font-weight: 400;
}

h3 {
    font-size: 2.8em;
    line-height: 1;
    color: #30B457;
    font-weight: 900;
    margin-bottom: 0.5em;
}

h4 {
    font-size: 1.6em;
    line-height: 1.25;
    margin-bottom: 1.25em;
    color: #ffffff;
    font-weight: 700;
}

h5 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1.5em;
}

h6 {
    font-size: 1em;
    font-weight: bold;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
    margin: 0;
}

/*  Different color headings for diff sections
 
 ---------------------------------------------------------------------------------*/
.body6 h2, .body6 h3 {
    color: #FBAA29;
}

.body7 h2, .body7 h3 {
    color: #00B1F1;
}

.working-jobs h2, .working-jobs h3 {
    color: #393996;
}

.body3 h2, .body3 h3 {
    color: #E06F1D;
}

.body2 h2, .body2 h3, .body2 h4 {
    color: #007EA3;
}

.body4 h2, .body4 h3 {
    color: #C70752;
}

.body5 h2, .body5 h3, .body5 h4 {
    color: #065E9C;
}

/* Text elements
 
 ----------------------------------------------------------------------------------- */
p {
    font-size: 1.8em;
    font-weight: 500;
    color: #373536;
}

p {
    margin: 0 0 1em;
}

img.imagefloatleft {
    float: left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0;
}

img.imagefloatright {
    float: right;
    margin: 1em 0 1em 1em;
}

/* Anchor code is here
 
 -------------------------------------------------------------------------------------*/
a:link, a:visited {
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

#article a:link, #article a:visited {
    text-decoration: underline;
}

#article a:hover, #article a:active {
    text-decoration: underline;
    background-color: #FFFF99;
}

#yellowhover a:hover, #yellowhover a:active{ 
    color: #000;
    background-color: #FFFF99;
    text-decoration: none;
}
/* external links code
 
 -------------------------------------------------------------------------------------*/
/* Use this class if a link gets an icon when it shouldn't. */
body a.noicon {
    background: transparent none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make sure the icons are not cut */
.external, .tel {
    background-repeat: no-repeat;
    display: inline-block;
}

/* External links */
.external {background-image:
    url(../images/icons/external.gif);  background-position: right center;padding: 0px 18px 0px 0px;
}

a[href
^= "mailto:"] {background-image:
    url(../images/icons/email.png);  
    background-position: right center;    padding: 0px 18px 0px 0px;    background-repeat: no-repeat;
}

.tel {
    background-image: url(../images/icons/telephone.png);   
    background-position: left center;   padding: 0px 0px 0px 18px;
}

/* icon for word pdf documents and external links */
	img.linkicon, img.pdficon,  img.wordicon,  img.exlinkicon {
	border: 0;
	margin: 0 0 0 2px;
}

/* Different color sections here
 
 ---------------------------------------------------------------------------------------*/
.index a:link, .index a:visited, .index a:hover, .index a:active {
    color: #30B457;
}

.body2 a:link, .body2 a:visited, .body2 a:hover, .body2 a:active {
    color: #007EA3;
}

.body3 a:link, .body3 a:visited, .body3 a:hover, .body3 a:active {
    color: #E06F1D;
}

.body4 a:link, .body4 a:visited, .body4 a:hover, .body4 a:active {
    color: #C70752;
}

.body5 a:link, .body5 a:visited, .body5 a:hover, .body5 a:active {
    color: #065E9C;
}

.body6 a:link, .body6 a:visited, .body6 a:hover, .body6 a:active {
    color: #FBAA29;
}

.body7 a:link, .body7 a:visited, .body7 a:hover, .body7 a:active {
    color: #00B1F1;
}

/* Other misc text related stuff
 
 ------------------------------------------------------------------------------------------*/
blockquote {
    margin: 1.5em;
    color: #666;
    font-style: italic;
}

strong {
    font-weight: bold;
}

em, dfn {
    font-style: italic;
}

dfn {
    font-weight: bold;
}

sup, sub {
    line-height: 0;
}

abbr, acronym {
    border-bottom: 1px dotted #666;
}

address {
    margin: 0 0 1.5em;
    font-style: italic;
}

del {
    color: #666;
}

pre {
    margin: 1.5em 0;
    white-space: pre;
}

pre, code, tt {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height: 1.5;
}

/* Lists
 
 -------------------------------------------------------------- */
li ul, li ol {
    margin: 0;
    padding: 0em;
}

ul, ol {
    margin: 0;
    padding: 0em;
}

ul {
    list-style-type: none;
    font-weight: 500;
}

ol {
    list-style-type: none;
}

dl {
    margin: 0 0 1.5em 0;
}

dl dt {
    font-weight: bold;
}

dd {
    margin-left: 1.5em;
}

/* Article list code to ensure colors remain relevent */

.body3 #article ul {
    list-style-image: url(../images/list-money.gif);
}

.body2 #article ul {
    list-style-image: url(../images/list-housing.gif);
}

.body4 #article ul {
    list-style-image: url(../images/list-working.gif);
}

.body5 #article ul {
    list-style-image: url(../images/list-care.gif);
}

.body6 #article ul {
    list-style-image: url(../images/list-healthy.gif);
}

.body7 #article ul {
    list-style-image: url(../images/list-spare.gif);
}

.index #article ul {
    list-style-image: url(../images/list-green.gif);
}


/* Misc classes
 -------------------------------------------------------------- */
.small {
    font-size: 90%;
    font-weight: 900;
}

.large {
    font-size: 200%;
    font-weight: 900;
    line-height: 0.6em;
    padding-top: 20px;
}

.x-large {
    font-size: 240%;
    font-weight: 900;
}

a.hide {
    display: none;
}

span .large {
    font-size: 120%;
}

.quiet {
    color: #666;
}

.loud {
    color: #000;
}

.highlight {
    background: #ff0;
}

.added {
    background: #060;
    color: #fff;
}

.removed {
    background: #900;
    color: #fff;
}



/* Body
 ----------------------------------------------------------------------------------------*/
body {
    background: #373536;
}

/*  Header and search form!
 
 ----------------------------------------------------------------------------------------------------*/
fieldset.search {
    color: #000000;
    padding: 1em;
    float: left;
    border: none;
    width: 243px;
}

.search input, .search button {
    border: none;
    float: left;
}

.search input.box {
    color: #000000;
    font-size: 2.6em;
    width: 190px;
    height: 30px;
    padding: 5px 5px;
    background: #ffffff;
    margin-right: 5px;
}

.search input.box:focus {
    background: #ffffff;
    color: #000000;
    outline: none;
}

.search button.btn {
    background: #eaf2c7;
    color: #30b457;
    border: none;
    font-weight: bold;
    display: block;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

.search button.btn:hover {
    background: #fbc900;
}

/* Aside
 
 ----------------------------------------------------------------------------------------*/
#secondary-nav {
    font-size: 1.5em;
    font-weight: 600;
	margin:0;
	padding:0;   
}

#secondary-nav li a { display: inline-block;
	margin:0;margin-bottom: 10px;
    color: #fff;
    text-decoration: none;
    background: #30B457;
 	padding:10px;
border:1px solid #000;
}
#secondary-nav li a {width:245px;}

#secondary-nav a:link, #secondary-nav a:visited {
    color: #fff;
}
#secondary-nav a:hover {
    display: inline-block;
    color: #000;/*#fff*/
    text-decoration: none;	border:1px solid #000;
	background-color: #FFFF99;

}
 
/* to change the color section back to normal hover action comment out all this */

.body2 #secondary-nav a.current {
	background-color:#007EA3;}

.body3 #secondary-nav a.current {
	background-color:#E06F1D;}

.body4 #secondary-nav a.current {
	background-color:#C70752;	}
	
.body5 #secondary-nav a.current {
	background-color:#065E9C;}

.body6 #secondary-nav a.current {
	background-color:#FBAA29;	}
	
.body7 #secondary-nav a.current {
	background-color:#00B1F1;	}
/*  to change the color section back to normal hover action comment out all this to here 

you will aso need to change the color round and the background color below*/
	


/* Breadcrumb
 
 --------------------------------------------------------------------------------------------------------*/
#bread {
    padding: 3px;
    padding-bottom: 10px;
    font-weight: 500;
}

#bread ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: inline;
    border: none;
    font-size: 15px;
    list-style-type: none;
    font-weight: 500;
}

#bread ul li {
    margin-left: 0 !important;
    padding-left: 2px !important;
    border: none;
    display: inline;
    font-size: 12px;
}

#bread li, #bread li li, #bread li li li, #bread li li li li {
    font-size: 12px;
}

#content {
    margin: 0 0 1.5em 0;
    padding: 0;
    float: left;
    background: url(../images/fauxcolumn.gif) repeat-y;
}

/*  background colour style changer
 
 --------------------------------------------------------------------------------------------------------*/
#style-changer {
    display: inline;
    margin: 0;
    padding: 0;
}

#style-changer li {
    display: inline;
    margin: 0;
    padding: 0;
}

#style-changer ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

/*  Article
 
 ------------------------------------------------------------------------------------------------------------*/
#article ul {
    margin: 0 0 0 3em;
}

#article li {
    font-size: 1.8em;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #373536;
    line-height: 1.8em;
}

#article {
    padding-top: 10px;
}

/*  Vcard
 
 ------------------------------------------------------------------------------------------------------------------ */
.vcard {
    font-size: 1.5em;
    padding: 1.5em;
    background: #f6f6f6;
    margin: 1em 1em 0.5em 1em;
    border-top: 1px solid #b2b2b2;
    border-left: 1px #b2b2b2 solid;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    width: 300px;
	display:inline-block;
}

.vcard a[href ^= "mailto:"],.vcard .url, .vcard .tel, .tel {
    padding: 2px 0px 2px 20px;
    margin: -2px 0;
    background-repeat: no-repeat;
    background-position: left center;
}

.vcard .url {background-image: url(../images/icons/world_link.png);    
	padding: 2px 0px 2px 20px;
    margin: -2px 0;
    background-repeat: no-repeat;
    background-position: left center;
}

.organization-unit, .organization-name {
    font-size: 1.4em;
    font-weight: 900;
}

.vcard .adr {
    padding: 0px 0px 2px 20px;
    background-image: url(../images/icons/house.png);
    background-repeat: no-repeat;
    background-position: top left;
    margin: 5px 0;
}

#hcard-small {
    width: 200px;
    margin: 0 auto;
}

/*  Footer
 
 ------------------------------------------------------------------------------------------------------------------*/
#footer-nav {
	/*font-size: 1.3em;*/
	font-size: 1.3em;
	font-weight: 600;
	height: 150px;
	margin: 10px;
	text-align: center;
	color: #fff;
}

#footer-nav li {
    float: left;
    list-style-type: none;
    color: #fff;
    padding: 8px 8px 15px 8px;
}

#footer-nav li a {
	background-color: #215B33;
	color: #fff;  
	padding: 8px 8px 15px 8px;	
}

/* AKS 13th June 2011 */
#footer-nav a:hover, a:active {
    background-color: #FFFF99;
	color: #000000;
}

#footer img {
    float: right;
    padding: 10px;
}

#footer-content {
    padding: 10px 0 0 0;
}

#footer h4, #footer-nav li {
    padding-left: 10px;
	padding-top: 5px;
}

#website-info p {
    font-size: 1.0em;
    color: #fff;
    padding: 0 10px;
}

#footer a {
    color: #fff;
    text-decoration: underline;
}

#nav {
    font-size: 1.9em;
    font-weight: 600;
    color: #fff;
    background: #FFFFFF;
    text-align: left;
    padding-bottom: 10px;
}

#navlink {
    /*font-size: 1.9em;*/
    font-weight: 600;
    color: #fff;
    background: #FFFFFF;
    text-align: left;
    padding-bottom: 10px;
}

#nav a {
    display: block;
    height: 100%;
    width: 100%
}

#nav1, #nav2, #nav3, #nav4, #nav5, #nav6, #nav7 {
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 119px;
    height: 120px;
    padding: 5px;
}

#navfoot {
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 119px;
    height: 120px;
    padding: 5px;
	font-size: 1em;
}

#navfootbig {
    float: left;
    margin-right: 10px;
    /*margin-top: 10px;*/
    margin-bottom: 10px;
    width: 155px;
    height: 20px;
    padding: 5px;
	font-size: 1.5em;
	background: #215B33
    /*font-weight: 600;
    color: #fff;
    ;
    text-align: left;
    padding-bottom: 10px;*/
}

#navfootbig2 {
    float: left;
    margin-right: 10px;
    /*margin-top: 10px;*/
    /*margin-bottom: 10px;*/
    width: 155px;
    height: 20px;
    padding: 5px;
	font-size: 1.5em;
    font-weight: 600;
    /*color: #fff;*/
    /*background: #215B33;*/
    text-align: left;
    padding-bottom: 10px;
}

#nav1 {
    background: #215B33 url(../images/on.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav2 {
    background: #007EA3 url(../images/key.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav3 {
    background: #E06F1D url(../images/money.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav4 {
    background: #C70752 url(../images/jobs.png) bottom no-repeat;
}

#nav5 {
    background: #065E9C url(../images/sun.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav6 {
    background: #FBAA29 url(../images/person.png) bottom no-repeat;
}

#nav7 {
    background: #00B1F1 url(../images/clock.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav7 {
    margin-right: 0;
}

#nav a:link, #nav a:visited {
    color: #fff;
}

#nav a:hover, #nav a:active {
    color: #000;
    background-color: #FFFF99;
    text-decoration: none;
}


#nav1 a:hover, #nav1 a:active, #nav2 a:hover, #nav2 a:active, #nav3 a:hover, #nav3 a:active, #nav4 a:hover, #nav4 a:active, #nav5 a:hover, #nav5 a:active, #nav6 a:hover, #nav6 a:active, #nav7 a:hover, #nav7 a:active {
    float: left;
    width: 119px;
    height: 120px;
}

#nav1 a:hover, #nav1 a:active {
    background: #FFFF99 url(../images/on-hl.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav2 a:hover, #nav2 a:active {
    background: #FFFF99 url(../images/key-hl.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav3 a:hover, #nav3 a:active {
    background: #FFFF99 url(../images/money-hl.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav4 a:hover, #nav4 a:active {
    background: #FFFF99 url(../images/jobs-hl.png) bottom no-repeat;
}

#nav5 a:hover, #nav5 a:active {
    background: #FFFF99 url(../images/sun-hl.png) bottom no-repeat;
    background-position: 50% 85%;
}

#nav6 a:hover, #nav6 a:active {
    background: #FFFF99 url(../images/person-hl.png) bottom no-repeat;
}

#nav7 a:hover, #nav7 a:active {
    background: #FFFF99 url(../images/clock-hl.png) bottom no-repeat;
    background-position: 50% 85%;
}

#aside {
    float: left;
    margin-right: 10px;
    width: 268px;
    background: #EDEFEF;
}

#article {
    float: right;
    margin-right: 10px;
    margin-right: 0;
    padding-bottom: 40px;
    width: 680px; /*background: url(../images/fauxcolumn.gif) repeat-y top left; background-position: 0 0;*/
}

#footer {
    width: 963px;
    margin: 0;
    background: #30B457;
    height: 140px;
    clear: both;
    position: relative;
}

#footer-content {
    background: #30B457;
    margin: 0;
    background: #30B457;
    margin-top: 40px;
    clear: both;
    position: relative;
    height: 70px;
}

#website-info {
    margin-right: 10px;
    margin-right: 0;
    margin: 0;
    clear: both;
    position: absolute;
    bottom: 0;
}

.resultlist {display:inline; list-style:none !important;}
.resultlist li {float: left; padding-right:10px;}