@charset "utf-8";
/* CSS Document */
#titanic-wrapper {margin:0 auto; width:960px; position:relative; }
#sub-wrapper {background: #ffffff; height: 100%; max-height: 100%; }
.clear { clear: both; }
@import url(http://fonts.googleapis.com/css?family=Nobile);
html { background: url('/images/titanic/titanic-bg-2.jpg') no-repeat top #000; }
body { background: none!important; width: auto!important;}
#titanic-wrapper #hdr { padding:6px 0 0 0!important; margin: 0!important; }
#titanic-wrapper #wrapper {background: transparent; display: inline-block;}
#titanic-wrapper #main-navigation {border-bottom:#520A0A 4px solid}
#titanic-wrapper #wrapper #titanic-primary-content { float: left; width: 639px; background: #fff; }
#titanic-wrapper #wrapper #titanic-secondary-content { border-left: 1px solid #ccc; float: left; width: 320px; background: #fff; height: 100%; }
#titanic-wrapper #wrapper #titanic-tertiary-content { clear: both; width: 960px; background: #fff; height: 100%; }
#titanic-wrapper #wrapper #banner.titanic { border-top:6px solid #ffffff; border-right: 12px solid #ffffff; border-bottom: 12px solid #ffffff; border-left:12px solid #ffffff; margin: 0; height: 290px; background: url(/images/titanic/h1-bg.png) repeat-x top transparent; -webkit-box-shadow: inset 2px 2px 15px 0px #000;-moz-box-shadow: inset 2px 2px 15px 0px #000;box-shadow: inset 2px 2px 15px 0px #000; position:relative; }
#titanic-wrapper #wrapper #banner.titanic p.quote {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; clear: both; float: right; padding: 10px 10px 0 0!important; margin: 10px 10px 0 0; font-size: 1.4em; line-height: 140%; color: #000; text-align: right; text-shadow: 1px 1px 13px #000000; /*filter: dropshadow(color=#000000, offx=1, offy=1);*/ }
#titanic-wrapper #wrapper #banner.titanic p.quote .small { font-size: .8em!important; font-weight: normal; }
#titanic-wrapper #wrapper #banner h1 { margin: 15px 0 0 15px; font-weight: bold; float: left; position: absolute; }
#titanic-wrapper #wrapper p {margin: 5px 0 10px 0; font-family: Verdana, Arial, Helvetica, sans-serif normal; }
#titanic-wrapper #wrapper #titanic-primary-content h2 { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-size:2em; padding: 10px 5px 10px 5px; margin: 10px 0 0 0; width: 590px; color: #860B0B; border-top:#ccc solid 1px; font-variant:small-caps; font-weight: 500; }
#titanic-wrapper #wrapper #intro { margin: 0 15px; }
/*Search*/
#titanic-wrapper #wrapper #search #titanic-searchform-holder h2{ font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-size:1.4em; padding: 0; margin: 0 0 0 0; color: #860B0B; font-weight: 500;}
#titanic-wrapper #wrapper #search .outerWrapper{ margin: 178px 0 0 20px; padding:10px;display:inline-block; width:500px;
background: #efefef; border: 1px solid #999999; display: none;}
#titanic-wrapper #wrapper #search p{ background: #ffffff; padding: 10px; border: 1px solid #999999; margin: 0; }
#titanic-wrapper #wrapper #search #titanic-searchform-holder { position: absolute; margin: 175px 0 0 179px;}
#titanic-wrapper #wrapper #search #titanic-searchform-holder form { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; padding:10px 5px 10px 10px; background-color: #efefef; margin: 0; width: 530px; border: 1px solid #999999; position: relative; -webkit-box-shadow: 0px 0px 15px 4px #fff; -moz-box-shadow: 0px 0px 15px 4px #fff; box-shadow: 0px 0px 15px 4px #fff; }
#titanic-wrapper #wrapper #search #titanic-searchform-holder #keywords2 {border: 1px solid #999; color:#000; height: 24px; font-family:Verdana, Geneva, sans-serif; width: 425px; padding: 0 0 0 4px; margin: 10px 0 0 0; background: #ffffff; }
#titanic-wrapper #wrapper #search #titanic-searchform-holder #titanic-search-btn {border:none; position:absolute; margin: 10px 0 0 10px; }
/*Stories*/
#titanic-wrapper #wrapper #stories { height: 490px; margin: 0 0 0 20px; }
#titanic-wrapper #wrapper #stories li { float: left; width: 186px; height: 166px; background: #ffffff; margin: 15px 15px 0 0; padding: none; border: 1px solid #999999; position: relative; }
#titanic-wrapper #wrapper #stories li img { width: 186px;}
#titanic-wrapper #wrapper #stories h2{ border-top: none; margin: 0;}
#titanic-wrapper #wrapper #titanic-primary-content #stories li .outerWrapper {position:absolute; bottom:6px; left:6px; margin:0 0 0 0; padding:5px;display:inline-block; width:87%;
background: url(/images/titanic/white-pxl-60.png) transparent;}
#titanic-wrapper #wrapper #titanic-primary-content #stories li .outerWrapper h3 {font-size:.95em; padding:2% 4%; clear:both; float:left; margin:0 0 0 0; border:#ccc 1px solid; width:90%; font-weight:normal; background: url(/images/titanic/white-pxl-85.png) transparent; }
#titanic-wrapper #wrapper #titanic-primary-content #stories ul li:hover h3 { background:#860B0B!important; text-decoration:none; color:#000; filter: none;}
#titanic-wrapper #wrapper #titanic-primary-content #stories ul li:hover h3 a {color:#FFF; text-decoration:none;}
#titanic-wrapper #wrapper #titanic-primary-content #stories h3 { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; /*font-variant:small-caps;*/ font-size:1em; font-weight: bold; color:#860B0B; margin: 5px;}
#titanic-wrapper #wrapper #titanic-primary-content #stories p { font-size:.8em; margin: 0 5px 5px 5px; line-height: 150%; }
#titanic-wrapper #wrapper #titanic-primary-content #stories a { color: #000; text-decoration: none; cursor: pointer; }
#titanic-wrapper #wrapper #titanic-primary-content #stories .btn a { font-size: 1.3em;font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; margin: 15px 25px 0 0; padding: 10px; width: 166px; color: #fff;float: right; background: #860B0B; float: right; background: #860B0B; text-align: center; }
#titanic-wrapper #wrapper #titanic-primary-content #stories .btn a:hover { margin: 15px 25px 0 0; padding: 10px; color: #860B0B;float: right; background: #860B0B; float: right; background: #fff; border: 1px solid #860B0B; }
#titanic-wrapper #wrapper #titanic-primary-content #stories a:hover p { text-decoration: underline;}
#titanic-wrapper #wrapper #titanic-primary-content .numbers { width: 600px; padding: 0 0 0 15px; clear: both; }
#titanic-wrapper #wrapper #titanic-primary-content .numbers h3 { font-size: 1.3em; color: #000 ; margin: 6px 0 6px 6px }
#titanic-wrapper #wrapper #titanic-primary-content .numbers li { float: left; padding-right: 20px; }
#titanic-wrapper #wrapper #titanic-primary-content .numbers img { margin: 15px 0 10px 25px; }
#titanic-wrapper #wrapper #titanic-secondary-content .numbers { padding: 0 0 0 15px; }
#titanic-wrapper #wrapper #titanic-secondary-content .numbers h3 { font-size: 1.3em; color: #000 ; margin: 6px 0 6px 6px }
#titanic-wrapper #wrapper #titanic-secondary-content .numbers li { float: left; padding-right: 20px; }
#titanic-wrapper #wrapper #titanic-secondary-content .numbers img { margin: 15px 0 15px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content h2 { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-size:1.8em; padding: 15px 5px 0 0; margin: 10px 0 0 0; color:#860B0B; width: 280px; border-top:#ccc solid 1px; font-variant:small-caps; }
#titanic-wrapper #wrapper #titanic-secondary-content h3 { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-size:1.2em; color:#000000; margin: 10px 0 5px 0; }
/*liveChat*/
#titanic-wrapper #wrapper #titanic-secondary-content #liveChat { background: #EDDBDB; border: 1px dotted #860B0B; padding: 10px; margin: 5px 20px 0px 20px;}
/*timeline*/
#titanic-wrapper #wrapper #titanic-secondary-content #timeline { background: #fff; height: 695px; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline ul.noscript { overflow:scroll; z-index: 500; height: 500px; padding: 0 15px 15px 15px; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline ul.noscript li h3 { color: #000000; font-weight:bold;}
#titanic-wrapper #wrapper #titanic-secondary-content #timeline ul.noscript li p { float:none;}
#titanic-wrapper #wrapper #titanic-secondary-content #timeline h2 { margin: 0 0 0 15px; border-top: none;}
#titanic-wrapper #wrapper #titanic-secondary-content #timeline .flexslider { width: 320px!important; padding-top: 40px; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline div.flexslider ul{background-color:#ffffff; float: left; margin-top: 20px; }
div.flexslider ul.slides li{margin:15px 0 0 20px!important;line-height:0px; width: 265px!important; border: 1px solid #860B0B; -webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75) -moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.75); float: left; background: url(/images/titanic/timeline-bg.jpg) no-repeat #fff;}
div.flexslider ul li.last{ margin-bottom: 100px; background: url(/images/titanic/timeline-bg-last.jpg) no-repeat #fff;}
#titanic-wrapper #wrapper #titanic-secondary-content #timeline div.flexslider ul li img {padding:0 0 0 0; margin:0 0 0 0; display: none; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline div.flexslider ul li p { color: #000000; padding: 3px; float: left; font-family: Verdana, Arial, Helvetica, sans-serif normal; font-size:0.9em; line-height: 130%; margin: 0px 0px 4px 4px; width: 230px; border: 1px solid #cccccc; background: url(/images/titanic/white-pxl-85.png) transparent; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline div.flexslider ul li h3 {background:#860B0B; color:#ffffff; padding:5px 8px 5px 8px;margin:0; filter: alpha(opacity=100); -moz-opacity:0.95; opacity:0.95; font-weight:bold; border-top: none; border-right: none; border-bottom: 1px solid #860B0B; border-left: 1px solid #860B0B; float: right; font-face: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-size:12px; font-weight: bold; text-align: right; }
#titanic-wrapper #wrapper #titanic-secondary-content #timeline .time { font-size: .9em; }
/*Artifacts*/
#titanic-wrapper #wrapper #artifacts { width: 600px; padding: 0 0 0 20px; }
#titanic-wrapper #wrapper #artifacts ul { width: 630px; margin-top: 15px; }
#titanic-wrapper #wrapper #artifacts li{ width: 150px; height: 100px; float: left; border: 1px solid #999999; margin: 4px; position: relative; }
#titanic-wrapper #wrapper #artifacts li img { width: 150px; height: 100px;}
#titanic-wrapper #wrapper #artifacts li.square { width: 210px; height: 210px; }
#titanic-wrapper #wrapper #artifacts li.square img { width: 210px; height: 210px;}
#titanic-wrapper #wrapper #artifacts li.tall { width: 150px; height: 210px; border: }
#titanic-wrapper #wrapper #artifacts li.tall img { width: 150px; height: 210px;}
#titanic-wrapper #wrapper #artifacts li.long { width: 210px; height: 100px; }
#titanic-wrapper #wrapper #artifacts li.long img { width: 210px; height: 100px;}
#titanic-wrapper #wrapper #artifacts li.small { width: 100px; height: 100px; }
#titanic-wrapper #wrapper #artifacts li.small img { width: 100px; height: 100px;}
#titanic-wrapper #wrapper #artifacts li a { text-decoration: none; color: #ffffff; }
#titanic-wrapper #wrapper #artifacts li a:hover { text-decoration: underline; cursor:pointer; }
#titanic-wrapper #wrapper #artifacts p { font-weight: normal; line-height: 130%; font-size: 1em; float: left; padding: 4px; margin: 0; bottom: 0; position: absolute; color: #fff; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); width: 142px; }
#titanic-wrapper #wrapper #artifacts .square p { width: 202px; bottom: 0;}
#titanic-wrapper #wrapper #artifacts .tall p { width: 142px; bottom: 0;}
#titanic-wrapper #wrapper #artifacts .long p { width: 202px; bottom: 0;}
#titanic-wrapper #wrapper #artifacts .small p { width: 92px; bottom: 0;}
#titanic-wrapper #wrapper #titanic-primary-content #video { width: 600px; padding: 0 0 0 15px; }
#titanic-wrapper #wrapper #titanic-primary-content #video li { width: 280px; float: left; margin: 10px 0 0 10px; }
#titanic-wrapper #wrapper #titanic-primary-content #video li.last { margin-left: 20px; }
#titanic-wrapper #wrapper #titanic-primary-content #video h3 { margin: 5px 0 10px 0; font-size: 1em; }
#titanic-wrapper #wrapper #titanic-primary-content #video p { margin: 5px 0 0 0;}
#titanic-wrapper #wrapper #titanic-primary-content #audio { width: 605px; padding: 0 0 20px 15px; float: left; }
#titanic-wrapper #wrapper #titanic-primary-content #audio h3 { margin: 0 0 0 10px; }
#titanic-wrapper #wrapper #titanic-primary-content #audio h3 a{ text-decoration: none; color: #000;}
#titanic-wrapper #wrapper #titanic-primary-content #audio h3 a:hover{ text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-primary-content #audio p { font-size: 1em; margin: 0 10px 3px 10px; line-height: 150%; }
#titanic-wrapper #wrapper #titanic-primary-content #audio img.thumb { float: left; margin: 5px 10px 0 0; border: solid 1px #999; }
#titanic-wrapper #wrapper #titanic-primary-content #audio h3 { margin: 0 0 10px 0; font-size: 1.3em; }
#titanic-wrapper #wrapper #titanic-primary-content #audio .button { margin-top: 5px; float: none; margin: none; }
#titanic-wrapper #wrapper #titanic-primary-content #audio li { margin: 10px 0 0 10px; width: 285px; float: left; }
#titanic-wrapper #wrapper #titanic-primary-content #audio li.last { margin-left: 15px; }
#titanic-wrapper #wrapper #titanic-primary-content #audio .btn a { font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; margin: 15px 25px 0 0; padding: 10px; width: 150px; color: #fff; background: #860B0B; float: right; background: #860B0B; text-align: center; }
#titanic-wrapper #wrapper #titanic-primary-content #audio .btn a:hover { margin: 15px 25px 0 0; padding: 10px; color: #860B0B;float: right; background: #860B0B; float: right; background: #fff; border: 1px solid #860B0B; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib { float: left; width: 280px!important; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib h3 { margin: 10px 0 10px 0; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib h3 a{ text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib h3 a:hover{ text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib h2 { width: 290px; }
#titanic-wrapper #wrapper #titanic-primary-content #imgLib img { float: left; margin: 5px 15px 0 0; }
/*External links/resources*/
#titanic-wrapper #wrapper #titanic-secondary-content #links { width: 300px; float: left; padding: 0 0 0 15px; }
#titanic-wrapper #wrapper #titanic-secondary-content #links img { margin: 0 12px 5px 0; border: 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #links p a{ text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #links p a:hover{ text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #education { margin-bottom: 5px; }
#titanic-wrapper #wrapper #titanic-secondary-content #education img { float: left; border: 1px solid #cccccc; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li { width: 280px; height: 60px; padding: 8px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li.first { border-bottom: none; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li.last { border-bottom: none; padding: 8px 0 20px 0; border-bottom: 1px dotted #999; }
#titanic-wrapper #wrapper #titanic-secondary-content #education h3 a{ text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #education h3 a:hover{ text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li a:hover { text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #education li a img { margin: 0 10px 0 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop img { float: left; border: 1px solid #cccccc; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop li { width: 280px; padding: 5px 0 5px 0; margin: 15px 0 10px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop li.last { border-bottom: none; padding: 5px 0 25px 0; margin: 0 0 10px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop h3 a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop h3 a:hover { text-decoration: underline; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop li a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop li a:hover { text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #bookshop li a img { margin: 0 10px 0 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast { margin-bottom: 5px; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast img { float: left; border: 1px solid #cccccc; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li { width: 280px; height: 60px; padding: 8px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li.first { border-bottom: none; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li.last { border-bottom: none; padding: 8px 0 20px 0; border-bottom: 1px dotted #999; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast h3 a{ text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast h3 a:hover{ text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li a:hover { text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #findMyPast li a img { margin: 0 10px 0 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub { width: 300px; padding: 0 0 0 15px; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub img { float: left; border: 1px solid #cccccc; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub li { width: 296px; padding: 5px 0 5px 0; margin: 15px 0 0 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub li.last { border-bottom: none; padding: 5px 0 25px 0; margin: 0 0 10px 0; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub h3 a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub h3 a:hover { text-decoration: underline; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub li a { text-decoration: none; color: #000; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub li a:hover { text-decoration: underline; }
#titanic-wrapper #wrapper #titanic-secondary-content #listPub li a img { margin: 0 10px 10px 0; }
/*Titanic stories*/
.stories #titanic-wrapper #wrapper #storiesNav {width:100%; clear:both; float:left;}
.stories #titanic-wrapper #wrapper #storiesNav ul li {width:224px; margin:0 8px 8px 0; position:relative;float:left;}
.stories #titanic-wrapper #wrapper #storiesNav ul li.rightEnd {margin:0 0 8px 0; width:223px; }
.stories #titanic-wrapper #wrapper #storiesNav ul li a {float:left;width:100%;}
.stories #titanic-wrapper #wrapper #storiesNav ul li img {width:100%; clear:both; height:200px;}
.stories #titanic-wrapper #wrapper #storiesNav ul li .outerWrapper {position:absolute; bottom:8px; left:8px; margin:0 0 0 0; padding:5px;display:inline-block; width:80%;
background: url(/images/titanic/white-pxl-60.png) transparent; filter: none;}
.stories #titanic-wrapper #wrapper #storiesNav ul li .outerWrapper h2 {font-size:1.2em; padding:2% 4%; clear:both; float:left; margin:0 0 0 0; border:#ccc 1px solid; width:90%; font-weight:normal; background: url(/images/titanic/white-pxl-85.png) transparent;}
.stories #titanic-wrapper #wrapper #storiesNav ul li:hover h2 { background:#860B0B; text-decoration:none; color:#FFF;filter: none; }
.stories #titanic-wrapper #wrapper #storiesNav ul li:hover h2 a {color:#FFF; text-decoration:none;}
.stories #titanic-wrapper #wrapper {background: #fff; padding:2.1%; width:95.8%}
.stories #titanic-wrapper #wrapper #storiesTitle {width:100%; clear:both; font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; font-size:2em; padding:15px 20px 15px 20px; font-weight:500; background:#860B0B; color:#FFF; margin:0 0 20px -20px; position: relative;}
.stories #titanic-wrapper #wrapper #linkBack a.btn {float: right; text-align:center; padding: 5px; font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; font-size: 1em; text-decoration:none; background:#860B0B; color:#ffffff; border:#ffffff 1px solid; margin: -59px 0 0 837px; position: absolute; float: right;}
.stories #titanic-wrapper #wrapper #linkBack a.btn:hover {background:#ffffff; color:#860B0B; border:#860B0B 1px solid; }
.stories #titanic-wrapper #wrapper #storyBanner { position:relative; clear:both; border:#860B0B solid 1px; padding:8px;}
.stories #titanic-wrapper #wrapper #storyBanner #storyTitle img {border:#fff solid 1px; float:left; margin:0 10px 0 0;}
.stories #titanic-wrapper #wrapper #storyNav {width:240px; padding:10px 0 20px 20px; float:right; }
.stories #titanic-wrapper #wrapper #storyNav h2 {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; font-size:1.6em; color:#860B0B}
.stories #titanic-wrapper #wrapper #storyNav ul li a {line-height:135%; text-decoration:none; font-size:.8em; color:#333;}
.stories #titanic-wrapper #wrapper #storyNav ul li a:hover {line-height:135%; text-decoration:none; font-size:.8em; color:#000;}
.stories #titanic-wrapper #wrapper #storyNav ul li {float:left; padding:10px 0; line-height:100%; font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; font-size:1.6em; border-bottom:#ccc 1px solid}
.stories #titanic-wrapper #wrapper #storyNav ul li img {float:left; border:1px solid #CCC; margin:0 10px 0 0;}
.stories #titanic-wrapper #wrapper #storyNav a.btn {width:100%; text-align:center; clear:both; padding:10px 0; float:left; font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; font-variant:small-caps; text-decoration:none; background:#860B0B; color:#FFF; }
.stories #titanic-wrapper #wrapper #storyNav a.btn:hover {background:#FFF; color:#860B0B; border:#860B0B 1px solid; }
.stories #titanic-wrapper #wrapper #storyBanner .bannerContent h1#storyTitle {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; color:#FFF; float:left; display:block; width:100%; background-color: transparent; padding:0 0 10px 0; margin:0 0 0 0; text-align:left; height:auto; font-size:2.8em; font-weight:300; font-variant:small-caps; text-shadow: 0px 0px 10px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);}
.stories #titanic-wrapper #wrapper #storyBanner .bannerContent .personDescription {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; color:#FFF; float:left; display:block; width:100%; background-color: transparent; padding:0 0 20px 0; margin:0 0 0 0; text-align:left; height:auto; font-size:1.8em; font-weight:300; font-variant:small-caps; text-shadow: 0px 0px 10px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0); line-height:135%;}
.stories #titanic-wrapper #wrapper #storyBanner .bannerContentDark h1#storyTitle {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; color:#000; float:left; display:block; width:100%; background-color: transparent; padding:0 0 10px 0; margin:0 0 0 0; text-align:left; height:auto; font-size:2.8em; font-weight:300; font-variant:small-caps; text-shadow: 0px 0px 10px #fff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);}
.stories #titanic-wrapper #wrapper #storyBanner .bannerContentDark .personDescription {font-family: 'Nobile', Verdana, Arial, Helvetica, sans-serif normal; color:#000; float:left; display:block; width:100%; background-color: transparent; padding:0 0 20px 0; margin:0 0 0 0; text-align:left; height:auto; font-size:1.8em; font-weight:300; font-variant:small-caps; text-shadow: 0px 0px 10px #fff;
filter: dropshadow(color=#ffffff, offx=0, offy=0);}
.stories #titanic-wrapper #wrapper #storyBanner #storyIntro { padding:8px; font-weight:bold; border:#ccc solid 1px; float:left; background: url("/images/titanic/white-pxl-85.png") transparent; filter: none;}
.stories #titanic-wrapper #wrapper #storyBanner #storyIntroWrapper {padding:8px; float:left; background: url("/images/titanic/white-pxl-60.png") transparent;}
.stories #titanic-wrapper #wrapper #storyBanner .bannerContent {position:absolute; left:30px; width:332px; bottom:30px; }
.stories #titanic-wrapper #wrapper #storyContent {width:640px; margin:10px 0; float:left;}
.stories #titanic-wrapper #wrapper #storyContent .imgWrapper {background:#efefef; border:#CCC 1px solid; float:right; padding:8px; font-size:0.9em; margin:10px 0 20px 20px;}
.stories #titanic-wrapper #wrapper #storyContent .imgWrapper p {padding:6px 0; margin:0; width:180px;}
.stories #titanic-wrapper #wrapper #storyContent .imgWrapper p.landscape {padding:6px 0; margin:0; width:240px;}
.stories #titanic-wrapper #wrapper #storyContent p {margin:10px 0;}
#storyLinks li {display:none;}
/* Timeline styles */
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 820px;
height:350px;
/* custom decorations */
background: transparent;/*url(/img/global/gradient/h300.png) repeat-x*/;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:1500px;
}
/* single scrollable item */
.scrollable li{
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:240px;
height:300px;
}
.scrollable li h3{
text-align: center;
font-size: 1.8em;
margin: 10px 0;
}
.scrollable li img{
margin: 0 auto;
display:block;
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
background: url(/images/titanic/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:153px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 14px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* up and down */
a.up, a.down {
background: #CC6;/*url(../img/scrollable/arrow/vert_large.png) no-repeat;*/
float: none;
margin: 10px 50px;
}
/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }
/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
/* position and dimensions of the navigator */
.navi {
margin-left:270px;
width:500px;
height:20px;
}
/* items inside navigator */
.navi a {
width:8px;
height:8px;
float:left;
margin:3px;
padding-right: 20px;
background: url(/images/titanic/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
}
/* mouseover state */
.navi a:hover {
background-position:0 -8px;
}
/* active state (current page state) */
.navi a.active {
background-position:0 -16px;
}
/*ColoxBox styles*/
/*
ColorBox Core Style
The following rules are the styles that are consistant between themes.
Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
/*
Example user style
The following rules are ordered and tabbed in a way that represents the
order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(/images/colorbox/overlay.png) repeat 0 0;}
#colorbox{ margin: 0 auto;}
#cboxTopLeft{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -100px 0;}
#cboxTopRight{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -129px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -100px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(/images/colorbox/controls.png) no-repeat -129px -29px;}
#cboxMiddleLeft{width:21px; background:url(/images/colorbox/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(/images/colorbox/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(/images/colorbox/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(/images/colorbox/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff;}
#cboxLoadedContent{margin-bottom:85px; clear:both; float:left;}
#cboxTitle{position:absolute; bottom:25px; left:0; text-align:center; width:94%; color: #666;clear:both!important; display:inline-block!important; font-size:0.9em; padding:0 3%; height: 55px;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#666; font-size:0.9em }
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/images/colorbox/controls.png) no-repeat -75px 0px; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/colorbox/controls.png) no-repeat -50px 0px; width:25px; height:25px; text-indent:-9999px;}
#cboxNext.hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(/images/colorbox/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(/images/colorbox/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(/images/colorbox/controls.png) no-repeat -25px 0px; width:25px; height:25px; text-indent:-9999px;}
#cboxClose.hover{background-position:-25px -25px;}
/*
The following fixes png-transparency for IE6.
It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
Colorbox preloads navigation hover classes to account for this.
!! Important Note: AlphaImageLoader src paths are relative to the HTML document,
while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}
#inline_content p { margin-top: 10px; padding:10px; background:#fff; line-height: 150%; }
#inline_content_2 p { margin-top: 10px; padding:10px; background:#fff; line-height: 150%; }
/* Flexslider styles for timeline */
/*
* jQuery FlexSlider v1.8
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 100%; margin: 0; padding: 0; height: 594px!important;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {background: transparent; position: relative; zoom: 1; }
.flexslider .slides {zoom: 1; }
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
/* Caption style */
/* IE rgba() hack */
/*.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#000000); zoom: 1;}*/
.flex-caption {width: 259px; padding: 2%; position: absolute; left: 0; bottom: 0; color: #000; font-size: 1em; line-height: 18px; }
/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {width: 320px; height: 60px; background: url(/images/titanic/down.png) no-repeat transparent; margin: 257px 0 0 0;}
.flex-direction-nav li .prev {width: 320px; height: 60px; background: url(/images/titanic/up.png) no-repeat transparent; margin: -318px 0 0 0; float:left;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 12px; position: absolute; bottom: 60px; text-align: center; margin: 0 0 0 303px;}
.flex-control-nav li {margin: 0 0 7px 0; display: inline-block; zoom: 1; *display: inline; float: left;}
/*.flex-control-nav li:first-child {margin: 0;}*/
.flex-control-nav li a {width: 10px; height: 10px; display: block; background: url(/images/titanic/nav-off.png) no-repeat #fff; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover { cursor: default; background: url(/images/titanic/nav-on.png) no-repeat #fff; }
.flex-control-nav li a.active { cursor: default; background: url(/images/titanic/nav-on.png) no-repeat #fff;}