
#logobarsimple {
	background: none;
	width: 887px;
	position: relative;
	top: 0px;
	margin-top: 0px;
	height: 100px;
}
#logobarnewlink, #logobarsimple #breadcrumb { position: relative; left: 0px; }
#logobarsimple #breadcrumb { position: absolute; top: 58px; }
#logobarsimple h1, #logobarnewlink { height: 50px; }
#level1navbar {
	background-color: #fff; /* first header row colour */
}
#level2navbar {
	background: #fff; /* third header row colour */
}
#level2nav ul li a, ul#level2nav li a {
	color: #fff;
}
#level2nav ul li a:hover, ul#level2nav li a:hover {
	background-color: #000;
	color: #fff;
}

#trailbar a {
	color:#fff;
}


html {
height: 100%
}

body {
text-align:left;
background: #000 url(/modern/exhibitions/poplife/img/topbackground.jpg) top left repeat-x;
}

	/* The CSS that's required to position the footer */
	/* If you want to know more, see http://www.themaninblue.com/experiment/footerStickAlt/ */
	/* have had to modify this to accomodate floating elements in the design (grrr!) */
 
	html
	{
		height: 100%;
	}
 
	body
	{
		height: 100%;
	}
 
	#nonFooter
	{
		position: relative;
		min-height: 100%;
		z-index: 10;
		top: 0px;
		left: 0px;
		width: 100%;
	}
 
	* html #nonFooter
	{
		height: 100%;
	}
 
	#citybackground
	{
		position: relative;
		margin: -400px auto 0 auto;
	}
 
	/* A CSS hack that only applies to IE -- specifies a different offset for the footer */
 
	* html #citybackground
	{
		margin-top: -600px;
	}


/* START font styles*/
p, ul, span {
	color: #fff;
}

a {
	color: #35b0ff;
}

a:hover {
	color: #fff;
}

.credit {
	color: #999;
}


/* START background and main holding divs*/

/* #holdingcenter{
	text-align: left;
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}
I've taken this one out - Alex */

#citybackground {
	display: block;
	background: url(/modern/exhibitions/poplife/img/citybackground.jpg) bottom left repeat-x;
	width: 100%;
	height: 400px;
	z-index: 5;
}

#content {
	position: relative;
	width: 887px;
	left: 50%;
	margin-top: 0px;
	margin-left: -475px;
	padding: 0px 32px 55px 31px;
	background: url(/modern/exhibitions/poplife/img/blackbkgr.png);
	z-index: 10;
}
#home #content { overflow: visible; float: left; }
#home #nonFooter { overflow: visible; float: left; }
#home #citybackground { float: left; clear: left; }

#poplifeshop #content, #rooms #content { overflow: visible; float: left; }
#poplifeshop #nonFooter { overflow: visible; float: left; }
#poplifeshop #citybackground { float: left; clear: left; }

/* END background and main holding divs*/

/* START main title*/


#poplifetitle{
	float: left;
	display: block;
	width: 500px;
	margin: 12px 0 0 0;
	background: url(/modern/exhibitions/poplife/img/poplifetitle.png) top left no-repeat;
}

#home #poplifetitle h1{
	height: 170px;
}


#poplifetitle h1 a {
	display: block;
	width: 500px;
	height: 170px;
}

#poplifetitle h1 span {
	display: none;
}

#home #poplifetitle #dates {
	width: 500px;
	}


#home #poplifetitle #dates span {
	font-size: 1.9em;
	float: none;
	font-weight:normal;
}


#home h2 {
	font-size: 1em;
	color: #fff;
	margin: 0;
	padding: 0;
	font-weight: bold;
	height: auto;
	border-top: none;

}
		/* EXPLORE and SHOP title styles*/
	
#poplifetitle h1{
	display: block;
	width: 500px;
	height: 150px;
	padding: 0;
	margin: 0;
}

#poplifetitle #dates{
	color: #fff;
	margin: 0 0 0 3px;
	width: 887px;
	font-weight: normal;
}
	
#poplifetitle #dates span {
	float: left;
	font-size: 1em;
	margin: 0 10px 10px 0;
}


a#backtohome {
	margin: 5px 0 0 ;
	font-size: 0.7em;
	float: right;
}

h2   {
	font-size: 1.8em;
	font-weight: normal;
	color: #fff;
	margin: 10px 0 0 3px;
	padding: 10px 0 0 0;
	display: block;
	height: 33px;
	border-top: 1px solid #fff;
	clear: both;
}

#explore h3, #twins h3 {
/*removing the id's in which the h3 lives, makes the default h3 style kick in, hence the clonky way of setting the style...*/
	font-weight: normal;
	color: #999;
	margin: 12px 0 0 3px;
	clear: left;
}

#twins p, #twins h3, #twins ul {
	width: 438px;
	margin-left: 3px;
	clear: left;
}
#explore p, #explore h3, #explore ul {
	width: 378px;
	margin-left: 3px;
	clear: left;
}
#twins p, #explore p { font-size: 0.75em; }
#twins #content ul, #twins #content ul li { margin: 0px; padding: 0px; }
#twins #content ul li {
	font-size: 0.75em;
	width: 410px;
	margin-left: 20px;
	padding-left: 4px;
	margin-top: 8px;
	vertical-align: top;
}
#explore p.larger { font-size: 0.9em; }
#twins object, #twins embed { float: right; }
#twins .rightimg, #explore .rightimg { float: right; }
#twins .rightimg p, #explore .rightimg p { width: auto; font-size: 0.7em; }

		/* END EXPLORE and SHOP title styles*/

/* END main title*/

/* START home navigation boxes*/



#homeinfo {
	float: left;
	width: 712px;
	overflow: visible;
}


#hometext{
	float: left;
	width: 354px;
	margin: 0 0 25px 32px;
}

#sponsors {
	font-size: 0.7em;
	color: #fff;
	display: inline;
	float: left;
	/*change width to 352px when eplore is in homepage - otherwise 530px*/ 
	width: 352px;
	height: 30px;
	margin: 12px 0 0 4px;
	background: url(/modern/exhibitions/poplife/img/observer.gif) bottom left no-repeat;
}

#sponsors span {
	display: none;
}
#members, #tickets, #events, #related {
	float: left;
	display: inline;
	background: #32313d;
	width: 159px;
	padding: 15px 8px;
	margin: 0 3px 0 0;
}

#homeinfo p, #homeinfo ul {
	font-size: 0.7em;
}

#homeinfo ul {
	margin: 12px 0 0 15px;
	padding: 0;
}

#homeinfo ul li ul{
	font-size: 1em;
	margin: 0 0 0 12px;
	padding: 0;
}

#homeinfo li{
	list-style: none;
	list-style-image: url(/modern/exhibitions/poplife/img/listlink.gif);
	padding: 0 0 5px 0;
}


#homeinfo li ul li{
	list-style: none;
	list-style-image: url(/modern/exhibitions/poplife/img/listlink_second.gif);
	padding: 0 0 5px 0;
}

#homeinfo li:hover{
	list-style-image: url(/modern/exhibitions/poplife/img/listlink_hover.gif);
}

#homeinfo li ul li:hover{
	list-style-image: url(/modern/exhibitions/poplife/img/listlink_second_hover.gif);
}



/*Shop links on homepage*/

#shop {
	float: left;
	display: block;
	width: 175px;
}

#shop h2{
	color: #fc007b;
	margin: -3px 8px 8px 8px;
	padding: 0;
}

#shop ul{
	margin: 0;
	padding: 0;
}

#shop ul li{
	display: block;
	width: 169px;
	background: url(/modern/exhibitions/poplife/img/shoppink.png) bottom left no-repeat;
	font-size: 0.7em;
	margin: 0 0 3px 0;
	padding: 0 6px 0px 0px;
	list-style: none;
	float: left;
}

#shop ul li img{
	float: left;
	margin: 0 6px 0 0;
	width: 80px;
	height: auto;
}

#shop ul li a{
	color: #fff;
}

#shop ul li a:hover{
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/*END Shop links on homepage*/

/*Promotion links on homepage*/

ul#promolinks {
	font-size: 0.75em;
	float: left;
	margin: 0 -3px 0 0;
	padding: 0;
}

ul#promolinks li {
	margin: 0 3px 3px 0;
	padding: 0;
}

.promo{ 
	width: 175px; 
	height: 113px; 
	margin:0;
	float:left; 
	overflow: hidden; 
	position: relative; 
}

.promo img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
}
				
.promo a{ 
	color:#fff; 
}


				
.promo span.captionline2{ 
	display: block;
	margin: 15px 15px 0 0; 
	width: 110px;
}
.promo span.captionline1{ 
	margin: 0px 15px 0 0; 
	font-weight: bold;
	font-size: 110%;
}				

.promocaption{ 
	float: left; 
	position: absolute; 
	background: url(/modern/exhibitions/poplife/img/promoblue.gif) top left no-repeat; 
	height: 80px;
	width: 175px; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

 			}
			
.captionfull .promocaption {
 	top: 113px;
 	left: 0;
 				}
 .caption .promocaption {
 	top: 75px;
 	left: 0;
	padding: 12px 5px 0 47px;
 }

				
/*END Promotion links on homepage*/

/* END home navigation boxes*/

/* Room Guide taext panels */

.roomtext { 
	background-color: #32313d;
	padding: 15px 15px 10px;
	margin-top: 10px;
	margin-right: 10px;
	width: 406px;
	float: left;
	display: block;
	overflow: visible;
}
.room2, .room4, .room6, .room8, .room10, .room12, .room14, .room16, .cafe { margin-right: 0px; }
.room1, .room3, .room5, .room7, .room9, .room11, .room13, .room15, .room17 { clear: left; margin-right: 10px; }
.room1, .room2 { height: 33.5em; }
.room3, .room4 { height: 32em; }
.room5, .room6 { height: 38em; }
.room7, .room8 { height: 34em; }
.room9, .room10 { height: 29.5em; }
.room11, .room12 { height: 33.5em; }
.room13, .room14 { height: 32.5em; }
.room15, .room16 { height: 28em; }
.room17, .cafe { height: 35.5em; }

.roomtext p { font-size: 0.8em; margin: 0px; padding: 0px 0px 1em; }
.roomtext h4 { 
	color: #ffffff; 
	margin: 5px 0px 1em;
}
.roomtext h4 span{ 
	color: #35b0ff;
	margin: 0 12px 0 0;
}
/*Explore page video thumbnails*/
ul#videos {
	margin: 12px 0 0 3px ;
	padding: 0 0 10px  0;
	font-size: 0.7em;
}

ul#videos li {
	list-style: none;
	margin: 0 3px 10px 0 ;
	padding: 0;
	float: left;
}

/*END Explore page video thumbnails*/


/*Explore page content fade roomguide*/


.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
position: relative;
width: 687px;
height: 475px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
}

.fadecontent{ 
position: absolute;
float: left;
text-align: left;
color: #fff;
background: #32313d;
padding: 20px 10px 10px 10px;
visibility: hidden;
width: 667px;
margin-top: 60px;
}

.fadecontent h4{ 
margin: 12px 0 0 0;
margin: 12px 31px 0 32px;
}

.fadecontent h4 span{ 
color: #757575;
margin: 0 12px 0 0;
}

.fadecontent p{ 
font-size: 0.75em;
margin: 12px 31px 0 32px;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
font-size: 0.7em;
overflow: hidden;
float: right;
width: 425px;
margin: 20px 190px 10px 0;
z-index: 1200;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: #35b0ff;
z-index: 200;
}

.fadecontenttoggler a:hover{
color: #fff;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: #35b0ff;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: #35b0ff;

}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #fff;
color: #000;
}



/*enlarge popup link */
.tee_enlarge_link {
font-size: 1em;
margin: 0;
padding: 0;
font-weight: normal;
color: #35b0ff;
}

.tee_enlarge_link:hover {
color: #fff;
}





























/* SHOP STYLES SPECIFIC TO POP LIFE */
/* These override the styles in microshop.css */
.simple #shop_products { background: #32313d; margin-top: 20px; padding: 10px 0px 10px 10px; width: 660px; }
#shop_holder a { color: #fc007b;  }
#content .panel h3 { color: #fff; }
ul#shop_categories li a{
	color: #fff;
	background: url(../img/shop_category_tab.gif) top right no-repeat;
}

ul#shop_categories li a:hover{
	background: url(../img/shop_category_tab_active.gif) top right no-repeat;
}

/*#shop_index{
	background: #32313d;
}*/

/* product range / category items / static items */

li.mshop_item .productlink { color: #fff; }
.mshop_item a .product_title { color:#fff; }
.mshop_item a:hover, .tate_enlarge_img a:hover { color: #fff!important; }

a.basket_link { background-image: url('../img/icon_basket.gif'); }
a.basket_link:hover{ background-image: url('../img/icon_basket_hover.gif'); }

#shop_basket h3 { 
	color: #fff;
	background: url(../img/basket_lrg.gif) top left no-repeat;
}

.basketborder { border: 1px solid #fff; }

/*shop image span*/

.mshop_item a:hover span.range_prod_image {
	color: #fff;
	opacity: 0.9; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";	
}

#shop_basket .mshop_item a.remove_button{
	color: #ddd;
	background: url(../img/icon_remove.gif) center right no-repeat;
	}
	
#shop_basket a.review_basket {
	color: #fff;
	background-image: url('../img/icon_reviewarrow.gif');
	background-color: #fc007b;
	border-left: 1px solid #ff00bc;
	border-top: 1px solid #ff00bc;
	border-right: 1px solid #c40262;
	border-bottom: 1px solid #c40262;
}

#shop_basket a.review_basket:hover{
	background-color: #c40262;
	border-left: 1px solid #c40262;
	border-top: 1px solid #c40262;
	}	

/*shop image title*/   
#shop_basket .mshop_item a .product_title {	color:#fc007b; }
#shop_basket .mshop_item a .product_title:hover{ color:#fff; }

/* TAB SLIDER STYLES*/

/* These 2 lines specify style applied while slider is loading */
.csw { background: #32313d;}

.stripViewer { /* This is the viewing window */ 
background: #32313d; }

.stripNav a { /* The nav links */
	color: #fff!important;
	background: url(../img/shop_category_tab.gif) top right no-repeat;
}
		
.stripNav li a:hover {
	text-decoration: none;
	background: url(../img/shop_category_tab_active.gif) top right no-repeat;
}
		
.stripNav li a.current {
	background: url(../img/shop_category_tab_active.gif) top right no-repeat;
	color: #fff;
}

/* pop-up */
#poplifeshop h3 { }
.product_thumbnail a.thumbselected {
	 border: 2px solid #fc007b;
}
.popMsg { 
	border: 8px solid #fc007b;
	}

.shop_item a .price .nowprice, .shopsearch .searchresultitem a  .nowprice, .product_price .saveprice, .product_option_price .saveprice, .product_price .nowprice, .product_option_price .nowprice { color:#fc007b;}

