/* =========================================================================
WHITWORTH ART GALLERY STYLES ---- UoM OVERRIDES
===========================================================================
--------------------------------------
AUTHOR: Mike Stopford, 
	    mike.stopford@readingroom.com,
	    Manchester;
S DATE: 23-07-2014;
E DATE: Current;
--------------------------------------

CONTENTS:
===========================================================================

1. Border Box Styling
2. Logo
3. Image Hover State Alterations
4. Image Captions
5. Masthead Styles
6. New pages 06-08-14




========================================================================= */

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?-7h2liq');
	src:url('../fonts/icomoon.eot?#iefix-7h2liq') format('embedded-opentype'),
		url('../fonts/icomoon.woff?-7h2liq') format('woff'),
		url('../fonts/icomoon.ttf?-7h2liq') format('truetype'),
		url('../fonts/icomoon.svg?-7h2liq#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size:1.5em;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.collectionDisplay .socialIcons 		{ width:100%; float:left;padding:0 10px 10px 0; border-bottom:1px solid #ccc; margin-bottom:10px;}
.socialIcons a 			{ text-decoration:none;margin-left:10px;color:#000000!important; }
.socialIcons a:hover 		{ color:#669963!important; }

.icon-googleplus:before {
	content: "\e600";
}
.icon-facebook:before {
	content: "\e601";
}
.icon-instagram:before {
	content: "\e602";
}
.icon-twitter:before {
	content: "\e603";
}
.icon-youtube:before {
	content: "\e604";
}
.icon-flickr:before {
	content: "\e605";
}
.icon-soundcloud:before {
	content: "\e606";
}
.icon-pinterest:before {
	content: "\e607";
}


/* == 1. Border Box Styling == */
.borderBox, .borderBox:before, .borderBox:after,
.j-caption, .j-caption:before, .j-caption:after,
.static-caption, .static-caption:before, .static-caption:after	{  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.last 								{ margin-right:0px!important; }


/* == 2. Logo == */
.mainLogo 							{ position:relative;top:0px;width:40%;max-width:190px;margin:0 20px 15px 0; overflow:hidden; height:auto;}

.primaryNav													{margin:0;clear:both;}

.search-options										{top:60px;}
.search-icon								{margin:0;}

.primaryNav ul.megaMenu li.menuItem a.megaLink			{padding:22px 14px 37px; font-size: 1em;}


/* == 3. Image Hover State Alteration == */
.slide a:hover span img,
a:hover figure img,
.slide a:focus span img,
a:focus figure img							{opacity:0.8;}



/* == 4. Image Captions == */
.j-caption,
.static-caption 							{ background: rgba(0,0,0,0.4)!important; width:100%; padding:10px; }

.lt-ie9 .j-caption,
.lt-ie9 .static-caption 						{ background: #000000;}

.j-caption 							{ bottom:-150px; padding:10px 20px;  }
.static-caption 							{ bottom:0px;}

.j-caption p, .j-caption .largeTitle,
.static-caption p, .static-caption .largeTitle  			{ font-family:'Open Sans', sans-serif; color:#ffffff; }

.j-caption .largeTitle, .static-caption .largeTitle 			{ font-size:1em; font-weight:600;padding:0;}
.j-caption p, .static-caption p 					{ font-size:1em; display:none; }

.lt-ie8 .j-caption,
.lt-ie8 .static-caption 						{ display:block; }

/* == 5. Masthead Styles == */
.masthead-slide,
.masthead-image 						{ overflow:hidden; }
.masthead-slide-content 					{position:absolute; width:100%;max-width:1400px; margin:0 auto; left:0; right:0;}

.masthead-slide-content a.cta					{ color:#ffffff; text-decoration:none; font-size:1.5em; margin:20px 0;}
.masthead-slide-content a.cta:after				{ content:url(../images/design/link-arrow.png); margin-left:5px;margin-top:2px;}

.masthead-slide-content .description 				{ width:750px; padding:1em 0;font-size:1.4em;}

.masthead-slide-content .largeTitle  			   	{ font-size:2em; padding-bottom:0; }
.masthead-slide-content .largeTitle span 			{line-height:1;}

p.description 							{ padding:0px; }


ul.inlineList li 							{ list-style:none; background:none; margin:0; padding:0!important; }

.twelvecol 							{ overflow:hidden; }



.primaryLeftNavNew ul { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.primaryLeftNavNew li { margin: 0; padding: 0; overflow: hidden; }

.primaryLeftNavNew li a { display: block; text-decoration: none; }
.primaryLeftNavNew li a.closeMenuIcon { float: left; border: 0; text-align: center; }
.primaryLeftNavNew li a.showHideIcon { float: left; border: 0; text-align: center; }

.primaryLeftNavNew,
.primaryLeftNavNew ul { border-bottom: none; }
.primaryLeftNavNew ul li a { color: #333; margin: 0; padding: 10px 0; font-size: 0.875em; }
.primaryLeftNavNew ul li a:hover { color: #000000; font-weight:bold; background:#f9f9f9;}
.primaryLeftNavNew ul li a:hover:before { content:'-';padding:0 10px; }
.primaryLeftNavNew ul li a.active { color: #000000; font-weight:600;}

.primaryLeftNavNew ul ul { display: block; margin: 0; padding: 0; overflow: hidden; }

.primaryLeftNavNew ul li.breadcrumbItem { border-bottom: 1px solid #fff;}
.primaryLeftNavNew ul li ul li { padding-left:20px; }
.primaryLeftNavNew ul li.breadcrumbItem,
.primaryLeftNavNew ul li.sectionHeader { }

.primaryLeftNavNew ul li.sectionHeader a { color: #272828; }

.primaryLeftNavNew ul.sectionMenu { background: #fff; }
.primaryLeftNavNew ul.sectionMenu li { border-bottom: 1px solid #c4c4c5; }
.primaryLeftNavNew ul.sectionMenu li span { display: block; }
/*.primaryLeftNavNew ul.sectionMenu li span a { background: #6b2c91; color: #fff; }*/
.primaryLeftNavNew ul.sectionMenu li span a { border-left: 6px solid #6b2c91; padding-left: 30px; border-right: 6px solid #6b2c91; padding-right: 9px; color: #6b2c91; }

.primaryLeftNavNew	 { }


/* == 6. New pages 06-08-14 == */
label#search 						{ display:none;padding-left:0px; }

.mainContentContainer .searchSection{ width:100%;background:#e8e8e8; padding:20px;overflow:hidden;}
.mainContentContainer .searchSection label { font-size:1.2em; }
.mainContentContainer .searchSection label, .mainContentContainer .searchSection a {float:left;padding:5px 20px;color:#000;}
.mainContentContainer .searchSection input[type=text]{ width:100%!important;float:left; }
.mainContentContainer .searchSection input[type=submit] 	{ width:100%;margin-top:5px; }
.mainContentContainer .searchSection a{font-size:1.1em;text-decoration:none;padding:5px 0;}
.mainContentContainer .searchSection a:hover{ text-decoration:underline;}

.ie7 .mainContentContainer .searchSection a 		{width:50%;}

#searchDropdown 					{ overflow:hidden;margin-top:10px; padding-top:0; height:20px; }
#searchDropdown.advanced			{ background:url(../images/design/arrow-down.png) no-repeat right 0px; padding-right:30px; }
#searchDropdown.advanced.active			{ background:url(../images/design/arrow-down.png) no-repeat right -18px; padding-right:30px; }

#advancedOptions					{ overflow:hidden; border:1px solid #e8e8e8; padding:20px; display:none;}
#advancedOptions .last 				{ margin-right:0px!important; }
#advancedOptions section 				{ padding:5px 0; overflow:hidden;}
#advancedOptions .third .item				{ width: 100%;}
#advancedOptions .quarter .item			{ width:100%;}
#advancedOptions .item 				{ float:left;margin-right:20px;margin-bottom:20px; }
#advancedOption label 				{ width:100%;}
#advancedOptions input, #advancedOptions select 	{ clear:both; width:99%; padding:5px; border: 1px solid #ccc;}

.displayPreference,
.backToSearch 						{ border-bottom:1px solid #e8e8e8; padding:20px 0; overflow:hidden;}
.backToSearch p 					{ padding:0px; }
.backToSearch a 					{ float:right; }

.displayPreference p 					{ padding-bottom:0px; }
.displayPreference a 					{ margin-right:10px; display:inline-block; float:left;}
.displayPreference a img 				{ opacity:0.5; }
.displayPreference a img.active 			{ opacity:1; }
.displayPreference a.toggle				{ color:#000000;text-decoration:none;padding-top:2px; }
.displayPreference a.toggle:hover			{ text-decoration:underline; }

.collectionDisplay,
.searchDetails	 					{ overflow:hidden;min-height:400px; background:#e8e8e8; margin-top:10px; padding:20px; }
.collectionDisplay 					{ background:none; }
.collectionDisplay h1, .collectionDisplay p 		{ float:left; clear:left;}
.collectionDisplay h1 					{ font-size:2em; }
.collectionDisplay p 					{ font-size:1.1em; }
.collectionDisplay .socialIcons 				{ float:right;} 

.ie7 .collectionDisplay p 				{ float:left;clear:both;width:50%; }


/* == List / Grid / Image List section == */

.listView				{display:block; float:left; width:40px; height:40px; margin:0 10px 20px 0; background:url(../images/design/list-grid-icons.gif) 0 0 no-repeat; overflow:hidden; text-indent:-200px;
							-webkit-transition: all 500ms;
							-moz-transition: all 500ms;
							-ms-transition: all 500ms;
							transition: all 500ms;}
.listView:hover,
.listView.active		{background-position:0 -40px}

.gridView				{display:block; float:left; width:40px; height:40px; background:url(../images/design/list-grid-icons.gif) -40px 0 no-repeat;  overflow:hidden; text-indent:-200px;
						-webkit-transition: all 500ms;
						-moz-transition: all 500ms;
						-ms-transition: all 500ms;
						transition: all 500ms;}

.gridView:hover,
.gridView.active		{background-position:-40px -40px}


#switchContainer				{width:100%; margin:0 auto; overflow:hidden;clear:both; }

.panel					{float:left; overflow:hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;margin-bottom:20px;}

.list .panel 			{width:100%;}
.list .panel,
.imageList .panel 		{ border-bottom:1px solid #cccccc; padding:0 0 20px 0; width:100%;}
.imageList .panel img			{ float:left;display:block;width:20%;margin-right:20px; }
.imageList .panel figcaption			{ float:left;width:70%;padding:0px;}
.list .panel img			{ display:none!important; }
.list .panel .content	{overflow:hidden; max-height:2000px;
						-webkit-transition: all 1000ms;
						-moz-transition: all 1000ms;
						-ms-transition: all 1000ms;
						transition: all 1000ms;}


.grid .panel 				{width:100%;margin:0 20px 20px 0;position:relative;}
.grid .panel figcaption p 		{ display:none; }
.grid .panel figure 			{ overflow:hidden;width:100%}
.grid .panel img			{display:block; margin:0 auto;}
.grid .panel .content			{overflow:hidden; height:100px;
						-webkit-transition: all 1000ms;
						-moz-transition: all 1000ms;
						-ms-transition: all 1000ms;
						transition: all 1000ms;}

.imageList figcaption,
.list figcaption 							{ position:relative!important; background:none!important; }
.imageList figcaption p,
.list figcaption p 				{ color:#000000;display:block; }
.imageList figcaption h3,
.list figcaption h3 				{ color:#000000!important; }

.right 						{ float:left;margin-top:10px; }
.right input#imagesOnly			{ margin-left:5px; }


/* == Search Details page specific == */

.searchDetails 						{ overflow:hidden; }
.searchDetails header 					{ background:#707070;padding:20px; overflow:hidden; }
.searchDetails header p 				{ color:#ffffff;padding-bottom:0px;font-weight:600; }

span.searchTerm 					{ background:#f2eea6; padding:2px 5px; }

.itemPhoto, 						
.itemInfo,
.itemRelatedLinks,
.itemNarrative						{ margin-top:20px; width:100%; min-height:0px;background:#ffffff; padding:20px;}

.itemPhoto,
.itemRelatedLinks 					{ float:left; }

.itemInfo,
.itemNarrative,
.itemInfo span 	 					{ float:right; }

.itemPhoto img 					{ width:100%; height:auto; }
.itemPhoto .socialIcons 				{ float:right;padding:10px 0; margin-top:10px;}

.itemRelatedLinks 					{ background:#707070; }

.itemRelatedLinks p,
.itemRelatedLinks td a 	 				{ color:#ffffff!important; }

.itemRelatedLinks td a:hover 				{ text-decoration:none; }

.itemRelatedLinks table,
.itemRelatedLinks tr,
.itemRelatedLinks th,
.itemRelatedLinks td 					{ border:none;background:none!important;color:#ffffff;padding:5px 0;margin:0px;}

.itemInfo table,
.itemInfo tr,
.itemInfo th,
.itemInfo td 						{ border:none;background:none!important;color:#000000;padding:5px 0;margin:0px;}

table, tbody 					{ width:100%; display:table;}

th.type 						{ font-weight:600;width:100%; float:left;}
td.result						{ font-weight:300;width:100%; float:right;clear:both;}


/* Search results page listing */

.searchResults .panel 					{ padding:0; border:none;}
.searchResults .panel figure 				{ max-height:200px;overflow:hidden; }
.searchResults .panel img				{ width:100%;}
.searchResults .panel img.landscape			{ width:100%;}
.searchResults .panel figcaption 			{ overflow:hidden; padding:20px;width:100%;}
p.resultInfo 						{ clear:both; font-size:1.6em; padding:0px; color:#000000!important;}
p.name 						{ font-weight:600; }
p.title 							{ font-weight:300; }
p.year 	 						{ font-weight:400; }

button.moreInfo 					{ clear:both; float:left; margin-top: 20px; border:none; background:#000; color:#fff; padding:10px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
button.moreInfo:hover 				{ background:#669963; }

.ie7 figure 						{ float:left; }
.ie7 figcaption 						{ float:left; }
.ie7 p.resultInfo 					{ float:left;width:40%; }


/* Quick links */
.slideDown						{ display:none;}
a.activateSlide 						{ background:url(../images/design/arrow-down.png) no-repeat right 2px; padding-right:30px; }
a.activateSlide.active 					{ background:url(../images/design/arrow-down.png) no-repeat right -16px; }


/* Show more loading content */
a.showMoreListing					{ padding:20px; width:100%; background:#707070; margin-top:20px; float:left; clear:both; color:#ffffff!important;text-align:center;text-decoration:none;}
a.showMoreListing:hover 				{ background:#669963;}

.no-more-items 					{ float:left;clear:both;padding:10px; background:#ffffff; width:100%; }
.no-more-items p 					{ text-align:center; width:100%; padding:0px; }


/* Event Details page */

.eventDetailPage .titlebox 				{ border-bottom:1px solid #e7e7e7; overflow:hidden; padding:20px 0; }
.eventDetailPage .titlebox img.photo			{ width:100%; height:auto; }
.eventDetailPage .description 				{ border-bottom:1px solid #e7e7e7; clear:both; padding:20px 0; overflow:hidden; display:block; }
.eventDetailPage .description p 			{  }
.eventDetailPage .description.price			{ background:#669963; padding:20px;}
.eventDetailPage .description.price p			{ color:#fff; text-align:center; padding:0px; font-size:1.4em;}
.eventDetailPage h1 					{ font-size:1.8em; margin-top:10px; }
.eventDetailPage .leftSide 				{ float:left; width:100%; }
.eventDetailPage table 					{ float:left; width:100%; clear:both; margin:0px; position:relative; display:table;}
.eventDetailPage table th 				{ width:30%; }
.eventDetailPage table tr,
.eventDetailPage table th,
.eventDetailPage table td 				{ background:none; color:#000000; border:none; }
.eventDetailPage .bookingCost 			{ padding:15px; width:100%; position:relative; float:left; text-align:center; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; margin:5px 0; font-size:1.23em; font-weight:600;}

/* == Media Queries ==*/

@media only screen and (min-width: 600px)
		{
			.mainLogo 				{ top:0px; margin-bottom:15px; }
			.grid .panel 				{width:47%;margin:0 20px 20px 0;position:relative;}
			.grid .panel:nth-child(2n+2) 		{ margin-right:0px; }
			.mainContentContainer .searchSection a {text-decoration:none;padding-left:0px!important;float:left;clear:both;}

			.right 						{ float:right;margin-top:0px; }

		}

@media only screen and (min-width: 800px)
		{
			
			.primaryNav ul.megaMenu li.menuItem a.megaLink			{padding:22px 14px 37px; font-size: 1.1em;}
			.primaryNav								{clear:both;}

			.mainContentContainer .searchSection label { display:block; }
			.mainContentContainer .searchSection input[type=text]{ width:68%!important;float:left; }
			.mainContentContainer .searchSection input[type=submit] 	{ width:12%;margin-top:0; padding:8px;margin-left:20px;}
			.mainContentContainer .searchSection a{text-decoration:none;padding:10px 70px 0;float:left;clear:both;}

			.eventDetailPage .titlebox 				{ border-bottom:1px solid #e7e7e7; overflow:hidden; padding:20px 0; }
			.eventDetailPage .description 				{ border-bottom:1px solid #e7e7e7; clear:both; padding:20px 0; overflow:hidden; }
			.eventDetailPage .description p 			{  }
			.eventDetailPage .description.price			{ background:#669963; padding:20px;}
			.eventDetailPage .description.price p			{ color:#fff; text-align:center; padding:0px; font-size:1.4em;}
			.eventDetailPage > h1 					{ font-size:1.8em; }
			.eventDetailPage .leftSide 				{ float:left; width:100%; }
			.eventDetailPage .imageConstraint 			{ height:320px; overflow:hidden; }
			.eventDetailPage table 					{ float:left; width:100%; }
			.eventDetailPage .bookingCost 			{  }


		}

@media only screen and (min-width: 900px)
		{
			.lt-ie8 .mainLogo						{ width:200px; }
			.j-caption p, .static-caption p 					{ display:block; }
			.j-caption .largeTitle, .static-caption .largeTitle 			{ font-size:1.4em; font-weight:600;padding:0 0 5px 0;}
			.search-options							{top:80px;}

			.masthead-slide-content .largeTitle  			   	{ font-size:2em; padding-bottom:0; }


			/* NAV - PRIMARY */
			.primaryNav				{clear:both;margin:0 0 0 0;}
			.primaryNav ul.megaMenu li.menuItem.homeItem			{padding-right: 0;}
			.primaryNav ul.megaMenu li.menuItem a.home				{width:50px; height: 58px;padding-top:0;}
			.primaryNav ul.megaMenu li.menuItem a.megaLink			{padding:22px 8px 37px; font-size: 1.3em;}

			.search-icon								{margin-top:12px;}
			
			.megaSubPanel									{width:16%}
			.megaSubPanel:nth-child(3n)						{border-right:1px solid #E4E4E4;}
			.megaSubPanel:last-child						{border-right:0}

			.no-js .no-touch .primaryNav ul.megaMenu li.menuItem:hover .megaContent,
			.no-touch .primaryNav ul.megaMenu li.menuItem.hover .megaContent,
			.touch .primaryNav ul.megaMenu li.menuItem.active .megaContent { top: 80px; }

			fieldset												{ padding: 40px 30px; border: 1px solid #ccc; }
			legend											{ padding: 0 5px; margin: 0; font-size: 1.538462em; color: #343536; }

			.discover 							{ padding:40px 0; }

			.twocol,
			.threecol,
			.fourcol, 
			.fourcolRigid,
			.fivecol,
			.sixcol,
			.eightcol									{margin-bottom:0px;}

			.itemPhoto, 						
			.itemInfo,
			.itemRelatedLinks,
			.itemNarrative						{ width:49%;font-size:0.9em!important;overflow:hidden;}

			.landscape 						{ width:100%;min-height:0px; }



			th.type 						{ font-weight:600;width:30%; float:left;}
			td.result						{ font-weight:300;width:70%; float:right;clear:none;}

			.itemInfo th.type 					{ width:75%; }
			.itemInfo td.result 					{ width:25%; }

			.lt-ie9 th.type 						{ width:100px;}
			.lt-ie9 td.result						{ width:200px;}


			/* == Search section on Explore page ==*/
			label#search 						{ display:block; }
			#advancedOptions					{ overflow:hidden; border:1px solid #e8e8e8; padding:20px; display:none;}
			#advancedOptions .last 				{ margin-right:0px!important; }
			#advancedOptions section 				{ padding:5px 0; overflow:hidden;}
			#advancedOptions .third .item				{ width: 30%;}
			#advancedOptions .quarter .item			{ width:22%;}
			#advancedOptions .item 				{ float:left;margin-right:20px; }
			#advancedOption label 				{ width:100%;}
			#advancedOptions input, #advancedOptions select 	{ clear:both; width:90%; padding:5px; border: 1px solid #ccc;}

			/* Search results page listing */

			.searchResults .panel 					{ padding:30px 0; border:none; border-bottom:1px solid #e7e7e7; margin:0px;}
			.searchResults .panel figure 				{ max-height:600px;overflow:hidden; width:50%; float:left;margin-right:20px;}
			.searchResults .panel img				{ width:60%;margin-right:20px;}
			.searchResults .panel img.landscape			{ width:90%!important;}
			.searchResults .panel figcaption 			{ overflow:hidden;padding:0px;width:40%;}
			p.resultInfo 						{ clear:both; font-size:1.6em; padding:0px;}

			.collectionDisplay .socialIcons 				{ width:45%;float:right;padding:0; border-bottom:none; margin-bottom:0;}
		}


		@media only screen and (min-width: 1100px)
		{
			
			.primaryNav ul.megaMenu li.menuItem a.megaLink			{padding:22px 14px 37px; font-size: 1em;}
			/*.primaryNav ul.megaMenu li.menuItem a.home				{padding-top:12px;}*/

			.grid .panel 						{width:22.8%!important;}
			.grid .panel:nth-child(2n+2) 				{ margin-right:20px; }
			.grid .panel:nth-child(4n+4) 				{ margin-right:0px; }
			.grid .panel figure 					{ overflow:hidden;width:188px!important;height:236px!important; }

			.collectionDisplay .socialIcons 		{ width:35%;}
		}

		@media only screen and (min-width: 1200px)
		{			

			/* NAV - PRIMARY */
			.primaryNav				{clear:none;margin:0 0 0 190px;}
			/*.primaryNav ul.megaMenu li.menuItem a.home				{width:70px}*/
			.primaryNav ul.megaMenu li.menuItem a.megaLink			{padding:32px 20px 37px; font-size: 1.1em;}

			.search-icon img										{padding-top:3px}
			.search-icon span									{font-size:1.846154em; }
			
			/* Search Bar */
			.searchInputWrapper								{margin:0; width:80%; float:left;}
			.searchFilterWrapper 								{ float:left; clear:both; margin-top:5px; }

			
			/* Aside */
			.leftOfAside								{float:left; width:63%}
			aside.content								{width:30%;}
			.asideRight								{float:right}

			
			/* Image Panel Content */
			.imagePanel-content .largeTitle				{line-height:1.3;}
			
			
			/* Course Finder */
			.courseFinder-inner h3						{padding:0 0 1em}
			.courseFinder-inner a						{padding:3em 0 0}
			
			.visibleUntilLargeDesktop					{display:none}

			
			/* Grid Page */
			/*.gridBlock .playButton						{left:46%;}*/
		}
		
		
		@media only screen and (min-width: 1300px)
		{
			ul.megaMenu li.menuItem:first-child			{margin-top:6px;}

			.masthead-pagination						{position:absolute; bottom:20px; left:50%; width:1160px; margin:0 0 0 -580px;}
			.masthead-pagination td a					{font-size:1.125em;}
			
		}