.roboto-light {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-header {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 2em;
}

.roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: #FFFFFF;
	font-size: 100%;
}

* {box-sizing: border-box;}

/* anchors */

.hlink {
    color: #0000EE;
    text-decoration: none;
}
a.hlink:link {text-decoration:none;}
a.hlink:visited {text-decoration:none; }
a.hlink:hover {text-decoration:none; cursor:pointer; }
a.hlink:active {text-decoration: none;}

a.disabled {
	pointer-events: none;
    color: #ccc;
}

/* buttons */
.button1 {
    background-color: #008CBA; 
    border: none;
    color: white;
    padding: 1em 2em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1:hover {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}

/* button2 is a smaller version of button 1 */
.button2 {
    background-color: #008CBA; 
    border: none;
    color: white;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 90%;
    
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button2:hover {
    background-color: white;
    color: black;
    border: 1px solid #008CBA;
}
.dspHdr {
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}

.dspMsg {
    font-style: italic;
    text-align: center;
}

/* form1: label to left of input element */

form.form1 {
    background: #FFF;
    padding: 1em;
    width: 90%;
    margin: 0 auto;

}

form.form1 legend {
    letter-spacing: 2px;
}

form.form1 label.field {
    font-size: 90%;
    text-align: right;
    width: 10em;
    padding-right: 0.5em;
    float: left;
}

form.form1 label.field_r {
    text-align: left;
    width: 30em;
    padding-left: 1em;
    float: left;
}

form.form1 input {
    float: left;
    padding: 0.5em;
    width: 20em;
}

form.form1 input.radio { 
    float:left; 
    clear:none; 
    margin: 2px 0 0 2px; 
}	

form.form1 button, textarea, select {
    padding: 1em;
}

form.form1 select {
    width: 20em;
}

form.form1 fieldset p {
    clear: both;
    padding: 1em;
    margin: 0 auto;
}

label span, .reqd {
    color: red;
}

input, textarea {
	width: 100%;
	padding: 0.8em;
	border: 1px solid #ccc;
	border-radius: 3px;
}

label{
	display: block;
	padding: 0.3em 0.3em 0 0.3em;
	font-size: 90%;
}

.msgRed {color: red;}
.msgGreen {color: green;}

/* categories dropdown button #F9F9F9
based on https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button */
.catbtn {min-width: 15em; padding: 1em; border: none; cursor: pointer; background-color: #FFF;}
.catdown {position: relative; display: inline-block;}
.catdd_content {
  display: none;
  position: absolute;
  background-color: #FFF;
  
  border-bottom: 1px solid #FFF;
  min-width: 18.5em;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.catdd_content a {
  color: black;
  padding: 0.3em;

  text-decoration: none;
  display: block;
}

.catdd_content a:hover {background-color: #E7E7E7}

.catdown:hover .catdd_content {
  display: block;
}

.catdown:hover .catbtn {
  background-color: #E0E0E0;
}

p.introduction:first-letter {
    font-size : 150%;
    color: red;
}

.smalltext, .smallital, .smallbold {
	font-size: 90%;
}

.smallital {font-style: italic;}
.smallbold {font-weight: bold;}

.textLeft {text-align: left;}
.textRight {text-align: right;}
.textCenter {text-align: center;}
.textJust {
    text-align: justify;
    text-justify: inter-word;
}
.textBold {font-weight: bold}
.textItal {font-style: italic}

/* tables */

table.vsv {
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

table.vsv caption {
	font-weight: bold;
	padding-bottom: 1em;
}

table.vsv td {
    border: 1px solid #EAEAEA;
    padding: 0.5em;
}

table.vsvNoBorder {
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

table.vsvNoBorder td {
    padding: 0.5em;
}

/* standard width definitions in terms of ems */

.wdt025 {width:  2.25em;}
.wdt040 {width:  3.60em;}
.wdt050 {width:  4.50em;}
.wdt060 {width:  5.40em;}
.wdt075 {width:  6.75em;}
.wdt085 {width:  7.65em;}
.wdt090 {width:  8.10em;}
.wdt100 {width:  9.00em;}
.wdt110 {width:  9.90em;}
.wdt125 {width: 11.25em;}
.wdt150 {width: 13.50em;}
.wdt175 {width: 15.75em;}
.wdt200 {width: 18.00em;}
.wdt225 {width: 20.25em;}
.wdt240 {width: 21.60em;}
.wdt250 {width: 22.50em;}
.wdt275 {width: 24.75em;}
.wdt300 {width: 27.00em;}
.wdt325 {width: 29.25em;}
.wdt350 {width: 31.50em;}
.wdt375 {width: 33.75em;}
.wdt400 {width: 36.00em;}
.wdt450 {width: 40.50em;}
.wdt500 {width: 45.00em;}
.wdt600 {width: 54.00em;}

/* flexbox model is used to adapt website for smaller screens. 
the small screen behaviour is defined through the @media constructs that follow */

/* main containers defined with varying widths; border to be set in programs where reqd.
for small screens, these containers expand to 100%*/
.flex_container40, .flex_container50, .flex_container60, .flex_container80, .flex_container90, .flex_container100  {
	background-color: #FFFFFF;
	padding: 1em;
	margin: 0 auto;
	justify-content: center;
	vertical-align: middle;
	font-size: 90%;
}

.flex_container40 {width: 40%;}
.flex_container50 {width: 50%;}
.flex_container60 {width: 60%;}
.flex_container70 {width: 70%;}
.flex_container80 {width: 80%;}
.flex_container90 {width: 90%;}
.flex_container100 {width: 100%;}	

.flex_row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
}	

/* the flex_column constructs expand to 100% in small screens; the flexstat_colnn constructs stay with 
the specified percentages */

.flex_col10, .flexstat_col10 {
	-ms-flex: 9%; /* IE10 */
	max-width: 9%;
	flex: 9%;
}

.flex_col15, .flexstat_col15 {
	-ms-flex: 14%; /* IE10 */
	max-width: 14%;
	flex: 9%;
}

.flex_col20, .flexstat_col20 {
	-ms-flex: 19%; /* IE10 */
	max-width: 19%;
	flex: 19%;
}

.flex_col25, .flexstat_col25, .flexpivot_col25 {
	-ms-flex: 24%; /* IE10 */
	max-width: 24%;
	flex: 24%;
}

.flex_col30, .flexstat_col30 {
	-ms-flex: 29%; /* IE10 */
	max-width: 29%;
	flex: 29%;
}

.flex_col33, .flexstat_col33 {
	-ms-flex: 31%; /* IE10 */
	max-width: 31%;
	flex: 31%;
}

.flex_col40, .flexstat_col40 {
	-ms-flex: 39%; /* IE10 */
	max-width: 39%;
	flex: 39%;
}

.flex_col50, .flexstat_col50 {
	-ms-flex: 49%; /* IE10 */
	max-width: 49%;
	flex: 49%;
}

.flex_col60, .flexstat_col60 {
	-ms-flex: 58%; /* IE10 */
	max-width: 58%;
	flex: 58%;
}

.flex_col70, .flexstat_col70 {
	-ms-flex: 69%; /* IE10 */
	max-width: 69%;
	flex: 69%;
}

.flex_col75, .flexstat_col75 {
	-ms-flex: 74%; /* IE10 */
	max-width: 74%;
	flex: 74%;
}

.flex_col80, .flexstat_col80 {
	-ms-flex: 79%; /* IE10 */
	max-width: 79%;
	flex: 79%;
}
.flex_col85, .flexstat_col85 {
	-ms-flex: 84%; /* IE10 */
	max-width: 84%;
	flex: 84%;
}
.flex_col90, .flexstat_col90 {
	-ms-flex: 89%; /* IE10 */
	max-width: 89%;
	flex: 89%;
}

.catPanel {
	-ms-flex: 24%; /* IE10 */
	max-width: 24%;
	flex: 24%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);	
	padding: 0.3em;
	margin: 0.3em;
	text-align: center;
}

.catPanel button {
  border: none;
  outline: 0;
  padding: 0.7em;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 1em;
  font-weight: 500;
}
	
.catPanel button:hover {
  opacity: 0.8;
}	

/* flex panels for details */
.detPanel {
	-ms-flex: 89%; /* IE10 */
	max-width: 89%;
	flex: 89%;

	padding: 0.3em;
	margin: 0.3em auto;
	text-align: center;
}

.detPanel button {
  border: none;
  outline: 0;
  padding: 1em;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 1.2em;
  font-weight: 500;
}
	
.detPanel button:hover {
  opacity: 0.8;
}	
/* adapt for smaller screens with max width < 800 px */
@media screen and (max-width: 800px) {
	/* expand flex containers to full size */
	.flex_container40, .flex_container50, .flex_container60, .flex_container70, .flex_container80, .flex_container90 {width: 100%;}

	/* flex columns - columns stretch to 100% for small screens */
	.flex_col20, .flex_col25, .flexpivot_col25, .flex_col40, .flex_col50, .flex_col60, .flex_col75 {
		-ms-flex: 100%; /* IE10 */
		max-width: 100%;
		flex: 100%;
	}	
	
	.catPanel {
		-ms-flex: 33%; /* IE10 */
		max-width: 33%;
		flex: 33%;	
	}
	
}

/* adapt for smaller screens with max width < 600 px */
@media screen and (max-width: 600px) {	
	/* expand flex containers to full size */
	.flex_container40, .flex_container50, .flex_container60, .flex_container70, .flex_container80, .flex_container90 {width: 100%;}

	/* flex columns - columns stretch to 100% for small screens */
	.flex_col20, .flex_col25, .flexpivot_col25, .flex_col40, .flex_col50, .flex_col60, .flex_col75 {
		-ms-flex: 100%; /* IE10 */
		max-width: 100%;
		flex: 100%;
	}
	
	.catPanel {
		-ms-flex: 50%; /* IE10 */
		max-width: 50%;
		flex: 50%;	
	}	
}	

/* css for slideshow; used in vsv_catalogue.php
adapted from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

used only the arrows feature; full concept in w3schools_slideshow_gallery.html
 */

/* Position the image container (needed to position the left and right arrows) */
.ssContainer {position: relative;}

/* Next & previous buttons */
.prev, .next, .prev_lightgrey, .prev_darkgrey, .prev_charcoal, .next_lightgrey, .next_darkgrey, .next_charcoal {
  cursor: pointer;
  position: absolute;
  text_decoration: none;
  top: 50%;
  width: auto;
  padding: 0.5em;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.prev_lightgrey, .next_lightgrey {color: #D3D3D3;}
.prev_darkgrey, .next_darkgrey {color: #A9A9A9;}
.prev_charcoal, .next_charcoal {color: #36454F;}

/* Position the "next button" to the right */
.prev, .prev_lightgrey, .prev_darkgrey, .prev_charcoal {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.next, .next_lightgrey, .next_darkgrey, .next_charcoal {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
}

.prev_lightgrey:hover, .next_lightgrey:hover {
	background-color: rgba(79, 79, 79, 0.8);
	color: #D3D3D3;
}
.prev_darkgrey:hover, .next_darkgrey:hover {
	background-color: rgba(210, 210, 210, 0.8);
	color: #A9A9A9;
}
.prev_charcoal:hover, .next_charcoal:hover {
	background-color: rgba(232, 232, 232, 0.8);
	color: #36454F;
}

/* css used for creative sculptures section */
figure {
  padding: 0.5em;
  margin: auto;
}

figure img.normal{
	width: 100%;
}

figure img.ht800 {height: 800px}
figure img.ht600 {height: 600px}
figure img.ht500 {height: 500px}
figure img.ht400 {height: 400px}
figure img.ht300 {height: 300px}
figure img.ht250 {height: 250px}
figure img.ht200 {height: 200px}
figure img.ht100 {height: 100px}

figure img.large {height: 500px}
figure img.medium {height: 300px}
figure img.thumb {height: 100px}

figcaption {
  font-style: italic;
  padding: 2px;
  text-align: center;
}