/*
Harry Seidler & Associates website
we design all-sorts october 2011

CORE
---------------------------------------------------------------------------------

HOZ-SCROLL
---------------------------------------------------------------------------------

VERT-SCROLL-IMAGE-RICH
---------------------------------------------------------------------------------

VERT-SCROLL-TEXT-RICH
---------------------------------------------------------------------------------

HOME
---------------------------------------------------------------------------------
*/




/*
CORE
---------------------------------------------------------------------------------*/


html {
	height: 100%;
}

body {
	height: 100%;
	font-family:/*  "HelveticaNeue", "Helvetica Neue", */ Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

h1,h2,h3 {
	font-weight: 300;
}
.js body {
	/* visibility: hidden; */
}

#projectText > div,
#listContinue/*  .nextListTitle */,
#header,
#articleEnd {
	background-color: white;
}
	
body.dark-bg,
.dark-bg #projectText > div,
.dark-bg #listContinue /* .nextListTitle */,
.dark-bg #header,
.dark-bg #articleEnd {
	color: white;
	background-color: #302f2e;
	background-color: rgba(50,50,50,1);
}
#principles.dark-bg #header {
	background-color: rgba(50,50,50,.8);
}

/*
.dark-bg a:hover,
.dark-bg .hozscroll li:hover,
.dark-bg #showinfo ,
.dark-bg .descriptionToggle,
.dark-bg .caption,
.dark-bg .projectoverview p,
.dark-bg .projectbodytext strong {
	color: silver;
}
*/
.arrow{
	position: absolute;
	width: 30px;
	height: 30px;
	background-image: url(../img/scroll-sprites.png);
	background-repeat: no-repeat;
}

.left{
	background-position: 0 0;
}

.right{
	background-position: -30px -30px;
}

.dark-bg .right,
#scrollListButton .right{
	background-position: -30px 0;
}
/*

#listContinue .right{
	background-position: -30px -30px;
}
.dark-bg #listContinue .right{
	background-position: -30px 0px;
}
*/

/*
#projectText .right {
	background-position: -30px -30px;
	margin-left: -10px;
	
}

.dark-bg #projectText .right {
	background-position: -30px 0;
	
}

*/



.up{
	background-position: 0 -60px;
}

.down{
	background-position: -30px -90px;
}

.dark-bg .down{
	background-position: 0 -90px;
}








/*


.right.small{
	width: 30px !important;
	height: 60px !important;
	clip:rect(15px 40px 30px 15px);
	margin-top: -34px;
	margin-left: -20px;
	background-position-x: 100px;
}

.dark-bg .right.small{
	width: 30px !important;
	height: 60px !important;
	clip:rect(0 40px 15px 15px);
	margin-top: -19px;
	margin-left: -20px;
}

*/







/*
body#projectList,
body#principles {
	overflow-x: visible;
	overflow-y: hidden;
}
body#projectDetail {
	overflow-y: visible;
	overflow-x: hidden;

}
*/
@media screen and (max-height: 800px) {
	body {
		font-size: 12px;
	}
}
/*
@media screen and (max-width: 1200px) {
	body {
		font-size: 12px;
	}
}
*/

a, a:active, a:visited {
	color: black;
	text-decoration: none;
	-webkit-transition: color .5s ease-in;
	-moz-transition: color .5s ease-in;
	-o-transition: color .5s ease-in;
	transition: color .5s ease-in;
}

.dark-bg a,
.dark-bg a:active,
.dark-bg a:visited {
	color: white;
	-webkit-transition: color .5s ease-in;
	-moz-transition: color .5s ease-in;
	-o-transition: color .5s ease-in;
	transition: color .5s ease-in;
}

a:hover,
.dark-bg a:hover {
	color: gray;
}

	.bodytext p a,
	.bodytext li a {
		border-bottom: 1px dotted gray;
		margin-bottom: -1px;
	}

.selected  {
	font-size: 150%;
}



.row1of1 {
	height: 100%;
}
.row1of2 {
	height: 50%;
}
.row1of2min {
	min-height: 50%;
}

.row1of3 {
	height: 33.333%;
}
.row1of3min {
	min-height: 33.333%;
}
.row2of3 {
	height: 66.666%;
	overflow-y: hidden;
}
.row2of3min {
	min-height: 66.666%;
}

.row1of7 {
	height: 14.286%;
}
.row1of7min {
	min-height: 14.286%;
}
.row6of7 {
	height: 85.714%;
}

.row1of9 {
	height: 11.111%;
}
.row2of9 {
	height: 22.222%;
}
.row7of9 {
	height: 77.777%;
}

.row8of9 {
	height: 88.888%;
}


.loadableimage {
/* 	outline: 1px solid #f2f2f2; */
background-color: rgba(0,0,0,.2);
}

.dark-bg .loadableimage {
/* 	outline: 1px solid rgba(60,60,60,1); */

}


#header,
.hozscroll li:first-child .overviewinfo {
	padding-left: 40px;
}

#header {
	position: fixed;
	width: 100%;
	z-index: 1;
}
#projectList #header,
#principles #header {
	background-color: transparent;
}

#default #header,
#projectDetail #header,
#recognition #header,
#office #header {
	border-bottom: 1px dotted rgba(120,120,120,.2);
/*
	background: -moz-linear-gradient(top,  rgba(50,50,50,1) 0%, rgba(50,50,50,1) 80%, rgba(50,50,50,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,1)), color-stop(80%,rgba(50,50,50,1)), color-stop(100%,rgba(50,50,50,0)));
	background: -webkit-linear-gradient(top,  rgba(50,50,50,1) 0%,rgba(50,50,50,1) 80%,rgba(50,50,50,0) 100%);
	background: -o-linear-gradient(top,  rgba(50,50,50,1) 0%,rgba(50,50,50,1) 80%,rgba(50,50,50,0) 100%);
	background: -ms-linear-gradient(top,  rgba(50,50,50,1) 0%,rgba(50,50,50,1) 80%,rgba(50,50,50,0) 100%);
	background: linear-gradient(top,  rgba(50,50,50,1) 0%,rgba(50,50,50,1) 80%,rgba(50,50,50,0) 100%);
*/
/* 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00302f2e, endColorstr=#99302f2e); */
}


	.wrapper4Firefox {
		display: table;
		height: 100%;
	
	}
		#header .wrapper {
			display: table-cell;
			vertical-align: middle;
		}
				#header li {
					display: inline-table;
					margin-right: 1em;
				}
			
	.submenu {
		position: absolute;
		bottom: 0;
		left: 40px;
	}		

			
/*
HOZ-SCROLL
---------------------------------------------------------------------------------*/
			

.hozscroll  {
	position: absolute;
	top:22.222%;
	bottom: 0;
	width: 10000em;
}

.hozscroll > ul {
	list-style: none;
	height: 100%;
}

	.hozscroll li {
		float: left;
		height: 100%;
		margin-left: 5px;
		min-width: 240px;
	}
	
	#projectListDiv.hozscroll li:first-child {
		margin-left: 0;
	}

		.overviewinfo {
			visibility: hidden;
			display: table;
		}

		.hozscroll li:hover .overviewinfo {
			visibility: visible;
		}
		.overviewinfo .wrapper{
			display: table-cell;
			vertical-align: bottom;
			height: 100%;
		}

	
		.overviewinfo h3{
			line-height: 2;
		}

	
	
		.media a {
			display: block;
			height: 100%;
		}

			.media img {
				width: auto;
				height: 97%;
			}
			.media a img:hover {
				opacity: .9;
			}

		.media span  {
			display: none;
			volume: silent;
		}

#scrollListButton,
#scrollListBackButton {
	cursor: pointer;
	position: fixed;
	top: 33.33%;
	right: 0;
	bottom: 0;
	text-align: right;
	z-index: 1;
}


#scrollListBackButton {
	width: 40px;
/*
	background: -moz-linear-gradient(left,  rgba(50,50,50,1) 0%, rgba(50,50,50,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(50,50,50,0)));
	background: -webkit-linear-gradient(left,  rgba(50,50,50,1) 0%,rgba(50,50,50,0) 100%);
	background: -o-linear-gradient(left,  rgba(50,50,50,1) 0%,rgba(50,50,50,0) 100%);
	background: -ms-linear-gradient(left,  rgba(50,50,50,1) 0%,rgba(50,50,50,0) 100%);
	background: linear-gradient(left,  rgba(50,50,50,1) 0%,rgba(50,50,50,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99302f2e, endColorstr=#00302f2e,GradientType=1);
*/

}
#scrollListButton {
	width: 100px;
/*
	background: -moz-linear-gradient(left,  rgba(50,50,50,0) 0%, rgba(50,50,50,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(50,50,50,0)), color-stop(100%,rgba(50,50,50,1)));
	background: -webkit-linear-gradient(left,  rgba(50,50,50,0) 0%,rgba(50,50,50,1) 100%);
	background: -o-linear-gradient(left,  rgba(50,50,50,0) 0%,rgba(50,50,50,1) 100%);
	background: -ms-linear-gradient(left,  rgba(50,50,50,0) 0%,rgba(50,50,50,1) 100%);
	background: linear-gradient(left,  rgba(50,50,50,0) 0%,rgba(50,50,50,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00302f2e, endColorstr=#99302f2e,GradientType=1);
*/

}

#scrollListBackButton {
	right: auto;
	left: 0;
	text-align: left;
	display: none;
}

#scrollListButton div{
	top: 10px;
	right: 0;

}
#scrollListBackButton div{
	top: 10px;
	right: auto;
	left: 0;

}

#scrollListButton:hover:after {
	content:"scroll forward";
	color: white;
	position: absolute;
	right: 25px;
	top: 9px;
	text-align: right;
	line-height: 1;
}

#scrollListBackButton:hover:after {
	content:"start again";
	color: white;
	position: absolute;
	right: auto;
	left: 25px;
	top: 9px;
	text-align: left;
	line-height: 1;
}


.active {

}

#listContinue {
	position: relative;
	z-index: 2;
	width: 500px;
}
#listContinue h3 {
	margin-left: 40px;
	margin-top: 1.1em;
}
	#nextListButton {
		position: relative;
		display: block;
	}


		#nextListButton span.arrow{
			top: 0;
			right: 0;			
		}
		
		#nextListButton span.nextListTitle{
			display: block;
			line-height: 30px;
			margin-top: -8px;
		}
		
/*
HOZ-SCROLL PRINCIPLES
---------------------------------------------------------------------------------*/
#principleListDiv {
	top: 33.333%;
	width: 3610px;

}
	


	#principleListDiv .p-panel {
		width: 440px;
		min-width: 180px;
		margin-right: 40px;
		position: relative;
	}
			
	#principleListDiv .p-panel.first {
		width: 240px;
		padding-left: 40px;
	}
		.p-panel .wrapper{
			position: absolute;
			bottom: 1em;
		}
		.p-panel.first .wrapper{
			position: static;
		}
			
			.p-panel .articleTitle {
			}
			
			.p-panel.first .articleTitle {
				margin: 0 0 1em 0;
			}
			
			.p-panel.first p {
				color: gray;
			}
		
			.p-panel p {
				margin-bottom: 1em;
			}
			
			.p-panel p strong{
				font-weight: normal;
				font-style: italic;
				color: silver;
			}
			
			.p-panel .media a {
				display: inline-table;
			}
					
	#principleListDiv .special {
		width: 320px;
	}
		.p-panel.special .media img {
			width: 320px;
			height: auto;
		}
		
		
		.p-panel .media .caption {
			color: gray;
			font-size: 90%;
			line-height: 1.2;
			display: block;
			volume: medium;
			min-height: 40px;
		}
	#principleListDiv .curvy {
		margin-top: 4.6em;
/* 		width: 380px; */
	}
		.p-panel .media img {
			width: auto;
			height: 110px ;
			margin-top: 4em;
		}

#principleListDiv  #listContinue {
	width: 500px;
	padding-left: 0;
	margin-right: 0;
	position: absolute;
	right: 0;
	top: 0;
}

#principleListDiv  #listContinue .wrapper {
	bottom: 33%;
}
#principleListDiv  #listContinue .wrapper img {
	max-width: 400px;
	height: auto;
}

#principles #scrollListButton,
#principles #scrollListBackButton {
	margin-top: 20px;
}

@media screen and (max-height: 900px) {

	#principleListDiv {
		width: 3720px;
		height: 480px;
	
	}
	
		#principleListDiv .p-panel {
			width: 480px;
		}
		
	#principleListDiv .p-panel.first {
		width: 180px;
	}

		#principleListDiv .special {
			width: 240px;
		}

			.p-panel.special .media img {
				width: 240px;
			}
			.p-panel .media img {
				margin-top: 1em;
			}
		#principleListDiv .curvy {
			margin-top: 2em;
		}
		#principles #scrollListButton,
		#principles #scrollListBackButton {
			margin-top: -40px;
		}
}


/*
VERT-SCROLL-IMAGE-RICH
---------------------------------------------------------------------------------*/


#projectDetail .articleTitle {

	position: absolute;
	left: 40px;
	bottom: 0;
}

#projectDetail .videoOrAudio .articleTitle {

	position: static;
}

#showinfo {
	color: gray;
	font-size: 60%;
	margin-left: 2em;
}

.descriptionToggle {
	font-size: 66%;
	color: gray;
	font-style: italic;
	padding-left: 40px;
}





#projectImages {
	height: 100%;
	position: relative;
	top:33.33%; /* align top of image with 33.3% mark */
	list-style: none;
	margin-right: 40px;

}
	
	#projectImages li {
		margin-left: 40px;
		float: left;
	}
	
		#projectImages li a {
			display: block;
		}
		
			#projectImages li a img {
				width: auto;
				height: 100%;
			}
		






	.active {

	}
		
		
		.caption {
			color: gray;
		
		}
			.caption p {
				font-size: 90%;
				display: inline;
			}
			
			.js .caption p {
				visibility: hidden;
			}
			
			 li:hover .caption p {
				visibility: visible;
			
			}
		

#scrollDetailButton {
	cursor: pointer;
	position: fixed;
	bottom: 30px;
	right: 60px;
}

#scrollDetailButton:hover:after {
	content:"scroll down";
	position: absolute;
	left: -5px;
	text-align: center;
	top: -30px;
	line-height: 1;
}

#scrollDetailBackButton {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	right: 120px;
	display: none;
}

#scrollDetailBackButton:hover:after {
	content:"start again";
	position: absolute;
	left: -5px;
	text-align: center;
	top: 25px;
	line-height: 1;
}


.scrollEndDatumTop {
    position: relative;
    z-index: 0;
    top: 22.22%;
/*     top: 33.333%; */
    clear: both;
    margin-left: 40px;
}
	#projectText > div {
		position: relative;
		display: table;
		line-height: 1.5;
		font-size: 90%;
	}
	
		hr.spacer {
			width: 100%;
			border: 0;
			margin: 0;
			clear: both;
		}
	
		#projectText > div > div {
			display: table-cell;
			vertical-align: middle;
		}
			.projectoverview  {
				width: 20%;
			}
		
				.projectoverview p {
					color: gray;
					margin-right: 40px;
					margin-bottom: 1em;
				}
				.projectoverview p a {
					color: gray;
				}
				.projectoverview ul {
					margin: 1em 0;
				}
				.projectoverview li {
					margin-right: 40px;
					margin-bottom: .5em;
					line-height: 1.2;
					color: silver;

					list-style-image: url(../img/award-star.png);
				}
	
				
			
			.projectbodytext {
				width: 75%;
			}
			
			.columnized1,
			.columnized2,
			.columnized3,
			.columnized4 {
				width: 33.333%;
				float: left;
				position: relative;
			}
			
			.columnized1 p,
			.columnized2 p,
			.columnized3 p,
			.columnized4 p,
			.anecdote p  {
				margin-right: 40px;
			}
			
			
			
				.projectbodytext strong {
					font-weight: normal;
					color: gray;
					margin-bottom: -.5em;
				}
				
				.projectbodytext p {
					margin-bottom: .5em;
				}
			
		.copyright-credits {
			position: absolute;
			bottom: 40px;
			left: 0;
		}
		
		.bodytext .copyright-credits a{
			border-bottom: none;
			margin-bottom: 0;
		}
		
		/* modified april 2013 */
		.copyright-credits a.all-sorts{
			margin-top: 1em;
			display: block;
			font-size: .8em;
			color: gray;
		}
		
		.copyright-credits a.all-sorts:hover{
			color: white;
		}
		
		.copyright-credits a.all-sorts img{
			vertical-align: middle;
			margin: 0 .5em;
		}
		
		
		/* end modified april 2013 */
		.anecdote {
			clear: both;
			float: right;
			width: 33.333%;
			font-family: Georgia, serif;
			font-style: italic;
			padding-top: 40px;
			color: gray;
			position: relative;
		}
		
		.dark-bg .anecdote {
			color: silver;
		}


/*
VERT-SCROLL-TEXT-RICH
---------------------------------------------------------------------------------*/



#articleList,
#articleDetail,
#searchResults  {
	height: 100%;
	position: relative;
	top:33.33%; /* align top of image with 33.3% mark */
	list-style: none;
}

#default #articleList {
	height: auto;
}
#default.dark-bg #articleList {
	height: 100%;
}

#default #scrollDetailButton {
	display: none;
}
	

#default.dark-bg #scrollDetailButton {
	display: block;
}
	
	#articleList > li{
		width: 440px;
		margin: 8.5% 0 0 40px;
		float: left;
		font-size: 90%;
	}
	
	#articleList > li.span-2{
		width:  960px;
	}
		li.span-2 .bodyDiv li,
		li.span-2 .bodyDiv p {
			width: 440px;
			float: left;
			display: inline-table;
			margin-right: 40px;
		}
 

			
			#articleList .media img {
				width: auto;
				height: auto;
				max-width: 440px;
			}
			
			.acknowledgements #articleList .media {
			}
			
			.acknowledgements #articleList .media img {
			margin-top: 2em;
				max-width: 220px;
			}
			

		#acknowledgements .articleTitle,
		#copyright .articleTitle,
		.Copyright .copyright-credits a:first-child {
			display: none;
		}
		
		
			.bodyDiv ul {
				list-style: disc;
	/* 			list-style-image: url(../img/magGlass.png) */
			}
			
				.bodyDiv li,
				.bodyDiv p {
					margin-bottom: 1em;
					max-width: 40em;
				}
				
					.excerptDiv {
						color: gray;
						padding: 2.25em 0;
					}
						.excerptDiv a {
							color: gray;
							border-bottom: 1px dotted gray;
						}
					
					.bodyDiv em {
						color: gray;
					}
					.bodyDiv em a {
						color: gray;
					}
					.bodyDiv a {
						border-bottom: 1px dotted gray;
					}
					
					.bodyDiv blockquote {
						font-style: italic;
						color: gray;
						line-height: 1.3;
						margin-bottom: 2em;
					}
					.bodyDiv blockquote a {
						color: gray;
					}
					
					
					.dark-bg .bodyDiv blockquote, 
					.dark-bg .bodyDiv blockquote a {
						color: #b3b3b3;
					}
					
					
#articleEnd.scrollEndDatumTop {
	top: 33.333%;
	z-index: 2;
}










#projectDetail .paging {
	vertical-align: bottom;
	padding-bottom: 70px;
}

	#projectDetail .paging a {
		display: block;
		position: relative;
		margin-left: -40px;
	}
	
		#projectDetail .paging a span.arrow{
			display: block;
		}
	

#articleEnd .paging {
	position: absolute;
	bottom: 80px;
	right: 20px;
}
	
	#articleEnd .paging span{
		margin-left: -10px;
	}
	


#projectDetail #header .paging {
	position: absolute;
	bottom: 11.111%;
	right: 20px;
	width: 5%;
	padding-bottom: 30px;
	text-align: right;
}

#projectDetail #header .paging a {
	display: block;
	max-width: 100%;
	font-size: 0;
}
#projectDetail #header .paging a:hover {
	font-size: inherit;
}

#projectDetail #header .paging a .arrow {
	right: -20px;
}






#articleDetail {
}
	#articleDetail > div {
		width: 25%;
		margin: 8% 0 0 40px;
		float: left;
	}
	
	
	#articleDetail .bodyDiv {
		width: 50%;
	}
	
		#articleDetail .bodyDiv p {
			font-size: 110%;
			line-height: 1.75;
			max-width: 50em;
		}
	
		#articleDetail .bodyDiv img {
			float: left;
			margin-right: 40px;
			margin-top: 1em;
			margin-bottom: 1em;
			max-width: 100%;
		}


.switch-me {
	position: relative;
}

.switch-me img {
	position: absolute;
	width: 450px;
	height: 162px;
	clip: rect(0, 450px, 81px, 0);
}

.dark-bg .switch-me img {
	clip: rect(81px, 450px, 162px, 0);
	margin-top: -81px;
}





/*
HOME
---------------------------------------------------------------------------------*/
/*
body#default #header h1 {
	height: auto;
	bottom: .3em;
	margin-right: .75em;
}

.ie body#default #header h1 {
	bottom: 0;
}

@media screen and (max-height: 800px) {
	body#default #header h1 {
		bottom: .4em;
	}
}

*/

#thumbList {
	position: relative;
	top:33.33%; /* align top of image with 33.3% mark */
	text-align: justify;
	height: 340px;
	overflow: hidden;
}

@media screen and (max-height: 1000px) {
#thumbList {
	height: 272px;
}
	
}


.thumbnail img:hover {
	opacity: .8;
}

.posted {
	color: gray;
	font-size: 90%;
}

#default img.news-image {
	float: left;
	margin-right: 1em;
}

#searchButton {
	margin-left: 40px;
	font-size: 80%;
}

#searchResults  {
	margin-left: 40px;
}

#searchResults  {
	margin-left: 40px;
	width: 640px;
}

#searchResults  .selected{
	margin-top: 2em;
}

.search-message,
.found-in,
.found-in a  {
	font-style: italic;
	color: gray !important;
}
.found-in {
	font-size: 90%;
}

h2.articleTitle {
	margin-bottom: .5em;
}

#default h2.articleTitle,
.films-recordings h2.articleTitle {
	min-height: 2em;
/* 	margin-bottom: .5em; */
}








/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	#scrollListButton div,
	#scrollListBackButton div,
	#scrollDetailButton div {
		display: none;
	}
/*
	#scrollListButton:hover:after {
		content:"";
	}
	
	#scrollListBackButton:hover:after {
		content:"";
	}
*/

}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	#projectImages,
	#articleList,
	#articleDetail,
	#searchResults,
	#projectText  {
		height: 644px;
		position: relative;
		top:215px;
	}

	#projectImages  li{
		height: 322px;
	}
	
	#thumbList {
		top:215px;
		height: 272px;
	}
		
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	#projectImages,
	#articleList,
	#articleDetail,
	#searchResults,
	#projectText  {
		height: 1185px;
		position: relative;
		top:395px;
	}

	#projectImages  li{
		height: 590px;
	}
	
	#thumbList {
		top:395px;
		height: 272px;
	}
}









#pageflip {
	position: absolute;
	right: 40px;
	top: 0;
}


#pageflip img {
	width: 50px; 
	height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	margin-bottom: -12px;
	box-shadow: -4px 4px 8px rgba(0,0,0,.2);
}
.dark-bg #pageflip img {
	box-shadow: -4px 4px 8px rgba(0,0,0,.5);
}
	.msg_block {
		color: white !important;
		background-color: rgba(50,50,50,1);
		width: 50px;
		 height: 50px;
		position: absolute;
		z-index: 50;
		right: 0;
		top: 0;
		overflow: hidden;
/*
		background: -moz-linear-gradient(45deg,  rgba(204,204,204,1) 47%, rgba(255,255,255,1) 55%);
		background: -webkit-gradient(linear, left bottom, right top, color-stop(47%,rgba(204,204,204,1)), color-stop(55%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: -o-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: -ms-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=1 );
*/
	}
	.dark-bg .msg_block {
		color: black !important;
		background-color: white;
		background: rgb(255,255,255);
		background: -moz-linear-gradient(45deg,  rgba(204,204,204,1) 47%, rgba(255,255,255,1) 55%);
		background: -webkit-gradient(linear, left bottom, right top, color-stop(47%,rgba(204,204,204,1)), color-stop(55%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: -o-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: -ms-linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		background: linear-gradient(45deg,  rgba(204,204,204,1) 47%,rgba(255,255,255,1) 55%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=1 );
	}
	
	.msg_block .wrapper {
		text-align: right;
		display: block;
		padding: 22px 22px 0 0;
		width: 100px;
		float: right;
	}
	.msg_block .wrapper .selected{
		margin-top: .25em;
		display: block;
	}














/*
MEDIA
---------------------------------------------------------------------------------*/

/*
.video-js{
	background-color:#fff;
}

.vjs-default-skin .vjs-big-play-button {
	z-index: inherit;
}
*/
.films-recordings header {
	z-index: 10000;
}

li.videoOrAudio{
		width: 440px;
		margin: 8.5% 0 0 40px;
		float: left;
		font-size: 90%;
	}

/*
.lte8 .video-js {
	display: none;
}


.lte8 .video-fallback {
	position: relative;
}
*/

.player {
	position: relative;
}
.video-start {
	position: absolute;
	left: 30px;
	bottom: 30px;
	width: auto !important;
	height: auto !important;
}

.player:hover .video-start {
	opacity: .8;
}	
#projectImages li.videoOrAudio{
		margin-top: 0;
	}
	
.videoOrAudio .excerptDiv  {
	padding: 1em 0;
}


.videoOrAudio .excerptDiv p {
	display: inline;
}


.videoOrAudio .bodyDiv a {
	display: inline !important;
}

.videoOrAudio .bodyDiv {
	padding-top: .5em;
	max-height: 20.5em;
	overflow: auto;
}
/* Overwrite the default to keep the scrollbar always visible */

.videoOrAudio .bodyDiv::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.videoOrAudio .bodyDiv::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.videoOrAudio table {
	font-size: 90%;
	color: gray;
}

.videoOrAudio th {
	text-align: left;
}