/* farsap.css CSS Document for use in the farsap web site */

/* any entry in the list below will be overwritten by a later entry affecting the same group */

/* Standard colour scheme, loaded by default */

body {background-color: #EEFFEE; }

h1 {color: navy; }
h2 {color: navy; }
h3 {color: navy; }
h4 {color: navy; }
h5 {color: navy; }
h6 {color: navy; }

p {color: black; }

th {color: black; }
td {color: black; }

li {color: black; }

a:link {color: red; }
a:visited {color: orangered; }
a:hover {color: navy; }
a:active {color: darkslategray; }



/* entries having overall effect */
/* defines overall print size for the site together with the page background colour */
@media screen {body {font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif;  font-size: 100%; max-width: 1300px; }}
@media print {body {font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif; }}
/* left hand border colour is #87CEFA, set in pagebackground.jpg */

/*
@media screen {#navigation {position: fixed; top: 105px; left: 0px; width: 140px; text-align: center; }}
@media print {#navigation {display: none; }}
/* color #99BBDD is also nice */
/* setting the z-index to -1 ensures that the menu will appear (rendered) over the main div on tablets */
/* it also seems to speed up the menu appearing over page navigation buttons on the page */
/* to make the main div resize to the user's browser window, remove the width="695" setting and replace with padding-right:15px; */
@media screen {#main {padding: 0px 10px 3px; text-align: justify; z-index:-1; }}
@media print {#main {text-align: justify; }}

/* set global print size and characteristics of headers, paragraphs, and table elements */
/* @media directives allow different settings on printed matter to that on the display */
@media print {h1 {font-size: xx-large; font-weight: bold; padding-bottom: 10px;  }}
@media print {h2 {font-size: x-large; font-weight: bold; padding-bottom: 5px; }}
@media print {h3 {font-size: large; font-weight: bold; padding-bottom: 5px; }}
@media print {h4 {font-size: medium; font-weight: bold; padding-bottom: 5px; }}
@media print {h5 {font-size: small; font-weight: bold; padding-bottom: 5px; }}
@media print {h6 {font-size: x-small; font-weight: bold; padding-bottom: 5px; }}
@media print {p {font-size: small; }}
@media print {th {font-size: small; font-weight:bold; padding: 5px; vertical-align: text-top; text-align:left; border-style:solid; border-width:thin; }}
@media print {td {font-size: small; padding: 5px; vertical-align:top; text-align:left; border-style:solid; border-width:thin; }}


/* Navigation settings */
@media screen {#linksband {text-align: left; background-color: #87CEFA; }}
@media print {#linksband {display: none; }}



/* visual assistance on links */
a:hover {cursor: pointer; background-color: yellow;}
button:hover {cursor: pointer; background-color: yellow;}


#reveal {opacity: 0; }
#reveal:hover {opacity: 1; }

/* see https://www.w3schools.com/howto/howto_css_display_element_hover.asp for explanation */
/* also https://www.w3schools.com/css/css_combinators.asp */
.hide {display: none; }
.hidden:hover + .hide {display: inline; color:red; }


/* top level navigation */ /* these colours do not change when the user selects a colour scheme */
.navigation {list-style-type: none; background-color: #87CEFA; margin:0; padding:0; overflow:hidden; }
.navigation dt {float: left; }
.navigation dt a, .dropbutton {display: inline-block; color: black; text-align: center; font-weight: bold; padding: 2px 6px 4px; text-decoration: none; }
.navigation a:hover, .dropdown:hover .dropbutton {background-color: #EEFFFF; cursor: pointer; }
.navigation dt .dropdown {display: inline-block; text-decoration: none; }
.navigation .dropdown-content {display:none; position: absolute; background-color: #87CEFA; min-width:160px; z-index:1; }
.navigation .dropdown-content a {color: black; display: block; text-align: left; }
.navigation .dropdown-content a:hover {background-colour: #87CEFA; }
.navigation .dropdown:hover .dropdown-content {display: block; }
.navigation p {margin-top: 0px; margin-bottom: 5px; padding-left: 5px; }

/* styles for breadcrumb trail navigation */ /* these colours do not change when the user selects a colour scheme */
.breadcrumb {color: black; background-color: #87CEFA; font-weight: bold; padding: 6px; text-decoration: none; }
.breadcrumb a:hover {background-color: #EEFFFF; }


/* styles for use in iframes for Vimeo see https://www.benmarshall.me/responsive-iframes/ for explanation and code generator */
/* 1920 x 1080 pixels video */
.iframeVimeo16x9 {overflow: hidden; padding-top: 56.25%; position: relative; }
.iframeVimeo16x9 iframe {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
/* 720 x 400 pixels video */
.iframeVimeo18x12 {overflow: hidden; padding-top: 66.67%; position: relative; }
.iframeVimeo18x12 iframe {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
/* 1440 x 1080 pixels */
.iframeVimeo75 {overflow: hidden; padding-top: 75%; position: relative; }
.iframeVimeo75 iframe {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
/* 720 x 576 pixels */
.iframeVimeo80 {overflow: hidden; padding-top: 80%; position: relative; }
.iframeVimeo80 iframe {border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }


/* styles for use in class declarations */
.container {position: relative; }
.covid {font-weight: bold; color: white; background-color: dimgray; padding: 10px; }
.covidCentre {font-weight: bold; color: white; background-color: dimgray; padding: 10px; text-align: center; }
.floatedleft {float: left; padding-right: 15px; }
.floatedright {float: right; padding-left: 15px; }
.nobullet {list-style-type: none; }
/*.rotate270leftedge {min-width: 100px; min-height: 300px; position: relative; left: 3px; top: 300px; transform: rotate(270deg); transform-origin: left top; margin-left: -10px; margin-right: -210px; float: left; } - this worked but resizing text larger wrecks the effect */
/*.scaleDown {object-fit: scale-down; }*/
.styleBacking {background-color: lightgray; }
.styleBlack {color: black; }
.styleBlue {color: blue; }
.styleBold {font-weight: bold; }
.styleBoldUnderline {font-weight: bold; text-decoration: underline; }
.styleCentre {text-align: center; }
.styleEmoji {font-size: 150%; }
.styleFooter {text-align: center; color: navy; }
/* button was red on silver */
.styleFooterButton {font-weight:bold; color:darkblue; background-color:lightgray; }
.styleGazetteTop {font-size: 150%; font-weight:bold; color:blue; background-color:silver; }
.styleGazetteRef {width: 70px; text-align: center; font-weight:bold; color:blue; background-color:silver;  }
.styleGazetteName {font-weight:bold; color:blue; background-color:silver;}
.styleIndent {text-indent: 30px; } /* RailRef.php */
.styleJoint {color: blue; } /* RailRef lists */
.styleLC {color: slategray; font-style: italic; }	/* for level crossings etc in RailRef */
.styleLeft {text-align: left; }
.stylePadded {padding: 10px; }
.stylePaddedLeft {padding-left: 15px; }
.stylePaddedRight {padding-right: 15px; }
.stylePaddedRight8 {padding-right: 8px; }
.styleRed {color: red; }
.styleRight {text-align: right; }
.styleSend {font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif; font-size:medium; font-weight:bold; color:black; background-color:#99FF00; width:180px; }
.styleSmallDate {font-size: 0.6em; }


/* table borders banned in video credits */
#videocredits table td {border-style: none; }
/* #videocredits td {font-size: medium; color: black; padding: 5px; vertical-align:top; border-style:none; } */


/* entries for borders */
.styleBorderBlack {border: 2px solid black; }
.styleBorderRidge {border: 5px ridge black; }
.styleBorderHidden {border-style: hidden; }
.styleDashed {border-style: dashed;}
.styleDonateGiftAid {padding: 5px; border-style:groove; border-color:red; border-width: 5px;}
.styleDotted {border-style: dotted;}
.styleThick {border-style: solid; border-width: 5px;}

/* entries for the Meetings & News pages */
.styleNewsBox1 {border-radius: 25px; width: 268px; border: 5px ridge blue; padding: 10px; margin:10px; }
.styleNewsBox2 {border-radius: 25px; width: 268px; border: 5px solid green; padding: 10px; margin:10px; }
.styleNewsBox3 {border-radius: 25px; width: 268px; border: 5px dashed green; padding: 10px; margin:10px; }
.styleNewsBox4 {border-radius: 25px; width: 268px; border: 5px dashed blue; padding: 10px; margin:10px; }
.styleNewsBox5 {border-radius: 25px; width: 268px; border: 5px solid gray; padding: 10px; margin:10px; }
.styleNewsBox6 {border-radius: 25px; width: 268px; border: 5px solid red; padding: 10px; margin:10px; }
.styleNewsBox7 {border-radius: 25px; width: 268px; border: 5px ridge blue; padding: 10px 10px 10px 0px; margin:10px; text-align: left; }
.styleNewsBox8 {border-radius: 25px; width: 268px; border: 5px solid gold; padding: 10px; margin:10px; }
.styleNewsBox12 {border-radius: 15px; border: 5px solid green; padding: 10px; margin:5px; }
.styleNewsBox16 {border-radius: 15px; border: 5px solid red; padding: 10px; margin:5px; }
.styleNewsBox18 {border-radius: 15px; border: 5px solid gold; padding: 10px; margin:10px; }
.styleNewsBox19 {border-radius: 15px; border: 5px solid black; padding: 10px; margin:10px; }

/* our own meetings */
.styleVacancy1 {border-radius: 25px; width: 355px; border: 5px ridge gold; padding: 10px; margin:20px; }
/* Copy deadlines and special importance */
.styleVacancy2 {border-radius: 25px; width: 355px; border: 5px ridge red; padding: 10px; margin:20px; }
/* our visits */
.styleVacancy3 {border-radius: 25px; width: 355px; border: 5px ridge blue; padding: 10px; margin:20px; }
/* other organisations events */
.styleVacancy4 {border-radius: 25px; width: 355px; border: 5px ridge green; padding: 10px; margin:20px; }

.styleMenuBox1 {border-radius: 25px; width: 205px; border: 5px ridge blue; padding: 10px; margin:10px; }

/* entry for scroll up button */
.styleScrollUp {position: fixed; bottom: 10px; right: 10px; max-width: 35px; max-height: 50px; width: 100%; height: 100%; padding: .5px .5px 4px .5px; border-radius: 8px; justify-content: center; background: slategray; font-size: 2.25rem; font-weight: 800; text-decoration: none; cursor: pointer; vertical-align: middle; }
 
/* entries for images */
.imageCircle {border-radius: 50%; }
.imageFaded3 {opacity: 0.3; }
/* reduce image size for small screen widths */
@media screen and (max-width: 1250px) {.slides img {max-width: 75%; height: auto; padding-right: 15px; }}
@media screen and (max-width: 1100px) {.slides img {max-width: 60%; height: auto; padding-right: 15px; }}
@media screen and (max-width: 950px) {.slides img {max-width: 45%; height: auto; padding-right: 10px; }}
@media screen and (max-width: 800px) {.slides img {max-width: 30%; height: auto; padding-right: 10px; }}
@media screen and (max-width: 650px) {.slides img {max-width: 20%; height: auto; padding-right: 8px; }}
@media screen and (max-width: 500px) {.slides img {max-width: 15%; height: auto; padding-right: 8px; }}
@media screen and (max-width: 650px) {img {max-width: 75%; height: auto; }}
@media screen and (max-width: 500px) {img {max-width: 50%; height: auto; }}


/* entries for Signal Fact boxes */
/* suppress display on narrow displays */
@media screen and (max-width: 650px) {.styleAspects {display: none; }}
@media screen and (min-width: 651px) {.styleAspects {text-align: left; border: 5px double red; padding: 5px 15px 10px 15px; max-width:200px; }};


/* entries for column settings */
/* allows a single list to be displayed over two automatically balanced columns on a wide display but as one column on a narrow display */
@media screen and (max-width: 750px) {.columnstwo { column-count:1; column-width: 100%; }}
@media screen and (min-width: 751px) {.columnstwo { column-count:2; column-gap:20px; column-rule:5px outset #ffffff; }}
@media screen and (max-width: 500px) {.columnsthree { column-count:1; column-width: 100%; }}
@media screen and (min-width: 501px) {.columnsthree { column-count:2; column-gap:20px; column-rule:5px outset #ffffff; }}
@media screen and (min-width: 801px) {.columnsthree { column-count:3; column-gap:20px; column-rule:5px outset #ffffff; }}
@media screen and (max-width: 400px) {.columnsfour { column-count:1; column-width: 100%; }}
@media screen and (min-width: 401px) {.columnsfour { column-count:2; column-gap:20px; column-rule:5px outset #ffffff; }}
@media screen and (min-width: 601px) {.columnsfour { column-count:3; column-gap:20px; column-rule:5px outset #ffffff; }}
@media screen and (min-width: 801px) {.columnsfour { column-count:4; column-gap:20px; column-rule:5px outset #ffffff; }}
.columnstwo a {line-height: 1.5; }
.columnsthree a {line-height: 1.5; }
.columnsfour a {line-height: 1.5; }
@media screen and (max-width: 600px) {.columnsmenu { column-count:1; column-gap:5px; column-rule:2px outset #ffffff; }}
@media screen and (min-width: 601px) {.columnsmenu { column-count:2; column-gap:5px; column-rule:2px outset #ffffff; }}
@media screen and (min-width: 801px) {.columnsmenu { column-count:3; column-gap:5px; column-rule:2px outset #ffffff; }}
/*@media screen and (min-width: 1001px) {.columnsmenu { column-count:4; column-gap:5px; column-rule:2px outset #ffffff; }}*/


/* entries for thumbnail control on gallery pages */
.thumb-imgbox {  float: left;  text-align: center;  font-size: 0.75em;  width: 120px;  border: none;  margin: 1px;  padding: 1px; }


/*
 tooltips must be in the CSS file or it doesn't work
 can get multiple tooltexts by declaring different text each time the facility is used
 alternatively have a series of CSS files that can be used
 see https://www.w3schools.com/css/css_tooltip.asp for how it should work
 and how to manipulate the position and style of the tooltip text.
 There are some good scripts at Dynamic Drive as well.

 Options to try for tooltips:
  position: fixed;
  display: flex;	display: block;
  font-size: 2.5em;
  font-weight: 700;
  box-shadow: 0 8px 10px rgba(0,0,0,.1);
  
Test sample lines for tooltip in a fixed position when mouse hovers over 
<div class="tooltip">hover 1 here <span class="tooltiptext">Tooltip text</span></div><br><br>
<div class="tooltip">hover 2 here <span class="tooltiptext">Tooltip more text Tooltip more text Tooltip more text</span></div> 
*/  
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}



/* entries enabling tabular information to be flexed into multiple columnns using the .columns style above */
/* need to set an appropriate cell width if columns need to be neatly adjusted, otherwise they are dynamic proportional widths */
/* method from http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/ */
.columnstable {display: table; width: 100%; }
.columncell {display: table-cell; }
.columncell-150 {display: table-cell; width: 150px; }
.columncell-175 {display: table-cell; width: 175px; }


/* list styles */
ol.n {list-style-type: none;}
ul.n {list-style-type: none;}
ol.u {list-style-type: upper-alpha;}



/* suppress parts of printed forms that are not needed such as on-screen instructions */
@media print {#notprinted {display: none; }}


/* style for top heading */
.flex-centre {display: flex; justify-content: center; align-items: center;  color: navy; padding-top: 5px; border: 3px solid navy; background-color: #dedede; }


/*Flexible Layout style settings - these need to go after the other declarations */
.flex-container {display: flex; flex-wrap: wrap; }

.flex-item-left {padding-right: 5px; flex: 49%; }
.flex-item-right {padding-left: 5px; flex: 49%; }
@media screen (max-width: 600px) {.flex-item-left, .flex-item-right {flex: 100%; }}
@media print {.flex-item-left, .flex-item-right {flex: 100%; }}