body{
	margin: 0; padding: 0; font-family: "Tahoma Regular",Arial,sans-serif; background: #eee; font-size: 72.5%; /* :note: equates to 10px */ 
}

.hide{
	position: absolute; top: -100em;
}

.clear:after{
	content: "."; height: 0; visibility: hidden; display: block; clear: both;
}	
	
#wrapper{
	width: 750px; margin: 0 auto; position: relative; background: #fff;
}

/* :note: Fallback heading styles if Image Replacement fails*/
h1{
	font-size: 200%; color: #f57f33;
} 

h2{
	font-size: 170%; color: #999;
} 	
	
h1, h2{
	font-weight: normal;
}
	
a:link, 
a:visited{
	color: #000; font-weight: bold; text-decoration: none;
}	
	
a:focus, 
a:hover{
	text-decoration: underline; 
}

#content a.movie,
#content a.external,
.role_description a{ 
	padding-left: 8px; background: #fff url(i/content/link_arrow.gif) no-repeat left 5px;
} 

#content a.back{ 
	padding-left: 8px; background: #fff url(i/content/back-link-arrow.gif) no-repeat left 5px;
} 	
	
/* Image replacement 
--------------------*/
.replace{
	position: relative; overflow: hidden;
}

.replace span{
	display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat;
}
	
/* header 
---------*/	
#header{
	background: #BE0A2F url(i/header/header.gif) no-repeat top left; /*padding: 15px 0 15px 15px;*/ position: relative; height: 87px;
}

#header ul{
	position: absolute; right: 10px; bottom: 10px;
}	

#header li{
	list-style: none;
}
	
#header a{
	color: #fff; text-decoration: none;
}

#header h1{
	margin: 0; padding: 0; height: 57px; width: 170px; color: #fff; /* :note: default color is unreadeable if img fails to render + white matches logo txt color */
position: absolute; margin-left: -10000em;
}
	
#header h1 span{
	display: none;
/*	background-image: url(i/header/sainsburys-logo.gif);*/
}	


/* main-navigation 
------------------*/
#main-navigation{
	margin-top: 1px; border-bottom: 1px solid #FCAC17; background: #FEFDF9 url(i/navigation/bg-navigation.gif) repeat-x left bottom;

display: none;
}
	
#main-navigation ul{
	list-style: none; margin: 0; padding: 0 0 0 15px;
}
	
#main-navigation li{
	float: left; border-left:1px solid #FFFFFF; border-right:1px solid #CABFA6;
	padding: 0;
}

#main-navigation li.first{
	border-left: none; 
}
	
#main-navigation li a{
	float: left; display:block; font-weight: bold; text-decoration: none;
}

#main-navigation li a:link,
#main-navigation li a:visited{
	 color:#000; margin: 1px; padding: 0.15em 0.5em 0.45em 0.6em; 
} 


#main-navigation li a:hover,
#main-navigation li a:focus, 
#main-navigation li a:active{
	background: #D1C2AD url(i/navigation/rollover-bg.jpg) repeat-x top left; color: #000; margin: 0px;
	border-left: 1px solid #CEBFA8; border-right: 1px solid #DED5C6; border-top: 1px solid #DED5C6;  border-bottom: 1px solid #E8E0D3; 
}

#main-navigation li a.selected,
#main-navigation li a.open{
	 background: #E2582A url(i/navigation/current-bg.jpg) repeat-x top left; color: #fff;
}

/* Sub nav(igation)
-------------------*/

ul#sub_nav{
	float: left; list-style: none; margin: 20px 0 10px 20px; padding: 0px; width: 160px;
}
	
#sub_nav li{
	padding: 0; 
}

#sub_nav li.first{
	border-left: none;
}
	
#sub_nav li a{
	display: block; border-top: 1px solid #ccc; font-weight: bold; text-decoration: none; background-image: none;
}

#sub_nav li.last a{
	border-bottom: 1px solid #ccc;
}
	
#sub_nav li a:link, 
#sub_nav li a:visited{
	 color:#000; padding: 0.3em;
} 

#sub_nav li a:hover, 
#sub_nav li a:focus, 
#sub_nav li a:active{
	background: #D1C2AD url(i/navigation/rollover-bg.jpg) repeat-x top left; color: #000;
}

#sub_nav li a.selected,
#sub_nav li a.open{
	 color: #fff; background: #E2582A url(i/navigation/current-bg.jpg) repeat-x top left; 
}

#sub_nav ul.menu-level2{
	list-style: none; margin: 0; padding: 0px; 
}
	 
#sub_nav ul.menu-level2 li{
	 margin-left: 15px; 
} 

#sub_nav ul.menu-level2 a{
	color: #333; font-weight: normal; border-top:1px solid #EEEEEE;
}

#sub_nav ul.menu-level2 a.first{
	border-top: none;
}
	
#sub_nav ul.menu-level2 a.selected, 
#sub_nav ul.menu-level2 a.open{
	background-image: none; background-color: #fff; color: #FF6633; font-weight: bold; 
}
	
#sub_nav ul.menu-level3{
	list-style: none; margin: 0; padding: 0px; 
}
	 
#sub_nav ul.menu-level3 a{
	padding-left: 8px; background: #fff url(i/content/link_arrow.gif) no-repeat left 8px; color: #333; font-weight: normal; border-top: none; 
}

#sub_nav ul.menu-level3 a:focus,
#sub_nav ul.menu-level3 a:hover{
	color: #F63; text-decoration: underline; background: #fff url(i/content/link_arrow.gif) no-repeat left 8px;
}

#sub_nav ul.menu-level3 a.selected,
#sub_nav ul.menu-level3 a.open{
	color: #F63; font-weight: normal; background: #fff url(i/navigation/list-bullet-selected.gif) no-repeat left 8px; 
}


/* Content
----------*/
#content h1,
#content h2,
#content h3{
	color: #F57F33;
}

#content{
	padding: 20px 20px 0 20px;	background-color: #fff; 
}


#content img{
	float: right; clear: right; margin: 10px 0 10px 10px; border: 1px solid #ccc; padding: 1px; 
}

#pic-box{
	width: 250px; height: 240px; float: right; background: url(i/content/future-manager-banner.gif	); background-repeat: no-repeat; 
}

body.default #pic-box{
	height: 353px; margin-left: 15px; margin-bottom: 15px;
}

body.default a#pic-box:hover,
body.default a#pic-box:focus,
body.default a#pic-box:visited{
	text-decoration: none !important;
}

.about-us #pic-box{
	background: url(i/content/XmasTrolleys.jpg); background-repeat: no-repeat;
}

.the-role #pic-box{
	background: url(i/content/Wedding-Cake-box.jpg); background-repeat: no-repeat;
}

.rewards #pic-box{
	background: url(i/content/PregnancyNoIceonCow-box.jpg); background-repeat: no-repeat;
}

.process #pic-box{
	background: url(i/content/Kids-Party-box.jpg); background-repeat: no-repeat;
}

.about-us p,
.the-role p{
	width: 430px;
}

.process p,
.rewards p,
.process #content li,
.rewards #content li{
	width: 420px;
}

#contentSect ul{
	padding: 0; 
	margin: 0 0 0 0px;
}

#content ul li {
	background: url(i/content/list-bullet.gif) no-repeat 0 5px;
	list-style: none;
	padding: 0 0 10px 10px;
}


blockquote{
	margin: 0; padding: 0; 
}

#map{
	width: 344px; height: 500px; margin: 0 auto; 
}

/*.process #contentSect ul li{
	margin-bottom: 5px;
}*/
	
/* :note: generic profile styles */
#content .profile{
	border-bottom: 1px dashed #ccc; 
}

/* :note: Buttonise screening question link in line with main nav look and feel */
.apply_appform ol#jobappform a,
.job-result .cibbutton a{
	text-decoration: underline;
}

.job-result .cibbutton a,
a.cms-apply{
	font-size: 130%;
}

a.cms-apply{
	float: right; text-decoration: underline;
}


/*.apply_appform ol#jobappform a:focus,
.apply_appform ol#jobappform a:hover,
.job-result .cibbutton a:focus,
.job-result .cibbutton a:hover{

}
*/

/* Application form print version (Apply/AppFormPrint.aspx)
-----------------------------------------------------------*/
body.apply_appformprint ol.appform li h3,
body.apply_appformprint ol.appform li{
	clear: left;
}

body.apply_appformprint ol.appform li h3{
	margin-bottom: 0;
}

body.apply_appformprint ol.appform li{
	padding-top: 20px;
}

/* :note: Additional questions styling */
body.apply_appformprint ol.appform dl.answer dt{
	padding-top: 8px; font-weight: bold;
}

body.apply_appformprint ol.appform dl.answer dt,
body.apply_appformprint ol.appform dl.answer dd{
	width:70% !important; float: none !important;
}


/* Footer
---------*/
#footer{
	height: 27px; /* :note: to fit tastybyte footer byline */ background-color: #BE0A2F;
	clear: both; margin-top: 20px; 
}

/*:note: customising Join pages */
.registerprefs #content img{
	margin: 0 !important;
} 


/* :note: Remove borders from spacer imgs on this page */
.registerprefs #content img{
	border: none !important;
}

#header ul#ats-utilities {
	position: absolute;
	right: 10px;
	top: 5px;
	margin: 0;
	padding: 0;
}

#header #ats-utilities li{
	background-color: #e23d3b;
}

.apply_appform ol#jobappform table.appform{
	margin-bottom: 1em;
}

#content img {
	float: none !important;
	border: none !important;
}

h2{
	font-size: 160% !important;
}

/* :note: flash msg change these styles to suit the design.*/
body #content .flash{ 
	border: 1px solid #ffd100; background-color: #fff; padding: .5em 1em; margin-bottom: 1em;
}

body #content .flash p{ 
	padding: 0; margin: 0; /* :note: reset <p> */
	color: #e23d3b; font-size: 1.2em; font-weight: bold; 
}


/* Register.aspx
--------------------------------*/
span.mandatory{ /* :temp note: Should apply to all forms */ 
	color: #900;
} 

#footer ul{
	margin-left: 20px; padding: 0px;
}

#footer ul li{
	display: inline; padding-right: 15px;
}

#footer ul li a{
	color: #fff; line-height: 27px;
}

th{
	background-color: #f2f2f2;
}

/*Candidate info*/
#applicant-info{
 border-bottom: 1px solid #999; padding-bottom: 1em;
}

#applicant-info strong{
	color: #333;
}


table caption{
	text-align: left; 
}

/* Likert Matrtix table */

table.MatrixLikert th.row{
	text-align: left;
}

table.MatrixLikert th.column{
	width: 45px; text-align: center;
}

table.MatrixLikert th.column td{
	text-align: center;
}

table.MatrixLikert td{
	text-align: center;
} 

table.MatrixLikert td input{
	margin: 0; padding: 0;
}

.questions table.appform {
	display: none;
}