/*
	Styling CSS for The Batik Guild
	©Duncan Weaver, Three Degrees West 2017

	Signature colours: tint-blue #ebedf3;   pale-blue #acb4d2;   dark-blue #003878;   purple #970D76;
*/

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/lato-regular.eot"); 										/* IE9 Compat Modes */
	src: url("/fonts/lato-regular.eot?#iefix") format("embedded-opentype"), 	/* IE6-IE8 */
		 url("/fonts/lato-regular.woff2") format("woff2"), 						/* Super Modern Browsers */
		 url("/fonts/lato-regular.woff") format("woff"), 						/* Pretty Modern Browsers */
		 url("/fonts/lato-regular.ttf")  format("truetype"), 					/* Safari, Android, iOS */
		 url("/fonts/lato-regular.svg#svgFontName") format("svg"); 				/* Legacy iOS */
}
@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/lato-italic.eot");
	src: url("/fonts/lato-italic.eot?#iefix") format("embedded-opentype"),
		 url("/fonts/lato-italic.woff2") format("woff2"),
		 url("/fonts/lato-italic.woff") format("woff"),
		 url("/fonts/lato-italic.ttf")  format("truetype"),
		 url("/fonts/lato-italic.svg#svgFontName") format("svg");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/lato-black.eot");
	src: url("/fonts/lato-black.eot?#iefix") format("embedded-opentype"),
		 url("/fonts/lato-black.woff2") format("woff2"),
		 url("/fonts/lato-black.woff") format("woff"),
		 url("/fonts/lato-black.ttf")  format("truetype"),
		 url("/fonts/lato-black.svg#svgFontName") format("svg");
}
@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/lato-italic.eot");
	src: url("/fonts/lato-italic.eot?#iefix") format("embedded-opentype"),
		 url("/fonts/lato-italic.woff2") format("woff2"),
		 url("/fonts/lato-italic.woff") format("woff"),
		 url("/fonts/lato-italic.ttf")  format("truetype"),
		 url("/fonts/lato-italic.svg#svgFontName") format("svg");
}
@font-face {
	font-family: "Lato";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/lato-blackitalic.eot");
	src: url("/fonts/lato-blackitalic.eot?#iefix") format("embedded-opentype"),
		 url("/fonts/lato-blackitalic.woff2") format("woff2"),
		 url("/fonts/lato-blackitalic.woff") format("woff"),
		 url("/fonts/lato-blackitalic.ttf")  format("truetype"),
		 url("/fonts/lato-blackitalic.svg#svgFontName") format("svg");
}

body {
	font-family: Lato, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6em;	
	color: #333;
}
p {
	margin: 0 0 10px 0;
}
a {
	color: #0064D2;
	text-decoration: none;
}
strong a, li a {
	color: #003878;
}
a:hover {
	color: #970D76;
	text-decoration: underline;
}
a.newwindow, span.newwindow {
	display: inline;
	padding-right: 20px;
	background-image: url(/images/css/newwindow.png);
	background-repeat: no-repeat;
	background-position: right;
}

h1 {
/*	font-family: "Gill Sans W01", Lato, Arial, Helvetica, sans-serif;
*/	font-size: 1.6em;
	line-height: 1.2em;
	font-weight: bold;
	color: #970D76;
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 1em;
}
h2 {
/*	font-family: "Gill Sans W01", Lato, Arial, Helvetica, sans-serif;
*/	font-size: 1.4em;
	line-height: 1.2em;
	font-weight: bold;
	color: #970D76;
	padding: 0;
	margin: 8px 0 0 0;
}
h2 a {
	color: #970D76;
}
h3 {
/*	font-family: "Gill Sans W01", Lato, Arial, Helvetica, sans-serif;
*/	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: bold;
	color: #970D76;
	margin: 4px 0;
	padding: 0;
}
h3 a {
	color: #970D76;
}
h4 {
/*	font-family: "Gill Sans W01", Lato, Arial, Helvetica, sans-serif;
*/	font-size: 1em;
	line-height: 1.2em;
	font-weight: bold;
	color: #003878;
	margin: 0;
	padding: 0;
}
h4 a {
	color: #970D76;
}
h5 {
	font-size: 1em;
	line-height: 1.2em;
	color: inherit;
	margin: 4px 0;
	padding: 0;
}


li {
	list-style-image: url(/images/css/bullet.png);
}
li.pdf { 
	list-style-image: url(/images/css/pdf-icon.png);
}
hr {
	width: 100%;
	padding: 0;
	margin: 20px 0;
	height: 1px;
	border: none;
	background-color: #acb4d2;
}





.smalltext {
	font-size: 0.8em;
}
p.smalltext {
	line-height: 1.3em;
}
.grey {
	color: #999;
}
.bg-textbox {
	border: 1px solid #aaa;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	padding: 3px 6px !important;
}
.bg-textbox.h {
	margin-left: -10000px;
}
.bg-textbox.price {
	background-image: url(/images/css/pricebg.jpg);
	background-repeat: no-repeat;
	padding-left: 10px;
	text-align: right;
}

/*	General site button - supports input, link and span usage */

input::-moz-focus-inner { border:0; padding:0 }
input.pw-button, button.pw-button {
	font: inherit;
	font-weight: bold;
}
a.bg-button {
	display: inline-block;
}
.bg-button {
	font-family: "Gill Sans W01", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	background-color: #acb4d2;
	padding: 4px 12px;
	border-radius: 1px;
	color: #000 !important;
	text-decoration: none !important;
	border: none;
	border-radius: 2px;
}
.bg-button.small {
	font-size: 14px;
	padding: 1px 4px;
}
.bg-button.loading {
	padding-left: 42px;
	opacity: 0.5;
	background-image: url(/images/css/loading-dots.gif);
	background-repeat: no-repeat;
	background-position: 10px 7px;
}

.bg-button.pdf { 
	background-image: url(/images/css/pdf-icon.png);
	background-repeat: no-repeat;
	background-position: 4px 2px;
	padding-left: 30px;
}

.bg-button:hover {
	background-color: #970D76;
	cursor: pointer;
	color: #fff !important;
	text-decoration: none !important;
}

/*	Ajax form handling */

.xform-intro {
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ebedf3;
}
.xform-request {
	line-height: 1em;
}
.xform-request.loading {
	opacity: 0.5;
}
.xform-request.loading .bg-button[type=submit] {
	padding-left: 42px;
	opacity: 0.5;
	background-image: url(/images/css/loading-dots.gif);
	background-repeat: no-repeat;
	background-position: 10px 7px;
}
.xform-response {
	display: none;
}
.xform-success {
	padding: 20px;
	background-color: #E7F2DB;
	border-color: #B1D88B;
	padding-left: 65px;
	background-image: url(/images/css/icon-success.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color: #693;
}

/*	Picture buttons */

.bg-buttonblock {
	margin: 10px -10px;
	text-align: center;
}
.bg-buttonblock .button {
	display: inline-block;
	width: 240px;
	height: 200px;
	overflow: hidden;
	margin: 0 10px 20px 10px;
	text-align: left;
}
.bg-buttonblock .button .image {
	position: relative;
	width: 100%;
	height: 160px;
	overflow: hidden;
}
.bg-buttonblock .button .image img {
	position: absolute;
}
.bg-buttonblock .button .title {
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 1em;
	font-weight: bold;
	background-color:  #acb4d2;
	background-color:  #ebedf3;
	color: #970D76;
	padding: 0 10px;
}
.bg-buttonblock .button:hover .title {
	text-decoration: none;
	color: #fff;
	background-color: #970D76; 
}

/*	Panel */

.bg-panel {
	background-color: #ebedf3;
	padding: 10px 20px;
	margin-bottom: 10px;
}
.bg-panel.light {
	background-color: #fff;
	border: 1px solid #ccc;
}
.bg-statuspanel {
	background-color: #ebedf3;
	padding: 20px 30px;
	margin-bottom: 10px;
	border-radius: 4px;
}
.bg-statuspanel p {
	margin: 0;
}

/*	Error panel styles */

.errorsTop {
	background-color: #FF3300;
	color: #fff;
	font-weight: bold;
	padding: 16px 16px 0 16px;
	margin: 0;
}
.errors {
	margin: 0 0 10px 0;
	padding: 0 16px 16px 16px;
	background-color: #FF3300;
	color: #fff;
}
.errors ul, .errors li, .errors ul {
	padding: 0 0 0 10px;
	margin: 0;
}
.errors li, #ContentPanel .errors li {
	margin: 0 30px; 
	list-style-image: url(/images/css/bullet-error.png);
}
.errors a, .errors a:visited {
	color: #FFCABB;
}
.errors a:hover {
	color: #fff;
}
.errorsClose {
	width: 24px;
	height: 24px;
	float: right;
	margin: -10px;
	background-image: url(/images/css/close.png);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	cursor: pointer;
	border-radius: 3px;
}
.errorsClose:hover {
	background-color: #B02300;
}

/*	Standard grid */

.bg-grid {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 10px;
}
.bg-grid:last-child {
	margin-bottom: 0;
}
.bg-grid td, .bg-grid th {
	font-size: 1em;
	text-align: left;
	padding: 3px 6px;
	line-height: 1.2em;
	vertical-align: top;
}
.bg-grid .right {
	text-align: right;
}
.bg-grid .grey {
	color: #888;
}
.bg-grid tr.lineover td {
	border-top: 1px solid #ccc;
}
.bg-grid tr.lineover:first-child td {
	border-top: none;
}
.bg-grid tr.bold td {
	font-weight: bold;
}
.bg-grid.small td, .bg-grid.small th {
	font-size: 0.8em;
}

/*	Standard grid for admin */

.admin-grid {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 10px;
}
.admin-grid:last-child {
	margin-bottom: 0;
}
.admin-grid td, .admin-grid th {
	font-size: 0.8em;
	text-align: left;
	padding: 2px 10px;
	line-height: 1.2em;
}
.admin-grid .center {
	text-align: center;
}
.admin-grid .right {
	text-align: right;
}
.admin-grid .photo {
	text-align: center;
	min-width: 24px;
}
.admin-grid .photo img {
	margin: 0;
	padding: 0;
	font-size: 0;
	height: 24px;
	width: 24px;
}
.admin-grid th {
	border-bottom: 1px solid #acb4d2;
}

.admin-grid .selector:hover {
	cursor: pointer;
	background-color: #ebedf3;
}
.admin-grid .selector.selected {
	background-color: #AEE4FF;
}
.admin-grid .hidden {
	background-color: #FFF7D7;
}
.admin-grid .hidden:hover {
	background-color: #FFEDA6;
}
.admin-grid .new {
	background-color: #E8FFE8;
}
.admin-grid .new .newcol:after {
	content: " [NEW]";
}
.admin-grid .selected {
	background-color: #D6DAE9;
}
.admin-grid .selected:hover {
	background-color: #C7CCE0;
}
.admin-grid .action {
	display: inline-block;
	opacity: 0;
	vertical-align: bottom;
	width: 24px;
	height: 24px;
	margin-left: 10px;
	background-image: url(/images/css/edit-image-basic-sprite.png);
	background-repeat: no-repeat;
	background-color: #fff;
	border-radius: 2px;
	cursor: pointer;
}
.admin-grid .selector:hover .action {
	background-color: #ebedf3;
	opacity: 1;
}
.admin-grid .action.del {background-position: 0 -120px}
.admin-grid .action.mov {background-position: 0 -200px}

.admin-grid .selector:hover .action:hover {
	background-color: #acb4d2;
}
.admin-grid tr.lineover td {
	border-top: 1px solid #acb4d2;
}
.admin-grid tr.lineover:first-child td {
	border-top: none;
}


/*	Links grid for artists' pages */

.link-grid {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 10px;
}
.link-grid td {
	font-size: 0.9em;
	text-align: left;
	padding: 2px 10px 2px 0;
	line-height: 1.2em;
}
.link-grid td:first-child {
	font-weight: bold;
}

.tickbox {
	display: inline-block;
	width: 50px;
	height: 20px;
	/*text-align: right;
	padding: 3px 4px 0 0;*/
	padding: 4px 0 0 0;
	color: #fff;
	font-size: 0.8em;
	background-image: url(/images/css/checkbox-sprite.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.tickbox.ticked {
	background-position: -100px 0;
}


/*	IV- classes are for item image viewer */

.iv-imgcycle:hover, .iv-imgenlarge:hover, .iv-cycleprev:hover, .iv-cyclenext:hover {
	cursor: pointer;
}
.iv-viewer {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	color: #fff;
	font-size: 14px;
	padding: 0; margin: 0;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
}
.iv-wrap {
	position: absolute;
	display: none;
	margin: auto;
	z-index: 501;
}
.iv-wrap.iv-active {
	display: block;
	z-index: 503;
}
.iv-this {
}
.iv-step {
	float: left;
	width: 50px;
	background-image: url(/images/css/iv-control-sprite.png);
	background-repeat: no-repeat;
	overflow: hidden;
	min-height: 100px;
	background-position: 100px 0;
}
.iv-img {
	float: left;
}
.iv-innerwrap {
	position: relative;
}
.iv-innerwrap .i {
	font-size: 0;
}
.iv-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	color: #ccc;
	padding: 10px 20px;
	width: 100%;
}
.iv-caption .t { 
	font-weight: bold; 
	font-size: 1.2em;
	text-align: center;
	width: 100%;
}
.iv-caption .c {
	text-align: center;
	width: 100%;
}

.iv-controls {
	position: absolute;
	top: 0; right: 0;
	z-index: 999;
	text-align: right;
}
.iv-close {
	background-image: url(/images/css/iv-control-sprite.png);
	background-repeat: no-repeat;
	width: 50px; height: 50px;
	background-position: 0 0;
}
.iv-close:hover {
	cursor: pointer;
}

/*	Artist pages */

.galleryblock {
	margin: 20px -10px 0 -10px;
}
.galleryblock.center {
	text-align: center;
}
.galleryblock:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.galleryblock .imagewrapper {
	display: inline-block;
	margin: 0 10px 20px 10px;
	/*height: 240px;*/
	cursor: pointer;
}
.galleryblock .imagewrapper .image {
	text-align: center;
	height: 180px;
}
.galleryblock.inline .imagewrapper .image {
	height: 220px;
}

.galleryblock .imagewrapper .image img {
	height: 100%;
}
.galleryblock .imagewrapper .title {
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
	height: 60px;
	overflow: hidden;
}
.galleryblock .imagewrapper .title .main {
	font-weight: bold;
}

/*	General captioned images (single) */

.imageblock {
	margin: 20px 0;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
}
.imageblock img {
	width: 100%;
	max-width: 600px;
}



/*	member-link is used for links to member details on events and committee pages */

.member-link, .member-vacant {
	display: inline-block;
	padding: 4px 10px;
	background-color: #ebedf3;
	margin: 0 6px 6px 0;
	line-height: 30px;
	color: #003878;
	font-size: 14px;
}
.member-link:hover {
	background-color: #970D76;
	color: #fff;
	text-decoration: none;
}
.member-vacant:hover {
	color: inherit;
	text-decoration: none;
}
.member-link .photo {
	display: inline-block;
	position: relative;
	width: 30px;
	height: 30px;
	overflow: hidden;
	background-color: #acb4d2;
	margin-right: 6px;
	margin-left: -6px;
	font-size: 0;
	vertical-align: bottom;
}
.member-link .photo img {
	position: absolute;
	filter: grayscale(100%);
	opacity: 0.8;
}
.member-link:hover .photo img {
	filter: grayscale(0%);
	opacity: 1;
}

/*	event-wrap used on events pages, obvs */

.event-wrap {
	margin: 10px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}
.event-wrap:last-child {
	border-bottom: none;
}

.event-wrap h4 {
	margin: 0;
	line-height: 1.1em;
}
.event-wrap .date {
	font-size: 0.8em;
	line-height: 1.2em;
	margin-bottom: 6px;
}
.event-wrap .venu {
	font-size: 0.8em;
	line-height: 1.2em;
	margin: 4px 0;
}
.event-wrap .venu:before {
	content: "Venue: ";
}
.event-wrap .host {
	font-weight: normal;
	margin-left: 10px;
}

.event-wrap .link {
	font-size: 0.8em;
	line-height: 1.2em;
	margin: 4px 0;
}
.event-wrap .link a {
	font-weight: bold;
}
.event-wrap .image {
	text-align: center;
}
.event-wrap .image img {
	width: 100%;
	max-width: 400px;
}
.event-wrap .desc {
	line-height: 1.2em;
}
.launch-images {
	cursor: pointer;
}

@media screen and (min-width: 600px) {
	.event-wrap .image {
		float: left;
		width: 140px;
		/*min-height: 80px;*/
	}
	.event-wrap .desc {
		margin-left: 150px;
	}
}

.respform {
	margin: 20px 0;
}
.respform .r {
	padding: 0 0 2px 0;
	font-size: 1em;
	line-height: 1.2em;
}
.respform .r:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.respform input[type="text"], .respform textarea {
	width: 100%;
}
@media screen and (min-width: 640px) {
	.respform .r div:first-child {
		float: left;
		width: 200px;
		text-align: right;
		padding-right: 10px;
	}
	.respform .r div:nth-child(2) {
		float: left;
		width: 100%;
		max-width: 400px;
	}
}
	
/*	Home page styles */

.hp-col {
	width: 100%;
	/*height: auto !important;*/
	border: 1px solid #acb4d2;
	margin-bottom: 10px;
}
.hp-col h4 {
	background-color: #acb4d2;
	color: #fff;
	font-size: 1.1em;
	line-height: 1.4em;
	padding: 4px 10px;
	margin: 0;
}
.hp-col img {
	width: 100%;
	display: block;
}
.hp-container {
	display: block;
	padding: 10px;
}
.hp-col.hilite:hover {
	background-color: #ebedf3;
}
a.hp-container .hp-linktext {
	color: #333;
	font-size: 0.9em;
	line-height: 1.2em;
	padding-top: 4px;
}
.hp-col.hilite a.hp-container:hover {
	cursor: pointer;
	text-decoration: none;
}
a.hp-container .hp-titles {
	color: #333;
	font-size: 0.8em;
	line-height: 1.2em;
	text-align: center;
	padding-top: 4px;
}

.hp-event {
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1.2em;
	color: #003878;
}
.hp-small {
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.2em;
	color: #444;
}
.hp-link {
	display: block;
	text-decoration: none;
	padding: 2px 10px;
	margin: 0 -10px 8px -10px;
}
.hp-link:hover {
	background-color: #ebedf3;
	text-decoration: none;
}
.smallcaps {
	font-size: smaller;
	text-transform: uppercase;
}


/*	Publications and Shop */

.pub-wrapper {
	display: block;
	margin: 10px 0;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	color: inherit;
}
.pub-wrapper.link:hover {
	/*background-color: #ebedf3;*/
	color: inherit;
	text-decoration: none;
}
	
.pub-wrapper:last-child {
	border-bottom: none;
}
.pub-wrapper .detwrap {
	margin-bottom: 10px;
}
.pub-wrapper .detwrap:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.pub-wrapper .category {
	float: right;
	background-color: #003878;
	color: #fff;
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 2px 10px;
}
.pub-wrapper .img {
	text-align: center;
}
.pub-wrapper .img img {
	width: 100%;
	max-width: 250px;
}
.pub-wrapper .author {
	font-weight: bold;
}
.pub-wrapper .title {
	font-size: 1.2em;
	font-weight: bold;
	color: #970D76;
}
.pub-wrapper.link:hover .title {
	text-decoration: underline;
}
.pub-wrapper .price {
	font-size: 1.2em;
	font-weight: bold;
	color: #003878;
}
.bg-success {
	background-color: #E1FFD7;
	background-image: url(/images/css/icon-success.png);
	background-repeat: no-repeat;
	background-position: 20px 20px;
	padding: 60px 20px 20px 20px;
}
.footlinks {
	margin: 10px 0;
}
.footlinks a {
	margin-right: 20px;
	background-image: url(/images/css/footer-link.png);
	background-repeat: no-repeat;
	background-position: 0 4px;
	padding-left: 8px;
	white-space: nowrap;
}



@media (min-width: 600px) {
	.pub-wrapper .img {
		float: left;
		width: 160px;
	}
	.pub-wrapper .det {
		margin-left: 180px;
	}
	.bg-success {
		padding: 20px 20px 20px 80px;
	}
}
@media screen and (min-width: 600px) {

	.hp-block {
		margin: 0 -1%;
	}
	.hp-col {
		float: left;
		width: 46%;
		margin: 0 1% 10px 1%;
	}
}
@media screen and (min-width: 800px) {

	.hp-block {
		margin: 0 -1%;
	}
	.hp-col {
		float: left;
		width: 31.33%;
		margin: 0 1% 10px 1%;
	}
}
@media screen and (min-width: 1000px) {

	.hp-block {
		margin: 0 -1%;
	}
	.hp-col {
		float: left;
		width: 23%;
		margin: 0 1% 10px 1%;
	}
}
@media print {
	.hp-block {
		margin: 0 -1%;
	}
	.hp-col {
		float: left;
		width: 46%;
		margin: 0 1% 10px 1%;
	}
}