/* 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 screen {#main {padding: 0px 10px 3px; text-align: justify; z-index:-1; }}


/* 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; }


/* 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;}


/* 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 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 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%; }}