html, body {
	height: 100%;
}

article {
	height: 100% !important;
	min-height: 673px;
	overflow: hidden;
}

#code {
	height: auto;
	overflow: visible;

	padding-top: 75px; /* Start after top of project/demo headers */

}

body {
	position: relative;
	margin: 0;
	padding: 0;

	font-family: 'Helvetica Neue', Helvetica, Helmet, Freesans, sans-serif;
}

.page-wrapper {
	width: 100%;
	height: 100%;
	
	min-height: 600px;
	min-width: 1024px;
}

/* Generic typography */
a, a:hover {
	color: #000;
	text-decoration: underline;
}

/* External link */
a[href^="http"] {
	padding-left: 20px;
	background: url(/img/presenter/external-link.png) no-repeat 4px 50%;
}

/* Denotes an accessibility outline */
.area > h2 {
	position: absolute;
	left: -99999px;
}

/* Demo header and navigation */
.demo-header {
	border-top: 1px solid #4D4D4D;
}

.demo-header h1 {
	display: inline-block;

	margin: 0 16px 0 0;
	line-height: 48px;

	color: #FFF;

	font-size: 32px;
}

.demo-header .sub-nav {
	display: inline-block;
	text-align: right;
}

.demo-header .sub-nav:before {
	content: '\\';

	padding-right: 12px;

	font-size: 32px;
	color: #999;
}

.demo-header .sub-nav a {
	display: inline-block;

	padding-right: 8px;

	font-size: 36px;
	font-weight: normal;
	color: #999;
	text-decoration: none;

  -webkit-transition: color 0.1s ease-in-out;
     -moz-transition: color 0.1s ease-in-out;
       -o-transition: color 0.1s ease-in-out;
          transition: color 0.1s ease-in-out;
}

.demo-header .sub-nav a:hover {
	color: #007DB3;
}

[data-section='info'] .sub-nav [href='#info'],
[data-section='demo'] .sub-nav [href='#demo'],
[data-section='code'] .sub-nav [href='#code'] {
	color: #FFF;
}

[data-section='info'] .sub-nav [href='#info']:hover,
[data-section='demo'] .sub-nav [href='#demo']:hover,
[data-section='code'] .sub-nav [href='#code']:hover {
	color: #FFF;
}

.demo-header .bbc-sharetools {
	position: absolute;
	top: 50%;
	right: 0;

	margin-top: -11px;
}

.demo-header .bbc-sharetools a {
	font-size: 12px !important; /* Override sharetools CSS */
}

.bbc-st-panel {
	font-size: 10px !important; /* Override sharetools CSS */
}

#info    [href='#info'],
#machine [href='#machine'],
#code    [href='#code'] {
	color: #007DB3;
}

/* Project context panel */
.frame {
	position: relative;
	text-align: center;
}

.frame .content {
	position: absolute;
	top: 50%;
	left: 50%;

	margin: -238px 0 0 -504px; /* --> Visually centered in middle of nav bars */

	height: 505px;
	/* width: 1008px; */
	width: 100%;

	text-align: left;

  -webkit-transition: all 0.3s ease-in;
     -moz-transition: all 0.3s ease-in;
       -o-transition: all 0.3s ease-in;
          transition: all 0.3s ease-in;
}

#landing .frame .content {
    margin: -240px 0 0 -504px; /* Visually centered when bottom nav bar missing */
}

.frame .content .image-block {
	position: relative;

	/*
	width: 1008px;
	height: 505px;
	*/
	max-width: 1008px;
	max-height: 505px;

	width: 100%;
	height: 100%;

	/* this applies to the index page */
	background-image: url('/img/archive/rw_home_1424x712.jpg');

	background-repeat: no-repeat;
	background-size: contain;
}

.frame.fixed .content .image-block {
	background-repeat: no-repeat;
	background-position: 50% 54%;
	background-attachment: fixed;
}

.frame .content .text {
	position: absolute;
	top: 96px;
	left: 50%;

	width: 464px;

	margin-left: -232px;
	padding:16px;

	background-color: #FFF;

	font-size: 16px;
	font-weight: normal;
	line-height: 20px;

	color: #666;
}

#intro .content .text p {
	margin: 0;
}

#intro .content .text .project {
	font-size: 32px;
	font-weight: normal;
	line-height: 36px;

	margin-top: 0;
	margin-bottom: 20px;
}

#intro .content .text .project span {
	font-weight: bold;
}

/* Demo context info panel */

#info .content h1 .sub {
	font-size: 36px;
	font-weight: normal;
	color: #CCC;
}

#info .content .text {
	left: 0;
	width: 368px;
	margin: 0;

	padding: 0 16px 0 0;
}

/* Parallax strip of image that separates areas */
.separator {
	width: 100%;
	height: 252px;

	background-repeat: no-repeat;
	background-position: 50% 50%;

	box-shadow: inset 0px 6px 10px 0px rgba(0, 0, 0, 0.5);

    background-image: url(/img/archive/parallax/rw_strip_default_1920x384.jpg);
}

/* Vertically center the machine */
#demo {
	position: relative;
	background-color: #CCC;
}

#demo #machine {
	position: absolute;
	top: 50%;
	left: 50%;
}

/* Fixed page header */

.wrapper {
	position: fixed;
	width: 100%;

	text-align: center;

	background-color: #000;
	background-color: rgba(0,0,0,0.85);
}

.inner {
	position: relative;
	width: 1024px;

	margin: 0 auto;

	text-align: left;
}

.project-header,
.demo-header,
.nav {
	z-index: 50;
}

.project-header {
	top: 0;
}

.demo-header {
	top: 25px;
}

/* Presenation mode that hides headers unless hovered */
.presentation .scale-control,
.presentation .project-header,
.presentation .demo-header,
.presentation .nav,
.presentation .prev-next {
	opacity: 0;

  -webkit-transition: opacity 0.1s ease-in-out;
     -moz-transition: opacity 0.1s ease-in-out;
       -o-transition: opacity 0.1s ease-in-out;
          transition: opacity 0.1s ease-in-out;
}

.presentation .scale-control:hover,
.presentation .project-header:hover,
.presentation .demo-header:hover,
.presentation .nav:hover,
.presentation .prev-next:hover {
	opacity: 1;
}

.nav {
	bottom: 0;
}

.nav .inner {
	text-align: center;
}

header {
	line-height: 24px;
}

header .project,
header .dept,
header a,
header a:hover {
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	color: #CCC;
	margin: 0;
	padding: 0;
}

header .dept {
	position: absolute;
	right: 0;
	font-weight: normal;
	text-align: right;
	color: #999;
}

header .dept a {
	color: #999;
	padding: 0;
	background: none;
}

header a,
header a:hover {
	font-weight: normal;
}

/* Fixed page navigation */
nav {
	height: 49px;
	line-height: 49px;

	text-align: center;
}

nav .hint {
	position: absolute;
	top: -64px;
	left: 50%;

	height: 32px;
	width: 56px;

	margin-left: -28px;

	background: transparent url('/img/presenter/arrow-down.png') no-repeat;

	cursor: pointer;

  -webkit-transition: opacity 0.3s ease-in;
     -moz-transition: opacity 0.3s ease-in;
       -o-transition: opacity 0.3s ease-in;
          transition: opacity 0.3s ease-in;

	opacity: 0;
}

nav .hint span {
	position: absolute;
	left: -99999px;
}

nav .hint.is-visible {
	opacity: 1;
}

/* Up / Down buttons */
.prev-next .button {
	display: block;
	width: 80px;
	height: 32px;
	line-height: 32px;

	color: #FFF;
	background-color: #000;
	background-color: rgba(0,0,0,0.85);

	text-align: right;
	text-decoration: none;

	z-index: 100;

  -webkit-transition: color, background 0.1s ease-in;
     -moz-transition: color, background 0.1s ease-in;
       -o-transition: color, background 0.1s ease-in;
          transition: color, background 0.1s ease-in;
}

.prev-next .button:hover {
	color: #FFF;
	background-color: #007DB3;
	text-decoration: none;
}


.prev-next .button.prev {
	position: fixed;
	top: 75px;
	right: 0;
}

.prev-next .button.next {
	position: fixed;
	bottom: 50px;
	right: 0;
}

.prev-next .button .label {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.prev-next .button .icon {
	display: inline-block;
	background-repeat: no-repeat;

	width: 32px;
	height: 100%;
	vertical-align: middle;
}

.prev-next .button.prev .icon {
	background-image: url(/img/presenter/icon_arrow-up.png);
}

.prev-next .button.next .icon {
	background-image: url(/img/presenter/icon_arrow-down.png);
}

/* */
#index .hint {
	display: none;
}

/* About / Back to Top buttons */
nav .button {
	position: absolute;
	top: 0;

	display: inline-block;
	width: 48px;
	height: 48px;

  -webkit-transition: color, background 0.1s ease-in;
     -moz-transition: color, background 0.1s ease-in;
       -o-transition: color, background 0.1s ease-in;
          transition: color, background 0.1s ease-in;
}

nav .button a {
	display: block;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
}

nav .button a span {
	position: absolute;
	left: -999999px;
}

/* Back to top button */
/*
nav .top {
	left: 0;
	border-right: 1px solid #4D4D4D;
}

nav .top a {
	background-image: url(/img/presenter/rw_button_home_off.png);
}

nav .top a:hover {
	background-image: url(/img/presenter/rw_button_home_on.png);
}
*/
/* About button */
/*
nav .about {
	right: 0;
	border-left: 1px solid #4D4D4D;
}

nav .about a {
	background-image: url(/img/presenter/rw_button_about_off.png);
}

nav .about a:hover {
	background-image: url(/img/presenter/rw_button_about_on.png);
}
*/
/* Fullscreen button */
nav .fullscreen {
	border-left: 1px solid #4D4D4D;
}

/* Global nav */

nav .machine-nav {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
}

.has-fullscreen nav .machine-nav ul {
	right: 48px;
}

.has-fullscreen nav .fullscreen {
	right: 0;
	background: url(../img/fullscreen.png) no-repeat 50%;
}

.has-fullscreen nav ul li {
	width: 218px;
}

nav ul {
	width: 1155px; /* (230 + 1) * 5 */
	margin: 0 auto;
	padding: 0;
}

nav ul li {
	display: block;
	float: left;
	width: 224px;
	height: 49px;
	line-height: 49px;

	border-right: 1px solid #515151;

	list-style: none;

	font-size: 25px;
	font-weight: bold;

	vertical-align: middle;

  -webkit-transition: color, background 0.1s ease-in;
     -moz-transition: color, background 0.1s ease-in;
       -o-transition: color, background 0.1s ease-in;
          transition: color, background 0.1s ease-in;
}

nav ul li:first-child {
	border-left: 1px solid #515151;
}

nav .about {
	float: none;
	position: absolute;
	right: 0;
	width: 112px;
}

nav a {
	display: block;
	width: 100%;
	height: 100%;
}

nav a,
nav a:hover {
	text-decoration: none;
}

nav a {
	color: #9C9C9C;
}

/* Page 'active' state */
#wobbulator 	nav .wobbulator a,
#tapeloops 		nav .tapeloops a,
#ring-modulator nav .ring-modulator a,
#gunfire 		nav .gunfire a,
#about 			nav .about a {
	color: #FFF;
}

nav ul li:hover,
nav .button:hover {
	background-color: #007DB3;
}

nav ul li:hover a {
	color: #FFF;
}

#wobbulator 	nav .wobbulator,
#tapeloops 		nav .tapeloops,
#ring-modulator nav .ring-modulator,
#gunfire 		nav .gunfire,
#about 			nav .about {
	background: url(/img/presenter/rw_nav-indicator.png) no-repeat 50% 0;
}

/* Unsupported browser dialog */

.mask {
	position: relative;
	width: 100%;
	height: 100%;
	background: #666;
	background: rgba(0,0,0,0.7);
}

#demo .image-block {
	background: none;
}

.dialog {
	position: absolute;

	top: 96px;
	left: 50%;

	width: 464px;

	margin-left: -232px;
	padding:16px;

	background-color: #FFF;

	font-size: 16px;
	font-weight: normal;
	line-height: 20px;

	color: #666;
}

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

.dialog ul li {
	line-height: 24px;
}

.dialog h3 {
	font-size: 32px;
	font-weight: normal;
	line-height: 36px;

	margin-top: 0;
	margin-bottom: 20px;
}