/* -------------------------------------------------------------------------

	LCJP Justice for Young People Screen Style Sheet GLOBAL CSS
	last update: 10 March 2010 Bill Dashfield bill@ecru.co.uk
	author: Sam Marks
	email: sam@ecru.co.uk

  ------------------------------------------------------------------------- */

/* colour palette----------------------------- ----------------------------
		Normal		Contrast	White on Blue
		======		========	=============
LOGO
pink		#e7058b;
blue
grey		#404040 	
TEXT
blue H2		#12caf8
blue Date	#0093D0
White		#fefefe;	#f8f8f8		#f8f8f8	
pink links 	#e7058b;	#C40476		#f894cf
'black'
BACKGROUND
blue		#12caf8				#101960;
White		#ffffff		#f8f8f8		#f8f8f8
pink		#e7058b		#c40476		#c40476
'black'		#1F1E1C
grey		#343434				#4C5388
BOXES
active links	
*/

/* font sizing guide -------------------------------------------------------

points		pixels		ems		leading
--------------------------------------------------------
7pt	=	9px 	= 	0.75em		2.2222em
7.5pt	=	10px 	= 	0.8333em	2em
8pt	=	11px 	= 	0.9166em	1.8181em
9pt	=	12px 	= 	1em		1.6666em
10pt	=	13px 	= 	1.0833em	1.5384em
10.5pt	=	14px 	= 	1.1666em	1.4285em
11pt	=	15px 	= 	1.25em		1.3333em
12pt	=	16px 	= 	1.3333em	1.25em
13pt	=	17px 	= 	1.4166em	1.1764em
13.5pt	=	18px 	= 	1.5em		1.1111em
14pt	=	19px 	= 	1.5833em	1.0526em
14.5pt	=	20px 	= 	1.6666em	1em
15pt	=	21px 	= 	1.75em		
16pt	=	22px 	= 	1.8333em	
17pt	=	23px 	= 	1.9166em	
18pt	=	24px 	= 	2em			
23pt	=	30px	=	2.5em		

(divide desired pixel height by 12 to get 'em' value) */

/* GLOBAL CSS */

	body {
		margin:0;
		padding:0;
		font-family:arial;
		font-size:75%; /* convert 16px base font size to 12px */
		}

		img {border:0px;}

		.clear {clear:both;}

		.paddingleft5 {padding-left:5px;}
		.paddingleft10 {padding-left:10px;}

		.button1 { font-size:1.08em; background:#e7058b; padding:3px; color:#fefefe; text-decoration:none; font-weight:bold; }

		.link1-pink { color:#e7058b; text-decoration:none; }
		.link1-pink:hover { color:#e7058b; text-decoration:underline; }

		.pink-text { color:#e7058b; }

		.hidden-div { display:none; }

		.divider { position:relative; clear:both; height:1px; margin-bottom:10px; line-height:0px; width:100%; background:url('../images/common/divider.jpg'); font-size:0px; }

		h2 { font-size:1.58em; color:#12caf8; }

		.div-left {width:50%;position:relative;	float:left;}
		.div-right {width:50%, position:relative; float:left;}
		.news-date { color:#0093d0; font-weight:bold; }
		.news-h2 { font-size:1.58em; color:#000000; display:inline; }
		.news-h3 { font-size:1.33em; color:#000000; display:inline; }

		.news-image { padding:5px; border:1px solid #616161; }


/* MAIN NAV */

	#menu {
		position:relative;
		margin:0 auto;
		background-color:#1f1e1c;
		background-image: url('../images/common/menu-bg.jpg');
		background-repeat: repeat-x;
		background-position:top center;
		height:161px;
		}

		#menu-container {
			position:relative;
			height:161px;
			width:950px;
			margin:0 auto;
			}

			#logo {
				position:absolute;
				top:10px;
				width:278px;
				height:143px;
				}
			#logo a,
			#bookmark a {color: #F071BC; }  /* only seen if images are off */
			

			#sitemap {
				position:absolute;
				top:10px;
				right:0px;
				color:#fefefe;
				text-align:right;
				max-width:850px;
				/* min-width:550px; */
				height:40px;
				}

			#sitemap ul, #sitemap li, #sitemap p {
				float: left;
				padding: 0;
				margin: 0;
				list-style-type: none;
				}

			#sitemap a { 
				font-size:1.25em; 
				line-height:32px; 
				margin-left:10px; 
				font-weight:bold; 
				color:#fefefe; 
				text-decoration:none; 
				border-bottom:2px solid #fefefe; 
 				}
			/* style switcher */

			#styleSwitcher li {
				display: block;
				border: 1px solid #e7058b;
				margin-left: 8px; 
				float:left;
				}

			#styleSwitcher li a {
				height: 1.3em;
				width: 1em;
				padding-right: .35em;
				font-size:2em; 
				font-weight:bold; 
				text-decoration:none;
				float:left;
				margin: 0;
				border:0;
				}

			#styleNormal { 
				background-color: #000;
				}

			#styleSwitcher #styleContrast a {
				color: #010101;
				background-color: #fefefe;
				}

			#styleWhiteOnBlue,
			#styleSwitcher #styleWhiteOnBlue a {
				color: #fefefe;
				background-color: #101960;
				}


			#bookmark {
				position:absolute;
				top:55px;
				right:0px;
				color:#fefefe;
				text-align:right;
				width:700px;
				height:32px;
				}

			.bookmark-title { 
				position:relative; 
				float:right; 
				font-size:1.25em; 
				line-height:32px; 
				padding-right:5px; 
				font-weight:bold; }

			.bookmark-icons { 
				position:relative; 
				float:right; }

			#site-menu {
				position:absolute;
				right:0px;
				bottom:1px;
				color:#fefefe;
				text-align:right;
				width:40em;
				height:57px;
				font-size:1.33em;
				font-weight:bold;
				}

			.menu-divider { 
				position:relative; 
				float:left; 
				width:1px; 
				text-align:center; 
				height:59px; 
				padding-left:0; 
				padding-right:0; 
				background:url('../images/common/menu-divider.jpg') no-repeat top center; 
				}

			.menu-item,
			.menu-item-on { position:relative; float:left; text-align:center; padding: 0; height:53px; 
				} 

			.menu-item-on a,
			.menu-item a:hover { border-bottom:4px solid #e7058b; }
				
			.menu-item a,
			.menu-item-on a {
				color:#fefefe; 
				text-decoration:none;	 
				padding-left:.95em; 
				padding-right:.95em;
				display: block; 
				}

			.menu-height1 a { padding-top:20px;height:34px; } /* center text, make whole height clickable */
			.menu-height2 a { padding-top:9px; height:45px;}  

/* PAGE CONTAINER */

	#container {
		position:relative;
		margin:0 auto;
		background-color:#1f1e1c;
		background-image: url('../images/common/bg.jpg');
		background-repeat: no-repeat;
		background-position:top center;
		}

		#container-inner {
			position:relative;
			margin:0 auto;
			width:960px;
			padding-top:9px;
			}



/* YOUTUBE PANEL */

	#youtube-container {
		position:relative;
		float:left;
		width:242px;
		}

	#youtube-panel {
		position:relative;
		float:left;
		top:10px;
		background:url('../images/common/youtube-panel.gif');
		width:222px;
		color:#fefefe;
		padding:10px;
		}

		#youtube-panel h2 { color:#fefefe; }

		#youtube-panel-bottom {
			position:relative;
			float:left;
			background:url('../images/common/youtube-panel-bottom.gif');
			width:242px;
			margin-top:10px;
			height:23px;
			}

		#youtube-panel h2 { 
			display:inline; 
			font-size:1.92em; 
			font-weight:bold; 
			font-family:Trebuchet MS, Arial;
			}

		.youtubevideo { clear:both; }
		.youtubevideo img { margin-right:10px; margin-bottom:5px; border:1px solid #fefefe; }
		#youtube-panel a, 
		.youtubevideo a { color:#fefefe; text-decoration:none; }
		#youtube-panel a:hover, 
		.youtubevideo a:hover { color:#fefefe; text-decoration:underline; }


/* CASE STUDY / DID YOU KNOW PANEL */

	#case-study {
		position:relative;
		float:left;
		background:url('../images/common/case-study.gif');
		width:472px;
		height:197px;
/*		overflow:hidden;
*/		}

		#case-study-title {
			margin-top:35px;
			margin-bottom: 6px;
			margin-left:15px;
			}

		#case-study h2 { 
			letter-spacing:-1px;
			font-family:Trebuchet MS, Arial;
			color:#fefefe;
			font-size:2.15em;
			font-weight:bold;
			margin:0;
			}

		#case-study-text {
			margin-left:15px;
			width:300px;
			color:#fefefe;
			}

		#case-study-image {
			position:absolute;
			right:15px;
			top:45px;
			color:#fefefe;
			border:1px solid #fefefe;
			}

		#case-study-button {
			position:absolute;
			margin-bottom: 165px; bottom: -11.5em; /*move down slightly to allow case-study-text to resize */ 
			left:15px;
			color:#fefefe;
			}



/* GET IN TOUCH PANEL */

	#get-in-touch {
		position:relative;
		float:right;
		background:url('../images/common/get-in-touch.gif');
		width:472px;
		height:197px;
/*		overflow:hidden;*/
		}

		#get-in-touch-title {
			margin-top:35px;
			margin-bottom: 6px;
			margin-left:15px;
			}

		
		#get-in-touch h2 { 
			letter-spacing:-1px;
			font-family:Trebuchet MS, Arial;
			color:#fefefe;
			font-size:2.15em;
			font-weight:bold;
			margin:0;
			}

		#get-in-touch-text {
			Margin-left:15px;
			width:318px;
			color:#fefefe;
			}

		#get-in-touch-button {
			position:absolute;
			bottom:28px;
			right:15px;
			color:#fefefe;
			}




/* FOOTER LOGO */

	#footer-logo {
		position:relative;
		float:right;
		width:188px;
		height:145px;
		margin-top:20px;
		margin-bottom:10px;
		}

	#footer-logo a {color: #fff;}

	.topLink a {
		float: right;
		margin-right:15px;
		margin-bottom: 20px;
		font-weight:bold;
		color: #fff; 
		background-color: #e7058b; 
		text-decoration:none; }



/* SUB NAV BUTTONS */

	.sub-nav-title { 
		display:inline; 
		color:#404041; 
		font-size:2em;
		letter-spacing:-1px; 
		font-family:Trebuchet MS;
		}

	.sub-nav-padding { margin:15px; margin-top:25px; padding-top:15px; width:190px; min-height: 210px; }

	.sub-nav-button { position:absolute; margin-bottom: 140px; bottom: -11.5em; /*move down slightly to allow sub-nav-text to grow */ }

	.sub-nav-text { padding-top:5px; width:100px; text-shadow: 0 0 3px #f8f8f8; filter: glow(color:#f8f8f8, strength:2);}

	#report-a-crime {
		position:relative;
		float:left;
		margin-right:10px;
		background:url('../images/common/report-a-crime.gif') no-repeat;
		width:220px;
		height:276px; 
		}

	#report-a-crime .sub-nav-padding {
		position:relative;
		float:left;
		margin-right:10px;
		margin-top: 24px;
		margin-bottom:-25px;
		background: #fff url('../images/common/report-a-crime.gif') no-repeat -15px -24px;
		}

	#victims-witnesses {
		position:relative;
		float:left;
		margin-right:10px;
		background:url('../images/common/victims-witnesses.gif') no-repeat;
		width:220px;
		height:276px;
		}

	#victims-witnesses .sub-nav-padding {
		position:relative;
		float:left;
		margin-right:10px;
		margin-top: 24px;
		margin-bottom:-25px;
		background:#fff url('../images/common/victims-witnesses.gif') no-repeat -15px -24px;
		}

	#accused {
		position:relative;
		float:left;
		margin-right:10px;
		background:url('../images/common/accused.gif') no-repeat;
		width:220px;
		height:276px;
		}


	#accused .sub-nav-padding {
		position:relative;
		float:left;
		margin-right:10px;
		margin-top: 24px;
		margin-bottom:-25px;
		background:#fff url('../images/common/accused.gif') no-repeat -15px -24px;
		}

	#resources {
		position:relative;
		float:left;
		margin-right:10px;
		background:url('../images/common/resources.gif') no-repeat;
		width:220px;
		height:276px;
		}

	#resources .sub-nav-padding {
		position:relative;
		float:left;
		margin-right:10px;
		margin-top: 24px;
		margin-bottom:-25px;
		background:#fff url('../images/common/resources.gif') no-repeat -15px -24px;
		}