@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

body {
/* background-color: #D0D0D2; */
 background-image: linear-gradient(to bottom, #ddd, #ccc);
 background-attachment: fixed;
 margin:0;
 padding:0;
 font-family: 'PT Sans', 'sans-serif';
 font-size: 1.0em;
 color: #7a7a7a  ;   /* overall font colour = dark grey */
 font-weight: 300;   /* overall font weight = 300 */

}

* {
 margin:0;
 padding:0;
}

/* element defaults */
table {
 width: 100%;
 text-align: left;
}


th, td {
 padding: 10px 10px;
}

th {
 color: #666;
 background: #ccc none repeat-x scroll left top;
}

td {
 border-bottom: 1px solid #ccc;
}

strong, b {
font-weight: bold;
}

div.paypal td {
 border-bottom-width:  0px;
 padding: 0px;
 font-size: 0.9em;
}

div.paypal table {
 padding: 0px 0px 7px 0px;
}

div.downloads table {
 padding: 0px 0px 0px 0px;
}


div.list td {
 border-bottom-width:  0px;
 font-size: 0.9em;
 padding: 0px 0px;
}


div.downloads td {
 border-bottom-width:  0px;
 padding: 0px;
 font-size: 0.9em;
}


div.noticebox p {
 border-bottom-width:  0px;
 padding: 0px;
 color: red;
 font-size: 1.1em;
 font-weight: bold;
 background-color: #d5e6eb ;                            /* box = very pale FIBO blue */
}


div.boxed {
 border-style: ridge;
 border-color:#31859c;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}


.gallery {
    width: 160px;
}


div.paypal a {
 border-bottom-width: 0px;
}


div.download td {
 border-bottom-width:  0px;
 padding: 0px;
 font-size: 0.85em;
 text-align: center;
}

div.download table {
 padding: 0px 0px 22px 0px;
}

div.download a {
 border-bottom: 1px solid #ccc;
}

code, blockquote {
 display: block;
 border-left: 5px solid #222;
 padding: 10px;
 margin-bottom: 20px;
}
code {
 background-color: #222;
 color:#ccc;
 border: none;
}
blockquote {
 border-left: 5px solid #222;
}

blockquote p {
 font-style: italic;
 font-family: Georgia, "Times New Roman", Times, serif;
 margin: 0;
 color: #333;
 height: 1%;
}



p {line-height: 1.7em;margin-bottom: 10px;}

a {color: #7a7a7a; text-decoration: none; border-bottom: dotted 1px;}  /* hyperlinks with dotted underline */

a:hover {color: #466F9B;}


fieldset {
 display: block;
 border: none;
 border-top: 1px solid #ccc;
}

fieldset legend {
 font-weight: bold;
 font-size: 0.85em;
 padding-right: 10px;
 color: #333;
}

fieldset form {
 padding-top: 15px;
}

fieldset p label {
 float: left;
 width: 150px;
}

form input, form select, form textarea {
 padding: 0px;
 border: 0px;
 font-family: 'PT Sans', 'sans-serif';
 font-size: 1.0em;
 color: #7a7a7a  ;   /* overall font colour = dark grey */
 font-weight: 300;   /* overall font weight = 300 */
}

form input.formbutton {
 background-color: #5282BA;
 color: #B7D2F0;
 border: none;
 border-bottom: 2px solid #215DA1;
 padding: 8px 15px;
 color: #ffffff;
 font-weight: bold;
 padding: 6px 10px;
 font-size: 0.85em;
 letter-spacing: 1px;
 width: auto;
 overflow: visible;
}

form.searchform input {
 font-size: 0.85em;
 padding: 6px;
}

form.searchform p {
 margin: 5px 0;
}


span.required {
 color: #ff0000;
}

h1 {
 color: #000;
 font-size: 2.0em;
 
}

h2 {
 color: #31859C;   /* FIBO blue */
 font-size: 2.5em;
 letter-spacing: -2px;
 font-weight: normal;
 padding-bottom: 10px;           
 margin: 0;
text-shadow: 3px 3px 3px rgba(0,0,0,0.2); 
}

h3 {
 color: #31859C;   /* FIBO blue */
 font-size: 1.9em;
 font-weight: normal;
 margin-bottom: 10px;
 letter-spacing: -1px;
text-shadow: 3px 3px 3px rgba(0,0,0,0.2); 
}

h4 {
 color: #31859C;   /* FIBO blue */
 font-size: 1.2em;
 text-transform: uppercase;
 font-weight: bold;
 padding-bottom: 5px;
}

h5 {
 font-size: 0.85em;
 padding-bottom: 7px;
}

h6 {
 color: #31859C;   /* FIBO blue */
 font-size: 1.1em;
 text-transform: uppercase;
 font-weight: bold;
 padding-top: 20px;
 padding-bottom: 0px;
}

h7 {
 color: #31859C;   /* FIBO blue */
 font-size: 2.0em;
 letter-spacing: -3px;
 font-weight: normal;
 padding-bottom: 5px;           
 margin: 0;
text-shadow: 3px 3px 3px rgba(0,0,0,0.2); 
}

ul, ol {
 margin: 0 0 15px 15px;
 line-height: 1.5em;
}

li {
 padding-bottom: 5px;
}

li ol, li ul {
 font-size: 1.0em;

 margin-bottom: 0;
 padding-top: 5px;
}

.width {
 max-width: 1200px;
 margin: 0 auto;
}


#container { background-color: #fff;
 width: auto;
 margin: 20px auto;}              /* grey space at top */

header {padding: 80px 0px;margin: 0 auto;          /* photo - ?affects height */
 text-align:center;
 background-color: #31859C;
 background-image: url('images/havens1_panorama.jpg');   /* default header image 1200 px wide x 240 */
 background-position: center;}


/* see /files/random_images.js which is set at 25 */

header.view1 {
 background-image: url('images/west_cliffs_panorama.jpg');   /* header image  */
}
header.view2 {
 background-image: url('images/obs_panorama.jpg');   /* header image  */
}
header.view3 {
 background-image: url('images/buness_sunset.jpg');   /* header image */
}
header.view4 {
 background-image: url('images/from_air_panorama.jpg');   /* header image  */
}
header.view5 {
 background-image: url('images/coast_panorama.jpg');   /* header image  */
}
header.view6 {
 background-image: url('images/buness_panorama.jpg');   /* header image  */
}
header.view7 {
 background-image: url('images/arcticskua_panorama.jpg');   /* header image  */
}
header.view8 {
 background-image: url('images/brambling_panorama.jpg');   /* header image  */
}
header.view9 {
 background-image: url('images/puffin_panorama2.jpg');   /* header image  */
}
header.view10 {
 background-image: url('images/kirksunset_panorama.jpg');   /* header image  */
}
header.view11 {
 background-image: url('images/obs2_panorama.jpg');   /* header image  */
}
header.view12 {
 background-image: url('images/arctictern_panorama.jpg');   /* header image  */
}
header.view13 {
 background-image: url('images/knitware_panorama.jpg');   /* header image  */
}
header.view14 {
 background-image: url('images/wheatear_panorama.jpg');   /* header image  */
}
header.view15 {
 background-image: url('images/littlebunting_panorama.jpg');   /* header image  */
}
header.view16 {
 background-image: url('images/orca_panorama.jpg');   /* header image  */
}
header.view17 {
 background-image: url('images/sibeaccentor_panorama.jpg');   /* header image  */
}
header.view18 {
 background-image: url('images/leachs_panorama.jpg');   /* header image  */
}
header.view19 {
 background-image: url('images/south_light_panorama.jpg');   /* header image  */
}
header.view20 {
 background-image: url('images/northcliffs_panorama.jpg');   /* header image  */
}
header.view21 {
 background-image: url('images/yellow-browed_panorama1.jpg');   /* header image  */
}
header.view22 {
 background-image: url('images/redflankedbluetail_panorama.jpg');   /* header image  */
}
header.view23 {
 background-image: url('images/merlin_panorama.jpg');   /* header image  */
}
header.view24 {
 background-image: url('images/oysterplant_panorama.jpg');   /* header image  */
}
header.view25 {
 background-image: url('images/redwing_panorama2.jpg');   /* header image  */
}

header h1 a, header h1 a:hover {
 color: #eee;                          /* header text colour = v pale FIBO blue [was #eee] */
 font-size: 1.5em;
 font-family: "PT Sans", sans-serif;
 padding: 5px 20px;
 letter-spacing: -1px;
 /*background-color: rgba(0, 0, 0, 0.4);  /* header box behind text - white with opacity =0.4 [was 0.3] */
 text-shadow: 2px 2px 0 #222;           /* header text shadow - black */
 border-bottom: none;
}

nav {
 height: 60px;                                            /* header bar - height */
 margin-bottom: 0px;
 width: 100%;

 background-color: #31859C;
 background-image: linear-gradient(#31859C, #18424e);  /* header bar - two shades of FIBO blue */
 box-shadow: 0px 5px 10px #ccc;
 border-top: 1px solid #18424e;                         /* header bar top - darker of two shades of FIBO blue */
 border-bottom: 1px solid #fff;
}

nav ul {list-style: none; margin: 0; padding: 20px 0 0;    /* header bar - position of text */
 text-align: center; line-height: 90%; }
nav ul li {display: inline; padding: 0px 12px; }          /* header text = gap between text */
nav ul li a {color: #d5e6eb ;                            /* header text = very pale FIBO blue */
 font-size: 1.0em;                                      /* header text = font size */
 border-bottom: none;
 text-transform: uppercase;}
nav ul li a:hover { color: #ccc; text-decoration: none;}
nav ul li.selected a,
nav ul li.selected a:hover {
 font-weight: bold;
 color: #eee;
}

img {
 max-width: 100%;
 height: auto;
 border: 0;
}

#body { background: none; margin: 20px 2%;  padding: 0;
 clear: both;}


#content {
 float: left;}


.two-column {
 width: 66%;
}


.with-right-sidebar {
 margin-right: 2%;
}


.with-left-sidebar {
 margin-left: 2%;
}



.three-column {
 width: 46%;
 margin: 0 2%;
}


article {
 padding: 10px 10px 20px 5px;
 }


article h2 {
 padding-bottom: 10px;
}


article .article-info {
 color: #ccc;
 font-size: 0.85em;
 letter-spacing: -0.5px;
 padding: 0 0 10px 0;
}

article .article-info a { 
 color: #7a7a7a;
 border-bottom: none;
}

.sidebar {
 margin-top: 10px;
}

.small-sidebar { 
 width: 25%;
}


.big-sidebar {
 width: 30%;
}


.left-sidebar { 
 float: left;
}


.right-sidebar {
 float: right;
}



.sidebar h4 {
 font-size: 1.6em;
 color: #31859C;    /* left side header = FIBO blue */
 padding: 6px 0px;
 letter-spacing: -0.5px;
 text-transform: uppercase;
 font-weight: normal;
}

.sidebar h7 {
 font-size: 1.2em;
 color: #31859C;    /* left side header = FIBO blue */
 padding: 6px 0px;
 letter-spacing: -0.5px;
 text-transform: uppercase;
 font-weight: normal;
}

.sidebar ul { margin: 0; padding: 0; list-style: none;}
.sidebar ul li { margin-bottom: 20px; line-height: 1.9em;
 padding: 10px;}

.sidebar ul li.bg {
 background-color: #d5e6eb ;                            /* box = very pale FIBO blue */
}

.sidebar ul li.notice {
 font-size: 0.85em;  
 margin-bottom: -0.6em; 
}

.sidebar ul li.bg h4 {
 color: #31859C;                                         /* left side header in box = FIBO blue */
}

.sidebar ul li.bg h5 {
 color: #FF0000;                                         /* left side header in box = bold red text */
 font-family: Verdana;
 font-size: 0.85em;
 font-weight: bold;
 line-height: 1.0em;
 margin-bottom: 0.5em;
}

.sidebar ul li.bg a {
 color: #FF0000;                                         /* left side header in box = bold red text */
 font-family: Verdana;
 font-size: 0.85em;

}

.sidebar li ul {
 list-style: none outside none;
 margin: 0px;}
.sidebar li ul li { display: block; border-top: none; padding: 7px 2px; margin: 0; line-height: 1.5em; font-size: 0.85em;}

.sidebar ul.blocklist {
 border-top: 1px solid #ddd;
}

.sidebar ul.blocklist li {
 border-bottom: 1px solid #ddd;
 padding: 0;
}

.sidebar ul.blocklist li a {
 border-bottom: 0;
 display: block;
 padding: 12px 10px;
}

.sidebar ul.blocklist li a.selected {
 background-color: #5282BA;
 border-bottom: 5px solid #3F6B9D;
 color: #EAF0F6;
 font-weight: bold;
}


.sidebar ul.newslist li {
 padding: 20px 5px;
 border-bottom: 1px solid #ddd;
}

.sidebar ul.newslist p {
 margin-bottom: 0;
}
.sidebar ul.newslist span.newslist-date { 
 background-color: #5282BA;
 color: #fff;
 padding: 5px 10px;
}

.sidebar li ul li.text { 
 border-bottom: none;
}

.sidebar li ul li.quotes { 
 border-bottom: none;
 font-family: "Comic Sans MS", sans-serif;  /* different font for blue quotes */
 font-size: 1.0em;
 line-height: 0.1em;
 color: black  ;   /* font colour = black */
 font-weight: bold;  
}

.sidebar li ul li.quotes a { 
 border-bottom: none;
 font-family: "Comic Sans MS", sans-serif;  /* links */
 font-size: 1.0em;
 line-height: 0.1em;
 color: black  ;   /* font colour = black */
 font-weight: bold;  
 text-decoration: none; 
 border-bottom: dotted 1px;
}

.sidebar li ul li a {  border-bottom-color: #666;
 color: #666;}
.sidebar li ul li a:hover {  border-bottom-color: #5282BA;
 color: #5282BA;}


.sidebar li ul li a.readmore {
 font-weight: bold;
}


.sidebar figure { font-size: 0.85em;  font-weight: normal; margin-bottom: 15px; line-height: 1.2em; }
.clear {clear: both;}
footer {margin:20px auto 0;background: #222;
 border-top: 2px solid #eee;}

footer p {text-align: left;color: #ccc; font-size: 0.8em; margin: 0; padding: 0;}
footer p a {color: #ccc;font-weight: bold;}
.footer-content {
 padding: 20px 2% 20px;
 border-top: 10px solid #111;}
footer .footer-content ul {width: 25%; list-style: none; margin: 0; padding: 0; float: left;}
footer .footer-content li {padding: 1px 1px;                         /* padding=between lines of li */
  color: #909090;
  font-size: 0.8em;
 line-height: 1.4em;}
footer .footer-content li a, footer .footer-content h4 {}
footer .footer-content li a { color: #909090;
border-bottom: 0px;
/* border-bottom-color:#505050;*/
 }

footer .footer-content li a:hover { 
 color: #d5e6eb;
/* border-bottom-color:#909090;*/
}
footer .footer-content h4 { color: #999;
 font-size: 1.2em;
 font-weight: lighter;                          /* was bold */
 padding-bottom: 0;}
footer .footer-bottom { padding: 10px; text-align: center; background-color: #31859C;   /* FIBO blue */
 border-top: 10px solid #18424e;}                                                      /* darker FIBO blue */
footer .footer-bottom p { text-align: center;}

footer .footer-bottom p, footer .footer-bottom p a {
 color: #B7D2F0;
 border-bottom-color: #B7D2F0;
}



@media screen and (max-width: 740px) {

 body { font-size: 0.8em; } 

 header h1 a, header h1 a:hover { padding: 5px 10px; }

 div#container { width: auto; margin-top: 0; margin-bottom: 0; }

 footer .footer-content ul { margin-bottom: 15px; }

 footer .footer-content ul.endfooter { margin-bottom: 0px; }

 .width { width:auto; }
 
 #content, aside.sidebar { float: none; width: auto; }

 footer .footer-content ul { width: auto; float: none; }
}


@media screen and (max-width: 540px) {

 body { font-size: 0.8em; }

 header, header h1 a, header h1 a:hover { text-align: center; padding: 10px 0; font-size: 1.1em; }

 header { padding: 20px 0; }

 nav ul { margin-top: 0; padding: 10px; }
 
 nav ul li { float: none; text-align:center; }

 nav ul li a { margin-top: 0; }

 nav { height: auto; position: relative; }

}


ul#menu {
 width: 100%;
 list-style-type: none;
 border-top: solid 0px #b9a894;
 margin: 0;
 padding: 0;
}

ul#menu ol {
 display: none;
 text-align: left;
 list-style-type: none;
 margin: 0;
 padding: 5px;
}

ul#menu li, 
 ul#menu a {

 font-size: 12px;
 color: #7a7a7a;
}

ul#menu li {
 border-bottom: solid 0px #b9a894;
 line-height: 6px;
}

ul#menu ol li {
 border-bottom: none;
}

ul#menu ol li:before {
 content: '\2023\00a0';
}

ul#menu a {
 text-decoration: none;
 outline: none;
}

ul#menu a:hover {
 color: #31859C;     /* menu hover = FIBO blue */
}

ul#menu a.active {
 color: #be5028;
}

figure {
 color: #31859C ;     /* fig caption inc sidebars = FIBO blue/Arial */
 font-size: 0.85em;
 font-weight: normal;
 margin-bottom: 5px;
line-height: 1.2em;
/* box-shadow:3px 3px 3px rgba(0,0,0,0.2); */
 font-family: 'PT Sans', 'sans-serif';
}

figurels {
 color: #31859C ;     /* fig caption inc sidebars = FIBO blue/Arial */
 font-size: 0.85em;
 font-weight: normal;
 margin-bottom: 5px;
line-height: 1.7em;
/* box-shadow:3px 3px 3px rgba(0,0,0,0.2); */
 font-family: 'PT Sans', 'sans-serif';
}

figure a {
  border-bottom: 0;                                         /* no dotted line under links here */
}

figurels a {
  border-bottom: 0;                                         /* no dotted line under links here */
}

#map_canvas {
 width: 500px;
 height: 700px;
 }
#map_canvas_big {
 width: 100%;
 height: 1200px; 
 }

.style1 {background-color:#ffffff;font-weight:bold;border:2px #006699 solid;}

.TimetableHeader1 {background-color:#d5e6eb;font-weight:bold;border:2px #006699 solid;}

.TimetableHeader2 {background-color:#d5e6eb;font-weight:bold;border:2px #006699 solid;}

/* start of menuccs */

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


#cssmenu {
  width: 90%;
  font-family: 'PT Sans', 'sans-serif';
  color: #000000;
}


#cssmenu ul ul {
  display: none;
}


.align-right {
  float: right;
}


#cssmenu > ul > li > a {
  padding: 3px 4px;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  cursor: pointer;
  z-index: 2;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  background: #ffffff;
  
  
}


#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #000000;
  background: #fffff;
  
}


#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), 0 1px 1px rgba(0, 0, 0, 0);
  border-bottom: 0px solid #ffffff;
}


#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 0px solid #ffffff;
}


#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #ffffff;
}


#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  padding: 3px 25px;
  z-index: 1;
  text-decoration: none;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  
}


#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #fffff;
 color: #3c3b3b;
 }


#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}


#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


#cssmenu ul ul ul li a {
  padding-left: 30px;
}


#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}


#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}


#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}


#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}


/* end of menu ccs */

/* start of fancyzoom ccs */

#zoom {
position: absolute;
display: none;
z-index: 499;
-webkit-box-shadow: 0px 5px 25px #000;
-moz-box-shadow: 0px 5px 25px #000;
box-shadow: 0px 5px 25px #000;
}
#zoom_img {
display: block;
cursor: pointer;
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
#zoom_close {
position: absolute;
display: none;
cursor: pointer;
left: -15px;
top: -15px;
width: 30px;
height: 30px;
background: url(img/zoom/closebox.png) no-repeat;
}
#zoom_spin {
position: absolute;
display: none;
z-index: 525;
width: 50px;
height: 50px;
background: url(img/zoom/spin.png) no-repeat;
}

/* end of fancyzoom ccs */

div.clip {margin-top: -25px; height:25.5em;  font-size: 0.85em;   overflow:hidden; }

div.clip2 {margin-top: -25px; height:50em;  font-size: 1em;   overflow:hidden; }

div.clip3 {margin-top: -25px; height:30em;  font-size: 1em;   overflow:hidden; }

div.clip4 {height:60em;  font-size: 1em;   overflow:hidden; }

div.clip5 {height:30em;  font-size: 1em;   overflow:hidden; }

#osbr-iframe {width: 1px; min-width: 100%;}