/* Div structure
wrapper
	header
	main-navigation
	content
		sub_nav
	footer
*/


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;
}
	
p{
	background-color: #fff;
}	
	
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: #F26334 url(i/header/bg-brandbar.gif) repeat-y top right; padding: 15px 0 15px 15px; position: relative;
}

#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: 32px; width: 324px; color: #fff; /* :note: default color is unreadeable if img fails to render + white matches logo txt color */
}
	
#header h1 span{
	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;
}
	
#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; 
}

/* 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{
	background: #fff; padding: 20px 20px 0 20px;
}
	
#content img{
	float: right; clear: right; margin: 10px 0 10px 10px; border: 1px solid #ccc; padding: 1px; }   
	
blockquote{
	margin: 0; padding: 0; 
}
	
/* :note: generic profile styles */
#content .profile{
	border-bottom: 1px dashed #ccc; 
}

/* Footer
---------*/
#footer{
	height: 27px; /* :note: to fit tastybyte footer byline */ background: #F26132 url(i/header/bg-brandbar.gif) repeat-y top right; clear: both; margin-top: 20px; 
}