/* Museum of London CSS 22 sept. 08 - by Rik Abel - rik@tapelondon.co.uk


COLOURS
-------

blue (eg links): #0066ff;
blue (tab bg): #0078e1;
pink (eg subnav links, headings): #ff0066;
light grey (eg tab bg): #f1f1f1;
mid grey (header bg): #dcdcdc;
darker grey (ticker borders): #adadad;
orange (arch. headings): #ff3300;



SECTIONS
--------


 0. =reset (zero out all margins and padding)
 1. =typo reset (for consistent cross-browser font sizing and line height)
 2. =miscellaneous
 3. =links
 4. =layout & modules
 5. =navigation
 6. =forms
 7. =typography
 8. =lists
 9. =images
 10. =subsite overrides (colours, banners, etc...)
 
Modifications:
JO	24/9/2008	path to all images changed from ../img/... to ../images/rebrand/...
JO	25/9/2008	changed selector for SearchSelect1_SearchButton to select Header1_SearchButton instead, as this is what the new user control puts out
JO	25/9/2008	changed introText ID to phIntroText, to keep with conventions on placeholder IDs
JO	30/9/2008	added 	"margin-top: -20px" to #ticker, to account for the margin-bottom: 20px added to #subnav, which was to make sure there's whitespace in the absence of the ticker
JO	30/9/2008	fixed h3.dock and h3.arch to pick up the relevant text colour for all variants (so they're the same as the H3 descendents of docklands and arch container DIVs). Currently these H3s also show the logo snippet, though this may go. It's controlled by a different style statement, though.

*/


/* reset.css v1.0 | 20080212 - zeroes out all margins and padding */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	
}

body {
	background-color: #fff;
	text-align: center;
	color: #000;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 */
 
 
/* =Typography reset */
 
  /*
   * Font size and line height declarations are based on the following ALA
   * article:
   *   http://www.alistapart.com/articles/howtosizetextincss
   *
   * All modern browsrs use a 16px default font size. Specifying the font-size
   * and line-height in ems (relative to the 16px default font) allows the user
   * to resize the font in the browser and produces the most consistent results
   * across different browsers.
   */
   
  
body
  {
    font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
  }

.container
  {
    /* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.2em; /* 12px x 1.333 = 16px */

  }
  
body, caption, th, td, input, textarea, select, option, legend, fieldset
  {

    font-family: Arial, Helvetica, verdana, sans-serif;
  }
  
  
/* =misc. */
 
 .hide {
	display: none;
}

#crumbtrail strong {
	padding-left: 10px;
	background: url(../images/rebrand/blue_triangle.gif) 0 50% no-repeat;
	margin-right: 5px;
	color: #ff0066;
}


/* =links */

a,
a:visited {
	color: #0066ff;
	text-decoration: none;
}

a:hover,
a:visited:hover {
	text-decoration: underline;
}

#crumbtrail a {
	padding-left: 10px;
	background: url(../images/rebrand/blue_triangle.gif) 0 50% no-repeat;
	margin-right: 5px;
}

.module ul li a, 
#intro ul li a {
	padding-left: 8px;
	background: url(../images/rebrand/blue_triangle.gif) 0 0.3em no-repeat;
	display: block; 
	font-size: 0.9em;
}


h2 a,
h2 a:visited,
h3 a,
h3 a:visited {
	color: #ff0066;
}


#footer a,
#footer a:visited {
	color: #fff;
}

a.rsslink {
	padding-left: 14px;
	background: #fff url(../images/rebrand/feed.gif) 4px 0.2em no-repeat;
	font-size: 0.9em;
}
  
  
/* =layout & modules */


.container {
	width: 770px;
	margin: 0 auto;
	text-align: left;
}

#crumbtrail {
	padding: 5px 0;
	font-size: 0.9em;
}

#navWrap {
	width: 770px;
	background: #fff url(../images/rebrand/grey_dot.gif) bottom left repeat-x;
	overflow: auto; /* this clears floated elements, which is nice... you'll see it quite a few times. */
	position: relative;
}

.search {
	float: right;
	}


#header {
	height: 70px;
	border-bottom: 1px solid #bebebe;
	background: #13064f url(../images/rebrand/header_bg.gif) 0 0 no-repeat;
	position: relative;
}


#header h1 {
	position: absolute;
	top: 12px;
	left: 10px;
	width: 118px;
	height: 47px;
}

#header h1 a { /* using accessible image replacement technique... text indented out of 'viewing port' to leave bg image (logo) visible */
	display: block;
	width: 118px;
	height: 47px;
	overflow: hidden;
	text-indent: -9999px; /* hide the html text */
	text-decoration: none;
	background: url(../images/rebrand/h1_logo.gif) 0 0 no-repeat;
}


#ticker {
	padding: 5px 10px;
	border-bottom: 1px solid #adadad;
	overflow: auto;
	color: #666;
	margin-bottom: 10px;
	margin-top: -20px;
}


#intro {
/*	height: 180px;
	background: #fff url(../images/rebrand/intro_pic_mol.jpg) top right no-repeat;*/
	overflow: auto;
	margin-bottom: 10px;
}

#intro #phIntroText {
	margin-left: 10px;
	margin-right: 520px;

}

#intro .introImageContainer{
	float:right;
}


.moduleWrapper { /* ensures rows all line up and floated elements - e.g. 'modules' - are contained */
	overflow: auto;
	margin-bottom: 10px;
}

.module {
	width: 250px;
	overflow: auto;
}

.align-left {
	float: left;
	margin-right: 10px;
}

.align-right {
	float: right; 
}



#leftCol { /* contains two small features on left */
	float: left;
	width: 250px;
	margin-right: 10px;
}

#leftCol .module {
	margin-bottom: 10px;
}

#banners {
	clear: both;
	width: 770px;
}


#footer {
	color: #fff;
	font-size: 0.9em;
	background: #0079E0 url(../images/rebrand/footer_bg.gif) 0 0 repeat-x;
	padding: 3px 0;
	text-align: right;
	clear: both;
	width: 770px;
	margin-bottom: 10px;
}

#footer p {
	margin: 0 10px;
}


/* =navigation */

ul#siteNav {
	float: left;
	margin-left: 10px;
	display: inline; /* fix floated element margin-doubling bug in IE6 */
	margin-top: 5px;
}

ul#siteNav li {
	float: left;
	margin-right: 10px;
}


ul#siteNav li#mol_tab,
ul#siteNav li#mol_tab a,
ul#siteNav li#mol_tab a:visited {
	width: 137px;
	height: 22px;
	
}

ul#siteNav li#docklands_tab,
ul#siteNav li#docklands_tab a,
ul#siteNav li#docklands_tab a:visited {
	width: 118px;
	height: 22px;
	
}

ul#siteNav li#arch_tab,
ul#siteNav li#arch_tab a,
ul#siteNav li#arch_tab a:visited {
	width: 131px;
	height: 22px;
	
}

ul#siteNav li a,
ul#siteNav li a:visited {
	float: left;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	text-decoration: none;
	background-color: #f3f3f3;
}

ul#siteNav li#mol_tab a,
ul#siteNav li#mol_tab a:visited {
	background: #f3f3f3 url(../images/rebrand/navtab_mol.gif) 0 0 no-repeat;
	}
	
ul#siteNav li#docklands_tab a,
ul#siteNav li#docklands_tab a:visited {
	background: #f3f3f3 url(../images/rebrand/navtab_docklands.gif) 0 0 no-repeat;
	}
	
ul#siteNav li#arch_tab a,
ul#siteNav li#arch_tab a:visited {
	background: #f3f3f3 url(../images/rebrand/navtab_arch.gif) 0 0 no-repeat;
	}
	
	
ul#siteNav li#mol_tab a:hover,
ul#siteNav li#mol_tab a:visited:hover,
.mol ul#siteNav li#mol_tab a,
.mol ul#siteNav li#mol_tab a:hover,
.mol ul#siteNav li#mol_tab a:visited,
.mol ul#siteNav li#mol_tab a:visited:hover,
/*
ul#siteNav li#mol_tab a.active,
ul#siteNav li#mol_tab a.active:hover,
ul#siteNav li#mol_tab a.active:visited,
ul#siteNav li#mol_tab a.active:visited:hover,
*/
ul#siteNav li#docklands_tab a:hover,
ul#siteNav li#docklands_tab a:visited:hover,
.docklands ul#siteNav li#docklands_tab a,
.docklands ul#siteNav li#docklands_tab a:hover,
.docklands ul#siteNav li#docklands_tab a:visited,
.docklands ul#siteNav li#docklands_tab a:visited:hover,
/*ul#siteNav li#docklands_tab a.active,
ul#siteNav li#docklands_tab a.active:hover,
ul#siteNav li#docklands_tab a.active:visited,
ul#siteNav li#docklands_tab a.active:visited:hover,*/
ul#siteNav li#arch_tab a:hover,
ul#siteNav li#arch_tab a:visited:hover,
.arch ul#siteNav li#arch_tab a,
.arch ul#siteNav li#arch_tab a:hover,
.arch ul#siteNav li#arch_tab a:visited,
.arch ul#siteNav li#arch_tab a:visited:hover
/*ul#siteNav li#arch_tab a.active,
ul#siteNav li#arch_tab a.active:hover,
ul#siteNav li#arch_tab a.active:visited,
ul#siteNav li#arch_tab a.active:visited:hover
*/
{
	background-position: 0 -22px;
}



#subNav {
	border-bottom: 1px solid #adadad;
	padding: 5px 0;
	height: 1.3em; /* need this to make IE 6 clear the floated list elements */
	margin-bottom: 20px;
}

#subNav li {
	float: left;
}

#subNav li a,
#subNav li a:visited {
	float: left;
	display: block;
	text-transform: uppercase;
	color: #ff0066;
	text-decoration: none;
	padding: 0 10px;
	border-right: 1px solid #999;
}

#subNav li.last a,
#subNav li.last a:visited {
	border: none;
	}

#subNav li a:hover,
#subNav li a:visited:hover {
	text-decoration: underline;
}

#subNav li a.active,
#subNav li a.active:visited {
	font-weight: bold;
	color: #fff;
	background: #ff0066;
}


/* =forms */


.search label {
	color: #666;
	font-size: 0.9em;
	font-weight: bold;
}

.search .search-input {
	border: 1px solid #ccc;
	margin-right: 5px;

}

#Header1_SearchButton {
	position: relative;
	top: 3px; /* IE messes up vertical alignment so we did this... */
}


/* =typography */


h2 {
	text-transform: uppercase;
	color: #ff0066;
	font-size: 1.3em;
}


.module h3.mol a, 
.module h3.mol a:visited, 
.module h3 a, 
.module h3 a:visited, 
.docklands .module h3.mol a, 
.arch .module h3.mol a,
.docklands .module h3.mol a:visited, 
.arch .module h3.mol a:visited
.module h3, 
.module h3.mol, 
.docklands .module h3.mol,
.arch .module h3.mol,
.arch .module h3.mol a,
.arch .module h3.mol a:visited
{
	color: #ff0066;
}

.module h3, 
.module h3.mol, 
.docklands .module h3.mol,
.arch .module h3.mol
{
	text-transform: uppercase;
	font-size: 1em;
	background: #dadada url(../images/rebrand/module_heading_bg.gif) bottom right no-repeat;
	padding: 5px 10px;
	margin-bottom: 10px;
}

h4,
h5,
h6 {
	font-weight: bold; /* might want to update these later when new design rolls out to other pages */
}


.module p,
#intro p {
	margin-bottom: 0.5em;
}


#ticker p strong {
	text-transform: uppercase;
	font-weight: normal;
}




/* =lists */

.module ul,
#intro ul {
	margin-left: 0.5em;
	clear: left;
	
}

#newsletter ul {
	margin-left: 130px;
	clear: none;
}

/* =images */


img {
	border: 0;
}

#topFeatures .module img, 
#leftCol .module img {
	float: left; 
	margin-right: 10px;
	margin-bottom: 10px;
}

#leftCol #newsletter img {
	margin-bottom: 0;
}

.bigFeature img {
	margin-bottom: 10px;
}


/* =subsite overrides */

.docklands #header {
	background: #13064f url(../images/rebrand/header_docklands_bg.gif) 0 0 no-repeat;
}

.docklands  #header h1 {
	width: 250px;
	height: 47px;
}

.docklands #header h1 a { 

	width: 250px;
	height: 47px;
	background: url(../images/rebrand/h1_docklands_logo.gif) 0 0 no-repeat;
}

.docklands  #subNav li a,
.docklands  #subNav li a:visited {
	color: #000066;
	}
	
.docklands   #subNav li a.active,
.docklands   #subNav li a.active:visited {
	background: #000066;
	color: #fff;
}

.docklands #intro {

/*	background: #fff url(../images/rebrand/intro_pic_docklands.jpg) top right no-repeat;*/
}

.docklands #intro #phIntroText {
	font-size: 1em;
	}

.docklands .module h3, .module h3.dock, .arch .module h3.dock{
	background: #dadada url(../images/rebrand/docklands_heading_bg.gif) bottom right no-repeat;
}


.docklands h2,
.docklands #crumbtrail strong {
	color: #000066;
}

.docklands h2 a,
.docklands h2 a:visited,
.docklands h3 a,
.docklands h3 a:visited 
.docklands .module h3 a, 
.docklands .module h3 a:visited,
.module h3.dock, 
.module h3.dock a, 
.module h3.dock a:visited, 
.arch .module h3.dock,
.arch .module h3.dock a,
.arch .module h3.dock a:visited
{
	color: #000066;
}



/* Archaeology subsite */



.arch #header {
	background: #840B0E url(../images/rebrand/header_arch_bg.gif) 0 0 no-repeat;
}

.arch   #header h1 {
	width: 272px;
	height: 47px;
}

.arch  #header h1 a { 

	width: 272px;
	height: 47px;
	background: url(../images/rebrand/h1_arch_logo.gif) 0 0 no-repeat;
}

.arch   #subNav li a,
.arch  #subNav li a:visited {
	color: #cc3300;
	}
	
.arch    #subNav li a.active,
.arch   #subNav li a.active:visited {
	background: #cc3300;
	color: #fff;
}

.arch  #intro {
/*	background: #fff url(../images/rebrand/intro_pic_arch.jpg) top right no-repeat;*/
}

.arch  .module h3, .module-narrow h3, .module h3.arch, .module-narrow h3.arch, .docklands .module h3.arch{
	background: #d6d6d6 url(../images/rebrand/arch_heading_bg.gif) bottom right no-repeat;
	color: #cc3300;
}

.arch  h2,
.arch  h2 a,
.arch  h2 a:visited,
.arch  h3 a,
.arch  h3 a:visited,
.arch #crumbtrail strong,
.arch  .module h3 a,  
.arch  .module h3 a:visited,  
.module h3.arch a, 
.module h3.arch a:visited, 
.docklands .module h3.arch,
.docklands .module h3.arch a,
.docklands .module h3.arch a:visited
{
	color: #cc3300;
}


/*Firefox: stop second horizontal nav (#subNav) from wrapping onto two lines:
Note this is a tad larger than the other stylesheets (0.85em) owing to the base font size of the home page using this one
*/

#subNav {
    font-size: 0.9em;
}

/*JF - new twemplates for archaeology */
.module-narrow {
	width: 244px;
	overflow: auto;
}
#LCol {
	float: left;
	margin-right: 10px;
}

#MCol {
	float: left;
	margin-right: 10px;
}
#RCol {
	float: right; 
}

.LDblColHeading 
{
	float:left;
}
.RSnglColHeading
{
	float:right; border-left: 1px solid #1F1F1F; padding-left:6px
}
#phLSectionTtl h3, #phRSectionTtl h3
{
	text-transform: uppercase;
	padding:0 0 8px 4px;
}
#phPageTitle h3
{
	font-size:1.5em;
}
.module-narrow h3
 {
	background:#D6D6D6 url(../images/rebrand/arch_heading_bg.gif) no-repeat scroll right bottom;
	clear: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 1em;
	
}

.module-narrow ul
{
	float: left;
	width: 125px;
	
}

/*the same as .module ul li a, #intro ul li a*/
/*behaviour in IE is wierd. the commented out style bhaves slightly better */
.module-narrow ul li
{
	padding-left: 8px;
	background: url(../images/rebrand/blue_triangle.gif) 0 0.3em no-repeat;
	display: block; 
	font-size: 0.9em;
/*	
	list-style-type: none;
	padding: 2 0 0 5px;
	background: url(../images/rebrand/blue_triangle.gif) no-repeat 0 7px;	
*/
}

.module-narrow img
{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 100px;
}
/*Archaelology colour scheme*/
.mola h2, .mola h3, .mola h3 a, .mola h3 a:visited
{
	color:#CC3300;	
}
#phIntro
{
	width:26%;
	float:left;
}
#introImage
{
	float:right; width:68%;
	overflow:hidden;
}
 #phIntroImage img/*.introimg-lesswide img */
{
/*	width:100%; */
}
#google_translate_element, #google_translate_element div div
{
	float:right; 
	
}
#google_translate_element:after{clear:both}
/*\JF*/