/* Pages
------------------------------------------------------------------------------------ */
div.main-logo {
	margin-bottom: 5px;
}

h1{
	text-transform:uppercase;
	color:#bf1e2e;
}

h1.title {
	margin: 0;
}

div.page-intro {
	position: relative;
	padding: 1em 0;
}

i.page-icon{
	background:url('../../img/sprite_icons.png') no-repeat 0 0;
	width:52px;
	height:42px;
	display:block;
	position: absolute;
}

	/* Set 1 */
	i.page-iconset-1-audio{
		background-position:4px -198px;
	}
	i.page-iconset-1-film{
		background-position:4px -132px;
	}
	i.page-iconset-1-slideshow{
		background-position:4px -62px;
	}
	i.page-iconset-1-story{
		background-position:4px 0;
	}

	/* Set 2 */
	i.page-iconset-2-audio{
		background-position:-45px -198px;
	}
	i.page-iconset-2-film{
		background-position:-45px -132px;
	}
	i.page-iconset-2-slideshow{
		background-position:-45px -62px;
	}
	i.page-iconset-2-story{
		background-position:-45px 0;
	}

	/* Set 3 */
	i.page-iconset-3-audio{
		background-position:-95px -198px;
	}
	i.page-iconset-3-film{
		background-position:-95px -132px;
	}
	i.page-iconset-3-slideshow{
		background-position:-95px -62px;
	}
	i.page-iconset-3-story{
		background-position:-95px 0;
	}


div.page-heading{
	padding-left: 10px;
}

h2{
	color:#bf1e2e;
	margin-bottom:0;
}

a.take-me-here{
	display:block;
	float:right;
	margin:20px 0 0 20px;
}

section#page-elements{
	border-top:1px dotted #252525;
	padding-top:15px;
}


/* Intro
*/
p#intro{
	margin:0;
	padding:0;
}


/* Photos
*/
div#photos{
	background:#ffffff;
	padding:10px;
	padding:0;
	margin-bottom:20px;
	position: relative;
	
}

	div#photos img{
		width:100%;
		margin:0 auto;
		display:block;
	}
		.photo-slideshow-wrapper {
			overflow: hidden;
			background-color: #000;
		}

	/*
	div#photos.transitional-slideshow {
		border-top: 8px solid #464646;
		padding-bottom: 10px;
	}
		.transitional-wrapper {
			position: relative;
			margin-bottom: 10px;
			overflow: hidden;
		}
			div#photos.transitional-slideshow .transitional-slide {
				position: relative;
			}
			div#photos.transitional-slideshow .transitional-slide:last-of-type {
				opacity: 0;
				position: absolute;
				bottom: 0px;
				width: 100%;
			}
			div#photos.transitional-slideshow {
				padding-top: 10px;
			}
			.transitional-slideshow h3 {
				padding: 0 10px;
			}

			div.slider {
				margin: 0 10px;
			}
			.ui-slider,
			.ui-slider-range,
			.ui-slider-handle {
				border-radius: 0;
			}
			.ui-slider {
			}
			.ui-slider-range {
				background: #ad1120;
				border: none;
			}
            .slider-tooltip {
                background-color: #252525;
                color: #fff;
                position: absolute;
                bottom: 4px;
                left: 30px;
                padding: 3px 10px;
                border-radius: 5px;
                box-shadow: 0 0 1px 1px rgba(0,0,0,0.2);
                font-size: 12px;
                transition: all 0.5s;
            }
            .hide-visibility {
                opacity: 0;
            }
            .hide-completely {
                display: none;
            }

            .slider-tooltip:after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-width: 12px;
                border-style: solid;
                border-color: transparent #252525 transparent transparent;
                top: 0px;
                left: -21px;
            }
			.ui-widget-content {
				border: 1px solid #464646;
			}
			
			.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
				border: 1px solid #959595;
			}
	*/

div#transitional-slideshow {
  margin: 0 0 50px 0; }
  div#transitional-slideshow div#transitional-wrapper {
    position: relative;
	overflow: hidden;
    margin: 0 0 20px 0; }
    div#transitional-slideshow div#transitional-wrapper div.transitional-slide {
      position: absolute;
      width: 100%;
      opacity: 0; }
      div#transitional-slideshow div#transitional-wrapper div.transitional-slide:first-of-type {
        opacity: 1; }
      div#transitional-slideshow div#transitional-wrapper div.transitional-slide img {
        width: 100%; }
      div#transitional-slideshow div#transitional-wrapper div.transitional-slide div.slide-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 96%;
        padding: 10px 2%;
        background: rgba(0, 0, 0, 0.55);
        color: #ffffff;
        font-size:1em;
       }
  div#transitional-slideshow div#transitional-dots {
    margin: 0 0 25px 0; }
    div#transitional-slideshow div#transitional-dots a {
      text-decoration: none;
      font-size: 25px;
      font-size: 2.5rem; }

	.slider-tooltip {
		background-color: #252525;
		color: #fff;
		position: absolute;
		bottom: -10px;
		left: 30px;
		padding: 3px 10px;
		border-radius: 5px;
		box-shadow: 0 0 1px 1px rgba(0,0,0,0.2);
		font-size: 12px;
		transition: all 0.5s;
	}
	.hide-visibility {
		opacity: 0;
	}
	.hide-completely {
		display: none;
	}

	.slider-tooltip:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-width: 12px;
		border-style: solid;
		border-color: transparent #252525 transparent transparent;
		top: 0px;
		left: -21px;
	}


/* Pager
*/
.cycle-pager { 
    text-align:right;
		z-index:500;
		display:block;
		padding:0;
		float:right;
		overflow:hidden;
		height:50px;
		margin:-22px 7px 0 0;
}
	.cycle-pager span {
		font-family:arial;
		font-size:50px;
		width:16px;
		height:16px;
		display:inline-block;
		zoom: 1;
		*display: inline;
		color:#919191;
		cursor:pointer;
	}
		.cycle-pager span.cycle-pager-active {
			color:#ffffff;
		}
		.cycle-pager > * { cursor: pointer;}

div#alt-caption-bg{
	top:0;
	left:0;
	z-index:100;
  	background: #464646;
	color:#ffffff;
	position: relative;
}
	.transitional-slide div#alt-caption-bg{
		z-index:0;
	}

#alt-caption{
	width:auto;
	display:block;
	margin-right:10px;
	font-size:1em;
	z-index:100;
	padding:5px 10px 5px 10px;
}

#alt-caption:empty {
   display: none;
}


/* Story and resources
*/
div#story{
	padding:20px 10px 10px 10px;
	background:#ffffff;
	margin-bottom:20px;
	border-top: 8px solid #464646;
}
	div#story h3 {
		background:#bf1e2e;
		font-weight:normal;
		color:#ffffff;
		padding-left:10px;
		height:22px;
		line-height:22px;
	}

	div#story h4{
		font-size:1em;
		font-weight:bold;
		margin:0 0 1em 0;
	}
	
	div#story li {
		margin-left: 18px;
	}
	
	ul#story-resources{
		list-style:none;
	}

		ul#story-resources li{
			background:url('../../img/icons/download-resource.gif') no-repeat 0 0;
			padding-left:24px;
		}

	div.story-content a.external{
		padding-right:17px;
		background:url('../../img/icons/external-link.gif') no-repeat 100% 0;
	}

	div#story-content-left{
		float:left;
		width:48%;
		margin-right:4%;
	}

	div#story-content-right{
		float:right;
		width:48%;
	}


/* Video
*/

	div#video{
		border-top: 8px solid #464646;
		background:#ffffff;
		margin-bottom:20px;
		width:100%;
		max-width:698px;
		overflow:hidden;
	}
	div#video.title{
		padding-top:10px;
	}
	div#video h3 {
		margin: 0 0 10px 10px;
	}
	div#video iframe{
		display: block;
		width:100%;
	}
	
	/*
	div#video video{
		width:100%;
	}

	Some magic numbers from http://www.coolestguidesontheplanet.com/videodrome/videojs/
	*/
	/*
	Commented out by Tom 11/9/2014 as it adds a big black space to the top of uploaded videos... Not sure why it's here
	.video-js {padding-top:56.25%;}
	.vjs-fullscreen {padding-top:0px;}

	.vjs-default-skin .vjs-big-play-button {
		top: 37.5%;
		left: 37.5%;
	}

	.vjs-default-skin .vjs-big-play-button:before {
		line-height: 100%;
		top: 35%;
	}
	*/


/* Audio
*/
div#audio{

	border-top: 8px solid #464646 !important;
	background-color: #ffffff;
	margin-bottom: 20px;
	padding: 10px;
}
	div#audio h3 {
		margin-bottom: 5px;
	}
	div#audio-title{
		display:block;
		float:left;
		margin-right:20px;
	}
	div#audio-player{
		display:block;
		float:left;
		width: calc(100% - 125px);
	}
	a#audio-transcript-anchor,
	a#event-content-anchor {
		padding-top: 2px;
		text-decoration: none;
		line-height: 2em;
		padding-left: 25px;
		background-repeat: no-repeat;
		background-position: 0px center;
	}
	.maximise-icon {
		background-image: url('../../img/icons/maximise.png');
	}
	.minimise-icon {
		background-image: url('../../img/icons/minimise.png');
	}

	div#audio-transcript{
		/*margin:0 0 20px 0;*/
	}
	span.min-max {
		font-weight: bold;
		font-size: 2.5em;
		vertical-align: top;
	}

	/* Controls */

		.vim-css .vjs-controls {
			height: auto !important;
			width: 80% !important;
			width: calc(100% - 150px) !important;
			padding-left: 20px !important;
		}

		.vim-css .vjs-controls > li {
			/*background-color: transparent !important;*/
		}

		/* Play button */
		.vim-css .vjs-controls > li.vjs-play-control {
			left: 0 !important;
			background-color: #fff !important;
			width: 30px !important;
		}
		/* Play Icon */
		.vim-css .vjs-play-control.vjs-play span {
			border-left-color: #c8212e !important; 
			margin-left: 0px !important;
		}
		/* Pause Icon */
		.vim-css .vjs-play-control.vjs-pause span {
			width: 5px!important;
			height: 18px!important;
			margin: 5px auto 0!important;
			border-left: 5px solid #c8212e!important;
			border-right: 5px solid #c8212e!important;
			margin: 7px 0 0 0px!important;
		}
		/* Progress Control */
		.vim-css .vjs-controls > li.vjs-progress-control {
			background-color: #ffffff !important;
		}

		/* Time Control */
		.vim-css .vjs-controls > li.vjs-time-control {
			background-color: #ffffff !important;
			color: #464646;
		}

		/* Volume Control */
		.vim-css .vjs-controls > li.vjs-volume-control {
			background-color: #ffffff !important;
		}

		/* Audio Styling */

		.vim-css .vjs-controls > li {
			/*background-color: #ffffff !important;*/
		}

/* Support
*/
div#support-block{
	background:#ffffff;
	border-top: 8px solid #464646 !important;
	padding:10px;
	margin-bottom:20px;
}

a#support-number,
a#support-number:visited{
	display:inline-block;
	/*background:#ffffff;*/
	background-color: #bf1e2e;
	border:1px solid #ad1120;
	color: #ffffff;
	text-decoration:none;
	text-align:center;
	font-weight:bold;
	padding:10px 20px;
}

/* Share
*/
div#share{
	background:#ffffff;
	padding:10px;
	margin-bottom:20px;
}
	div#share a,
	div#share a:visited{
		display:block;
		float:left;
		width:31.6666666666666666%;
		height:34px;
		background:url('../../img/icons/sprite-share.gif') #252525 no-repeat 50% 0;
		margin-right:2.5%;
	}
	div#share a.last,
	div#share a.last:visited{
		margin-right:0;
	}



	div#share a#share-twitter,
	div#share a#share-twitter:visited{
		background:url('../../img/icons/twitter-desktop.png') #252525 no-repeat 50% 0;
		background-position:50% 7px;
	}

	div#share a#share-facebook,
	div#share a#share-facebook:visited{
		background:url('../../img/icons/facebook-desktop.png') #252525 no-repeat 50% 0;
		background-position:50% 7px;
	}

	div#share a#share-googleplus,
	div#share a#share-googleplus:visited{
		background:url('../../img/icons/googleplus-desktop.png') #252525 no-repeat 50% 0;
		background-position:50% 7px;
	}

/* Other pages
*/
div#other-pages{
	background:#ffffff;
	padding:10px 10px 5px 10px;
	margin-bottom:20px;
	border-top: 8px solid #bf1e2e;
}
	div#other-pages ul{
		list-style:none;
		margin:0;
	}
		div#other-pages ul li{
			background:#464646;
			float:left;
			width:49%;
			margin-right:2%;
			margin-bottom:5px;
			min-height:1.7em;
		}
			div#other-pages ul li a,
			div#other-pages ul li a:visited{
				text-decoration:none;
				color:#ffffff;
				min-height:1.7em
				display:block;
			}
			div#other-pages ul li.current{
				background:#959595;
			}
				div#other-pages ul li span{
					color:#ffffff;
					padding: 6px 5px 6px 35px;
					line-height:1.7em;
					display: block;
				}

			div#other-pages ul li.right{
				margin-right:0;
			}
			div#other-pages ul li.full-width{
				width:100%;
			}
			div#other-pages ul li.film {
				background-image: url(../../img/icons/film.png);
				background-repeat: no-repeat;
				background-position: 10px center;
			}
			div#other-pages ul li.story {
				background-image: url(../../img/icons/story.png);
				background-repeat: no-repeat;
				background-position: 10px center;
			}
			div#other-pages ul li.slideshow {
				background-image: url(../../img/icons/slideshow.png);
				background-repeat: no-repeat;
				background-position: 10px center;
			}
			div#other-pages ul li.audio {
				background-image: url(../../img/icons/audio.png);
				background-repeat: no-repeat;
				background-position: 10px center;
			}


/* Map
*/
div#map{
	margin:0 auto;
	width:678px;
	width:97%;
	height:350px;
	background:#ffffff;
	padding:1.5%;
	margin-bottom:20px;
}

	div#map div#map-canvas{
		width:100%;
		height:350px;
	}

	div#map iframe{
		width:100%;
		height:100%;
	}

	div#map div#map-canvas div.gm-style-iw img {
		float: left;
		width: 80px;
		margin-right: 10px; }
	  div#map div#map-canvas div.gm-style-iw div.indent {
		margin-left: 90px; }
	  div#map div#map-canvas div.gm-style-iw h2 {
		margin-bottom: 0.5em;
		color: #404040; }
		div#map div#map-canvas div.gm-style-iw h2 a {
		  text-decoration: none;
		   }
	  div#map div#map-canvas div.gm-style-iw p {
		margin-bottom: 0.5em; }

	a#map-youarehere{
		position:absolute;
		bottom:10px;
		right:10px;
		background:url('../../img/icons/icon_yourarehere.png') no-repeat #ffffff 2px 2px;
		display:block;
		width:36px;
		height:36px;
		text-decoration:none;
	}


/* Places of interest
*/
div#places_of_interest{
	border-top:0;
	padding:1.5%;
	border-top: 8px solid #bf1e2e;
}
	div#places_of_interest ul{
		list-style:none;
	}
	
		div#places_of_interest ul li{
			margin:0 0 0.5em 0;
		}

			div#places_of_interest ul li:last-child{
				margin-bottom:0;
			}

			div#places_of_interest ul li a,
			div#places_of_interest ul li a:visited{
				background:#464646;
				display:block;
				text-align:center;
				color:#ffffff;
				padding:2px 0;
				text-decoration:none;
			}
				div#places_of_interest ul li a img{
					position: relative;
					top: 4px;
					margin-right: 5px;
					vertical-align: top;
					height: 14px;
				}


/* Events
*/
div.event-instances{
	font-size: 0.9em;
	width:100%;
	margin-bottom:15px;
}
	div.event-instances div{
		/*font-size:0.9em;*/
	}
	div.event-instances div.datetime{
		width:60%;
	}
	div.event-instances div.actions{
		text-align:left;
	}
	div.venuetitle {
		margin-bottom: 5px;
	}
	p.event-added{
		padding:5px;
		border:1px solid #e5e5e5;
		margin:5px 0;
		background:#f5f5f5;
	}

	a.add-to-itinerary, span.view-itinerary a {
		background-color: #bf1e2e;
		color: #ffffff;
		text-decoration: none;
		padding: 5px 10px;
		display: inline-block;
		margin-bottom: 20px;
	}


/* UIAnswers
*/
div#uiquestion{
	background:#ffffff;
	padding:10px 10px 5px 10px;
	margin-bottom:20px;
	border-top: 8px solid #bf1e2e;
	border-bottom: 8px solid #bf1e2e;
	position:relative;
}

	div#uiquestion-question-answers{
		float:left;
		width:48%;
		margin-right:2%;
	}

	div#uiquestion-media{
		float:right;
		width:48%;
		margin-left:2%;
		margin-bottom:10px;
	}
		div#uiquestion-media img{
			width:100%;
		}

	div#uiquestion-videoembed video {
	  width: 100%    !important;
	  height: auto   !important;
	}

	/*
	div#uiquestion-videoembed{
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		/*padding-top: 25px;
		height: 0;
	}
		div#uiquestion-videoembed iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		*/
	div#uiquestion-question{
		font-size:1.1em;
	}
	div#uiquestion-answers{
		font-size:1.1em;
	}
		div#uiquestion-answers label{
			width:100%;
		}
		div#uiquestion-answers label input[type=radio]{
			display:block;
			float:left;
			width:15px;
			height:15px;
			margin-right:5px;
			border:1px solid #cccccc;
		}
			div#uiquestion-answers label div.uiquestion-radioinput{
				display:block;
				background:url('../../img/uianswers/radio-sprite.png') no-repeat 0 0;
				margin-right:8px;
				width:26px;
				height:24px;
				float:left;
			}
				div#uiquestion-answers label:hover{
					cursor:pointer;
				}
				div#uiquestion-answers label div.uiquestion-radioinput-checked{
					background:url('../../img/uianswers/radio-sprite.png') #bf1e2e no-repeat -26px 0;
				}
			div#uiquestion-answers label div.uiquestion-answertext{
				display:block;
				float:left;
				width:80%;
				-ms-word-break: break-all;
				/* Be VERY careful with this, breaks normal words wh_erever */
				word-break: break-all;
				/* Non standard for webkit */
				word-break: break-word;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
				hyphens: auto;
			}
	div.uiquestion-correctresponse,
	div.uiquestion-incorrectresponse{
		position:absolute;
		width:80%;
		left:5%;
		background:#ffffff;
		background-color:rgba(255,255,255,0.99);
		border:1px solid #cccccc;
		padding:5%;
	}
	a#uiquestion-tryagain,
	a#uiquestion-tryagain:visited{
		margin-right:10px;
	}


@media screen and (max-width: 735px) {

	a.take-me-here{
		float: none;
		margin: 20px auto 20px auto;
		width: 9em;
	}

	div#other-pages ul li {
		float: none;
		width: 100%;
		margin-right: 0%;
	}

	div#story-content-left,
	div#story-content-right{
		float:none;
		margin-right:0;
		width:100%;
	}

	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		width: 20px;
		height: 20px;
		top: -4px;		
	}
	.slider-tooltip {
		left: 33px;
	}
}


@media screen and (max-width: 450px) {

	div#audio-player {
		width: 100%;
	}

	.vim-css .vjs-controls > li.vjs-volume-control {
		width: auto !important;
		right: 0 !important;
	}

	div#share a#share-facebook,
	div#share a#share-facebook:visited{
		background:url('../../img/icons/sprite-share.gif') #252525 no-repeat 50% 0;
	}
	div#share a#share-twitter,
	div#share a#share-twitter:visited{
		background:url('../../img/icons/sprite-share.gif') #252525 no-repeat 50% -34px;
		/*background-position:50% -34px;*/
	}
	div#share a#share-googleplus,
	div#share a#share-googleplus:visited{
		background:url('../../img/icons/sprite-share.gif') #252525 no-repeat 50% -68px;
		/*background-position:50% -68px;*/
	}

	div#uiquestion-question-answers{
		float:none;
		width:100%;
		margin-right:0;
	}

	div#uiquestion-media{
		float:none;
		width:100%;
		margin-left:0;
		margin-bottom:10px;
	}

}