61exhibitCSS-defaultColours.css

/* v6.1 ExhibitCSS  -  this is the default Exhibits CSS which uses the same colour swatches as regular sites*/

/*Standard page layout CONTAINERS
***************************************/

body {
	font-family: Lucida Grande, Geneva, Verdana, Arial, sans-serif;
	color: [[colour_03]];
	text-align: left;
	width:100%;
	background-color:[[colour_02]];
	margin:0;
	padding:0;
	border:0;
}

dl {
	margin:0;
	padding:0;
}
dt {
	font-weight: bold;
	margin:0;
	padding:0;
}

a:link, a:visited {
	border-style: none;
	text-decoration: none;
	color: [[colour_09]];
}
a:hover {
	color: [[colour_09]];
	text-decoration: underline;
}

p { 
  	text-indent:12px;
  	margin-top:0;
  	margin-bottom:0;
  	color: [[colour_03]];
}
.small {
	font-size: .75em;
}
a img {
	text-decoration: none;
	border-width: 0;
}
img {
	border: 0;
	padding: 0;
	margin: 0;
}
ul {
	list-style-position: inside;
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
table, tbody, tr, td { 
	margin: 0; 
}
.bodyContent {
	margin:0 auto;
} 

.tableBodyContent {
	width: 100%;
}

#content {
	width: 100%;
	margin: 0 auto 10px;
	}

.content.copyright.clearfix  {
	clear: both;
	display: block;
}

.content.copyright.clearfix img {
	padding: 0;
	top: 20px;
}

.content.copyright.clearfix p {
	text-align: center;
	vertical-align: top;
}

.full {
	width:90%;
	margin: 0 auto;
}

.left {
	position:relative;
	float: right;	
	width: 400px;
	right:20px;
}

.right {
	position:relative;
	float: left;
	min-width:400px;
	max-width:1200px;
	left:20px;
}

#containerFlex, #mainTable {
    padding: 0 5px 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
}

#container {
	min-height:400px;
	margin:10px;
	padding:10px;
}

#floatContainer #containerFlex {
	padding:0;
}

#container.content.clearfix {
	width:100%;
	display:block;
	position:relative;
	height:auto;
	padding:0;
	border:0;
	margin:0 auto;
	background-color: [[colour_01]];
}

#container.content.clearfix .rightFull {
	width: 100%;
	height: auto;
	display: block;
}

.leftFlex, #metadataPanel {
	order: 1;
-webkit-flex: 1 0 520px;
-ms-flex: 1 0 520px;
	flex: 1 0 520px;
	align-self: auto;
}

#resultsPanel {
	order: 1;
    -ms-flex: 1 0 550px;
-webkit-flex: 1 0 550px;
	flex: 1 0 550px;
	align-self: auto;
	margin-right:5px;
}

.rightFlex, #navigationPanel, #facetsPanel {
	order: 2;
	align-self: auto;
-webkit-flex: 0 0 400px;
-ms-flex: 0 0 400px;
	flex: 0 0 400px;
}

#navigationPanelNarrow {
	order: 2;
	align-self: auto;
	-webkit-flex:0 0 250px;
	-ms-flex:0 0 250px;
	flex:0 0 250px;
}

.pageTitle, .contentTitle, .clearfix h1, .RecordTitle {
	font-size: 1.4em;
	margin-left: 15px;
	margin-bottom:10px;
	display: block;
	font-weight:bold;
	color: [[colour_04]];
}

/* Navbar breadcrumb menu for most pages  
*************************************** */ 

.NavBar {
	display:block;
	padding: 5px 0;
	color: [[colour_16]];
	height: auto;
	min-height:25px;
	font-size:0.8em;
	width:98%;
	margin:10px auto 30px;
	overflow:auto;
	}

#NavBarTop {
	border-bottom: 1px solid [[colour_16]]; 
}

#NavBarBottom {
	border-top: 1px solid [[colour_16]]; 
	margin-top:30px;
	margin-bottom:10px;
}
	
.NavBar1 {
	display: inline-block;
	text-align: left;
	padding:5px 0;
}   

.NavBar .nbl {
	display:inline-block;
	margin-left:20px;
}

.NavBar .PrevNext {
	display:inline-block;
	margin-left:90px;
}

.NavBar2 {
	display: inline-block;
	text-align: right;
	padding-bottom: 5px;
	float:right;
	padding-right: 10px;
}

.NavBar a {
	margin: 0; 
	text-decoration: none;
}
#Print {
	display: inline-block;
	margin-left:20px;
	vertical-align:middle;
}
	
.NavBar form {
	display: inline-block;
	margin-left:10px;
	margin-bottom:0;
	}

.NavBar #socialButtons {
	margin:0!important;
	margin-left:10px!important;
}

.NavBar2 label {
/*	color: [[colour_01]]; */
}

.NavBar form input[type='text']{
	border:1px solid [[colour_06]];
	margin: 0 2px; 
	padding: 4px;
	border-radius:5px;
	}

.NavBarButtonSubmit {
	background-color: [[colour_06]];
	color: [[colour_07]];
	margin: 0 2px; 
	padding: 5px;
	border-radius:5px;
	border:0;
	}

.NavBar #favouritesbuttons input:hover, .NavBarButtonSubmit:hover {
	background-color: [[colour_08]];
	cursor:pointer;
}

#favouritesbuttons {
	display: inline;
	margin-left:20px;
}

#user_login, #user_logoff, #user_collections, #user_collect {
	display: inline-block;
	background-color: [[colour_06]];
	color: [[colour_07]];
	margin: 0; 
	padding: 5px;
	border-radius:5px;
	border:0;
}
#user_collect_label {
	display: inline-block;
}

#socialButtons {
	text-align:center;
	vertical-align:top;
}

.resp-sharing-button {
	height:17px;
}

/* highlight system responses for users submitting Comments including Comment and Detail pages and also highlighting search errors on the SearchHints page 
*/
.alert{
  	color: [[colour_13]];
  	font-weight: bold;
}

/* SITENAV (exhibit navigation panel)
******************************************* */

.SiteNav { 
	background-color: [[colour_04]];
	border-left: 1px solid [[colour_04]];
	border-right: 1px solid [[colour_04]];
	border-bottom: 1px solid [[colour_04]];
	border-radius:5px;
	vertical-align: top;
	max-width: 250px;
	margin:0 auto 20px;
	font-size: .85em;
}
	
.SiteNav a {
	background-color: [[colour_01]];
	color: [[colour_04]];
	border-top: 1px solid [[colour_04]];
  	display: block;
	padding: 5px;
	margin: 0;
}

.SiteNav a:last-of-type {
	border-radius: 0 0 5px 5px;
}

.SiteNav a:hover {
	background-color: [[colour_10]];
	text-decoration:none;
}	

.SiteNav a img {
	margin: 0;
	border: 0;
}

.SiteNav a .iconThumbnailImg {
	border: 0;
	display: inline;
}

.SiteNav .h4 {
	color: [[colour_07]];
	text-align: center;
	margin: 0;
	padding:5px;
	border-radius: 5px 5px 0 0;
}

.SiteNav .h4 a {
	color: [[colour_07]];
	background-color: [[colour_04]];
	text-align: center;
}

.SearchList{
	margin-top:0;
}

.SearchList ul li{
	list-style-type: none;
	list-style-position: inside; 
	margin: 2px 2px 10px;
	vertical-align:middle;
	clear:both;
	height:100%;
}
.SearchList img {
	display:inline-block;
	float:left;
	vertical-align:middle;
	margin:0;
	padding-right:5px;
	max-width: 75px;
}
.SearchList a {
	display:inline-block;
	width:100%;
	height:100%;
}
.SearchList a:hover {
	text-decoration:none;
	background-color: [[colour_10]];
}

/* EXHIBITS (specific layout for exhibit parts)
*********************************** */

.Exhibit {
	margin-bottom:20px;
	max-width:100%;
}

.Exhibit #socialButtons {
	padding-left:50px;
}

.Exhibits p {
	padding-top:0;
	-webkit-margin-before:0;
	-webkit-margin-after:0;
	margin:0 15px 10px;
	text-align:left;
}

.Exhibits .quote {
	text-align:center;
	font-style:italic;
	width:90%;
	margin:0 auto 10px;
}

.Exhibits .quote br {
	margin-bottom:10px;
}

.Exhibits .citation {
	text-align:right;
	width:90%;
	margin:0 auto 15px;
}

.Exhibits p a, .Exhibits ul li a {
color: [[colour_15]];
text-decoration:underline;
}

.Exhibits p a:hover, .Exhibits ul li a:hover {
text-decoration:none;
}

.Exhibits ul li {
	text-align:left;
	margin-bottom:10px;
}

.Exhibits #exhibitTitle {
	text-align:center;
	font-size: 1.5em;
	background-color: [[colour_04]];
	color: [[colour_02]];
	width:100%;
	margin:0;
	padding:0;
}

.Exhibits .NavBar {
    display: block;
    background-color: [[colour_04]];
    margin: 0 auto 6px;
    color: [[colour_01]];
    height: auto;
    text-align: center;
    padding: 5px 0;
    width: 100%;
}

.Exhibits .NavBar a {
	color:  [[colour_02]];
	padding-left: 5px;
}

.Exhibits #NavBarBottom {
	display:block;
	border-radius: 10px;
	margin-top:50px;
}

.Exhibits #NavBarTop {
	border-radius: 0 0 5px 5px;
}

.ExhibitPanel .pageTitle {
	font-size:1.2em;
	padding: 15px;
	overflow:hidden;
	max-width:100%;
}

.pageContent {
	padding-right: 30px;
	text-align: justify;
}

.panelContent {
	width:100%;
	display:-webkit-flex;
	display: -ms-flexbox;
	display:flex;
 -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
	flex-flow:row nowrap;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
	align-items:flex-start;
	align-content:flex-start;
}

.panelContent .SiteNav {
	order: 1;
	-webkit-flex: 0 0 295px;
	-ms-flex: 0 0 295px;
	flex: 0 0 295px;
	align-self: auto;
	margin: 0 15px 15px 15px;
	background-color: [[colour_03]];
	border-bottom: 1px solid [[colour_03]];
	border-left: 1px solid [[colour_03]];
	border-right: 1px solid [[colour_03]];
	border-radius: 5px;
	color: [[colour_07]];
}

.panelContent .SiteNav .h4 {
	color: [[colour_07]];
	font-weight:bold;
	background-color: [[colour_04]];
}

.panel {
	order: 2;
-webkit-flex: 1 0 500px;
	-ms-flex: 1 0 500px;
	flex: 1 0 500px;
	align-self: auto;
}

div[class="panel 2Column"], div[class="panel 2UpGallery"] .pictureBlockDisplayPackage, div[class="panel 3UpGallery"] .pictureBlockDisplayPackage, div[class="panel 4UpGallery"] .pictureBlockDisplayPackage {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;
	align-items:flex-start;
	align-content:flex-start;
}

.checkerLeft, .checkerRight {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row nowrap;
	align-items:flex-start;
	align-content:flex-start;
}

.panelLeft, .checkerLeft>.picAndCaption, .checkerRight>.pictureTextBlock {
	order:1;
	align-self: auto;
}

.panelRight, .checkerRight>.picAndCaption, .checkerLeft>.pictureTextBlock {
	order:2;
	align-self: auto;
}

.panelLeft, .panelRight, .checkerRight>.pictureTextBlock, .checkerLeft>.pictureTextBlock {
	-webkit-flex: 1 0 300px;
	-ms-flex: 1 0 300px;
	flex: 1 0 300px;
}
.checkerRight>.picAndCaption, .checkerLeft>.picAndCaption, .panelRight.pictureBlockDisplayPackage, .panelLeft.pictureBlockDisplayPackage {
	-webkit-flex: 0 0 450px;
	-ms-flex: 0 0 450px;
	flex: 0 0 450px;
}

.pageContent .panelLeft.pageTitle {
	max-width: 300px;
	border: none;
	text-align: left;
}

.picAndCaption {
	margin:0 auto;
}

div[class="1UpGalleryBlock"] {
	margin:0 auto 20px;
	text-align:center;
}

.exhibitPictureFlow, .picAndCaption, .exhibitPicture {
	vertical-align:top;
	max-width:100%;
	display:inline-block;
	background-color: [[colour_20]];
	border-collapse: collapse;
	height:auto;
	padding:5px;
	border-top: 1px solid [[colour_05]];
	border-bottom: 1px solid [[colour_04]];
	border-left: 1px solid [[colour_05]];
	border-right: 1px solid [[colour_04]];
	border-radius: 5px;
	box-sizing:border-box;
	margin-bottom:10px;
}

.exhibitPictureFlow, .exhibitPicture, .pictureBlock {
	margin-bottom:10px;
	margin-right:10px;
}

.checkerLeft>.picAndCaption {
	margin-bottom:10px;
	margin-right:10px;
}

.checkerRight>.picAndCaption {
	margin-bottom:10px;
	margin-left:10px;
}

div[class="panel 2UpGallery"] .pictureBlockDisplayPackage .exhibitPicture {
	-webkit-flex: 0 1 46%;
	-ms-flex: 0 1 46%;
	flex: 0 1 46%;
	align-items:flex-start;
	align-content:flex-start;
	text-align:center;
}

div[class="panel 3UpGallery"] .pictureBlockDisplayPackage .exhibitPicture {
	-webkit-flex: 0 1 31%;
	-ms-flex: 0 1 31%;
	flex: 0 1 31%;
	align-items:flex-start;
	align-content:flex-start;
	text-align:center;
}

div[class="panel 4UpGallery"] .pictureBlockDisplayPackage .exhibitPicture {
	-webkit-flex: 0 1 22%;
	-ms-flex: 0 1 22%;
	flex: 0 1 22%;
	align-items:flex-start;
	align-content:flex-start;
	text-align:center;
}

.picAndCaption .picture {
	margin:0 auto;
	padding:5px;
}

.picAndCaption .picture img, .exhibitPictureFlow img, .exhibitPicture img, .pictureBlock img {
	box-sizing:border-box;
	max-width:100%;
	object-fit:contain;
	height:auto;
	padding:5px;
	margin:0 auto;
	border:0;
-webkit-border-radius:5px;
   -moz-border-radius:5px;
	border-radius:5px;
}

.Exhibit .caption, .Exhibit .help {
	text-align: center;
	margin-bottom:5px;
}

.Exhibit .pictureText .exhibitText {
	margin-bottom:5px;
	color: [[colour_03]];
}

.Exhibit .caption {
	margin:0 auto;
	padding: 5px;
	background-color: [[colour_20]];
	font-weight:normal;
}

.Exhibit .caption a {
	color: [[colour_04]];
	font-style:italic;
	font-weight:normal;
	padding-left:5px;
} 

.Exhibit .help, .Exhibit .textBlock {
	width:95%;
	margin-bottom:10px;
}

.Exhibit .pictureText, .textBlock, .Exhibit .help {
	background-color:inherit;
	min-height:0;
	text-align: left;
}

.Exhibit .pictureText p {
	/* font-style: italic;*/
	text-indent: 0;
}

.pictureText1, .pictureText2 {
	display:inline-block;
	padding:0 10px 10px;
	margin:0;
	max-width: 45%;
	vertical-align: top;
}
/* ADDITIONAL BITS
********************************************** */
.accessibility {
	display: none;
}
hr {
	height: .1em;
	clear: both;
	color: [[colour_07]];
	visibility: hidden;
}

/* FOOTERS
***********************************/
/* Agency footer - appears at the bottom of every public page*/

.OfflineFooter {
	margin-top:20px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.1em;	
}

.Footer {
	width:98%;
	margin:5px auto;
	text-align: center;
	font-size: .8em;
	color: [[colour_21]];
}
.Footer a:link, .Footer a:visited, .Footer a:hover {
	color: [[colour_18]];
}
/* VITA Footer - appears at the bottom of every public page*/	
.VTFooter {
	width:98%;
	margin:5px 10px;
	text-align: right;
	color: [[colour_17]];
	font: normal .75em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	}

.VTFooter a:link, .VTFooter a:visited, .VTFooter a:hover {
	color: [[colour_18]];
}

.odwFooterRight p{
	float: right;
	text-align: right;
	vertical-align: baseline;
	padding-top: 5px;
	padding-bottom: 25px;
}
	
/* Clearfix 
(clears all floats, so that page can resume below)
************************************************** */

.clearfix {
	display: block;
	clear: both;
	float: none;
}
* html .clearfix {
	height: 1%;
	clear: both;
	float: none;
}