/*
--------------------------------------------------------------
How.css
Custom styles for the History of the World section - 960 width
-------------------------------------------------------------- */


/*
COLOURS
--------------------------------------------------------------
Body background:	#e9f2f8 (light blue)
Body text:			#333333 (dark grey)
Link:				#005172	(dark blue)
*/

	
/* Contents:
--------------------------------------------------------------
    'Basics
    'Grid exceptions
    'Exhibition bespoke styles
    'Header bar
    'Breadcrumb
    'Exhibition header
    'Exhibition branding
    'Left navigation
    'Typography
    'Exhibition footer
    'Footer
    'Global Modules 
        'Module overrides
        'Typography exhibition overrides
	    'Images
	    'HR styles
	    'Style overrides
	    'Tabbed module
	    'Filled module
	    'Rounded module
	    'Lists
	    'Ticket prices
	    'Action icons
	    'Flickr
	    'Slideshow
	    'Carousel
	    'Video
	    'Annotations (Points of interest)
	'Editor styles
	'Realignment styles
-------------------------------------------------------------- */


/* 'Basics
-------------------------------------------------------------- */
body {
	background: #e9f2f8;
}
a {
	color: #005172;
}

p.editor_arrowRight a,
a.arrowLeft,
a.arrowLeftBold,
a.arrowRight,
a.arrrowBack,
a.arrowMultiline span {
	background: transparent url(../../../images/v2/how/sprites/how_link_arrows.png) no-repeat 100% 5px;
}

a.arrowLeft,
a.arrowLeftBold,
a.arrowBack	{
	background-position: 0 -97px;
}

p.editor_arrowRight a,
a.arrowRight,
a.arrowMultiline span {
	background-position: 100% 4px;
}

a.arrowBack {
	margin-left: 1em;
	padding-left: 16px;
}

.dash {
	background: transparent url(../../../images/v2/how/sprites/how_dash_bullet.png) no-repeat 0 7px;
	padding-left: 12px;
}

.container{
	width: 94.4em;
	margin: 0 auto;	
}


/* 'Grid exceptions
-------------------------------------------------------------- */
div.grid_6 div.mod div.grid_3 {
	width: 21.2em;
}


/* 'Exhibition bespoke styles
-------------------------------------------------------------- */
p.facebook,
p.twitter {
	background: transparent url(../../../images/v2/how/sprites/how_mainsprite.png) no-repeat 0 0;
	padding-left: 1.8em;
}

p.facebook {
	background-position: -1500px -120px;
}

p.twitter {
	background-position: -1500px -70px;
	padding-left: 2.2em;
}

/* 'Header bar
-------------------------------------------------------------- */
div#headerBar {
    border-color:#D6E7F2;
}

body div#headerLogo h1 a, body div#headerLogo p a {
	background-position: 0 -310px;	
}
body div#headerLogo h1 a:hover, body div#headerLogo p a:hover,
body div#headerLogo h1 a:focus, body div#headerLogo p a:focus,
body div#headerLogo h1 a:active, body div#headerLogo p a:active {
	background-position: 0 -390px;	
}


input#siteWideSearch{
    border-color: #ccc;
    border-right: none;
    background-color: #fff;
    font-size: 1.4em;
    padding: 5px 6px 6px;
    width: 234px;
    margin: 0px;
}
div#headerMenu ul li{
    width: 160px;
    margin: 0px;
}
div#headerMenu ul{
    margin: 0px;
  
}
div#headerMenu ul li a:hover span,
div#headerMenu ul li a:focus span,
div#headerMenu ul li.current a span{
	background-position: 100% -104px;
	background-color: #1C5B74;

}
div#headerMenu ul li a:hover,
div#headerMenu ul li a:focus,
div#headerMenu ul li a:active{
	color: #000;
	text-decoration: none;
}
/* 'Breadcrumb
-------------------------------------------------------------- 
div#crumbLangContainer div#crumbCorner {
	height: 1.6em;
	padding: 0;
}

div#crumbLangContainer div#breadcrumb {
	background-color: #fff;
	color: #000;
	padding: 0 1.6em 0 1.3em;
	position: absolute;
	width: auto;
}*/

/* 'Horizontal menu
-------------------------------------------------------------- */
body div.navigation.horizontal ul {
    height: auto;
    overflow: hidden;
    padding: 1px 8px 1px 0;
    list-style-type: none;
    margin: 0;
}

body div.navigation.horizontal ul li.deepLink {
    background: url("../../../images/v2/defaults/linkArrows.png") no-repeat scroll 100% -406px transparent;
    color: #000000;
    margin-right: 8px;
}

body div.navigation.horizontal ul li {
    float: left;
    font-size: 1.4em;
    line-height: 1.4em;
    margin: 0;
    padding: 0 12px 0 0;
}

div#subMenuWrapper {
    border-bottom: 3px solid #D6E7F2;

    width: 94.4em;
}

body div.navigation.horizontal ul li a:hover{
	text-decoration: none;
	color: #000;	
}


/* 'Exhibition header
-------------------------------------------------------------- */
div#exHeader {
	margin-bottom: 0.6em;
	padding-top:3px;
	padding-bottom:2px;
}


/* 'Exhibition branding
-------------------------------------------------------------- */
p.exTitle {
	margin-bottom: 0;
}

h1.exTitle,
h1.exTitle a,
p.exTitle,
p.exTitle a {
	background: transparent url(../../../images/v2/how/sprites/how_mainsprite.png) no-repeat 0 0;
	display: block;
	height: 204px;
	text-indent: -9999px;
	width: 939px;
}

p.exTitle a {
	background-position: 0 -500px;
}

p.exTitle a:hover, 
h1.exTitle a:hover {
	border: none;
}


/* 'Left navigation
-------------------------------------------------------------- */
/* no override */
	
	
/* 'Typography
-------------------------------------------------------------- 	*/
h2.strapline {
	font-size: 2.2em;
	letter-spacing: 0.3px;
	line-height: 1.273em; /* = 23px;*/
	margin: 0 0 1.5em 0; /* 0 0 25px */
	font-weight: normal;
}

h4 {
	color: #005172;
	font-weight: bold;
}


/* 'Exhibition footer
-------------------------------------------------------------- */
div#exFooter {
	border-top: 1px dotted #005172;
	border-bottom: 1px dotted #005172;
	margin: 23px auto 28px auto;
	padding: 24px 0;
}
div#exFooter p {
	letter-spacing: 0.4px;
	margin: 0;
}


/* 'Footer
-------------------------------------------------------------- */
div#footer {
	padding: 0px 16px;
}
div#footer a {
	color: #005172;
}

		
/* 'Global Modules
    Contents:
--------------------------------------------------------------
        'Module overrides
        'Typography exhibition overrides
	    'Images
	    'HR styles
	    'Style overrides
	    'Tabbed module
	    'Filled module
	    'Rounded module
	    'Lists
	    'Ticket prices
	    'Action icons
	    'Flickr
	    'Slideshow
	    'Carousel
	    'Video
	    'Annotations (Points of interest)
-------------------------------------------------------------- */



/* 'Module overrides
-------------------------------------------------------------- */
div.mod div.ft {
	border-top: 1px dotted #005172;
	padding: 5px 0 0 0;
}

/* Module: Media block */
div.mod.mediaBlock.w94 div.text {
	margin-left: 11em;
}

div.mod.mediaBlock.w212 div.text {
	margin-left: 22.8em;
}


/* 'Typography exhibition overrides
-------------------------------------------------------------- */
div.mod div.hd h2 {
	font-size: 1.2em;
	font-weight: bold;
	margin:0;
	margin-bottom: 8px;
	display: inline-block;
	padding: 4px 13px;
}

div.mod.red div.hd h2,
div.mod.red div.hd h2 a {
	background-color: #ee2e24;
	color: #fff;
}

div.mod.blue div.hd h2,
div.mod.blue div.hd h2 a {
	background-color: #1c5b74;
	color: #fff;
}

div.mod.yellow div.hd h2,
div.mod.yellow div.hd h2 a {
	background-color: #ffce34;
	color: #000;
}

div.mod h3 {
	font-size: 1.7em;
	font-weight: bold;
	line-height: 16px;
	margin: 11px 0 21px 0;
}

div.mod div.ft a {
	background: transparent url(../../../images/v2/how/sprites/how_link_arrows.png) no-repeat 100% -196px;
	color: #ee2e24;
}


/* 'Images
-------------------------------------------------------------- */
div.mod div.img {
	margin: 0; 
}

div.mod div.img a:focus img,
div.mod div.img a:active img {
	border-bottom: 4px solid #005172;
}


/* 'HR styles
-------------------------------------------------------------- */
div.hr {
	border-bottom: 1px dotted #005172;
}

.dottedBottom {
	border-bottom: 1px dotted #005172;
}
.dottedTop {
	border-top: 1px dotted #005172;
}


/* 'Style overrides
-------------------------------------------------------------- */
div.mod.contrast div.hd {
	background-color: #d6e7f2;
}

div.mod.contrast div.bd {
	background-color: #d6e7f2;
}

div.mod div.bd.keylineT {
	border-top: 1px solid #d6e7f2;
}

div.mod div.bd.keylineB {
	border-bottom: 1px solid #d6e7f2;
}

div.mod div.bd.dotted {
	border-color: #d6e7f2;
	border-style: dotted;
}

div.mod.keyline {
	border-bottom: 1px dotted #d6e7f2;
}


/* 'Tabbed module
-------------------------------------------------------------- */
div.mod.tabbed div.hd div.shim {
	background: #ee2e24; /* ie_lt_7 */
}

div.mod.tabbed div.hd h2 {
	color:#fff;
}

div.mod.tabbed div.hd h2 a {
    color:#fff;
}

div.mod.tabbed div.ft {
	border-top: 2px solid #d6e7f2;
}


/* 'Filled module
-------------------------------------------------------------- */
div.mod.filled {
	background-color: #EE2E24;
	color: #FFF;
}

div.mod.filled div.hd h2,
div.mod.filled div.hd h2 a,
div.mod.filled a {
	color: #FFF;
}

div.mod.filled a.arrowRight {
	background-position: 100% -3198px;
}


/* 'Rounded module
-------------------------------------------------------------- */
/* no overrides at present */


/* 'Lists
-------------------------------------------------------------- */
div.mod.lists ul,
ul.bespokeList {
	list-style-image: url(../../../images/v2/how/sprites/how_bullet.png);
}


/* 'Ticket prices (Table)
-------------------------------------------------------------- */
div.mod.ticketPrices td {
	border-bottom: 1px dotted #555; /* todo */
}

div.mod.ticketPrices td.ticketType {
	color: #cacd96;         /* todo */
}


/* 'Action icons
-------------------------------------------------------------- */
div.mod.actionIcons li a {
	background-image: url(../../../images/v2/how/sprites/how_mainsprite.png);
}


/* 'Flickr
-------------------------------------------------------------- */
div.mod.flickr div.flickr_badge_image a:hover img {
	border-bottom: 4px solid #005172;
}


/* Module: Slideshow
-------------------------------------------------------------- */
div.mod.slideshow div.slideshowImageContainer {
    padding-bottom:8px; /* ie_all and ie_lt_7*/
}

body.js div.mod.slideshow div.slideshowCaptionContainer {
	float: left;
	margin: -1.6em 0 1.6em 0; /*IE_all */
	width: auto;
}

body.js div.mod.slideshow div.slideshowNavContainer {
	position: relative;
}

body.js div.mod.slideshow p.number {
	font-size: 1.8em;
	margin: 12px 0 0 0;
}

body.js div.mod.slideshow p.number a {
	color: #ee2e24;
}

body.js div.mod.slideshow ul.slideshowThumbs {
	margin: 0;
}

body.js div.mod.slideshow ul.slideshowThumbs a.slideshowPrev,
body.js div.mod.slideshow ul.slideshowThumbs a.slideshowNext {
	background: transparent url(../../../images/v2/how/sprites/how_mainsprite.png) no-repeat 0 0;
	height: 32px;
	padding: 0;
	position: absolute;
	text-indent: -9000px;
	top: 16px;
	width: 24px;
	z-index: 100;
}

body.js div.mod.slideshow ul.slideshowThumbs a.slideshowPrev:hover {
	background: transparent url(../../../images/v2/how/sprites/how_mainsprite.png) no-repeat 0 0;
	background-position: -1500px -32px;
}

body.js div.mod.slideshow ul.slideshowThumbs a.slideshowPrev,
body.js div.mod.slideshow ul.slideshowThumbs a.slideshowPrev:focus,
body.js div.mod.slideshow ul.slideshowThumbs a.slideshowPrev:active {
	background-position: -1500px -0px;
	right: 24px;
}

body.js div.mod.slideshow ul.slideshowThumbs a.slideshowNext:hover {
	background: transparent url(../../../images/v2/how/sprites/how_mainsprite.png) no-repeat 0 0;
	background-position: -1528px -32px;
}

body.js div.mod.slideshow ul.slideshowThumbs a.slideshowNext,
body.js div.mod.slideshow ul.slideshowThumbs a.slideshowNext:focus,
body.js div.mod.slideshow ul.slideshowThumbs a.slideshowNext:active {
	background-position: -1528px -0px;
	right: 0;
}

div.mod.slideshow ul.slideshowThumbs .caption {
	display: none;
	visibility: hidden;
}

/* 'Carosusel
-------------------------------------------------------------- */
/* To be implemented */


/* 'Video, send share
-------------------------------------------------------------- */
/* To be implemented */


/* 'Annotations (Points of interest)
-------------------------------------------------------------- */
/* To be implemented */


/* 'Editor styles- drop down list styles in the editor
-------------------------------------------------------------- */
/* This is used by the editor to remove formatting and apply the default paragraph format, in the markup the class is NEVER applied.
   Due to the Immediacy Editor applying the paragraph style twice, to show the Remove Formatting and normal option at the correct size a ratio 
   has had to be used.  The default size of normal is 1.2 x 1.2 = 1.44em ,  to make normal the correct size of 1.2em: 1.2/1.44 = 0.83333333 */
.Normal					{ font-size:16px !important; }
/* The following are needed in order for the editor to display the header styles, the values used on live are in typography.css 
   The values used by the editor are in editor.css */
.heading1, h1 			{ }
.heading2, h2 			{ }
.heading3, h3 			{ }
.exCaption              { }
.caption                { }
.standFirst             { }
.editor_arrowRight a    { }



/* Realignemnt styles
-------------------------------------------------------------- */