/* -------------------------------------------------------------------------
The Crown Prosecution Service
Education Screen Styles

last update: 2 February 2010, 4.00pm
author: Andy Gosling
email: andy@ecru.co.uk
website: http://www.ecru.co.uk
------------------------------------------------------------------------- */

body {
	color: #000;
}

#education {
	background: #FFF url(../images/education/background.jpg) repeat-y 0 0;
}

#education #header {
	background: #005384  url("../images/education/header_bg.jpg") repeat-x;
}

#education.start {
	background-image: none;
}

#education #wrapper {
	width: 960px;
}

#education #content {
	margin-top: 10px;
}

#education #primaryContent {
	margin: 0 0 0 240px !important;
}

/* typography ------------------------------------------------------------ */

#education h1,
#education h2,
#education h3,
#education h4 {
	clear: left;
	font-family: "Lucida Grande", Arial, Tahoma, "Trebuchet MS", "Lucida Sans Unicode", Verdana, sans-serif !important;
}

#education h1 {
	color: #6D723F !important;
}

#education h2 {
	color: #4B6E8A !important;
}

#education h3 {
	color: #A95633 !important;
}

#education #content.larger p,
#education #content.larger li,
#education #content.larger dd {
	font-size: 1.17em;
}

#education #content.larger p.intro {
	font-size: 1.33em;
}

.hrule {
	background: url(../images/education/rule.gif) no-repeat 0 0;
	height: 6px;
	width: 720px;
	margin: 30px 0;
	clear: left;
}

#education #primaryContent ul li {
	background: url("../images/education/list-bullet.gif") no-repeat 0 0.6em;
}

#education #primaryContent .image {
	clear: left;
	float: left;
	margin: 0 20px 15px 0;
}

/* navigation ------------------------------------------------------------ */

#education #navigation {
	width: 200px !important;
	margin: 20px 0 0 20px;
}

#education #navigation ul {
	background: #81A8C5 url(../images/education/nav_bg.jpg) no-repeat 0 0;
	border: none;
}

#education #navigation ul li,
#education #navigation ul li a {
	background: none;
	color: #000;
	border: none;
}

#education #navigation ul li {
	border-bottom: 1px solid #FFF;
}

#education #navigation ul li ul li {
	border: none;
}

#education #navigation ul li.current ul li a,
#education #navigation ul li ul li a,
#education #navigation ul li.open ul li a {
	background: transparent url(../images/education/subnav_bullet.gif) no-repeat 26px 0;
}

#education #navigation ul li a:hover,
#education #navigation ul li a:active,
#education #navigation ul li.current a:hover,
#education #navigation ul li.current a:active {
	background: #9AB8D0 url(../images/education/nav_hover_bg.jpg) no-repeat 0 0;
}

#education #navigation ul li ul li a:hover,
#education #navigation ul li ul li a:active,
#education #navigation ul li.current ul li a:hover,
#education #navigation ul li.current ul li a:active {
	background: #9AB8D0 url(../images/education/subnav_hover_bg.jpg) no-repeat 0 0;
}

/* current */ 

#education #navigation ul li.current a,
#education #navigation ul li.current a:hover,
#education #navigation ul li.current a:active {
	background: transparent url(../images/education/nav_hover_bg.jpg) no-repeat 0 0;
}

#education #navigation ul li ul li.current a,
#education #navigation ul li ul li.current a:hover,
#education #navigation ul li ul li.current a:active {
	background: transparent url(../images/education/subnav_current.jpg) no-repeat 0 0;
}

#education #navigation ul li#age5-7.current a,
#education #navigation ul li#age5-7.current a:hover,
#education #navigation ul li#age5-7.current a:active {
	background: transparent url(../images/education/nav_hover_bg_5to7.jpg) no-repeat 0 0;
}

#education #navigation ul li#age5-7 ul li.current a,
#education #navigation ul li#age5-7 ul li.current a:hover,
#education #navigation ul li#age5-7 ul li.current a:active {
	background: transparent url(../images/education/subnav_hover_bg_5to7.jpg) no-repeat 0 0;
}

#education #navigation ul li#age7-11.current a,
#education #navigation ul li#age7-11.current a:hover,
#education #navigation ul li#age7-11.current a:active {
	background: transparent url(../images/education/nav_hover_bg_7to11.jpg) no-repeat 0 0;
}

#education #navigation ul li#age7-11 ul li.current a,
#education #navigation ul li#age7-11 ul li.current a:hover,
#education #navigation ul li#age7-11 ul li.current a:active {
	background: transparent url(../images/education/subnav_hover_bg_7to11.jpg) no-repeat 0 0;
}

#education #navigation ul li#age11-18.current a,
#education #navigation ul li#age11-18.current a:hover,
#education #navigation ul li#age11-18.current a:active {
	background: transparent url(../images/education/nav_hover_bg_11to18.jpg) no-repeat 0 0;
}

#education #navigation ul li#age11-18 ul li.current a,
#education #navigation ul li#age11-18 ul li.current a:hover,
#education #navigation ul li#age11-18 ul li.current a:active {
	background: transparent url(../images/education/subnav_hover_bg_11to18.jpg) no-repeat 0 0;
}

/* open */

#education #navigation ul li.open a {
	background: transparent url(../images/education/nav_current.gif) no-repeat 0 0;
}

/* 5 to 7 */

#education #navigation ul li#age5-7 {
	background: #AEB651 url(../images/education/nav_bg_5to7.jpg) no-repeat 0 0;
}

#education #navigation ul li#age5-7 ul {
	background: none !important;
}

#education #navigation ul li#age5-7 ul li a,
#education #navigation ul li#age5-7.current ul li a {
	background: url(../images/education/subnav_bullet_5to7.gif) no-repeat 0 0;
}

#education #navigation ul li#age5-7 a:hover,
#education #navigation ul li#age5-7 a:active {
	background: #C3C971 url(../images/education/nav_hover_bg_5to7.jpg) no-repeat 0 0;
}

#education #navigation ul li#age5-7 ul li a:hover,
#education #navigation ul li#age5-7 ul li a:active,
#education #navigation ul li#age5-7.current ul li a:hover,
#education #navigation ul li#age5-7.current ul li a:active {
	background: #C3C971 url(../images/education/subnav_hover_bg_5to7.jpg) no-repeat 0 0;
}

/* 7 to 11 */

#education #navigation ul li#age7-11 {
	background: #F9C741 url(../images/education/nav_bg_7to11.jpg) no-repeat 0 0;
}

#education #navigation ul li#age7-11 ul {
	background: none !important;
}

#education #navigation ul li#age7-11 ul li a,
#education #navigation ul li#age7-11.current ul li a {
	background: url(../images/education/subnav_bullet_7to11.gif) no-repeat 0 0;
}

#education #navigation ul li#age7-11 a:hover,
#education #navigation ul li#age7-11 a:active {
	background: #FAD65E url(../images/education/nav_hover_bg_7to11.jpg) no-repeat 0 0;
}

#education #navigation ul li#age7-11 ul li a:hover,
#education #navigation ul li#age7-11 ul li a:active,
#education #navigation ul li#age7-11.current ul li a:hover,
#education #navigation ul li#age7-11.current ul li a:active {
	background: #FAD65E url(../images/education/subnav_hover_bg_7to11.jpg) no-repeat 0 0;
}

/* 11 to 18 */

#education #navigation ul li#age11-18 {
	background: #E27949 url(../images/education/nav_bg_11to18.jpg) no-repeat 0 0;
	zoom: 1;
}

#education #navigation ul li#age11-18 ul {
	background: none !important;
}

#education #navigation ul li#age11-18 ul li a,
#education #navigation ul li#age11-18.current ul li a {
	background: url(../images/education/subnav_bullet_11to18.gif) no-repeat 0 0;
}

#education #navigation ul li#age11-18 a:hover,
#education #navigation ul li#age11-18 a:active {
	background: #E89B67 url(../images/education/nav_hover_bg_11to18.jpg) no-repeat 0 0;
}

#education #navigation ul li#age11-18 ul li a:hover,
#education #navigation ul li#age11-18 ul li a:active,
#education #navigation ul li#age11-18.current ul li a:hover,
#education #navigation ul li#age11-18.current ul li a:active {
	background: #E89B67 url(../images/education/subnav_hover_bg_11to18.jpg) no-repeat 0 0;
}

/* landing page ---------------------------------------------------------- */

.start #primaryContent {
	margin-left: 240px;
}

#education .home h1 {
	width: 720px;
	height: 250px;
	background: #FFF url(../images/education/h1_home.jpg) no-repeat;
	text-indent: -999em;
	margin: 0 !important;
}

#education .home p {
	margin-top: 0 !important;
	margin: 0.4166em 0;
}

#education .home ul {
	margin: 0;
}

#education .home h2 {
	margin: 0 !important;
}

#education .home .column1,
#education .home .column1a,
#education .home .column1b,
#education .home .column2 {
	float: left;
	position: relative;
}

#education .home .column1 {
	width: 460px;
}

#education .home .column1a,
#education .home .column1b {
	width: 185px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

#education .home .column1a {
	background-image: url(../images/education/home_1a_bg.jpg);
	padding: 71px 30px 120px 15px;
	min-height: 197px;
}

#education .home .column1b {
	background-image: url(../images/education/home_1b_bg.jpg);
	padding: 190px 30px 0 15px;
	min-height: 198px;
}

#education .home .column2 {
	width: 185px;
	min-height: 208px;
	background: url(../images/education/home_2_bg.jpg) no-repeat 0 0;
	padding: 153px 30px 157px 15px;
}

#education .activity,
#education .youtube {
	margin: 20px 0 40px 0;
}

/* intro panel */

#education .home .column1 .intro {
	width: 410px;
	min-height: 98px;
	background: #FFF url(../images/education/home_intro_panel_bg.jpg) no-repeat;
	position: relative;
	padding: 11px 35px 21px 15px;
}

#education .home .column1 .intro p {
	font-size: 1.1666em;
	line-height: 1.3em;;
}

/* age panels */

#education .home h2 {
	font-size: 1em;
	text-indent: -999em;
	position: absolute;
	top: 6px;
	left: 6px;
	width: 200px;
	height: 60px;
	background: url(../images/education/home_age_titles.gif) no-repeat 0 -80px;
}

#education .home h2 a:link,
#education .home h2 a:visited {
	display: block;
	width: 200px;
	height: 60px;
	border: none;
}

#education .home h2 a {
	display: block;
	background: url(../images/education/home_age_titles.gif) no-repeat 0 -80px;
}

#education .home .column1b h2 {
	top: 121px;
	background-position: -220px -80px;
	height: 65px;
}

#education .home .column1b h2 a {
	background-position: -220px -80px;
	height: 65px;
}

#education .home .column2 h2 {
	top: 96px;
	background-position: -440px -80px;
	height: 55px;
}

#education .home .column2 h2 a {
	background-position: -440px -80px;
	height: 55px;
}

#education .home .column1a h2 a:hover,
#education .home .column1a h2 a:active {
	background-position: 0 0 !important;
}

#education .home .column1b h2 a:hover,
#education .home .column1b h2 a:active {
	background-position: -220px 0 !important;
}

#education .home .column2 h2 a:hover,
#education .home .column2 h2 a:active {
	background-position: -440px 0 !important;
}

/* lists */

#education .home ul {
	margin-left: 0;
}

#education .home li {
	background-image: url(../images/education/list-bullet-white.gif) !important;
	margin: 0 !important;
}

/* hyperlinks */

#education .home p a:link,
#education .home p a:visited,
#education .home li a:link,
#education .home li a:visited {
	color: #000;
	border-bottom-color: #FFF;
}

#education .home .column1a p a:link,
#education .home .column1a p a:visited,
#education .home .column1a li a:link,
#education .home .column1a li a:visited {
	border-bottom-color: #DDE0A5;
}

#education .home .column1b p a:link,
#education .home .column1b p a:visited,
#education .home .column1b li a:link,
#education .home .column1b li a:visited {
	border-bottom-color: #FDECAA;
}

#education .home .column2 p a:link,
#education .home .column2 p a:visited,
#education .home .column2 li a:link,
#education .home .column2 li a:visited {
	border-bottom-color: #F3C59F;
}

#education .home p a:hover,
#education .home p a:active,
#education .home li a:hover,
#education .home li a:active {
	color: #FFF;
	border-bottom-color: #FFF !important;
}

/* go buttons */

#education p.go {
	position: absolute;
	bottom: 0;
	right: 27px;
	width: 61px;
	height: 61px;
}

#education .home .column1a p.go {
	bottom: 115px;
}

#education .home .column2 p.go {
	bottom: 155px;
}

#education p.go a:link,
#education p.go a:visited {
	display: block;
	width: 61px;
	height: 61px;
	background: url(../images/education/go_buttons.gif) no-repeat 0 0;
	text-indent: -999em;
	border: none;
}

#education p.go a:hover,
#education p.go a:active {
	background-position: 0 -70px;
}

#education .home .column1b p.go a:link,
#education .home .column1b p.go a:visited {
	background-position: -70px 0;
}

#education .home .column1b p.go a:hover,
#education .home .column1b p.go a:active {
	background-position: -70px -70px;
}

#education .home .column2 p.go a:link,
#education .home .column2 p.go a:visited {
	background-position: -140px 0;
}

#education .home .column2 p.go a:hover,
#education .home .column2 p.go a:active {
	background-position: -140px -70px;
}

/* column footers */

#education .foot {
	width: 230px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#education .home .column1 .intro .foot {
	width: 460px;
	height: 21px;
	background: url(../images/education/home_intro_panel_foot.gif) no-repeat 0 0;
}

#education .home .column1a .foot {
	background: url(../images/education/home_1a_foot.jpg) no-repeat 0 0;
	height: 117px;
}

#education .home .column1b .foot {
	background: url(../images/education/home_1b_foot.jpg) no-repeat 0 0;
	height: 3px;
}

#education .home .column2 .foot {
	background: url(../images/education/home_2_foot.jpg) no-repeat 0 0;
	height: 157px;
}

/* content headers ------------------------------------------------------- */

#education h1 {
	width: 720px;
	margin-top: 0 !important;
	text-indent: -999em;
	float: left;
}

#education.parents-teachers h1 {
	width: auto;
	margin-top: 0 !important;
	text-indent: 0;
	float: none;
}

#education h1.decision {
	height: 158px;
	background: transparent url(../images/education/decision_header.jpg) no-repeat 0 0;
}

#education h1.court {
	height: 135px;
	background: transparent url(../images/education/court_header.jpg) no-repeat 0 0;
}

#education h1.witness {
	height: 135px;
	background: transparent url(../images/education/witness_header.jpg) no-repeat 0 0;
}

/* flash ----------------------------------------------------------------- */

#crown,
#magistrates {
	height: 380px; 
	width: 720px;
}

#flashholder {
	height: 540px; 
	width: 720px;
}

/* glossary -------------------------------------------------------------- */

#education #glossaryWrap {
	margin-top: 40px;
}

#education #glossary dt,
#education #glossary2 dt {
	color: #A95633;
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 1.3333em 0 0.6666em 0;
	clear: left;
}

#education #glossary .tooltip-style {
	display: none;        /* required */
	position: absolute;   /* required */
	padding: 15px;
	border: 1px solid #999;
	background-color: white;
	width: 500px;
}

#education #glossary dd {
	margin: 0 0 1.4em 0 !important;
	clear: left;
}

#education #glossary img,
#education #glossary2 img {
	float: left;
	margin: 0 15px 30px 0;
}

#education .tooltip-target {
	cursor: help;
	border-bottom: 1px dotted #A95633 !important;
}

/* 11 to 18 landing page ------------------------------------------------- */

#education.age11to18 p,
#education.age11to18 li {
	color: #000;
}

#education.age11to18 .header {
	margin-bottom: 20px;
	position: relative;
}

#education.age11to18 .header .top {
	background: url(../images/education/age_landing_header-top.gif) no-repeat 0 0;
	height: 2px;
	width: 720px;
	position: absolute;
	top: 0;
	left: 0;
}

#education.age11to18 .columns {
	clear: left;
	background: url(../images/education/age_landing_columns_bg.jpg) no-repeat 0 0;
}

#education.age11to18 .columns .foot {
	background: url(../images/education/age_landing_columns_foot.gif) no-repeat 0 0;
	height: 2px;
	width: 720px;
	position: relative;
	clear: both;
}

.age11to18 h1 {
	width: 226px !important;
	min-height: 254px;
	float: left;
	margin: 0 21px 0 0 !important;
	background: url(../images/education/11-18_landing_h1.jpg) no-repeat 0 0;
}

.age11to18 .agegrouplanding .intro {
	width: 443px;
	min-height: 254px;
	float: left;
	padding: 0 15px;
	background: url(../images/education/11-18_landing_intro_bg.jpg) no-repeat bottom left;
}

.age11to18 .agegrouplanding .intro li {
	background-image: url(../images/education/list-bullet-white.gif) !important;
}

.age11to18 .agegrouplanding .column1,
.age11to18 .agegrouplanding .column2,
.age11to18 .agegrouplanding .column3 {
	width: 226px;
	float: left;
	margin-right: 21px;
	position: relative;
	padding-bottom: 60px;
	background: url(../images/education/age_landing_columns_bg.jpg) no-repeat 0 0;
}

#education.age11to18 .agegrouplanding .column2 {
	background-position: -247px 0;
}

#education.age11to18 .agegrouplanding .column3 {
	background-position: -494px 0;
	margin-right: 0;
}

.age11to18 .agegrouplanding .columns h2 {
	width: 226px;
	height: 104px;
	margin: 0 0 15px 0 !important;
	background: url(../images/education/11-18_landing_h2.jpg) no-repeat 1px 0;
}

.age11to18 .agegrouplanding .columns h2 a {
	width: 226px;
	height: 96px;
	display: block;
	border: none !important;
	background: url(../images/education/11-18_landing_h2.jpg) no-repeat 1px 0;
	text-indent: -999em;
}

.age11to18 .agegrouplanding .columns .column2 h2,
.age11to18 .agegrouplanding .columns .column2 h2 a {
	background-position: -246px 0;
}

.age11to18 .agegrouplanding .columns .column3 h2,
.age11to18 .agegrouplanding .columns .column3 h2 a {
	background-position: -493px 0;
}

.age11to18 .agegrouplanding .columns h2 a:hover,
.age11to18 .agegrouplanding .columns h2 a:active {
	background-position: 1px -110px;
}

.age11to18 .agegrouplanding .columns .column2 h2 a:hover,
.age11to18 .agegrouplanding .columns .column2 h2 a:active {
	background-position: -246px -110px;
}

.age11to18 .agegrouplanding .columns .column3 h2 a:hover,
.age11to18 .agegrouplanding .columns .column3 h2 a:active {
	background-position: -493px -110px;
}

.age11to18 .agegrouplanding .column1 p,
.age11to18 .agegrouplanding .column2 p,
.age11to18 .agegrouplanding .column3 p {
	margin-left: 15px !important;
	margin-right: 15px !important;
}

/* hyperlinks */

#education.age11to18 .agegrouplanding .columns p a:link,
#education.age11to18 .agegrouplanding .columns p a:visited,
#education.age11to18 .agegrouplanding .columns li a:link,
#education.age11to18 .agegrouplanding .columns li a:visited {
	color: #000;
	border-bottom-color: #FFF;
}

#education.age11to18 .agegrouplanding .columns .column1 p a:link,
#education.age11to18 .agegrouplanding .columns .column1 p a:visited,
#education.age11to18 .agegrouplanding .columns .column1 li a:link,
#education.age11to18 .agegrouplanding .columns .column1 li a:visited {
	border-bottom-color: #DDE0A5;
}

#education.age11to18 .agegrouplanding .columns .column2 p a:link,
#education.age11to18 .agegrouplanding .columns .column2 p a:visited,
#education.age11to18 .agegrouplanding .columns .column2 li a:link,
#education.age11to18 .agegrouplanding .columns .column2 li a:visited {
	border-bottom-color: #FDECAA;
}

#education.age11to18 .agegrouplanding .columns .column3 p a:link,
#education.age11to18 .agegrouplanding .columns .column3 p a:visited,
#education.age11to18 .agegrouplanding .columns .column3 li a:link,
#education.age11to18 .agegrouplanding .columns .column3 li a:visited {
	border-bottom-color: #F3C59F;
}

#education.age11to18 .agegrouplanding .columns p a:hover,
#education.age11to18 .agegrouplanding .columns p a:active,
#education.age11to18 .agegrouplanding .columns li a:hover,
#education.age11to18 .agegrouplanding .columns li a:active {
	color: #FFF;
	border-bottom-color: #FFF !important;
}

/* go buttons */

#education.age11to18 .agegrouplanding p.go {
	position: absolute;
	bottom: 5px;
	right: 10px;
	width: 61px;
	height: 61px;
	margin: 0 !important;
}

#education.age11to18 .agegrouplanding p.go a:link,
#education.age11to18 .agegrouplanding p.go a:visited {
	display: block;
	width: 61px;
	height: 61px;
	background: url(../images/education/go_buttons.gif) no-repeat 0 0;
	text-indent: -999em;
	border: none;
}

#education.age11to18 .agegrouplanding p.go a:hover,
#education.age11to18 .agegrouplanding p.go a:active {
	background-position: 0 -70px;
}

#education.age11to18 .agegrouplanding .column2 p.go a:link,
#education.age11to18 .agegrouplanding .column2 p.go a:visited {
	background-position: -70px 0;
}

#education.age11to18 .agegrouplanding .column2 p.go a:hover,
#education.age11to18 .agegrouplanding .column2 p.go a:active {
	background-position: -70px -70px;
}

#education.age11to18 .agegrouplanding .column3 p.go a:link,
#education.age11to18 .agegrouplanding .column3 p.go a:visited {
	background-position: -140px 0;
}

#education.age11to18 .agegrouplanding .column3 p.go a:hover,
#education.age11to18 .agegrouplanding .column3 p.go a:active {
	background-position: -140px -70px;
}

/* 7 to 11 landing page ------------------------------------------------- */

#education h1.keepingsafe {
	height: 113px;
	background-image: url(../images/education/5-7_banner.jpg);
}

/* 11 to 18 landing page ------------------------------------------------- */

#education h1.lawandorder {
	height: 116px;
	background-image: url(../images/education/7-11_banner.jpg);
}