/* start of default/vars.css.inc.php */
:root {
	/* default global vars in the form:
	* --var-name: value;
	* that can be used in CSS like:
	* var(--var-name);
	*/
	--page-body-width: 100%;
	--global-font-family: Verdana, Arial, Helvetica, sans-serif;
	--global-font-size: 0.9em;
	--text-color: #FFFFCC;
	--background-color: #330000;
	/* the field border color is set to gray if the background color is white and transparent for any other background color */
	--field-border-color: transparent;
	--border-radius: 6px;
	--border-color: #FFFFCC;
	--link-color: #FFFF99;
	--link-hilite-color: #FFFFCC;
	--nav-hilite-color: #551100;
	--nav-hover-color: #66ff33;
	--nav-background-color: #66ff33;
	--popup-header-gradient-bottom: ;
	--popup-header-gradient-top: ;
	--background-image: unset;
	--artsites-color: #008888;
}

/* end of default/vars.css.inc.php *//* start default/default.css.inc.php */

BODY {
	max-width: var(--page-body-width);
	margin: auto;
	padding: 0;
	font-family: var(--global-font-family);
	font-size: var(--global-font-size);
	color: var(--text-color);
	background-color: var(--background-color);
	background-image: var(--background-image);
}

A {
	text-decoration: none;
	color: var(--link-color);
}

A:hover {
	color: var(--link-hilite-color);
}

IMG {
	border: 0;
	margin: 5px;
}

CAPTION {
	color: var(--text-color);
}

TABLE, TR, TD, TH {
	vertical-align: top;
	padding: 0;
	margin: 0;
	border: solid black 0px;
	border-collapse: collapse;
}

FIELDSET {
	padding: 1em;
	margin-bottom: 1em;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

LEGEND {
	color: var(--text-color);
	font-size: 1em;
	padding: 0 0.5em 0 0.5em;
	font-weight: bold;
	border: 0;
	width: auto;
}




/* General full page */
.page-body {
	color:  var(--text-color);
	text-align: left;
	padding: 1em;
	min-height: 400px;
	padding-bottom: 2rem;
	margin: 0 auto;
}

.page-body A {
	color: var(--link-color);
}

.page-body A:hover {
	color: var(--link-hilite-color);
}


/* Nag screen */
#nag {
	display: block;
	background: #C00000;
	padding: 0.2rem 0.4rem;
	margin: 0.2rem;
	border-radius: 0.25rem;
	color: #FFFFFF;
	font-weight: bold;
	text-align: right;
	border: 2px solid #C00000;
}

#nag:hover {
	background: #000000;
}

#nag DIV {
	float: left;
}

.ereq1 {
}

.ereql {
	text-align: left;
	margin-left: 0px;
	display: none;
	padding-bottom: 0px;
}

IMG.welcome-image {
	float: right;
	margin: 0 0 0 5px;
	vertical-align: top;
}

INPUT.welcome-image {
	width: 220px;
}

.news-listing {
	padding: 4px;
}

.other-news-listing {
	margin-left: 4em;
}

.news-header {
	clear: both;
}

.news-title {
	display: inline;
	font-weight: bold;
	font-size: 1.1em;
}

.news-date {
	display: inline;
 	font-size: 0.8em;
}

#user-page-content {
	text-align: left;
}

#user-page-content TD {
	padding-left: 0 20px 5px 0px;
}

.maintenance-message {
	color: #FF0000;
	padding: 1em 2em 1em 4em;
	font-weight: bold;
	font-size: 140%;
}

.event-entry {
	margin-bottom: 2em;
	clear: left;
}

.event-title {
	font-weight: bold;
	margin-left: 100px;
}

.event-dates {
	float: left;
	width: 8em;
}

.event-details {
	margin-left: 8.5em;
}

.nowrap {
	white-space: nowrap;
}



.social-like {
	float: right;
}

IMG.touch-disable {
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
}


.prev-next-disabled {
	display: none;
}
/* end default/default.css.inc.php */

/* start of default/common.css.inc.php */

.small-text {
	font-size: 0.8em;
}

.nowrap {
	white-space: nowrap;
}

.artsites {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: var(--artsites-color);
	font-weight: bold;
}


.standard-page P IMG.social-media-icon {
	margin: 0;
	vertical-align: middle;
}


.work-shop-interact {
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
}

.purchase-embed-processed.center {
	text-align: center;
}

.purchase-embed-processed.left {
	text-align: left;
}

.purchase-embed-processed.right {
	text-align: right;
}

.work-shop-interact .price,
.purchase-embed-processed .price {
	font-weight: normal;
	font-size: 1em;
}

.work-shop-interact TABLE.work-shop-pricing,
.purchase-embed-processed.center TABLE.work-shop-pricing {
	margin-left: auto;
	margin-right: auto;
}

.purchase-embed-processed.left TABLE.work-shop-pricing {
	margin-left: 0;
	margin-right: auto;
}

.purchase-embed-processed.right TABLE.work-shop-pricing {
	margin-left: auto;
	margin-right: 0;
}

TABLE.work-shop-pricing TD {
	text-align: right;
	padding-right: 1em;
}

.work-shop-interact SELECT {
	margin-bottom: 0.4em;
}

.work-shop-interact .help,
.purchase-embed-processed .help {
	font-size: 0.85em;
}

.view-cart-link {
	font-size: 0.85em;
}

EM.red-dot {
	display: inline-block;
	height: 0.8em;
	width: 0.8em;
	background-color: red;
	border-radius: 0.4em;
}


/* Slideshow page */
#slideshow_container {
	margin-top: 2em;
}
#slideshow_container.fullscreen-active {
	margin: 0;
}
#slideshow_container.fullscreen-active #slideshow_pane {
	height: 100%;
}
#slideshow_container.fullscreen-active .standard-page {
	margin-left: 0;
	max-width: 100%;
}

#slideshow_pane {
	/*border: 1px dashed green;*/
	position: relative;
	width: 100%;
	height: 80vh;
}
#slideshow_pane IMG {
  display: block;

  /* Center image horizontally and vertically */
	position: absolute;
	left: 50%;
  transform: translateX(-50%);

  /* Fit image into container */
	  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  /* Remove any margin and padding associated with IMG tag */
  margin: 0;
	padding: 0;
}
#slideshow_controls {
	position: relative;
	width: 100%;
	margin-bottom: 0.5em;
	text-align: center;
}
#slideshow_controls I {
	padding: 0.1em 0.25em;
}

.img-wide {
	max-width: 100% !important;
	max-height: 100% !important;
	height: auto !important;
	width: auto !important;
}

.page-copyright {
	color: var(--text-color);
	padding: 0.1rem 2rem 2rem 2rem;
	clear: both;
	font-size: 0.8rem;
	text-align: center;
}


/* end of default/common.css.inc.php */
/* Start of default/events.css */

/* GEvents */
.gevent-item {
	clear: both;
	margin-top: 2em;
}

.gevent-item .controls {
	display: block;
	float: left;
	width: 120px;
}


.gevent-item .date {
	display: block;
	font-weight: bold;
}
.gevent-item .title {
	font-size: 120%;
	font-weight: bold;
}
.gevent-item .title,
.gevent-item .category,
.gevent-item .link,
.gevent-item .venue,
.gevent-item .reception,
.gevent-item .price-field,
.gevent-item .poster,
.gevent-item .description {
	display: block;
	margin-left: 120px; 
}
.gevent-item .reception-date {
	font-weight: bold;
}
.gevent-item .price {
	font-weight: bold;
}

@media (min-width: 768px) {
	.gevent-item .controls {
		width: 130px;
	}
	.gevent-item .title,
	.gevent-item .category,
	.gevent-item .link,
	.gevent-item .venue,
	.gevent-item .reception,
	.gevent-item .price-field,
	.gevent-item .poster,
	.gevent-item .description {
		margin-left: 130px; 
	}
}
@media (min-width: 992px) {
	.gevent-item .controls {
		width: 150px;
	}
	.gevent-item .title,
	.gevent-item .category,
	.gevent-item .link,
	.gevent-item .venue,
	.gevent-item .reception,
	.gevent-item .price-field,
	.gevent-item .poster,
	.gevent-item .description {
		margin-left: 150px; 
	}
}
@media (min-width: 1200px) {
	.gevent-item .controls {
		width: 170px;
	}
	.gevent-item .title,
	.gevent-item .category,
	.gevent-item .link,
	.gevent-item .venue,
	.gevent-item .reception,
	.gevent-item .price-field,
	.gevent-item .poster,
	.gevent-item .description {
		margin-left: 170px; 
	}
}

/* End of default/events.css *//* generic styles that applies to pages regardless of layout */

/* login form */
#layout-login {
	margin: 0 auto 2rem auto;
	max-width: 600px;
}
/* start of default/forms.css.inc.php */

/* Form fields */

/**
 * Applies default styles to a standard form.
 * This class should be applied to the outermost form element.
 */
.std-form {
	width: 100%;
	max-width: 800px;
	box-sizing: border-box;
}

/**
 * Applies default styles to a group of form fields.
 * This class should be applied to a container element that holds multiple form fields.
 */
.field-group {
	margin-bottom: 0.5rem;
	overflow: hidden;
}

.field-prompt {
	font-weight: bold;
	white-space: nowrap;
	line-height: 1.8;
}

.field-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.3rem 12px;
	border: 2px solid var(--field-border-color);
	color: black;
    background-color: white;	
	border-radius: var(--border-radius);	
}

.field-input:focus {
	outline: none !important;
	border-color: #0000FF;
}

.field-input.password-container {
	display: flex;
	justify-content: space-between;
}

.field-input.password-container input {
	outline: none;
	border: 0;
}

.field-input.password-container button {
	background: none;
	border: none;
	cursor: pointer;
	color: #0000FF;
}

/* Add focused state for password container when input is focused */
.field-input.password-container:focus-within {
	border-color: #0000FF;
}

/* .field-input:not(:placeholder-shown):valid {
	border-color: #00FF00;
} */

/* .field-input:not(:placeholder-shown):invalid {
	border-color: #FF0000;
} */

/* .field-input:focus:invalid {
	border-color: #FFff00;
} */

.field-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.43;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	user-select: none;
	background-image: none;
	border-radius: var(--border-radius);	
	border: 2px solid var(--field-border-color);
	color: black;
}

.field-button:focus {
	border-color: #0000FF;
	outline: none !important;
}

.field-text {
}

.field-help {
	font-size: 0.8em;
}

.field-error {
	color: #FF0000;
	font-weight: bold;
}

/* end of default/forms.css.inc.php *//* start of tiled/layout.css.inc.php */

:root {
	--global-font-size: 0.8em;
}

BODY {
	text-align: center;
}

H1 {
	font-size: 1.2em;
	margin: 0.5em 0 0.5em 0;
	text-align: center;
}

.page-title {
	margin: 0;
	padding: 0.1em;
	font-size: 1.5em;
	font-weight: bold;
}

.page-title IMG {
	border: 0;
	margin: 5px;
	max-width: 100%;
	height: auto;
}

.page-tag-line {
	margin: 0;
	padding: 0.1em;
	font-size: 1.1em;
	font-weight: bold;
}

@media (min-width: 768px) {
	.page-title {
		padding: 0.2em 0.2em 0.1em 0.2em;
		font-size: 1.8em;
	}
	.page-tag-line {
		padding: 0 0.2em 0.2em 0.2em;
		font-size: 1.3em;
	}
}

@media (min-width: 992px) {
	.page-title {
		padding: 0.25em 0.25em 0.15em 0.25em;
		font-size: 2.2em;
	}
	.page-tag-line {
		padding: 0 0.25em 0.25em 0.25em;
		font-size: 1.5em;
	}
}

@media (min-width: 1200px) {
	.page-title {
		padding: 0.25em 0.25em 0.15em 0.25em;
		font-size: 3em;
	}
	.page-tag-line {
		padding: 0 0.25em 0.25em 0.25em;
		font-size: 1.8em;
	}
}

.main-nav {
	margin: 0;
	padding: 5px;
	margin-bottom: 5px;
}
.main-nav TABLE {
	margin: auto;
}

.main-nav-item {
}

.nav-hr {
	border-top: 1px solid var(--border-color);
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}

TD.main-nav-item-cell {
	padding: 0.2em 0.5em;
	vertical-align: middle;
}

@media (min-width: 1200px) {
	TD.main-nav-item-cell {
		padding: 0.4em 1em;
		font-size: 1.1em;
	}
}

.main-nav-item-divider {
	color: var(--border-color);
	display: none;
}

.main-nav-item-hilite {
	padding: 0.2em 0.5em;
	font-weight: bold;
	font-size: 1.1em;
	background: var(--nav-hilite-color);
}

.gallery-nav {
	padding: 1em 0 0 0;
	margin: 0;
	text-align: center;
}

.gallery-nav-item {
	display: inline-block;
	padding: 0.2em 0.5em;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.gallery-nav-item {
		padding: 0.4em 1em;
		font-size: 1.1em;
	}
}

.gallery-nav-item-hilite {
	display: inline-block;
	font-weight: bold;
	padding: 0.2em 0.5em;
	font-size: 1.1em;
	background: var(--nav-hilite-color);
	white-space: nowrap;
}

.gallery-title {
	margin-top: 10px;
}

.gallery-title H1 {
	display: inline;
}

.gallery-title .small-text {
	text-align: center;
}

.image-grid {
	border: 0px solid green;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
}
.image-grid .gallery-cell {
	border: 0px dashed blue;
	float: left;
	width: 200px;
	height: 234px;
	text-align: center;
	overflow: hidden;
}
.image-grid .gallery-cell:hover {
	overflow: visible;
	z-index: 1;
}
.image-grid .gallery-cell:hover .title {
	background: var(--background-color);
}
.image-grid .image-cell {
	border: 0px dotted red;
	margin-left: auto;
	margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
	width: 190px;
	height: 190px;
	padding: 5px;
}

.image-grid .image-cell IMG {
  max-width: 180px;
  max-height: 180px;
}

@media (min-width: 768px) {
	.image-grid .gallery-cell {
		width: 228.5px;
		height: 264.5px;
	}
	.image-grid .image-cell {
		width: 218.5px;
		height: 218.5px;
	}
	.image-grid .image-cell IMG {
	  max-width: 207px;
	  max-height: 207px;
	}
}

@media (min-width: 992px) {
	.image-grid .gallery-cell {
		width: 267px;
		height: 297px;
	}
	.image-grid .image-cell {
		width: 247px;
		height: 247px;
	}
	.image-grid .image-cell IMG {
	  max-width: 234px;
	  max-height: 234px;
	}
}

@media (min-width: 1200px) {
	.image-grid .gallery-cell {
		width: 315px;
		height: 345px;
	}
	.image-grid .image-cell {
		width: 285px;
		height: 285px;
	}
	.image-grid .image-cell IMG {
	  max-width: 270px;
	  max-height: 270px;
	}
}

.image-grid .image-cell .title {
	height: auto;
	padding: 5px 0;
	vertical-align: top;
}

.ximage-nav img {
	display: block;
	border: 1px solid white;
	padding: 0;
}

.ximage-nav img:hover {
	border: 1px solid #CC6600;
	padding: 0;
}

.img_prev {
	float: left;
	text-align: left;
	}

.img_next {
	float: right;
	text-align: right;
}

.img_prev IMG {
	margin: 5px;
}

.img_next IMG {
	margin: 5px;
}

.big-arrows {
	font-weight: bold;
	font-size: 1.3em;
}

.image-description {
	width: 400px;
	margin: auto;
	text-align: left;
}

.image-block-frame {
	clear: both;
	padding-top: 1em;
}

IMG.image-block {
	background-color: #FFFFCC;
	padding: 15px;
	margin: 0px;
	text-align: center;
}

.image-border img {
	display: inline;
}

.page-body {
	max-width: 700px;
}

.field-image-preview {
	border: 1px solid var(--border-color);
}

.status-message {
	padding: 1em 2em 1em 4em;
	font-weight: bold;
}

.link-body {
	display: block;
}

.link-control {
	float: left;
}
	
.link-title {
	font-weight: bold;
	color: var(--link-color);
}

.link-description {
	padding-left: 1em;
	padding-bottom: 5px;
}

.error-message {
	color: #FF0000;
	padding: 1em 2em 1em 4em;
	font-weight: bold;
}

.image-layout {
	text-align: center;
}

.image-layout H1 {
	margin-top: 1.5em;
	text-align: center;
}

IMG.welcome-image {
	float: right;
	margin: 0 0 0 5px;
	vertical-align: top;
}


INPUT.welcome-image {
	width: 220px;
}

.guestbook-item {
	margin-bottom: 1em;
}

.guestbook-comment {
}

.guestbook-name {
	font-size: 0.9em;
	font-weight: bold;
	padding-left: 2em;
}

.guestbook-date {
	font-size: 0.95em;
	font-weight: normal;
}

.standard-page {
	margin: 1em 0.5em 2em 0.5em;
	overflow: hidden;
	line-height: 1.5;
}

.gallery-page {
	margin: 1em 0 2em 0;
}

@media (min-width: 768px) {
	.page-body {
		max-width: 706px;
	}
	.standard-page,
	.gallery-page,
	.gallery-title {
		font-size: 1.1em;
		line-height: 1.6;
	}
}

@media (min-width: 992px) {
	.page-body {
		max-width: 912px;
	}
	.standard-page,
	.gallery-page {
		font-size: 1.2em;	
		line-height: 1.7;
	}
}

@media (min-width: 1200px) {
	.page-body {
		max-width: 1104px;
	}
	.standard-page,
	.gallery-page {
		font-size: 1.3em;	
		line-height: 1.8;
	}
}

div.standard-page img {
	border-color: #FFFFCC !important; 
}

@media (max-width: 767px) {
	div.standard-page img {
		float: none !important;
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	  max-width: 100% !important;
	  height: auto !important;
	}
}

/* end of tiled/layout.css.inc.php */
/* Start of title/sub-title overrides */
.page-title A, 
A.site-title {
	}

.page-tag-line A, 
A.site-tag-line {
	}
/* End of title/sub-title overrides */