/*
2019-03-30 added .paper & .paperback 
2019-03-26 restyled content directory browse top links
2019-03-19 removed scroll-x from .notice 
*/
/* === Utilities === */
.text-center {
    text-align: center;
}
.margin-sm {
    margin: 8px;
}
.padding-md {
    padding: 16px;
}

/* === External Links === */
.foreign, .alien {
    display: inline-block;          /* makes wrapping clean and predictable */
    color: #3b2f00;
    background-color: #f9e6b3;

    font-size: 34px;
    line-height: 1.2;               /* avoids tall ghost fragments */
    padding: 6px 10px;              /* comfortable spacing */
    margin: 6px 8px;                /* smaller margin prevents wrap glitches */
    border-radius: 4px;

    white-space: normal;            /* ensures wrapping */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.foreign:hover, .alien:hover {
    background-color: #ffe8a0;
}

/* === External Links To our associate domains and our own web-family Separate styles may come soon === */
.web-associate, .web-family {
    color: #3b2f00;
    padding: 5px; margin: 12px;
    font-size: 34px; border-radius:3px;
    line-height: 60px;
    background-color: #7FFFD4;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.web-associate:hover, .web-family:hover {
    background-color: #00FFFF;
}

a.disabled {
    /* used in single-link view [classes] */
    pointer-events: none;
    color: gray;
    text-decoration: none;
    cursor: default;
}

a.text-feed {
    cursor: pointer; text-decoration: none; font-size:22px; padding:3px; border: 2px solid white;
    margin:10px;border:1px solid #eeeeff;border-radius:4px;background-color: white;
}
a.text-feed:hover {background-color: #ddffff; border-color: maroon;}
a.text-feed:hover span {background-color: maroon; color: white; font-style:italic;}

.big-green-ad {
    display: inline-block;
    padding: 20px 40px; background-color: #28a745; color: white;
    text-decoration: none; font-size: 1.8em; font-weight: bold; border-radius: 10px;
    margin: 20px 0; transition: background-color 0.3s ease;
}

.big-green-ad:hover {
    background-color: #218838;
}

a.big-gate-link {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1.3em;
    /* font-weight: bold;*/
    color: #003366;
    text-decoration: none;
    border: 2px solid #003366;
    border-radius: 5px;
    background-color: #f8f9fa;
    transition: all 0.3s ease-in-out;
}

a.big-gate-link:hover {
    background-color: #ddddff;
    text-decoration: none;
}

/*
Simple <audio> tag style
For metronome sound bank style – See biscuits-metronome.css
*/
.audio-container {
    background-color: #f4f0b1;
    color: black;
    padding: 10px;
    border: 2px solid #ccccaa;
    border-radius: 25px;
}

.audio-container a:hover {
    color: #551111;
}

.audio-container h1,
.audio-container h2,
.audio-container p,
.audio-container a {
    font-style: italic;
    padding: 3px;
    font-size: 16px;
    line-height: 22px;
    width: 98%;
    margin: auto;
}

audio {
    width: 95%;
    padding: 12px;
    display: block;
    margin: auto;
}

.bible {
    color: #903010;
    font-size: 25px; line-height: 32px;
    padding: 10px;
    margin: 8px;
}

.bible br {
    line-height: 35px;
}

.link-pair {
    white-space: nowrap; margin-right: 0.5em;
}

/* old biscuits-buttons.php */
a.process-starter {
    background-color: #4a9624;
    color: #eeeeee;
    font-family: times-new-roman;
    font-size: 24px;
    line-height: 40px;
    /* margin: 20px; */
    padding: 5px;
    box-shadow: 5px 6px 7px;
    border: 1px solid orange;
    border-radius: 12px;
}

a.process-starter:hover {
    color: white;
    box-shadow: 5px 6px 7px orange;
    text-decoration: none;
    background-color: #a00000;
    cursor: pointer;
}

a.fix {
    border-top: 1px solid #96d1f8;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#4fa689), to(#65a9d7));
    background: -webkit-linear-gradient(top, #4fa689, #65a9d7);
    background: -moz-linear-gradient(top, #4fa689, #65a9d7);
    background: -ms-linear-gradient(top, #4fa689, #65a9d7);
    background: -o-linear-gradient(top, #4fa689, #65a9d7);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
}

a.fix:hover {
    border-top-color: #28597a;
    background: #28597a;
    color: #ccc;
}

a.fix:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

a.act {
    border-top: 1px solid #f7c197;
    background: #d6cd65;
    background: -webkit-gradient(linear, left top, left bottom, from(#784b1a), to(#d6cd65));
    background: -webkit-linear-gradient(top, #784b1a, #d6cd65);
    background: -moz-linear-gradient(top, #784b1a, #d6cd65);
    background: -ms-linear-gradient(top, #784b1a, #d6cd65);
    background: -o-linear-gradient(top, #784b1a, #d6cd65);
    padding: 5px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
}
a.act:hover {
    border-top-color: #ba884a;
    background: #ba884a;
    color: #ccc;
}
a.act:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

a.button {
    color: #001100;
    background-color: #d4f5ff;
    text-decoration: none; font: menu;
    display: inline-block; 
    white-space: pre;
    font-size: 22px; line-height: 40px; 
    font-weight: 600;
    border-radius: 9px;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
    margin-right: 5px;
}

a.button:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

a.button:hover {
    color: #0a0004;  
    background-color: #9fe9f2;
    cursor: pointer;
    text-decoration: none;
}

.folder-button {
    border-top: 1px solid #15260f;
    background: #6bd130;
    background: -webkit-gradient(linear, left top, left bottom, from(#479650), to(#6bd130));
    background: -webkit-linear-gradient(top, #479650, #6bd130);
    background: -moz-linear-gradient(top, #479650, #6bd130);
    background: -ms-linear-gradient(top, #479650, #6bd130);
    background: -o-linear-gradient(top, #479650, #6bd130);
    padding: 13px 26px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #0a1c06;
    font-size: 14px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    margin-top: 200px;
}

.folder-button:hover {
    border-top-color: #487870;
    background: #487870;
    color: #addeab;
}
.folder-button:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

.bi-button {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

.bi-button:hover {
    text-decoration: none;    
}

.green-button {
    background: #34db98;
    background-image: -webkit-linear-gradient(top, #34db98, #29b980);
    background-image: -moz-linear-gradient(top, #34db98, #29b980);
    background-image: -ms-linear-gradient(top, #34db98, #29b980);
    background-image: -o-linear-gradient(top, #34db98, #29b980);
    background-image: linear-gradient(bottom, #34db98, #29b980);
}

.green-button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cfdb0, #34db98);
    background-image: -moz-linear-gradient(top, #3cfdb0, #34db98);
    background-image: -ms-linear-gradient(top, #3cfdb0, #34db98);
    background-image: -o-linear-gradient(top, #3cfdb0, #34db98);
    background-image: linear-gradient(bottom, #3cfdb0, #34db98);
    text-decoration: none;
}

.orange-button {
    background: #db9834;
    background-image: -webkit-linear-gradient(top, #db9834, #b98029);
    background-image: -moz-linear-gradient(top, #db9834, #b98029);
    background-image: -ms-linear-gradient(top, #db9834, #b98029);
    background-image: -o-linear-gradient(top, #db9834, #b98029);
    background-image: linear-gradient(bottom, #db9834, #b98029);
}

.orange-button:hover {
    background: #b0fd3c;
    background-image: -webkit-linear-gradient(top, #fdb03c, #db9834);
    background-image: -moz-linear-gradient(top, #fdb03c, #db9834);
    background-image: -ms-linear-gradient(top, #fdb03c, #db9834);
    background-image: -o-linear-gradient(top, #fdb03c, #db9834);
    background-image: linear-gradient(bottom, #fdb03c, #db9834);
    text-decoration: none;
}

/* biscuits-fontface.css */
@font-face {
    font-family: 'lobster';
    src: url('../font-faces/lobster_1.4-webfont.woff2') format('woff2'),
        url('../font-faces/lobster_1.4-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.lobster {
    font-family: lobster;
}

body, input, select, textarea {
    color: #4a4a4a;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

.wrapproof {display: inline-block; white-space: nowrap;}
.error-highlight {
    background-color: #ffe6e6; /* Light red background */
    color: #d32f2f; /* Dark red text */
    padding: 2px 4px; /* Slight padding for readability */
    border-radius: 3px; /* Rounded corners */
}

body.restricted { 
    /* Pages restricted by IPA marked red border when viewed from development mode */
    border-top: 10px  maroon; border-left: 10px solid maroon;
    border-right: 10px solid maroon;
}

div.image-frame {
    display: inline;
    margin: 10px;
    border:2px solid #dddddd;
    border-radius: 4px;
    padding: 4px;
}

div.admin {
    border: 1px solid #ccccee;
    border-radius: 6px;
    padding: 5px;
    margin: 20px;
    background-color: white;
    /* box-shadow: 4px 4px 4px; */
}
/* General style for elements */
html,body {
    /*
    height:100%; font-family: geogia; font-size: 20px; line-height: 24px;
    */
}

.ajax, .ajax-load-area {
    color: black; background-color: #f6fefe;
    border-radius: 12px;
    padding: 30px;
}
.share {color: white; background-color: #947225;}
.top-bar {margin: 30px;} /* Top bar with username and search icon */
p {font-size: 22px;  line-height: 28px; margin:0; padding: 0;}
a {white-space: nowrap;}

a.sharelink {
    border: 1px solid #dddddd;
    border-radius: 4px;
    text-decoration: none;
}
a.sharelink:hover {background-color: #ffffff;font-style: normal;border-color: transparent;}

a.your-link {
    font-size: 30px; 
    border-radius: 8px;
    padding:20px; 
    border: 4px;
    margin: 20px;
    line-height:100px;
}

a.your-link-normal {
    color:white; background-color: #1694a4; 
    border-color: #06272b;
}

a.active { opacity: 0.6;}
a.admin-button {text-decoration: none; cursor: pointer; color:maroon;}
a span.alien-name {font-style: italic; color: maroon; font-size: 12px;}

a.mcc-link {
    /* music chord chart */
    line-height: 30px; font-size:20px; color: #222244;
    border:1px solid black; padding: 5px; margin: 11px; background-color: #ffffff;
}

a.abc-link {
    color: #000022;
    text-decoration: none;
    background-color: white;
    margin: 4px;
    position: relative; /* Needed for pseudo-element positioning */
}
a.abc-link:hover {
    background-color: white;
}
a.abc-link:hover::after {
    /* Messy position */
    content: "Click to view music sheet";
    position: absolute;
    bottom: 100%; /* Places it above the link */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f0f0f0;
    padding: 2px 5px;
    font-size: 12px;
    color: #000022;
    white-space: nowrap;
    z-index: 1;
}

h2 a,h2 a:visited {background-color: brown; color: white;} /* CK editor Italic H2 !? */
.monospace { font-family: courier;}
strong {color: #22460b; padding: 0; margin: 0; font-weight: bold;}

ol {max-width: 90%;}
ol.biglist { font-size: 20px; line-height: 34px; margin: 6px; color: maroon;}
ol.giantlist { font-size: 30px; line-height: 42px; margin: 10px; color: maroon;}

.loading {
    border: 2px solid brown;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
    line-height: 40px;
    color: maroon;
    font-style: italic;
    background-color: #eeffff;
    width: 90%;
    height: 100px;
    min-height: 200px;
    background-image: url("backgrounds/pink-hexagons.jpg"); 
    background-size: cover;
}

.php ,a.php {
    background-color: #9999ff;
    color: #111122;
    font-style: italic;
    font-size: 25px;
    line-height: 32px;
    padding: 3px; 
    border: 8px;
    border-color: #ffffff;
    border-radius: 8px;
}

div.pad {
    font-size: 25px; color: #800000; 
    line-height: 30px; margin: 20px; padding: 10px; 
}

div.pad a {
    background-color: white;
    padding: 4px;
    border: 1px solid black;
    border-radius: 6px;
    margin: 18px;
    font-size: 30px;
    font-style: italic;
    min-width: 45px;
    line-height: 50px;
}

div.metronome-pattern { color:#112211; background-color:#148997; }

.multiple-borders {
    -webkit-box-shadow:
        0px 0px 0px 2px rgba(0,0,0,0.6),
        0px 0px 0px 14px #fff,
        0px 0px 0px 18px rgba(0,0,0,0.2),
        6px 6px 8px 17px #555;

    -moz-box-shadow:
        0px 0px 0px 2px rgba(0,0,0,0.6),
        0px 0px 0px 14px #fff,
        0px 0px 0px 18px rgba(0,0,0,0.2),
        6px 6px 8px 17px #555;

    box-shadow:
        0px 0px 0px 2px rgba(0,0,0,0.6),
        0px 0px 0px 14px #fff,
        0px 0px 0px 18px rgba(0,0,0,0.2),
        6px 6px 8px 17px #555;
}

a.development {color: maroon; font-style: italic; background-color: #eeeeee; border:1px solid black; border-radius: 8px;margin: 3px; padding: 3px;}
a.search-engine {}
a.search-engine:hover {text-decoration: underline; cursor:pointer;}

a.search-help {background-color: white; border: 1px solid grey; border-radius: 3px; margin: 3px; padding: 4px;}
a.search-help:hover {text-decoration: none;}

a.video {background-color: #d6df8b;}

.content-path-container {
    /* box-shadow: 10px 10px 5px #888888;    */
    /* color: #3333ff;    */
    margin: 12px; font-size: 20px; line-height: 28px; font-family: monospace;
    padding-bottom: 10px;
}
a.content-path {
    text-decoration: none; /* background-color: #f6f6f6; */
    margin: 10px 0px 10px; /* font-size: 35px; */ color: #4dafe1; /* #0033cc; */   
    white-space: nowrap;
}
a.content-path:hover {
    font-weight: bold; 
    color: black;
    background-color: #eeffff;
}
div.study, div.school,div.homeschool {
    color: white; border-radius: 10px;  border: 1px solid black;
    background-image: url("backgrounds/gradient-grey.jpg"); background-size: cover;
    background-repeat:   no-repeat;background-position: center center;  
}

.paper, .paperback {
    padding: 20px; margin: 0px; 
    background-image: url("/css/core/backgrounds/paper.jpg"); background-size: cover;
    background-repeat:   no-repeat;
    /* background-position: center center;  */
    /* border-radius: 10px;  box-shadow: 1px 2px 2px; */
}

.ascii-playing-card {
    font-size: 300px; line-height: 400px;
    background-color: #ffffff;
}

.lined-paper {
    background-color: #fff;
    background-image:
        linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
        linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;        
}

.fixed-width{font-family: consolas, courier, monospace;}
.paperback ol .paperback h1, .paperback h2, .paperback h3, .paperback h4 ,.paper h1, .paper h2, .paper h3, .paper h4 {
    color: maroon; font-size: 30px;
}

.lyrics {
    font-family: helvetica bakerville; font-size: 40px; line-height: 60px; 
    color: orange; background-color: #552222;
    margin: 40px; padding: 50px;  border-radius: 5px;
    box-shadow: 3px 3px 3px;
}

.wood, .woodpanel  ,.wooden {
    padding: 20px; background-image: url("backgrounds/wood-panel.jpg"); background-size:     cover;
    background-repeat:   no-repeat;background-position: center center;  
}

.sql {
    border: 3px solid grey; margin: 20px; padding: 6px; border-radius: 5px;
    background-color: #eeeeee;    
    background-repeat: repeat;
    background-image: url("backgrounds/sql-background.png"); background-size: auto;
    width: auto;
}

.rounded {border-radius: 8px;}
.bordered {border: 2px solid #dddddd;}

.audioword { 
    margin: 30px; font-size: 25px; line-height: 30px; color: #800000; 
    background-color: yellow; cursor: pointer; box-shadow: rgba(0,0,0,.4) 0 6px 0;
}

.audioword:hover {background-color: #ffffdd; color: blue;}

button.link {
    border-top: 1px solid #96d1f8;
    background: #d5d9dd;
    background: -webkit-gradient(linear, left top, left bottom, from(#e6f3ff), to(#d5d9dd));
    background: -webkit-linear-gradient(top, #e6f3ff, #d5d9dd);
    background: -moz-linear-gradient(top, #e6f3ff, #d5d9dd);
    background: -ms-linear-gradient(top, #e6f3ff, #d5d9dd);
    background: -o-linear-gradient(top, #e6f3ff, #d5d9dd);
    padding: 12px 24px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #5555aa;
    font-size: 15px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
}

button.link:hover {border-top-color: #84ba9d; background: #84ba9d; color: #000000;}
button.link:active {border-top-color: #a9c1c7; background: #a9c1c7;}

.posttext {
    font-size: 15px; color: black; background-color: #eeeeee; margin-left: 40px; padding: 8px; border-radius: 7px;
}

hr {height: 2px;color: #557799;background-color: #557799;border: none; max-width: 60%; text-align: center;}

hr.pretty , hr.pencil { overflow: visible;
                        /* For IE */ 
                        height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px;
} 

hr.pretty:before, hr.pencil:before  {
    /* Not really supposed to work, but does */ 
    display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; 
    border-width: 0 0 1px 0; border-radius: 20px; 
}

.biglink {font-size: 40px; border: 1px #eee; background-color: #e0dde0;
          margin: 10px; padding: 5px; box-shadow:10px 10px 5px #e0e0e0;   
}

.rainbow-borders {position: relative; z-index: 1; padding: 30px; border: 5px solid #f00;
                  background: #ff9600; font-size: 30px; line-height: 40px;
}

.rainbow-borders:before {
    content: ""; position: absolute; z-index: -1;
    top: 5px; left: 5px; right: 5px;
    bottom: 5px; border: 5px solid #ddba11; background: #4aa929;
}

.rainbow-borders:after {
    content: ""; position: absolute; z-index: -1;
    top: 15px; left: 15px; right: 15px;
    bottom: 15px; border: 5px solid #00b4ff;
    /* background: #fff; */ 
}

.dictionary {display: inline-block; margin: 20px; padding: 10px; border: 2px solid #ffeeee; color: #008000; font-size: 15px;}

p.leon {
    background-color: #ffd2a7;
    width: 67%;
    border-radius: 15px;
    margin-left: 10%;
    padding: 4px;
}

p.copilot {
    padding: 4px;        
    margin-right: 30%;
    background-color: #eeeeee;
    border-radius: 5px;
    width: 67%;
}

/* Terminal Control Language */
.tcl {
    overflow-wrap: normal;
    width: 100%;
    color: #fafafa; background-color: #0c6d17; 
    font-size: 22px; line-height: 30px;
    padding: 5px; margin: 20px;
    border: 3px solid #558855;
    border-radius: 6px;
    /*
    -webkit-box-shadow: 10px 13px 50px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 13px 50px -17px rgba(0,0,0,0.75);
    */
    box-shadow: 10px 13px 50px -17px rgba(0,0,0,0.75);
}

/* TERMINAL CONTROL LANGUAGE - Command line style windows */
.tcl p {
    font-size: 20px;  line-height: 25px; 
    margin:0;
    padding: 0;
}

.tcl p.green {color: green; background-color: white;}
.tcl p.red {color: red; background-color: white;}
.tcl p.orange {color: orange; background-color: white;}

.tcl div {
    color: black; 
    /* background-color: #a7dfdd;*/
    width: 95%; 
    padding: 3px;
    box-shadow: 1px 1px 1px;
}

.tcl span:not([class]) {color: #ddbf22; font-weight: bold; margin: 2px; line-height: 35px; padding-left: 5px;}
.tcl table { color: maroon; background-color: grey;} 
.tcl strong {color:yellow; background-color: #010101; }

/* Tender Loving Care */
.tlc {background-color: #caf1fc;}
.tlc a {color: white;}
.tlc a:visited {color:yellow;}
.tlc a:hover {color:skyblue;}

.tip ,a.abcshow {
    background-color: #f3f3ff; color: #000000;
    text-decoration: none;
    font-family: 'Raleway',sans-serif; margin: 3px;
    border-radius: 6px;
}
a.tip:hover, a.abcshow:hover {
    background-color: #eeeaef; color: #800000;
}
.tip span,.tip p {color: black; font-style: italic;}

.gateway {background-color: #cef4ff; color: #000000;
          font-family: 'Raleway',sans-serif; margin: 3px;
          border-radius: 6px;
}

a.gateway:hover {color: #000000; text-decoration: none;}
.gateway span,.gateway p {color: black; font-style: italic;}
.force-newline { clear: both; float: left; display: block; position: relative; } 

.special p,.children p,.paragraph p ,.news p {
    /* font: 1.2em "Fira Sans", sans-serif; */
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 20px;
    line-height: 26px; 
    margin: 12px;
    margin-bottom: 20px;
}

#version {position: fixed; top: 0px !important; left: 0px !important;
          width: 200px; height: 200px; background-color: blue; opacity: 0.2;
}

/* Now put the white background colour back to the content and header. */
.panel {background-color: #ffffff;}
.link {cursor: pointer; text-decoration: none;}

a.pointer-link, a.link ,span[title] ,a[title] {cursor: pointer; text-decoration: none;}

a.i-hover {font-style: normal; background-color: #ffffff; border: 1px solid white;}
a.i-hover:hover {font-style: italic; background-color: #ffd700; border-color: green; text-decoration:none;}

.full-panel {
    /* These are switchable view sections in a page EG Chat/Nav panel/content  */
    margin-top: 6px;
    padding-bottom: 50px; 
    min-height: 50%;
}

.white-cliffs-background {background-image:url('images/dover_castle.jpg'); background-color:#800000; 	height: 290px;	border: 2px solid #800000;}
.slm-background { background-image:url('images/publisure-chart.gif'); background-color:#008000; 	height: 290px;	border: 2px solid #800000;}

.external-link {color:	#800000;background-color: #ededed;}

.hidden {display: none;}
.inconspicuous {
    /* For stuff to hide that has to be able to be selected - EG Click to copy */
    width: 1px;
    font-size: 0.5px;
    border: none;
    background-color: transparent;
    color: transparent;
    text-decoration: none;
}
.no-width { width:0;}

.odd {background-color: #d1e6f1; } /* biscuits-tables.css for tr odd */
.even {background-color: #e0f2ee;}

.section-head {
    /* For the CMS system - at the top of each Chapter */
    background-color: #fafafa;
    margin: 20px;
    padding: 50px;   
    border: 2px;
    border-color: gray;
    border-radius: 50px;
    box-shadow: 10px 10px 5px #e0e0e0;   
}

.colheads {background-color: #dadada;}
.span { min-height: 1px;}

.black-adder, .blackadder {
    width: 100% ;
    color: #ffda00;
    font-weight: bold;
    background-color: #555555;
    text-align: center;
    border: 1px solid #777777;
    border-bottom: 2px solid #444444;
    border-right: 2px solid #333333;
    border-radius: 1px;
    text-decoration: none;
}

.plain {
    color: black;
    background-color: transparent;
}

.green-elf , .elf {
    width: 100%;
    color: #228822;
    font-weight: bold;
    background-color: transparent;
    text-align: center;
}

.greenscreen, .green-screen ,.green-screen:focus {
    color: #ffff66; background-color: #0c8438;
    cursor:pointer;  border: 1px; border-color: #dddddd; margin: 4px; border-radius: 8px;
}

.introduction {
    font-family:’Helvetica Neue’,Arial,sans-serif;font-size:15px;
    font-weight:bold;
    margin:10px 0px 10px 20px; /* Tweak this to your liking (also add padding) */
    letter-spacing:3px;
}

h1 .elf {
    margin-top: 6px;
    background-color: #222255; 
    background: linear-gradient(45deg, #66ee66, #77ff77); 
    border-bottom: 5px solid #66ee66;
    border-right: 2px solid #22dd22;
    border-left: 1px solid #22dd22;
    border-top: 3px solid #66ee66;
}

h1 .elf, h2 .elf {
    text-decoration: none;
}

.blue-stream ,.blue-note {
    font-family: "Open Sans",Arial,Helvetica,sans-serif ;
    width: 100%;
    color: #ddddaa;
    font-weight: bold;
    /* background-color: #222255; */
    /* background: linear-gradient(45deg, #222255, #445588); */

    text-align: center;
    /*
    border-bottom: 5px solid #6666ee;
    border-right: 2px solid #2222dd;
    border-left: 1px solid #2222dd;
    border-top: 3px solid #6666ee;
    */

    margin-top: 10px;
}

.unit   {
    width: 70%;
    color: #338822;
    font-weight: bold;
    /* background-color: #6688aa; */
    background-color: transparent;

    text-align: center;
    /*
    border-bottom: 5px solid #6666ee;
    border-right: 2px solid #2222dd;
    border-left: 1px solid #2222dd;
    border-top: 3px solid #6666ee;
    */

    margin-top: 6px;
    font-size: 20px;
}

.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.receipt {
    /* We want fixed width characters for printout reports in columns */
    font-family: Courier, "Lucida Console", monospace 
}

.superscript {
    vertical-align:super;
    font-size: 10px;
}

.subscript {
    font-size: 10px;
}

.photo-text {
    margin: 20px;
    padding: 5px;
    font-size: 16px;
    color: #800000;
    background-color: transparent;
    height: 60px;
    border-bottom: 2px solid #800000;
}

.danger {
    background-color: #44aadc; 
    color: #f8f8f8;
    font-family: 'Raleway',sans-serif; 
    font-size: 23px;
    line-height: 26px;
    padding: 16px;
    border: 1px solid #33bbff;    
    font-weight: 500; 
    margin: 0 0 24px;
    box-shadow: 6px 10px 3px #004aac;
}

.blue-note { background-color: #ddeeff; color: #800000;}

a.search-content, a.match-any ,a.match-all {
    background-color: white; color: #900000; border: 1px solid #ffffff;
    font-size: 20px; line-height: 30px;
    border-radius: 3px; margin: 5px; padding: 3px;
    text-decoration: none;
}
a.search-content:hover, a.match-any:hover ,a.match-all:hover {
    color: maroon;
    border-color: grey;
}

.search-match ,a.search-match ,.notice.search-match {
    white-space: nowrap;  color: #000011; 
    padding: 3px; border-radius: 6px; line-height: 50px; margin: 14px;
}

.notice table td {color: maroon;}

.search-internet {
    color: maroon;background-color: white; margin: 2px; font-family: monospace;
}
.search-internet:hover {
    color:blue;text-decoration: none;font-weight: bold;
}

.green-label, a.green-label ,.notice.green-label {
    color: white; background-color: darkgreen; padding: 10px; border-radius: 6px;
    line-height: 50px;
    margin-right: 10px;
}
a.green-label:hover {color: yellow; font-weight: bold; background-color: #902222;}

a.label {color: white;background-color: black; border-radius: 6px;line-height: 50px; margin-right: 10px;padding: 10px; }
a.label:hover {color: yellow;}
a.label.greenback {background-color: darkgreen;}
a.label.greenback:hover {font-weight: bold; background-color: #902222;}

a.label.blueback {background-color: darkblue; padding: 10px;}
a.label.blueback:hover {font-weight: bold; background-color: #222290;}

.cheat, a.cheat {
    color: #ffffff;
    background-color: #ff0000;
    padding: 6px;
    margin: 4px 2px; 
    border: 1px solid #000000;
    border-radius: 2px;
}

.info, .success, .validation  {
    font-size: 24px; 
    line-height: 32px;
    color: #81341e;  font-weight: 400;
    background-color: #bbeff6;
    margin: 15px; padding: 5px;
    box-shadow: 2px 2px 2px #85b9ac;
    border-radius: 6px;
    width: auto;
    /* font-style: italic; */
}

.info p, .success p, .validation p {
    /* background-color: #2cdfe6; */
    padding: 2px;
    border-radius: 2px;
}

.info a, .success a, .warning a, .validation a {
    text-decoration: none;
}

a.twitter {
    color: white; background-color: #1DA1F2;
    margin: 4px; border-radius: 8px;
    font-size: 30px; line-height: 40px;
}

.shout {
    color: #aa0000;
    background-color: #fafaee; 
    font-size: 20px; line-height: 30px;
    margin: 4px;
}

.error, .form-error {
    color: #D8000C;
    font-weight: normal;
}

.warning {
    padding: 14px; margin: 20px;
    border: 2px solid #c00055; border-radius: 8px;
    background-color: #f4dcd7;
    color: #d0000c; font-weight: normal;
}

.english {font-size: 20px;	color:	#333300;}
.suggestion { color: green;}
.job-done { color: #339933; background-color: #ddeedd; }

.highlighted {background-color: #d0f2fb; color: #073f4f; font-size: 32px;}
.high-orange {color: #ff7f50;}
.high-chocolate {color: #d2691e;}
.high-crimson {color: #dc143c;}
.high-darkslategray {color: #2f4f4f;}
.high-darkgoldenrod {color: #b8860b;}

.back-gainsborough {background-color: #dcdcdc;}
.back-khaki {background-color: #f0e68c;}
.back-mediumaquamarine {background-color: #66cdaa;}
.back-moccasin {background-color: #ffe4b5;}
.back-peachpuff {background-color: #ffdab9;}
.back-powderblue {background-color: #b0e0e6;}
.back-rosybrown {background-color: #bc8f8f;}

.middle ,.centered ,.centred  {width: 700px; margin-left: auto; margin-right: auto;}

/* Specific element styles */

h1.fuzzy , h2.fuzzy {
    font-family:Georgia,serif;
    color:#222280;
    text-decoration: none;
    line-height:1em;
    margin:0 0 0 60px;
    text-shadow: -1px 1px 2px #952dff;
}

h1 strong{
    color:#A80C1E;
    display:block;
    font-weight:normal;
    letter-spacing:-3.5px;
    line-height:1em;
}

a.plain {
    /* Undecorated link to keep the style of it's containing element */
    text-decoration: none;
}

p.codex {color:green; font-size: 25px; background-color: #f0f0f0; padding:10px;}

/* ALERT NOTICES */
.notice ,.failed {
    color: maroon;
    font-size: 20px;
    line-height: 30px; 
    background-color: #ddeeee;
    font-family: 'Raleway',sans-serif; font-weight: 400;
    box-shadow: 1px 2px 2px 2px #ccc;
    margin: 20px;
}

.notice a {color: black;}
.notice a:hover {color: #663333;}
.notice span{color: brown;}

.notice h1,.notice h2,.notice h3 ,.notice h4 {
    font-size: 24px; 
    color: #21076e;
    background-color: #90bdd4;     
}
.notice h1 {border: 1px solid black; background-color: #b4d2e2;}

.book { background-color: #f7f4e2; padding: 20px;}
.book p {font-size: 22px; line-height: 28px;}
.book a {color: maroon;}

/* END OF ALERT NOTICES */

.fat {font-weight: bold;}
.half {width:50%; position:relative; left:25%; border: 3px #ddccee;}

/* BIG COLOURED DIVs */
.giant	{font-size: 36px; line-height: 50px;}
.bodytop-icon {font-size: 40px;} 

.numberCircle {
    border-radius: 50%; width: 28px; height: 10px;
    padding: 2px; border: 2px solid #666;
    text-align: center;
}

.tiny {font-size:1px;}
.great { font-size: 35px;}  
.large { font-size: 24px;}  
.big   { font-size: 20px;} 
.big, .great, .large ,.tiny{
    line-height: 1.5;       /* scales better */
}

.heavy {font-weight: 300;}

a.boxed {
    display: block;
    width: max-content;
    margin: 6px; padding: 5px;
    border: 2px solid #99aaaa;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;    
}
a.boxed:hover {
    background-color: #ddffff;
}

.group-area, a.group-area ,.notice.group-area{
    white-space: nowrap;  color: black; background-color: #69c074; 
    padding: 3px; border-radius: 6px; line-height: 50px; margin: 14px;
    cursor: pointer;    
}

a.group-area:hover{
    color: white;
    background-color: #2b6632;
    /* box-shadow: 3px 3px 3px; */
    text-decoration: none; /* underline; */
}

.marked-negative, a.marked-negative ,.notice.marked-negative, a.featured {
    white-space: nowrap;  color: black; background-color: #cfefef; 
    padding: 3px; border-radius: 6px; margin: 14px;
    cursor: pointer;
    border: 3px solid #4195be;
}

a.marked-negative ,a.featured {text-decoration: none; /* underline; */}
a.marked-negative:hover, a.featured:hover{
    color: white;
    background-color: #b28e1c; 
    /* box-shadow: 3px 3px 3px; */

}

.strike {} /* use <del> tag */
.little {font-size: 12px;}
.italic {font-style: italic;}
.white 	{color: white;}
.red 	{color: red;}
.pink {color: #f9b0b1;}
.maroon {color: #800000;}

.red-letter {background-color: #fb8f90; color: white; margin: 3px; border-radius: 6px;}
.redback {background-color: #ff0000;} 
.maroonback {background-color: #800000;} 
.whiteback {background-color: #ffffff;}
.blackback {background-color: #000000;}
.blueback {background-color: #0000ff;}
.skyblueback {background-color: skyblue;}
.orangeback {background-color: orange;}
.grayback,.greyback {background-color: #eeeeee;}

.clear {background: transparent; font-family: Georgia, serif;}
.green	{color: green;}
.greenback {background-color: green;}
.lightgreenback {background-color: lightgreen;}
.goldbacked ,.goldback {background-color: #dcb683;}
.lightgreen	{color: green;}
.darkgreen	{color: green;}
.gold {color:#ffb819;}
.gray,.grey {color: gray;}
.black	{color: black;}
.blue	{color: blue;}
.skyblue {color: skyblue;}
.aquamarine {color: aquamarine;}
.bisque {color: bisque;}
.gainsboro {color: gainsboro;}
.goldenrod {color: goldenrod;}
.floralwhite {color: floralwhite;}
.mistyrose {color: mistyrose;}
.powderblue {color: powderblue;}
.cornsilk {color: cornsilk;}
.khaki {color: khaki;}

.lightblue	{color: blue;}
.darkblue	{color: blue;}

.brown	{color: #8a4b08;}
.orange	{color: #ff8833;}
.yellow	{color: yellow;}
.gold {color: #daa520;}
.pink {color: #ffc0cb;}

.metalic { background-color: #2f4353; background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%);}
.efl-reading-text {color: brown; font-size: 18px; line-height:25px; margin-bottom: 10px;}

.framed {
    border: 2px solid #d8bfd8;   
    border-radius: 12px;
    box-shadow: 6px -4px #f5f5f5;
}

.marked {color:#ee00ee;text-decoration:underline;font-weight: bold;}
.underline {text-decoration:underline;}

.lookup, .dict-check {background-color: transparent; display: inline; font-weight: bold; color: inherit; cursor: pointer;}
.dictword {background-color: #eee8aa; padding: 10px; border-radius: 9px; box-shadow: 5px 5px 5px #000000;}

.whisper {display:inline;font-family: sans-serif;color:#444444;background-color: #dddddd;text-decoration:none;}
/* GREEN-ish  */
.gold {color:#006400;display:inline;text-decoration:none;font-weight: bold;}
.silver {color:#008000;display:inline;text-decoration:none;font-weight: bold;}
.bronze {color:#76ee00;display:inline;text-decoration:none;font-weight: bold;}

.answer {color: #800000; font-weight: bold;}
.explanation {
    margin: 20px;
    padding: 2px;
    background-color: #ffffff;
}

.blanked-out {
    display: inline-block;
    color: white;
}

.blanked-out.peep {
    color:black;
}

gap-container { 
    text-decoration: underline;
    border-bottom: 1px solid black;
}

.noselect {
    border: none;
}

.padded { padding: 20px;}

a.newstuff {
    margin: 40px; color: #f5f5f5; font-size: 22px; 
    line-height: 35px;
    /* min-height: 50px; */
    border: 3px solid gray; text-decoration: none; white-space: nowrap;
    border-radius: 7px;
    color: #ffffff;
    padding: 4px;
    box-shadow: 3px 3px 3px;
}
a.newstuff:hover {color: black;}

/* SMALL SCREENS */
@media screen and (max-width: 44em) {
    .newstuff {
        width: 95%; margin: 0;
    }
}
/* IMG STYLES */

.center-cropped {
    width: 200px;
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
}
.image-container {
    border: 1px gray;
    background-color: #eeeeff;
    margin: 5px;
}

.icon {height: 24px;}
.icon60 {
    opacity: 0.7;            
    font-size: 60px;
    line-height: 80px;
}
.icon60:hover {
    opacity: 1;
    text-decoration: none;
}

a.ascii-icon {font-size: 50px; margin: 2px; opacity: 0.6;}
a.ascii-icon:hover {opacity: 1;}

.image-wrapper { position: relative; height: 375px; } 
.bottom-image { position: absolute; bottom: 0; }

/* LISTS & NESTED LISTS */

.nested ul, .nested ol { 
    font-size: 20px;
    line-height: 2;
    /* general styles */
}

.nested ul li, .nested ol li {}
.nested ul li ul, .nested ol li ol { font-size: 16px; line-height: 1.6;}
.nested ul li ul li, .nested ol li ol li {}
.nested ul li ul li ul, .nested ol li ol li ol  { font-size: 12px; line-height: 1.2;}

ol.alpha li {list-style-type: lower-alpha;}
ol.upper-alpha li {list-style-type: upper-alpha;}
ol.numeric {list-style-type: decimal;}
ol.roman {list-style-type: upper-roman;}
ol.circle {list-style-type: circle;}

.horizontal {height:1.5em;clear:both;padding-top:.5em;width:80px;}
.horizontal li {margin:0; padding: 3px 7px 3px 7px; display:inline-block; text-align:center;}

/* N A V I B A R */
.navibar {float: left;height: 30px;margin-top: 3px;font: 12px Verdana;background:#cccccc;color:#000000;}  
.navibar ul {margin: 0;padding: 0;}
.navibar ul li {list-style-type: none;display: inline;padding-left: 5px;}
.navibar a {display: block;float: left;text-decoration:none;padding: 5px 10px;color: #000000; border-right: 1px solid #fff;}
.navibar a:hover {color: #ffffff;background-color: #888888;}

/* End of N A V I B A R - Horizontal menu style */

ol.hori_alpha {list-style-type: lower-alpha;width: 600px;}
ol.hori_alpha li{float: left;width: 200px;padding: 2px 0px;}

ol.spaced li, ol.quiz li { padding-bottom: 15px; color: #110000;}

.cancelled {background: #ffcccc;}
img.cancelled {border: 5px;	border-color: red;}
.cancelled_late {background: #ffaaaa;}
.cancelled_rebooked {background: #ff9999;}

.completed {background: #f0e68c;}
img.completed {border: 5px;	border-color: orange;}
.billed {background: #fffacd;}
img.billed {border: 5px;	border-color: gray;}
.scheduled {background: #aaddaa;}
.passed {background: #ccaaee;}
.free {background: #eeffff;}

img.scheduled {border: 5px;	border-color: green;}
.dimmed { 
    /* This shines through the overlaying div */
    /* filter: brightness(0.4); */
    opacity: 0.4;
}

pre.code { font-size: 18px; }

/* Biscuits tiles */

.side-container { margin: 0 auto;  text-align: left;  margin-top: 0;  margin-left: 50px;  margin-right: 50px; }
.fill-container { width: auto; display: block; }

.tile { 
    background-color: #ffffff;
    width: 98%;
    border-top: solid 2px;
    border-left: solid 2px;
    border-bottom: solid 2px; 
    border-right: solid 2px;
    margin: 5px;
    padding: 2px;
    margin-top: 20px; 
    margin-bottom: 30px; 
    border-radius: 6px;
    box-shadow: 10px 10px 5px #888888;        
    overflow: auto;
}

.tile.blog { background-color: #edfacc;}
.tile.future { background-color: #edfdfd;}

.tile a  {
    /* This MUST be defined BEFORE the main span anchor to bring them in front of the default span link */
    text-decoration: none; 
    cursor: pointer;
    position:relative;
    z-index: 99;
}

/* FLOATS - Put space as margin on the OTHER element or CLASS NOT this floated element EG img.framed */ 
.far-right, .extreme-left, .far-left {
    margin: 80px;
    width: auto; overflow: hidden; 
    padding: 20px;
}
.far-right { float: right; margin-left: 100px; padding-left: 50px;}
.extreme-left, far-left { float: left; margin-right: 100px;}

.clear {clear: both;}

.tile a:hover { text-decoration: underline; }
.no-decoration, .no-decoration a:hover { text-decoration: none !important;}

.tile h1 ,.tile h2 { font-size: 18px; font-weight: bold; }
.tile h3 , .tile h4 { font-size: 15px; font-weight: bold; }

.top-buffer { margin-top:20px; }
.bottom-buffer { margin-bottom:20px; }
.left-buffer { margin-left:20px; }
.right-buffer { margin-right:20px; }

.toppad20 { padding-top:20px;}
.botpad20 { padding-bottom:20px;}
.botborder { border-bottom: 1px dashed #046ca3; box-shadow: 0 0 1px rgba(0,0,0,0.2);}

.pad10 { padding: 10px;}
.pad20 { padding: 20px;}
.pad30 { padding: 30px;}
.pad40 { padding: 40px;}
.pad50 { padding: 50px;}
.pad60 { padding: 60px;}
.pad70 { padding: 70px;}
.pad80 { padding: 80px;}
.pad90 { padding: 90px;}
.pad100 { padding: 100px;}

.centre80 { width: 100%;}

@media (min-width:700px) { 
    .centre80 { margin: 0 auto; width: 80%;}
}

.profile { background-color: #dee0c0;} 
.course-work { background-color: #c0aec0;}

.feedback { font-size: 10px; color: #ff8c00;}
.social { background-color: #e0e0d0;}

ol.spaced-out { margin: 35px;}
ol.spaced-out li {margin-bottom: 25px;}

/* Content class browser */
ul.folders {list-style-image: url('images/icon-folder-small.png'); }
ul.folders li { margin: 20px; font-size: 24px; line-height: 30px;}
ul.files li { background-color: #ffaaff;}

.chapter-head {
    margin-top: 60px;
    background-color: #ffffee;
    padding: 30px;
    padding-top: 10px;
    border-left: solid 1px #99aa99;
    border-top: solid 1px #99aa99;
    border-right: solid 2px #669966;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;  
}

.chapter-head h1, .chapter-head h2 ,.chapter-head h3,chapter-head h4 {
    font-size: 20px;
    color: #800000;
}

.bi-gallery {
    margin-left: 70px;
    margin-right: 10px;
}

.bi-gallery:after {
}

.bi-gallery img {
    margin: 10px; 
    border: 2px solid #dddddd;
}

video-link {
    color: #803333;
    font-size: 45px;
}

a.pdf {
    /* PDF style */
    background: repeating-linear-gradient(135deg, 
        #ff0000, #ff0000 .25em /* red stripe */, 
        #ff4522 0, #ff7044 .75em /* orange stripe */
        );
    color: #fafafa !important;
    white-space: nowrap;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #ffffff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;      
}

a.pdf:hover {
    color: white;
}

a.web-folder {
    background: repeating-linear-gradient(135deg, #91e6c4, #68e4cd .25em, #5ffbf1 0, #5ffbf1 .75em  );
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #ffffff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;   
}

a.web-site {
    background: repeating-linear-gradient(135deg, #91d6f4, #68e4cd .25em, #8ffbf1 0, #9ffbf1 .75em  );
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #ffffff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;   
}

a.web-folder:hover ,a.web-site:hover { color: #800000; font-style: italic; border-color: #559999;}
a.web-folder:visited ,a.web-site:visited{ color: maroon; }
a.web-folder:active a.web-site:active { }

a.databasic {
    /* PDF style */
    background: repeating-linear-gradient(135deg, #5599aa, #5599aa .25em, #2266aa 0, #3355aa .75em);
    color: #fafafa;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #ffffff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;    
}

a.databasic:hover {
    color: yellow;
}

a.xpgn {
    /* Chess Portable Game Format - black and white tones  */
    text-decoration: none;      
    background: repeating-linear-gradient(90deg, 
        #9c9c9c, #9cbb9c .5em , 
        #f0f0f0 0, #d6d6d6 1.25em /* orange stripe */
        );
    color: #223333;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #666666;
    border-radius: 25px;
}

a.pgn {
    border: 2px solid black;
    box-sizing: content-box;
    width: 320px;
    height: 320px;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    outline: currentcolor none medium;
    border: medium none;
    font: 100% Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    text-decoration: none;
    text-align: left;
    text-indent: 0px;
    text-overflow: clip;
    letter-spacing: 0px;
    white-space: normal;
    word-spacing: 0px;
    background-color: rgb(255, 255, 255);
    background-attachment: scroll, scroll, scroll;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.098) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.098) 75%, rgba(0, 0, 0, 0.098) 0px), linear-gradient(45deg, rgba(0, 0, 0, 0.098) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.098) 75%, rgba(0, 0, 0, 0.098) 0px), none;
    background-repeat: repeat;
    background-position: 0px 0px, 40px 40px;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: 80px 80px;
}

a.pgn:hover {
    color: maroon;
    text-decoration: none;  
}

a.game-to-move {
    /* Chess Portable Game Format - black and white tones  */
    text-decoration: none;      
    background: repeating-linear-gradient(90deg, 
        #ffffcc, #ffddcc 2.5em , 
        #f0f0f0 0, #ffeec6 4.25em /* orange stripe */
        );
    color: #223333;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 2px solid #666666;
    border-radius: 25px;
}

a.game-to-move:hover {
    color: maroon;
    text-decoration: none;  
}

span.directory, a.directory {
    /* SUB-DIRECTORY STYLE  style */
    /* Use a span (NOT anchor) Because the _thumb.php may have severaval anchors in one single Directory block */

    background: repeating-linear-gradient(135deg, 
        #ffe74d, #ffdd44 .25em , 
        #ffee22 0, #ffee22 .75em 
        );

    color: #552222;
    font-size: 20px;
    line-height: 45px;
    padding: 8px;
    /* border: 1px solid #444444; */
    border-radius: 6px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;  
    margin: 20px;
    box-shadow: 0px 5px 3px rgba(0,0,0,.1);  

}

.past-times {
    /* Content files < YYYY-MM-DD */
    border-color: #dddddd;
}

span.controller, a.controller {
    /* SUB-DIRECTORY STYLE  style */
    font-family: Helvetica;
    background: repeating-linear-gradient(135deg, #a0f4d8, #b0d4a8 .25em , #b0fde8 0, #b0cdb8 .75em );
    color: #552222;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 1px solid #b6b6b6;
    border-radius: 12px;
    margin: 12px;
    overflow: hidden;
    white-space: nowrap;    
}

span.controller:hover, a.controller:hover {
    text-decoration: none; background-color: #cfb97a; color: #550000; border-radius: 8px;
}

span.chess-game, a.chess-game {
    font-size: 30px; text-decoration: none; 
    background-color: #b1c1d7; color: #550000; border-radius: 8px;
    margin: 12px; padding: 5px; box-shadow: 3px 3px 3px;
}
a.chess-game:hover {color: #331111; background-color: #a7bdab;}

span.member-area, a.member-area {
    background: repeating-linear-gradient(135deg, 
        #3dffe7, #44ffdd .25em , 
        #22ffee 0, #22ffee .75em 
        );

    color: #225522; font-size: 20px; line-height: 50px;  padding: 8px;  /* border: 1px solid #444444; */
    border-radius: 6px; text-decoration: none; overflow: hidden;
    white-space: nowrap;  margin: 20px;
    box-shadow: 0px 5px 3px rgba(0,0,0,.1);  
}

span.admin-area, a.admin-area {
    background: #35ca9b; 
    color: #ffffff; font-size: 20px; line-height: 50px;  padding: 8px;  /* border: 1px solid #444444; */
    border-radius: 6px; text-decoration: none; overflow: hidden;
    white-space: nowrap;  margin: 20px;
    box-shadow: 0px 5px 3px rgba(0,0,0,.1);  
}

a.directory:hover, a.thumb:hover {
    text-decoration: none;  
}

.directory img {
    height: 32px;
    padding: 10px;
    margin: 5px;
}

.directory-back {
    /* For the CMS system - This goes all around a collection of elements refering to a directory */
    background-color: #f4ffed;
    margin: 20px;
    /* border: solid 2px #005500; */
    border-radius: 25px;
    box-shadow: 0px 30px 40px rgba(0,0,0,.1);    
}

a.start-upload {
    /* GeneralStyle for ALL upload links  */
    background: repeating-linear-gradient(135deg, 
        #ddddcc, #ddddee .25em , 
        #ddddaa 0, #dddddd .75em 
        );

    color: #552222;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border-radius: 15px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;  
    margin: 20px;
}

a.start-upload:hover, a.thumb:hover {
    text-decoration: none;  
}

.folder {
    width: 150px;
    height: 105px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    background-color: #708090;
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
    text-decoration: none;   
    margin: 50px;
    padding: 10px;
}

.folder:hover {
    color:#ffffff;
    text-decoration: none;      
}

.folder:before {
    content: '';
    width: 50%;
    height: 12px;
    border-radius: 0 20px 0 0;
    background-color: #708090;
    position: absolute;
    top: -12px;
    left: 0px;
}

a.view-page ,a.page {
    /* SUB-DIRECTORY STYLE  style */
    font-family: Helvetica;
    background: repeating-linear-gradient(135deg, #99eeff, #88ecff .25em , #aaeeff 0, #bbeeff .75em );
    color: #552222;
    font-size: 20px;
    line-height: 50px;
    padding: 8px;
    border: 1px solid #b6b6b6;
    border-radius: 12px;
    margin: 12px;
    overflow: hidden;
    white-space: nowrap;    
}

a.view-page:hover, a.thumb:hover ,.page:hover {text-decoration: none; }

a.highlighted {
    border-color: orange; 
    color: black;
    font-weight: bold;
    background: repeating-linear-gradient(135deg, #99ffee, #88ffec .25em , #aaffee 0, #bbffee .75em );
}

/* Music content files color classes for music genre */
a.blues {border-color: blue; border-width: 2px; box-shadow: 1px 2px #5555ff;}
a.ballad {border-color: #880000; border-width: 2px; box-shadow: 1px 2px #800000;}
a.latin {border-color: #ff5555; border-width: 2px; box-shadow: 1px 2px #ff5555;}
a.reggae {border-color: #ff5555; border-width: 2px; box-shadow: 1px 2px #ee5555;}
a.ska {border-color: #ff5555; border-width: 2px; box-shadow: 1px 2px #dd5555;}

a.txt {
    /* SUB-DIRECTORY STYLE  style */
    font-family: Helvetica;
    background: repeating-linear-gradient(135deg, #ffddee, #ecff88 .25em , #eeffaa 0, #eeffbb .75em );
    color: #552222; font-size: 20px; line-height: 50px; padding: 8px; border: 2px solid #b6b6b6; border-radius: 12px; margin: 12px;
    overflow: hidden; white-space: nowrap;  
    text-decoration: none;  
}
a.txt:hover {
    text-decoration: none;
    background: repeating-linear-gradient(135deg, #89eeff, #78ecff .25em , #9aeeff 0, #abeeff .75em );
}

a.anchor , .marker {
    display:block;
    font-size:30px; line-height:40px;
    background-color:white; color: orange;
    cursor: pointer; text-decoration: none;
}
a.anchor span {
    color:black;
}
a.anchor span:hover {
    color:green;
}

a.jump:hover {
    text-decoration:underline;
}

.last-page {
    background: repeating-linear-gradient(135deg, 
        #ccaa00, #ccaa44 .25em , 
        #ccbb22 0, #ccbb22 .75em 
        );
    border-color: red; 
}

.assigned {
    background: repeating-linear-gradient(135deg, 
        #aacc00, #aacc44 .25em , 
        #bbcc22 0, #bbcc22 .75em 
        );
    border-color: green; 
}
.checkered {
    background-image: linear-gradient(45deg, #555 25%,
        transparent 25%, transparent)
        , linear-gradient(-45deg, #555 25%, transparent 25%, transparent), 
        linear-gradient(45deg, transparent 75%, #555 75%), 
        linear-gradient(-45deg, transparent 75%, #555 75%);
}

.chess-back {
    background-color: #eee;
    background-image: linear-gradient(45deg, black 25%, 
        transparent 25%, transparent 75%, black 75%, black), 
        linear-gradient(45deg, black 25%, transparent 25%, 
        transparent 75%, black 75%, black);
    background-size:60px 60px;
    background-position:0 0, 30px 30px
}

a.mixcloud {
    font-size: 50px; color: #e589ba; 
    background-color: black; padding: 2px;
    line-height: 60px; border-radius: 5px;
}

a.mixcloud:hover {text-decoration: none; color: black;  background-color: #d12e85;}

.table-cloth {
    background-color:white;
    background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
        linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
    background-size:50px 50px;    
}

img.little_icon {height: 15px;border: 0;background-color: #ffffff;}
img.tiny {height: 10px;border: 0;background: none;}
img.thumbs, img.thumb, img.button {height: 50px; background: none;}
img.male {height: 40px;border: solid 3px; border-color: #96CDCD;cursor: pointer;}
img.female {height: 40px;border: solid 3px; border-color: #ee82ee;cursor: pointer;}

img.picture {width: 90%;margin: 5%;padding: 2%;}
img.profile {height: 200px;border: 0;background: none;}
img.emoticon {height: 25px; /*width: 40px;*/border: 0;}
img.animation {height: 50px;/*width: 40px;*/border: 0;}
img.gridlock-hex {width:60px;}

img.bytext {float: right;}
img.picture {width: 90%;margin: 5%;padding: 2%;}
img.profile {height: 200px;border: 0;background: none;}
img.emoticon {height: 25px; /*width: 40px;*/border: 0;}
img.logo {height:70px;}

img.framed {border: 4px #800000; margin: 15px;box-shadow: 4px 5px 5px #888888;}

/*	H O R I Z O N T A L 	P I C T U R E S */
.hori-pics, horipics {display: inline;font-size:20px;font-weight: bold;}
.hori-pics.img, horipics.img {height: 12px;float: right;margin-top: 12px;margin-right: 8px;}

.quarter {width:18%;margin: 2%;}
.half {width:50%; position:relative; left:25%; border: 3px #ddccee;}

/* Lists */
.dim {color: #dddddd;}
.bright {color: #000000;}

.instruct ,.instruction ,.inst {
    color: #800000;  margin: 2px; background: #fafaff;
    border: 1px solid #efefef;  border-radius: 6px;
    padding: 7px; font-size: 18px; line-height: 27px;
}

.limerick {
    background-color: #eee0ff; color: darkgreen;
    font-size: 25px; margin: 25px; padding: 15px; border: 2px solid #111155;
    box-shadow: 6px #774444; border-radius: 6px; line-height: 35px;
}

.limerick a {color: maroon;}

/* works with JS biscuits-language.js */
.lang {
    font-size: 25px;
    line-height: 28px;
}

.zh {
    /* chinese characters need to be a bit bigger than normal a-z letters */
    font-size: 30px;
    line-height: 1.6; /* unitless line-height for :hover font-size change */
}

.zh a {
    text-decoration: none;
}

.zh a:hover {
    background-color: #f8f8f8;
    font-size: 24px;
}

ul.bullet-proof {
    list-style-type: none;
}

.bulletin {
    background-color: #fcfcff; padding: 12px; 
    font-family: nimrod;
    font-size: 20px; line-height: 25px;
    margin: 10px; 
    /* box-shadow: 7px 6px 4px; */
    /* border: 1px solid #222266; */
    border-radius: 6px;
}

.redsky {
    height: 200px;
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

.big-float {
    float: right;
}

/* SMALL SCREENS */
@media screen and (max-width: 44em) {
    .big-float {float: none;}
    /* ignore small percentage width images on mobiles */
    .percent-width, /* We can put all into this class rather than list all these classes */
    .thirty, .hundred, .ninety-two, .ninety, .eighty, .seventy, .sixty, .fifty, .forty, .thirty, .twenty, .ten,   
    .warning, .special ,.poem ,.reading ,.children ,.paragraph ,.news {
        width: 100%; height: auto; margin:4px;
    }
}

.print {
    display: none;
}