/*****************************************************************************************/
/*  Sky Customer Centres // main.css (screen) 
	Version:
	Created:
	Author:
	Copyright 2009 BSkyB Ltd. All Rights Reserved. */
/*****************************************************************************************/

/* 
	CONTENTS ------
	
	0. Sky.com GLOBAL NAV
	
	1. GLOBAL
	2. LAYOUT
	3. NAVIGATION
	4. HEADINGS (h1-h6)
	5. BUTTONS
	6. FOOTER
	7. OTHER
	
	---------------

*/

/* 0. Sky.com GLOBAL NAV
---------------------------------------------------------------------------------------- */

body div#aoc-globalnav { text-align: center; }
body div#aoc-globalnav #aoc-gn-inner { margin: 0 auto; width: 975px; }
body div#aoc-globalnav #aoc-gn-left { left: 0; }
body div#aoc-globalnav #aoc-gn-right { right: 0; }

#aoc-globalnav #aoc-gn-outer, #aoc-globalnav #aoc-gn-inner { border-style: none; }

#aoc-gn-left #workforsky a, #aoc-gn-lists #aoc-gn-left a { font: 103%/1.4 Helvetica, Arial, sans-serif; color: #fff; }

#aoc-gn-left #workforsky a:hover { text-decoration: underline; }

ul#nav_workforsky {
	float: left;
	margin-left: -1px;
}

li#workforsky {
	color: #fff;
	border-color: #363636;
	border-left-color: #000;
	background-color: #000;
}


/* 1. GLOBAL
---------------------------------------------------------------------------------------- */

body {
	font: 62.5%/1.4 helvetica, arial, sans-serif;
	color: #252525;
	letter-spacing: 0.03em;
 	background-color: #fff;
}

h1, h2, h3, h4, h5 {
	font-weight: normal;
}

h1 { font-size: 2.4em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }

h5 {
	font-size: 1.2em;
	margin-top: .5em;
}

p {
	font-size: 1.2em;
	margin: 1em 0;
	padding: 0;
}

#content p { padding: 0 15px 0 10px; }

ul, ol { font-size: 1.2em; }

#content ul {
	list-style-type: disc;
	margin: 3px 0 0 25px;
	padding: 0;
}

body#roles.all #content ul {
	list-style-type: none;
}

#content #content_locations_col1 ul {
	list-style-type: disc;
	margin: 3px 15px 0 25px;
	padding: 0;
}

#content ol {
	list-style-type: decimal;
	margin: 3px 0 0 30px;
	padding: 0;
}

#branding {
	position: relative;
	height: 90px;
	background-color: #fff;
}

#branding p {
	margin: 0;
	padding: 0;
}

#secondary_content {
	list-style: none;
}

#skip_to_content, #skip_to_page_links { display: none; }


/* 1.1 links ----------------------- */

a:link, a:visited { color: #2664ce; }
a:hover, a:focus, a:active { color: #7da2e2; }

/* div#content link styles */
#content a:link, #content a:visited { color: #c10068; }
#content a:hover, #content a:focus, #content a:active { color: #737373; }

/* class for the 'Back' link */
.back { margin-top: 30px; }

a.back { 
	background: url(../img/icon_back.gif) no-repeat left center;
	display: block;
	width: 50px; 
	height: 10px; 
	line-height: 10px;
	text-indent: 10px;
	text-decoration: none;
}

a:hover.back { 
	background-position: right center; 
}

/* Firefox only styles to align the arrow head with the 'Back' text */
a.back, x:-moz-any-link { line-height: 11px; } /* styles for Firefox 2.0 */
a.back, x:-moz-any-link, x:default { line-height: 11px; } /* restore styles for Firefox 3.0 and newer */ 


/* 2. LAYOUT
---------------------------------------------------------------------------------------- */

/* 2.1 general layout styles ----------------------- */

body {
	text-align: center; 
	min-width: 760px;
}

#wrapper {
	width: 975px; 
	margin: 0 auto; 
	text-align: left;
	background-color: #fff; 
}

#content {
	width: 750px;
	float: right;
	min-height: 600px;
	margin-bottom: 30px;
	padding: 0 5px 0 0;
}

#content_fullwidth {
	width: 970px;
	float: left;
	margin-bottom: 30px;
	padding: 0;
}

#secondary_content { 
	width: 200px; 
	float: left;
	margin-bottom: 30px;
} 

#footer { clear: both; }

#content #content_col1 {
	float: left;
	width: 510px;
}

#content #content_col2 {
	float: right;
	width: 200px;
}


/* 2.2 page specific layout styles ----------------------- */

/* set content column widths for the locations pages */
#content #content_locations_col1 {
	float: left;
	width: 490px;
}

#content #content_locations_col2 {
	float: right;
	width: 250px;
}

/* switch the content column widths on the 'all locations' page using the .all class on the body tag */
body.all #content #content_locations_col1 {
	width: 250px;
}

body.all #content #content_locations_col2 {
	width: 500px;
}


#content #content_locations_col2 .download_map {
	margin-top: 20px;
	padding: 0;
}

/* set the content column widths on the 'Our People' page and the 'Roles' page using the id #people (or #roles) and .all class on the body tag */
body.all#people #content_col1, body.all#roles #content_col1 {
	width: 350px;
}

body.all#people #content_col2, body.all#roles #content_col2  {
	width: 350px;
}


/* 3. NAVIGATION
----------------------------------------------------------------------*/

/* 3.1 nav_main styles ----------------------- */

ul#nav_main {
	position: absolute;
	background-image: url(../img/nav_bar.jpg);
	top: 28px;
	left: 217px;
}
	
ul#nav_main li { float: left; list-style-type: none; }
ul#nav_main li a { height: 38px; display: block; position: absolute; top: 0; text-indent: -9999px; outline: none; }

li#nav_home a,
li#nav_roles a,
li#nav_locations a,
li#nav_depts a,
li#nav_working a,
li#nav_people a,
li#nav_rewards a {
	background: url(../img/nav_bar.jpg);
}

/* nav rollover effects (positioning) */

li#nav_home a 							{ background-position: 0 0; width: 198px; left: 0; }
li#nav_home a:hover						{ background-position: 0 -38px; }
body#home li#nav_home a 				{ background-position: 0 0; cursor: default; }

li#nav_roles a 							{ background-position: -198px 0; width: 92px; left: 198px; }
li#nav_roles a:hover					{ background-position: -198px -38px; }
body#roles li#nav_roles a 				{ background-position: -198px -38px; cursor: default; }

li#nav_locations a 						{ background-position: -290px 0; width: 69px; left: 290px; }
li#nav_locations a:hover				{ background-position: -290px -38px; }
body#locations li#nav_locations a 		{ background-position: -290px -38px; cursor: default; }

li#nav_depts a 							{ background-position: -359px 0; width: 88px; left: 359px; }
li#nav_depts a:hover					{ background-position: -359px -38px; }
body#depts li#nav_depts a 				{ background-position: -359px -38px; cursor: default; }

li#nav_working a						{ background-position: -447px 0; width: 103px; left: 447px; }
li#nav_working a:hover					{ background-position: -447px -38px; }
body#working li#nav_working a			{ background-position: -447px -38px; cursor: default; }

li#nav_people a							{ background-position: -550px 0; width: 77px; left: 550px; }
li#nav_people a:hover					{ background-position: -550px -38px; }
body#people li#nav_people a				{ background-position: -550px -38px; cursor: default; }

li#nav_rewards a						{ background-position: -627px 0; width: 131px; left: 627px; }
li#nav_rewards a:hover					{ background-position: -627px -38px; }
body#rewards li#nav_rewards a			{ background-position: -627px -38px; cursor: default; }

/* END nav rollover effects (positioning) */


/* 3.2 Sub-Navigation (nav_sub) styles ----------------------- */

#nav_sub {
	background: url(../img/nav_sub_bg_center.jpg) repeat-y; 
	width: 190px;
	list-style-type: none;
	margin: 0; 
	padding: 0 5px 0 5px;  
}

#nav_sub li {
	border-bottom: 1px solid #ccc;
}

#nav_sub li a { display: block; }

#nav_sub a { 
	/*display: block;*/
	width: 177px; 
	/*height: 29px;*/ 
	/*line-height: 29px;*/ 
	color: #333;
	font-size: .95em; 
	text-decoration: none;
	/*text-indent: 8px;*/
	/*border-bottom: 1px solid #ccc;*/
	padding: 6px 5px 6px 8px;
}

#nav_sub a:hover {
	color: #0099cc;
	text-decoration: underline;
}

/* background images for headings on sub-nav menu */
#nav_sub .leeds a,
#nav_sub .osterley a,
#nav_sub .uddingston a,
#nav_sub .uddingston a,
#nav_sub .livingston a,
#nav_sub .dunfermline a,
#nav_sub .shepton a,
#nav_sub .stockport a,
#nav_sub .roles a,
#nav_sub .depts a,
#nav_sub .locations a,
#nav_sub .people a,
#nav_sub .working a,
#nav_sub .rewards a {
	/*height: 30px;*/
	display: block;
	text-indent: -9999px;
	cursor: default;
}

#nav_sub .leeds a { background: url(../img/nav_sub_bg_leeds.jpg) no-repeat -5px 0; }
#nav_sub .osterley a { background: url(../img/nav_sub_bg_osterley.jpg) no-repeat -5px 0; }
#nav_sub .uddingston a { background: url(../img/nav_sub_bg_uddingston.jpg) no-repeat -5px 0; }
#nav_sub .livingston a { background: url(../img/nav_sub_bg_livingston.jpg) no-repeat -5px 0; }
#nav_sub .dunfermline a { background: url(../img/nav_sub_bg_dunfermline.jpg) no-repeat -5px 0; }
#nav_sub .shepton a { background: url(../img/nav_sub_bg_shepton.jpg) no-repeat -5px 0; }
#nav_sub .stockport a { background: url(../img/nav_sub_bg_stockport.jpg) no-repeat -5px 0; }
#nav_sub .roles a { background: url(../img/nav_sub_bg_roles.jpg) no-repeat -5px 0; }
#nav_sub .depts a { background: url(../img/nav_sub_bg_depts.jpg) no-repeat -5px 0; }
#nav_sub .locations a { background: url(../img/nav_sub_bg_locations.jpg) no-repeat -5px 0; }
#nav_sub .people a { background: url(../img/nav_sub_bg_people.jpg) no-repeat -5px 0; }
#nav_sub .working a { background: url(../img/nav_sub_bg_working.jpg) no-repeat -5px 0; }
#nav_sub .rewards a { background: url(../img/nav_sub_bg_rewards.jpg) no-repeat -5px 0; }

#nav_sub .last a {
	background: url(../img/nav_sub_bg_bottom.jpg) no-repeat -5px bottom;
	border-bottom: none;
	width: 177px;
	/*height: 30px;*/
}
/* END =background images for headings on sub-nav menu */


#nav_sub .thispage a,
#nav_sub #nav_sub_sub .thispage a {
	color: #0099cc;
}

#nav_sub .thissubpage a,
#nav_sub #nav_sub_sub .thissubpage a {
	color: #0099cc;
	border-bottom: none;
}

#nav_sub_sub {
	font-size: .9em;
	/*border-bottom: 1px solid #ccc;*/
	/*margin-top: -3px;*/
	padding: 0 0 5px 0;
}

#nav_sub_sub li {
	border-bottom: none;
}

#nav_sub_sub a {
	/*height: 17px; 
	line-height: 17px;
	text-indent: 15px;*/
	/*border-bottom: none;*/
	width: 170px;
	padding: 2px 5px 2px 15px;
}

#nav_sub #nav_sub_sub a {
	color: #737373;
}

#nav_sub #nav_sub_sub a:hover {
	color: #0099cc;
}


/* 4. HEADINGS (h1-h6)
----------------------------------------------------------------------*/

#content h2 {
	color: #009cdd;
	margin: 15px 0 0 0;
	padding: 0 15px 0 10px;
}

#content h2 + p {
	margin-top: 5px;
}

#content h3 {
	font-size: 1.3em;
	color: #009cdd;
	margin: 10px 0 0 0;
	padding: 0 15px 0 10px;
}

#content h3 + p {
	margin-top: 3px;
}


/* 4.1 Locations h1 styles ----------------------- */

h1#h_locations_leeds,
h1#h_locations_osterley,
h1#h_locations_uddingston,
h1#h_locations_livingston,
h1#h_locations_dunfermline,
h1#h_locations_shepton,
h1#h_locations_stockport,
h1#h_locations {
	width: 460px;
	height: 30px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
}

h1#h_locations_leeds { background: url(../img/h_locations_leeds.gif) no-repeat 0 0; }
h1#h_locations_osterley { background: url(../img/h_locations_osterley.gif) no-repeat 0 0; }
h1#h_locations_uddingston { background: url(../img/h_locations_uddingston.gif) no-repeat 0 0; }
h1#h_locations_livingston { background: url(../img/h_locations_livingston.gif) no-repeat 0 0; }
h1#h_locations_dunfermline { background: url(../img/h_locations_dunfermline.gif) no-repeat 0 0; }
h1#h_locations_shepton { background: url(../img/h_locations_shepton.gif) no-repeat 0 0; }
h1#h_locations_stockport { background: url(../img/h_locations_stockport.gif) no-repeat 0 0; }
h1#h_locations { background: url(../img/h_locations.gif) no-repeat 0 0; }


/* 4.2 All other h1 and h2 styles ----------------------- */

h1#h_depts,
h1#h_depts_leeds,
h1#h_depts_osterley,
h1#h_depts_uddingston,
h1#h_depts_livingston,
h1#h_depts_dunfermline,
h1#h_depts_shepton,
h1#h_depts_stockport,
h1#h_depts_a,
h1#h_depts_b,
h1#h_depts_c,
h1#h_depts_d,
h1#h_depts_e,
h1#h_depts_f,
h1#h_depts_g,
h1#h_depts_h,
h1#h_roles,
h1#h_viewroles,
h1#h_working,
h1#h_serving,
h1#h_culture,
h1#h_rewards,
h1#h_shifts {
	width: 400px;
	height: 30px;
	text-indent: -9999px;
	margin-top: 20px;
	padding: 0;
}

h1#h_depts { background: url(../img/h_depts.gif) no-repeat 0 0; }
h1#h_depts_leeds { background: url(../img/h_depts_leeds.gif) no-repeat 0 0; }
h1#h_depts_osterley { background: url(../img/h_depts_osterley.gif) no-repeat 0 0; }
h1#h_depts_uddingston { background: url(../img/h_depts_uddingston.gif) no-repeat 0 0; }
h1#h_depts_livingston { background: url(../img/h_depts_livingston.gif) no-repeat 0 0; }
h1#h_depts_dunfermline { background: url(../img/h_depts_dunfermline.gif) no-repeat 0 0; }
h1#h_depts_shepton { background: url(../img/h_depts_shepton.gif) no-repeat 0 0; }
h1#h_depts_stockport { background: url(../img/h_depts_stockport.gif) no-repeat 0 0; }
h1#h_depts_a { background: url(../img/h_depts_a.gif) no-repeat 0 0; }
h1#h_depts_b { background: url(../img/h_depts_b.gif) no-repeat 0 0; }
h1#h_depts_c { background: url(../img/h_depts_c.gif) no-repeat 0 0; }
h1#h_depts_d { background: url(../img/h_depts_d.gif) no-repeat 0 0; }
h1#h_depts_e { background: url(../img/h_depts_e.gif) no-repeat 0 0; }
h1#h_depts_f { background: url(../img/h_depts_f.gif) no-repeat 0 0; }
h1#h_depts_g { background: url(../images/h_depts_g.gif) no-repeat 0 0; }
h1#h_depts_h { background: url(../images/h_depts_h.gif) no-repeat 0 0; }
h1#h_roles { background: url(../img/h_roles.gif) no-repeat 0 0; }
h1#h_viewroles { background: url(../img/h_viewroles.gif) no-repeat 0 0; }
h1#h_working { background: url(../img/h_working.gif) no-repeat 0 0; }
h1#h_serving { background: url(../img/h_serving.gif) no-repeat 0 0; }
h1#h_culture { background: url(../img/h_culture.gif) no-repeat 0 0; }
h1#h_rewards { background: url(../img/h_rewards.gif) no-repeat 0 0; }
h1#h_shifts { background: url(../img/h_shifts.gif) no-repeat 0 0; }

h1#h_ywe_stockport {
	background: url(../img/h_ywe_stockport.gif) no-repeat 0 0;
	width: 600px;
	height: 30px;
	text-indent: -9999px;
	margin-top: 20px;
	padding: 0;
}

/* Our People page h1 (not visible on the screen) */
h1#h_people_h1 {
	text-indent: -9999px;
	position: absolute;
}

/* Our People page h2 (smaller width for the two columns) */
h2#h_people_location,
h2#h_people_role {
	width: 340px;
	height: 30px;
	text-indent: -9999px;
	margin-top: 20px;
	padding: 0;
}

h2#h_people_location { background: url(../img/h_people_location.gif) no-repeat 0 0; }
h2#h_people_role { background: url(../img/h_people_role.gif) no-repeat 0 0; }


/* 5. BUTTONS (roles, departments etc.)
----------------------------------------------------------------------*/

/* 5.1 Roles Buttons ----------------------- */

ul#buttons_roles {
	list-style-type: none;
	margin: 25px 0 0 0;
	padding: 0;
}

ul#buttons_roles li {
	float: left;
	margin: 0 0 10px 6px;
	padding: 0;
}

ul#buttons_roles .first {
	margin: 0;
	padding: 0;
}

ul#buttons_roles.two_rows {
	list-style-type: none;
	width: 481px;
	margin: 25px 0 0 6px;
	padding: 0;
}

#content p.btn  { padding: 10px 15px 0 5px; }


/* 5.2 Apply Buttons (Roles and Departments pages) ----------------------- */

#content ul#buttons_apply {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#content ul#buttons_apply .btn_questionnaire a {
	background: url(../img/btn_questionnaire.jpg) no-repeat 0 0;
	width: 200px;
	height: 200px;
	display: block;
	text-indent: -9999px;
	margin-top: 30px;
	padding: 0;
}

#content ul#buttons_apply .btn_apply a {
	background: url(../img/btn_apply.jpg) no-repeat 0 0;
	width: 200px;
	height: 40px;
	display: block;
	text-indent: -9999px;
	margin-top: 30px;
	padding: 0;
}

#content p.btn_apply a {
	background: url(../img/btn_apply_sml.jpg) no-repeat 0 0;
	width: 200px;
	height: 40px;
	display: block;
	text-indent: -9999px;
	margin: 25px 0 0 -5px;
	padding: 0;
}

#content ul#btn_apply_extra {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#content ul#btn_apply_extra li.btn_apply_sml_fulltime a {
	float: left;
	background: url(../img/btn_apply_sml_fulltime.jpg) no-repeat 0 0;
	width: 125px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	margin: 25px 0 30px 6px;
	padding: 0;
}

#content ul#btn_apply_extra li.btn_apply_sml_eves a {
	float: left;
	background: url(../img/btn_apply_sml_eves.jpg) no-repeat 0 0;
	width: 125px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	margin: 25px 0 30px 20px;
	padding: 0;
}


/* 5.3 Departments Buttons ----------------------- */

ul#buttons_depts, ul#buttons_depts_all {
	list-style-type: none;
	margin: 25px 0 0 0;
	padding: 0;
}

ul#buttons_depts li, ul#buttons_depts_all li {
	float: left;
	margin: 0;
	padding: 0;
}

/* Departments Buttons - Customer centre departments pages eg. depts_leeds.html, depts_osterley.html etc. */
ul#buttons_depts li {
	margin: 0 0 0 6px;
	padding: 0;
}

ul#buttons_depts .first {
	margin: 0;
	padding: 0;
}

/* Departments Buttons - departments page */
ul#buttons_depts_all li img {
	margin: 0 0 15px 10px;
	padding: 0;
}

ul#buttons_depts_all li img.first {
	margin: 0 0 15px 0;
	padding: 0;
}

ul#buttons_depts_all li img.last {
	margin: 0 0 15px 10px;
	padding: 0;
}


/* 6. FOOTER
----------------------------------------------------------------------*/

#footer {
	clear: both;
	position: relative;
	width: 950px;
	border-top: 1px dashed #696969;
	font-size: 0.9em;
	margin: 0;
	padding: 10px 10px 30px 10px;
}

#footer p {
	float: left;
	margin: 0;
	padding: 0;
}

#footer ul {
	float: right;
	list-style-type: none;
	color: #999;
}

#footer li {
	display: inline;
}

#footer li a {
	white-space: nowrap;
	color: #252525;
	text-decoration: none;
	border-left: 1px solid #252525;
	margin-left: 4px;
	padding-left: 6px;
}

#footer li a.first {
	white-space: nowrap;
	border: none;
	color: #252525;
}

#footer li a:hover { text-decoration: underline; }


/* 7. OTHER
----------------------------------------------------------------------*/

.highlight { color: #009cdd; }

#img_quote { padding-top: 30px; }

.norole { font-size: 1.4em; color: #999; margin-top: 2em; }

.clear { clear: both; }


/* 7.1 Accordian styles (Our People and Roles page) ----------------------- */

#content .accordian {
	width: 350px;
	margin: 20px 0 0 0;
	padding: 0;
}

#content .accordian h3 {
	background: url(../img/people_header_accordian_closed.jpg) no-repeat 0 0;
	width: 310px;
	height: 24px;
	font-weight: bold;
	color: #c10068;
	margin: 10px 0 0 0;
	padding: 6px 0 0 40px;
}

/* removes the h3 background image used on the 'Our People' page and sets the new header text color on the Roles page */
/*
body.all#roles #content .accordian h3 {
	background: none;
	color: #009cdd;
	margin: 0;
	padding: 6px 0 0 10px;
}
*/

#content .accordian h3.open {
	background: url(../img/people_header_accordian_open.jpg) no-repeat 0 0;
	color: #009cdd;
}

#content .accordian div {
	margin: 0;
	padding: 0;
	border-right: 1px solid #80d6F7;
	border-bottom: 1px solid #80d6F7;
	border-left: 1px solid #80d6F7;
}

/* sets the background image to the div (instead of the h3) on the Roles page */
/*
body.all#roles #content .accordian div {
	background: url(../img/roles_box_bg.jpg) no-repeat 0 0;
	width: 350px;
	margin: 0 0 20px 0;
	padding: 0;
	border: none;
}
*/

#content .accordian ul {
	list-style-type: none;
	margin: 0;
	padding: 5px 0 10px 0;
}

#content .accordian li {
	margin: 5px 0 0 0;
	padding: 0 20px 0 40px;
}

body.all#roles #content .accordian li {
	margin: 5px 0 0 0;
	padding: 0 0 0 10px;
}

#content .accordian a:link {
	text-decoration: none;
}

#content .accordian a:visited {
	color: #737373;
}

#content .accordian a:hover,
#content .accordian a:focus,
#content .accordian a:active {
	text-decoration: underline;
	color: #737373;
}
/* END Accordian styles (Our People and Roles page) */


/* 7.2 Candidate profile sidebox on the Roles and Apply page ----------------------- */

#candidate_profile {
	margin-top: 20px;
	padding: 12px;
}

#candidate_profile h3 {
	font-size: 1.1em;
	font-weight: bold;
	color: #333;
}

#candidate_profile p {
	font-size: 1.1em;
	margin: .3em 0;
}

#candidate_profile p a {
	color: #c10068;
	text-decoration: none;
}

#candidate_profile p a:hover {
	color: #737373;
	text-decoration: underline;
}