@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,650,400italic,650italic);
.pagestyle { background: #CDDAB1 scroll; margin:0px 10px; color:#000000; font-family:Source Sans Pro,Arial,Helvetica,sans-serif;}

h1 { font-size:2.0em; margin:0 0; font-weight:bold; }
h2 { font-size:1.5em; margin:0 0; font-weight:bold; }
h3 { font-size:1.17em; margin:0 0; font-weight:bold; }
h4 { font-size:1.0em; margin:0 0; font-weight:bold; }
h5 { font-size:0.83em; margin:0 0; font-weight:bold; }
.b1 { font-size:2.0em; margin:0 0; font-weight:normal; }
.b2 { font-size:1.5em; margin:0 0; font-weight:normal; }
.b3 { font-size:1.17em; margin:0 0; font-weight:normal; }
.b4 { font-size:1.0em; margin:0 0; font-weight:normal; }
.b5 { font-size:0.83em; margin:0 0; font-weight:normal; }

.simple { border-collapse: collapse; border: 1px solid black; padding: 3px; }
.greenbox { border: 2px solid darkgreen; border-radius: 10px; padding:5px;}
.greybox { border: 2px solid #AAAAAA; border-radius: 10px; padding:5px; }
.fitboxtocontents { display: inline-block; }
.nowrap { white-space: nowrap; }

.infoboxleft { border: 2px solid cyan; border-radius: 10px; padding:5px; position: absolute; visibility: hidden; z-index: 100; opacity: 1; background: #FFFFFF; width: 300px; right: 0px; }
.infoboxright { border: 2px solid cyan; border-radius: 10px; padding:5px; position: absolute; visibility: hidden; z-index: 100; opacity: 1; background: #FFFFFF; width: 300px; left: 0px; }
/* infobox divs need a div wrapper of position:relative to position them properly */

/*
.imageboxleft { border: 0px solid cyan; border-radius: 10px; padding:0px; position: absolute; visibility: hidden; z-index: 100; opacity: 1; background: #CDDAB1;
 width: 400px; left: 30px; }
.imageboxright { border: 0px solid cyan; border-radius: 10px; padding:0px; position: absolute; visibility: hidden; z-index: 100; opacity: 1; background: #CDDAB1; width: 400px; right: 30px; }
*/

.imageboxleft { border: 0px solid gray; border-radius: 10px; padding:0px; position: absolute; visibility: hidden; z-index: 100; opacity: 1; background: #E3EBD3;
 width: 400px; left: 30px; }

.imageboxright { border: 1px solid gray; border-radius: 5%; padding:0px; position: fixed; visibility: hidden; z-index: 100; opacity: 1; background: #E3EBD3; width: 400px; right: 0px; top: 0px; text-align: center; box-shadow: -5px 5px 2px grey;}

.greyedscreen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000000; z-index: 90; opacity: 0.5; filter: alpha(opacity=50); visibility: hidden; }

.modaldiv { box-shadow: 5px 5px 2px black; position: fixed; top: 15%; visibility: hidden; z-index: 100; opacity: 1; background: #CDDAB1; width: 50%; max-height: 75%; overflow-y: auto; padding-top: 12px; }

/* inner text area for modaldiv */
.modaldivtextbox { width: 95%; display: inline-block; float: left; }

.grey { color: gray; }
.red { color: red; }
.blue { color: blue; }
.darkgreen { color: darkgreen; }
.pagebackcolour { background: #CDDAB1; }
.tablebackcolour { background: #E3EBD3; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.normal { font-style: normal; }

.greyed { opacity: 0.5; }

li { padding-top:3px; }
ul.coursedescription { list-style: disc inside url(favicon.ico); margin: 0px 0px; padding: 0px; }
img,video { border-top-left-radius: 5%; border-top-right-radius: 5%; border-bottom-left-radius: 5%; border-bottom-right-radius: 5%; }
img.titleimage { max-width: 400px; width: 95%; margin-top: 3px; }
.mainimage { width: 80%; max-width: 800px; }

a { color: darkgreen; font-weight: bold; }
a:hover { color: black; background-color: #FFFFFF; 
 border-radius: 5px 5px 0px 0px; }

a.image:hover { background-color: transparent; letter-spacing: 1px; }

/* redundant?
a.button { background: #FFFFDB; color: darkgreen; font-weight: bold;
 text-decoration: none; border: 1px solid darkgreen; border-radius: 5px 5px 5px 5px; padding:2px; box-shadow: 5px 5px 2px grey;}
a.button:hover { background-color: #FFFFFF; color: black; }
a.button:active { box-shadow: none; }
*/

.button, .buttonsimple { background: #FFFFDB; color: darkgreen; font-weight: bold;
 text-decoration: none; border: 1px solid darkgreen; border-radius: 5px 5px 5px 5px; padding:2px; display: inline-block;}
.button:hover, .buttonsimple:hover { background-color: #FFFFFF; color: black; }

.button { box-shadow: 5px 5px 2px grey; }
.button:active { box-shadow: none; transform: translate(2px,2px); }

.button_new { background: #FF0000; color: #FFFFFF; font-weight: bold; font-style: normal; border-radius: 5px 5px 5px 5px; padding:2px; }

.fbshare { padding: 10px; float:right; }

/*
.closeXbutton { text-decoration:none; display: inline-block; position: fixed; left: 50%; margin-top: -18px; margin-left: 3px;} 
*/

/* Close button for modaldiv mainly for <a> placed before modaldivtextbox */

.closeXbuttoncontainer { position: absolute; right: 25px; top: -5px; } 
/* top right corner but leftward a bit because the fixed button gets placed adjacent right of this container */

.closeXbutton { text-decoration:none; position: fixed; }  
/* set fixed but do not set top, right etc. */

a.navbar
{text-decoration:none;color:#006400;
}

table.navbar{width: 70%; border: 1px solid darkgreen; border-collapse: collapse; background-color: #B0C585; margin: auto; padding: 1px; text-align: center;}
td.navbar{border: 1px solid darkgreen; margin: auto;}

ul.navbar2 {
 list-style-type: none;
 padding: 0;
 overflow: hidden; display: inline-block; margin: 10px 0px -7px 0px; }
 
/* neg bot marg to bring bot of containing div in line with bot of tabs ( was 10px ) */
/* changed from -6px to -7px 19.1.17 now correct with IE and Edge and acceptable with Chrome anfd Firefox */

li.navbar2 {
 float: left;
 padding: 1px 0;}


a.navbar2, a.navbar2_first {
 display: block;
 font-weight: bold;
 color: #006400;
 background-color: #B0C585;
 text-align: center;
 padding: 4px 8px;
 text-decoration: none;
 border-right: 1px solid darkgreen;
 border-top: 1px solid darkgreen;
 border-bottom: 1px dotted darkgreen;
 border-radius: 10px 10px 0px 0px; background: linear-gradient(#B0C585,#CDDAB1);
}


a.navbar2_first {
 
border-left: 1px solid darkgreen; }

/* a.navbar2:link, a.navbar2:visited {

 background-color: #B0C585; 
} */


a.navbar2:hover, a.navbar2_first:hover { color: black;
 background-color: #FFFFFF;
 background: linear-gradient(white,white);}


a.navbar2:active, a.navbar2_first:active {
 background-color: #CDDAB1; 
}


table.phototable { margin: auto; width:95%; max-width: 800px; }
td.phototable { vertical-align: top; width: 50%}
img.pc100,video.pc100 { width:100%; }

table.phototable3 { margin: auto; width:95%; }
td.phototable3 { vertical-align: top;  width: 33%; }

table.phototable4 { margin: auto; width:95%; }
td.phototable4 { vertical-align: top; width: 25%}

table.phototable5 { margin: auto; width:95%; }
td.phototable5 { vertical-align: top; width: 20%}

table.courses_table,td.courses_table
{ border-collapse: collapse; border: 1px solid darkgreen; padding: 5px; background: #E3EBD3; text-align: center; }

/* table.bookingformtable { width: 100%; border: 2px solid blue; } */
table.bookingformtable td:first-of-type {  border-bottom: 1px solid grey; }
table.bookingformtable tr:first-of-type td:first-of-type { border-top: 1px solid grey; }

/* the following three are used in conjunction with LoadImageInDiv and hovering over thumbnails */
img.thumb { max-height: 10vh; height: 90px; border: 2px solid transparent; margin: 0px; padding: 0px; display: inline-block;}
img.thumb:hover { border: 2px solid red; }
td.td1 { width: 50%; vertical-align: top; }
td.td2 { width: 50%; vertical-align: top; border-left: 1px dotted black; padding-left: 5px; }

.swform { font-family:Arial,Helvetica,sans-serif; background: #E3EBD3; border: 1px solid #AAAAAA; border-radius: 10px; padding: 2px 5px; }

/*
li.dropdown {
    display: inline-block;
}
*/

li.dropdown {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #B0C585;
    min-width: 55px;
    z-index: 999;
}
.dropdown-content a {
    color: #006400;
    padding: 3px 5px;
    text-decoration: none;
    display: block;
    text-align: center;
    border-bottom: 1px dotted darkgreen;
    background: linear-gradient(#B0C585,#CDDAB1);
}

.dropdown-content a:hover { color: black; background-color: white; background: linear-gradient(white,white); }

.dropdown:hover .dropdown-content {
    display: block;
}

/*
.dropdown:active .dropdown-content {
    display: block;
}
*/

/* NB when setting tooltip attributes do not redefine duplicate attributes, define separately for different tooltip positions */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue;
    color: #0055FF;
}

.tooltip .tooltiptext, .tooltip .tooltiptextright {
    visibility: hidden;
    width: 300px;
    border: 2px solid cyan; 
    background-color: #FFFFFF;
    color: black;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 150%;
}

 .tooltip .tooltiptext {
    right: 40%; /* text box horizontal position */
}

 .tooltip .tooltiptextright {
    left: 40%; /* text box horizontal position */
}

.tooltip .tooltiptext::after, .tooltip .tooltiptextright::after {
    content: " ";
    position: absolute;
/*     top: 100%; At the bottom of the tooltip   */
    bottom: 100%;      /* At the top of the tooltip */
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent cyan transparent;
}

.tooltip .tooltiptext::after {
    right: 3%;         /* arrow horizontal position */
}

.tooltip .tooltiptextright::after {
    left: 3%;         /* arrow horizontal position */
}


.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextright {
    visibility: visible;
}