/* 
** -----------------------------------------------------------------------------
** Filename:    railfuture-tiki-like.css
**
** Title:       Cascading Style Sheet for the 'tiki-like' pages on the Railfuture main,
**              Scotland and Wales websites. These should be in complete alignment.
**
** Description: This CSS is used with pages that add content within the 'tiki-frame'.
**              It only contains CSS for that additional content, not the tiki-frame,
**              which obviously makes use of the main CSS file(s).
**
**              This CSS should not be confused with the 'non-tiki' CSS file, which is
**              used on pages that do not use the tiki-frame, but will still use this
**              CSS file as its basis, but then override certain styles.
**
**              The tiki-like and non-tiki CSS files are held in the '/css/' directory.
**
**              Have experienced quite a few issues with CSS styles taking effect. This
**              may be an incompatibility with Tiki or an IE bug.
**
**              Do NOT use '//' comments in a CSS file - they are not supported.
**              Using '#' can hide the next line, so it should be avoided as well.
**              If a CSS definition appears not to work look for bad comments!
**
**              Rules that appear later in this file override earlier rules if both have
**              the same specificity. This file should be the last ccs file used.
**
** Author:      Jerry Alderson
**
** Copyright:   Billing Specialists Ltd. 2010-2023.
**
** Create Date: 12th September 2012.
**
** Last Change: 24th November 2023.
** -----------------------------------------------------------------------------
*/

/* Special Railfuture styles - "my-email" used to assemble email address within the browser */

my-email::after {
    content: attr(data-domain);
}

my-email::before {
    content: attr(data-user) "\0040";
}

/* Special Railfuture styles - highlighting message */

.highlighted-text-box {
    border-color: #ff3366;
    border-size: 1px; /* this allows you to adjust the thickness */
    border-style: solid;
    padding: 15px;
}

/* Special Railfuture styles - separators on the page */

.dashed-line {
    border: 0 none;
    border-top: 1px dashed green;
    background: none;
    height:0;
}

/* Special Railfuture styles - photo boxes (used on Scotland site in particular) */

.photobox {
}

h4.photobox {
    color: red;
}

.textwrapleft {
    /* Text on left and image on its right */
    clear: right;
    float: right;
    padding-left: 5px;
}

.textwrapright {
    /* Image on left and text on its right */
    clear: left;
    float: left;
    padding-right: 5px;
}

p.noblanks {
    /* Used to fill a text box wth no margin around it */
    /* Top margin / right and left margins / bottom margin */
    margin: 0 0 0;
    padding: 0;
}

p.noblankbefore {
    /* Used on first paragraph with 'photobox' if no h4 photobox class to avoid an unwanted blank line */
    /* Top margin / right and left margins / bottom margin */
    margin: 0 0 15px;
    padding: 0;
}

p.noblankafter {
    /* Used on first paragraph with 'photobox' if no h4 photobox class to avoid an unwanted blank line */
    margin: 15px 0 0;
    padding: 0;
}

ul.nogap /* Avoids a gap before the bullet point list begins as part of a news story */ {
    margin-top: -20px;
}

ul.smallgap /* Avoids a big gap when nesting bullet points */ {
    margin-top: 1px;
}

.disablewrap {
    clear: both;
}

/* Highlighted links */

a.boldlink {
    font-weight: bold;
}

/* Table elements (used for the shopping basket) */

.price {
    /* Note: a defect means the right align does not work - use style="text-align:right" in the cell */
    text-align: right;
}

.price-sum {
    text-align: right;
    font-weight: bold;
}

/* Wrappers for Form Input */

#formboxcontainer {
    border: 3px solid;
    padding: 5px;
    border-color: skyblue;
}

#formboxtitle {
    position: absolute;        /* Needed to allow line to continue after text ends - using absolute avoids intendation below it */
    margin: -22px 0 0 15px;    /* Space outside box: Top is -22px to go through the line above it; 15px from left of box */
    padding: 0 5px;            /* Space inside box before text begins */
    background: #fff;
    background-color: #FFFFFF; /* White to blank out the blue line underneath the boc title */
    text-transform: uppercase;
    font-size: 15;
    font-weight: bold;
    font-style: italic;
    line-height: 20px;          /* Avoid large areas of white above and below the text as it can obscure other fields */
    height: 15px;               /* Needs to be 5 pixels more than 'line-height' to make it work */
    color: royalblue;
}

#formboxfooter {
    float: right;
    padding: 0 5px;
    margin: -20px 0 0 30px;
    background: #fff;
}

/* Table formatting using CSS rather than deprecated HTML 'table' tags - Basic/bare table (b) */

.bTable {
    display: table;
}

.bTableRow {
    display: table-row;
}

.bTableHeading {
    display: table-header-group;
}

.bTableBody {
    display: table-row-group;
}

.bTableFoot {
    display: table-footer-group;
}

.bTableCell, .bTableHead {
    display: table-cell;
}

/* Table formatting using CSS rather than deprecated HTML 'table' tags - Formatted table (f) */

.fTable {
    display: table;
}

.fTableTitle {
    display: table-caption;
    text-align: center;
    font-weight: bold;
    /*font-size: larger;*/
}

.fTableBody {
    display: table-row;
}

.fTableHeading {
    display: table-row;
    background-color: lightblue;
    font-weight: bold;
}

.fTableRow {
    display: table-row;
    padding: 3px 10px;
}

.fTableRow:nth-child(odd) {
    background-color: #def;
}

.fTableRow:nth-child(even) {
    background-color: #fff;
}

.fTableRow:hover {
    background-color:#f2e8da;
}

.fTableCell {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}

.fTableCellThickLeft {
    border: 1px solid #999999;
    border-width: 1px 1px 1px 3px;
    display: table-cell;
    padding: 3px 10px;
}

.fTableFoot {
    display: table-footer;
    text-align: center;
}

.fTableNote {
    display: table-footer;
    text-align: center;
}

/*
-- The following is for future use. Could not get the positioning to work on IE.

<div class="t-row" data-hover="hello 60">

.t-row:hover:after {
                content: attr(data-hover);
}

.t-cell:hover:after {
                display:block;
                content: attr(data-hover);
                position: relative;
  cursor:pointer;
  background-color: lightblue;
  z-index: 1;
  opacity: 1;
}
*/

/* Form Input (Table Based) */

td.inputlabel {
}

td.inputfield {
}

td.inputrule {
}

input.readonlyinput {
    background-color: powderblue
    font-weight: bold;
}

/* Generic styles */

.buy-now {
    text-align: center;
}

.centred-text {
    text-align: center;
}

.classic-title {
    font-family: Times New Roman, Times, serif;
    font-style: italic;
}

.error-message {
    color: red;
}

.warning-message {
    color: red;
}

.info {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.item-title {
    color: red;
}

.normal {
}

.normal-text {
    /* Used when there is document style text (i.e. justified) */
    text-align: justify;
}

.popup {
    font-family: Verdana;
    font-size: 12px;
}

.popup-text {
    font-family: Verdana;
    font-size: 12px;
    text-align: justify;
}

.railfuture {
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

.railfuture.word-future {
    color: #999999;
}

.section-splitter {
    background: black;
    color: white;
}

.small-print {
  font-size: 0.85em;
}

.campaign-banner {
    border: none;
    margin-top: -20px;
    width: 100%;
}

/* Ox-Cam Campaign Styles - The following operate across all divisions */

.arc {
    color: #FF9933;
}

.cambridge {
    color: #0099DD;
    font-weight: bold;
}

.oxford {
    color: #000099;
    font-weight: bold;
}

/* Specific Advertising */

.railwayherald {
    background-color: #880000;  /* Red (Dark) */
    font-family: verdana;
    font-size: 0.9em;
    margin: 5px 5px;
    text-align: center;
}

/* Table padding - used for blank lines */

.narrow {
    height: 3px;
}

/* Modifiers - these merely modify the current style - note: must have xxxx-yyyy after xxxx */

.large {
    font-size: 200%;
}

.quite-large {
    font-size: 150%;
}
.small {
    font-size: 80%;
}

.very-small {
    font-size: 40%;
}

.extra-large {
    font-size: 300%;
}

.red {
    color: #D2222D;
}

.blue {
    color: #0000FF;
}

.green {
    color: #238823;
}

/* Modifiers - Bi-lingual Style differences for Railfuture Wales web-site */

.en {
    color: black;
}

.cy {
    color: darkblue;
}

/* Text to the left of the image - Used (fore example) on Railfuture Scotland campaigns page to show text around a map */

.floating-object-on-left {
    float:left;
    margin:5px;
}

/* Images */

.floatright { 
    float: right;
    margin: 0 0 10px 10px;
    border: 1px solid #666;
    padding: 2px;
}

/* Fixes to overcome bugs in browsers */

marquee {
    /* Bug in some versions of Chrome cause the page to go extremely wide to fit all of the marquee items (not what is wanted!) */

    width: 620;
}

/* End of file */