html, body {
	height: 100%;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #ccc;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1em;
}
#sizer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #66c;
	visibility: hidden;
}

#audio-holder {
	position: fixed;
	bottom: 0;
	right: 0;
	height: 28px;
	width: 28px;
	z-index: 999;
}

#audio-holder.play,
#audio-holder.pause {
	cursor: pointer;
	background-image: url(../html5/play-pause.png);
	background-repeat: no-repeat;
}

#audio-holder.pause {
	background-position: 0 0;
}

#audio-holder.play {
	background-position: 0 -28px;
}

audio {
	height: 30px;
	visibility: hidden;
}

a {
	color: #ccc;
}
a:active, a:hover {
	color: #fff;
}
body > header {
	position: fixed;
	background: #000;
	width: 100%;
	z-index: 9999;
	top: 0;
}
body > header a {
	color: #4d4d4d;
	text-decoration: none;
	text-transform: uppercase;
}
body > header a.active {
	color: #fff;
}
body > header img {
	float: left;
}

article > header {
	display: none;
}

.js nav.nav-collapse {
	overflow: inherit;
}

#sbs-logo {
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: 0;
	z-index: 999;
}

.nav-toggle {
	width: 70px;
	height: 55px;
	float: right;
	text-indent: -9999px;
	background: transparent url(../html5/hamburger.png) no-repeat 50% 50%;
}

ul.nav {
	margin: 0 1em;
	list-style: none;
	z-index: 9999;
}
ul.nav li {
	width: auto !important;
	float: left;
	margin: 1.5em;
	font-size: 0.7em;
	font-weight: bold;
}

ul.nav li.social {
	float: right;
}

ul.nav li.social .fb_iframe_widget {
	float: left;
	margin-right: 5px;
}

ul.nav li.social #twitter-widget-0 {
	float: right;
}

.social-holder {
	width: 120px;
	height: 20px;
	float: left;
}

/* styles that apply over 640px */
@media (max-width: 57.5em) {
	ul.nav {
		clear: left;
	}
	ul.nav li {
		width: 40% !important;
		margin: 0.75em 1.5em;
	}
	ul.nav li.social {
		float: left;
		width: 100% !important;
		text-align: center;
		margin: 0.75em 1.5em;
	}
}


.enhanced .text-center,
.touch .ios-text-center,
h1, h2, h3 {
	text-align: center;
}

article {
	height: 100%;
	margin: 0;
	padding: 0;
	padding-top: 54px;
}

section:after {
	content: "";
	clear: left;
	display: block;
}

blockquote {
	font-style: italic; 
}

blockquote sup {
	font-style: normal;
}

dl {
	margin: 1em 0;
	padding: 0 1em;
}
dt, dd {
	margin: 1em 0;
}

a.footnote:link,
a.footnote:link {
	text-decoration: none;
}
a.footnote:hover,
a.footnote:active {
	text-decoration: underline;
}

.ScrollSceneIndicators {
	z-index: 1000 !important;
}

.panel p,
.panel h2,
.panel h3,
.panel h4 {
	padding-left: 1em;
	padding-right: 1em;
}

.panel p {
	margin: 0;
}

.panel p + p {
	margin: 1em 0;
}

.panel {
	color: #ccc;
	position: relative;
	overflow: hidden;
}

.enhanced.dark-1,
.enhanced.dark-2,
.enhanced.dark-3 {
	text-shadow: 1px 1px 2px #000;
}

.backgroundsize .enhanced .text-wrapper {
	background-size: cover;
}

.backgroundsize .enhanced.dark-1 .text-wrapper {
	background-image: url(../img/bg/background-dark-1.jpg);
}

.backgroundsize .enhanced.dark-2 .text-wrapper {
	background-image: url(../img/bg/background-dark-2.jpg);
}

.backgroundsize .enhanced.dark-3 .text-wrapper {
	background-image: url(../img/bg/background-dark-3.jpg);
}

.light-small,
.backgroundsize .enhanced.light .text-wrapper {
	background-image: url(../img/bg/background-light.jpg);
	background-color: #f9f8f4;
	color: #333;
}

.backgroundsize .enhanced.light-2 .text-wrapper {
	background-image: url(../img/bg/background-light-2.jpg);
	background-color: #f9f8f4;
	color: #333;
}


.white {
	color: #fff;
}

.backgroundsize .panel .doco {
	background-image: url(../img/bg/background-sb.jpg);
	background-color: #f9f8f4;
	color: #333;
}

img.res {
	display: block;
	width: 100%;
}

/* html may has video class from modernizr */
div.video,
.doco,
.atmos video,
div.video video {
	width: 100%;
}

div.video,
.doco {
	height: 100%;
}

.touch video {
	height: 46.6%;
}

.no-touch .doco video {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#doco-closer {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 1em;
	background: black;
	text-align: center;
	color: white;
	font-size: 1.5em;
	line-height: 1;
	text-transform: uppercase;
	padding: 0.3em;
	margin: 0.5em;
	z-index: 99;
	cursor: pointer;
}

#doco-prompt {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 180px;
	margin-left: -90px;
	color: #fff;
	cursor: pointer;
}

.doco ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.doco ul.row-1 {
	padding-top: 20%;
}

.doco li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.doco li img { cursor: pointer; }

.portrait .portrait-image,
.portrait .subject {
	text-align: center;
}

#credits h4 {
	text-align: center;
}

#credits .text {
	top: 15%;
}
#credits .text.middle {
	top: 30%;
}

ul.credits {
	padding: 0;
	margin: 0 auto;
	max-width: 32em;
	list-style: none;
}
ul.credits li {
	margin: 0;
	padding: 0;
	text-align: center;
}
.memorial ul {
	padding: 0;
	margin: 0 auto;
	max-width: 25em;
	list-style: none;
}
.memorial li {
	margin: 0 0 1em 0;
	padding: 0;
	text-align: center;
}
.memorial li a {
	text-shadow: 1px 1px 2px #000;
	text-decoration: none;
}
.memorial li a:hover {
	text-decoration: underline;
}
.memorial h4 {
	text-align: center;
	text-transform: uppercase;
	margin-top: 2em;
}

.opening-panel {
	display: none;
}

.opening-panel.enhanced {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 99;
}
.opening-panel > div {
	width: 100%;
	margin: 0 auto;
	clear: left;
	position: relative;
}
.opening-panel .site-logo img {
	width: 100%;
}

#load-message {
	position: absolute;
	top: 75%;
	width: 120px;
	left: 50%;
	margin-left: -60px;
	text-align: center;
	font-size: 0.8em;
}

#load-message span {
	display: inline-block;
	width: 20px;
	height: 20px;
	float: left;
	margin: 0 10px;
}

#loading-img {
	width: 194px;
	position: absolute;
	top: 60%;
	left: 50%;
	margin-left: -88px;
}
#instruction-img {
	width: 216px;
	top: 350px;
}

#load-counter {
	position: absolute;
	top: 75%;
	width: 50px;
	text-align: center;
	margin-left: 47.5%;
}

.hide {
	display: none;
}

/* return link needs to be display:block */
.return a {
	display: block;
}

.panel .page,
.panel .caption,
.panel .subject,
.panel .text {
	padding: 0.5em 0;
}

.center {
	margin: 0 auto;
}

.replaced {
	width: 100%;
}
/* hide replaced images, show them when w > 768 */
img.replaced {
	display: none;
}

#repl-title-section-1 {
	max-width: 709px;
}

#repl-norman-quote {
	max-width: 387px;
}

#repl-sb-title {
	max-width: 585px;
}

#repl-roma-quote1 {
	max-width: 278px;
}

#repl-map-aus-merapas-text {
	max-width: 414px;
}

#repl-map-aus-merapas-text-launch {
	max-width: 414px;
}

#repl-position-merapas {
	max-width: 372px;
}

#repl-diary-timelapse {
	max-width: 712px;
}

#repl-diary-inhabited {
	max-width: 642px;
}

#repl-diary-merapas {
	max-width: 770px;
}

#repl-diary-nojunk {
	max-width: 734px;
}

#repl-diary-jungle {
	max-width: 644px;
}

#repl-rain-dance {
	max-width: 546px;
}

#repl-diary-joss-text {
	max-width: 708px;
}

#repl-mustika-loading-text {
	max-width: 567px;
}

#repl-title-section-3 {
	max-width: 458px;
}

#repl-title-section-3-pursued {
	max-width: 436px;
}

#repl-diary-waiting {
	max-width: 365px;
	position: relative;
}

#repl-title-section-4 {
	max-width: 458px;
}

#repl-title-section-4-singapore {
	max-width: 429px;
}

#repl-letter {
	max-width: 696px;
}

#repl-roma-quote2 {
	max-width: 305px;
}

#repl-replay {
	position: relative;
	max-width: 194px;
}


/* styles that apply over 640px */
@media (min-width: 40em) {
	
}

/* styles that apply under 480px */
@media (max-width: 480px) {
	.subject br,
	.text br,
	.caption br {
		display: none;
	}
}

/* styles that apply over 480px */
@media (min-width: 480px) {

	.subject br,
	.text br,
	.caption br {
		display: none;
	}
	
	.enhanced .subject br,
	.enhanced .text br,
	.enhanced .caption br {
		display: block;
	}
	
	.panel .page,
	.panel .caption,
	.panel .text {
		line-height: 1.5em;
		margin: 0 auto;
	}
	
	.trial {
		width: 100%;
		height: 100%;
	}

	.trial .enhanced .text {
		top: 5%;
	}

	.trial dt {
		margin: 0.618em 0;
		width: 48%;
		float: left;
		clear: left;
	}
	.trial dd {
		margin: 0.618em 0;
		width: 48%;
		float: left;
		margin-left: 4%;
	}
	.trial .intro,
	.trial dl {
		max-width: 920px;
		margin: 0 auto;
	}
	
}

/* styles that apply under 768px */
@media (max-width: 768px) {
	.panel .atmos + .text-wrapper .text,
	.panel .image + .text-wrapper .text {
		top: 10%;
	}
	
	#repl-title-section-1-credit {
		margin-top: -120px;
	}
	
}

/* styles that apply over 768px */
@media (min-width: 768px) {

	img.replaced {
		display: inherit;
	}
	
	.text-replaced {
		display: none;
	}

	.no-touch .panel p,
	.no-touch panel h2,
	.no-touch panel h3,
	.no-touch panel h4 {
		margin: 1em 0;
	}


	.light-small {
		background-image: none;
		background-color: #000
	}

	.panel .text-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	/*
		any text following atmos or image (whose width is constrained)
		sits absolutely positioned, top left of parent panel
	*/
	.panel .atmos + .text-wrapper,
	.panel .image + .text-wrapper {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.text-wrapper .text {
		max-width: 720px;
		width: 100%;
	}
	
	.panel .caption,
	.enhanced .text,
	.panel .atmos + .text-wrapper .text,
	.panel .image + .text-wrapper .text {
		position: absolute;
		left: 50%;
		margin-left: -360px;
		max-width: 740px;
		width: 100%;
	}

	.panel .caption {
		bottom: 10%;
	}
	.panel .caption.left {
		left: 30%;
	}
	.panel .caption.top {
		top: 10%;
		bottom: initial;
	}
	.panel .caption.right {
		margin-left: 20%;
		top: 50%;
		margin-top: -170px;
		width: 25%;
	}
	
	.panel .page {
		max-width: 740px;
		padding-top: 50px;
	}

	.enhanced.light-2 a, .enhanced.light a {
		color: #333;
	}

	.panel.enhanced {
		width: 100%;
		height: 100%;
		position: fixed;
	}
	
	.enhanced .text.memorial {
		top: 0;
	}

	/* these fill horizontally and have height, top set on resize by js */
	.enhanced .text-wrapper,
	.enhanced .atmos + .text-wrapper,
	.enhanced .image + .text-wrapper,
	.enhanced .page,
	.enhanced .image,
	.enhanced .atmos {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		padding: initial;
	}

	.enhanced .text,
	.panel .atmos + .text-wrapper .text,
	.panel .image + .text-wrapper .text {
		top: 40%;
	}
	
	.enhanced .text.top,
	.panel .atmos + .text-wrapper .text.top,
	.panel .image + .text-wrapper .text.top {
		top: 25%;
	}

	.enhanced .text.ceil,
	.panel .atmos + .text-wrapper .text.ceil,
	.panel .image + .text-wrapper .text.ceil {
		top: 0%;
	}

	.enhanced .text.bottom,
	.panel .atmos + .text-wrapper .text.bottom,
	.panel .image + .text-wrapper .text.bottom {
		bottom: 10%;
		top: auto;
	}

	.enhanced.mask .text-wrapper,
	.panel.mask .atmos + .text-wrapper,
	.panel.mask .image + .text-wrapper {
		background-image: url(../img/text-bg-mask.png);
		background-repeat: repeat-x;
		background-size: cover;
	}

/* 
	.enhanced.mask .text-wrapper.mask-timeline {
		background-image: url(../img/timeline-mask.png);
	}

	.enhanced.mask .text-wrapper.mask-inhabited {
		background-image: url(../img/inhabited-mask.png);
	}

	.enhanced.mask .text-wrapper.mask-merapas {
		background-image: url(../img/merapas-mask.png);
	}

	.enhanced.mask .text-wrapper.mask-nojunk {
		background-image: url(../img/nojunk-mask.png);
	}

	.enhanced.mask .text-wrapper.mask-jungle {
		background-image: url(../img/jungle-mask.png);
	}
 */

	.enhanced.mask .text-wrapper {
		position: fixed !important;
	}
	
	dt span, dd span {
		display: none;
	}

	.doco ul li {
		float: left;
		margin: 10px 17px;
	}
	
	.enhanced .doco li.second-last {
		margin-left: 139px;
	}

	.enhanced .doco li.last {
		margin-right: 139px;
	}	

	.replaced {
		position: absolute;
		margin: 0 auto;
		width: 100%;
		z-index: 999;
	}
	
	.touch .ref-45 .replaced,
	.touch .ref-70 .replaced {
		position: relative;
	}

	.replaced.top {
		top: 5%;
	}

	.replaced.middle {
		top: 50%;
	}

	/* captions */
	.panel > .replaced.top {
		top: 15%;
	}

	.replaced.right {
		right: 5%;
	}

	.replaced.bottom {
		bottom: 15%;
	}

	.text-wrapper .replaced.bottom {
		bottom: 5%;
	}

	.replaced.left {
		left: 15%;
	}

	.text-wrapper .replaced.left {
		left: 5%;
	}

	.replaced.floor {
		bottom: 0%;
	}

	#repl-title-section-1 {
		max-width: 709px;
		left: 50%;
		margin-left: -354px;
		margin-top: -13px;
	}
	
	#repl-diary-timelapse {
		left: 50%;
		margin-left: -354px;
		bottom: 5%;
	}

	#repl-mustika-loading-text {
		left: 50%;
		margin-left: -283px;
	}

	#repl-diary-inhabited {
		left: 50%;
		margin-left: -321px;
		bottom: 5%;
	}

	#repl-diary-merapas {
		left: 50%;
		margin-left: -385px;
		bottom: 5%;
	}

	#repl-diary-nojunk {
		left: 50%;
		margin-left: -377px;
		bottom: 5%;
	}
	
	.touch #repl-diary-nojunk {
		bottom: 15%;
	}

	#repl-diary-jungle {
		left: 50%;
		margin-left: -263px;
		bottom: 5%;
	}
	
	#repl-rain-dance {
		left: 50%;
		margin-left: -273px;
		top: 55%;
	}
	
	#repl-diary-joss-text {
		left: 50%;
		margin-left: -354px;
		top: 37%;
	}
	
	#repl-letter {
		max-width: 696px;
		left: 50%;
		margin-left: -348px;
	}
}	

/* styles that apply over 768px */
@media (min-width: 769px) {

	.touch video {
		height: 83%;
	}
}