/*set globals fonts (anything else?)*/
html,body {
    height:100%;/*added 20200709 to try to fix a disappearing picturearea*/
}
/*set a background to fill empty LH and RH screen space*/

body { 
  display: block;
  margin: 0;
  padding: 0;
  background: #e3e3e3 ;
  
  /*url('/images/scene-bg.jpg') repeat-y top center;*/
		font-family:verdana, arial, sans-serif;
	    font-size: 16px;
		font-color: black;
		line-height:120%;}

/*set up the page parameters */

#page {
    max-width: 1280px;
    background: #c09580;
    border: solid 1px #ababab;
    margin: 0 auto;
   /* padding: 15px;*/
    position: relative;
}
/*style for central part of page */
#stage {
 //  background: #d7cec7;
	background:#eae5e1;
/*	min-height: 975px; */
    height: auto ;
    margin-bottom: 15px;
 	overflow: hidden; 
}
/*narrow the padding for smaller screens (#page entry), and set smaller gutters (gutter-10)  see 
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width */
@media screen {
		.container-fluid{
		margin-left : -12px;
		margin-right : -12px;
		}
		.gutter-10.row {
		margin-right: -1px;
		margin-left: -1px;
	}
	.gutter-10 > [class^="col-"], 
	.gutter-10 > [class^=" col-"], 
	.gutter-10 > [class^="visible-col-"], 
	.gutter-10 > [class^=" visible-col-"]
	{
		padding-right: 1px;
		padding-left: 1px;
	}
	}
@media screen and (min-width: 480px) {
    #page {
        padding: 2px;
    }
	
}	

@media screen and (min-width: 768px) {
    #page {
        padding: 5px;
    }
	.gutter-10.row {
		margin-right: -2px;
		margin-left: -2px;
	}
	.gutter-10 > [class^="col-"], 
	.gutter-10 > [class^=" col-"], 
	.gutter-10 > [class^="visible-col-"], 
	.gutter-10 > [class^=" visible-col-"] 
	{
		padding-right: 2px;
		padding-left: 2px;
	}
	.container-fluid{
		margin-left : -10px;
		margin-right : -10px;
	}	
}
@media screen and (min-width: 992px) {
    #page {
        padding: 10px;
    }
	.gutter-10.row {
		margin-right: -4px;
		margin-left: -4px;
	}
	.gutter-10 > [class^="col-"], 
	.gutter-10 > [class^=" col-"], 
	.gutter-10 > [class^="visible-md"], 
	.gutter-10 > [class^=" visible-md"] 
	{
		padding-right: 4px;
		padding-left: 4px;
	}
	.container-fluid{
		margin-left : -5px;
		margin-right : -5px;
	}		
}
@media screen and (min-width: 1200px) {
    #page {
        padding: 15px;
    }
	.gutter-10.row {
		margin-right: -5px;
		margin-left: -5px;
	}
	.gutter-10 > [class^="col-"], 
	.gutter-10 > [class^=" col-"], 
	.gutter-10 > [class^="visible-lg"], 
	.gutter-10 > [class^=" visible-lg"] 
	{
		padding-right: 5px;
		padding-left: 5px;
	}
	.container-fluid{
		margin-left : -0px;
		margin-right : -0px;
	}	
}
/*style for central part of page */
/*was background: ##d7cec7;*/


/* This is our personalised 10px gutter (Instead of Boorstrap default 30px)  */
@media print 
	{
	.gutter-10.row {
		margin-right: -5px;
		margin-left: -5px;
	}
	.gutter-10 > [class^="col-"], 
	.gutter-10 > [class^=" col-"], 
	.gutter-10 > [class^="visible-col-"], 
	.gutter-10 > [class^=" visible-col-"] 
	{
		padding-right: 5px;
		padding-left: 5px;
	}	
	}
/*Now some code to remove white space from under the Bootstrap navbar, and change the height of the navbar so it is a bit thinner than normal*/
.navbar {
    margin-bottom: 0;
	min-height:32px !important;
	}
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 32px;
}
.navbar {min-height:30px !important;}

/*and make the Nav bar drop downs actually drop down (borrowed from https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know#don’t-forget-container-fluid-for-full-width-rows */
@media only screen and (min-width : 768px) {
    /* Make Navigation Toggle on Desktop Hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}
/*here is a class to allow a pagebreak before a div*/
.pagebreak { page-break-before: always; }

/*Next we want the navbar entries closer together. 
.navbar-nav > li{
  margin-left: -10px;
  margin-right: -10px;
}*/

/*a class to get rid of bootstrap box dimensions*/
.nospace {
 margin: 0;
 padding: 0;
}

/*Now our font styles*/

H1 { 
font-style: normal; 
font-weight: bold; 
font-size: 1.6em; 
line-height: 110%;
color: #76323f; 
}

H2 { 
font-style: normal; 
font-weight: bold; 
font-size: 1.4em; 
line-height: 105%;
color: #76323f ;
}

H3 { 
font-style: normal; 
font-weight: bold; 
font-size: 1.2em; 
line-height: 100%; 
color: #76323f ;
}

H4 { 
font-style: normal; 
font-weight: bold; 
font-size: 1.1em; 
line-height: 100%;
color: #76323f;
}

H6 { 
font-size: 8pt;
line-height: 8pt;  
}

/*More 'progress' - now we need a STYLE for a Horizontal Line */
hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 
/*A collection of nice coloured buttons with rounded corners*/
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  border-radius: 10px;
  color: white;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2 {background-color: yellow; color: black;} /* Yellow */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */

/*style for top of display boxes */
.boxhead {
	 margin-top: 16px;
	 border-width: 2px ;
	border-color:#c09f80;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
 padding: 20px 0 0 16px;
    width: 100%;
    /*height: 40px;*/
background:#c09f80;
   text-align:center;
}
.boxtitle{
position: relative;
    top: -10px;
	color:white;
	font-weight: bold;
}	
.boxbody{
	 width:100%;
	 /*min-height: 560px;*/
     /*height:auto !important;*/
   	 border-style:solid;
	 border-width: 2px ;
	 border-color:#c09f80;
	 padding: 10px 4px 10px 10px;
	 background:#ffffff;
	 margin-bottom: 10px;
	 overflow: hidden  ;
	 }
@media print {
	.boxbodyprint{
	min-height: 800px;
}
}
.address{
	/*height: 150px;*/
	padding: 10px 4px 10px 10px;
	margin-bottom: 10px;
	overflow: hidden ;
	float:  left;
}
.clear{clear:both;}
/*footnote style*/	 
.footnote {
padding-top: 12px; 
padding-bottom : 12px; 
width : 100%;
margin : auto ; 
margin-top: 10px;
text-align : center ; 
font-weight: bold; 
font-size: 12pt; 
line-height: 16pt; 
background: white; 
border-radius: 24px;
margin-bottom:10px;
border-style:solid;
border-color:#c09f80;
clear : all;
}
/*display of hyperlinks*/
a { 
  font-weight: bold; 
  /*color: #c09f80; */
  color: #ff7300;
  TEXT-DECORATION: none;
}
a:hover {
	position: relative;
	background : #c09f80;
	color : yellow;
	TEXT-DECORATION: none;
}
/*Need a bit of style for the who done it editor info*/
.whodunit a span {
	display: none;
}
.whodunit a:hover span {
	display: block;
   	position: absolute; top: 10px; left: 0;
	/* formatting only styles */
   	padding: 5px; margin: 10px; z-index: 100; width:120px;
   	background: #f0f0f0; color: #804040; border: 1px dotted #c0c0c0;
}
/*going for a simpler approach to L,C&R alignment*/
.left {
   float: left;
   padding: 0 20px 20px 0;
}
.center { text-align: center; }
.right {
   float: right;
   padding: 0 0 20px 20px;
}
/*Left and write thumbnail boxes (can we dump these for 2016?)*/
.leftbox {
float: left ; 
margin-right: 4px;
  height:auto; 
  width:auto; 
text-align : center ; 
padding-top: 2px; 
padding-bottom : 2px; 
padding-left : 2px  ; 
padding-right : 2px ; 
clear : both; 
}
.rightbox {
float: right ; 
margin-left: 4px;
  height:auto; 
  width:auto; 
text-align : center ; 
padding-top: 2px; 
padding-bottom : 2px; 
padding-left : 2px ; 
padding-right : 2px; 
}
.floatbox {
float: left ; 
margin-right: 4px;
  height:160px; 
  width:160px; 
  overflow:hidden;
text-align : center ; 
padding-top: 2px; 
padding-bottom : 2px; 
padding-left : 2px  ; 
padding-right : 2px ; 
}
/*This is supposed to make a text area fit within its containing element.  Added June 2019.  Cols element removed from all occurences of TextArea.*/
textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}
/*    these are the styles used in the Cycle2 slideshows, downleaded 28th Sept 2016.  
   downloaded from http://jquery.malsup.com/cycle2/demo/demo-slideshow.css
*/

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	}

.cycle-slideshow { 				
	width: 85%; 
	min-width: 200px; 
	max-width: 640px;
	margin: 10px auto; 
	padding: 0; 
	position: relative;
    background: url(https://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
 }

/* slideshow images (for most of the demos, these are the actual "slides") */

.cycle-slideshow img 
	{
	/* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content.  
    */
    position: absolute; 
	top: 0; 
	left: 0;
    padding: 0; 
    display: block;
	max-height:360px;
	width:auto;
	}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; 
	width: 100%; 
	z-index: 500; 
	position: absolute; 
	top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; 
	font-size: 50px; 
	width: 16px; 
	height: 16px; 
    display: inline-block; 
	color: #ddd; 
	cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { 
	color: #D69746;
	}
.cycle-pager > * { 
	cursor: pointer;
	}

/* caption */
.cycle-caption { 
	position: absolute; 
	color: white; 
	bottom: 15px; 
	right: 15px; 
	z-index: 700; 
	}

/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}


/* prev / next links */
.cycle-prev, .cycle-next { 
	position: absolute; 
	top: 0; 
	width: 30%; 
	opacity: 0; 
	filter: alpha(opacity=0); 
	z-index: 800; 
	height: 100%; 
	cursor: pointer; 
	}
.cycle-prev { 
	left: 0;  
	background: url(https://malsup.github.com/images/left.png) 50% 50% no-repeat;
	}
.cycle-next { 
	right: 0; 
	background: url(https://malsup.github.com/images/right.png) 50% 50% no-repeat;
	}
.cycle-prev:hover, .cycle-next:hover { 
	opacity: .7; 
	filter: alpha(opacity=70) 
	}
.disabled { 
	opacity: .5; 
	filter:alpha(opacity=50); 
	}

/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; 
	color: white; 
	background: black; 
	padding: 10px;
    z-index: 500; 
	position: absolute; 
	top: 10px; 
	right: 10px;
    border-radius: 10px;
    opacity: .5; 
	filter: alpha(opacity=50);
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { 
	width: 300px;
	}
    .cycle-overlay { 
	padding: 4px 
	}
	.cycle-slideshow img {
	max-height: 190px;
	}
    .cycle-caption { 
	bottom: 4px; right: 4px 
	}
}
/* end of Cycle2 set of styles */

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/



/* 2020, and at last we can move forward from Bootstrap.  Flexbox looks delightfully straightforward.*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: #eae5e1;
  min-height:150px;
}
.flex-container > div {
  background-color: #eae5e1;
  width: 280px;
  margin: 0px 10px 0px 10px;
}
.flex-container a {
	font:inherit;
	color:inherit;
	text-decoration:none;
}
.flex-container a hover{
	color:blue;
}

/* and some antisocial network styles */
.social{
float:left;
    border:solid 1px ##eae5e1;
    overflow: hidden;
}
.fb{
	float:left;
    width:auto;
    height:22px;
	margin:0px, 5px;
    overflow:hidden;
    border-left:solid 1px ##eae5e1;
}
.twit{
float:left;
    width:auto;
    height:22px;
	margin:0px, 5px;
    overflow:hidden;
    border-left:solid 1px ##eae5e1;
}
.share{ 
	float:left;
    width:auto;
    height:22px;
	margin:0px, 5px;
    overflow:hidden;
    border-left:solid 1px ##eae5e1;
}  
.gplus{ 
	float:left;
    width:auto;
    height:22px;
	margin:0px, 5px;
    overflow:hidden;
    border-left:solid 1px ##eae5e1;
}      
@media print
	{
		.rightbox {
			max-width: 120px;
		}
	}
/*zoom div code*/

.thumb {
	float:left; /* must be floated for same cross browser position of larger image */
	position:relative;
	margin:3px;
}
.thumb img { 
	border:1px solid #000;
	vertical-align:bottom;
}
.thumb:hover {
	border:0; /* IE6 needs this to show large image */
	z-index:1;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover span { 
	visibility:visible;
	position:fixed;
	left: 40%;
	margin-left: -50px;
	top: 50%;
	margin-top: -50px;
	/*top:37px; left:-260px; */
}
/*AJAX comes with its own little set of styles, provided by phppot.*/
#image-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#image-list li { 
    margin: 10px 20px 10px 0px; 
    float: left;
}
#image-list li img{
    width: 145px;
    height: 90px;
}

#image-container{
    margin-bottom: 14px;
    overflow: auto;
}

#txtresponse 
{
    padding: 10px 20px;
    border-radius: 3px;
	 font-size: 0.9em;
   /* margin-bottom: 10px; */
	background: #00ff11;
    width: 100%;
    display: none;
    border :#E0E0E0 1px solid;
    color:#212121;
    margin-right: 25px;
    box-sizing: border-box;
}
 
input#submit {
    padding: 10px 30px !important;
    background: #00ff11 !important;
    border: #E0E0E0 1px solid;
    color: #212121 !important;
    font-size: 0.9em;
    width: 100%;
    border-radius: 3px;
    cursor:pointer;
  /*  clear:both; */
}

.ui-sortable-placeholder {
    border :#E0E0E0 1px solid !important;
}
/*need this little massive fix to make Bootstrap realise paper is wider than 670px (industry default therefore 'sm' in bootstrap terms) and stop bootstrap outputting spurious URLs on Print.  It also tries to circumvent Bootstrap using the sm layout for printing. (Might not be necessary after introducing the width statement.) */

 @media print {
	 .printEl { 
        width: 1280px !important;
        height: 2700px;
    }
      a[href]:after {
        content: "" !important;
      }
	 .screen-hidden {
    display: none;
	} 
	   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
	font-family:georgia, times, serif;
	font-size: 9pt;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
  .visible-xs {
    display: none !important;
  }
  .hidden-xs {
    display: block !important;
  }
  table.hidden-xs {
    display: table;
  }
  tr.hidden-xs {
    display: table-row !important;
  }
  th.hidden-xs,
  td.hidden-xs {
    display: table-cell !important;
  }
  .hidden-xs.hidden-print {
    display: none !important;
  }
  .hidden-sm {
    display: none !important;
  }
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
    }