/* 
Subjects Explorer
An interface for the Australian Prints + Printmaking collection
Created by Ben Ennis Butler: @beneb, beneb.com 
August 2015
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700);

body {
	font-family: 'Roboto', sans-serif;
	color:#424242;
	font-size: .9em;
	background: #f4f4f4;
	font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}
a, a:visited {
	color:#689F38;
	cursor: pointer;
}
a:hover {
	color:#558B2F;
	transition: all .2s linear;
}
.wrapper {
	width: 100%;
}
header.title {
	height: 56px;
	line-height: 56px;
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
	padding: 0 5px 8px 0;
	z-index: 100;	
}
@media (min-width: 768px) and (max-width: 990px) {
	header.title {
		height: 104px;
	}
	.contentWrapper {
		padding-top: 114px!important;
	}
	.focusedFacet {
		padding-left: 35%;
	}
}
@media (max-width: 768px) {
	header.title {
		height: 156px;
	}
	.contentWrapper {
		padding-top: 166px!important;
	}
}
header h2, header h3, .subjectSummary h2, .subjectSummary h3  {
	margin: 0;
	font-size: 240%;
}
header h2 a, header h2 a:visited {
	color:#424242;
}
header h2 a:hover {
	color:#777;
}
header h3 a, header h3 a:visited {
	color:#777;
}
header h3 a:hover, header h3 a small:hover {
	color:#424242;
}
header .focusedSubject h2, header .focusedFacet h2 {
	text-transform: capitalize;
}
header .focusedSubject h2 small, header .focusedFacet h2 small {
	text-transform: none;
}


header .focusedSubject.ng-enter, 
header .focusedFacet.ng-enter {
	transition:0.2s linear all;
	opacity:0;
}
header .focusedSubject.ng-enter-active,
header .focusedFacet.ng-enter-active {
  opacity:1;
}


header .focusedSubject.ng-leave,
header .focusedFacet.ng-leave {
  transition: 0.2s linear all;
  opacity:1;
}
header .focusedSubject.ng-leave-active,
header .focusedFacet.ng-leave-active {
  opacity:0;
}


.focusedFacet button.close, .clearAll button.close {
	float: none;
}
.contentWrapper {
	padding-top: 65px;
}
.no-padding {
	padding-right: 0;
	padding-left: 0;
}
.subjects {
/*	background-image: url(assets/images/loading-icon.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30%;
	width:20px;
	height: 20px;*/
}
.subjectsLoader {
	background-image: url(assets/images/loading-icon.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30%;
	width:20px;
	height: 20px;
}
	
.subjects ul {
	list-style: none;
}
.subjects .topLevelSubs li {
	border:1px solid #e0e0e0;
	margin: 4px 0px;
	/*padding: 10px;*/
	background: #fff;
}
.topLevelSubs li:first-of-type {
	margin-top: 0;
}
.subjects .subjectItem:hover {
	background: #F1F8E9; /*light green*/
	cursor: pointer;
}

.subjects ul li:hover .subjectItem.related:hover {
	background: #8BC34A!important;
	color:#fff;
}
.subjects .cs {
	margin: 0px 0px 0px 0px;
}
.subjects .cs li {
	margin:0;
	border: none;
	/*border-bottom: 1px solid #ccc;*/
}
.subjectItem {
	padding: 10px;
	overflow: auto;
}
.subjects .cs .subjectItem {
	margin-left: 10px;	
	border-bottom: 1px solid #E0E0E0;
}
.subjects .cs li:last-of-type .subjectItem {
	border-bottom: none;
}

.subjects .ccs .subjectItem {
	margin-left: 30px;
	border-bottom: 1px solid #E0E0E0;
}

.subjects .ccs li:first-of-type .subjectItem {
	border-top: none;
}
.subjects .ccs li:first-of-type .subjectItem.related {
	border-top: 1px solid #fff;
}
.subjects .ccs li:last-of-type .subjectItem {
	border-bottom: 1px solid #E0E0E0;	
}
.subjects .cccs .subjectItem {
	margin-left: 40px;
	border-bottom: 1px solid #E0E0E0;
}
.subjects .cccs li:first-of-type .subjectItem {
	border-top: none;
}
.subLeft {
	float:left;
}
.subRight {
	float: right;
}
/*make border on related items white*/
.subjectItem.related {
	border-color:#fff!important;
}

.cs li:first-of-type .subjectItem.related {
	border-top:1px solid #fff;
}

.subjectItem h3 {
	display: inline;
	font-size: 170%;
	text-transform: capitalize;
	font-weight: 400;
	line-height: 175%;
}
.subjectItem p {
	display: inline;
	font-size: 170%;
	margin-bottom: 0px;
}
.subjectItem h3 .workCount:before {
	content:"\00b7";
	padding-right: 3px;
	margin-left: 3px;
}
.subjectItem h3 .workCount {
	font-weight: 400;
	font-size: 85%;
	color: #616161;

}
/*ul.childSub li:last-of-type .subjectItem {
	border: none;
}*/
.subjectItem .glyphicon {
	line-height: 175%
}
.subjects ul li .subjectItem:hover .glyphicon {
	color: #8BC34A;
}
.subjects ul li .subjectItem.related:hover .glyphicon {
	color: #fff;
}
.subjects ul li .subjectItem.selected:hover .glyphicon {
	color: #DCEDC8;
}

.childSub.ng-enter {
  transition:0.2s linear all;
  opacity:0;
}
.childSub.ng-enter-active {
  opacity:1;
}
.childSub.ng-leave {
  transition: 0.2s linear all;
  opacity:1;
}
.childSub.ng-leave-active {
  opacity:0;
}


.selectedParent {
	background: #9c0;
}
.selected, .selected.related {
	background:#8BC34A!important;
	color:#fff;
}
.selected.ng-enter {
  transition: 0.5s linear all;
  opacity:0;

}
.selected.ng-enter.ng-enter-active {
	opacity:1;
}

.related {
	background:#DCEDC8!important;
}
.noLeft {
	padding-left: 0;
}


.subjectSummary {
	margin: 0 0 20px 0;
	background: #EEEEEE;
	padding: 10px;
	border:1px solid #E0E0E0;
}


.tab-content {
	margin-top: 10px;
}
.nav-tabs {
	font-size: 155%;
	margin-top: 3px;
	border-bottom-color: #bdbdbd; 
}
.nav>li {
	margin-right: 15px;
}
.nav>li>a {
	padding: 0px 0px 5px 0;
	border-bottom-width: 2px;
	border-left: none;
    border-top: none;
    border-right: none;
	/*border:none;*/
}
.nav-tabs.nav-justified>li {
	border-bottom: 1px solid #bdbdbd;
}
.nav-tabs.nav-justified>li>a {
	border-color: transparent;
	border-width: 2px;
	padding-top: 0;
	padding-bottom: 10px;
}
.nav-tabs.nav-justified>.active>a, 
.nav-tabs.nav-justified>.active>a:focus, 
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover {
	border-bottom-color:#558B2F;
	border-width: 2px;
	border-left: none;
	border-top:none;
	border-right: none;
	color: #558B2F;
	background-color: transparent;
}
.nav>li>a:focus, .nav>li>a:hover {
	background-color: transparent;
	border-bottom-color:#558B2F;
	border-width: 2px;
}


.subjectSummary .facet {
	font-size: 135%;
	text-transform: capitalize;
}
.subjectSummary .facet li {
	display: inline-block;
}
.subjectSummary .facetItem {
	background: #E0E0E0;
	border:1px solid #bdbdbd;
	padding: 5px 8px;
	margin:0 3px 3px 0;
}
.subjectSummary .facetItem span {
	color: #616161;
	font-weight: 400;
    font-size: 85%;
}

.subjectSummary .facet li:hover {
	cursor: pointer;
	background-color:#8BC34A;
	color: #fff;
	transition: all .2s linear;
}
.subjectSummary .facet .active {
	background:#8BC34A;
	color: #fff;
	font-weight: 400;
}
.decadeHisto {
	min-height: 180px;
}
@media (max-width: 900px) { 
	.decadeHisto {
		padding-left: 0px;
	}
}

.decadeHisto h3 {
	margin-top: 0;
}
.decadeHisto .histoHeader {
	border-bottom: 1px solid #bdbdbd;
	padding-bottom: 5px;
	margin-bottom: 11px;
}


#workHisto {
	position: relative;
	list-style: none;
}
#workHisto .histoColumn  {
	position: absolute;
	bottom: 0;
}
#workHisto li p {
	position: absolute;
	bottom: -25px;
	left: -2px;
	text-align: center;
}
#workHisto .histoColumn {
	background-color: #bdbdbd;
}
#workHisto .histoColumn .colInner {
	width: 100%;
	height: 100%;
	cursor: pointer;	
}

#workHisto .histoColumn:hover {
	background-color: #8BC34A;
}
#workHisto .histoColumn .focused {
	background-color: #8BC34A;
}
h3.histoHover {
	margin-top: 3%; 
}
.histoHover .ng-enter {
	transition:0.2s linear all;
	opacity:0;
}
.histoHover .ng-enter-active {
	opacity: 1;
}
.histoHover .ng-leave {
  transition: .1s linear all;
  opacity:1;
}
.histoHover .ng-leave-active {
  opacity:0;
}


.subjectSummary .clearAll {
	font-size: 170%;
	color: #558B2F!important;
	cursor: pointer;
}
.subjectSummary .clearAll:hover {
	text-decoration: underline;
	transition:1s linear all;
}
.subjectSummary .clearAll .ng-enter {
	transition:0.2s linear all;
	opacity:0;
}
.subjectSummary .clearAll .ng-enter-active {
	opacity: 1;
}
.subjectSummary .clearAll.ng-leave {
  transition: 0.2s linear all;
  opacity:1;
}
.subjectSummary .clearAll.ng-leave-active {
  opacity:0;
}

/*WORKS DISPLAY*/
.works {
	margin-bottom: 20px;
}

.works .thumbnail {
	background: #fff;
	padding: 10px;
	border-color: #E0E0E0;
	border-radius: 0!important;
	min-height: 327px;
/*	min-height: auto;
*/	background-image: url(assets/images/loading-icon.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30%;
	margin-bottom: 0!important;
}
@media (max-width: 768px) { 
	.works .thumbnail {
		margin-bottom: 10px!important;
	}
}
@media ( max-width: 1300px ) and (min-width: 900px) { 
	.works .thumbnail {
		min-height: 227px;
	}
	.works .thumbnailInner {
		height:205px!important;
	}
}
@media ( max-width: 900px ) and (min-width: 768px) { 
	.works .thumbnail {
		min-height: 162px;
	}
	.works .thumbnailInner {
		height:140px!important;
	}
	.works .thumbnailInner.noImg {
		font-size: 65%;
	}

}

.works .thumbnailInner {
	height: 305px;
	background-repeat: no-repeat!important;
	background-position: center center!important;
	background-size: contain!important;
}

.works .thumbnailInner.noImg  {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	width: 600px;
	background: #fff;
}
.works .thumbnailInner.noImg h2 {
	font-size: 200%;
	line-height: 1.2;
}
.works .thumbnailInner.noImg p {
	font-size: 140%;
	margin: 0;
	padding: 0;

}
.works .thumbnailInner.noImg h3{
    color: #a8a8a8;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 8px 0 0;
    text-transform: uppercase;
}


.thumbnailInner.ng-animate {
	transition: .4s linear opacity;
}
.thumbnailInner.ng-enter {
  	opacity:0;
}
.thumbnailInner.ng-enter-stagger {
	transition-delay:0.2s;
	transition-duration: 0s;

}
.thumbnailInner.ng-enter.ng-enter-active {
  	opacity:1;
}
.works .thumbnail:hover {
	cursor: pointer;
	border-color:#8BC34A;
	transition: .2s linear border-color;
}
.works .thumbnail.selectedWork {
	border-color:#8BC34A;
}

.works .thumbnail.selectedWork:after, .works .thumbnail.selectedWork:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.works .thumbnail.selectedWork:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #8BC34A;
	border-width: 8px;
	margin-left: -8px;
}
.works .thumbnail.selectedWork:before {
	border-color: rgba(153, 204, 0, 0);
	border-top-color: #8BC34A;
	border-width: 9px;
	margin-left: -9px;
}


.bigWorkContainer.ng-enter {
  	transition: 0.3s linear all;
  	opacity:0;
}
.bigWorkContainer.ng-enter-active {
  	opacity:1;
}
.bigWorkContainer.ng-leave {
  	transition: 0.3s linear all;
  	opacity: 1;
}
.bigWorkContainer.ng-leave-active {
  	opacity:0;
}

/*big work display*/
.bigWork {
	clear: both;
	padding-top: 20px;
}
.bigWork table {
	width: 100%;
}
.bigWork table .tableImg {
	width: 65%;
	height: 600px;
	background-repeat: no-repeat!important;
	background-position: center top!important;
	background-size: contain!important;
}
.bigWork table .tableContent {
	
}

.bigWork .col {
	background: #fff;
	margin: 0 0 0px 15px;
	width: 97%;
	padding: 10px;
	border: 1px solid #8BC34A;
}
.bigWork .img {
	float:left;
	margin-right: 20px;
	min-width: 65%;
	min-height: 600px;
	background-repeat: no-repeat!important;
	background-position: center top!important;
	background-size: contain!important;
}
.bigWork .meta {
	margin: 0 10px 0 20px;
}

.meta h2 {
	margin-top: 0;
	font-size: 240%;
	margin-right:20px
}
.meta h3 {
	color: #a8a8a8;
	font-size: 10px;
	letter-spacing: 2px;
	margin: 8px 0 0;
	text-transform: uppercase;
}
.meta h4, .meta li {
	font-size: 170%;
	line-height: 171%;
	text-transform: capitalize;
}
.meta p {
	font-size: 170%;
	line-height: 171%;
	text-transform: capitalize;	
}
.meta li p {
	font-size: 100%;
}
.meta h4 {
	margin: 0;
}
.meta ul {
	float:none;
}
.meta a:visited {
	color:#558B2F;
}
.meta p.artistExt {
	line-height: 120%!important;
	margin-top: 4px
}
.meta a span.glyphicon-new-window  {
	display: none;
	font-size: 80%;
	padding-left: 5px;
}

.meta a:hover span.glyphicon-new-window {
	display: inline-block!important;
	transition: display .2s linear;	
}
.meta .wn {
	font-size: 80%;
	text-transform: none;
}

.worksInfoBox .col {
	background: #EEEEEE;
	width: 100%;
	padding: 10px;
	border:1px solid #E0E0E0;
}
.worksInfoBox.moreWorks p {
	display: inline;
	font-size: 170%;
	line-height: 175%;
}
.worksInfoBox.moreWorks a {
	cursor: pointer;
}
.worksInfoBox .instructions {

}
.worksInfoBox .instructions h2 {
	font-size: 200%;
	margin-top: 15px;
}
.worksInfoBox .instructions .table {
	width: 100%;
	margin-bottom: 0;
}
.worksInfoBox .instructions .table td {
	border: none!important;
	padding: 0px 5px 0px 0px;
}
.worksInfoBox .instructions .table .text {
	padding: 15px 0 0 5px;
}
.worksInfoBox .instructions ul {
	width: 100%;
}
.worksInfoBox .instructions li {
	border: 1px solid #e0e0e0;
    margin: 4px 0px;
	padding: 0px; 
    background: #fff;
}
.worksInfoBox .instructions hr {
	border-color: #bdbdbd;
	margin: 10px 0 15px 0;
}
.worksInfoBox .topSubs {
	font-size: 135%;
	text-transform: capitalize;
}
/*.worksInfoBox .topSubs {
	display: inline-block;
}*/
.worksInfoBox .topSubs .subsItem {
	background: #E0E0E0;
	border:1px solid #bdbdbd;
	padding: 5px 8px;
	margin:0 3px 3px 0;
		display: inline-block;
}
.worksInfoBox .topSubs .subsItem span {
	color: #616161;
	font-weight: 400;
    font-size: 85%;
}

.worksInfoBox .topSubs li:hover {
	cursor: pointer;
	background-color:#DCEDC8;
	transition: all .2s linear;
}

.pullRight {
	float: right;
}

footer {
	margin: 20px 0;
	padding: 20px 0;
	border-top:1px solid #E0E0E0;
	font-size: 150%;
	opacity: 0.5;
}
footer:hover {
	opacity: 1;
	transition: opacity .2s linear;	
}
footer ul {
	margin-bottom: 0px;
}
footer ul li {
	display: inline;
	margin-right: 10px;
}