/*
Site: stalbanscathedral.org
Version 2
*/

html, body, ul { padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif; }
body { background-color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; line-height: 22px; color: #333; -webkit-text-size-adjust: none; }

form, textarea { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; }
ul,ol,li,pre,form,html,p,blockquote,fieldset,input { margin:0; padding:0; font-family: 'Source Sans Pro', sans-serif; }
legend { display:none; }
fieldset { border:none; }

img { border:none; display: block; }

.cf:before,
.cf:after { content:" "; display:table; }
.cf:after { clear:both; }

h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: normal; margin: 0; padding:0; color:#5c5c5c; }
h1, h2, h3 { font-size: 18px; }
h4, h5, h6 { font-size: 16px; }
p { margin: 0 0 10px 0; }
a, a:link, a:active, a:visited, a:hover { color: #333; }
pre {
	font-size: 12px;
	width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#page nav { display: none; }
#header,
.header { background: #999; font-size: 16px; font-weight: bold; color: #fff; text-align: center; line-height: 40px; height: 40px; padding: 0 50px; }

#header a,
.header a {
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 10px;
}

#header a.right,
.header a.right
{
	left: auto;
	right: 10px;
}
#content,
.content { padding: 20px; }

.clear { clear:both; height:0; font-size: 0px; }

#footer .row { position: relative; }
#footer .row #social-icons { position:absolute; top:85px; right:0; margin:0; padding:0; }
#footer .row #social-icons .icon { position:relative; text-indent:999px; left: auto; width:30px; height:30px; overflow:hidden; display:inline-block; border-radius:5px; background:#2998d9 url(img/social-media-sprite.png) -25px 2px no-repeat; }
#footer .row #social-icons .icon span { display:none; }
#footer .row #social-icons .icon.twitter {  }
#footer .row #social-icons .icon.facebook { background-color:#2d4585; background-position:9px }
#footer .row #social-icons .icon.youtube { background-color:#d10a1a; background-position:-59px }
#footer .row #social-icons .icon.instagram { background-color:#b8a5a3; background-position:-133px }
#footer .row .trip-advisor-bubble { position: absolute; top: 90px; right: 150px; }

a.fa {
  color: #fff;
}

.fa {
background-color: rgba(255, 255, 255, 0.25);
border-radius: 50%;
font-size: 20px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
}

#footer .logos { position:absolute; top: 0; right: 0; padding: 5px; background-color: #fff; }
#footer .logos img { display: block; }

#stalbans-calendar {
  position: relative;
  z-index: 1;
}

#header .trip-advisor-bubble a {
  display: inline-block;
  height: auto;
  width: auto;
  position: relative;
}

#CDSSCROLLINGRAVE.narrow {
  width: 92%;
}

.button {
  padding: 5px;
  font-size: 1.5em;
  border: 0;
  width: 100%;
  box-sizing: border-box;
}

.button:hover {
  cursor: pointer;
}

.button.button-primary {
  background-color: #5c5c5c;
  color: #fff;
  text-shadow: 0 1px 0 #000;
}

.button.button-light {
  background-color: #ccc;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

.whatson-buttons {
  text-align: center;
}

.whatson-buttons .whatson-button {
  border-radius: 10px;
  display: inline-block;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.whatson-buttons .whatson-button h3 {
  position: absolute;
  bottom: 0;
  padding: 10px;
  background-color: rgba(255,255,255,.75);
  display: block;
  width: 100%;
  color: #444;
  box-sizing: border-box;
}

.whatson-buttons .whatson-button img {
  display: block;
  width: 300px;
}

.home #content.welcome {
  padding: 40px 0 10px 0;
}

.home .welcome h1 {
  font-size: 40px;
  margin-bottom: 20px;
  font-family: "Goudy Bookletter 1911",serif;
}

.home .welcome p {
  font-size: 20px;
  line-height: 125%;
}

.home .welcome h1,
.home .welcome p {
  text-align: center;
}

.row:before,
.row:after { content:" "; display:table; }
.row:after { clear:both; }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: left;
  box-sizing: border-box;
}

.col-1 { width:8.33333%; }
.col-2 { width:16.6667%; }
.col-3 { width:25%; }
.col-4 { width:33.3333%; }
.col-5 { width:41.6667%; }
.col-6 { width:50%; }
.col-7 { width:58.3333%; }
.col-8 { width:66.6667%; }
.col-9 { width:75%; }
.col-10 { width:83.3333%; }
.col-11 { width:91.6667%; }
.col-12 { width:100%; }



#col-main .welcome { padding:10px; background-color:#f2f0ed; box-shadow: 0 0 5px #999; margin-bottom:20px; }
#col-main .welcome p { padding:0; margin:10px 0 0 0; }
#col-main .welcome h2 { font-size:30px; margin:0; padding:0; }

#catalogue {  }
#catalogue .col { float:left; width:310px; margin-bottom:20px }
#catalogue .col.odd { margin-right:30px; }
#catalogue .col .image { position:relative; }
#catalogue .col .image img { max-width:310px; display:block; }
#catalogue .col .image h3 { position:absolute; top:0; left:0; padding:5px 3%; background-color:rgba(255,255,255,.8); width:94%; margin:0; font-size:1.5em; border:none; display:inline-block; }
#catalogue .col .image h3 span { font-size:14px; margin:0; }
#catalogue .col .image a.more { position:absolute; bottom:0; right:0; padding:5px 10px 7px 10px; background-color:rgba(255,255,255,.8); display:inline-block; text-decoration:none; }


#catalogue.key-people .col { width:200px; }
#catalogue.key-people .col.odd { margin-right:25px; }
#catalogue.key-people .col .image img { max-width:200px; }


#services,
#whatson,
#call-to-action { width:330px; margin-bottom:20px; }

.upcoming { width: 100%; }
.upcoming .search-result-category { display: inline-block; padding: 3px 5px 2px; background-color: #b8a5a3; color: #fff; border-radius: 3px; margin-left: 5px; font-size: 11px; text-transform: uppercase; line-height: 100%; }


#services .title { background-color:#b8a5a3; padding:10px; }
#services .title h3 { color:#fff; font-size:1.75em; margin-bottom:5px; }
#services .title p { color:#fff; margin:0; font-size:1.25em }
#services .calendar td { padding:8px 5px; color:#b8a5a3; font-size:1.1em  }
#services .opening-times { background-color:#f1eded; border-top: 1px solid #b8a5a3; border-bottom: 1px solid #b8a5a3; padding:10px; }
#services .opening-times h3 { color:#b8a5a3; font-size:2em; font-weight:bold; }
#services .opening-times p { color:#b8a5a3; margin:0; font-size:1.25em; margin-bottom:5px }

#whatson .item-row,
.upcoming .item-row { clear:both; padding:10px 5px; border-bottom: 1px solid #54271d; }
#whatson .title,
.upcoming .title { background-color:#f1eded; border-top: 1px solid #54271d; border-bottom: 1px solid #54271d; position:relative; }
#whatson .title h3,
.upcoming .title h3{ color:#fff; font-size:1.75em; background:url(img/title-bg.png) center right; width:60%; padding:5px 10px;  }
#whatson .title p,
.upcoming .title p { position:absolute; color:#fff; font-size:1.2em; float:left; top:5px; right:5px; }
#whatson .title p a,
.upcoming .title p a { text-decoration:none; color:#54271d; }
#whatson .item-description a,
.upcoming .item-description a { color:#54271d; }
#whatson .item-description,
.upcoming .item-description { color:#54271d; margin:0; font-size:1.1em; }
#whatson .item-image,
.upcoming .item-image { margin-right:10px; float:left; width:60px; height:60px; }

#call-to-action img { display:block; margin:0; padding:0; width:100%; }
#call-to-action .narrow { float:left; margin:0 10px 10px 0; width:160px; }
#call-to-action .narrow.last { margin-right:0; }
#call-to-action .wide { clear:both; }

#banner { margin-bottom:20px;}
#banner img { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #fff; box-shadow: 0 2px 3px #999; }

#col-main h2 { margin:20px 0 10px 0; font-size:1.75em; border-top:1px solid #eee; padding-top:20px; display:flex; }
#col-main h3 { margin:20px 0 10px 0; font-size:1.6em; border-top:1px solid #eee; padding-top:20px;  display:flex; }
#col-main h4 { margin:20px 0 10px 0; font-size:1.5em; border-top:1px solid #eee; padding-top:20px; display:flex; }
#col-main h5 { margin:20px 0 10px 0; font-size:1.2em; font-weight:bold; }
#col-main ul,
#col-main ol { margin-left:30px; }
#col-main ul li,
#col-main ol li { margin-bottom:10px; }
#col-main .intro { color:#5c5c5c; margin-bottom:10px; font-size:1.5em; line-height:125%; }

.info { padding:10px; border-top: 1px solid #b8a5a3; border-bottom: 1px solid #b8a5a3; text-align:center; }
.info img { margin-right:20px; }
.info img.last { margin-right:0; }

a.boldbuttons { padding:5px 10px; background-color:#5c5c5c; text-decoration:none; color:#fff; text-shadow: 0 1px 0 #000; box-shadow: 0 2px 2px #999; border-radius:3px; font-weight:bold; display:inline-block; margin-bottom:2px; }
a:hover.boldbuttons { margin-top:1px; margin-bottom:1px; box-shadow: 0 1px 2px #999; transition: 0.2s ease-in-out; }
a:active.boldbuttons { margin-top:2px; margin-bottom:0; box-shadow: 0 0 2px #999 }

a.linkbutton { padding:5px 10px; background-color:#5c5c5c; text-decoration:none; color:#fff; text-shadow: 0 1px 0 #000; box-shadow: 0 2px 2px #999; border-radius:3px; font-weight:bold; display:inline-block; margin-bottom:2px; }
a:hover.linkbutton { margin-top:1px; margin-bottom:1px; box-shadow: 0 1px 2px #999 }
a:active.linkbutton { margin-top:2px; margin-bottom:0; box-shadow: 0 0 2px #999 }

.imageright { margin:0 0 20px 20px; float:right; }

#col-main .note { padding:10px; background-color:#eee; border:1px solid #ccc; box-shadow: 0 2px 2px #999, inset 0 0 4px #fff; margin-bottom:20px; }
#col-main .note h2,
#col-main .note h3,
#col-main .note h4,
#col-main .note h5,
#col-main .note h6 { margin:10px 0; padding:0; }
#col-main .note h4 { margin-top:0; border-bottom:1px solid #ccc; padding-bottom:10px; }
#col-main .note + h5 { margin:0; }
#col-main .note p { margin: 10px 0 0 0; padding:0; }

.frame { display:inline-block; background-color:#eee; box-shadow: 0 2px 2px #999; padding:1%; margin-bottom:10px; width:98%;}
.frame img { display:block; width:100%; }
.frame span { display:block; padding:5px 5px 0 0; }
.frame.frame-right { float:right; margin:0 0 10px 20px; width:35%}
.frame.frame-left { float:left; margin: 0 20px 10px 0;  width:35%}

#col-main .lightboxlist ul {margin:0;padding:0;}
#col-main .lightboxlist ul li { margin:0 3px 5px 0; list-style:none; float:left; width:53px; height:80px; overflow:hidden;border:1px solid #ddd }
#col-main .lightboxlist ul li img { width:53px; height:80px; overflow:hidden; display:block; }
#col-main .lightboxlist ul li a, 
#col-main .lightboxlist ul li a:link, 
#col-main .lightboxlist ul li a:visited, 
#col-main .lightboxlist ul li a:hover, 
#col-main .lightboxlist ul li a:active {width:60px; height:90px; }

#col-main .newslist ul { margin:0 0 20px 0; }
#col-main .newslist ul li { margin:5px 0; list-style:none; text-align:left; }
#col-main .newslist ul li a { background-color:#5c5c5c;
    border-radius: 4px;
    border: 1px solid #666; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.25);
    color: #fff;
    display: inline-block;
    margin: 5px;
    padding: 4px 15px;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

#col-main .newslist ul li a:hover {
    background-color:#444;
}

#col-main .newslist ul li a:active {
    border-color: #000;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #fff;
}

#col-main .table { width:100%; border-collapse:collapse; margin-bottom:20px; }
#col-main .table th { text-align:left; font-weight:bold; color:#5c5c5c;  }
#col-main .table td { text-align:left; border-bottom:1px solid #ccc; background-color:#eee; padding:5px; color:#5c5c5c; }

#col-main .calendar-key { background-color:#eee; border-bottom:1px solid #ccc; text-align:center; vertical-align:central; padding:10px 0 5px 0; margin:-20px 0 20px 0; }

#header .sitename { display:none; }

.header-wrapper .spektrix-toolbar { position:absolute; top:65px; right:0; margin:0; padding:0; text-align: right; }
.header-wrapper .spektrix-toolbar a { position:relative; width:100px; padding: 0; margin: 0 0 0 36px; font-weight:normal; text-decoration:none; left: 0; transition: 0.2s ease-in-out; }

.header-wrapper .stalbans-toolbar { position: absolute; bottom: 10px; left: 38%; margin: 0; padding: 0; text-align: center; }
.header-wrapper .stalbans-toolbar p { margin: 0; padding: 0; text-align: center; width: 80px; float: left; }
.header-wrapper .stalbans-toolbar a.icon { display: inline-block; color:#333; background-color: #eee; height: 40px; width: 40px; overflow: hidden; text-indent: -999px; border: 1px solid #333; border-radius: 50%; text-align: left; }
.header-wrapper .stalbans-toolbar a.icon.book { background: #cdb8b6 url(img/book.svg) center center no-repeat; background-size: 75%; }
.header-wrapper .stalbans-toolbar a.icon.donate { background: #cdb8b6 url(img/donate.svg) center center no-repeat; background-size: 75%; }
.header-wrapper .stalbans-toolbar a.icon.friends { background: #cdb8b6 url(img/friends.svg) center center no-repeat; background-size: 75%; }
.header-wrapper .stalbans-toolbar a.icon.book:hover,
.header-wrapper .stalbans-toolbar a.icon.donate:hover,
.header-wrapper .stalbans-toolbar a.icon.friends:hover { background-color: #b8a5a3; }

.info-toolbar {
  background-color: #eee;
}
.info-toolbar .row {
  margin: -20px auto 0 auto; padding: 20px 0; width: 1024px; text-align: center;
}
.info-toolbar .row h2 a {
  padding:5px 10px; background-color: #ccc; text-decoration: none;  box-shadow: 0 1px 2px #999;
}

#header .phone {
color: #5c5c5c;
position: absolute;
right: 0;
top: 62px;
}

#header .phone a {
display: inline-block;
height: auto;
left: 0;
position: relative;
width: auto;
}

#header .phone p {
display: inline-block;
font-weight: normal;
line-height: normal;
text-align: right;
}

#content .contact-form { padding:3%; background-color:#eee; border:1px solid #ccc; box-shadow: 0 2px 2px #999, inset 0 0 4px #fff; margin-bottom:20px; }
#content .contact-form .row { margin-bottom:20px; display:block; }
#content .contact-form .row.last { margin-bottom:0; }
#content .contact-form .row label { display:block; }
#content .contact-form .row input { display:block; padding:1%; width:98%; font-size:1em; border:1px solid #ccc; box-shadow:inset 0 0 2px #ccc; }
#content .contact-form .row textarea { display:block; padding:1%; width:98%; font-size:1em; border:1px solid #ccc; box-shadow:inset 0 0 2px #ccc; }
#content .contact-form .row .button { box-shadow: 0 2px 2px #999 ; width:auto; background-color:#5c5c5c; padding:10px 20px; font-weight:bold; color:#fff; font-size:1.25em; text-shadow: 0 1px 0 #000; border:none; border-radius:5px; cursor: pointer;  }

#col-narrow .signup { background-color:#b8a5a3; margin:0 10px 20px 0; padding:10px; color:#fff; overflow:hidden; }
#col-narrow .signup h5 { color:#fff; font-size:1.5em; text-shadow: 0 1px 0 #000; }
#col-narrow .signup p { color:#fff; text-shadow: 0 1px 0 #000; }
#col-narrow .signup label { display:block; color:#fff; }
#col-narrow .signup .row { margin:10px 0; }
#col-narrow .signup .row.last { margin:0; }
#col-narrow .signup .row input { display:block; padding:5px; font-size:1em; border:1px solid #ccc; box-shadow:inset 0 0 2px #ccc; }
#col-narrow .signup .row .button { width:auto; background-color:#f1eded; padding:5px 10px; color:#b8a5a3; font-size:1.2em; text-shadow: 0 1px 0 #fff; border:none; border-radius:5px; cursor: pointer;  }

#col-narrow .signup-whats-on { background-color: #eee; margin-top: 20px; padding: 20px; color: #5c5c5c; overflow: hidden; }
#col-narrow .signup-whats-on h5 { color:#5c5c5c; font-size:1.5em; }
#col-narrow .signup-whats-on label { display:block; color:#fff; }
#col-narrow .signup-whats-on .row { margin:10px 0; }
#col-narrow .signup-whats-on .row.last { margin:0; }
#col-narrow .signup-whats-on .row input { display:block; padding:5px; font-size:1em; border:1px solid #ccc; box-shadow:inset 0 0 2px #ccc; }
#col-narrow .signup-whats-on .row .button { width:auto; background-color:#999; padding:5px 10px; color:#fff; font-size:1.2em; text-shadow: 0 1px 0 #444; border:none; border-radius:5px; cursor: pointer;  }

.terms {background-color: #eee; margin-top: 20px; padding: 5px; text-align: center; }

.trip-advisor { margin-left: -10px; }

.twitter-feed {
  border-top: 1px solid #b8a5a3;
  background-color: #f1eded;
  padding: 20px 0 10px;
}

.twitter-feed .col {
  width: 33.333333%;
  box-sizing: border-box;
  padding-right: 20px;
  float: left;
}

.twitter-feed .row {
  margin: 0 auto;
  width: 1024px;
}

.twitter-feed h4 {
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 1px 0 #fff;

}

.twitter-feed .time {
  background-color: #b8a5a3;
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  color: #fff;
  text-shadow: 0 1px 0 #5c5c5c;
}

/*
---------------------
media queries
---------------------
*/

/* For viewport wider than 1025px, the following rules will apply: */
@media screen and (min-width : 1025px) {
  .header-wrapper {
    height: 150px;
    background-color: #fff;
    margin: 0 auto;
    width: 1024px;
    position: relative;
    padding: 0;
  }
  
  #header { height:150px; background-color:#fff; margin:0 auto; width:1024px; position:relative; padding:0;
  }
  #header a#logo { position:absolute; left:0; top:15px; display:inline-block; }
  #header a#logo img { height:120px; }
  #header #menu,
  #header a { display:none; }
  #page { background-color:#fff; color:#5c5c5c; }

  #nav  { margin:0 auto; text-align:center; width: 100%; background-color: #cdb8b6; }
  #nav .row {
    width: 1024px;
    margin: 0 auto;
  }
  #nav ul { width:100%; text-align:center; z-index:999; position:relative; display: table; }
  #nav ul li { list-style: none; display:inline-block; font-size:16px; display:table-cell;  }
  #nav ul li a { color: #555555; display: inline-block; line-height: 40px; padding: 0 15px; text-decoration: none; transition: all 0.25s ease 0s; width: 100%; box-sizing: border-box; }
  #nav ul li a:hover { background-color: #b8a5a3; color:#fff; }

  #nav ul li > ul {
    background-color: #eee;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: none;
    left: 0;
    opacity: 0.97;
    padding: 1%;
    position: absolute;
    text-align: left;
    top: 40px;
    transition: all 0.25s ease 0s;
    width: 98%;
    border-radius: 0 0 10px 10px;
  }
  
  #nav ul li:hover > ul { display:block; transition: all 0.25s ease 0s;
 }
  #nav ul li li { float:left; width: 33.3333333333%; font-size: 14px; }
  #nav ul li li a { width:100%; box-sizing:border-box; color: #444; line-height: normal; padding: 12px 10px; text-shadow: 0 1px 0 #fff }
  #nav ul li li a:hover { background-color: #b8a5a3; color: #fff; text-shadow: 0 1px 0 #444 }

  #nav ul li:hover > a { background-color: #b8a5a3; transition:all 0.25s ease 0s; color: #fff; }

  #nav ul li.active a { display:inline-block; color:#fff; text-decoration:none; background-color: #b8a5a3; text-shadow: 0 1px 0 #000 }
  #nav ul li.active li a { background: none; color: #444; text-shadow: 0 1px 0 #fff; }
  #nav ul li.active li.active a { background-color: rgba(0,0,0,0.5); padding-left:18px; color: #fff; text-shadow: 0 1px 0 #000 }
  #nav ul li.active a:hover { background-color: #666; text-shadow: 0 1px 0 #444; }
  #nav ul li.active li a:hover { background-color: #b8a5a3; text-shadow: 0 1px 0 #444; color: #fff; }
  
  
  
  
  
  
#subnav { margin-bottom:20px;}
#subnav .services-link { margin-right:10px; margin:0 10px 0 0; font-size:1.3em; text-shadow: 0 1px 0 #000; }
#subnav .services-link a { padding:10px; background-color:#b8a5a3; color:#fff; display:block; border-bottom:1px solid #fff; text-decoration:none; }
#subnav h2 { font-size: 1.3em }
#subnav h2 a { background-color:#54271d; padding:10px; color:#fff; margin-right:10px; display:block; text-decoration:none; }
#subnav ul ul { margin-left:10px; }
#subnav li { list-style: none; text-decoration: none; display:block; font-size:16px; width:auto; border:none; background-color:none; }
#subnav li a, 
#subnav li a:link, 
#subnav li a:visited { background-color:#eee; display: block; text-decoration: none; color: #5c5c5c; padding:10px 0 10px 10px; border-top:1px solid #fff; margin-right:10px; }
#subnav li a:hover,
#subnav li.active a { color:#fff !important; cursor: pointer;  background: url(img/nav-bg.png) center right; text-shadow: 0 1px 0 #000; margin-right:0;}
#subnav li a:active { color:#fff !important; cursor: pointer; }
#subnav li.first a { }
#subnav li.last a { border-bottom:1px solid #54271d; margin-right:10px; }
#subnav li.last a:hover { margin-right:0; border-bottom:1px solid #fff; }
#subnav li.active.last a { color:#fff !important; cursor: pointer;  background: url(img/nav-bg.png) center right; text-shadow: 0 1px 0 #000; margin-right:0; border-bottom:none;}
#subnav li.active.last a:hover { border-bottom:none;}

/* level 2 */
#subnav li.active li a, 
#subnav li.active li a:link, 
#subnav li.active li a:visited { background-color:#dfdfdf; background-image:none; display: block; text-decoration: none; color: #5c5c5c !important; text-shadow: 0 1px 0 #fff; padding:5px 10px !important; border-top:1px solid #fff; margin-right:10px; }
#subnav li.active li a:hover,
#subnav li.active li.active a { color:#444 !important; cursor: pointer;  background: #ccc !important; text-shadow: 0 1px 0 #fff; }
#subnav li.active li.last a { margin-right:0; border-bottom:none; margin-right:10px; }
#subnav li.active.last li.last a { margin-right:0; border-bottom:none; margin-right:10px; }
#subnav li.active.last li a { margin-right:0; border-bottom:none; margin-right:10px; }

/* level 3 */
#subnav li.active li.active li a, 
#subnav li.active li.active li a:link, 
#subnav li.active li.active li a:visited { background-color:#eee !important; background-image:none; display: block; text-decoration: none; color: #5c5c5c !important; text-shadow: 0 1px 0 #fff; padding:5px 10px !important; border-top:1px solid #fff; margin-right:10px; }
#subnav li.active li.active li a:hover,
#subnav li.active li.active li.active a { color:#444 !important; cursor: pointer;  background: #ccc !important; text-shadow: 0 1px 0 #fff; }

#content { padding:20px 0 40px 0; }
#content .row { margin:0 auto; width:1024px; }
#footer { background-color:#828282; padding:20px 0; clear:both; }
#footer p, #footer p a { color:#fff; }
#footer .row { margin:0 auto; width:1024px; }
#col-narrow, #col-main { float:right; }
#col-narrow { width:340px; margin-right:34px;}
#col-main { width:650px;}
#col-main .row { width:100%; }
#col-main h1 { font-size:2em; color:#444; margin-bottom:20px; }
#sitemap { clear:both; margin:0; padding-bottom:35px; background-color:#f1eded; }
#sitemap .col { float:left; width:25%;  }
#sitemap .col h4 { color:#808080; font-size:30px; margin-bottom:10px; }
#sitemap .col.last {  }
#sitemap .title { background-color:#b8a5a3; padding:20px 0; }
#sitemap .title .row { margin-top:0; }
#sitemap .title h3 { font-weight:normal; padding:0; margin:0; color:#fff; font-weight:bold; font-size:30px; text-shadow: 0 1px 0 #5c5c5c; }
#sitemap .row { margin:0 auto; width:1024px; margin-top:35px; }

#sitemap ul li { list-style:none; margin: 0; font-size:25px; }
#sitemap ul li a,
#sitemap ul li a:link, 
#sitemap ul li a:visited { display: block; text-decoration: none; color: #808080; margin-bottom:10px; text-shadow: 0 1px 0 #fff }
#sitemap ul li a:hover, 
#sitemap ul li a:active { color:#000; cursor: pointer; }
#sitemap ul li a#selected, 
#sitemap ul li a#selected:link { color: #808080; }

#sitemap ul ul { border-top:1px solid #ccc; margin-right:30px; padding-top:10px; }
#sitemap ul ul li { list-style:none; text-decoration: none; font-size:14px; margin-bottom:0 !important; }
#sitemap ul ul li a,
#sitemap ul ul li a:link,
#sitemap ul ul li a:visited { display: block; text-decoration: none; color: #808080; }
#sitemap ul ul li a:hover,
#sitemap ul ul li a:active { color:#000; }

#search { position:absolute; padding:0; background-color:#fff; top:95px; right:0; height:30px; }
#search .search-button { border:none; background-color:#5c5c5c; color:#fff; padding:5px 5px; margin:0; width: 32px; height:32px; border:1px solid #5c5c5c; margin-left:-2px; cursor:pointer; }
#search input[type='text'] { border:0; padding:0 5px; margin:0; width:190px; height:30px; top:-1px; background:none; color:#666; font-size:11px; border:1px solid #5c5c5c; }
#search input[type='text']:focus { color:#666; font-style:normal; }

.sisea-results { padding:5px; font-size:1.2em; }
.sisea-results .sisea-highlight { padding:3px; background-color:#ccc; font-weight:bold; }
.sisea-results-list .sisea-highlight { padding:5px; background-color:#ddd; font-weight:bold; }
.sisea-result .search-result-category { display: inline-block; padding: 3px 5px 1px; background-color: #b8a5a3; color: #fff; border-radius: 3px; margin-left: 5px; font-size: 11px; text-transform: uppercase; }
  
  
.sisea-paging { padding:5px 10px; background-color:#eee; font-size:1em; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin-bottom:20px; }
.sisea-page { padding:5px; background-color:#fff; font-size:14px; border:1px solid #ccc; margin-left:10px; display:inline-block; border-radius:5px; text-decoration:none; }
.sisea-page.sisea-current-page { padding:2px 5px; background-color:#444; font-size:14px; border:1px solid #666; margin-left:10px; color:#fff; border-radius:5px }

.sisea-result { padding:5px 10px; font-size:14px; }
.sisea-result h3 { font-size:16px !important; font-weight:bold; }

.flexslider .item { height:415px; position: relative;}
.flexslider .item .item-link { width: 1024px; height: 300px; display: block; margin: 0 auto; }
.flexslider .flex-wrapper { background-color: rgba(0, 0, 0, 0.25); height: 115px; position: relative; width: 100%; }
.flexslider .flex-wrapper .flex-container { margin:0 auto; width:1024px; position:relative; }
.flexslider .flex-wrapper .flex-caption {
  color: #fff;
  display: block;
  font-family: "Goudy Bookletter 1911",serif;
  font-size: 50px;
  padding-top: 15px;
  text-align: right;
  }
.flexslider .flex-wrapper .flex-subcaption { color:#fff; font-size:19px; text-align: right; display: block; }
.flexslider .flex-wrapper .flex-subcaption br { display: none; }
  
.flexslider .flex-link { display: block; height: 315px; margin: 0 auto; position: relative; width: 1024px; }
.flexslider .flex-wrapper .flex-caption a, 
.flexslider .flex-wrapper .flex-subcaption a { text-decoration: none; color: #fff; }

  
#features { background-color: #f1eded; border-top:3px solid #b8a5a3; padding:40px 0 }
#features .row { margin:0 auto; width: 1024px; }
#features .feature { float:left; margin-right:62px; width:300px; background-color:#b8a5a3; padding-bottom:10px; }
#features .feature h4 { padding:10px; color:#fff; font-size:1.5em; text-shadow: 0 1px 0 #5c5c5c; }
#features .feature.last { margin-right:0; }
}

/* iPad landscape */

@media only screen and (max-width : 1024px)
{
  #header #spektrix-toolbar { position:absolute; top:5px; right:235px; margin:0; padding:0; }

  #header .trip-advisor-bubble {
  top: 10px;
}
  
  #header .phone {
left: 100px;
top: 50px;
  }

  #features .feature h4 { text-shadow: 0 1px 0 #5c5c5c; }

#sitemap,
#search,
.flex-caption,
.flex-subcaption { display:none; }
#catalogue .col { float: left; width:49%; margin-bottom:5px; }
#catalogue .col img { width:100%; }
#catalogue .col.odd { margin-right:2%; }
#catalogue .col .image { position:relative; }
#catalogue .col .image h3 { position:absolute; top:0; left:0; padding:5px; background-color:rgba(255,255,255,.75); width:100%; }

#catalogue.key-people .col { width:150px; }
#catalogue.key-people .col.odd { margin-right:25px; }
#catalogue.key-people .col .image img { max-width: 150px; }
#catalogue.key-people .col .image h3 { font-size: 14px; }
  
#footer { background-color:#828282; padding:20px; clear:both; }
#footer p, #footer p a { color:#fff; }
#footer .row { margin:0 auto; width:100%; }
.flexslider .item { height:250px;}
.flex-control-nav { bottom: 10px; }

#col-main h1 { color:#444; margin-bottom:10px; font-size:1.75em; }
#subnav h2 { font-size: 1em }
#subnav h2 a { background-color:#54271d; padding:10px; color:#fff; margin-right:0; display:block; text-decoration:none; }
#subnav .services-link { margin:0; font-size:1em;  }
#subnav .services-link a { padding:7px; background-color:#b8a5a3; color:#fff; display:block; border-bottom:1px solid #fff; text-decoration:none; }
#subnav { border-bottom:1px solid #54271d; margin-bottom:20px;}
#subnav ul ul { margin-left:10px; }
#subnav ul li { list-style: none; text-decoration: none; display:block; font-size:1em; width:auto; border:none; background-color:none; }
#subnav ul li a, 
#subnav ul li a:link, 
#subnav ul li a:visited { background-color:#eee; display: block; text-decoration: none; color: #5c5c5c; padding:5px 7px !important; border-top:1px solid #fff; }
#subnav ul li a:hover,
#subnav ul li.active a { color:#fff !important; cursor: pointer;  background-color: #5c5c5c; text-shadow: 0 1px 0 #000;}
#subnav ul li a:active { color:#fff !important; cursor: pointer; }
#subnav ul li.first a { }

#subnav li.active li a, 
#subnav li.active li a:link, 
#subnav li.active li a:visited { background-color:#dfdfdf; background-image:none; display: block; text-decoration: none; color: #5c5c5c !important; text-shadow: 0 1px 0 #fff; padding:5px 7px !important; border-top:1px solid #fff; margin-right:0; }
#subnav li.active li a:hover,
#subnav li.active li.active a { color:#444 !important; cursor: pointer;  background: #ccc !important; text-shadow: 0 1px 0 #fff; }
#subnav li.active li.last a { margin-right:0; border-bottom:none; }
#subnav li.active.last li.last a { margin-right:0; border-bottom:none; }
#subnav li.active.last li a { margin-right:0; border-bottom:none; }

/* level 3 */
#subnav li.active li.active li a, 
#subnav li.active li.active li a:link, 
#subnav li.active li.active li a:visited { background-color:#eee !important; background-image:none; display: block; text-decoration: none; color: #5c5c5c !important; text-shadow: 0 1px 0 #fff; padding:5px 7px !important; border-top:1px solid #fff; margin-right:0; }
#subnav li.active li.active li a:hover,
#subnav li.active li.active li.active a { color:#444 !important; cursor: pointer;  background: #ccc !important; text-shadow: 0 1px 0 #fff; }

#services,
#whatson { width:100%; }

#col-narrow .signup { margin-right:0;}
}

/* ipad */
@media only screen and (min-width : 768px) and (max-width : 1024px)
{
  #col-main { float:right; width:62%; }
  #col-narrow { float:left; width:35%; }
  #call-to-action { width:200px; }
  #call-to-action .narrow { float:left; margin:0 10px 10px 0; width:95px; }
  #header #menu { display:none; }
  #header { height:110px; background-color:#fff; margin:0 auto; width: 100%; position:relative; padding:0 10px; box-sizing: border-box; }
  #header a#logo { position:relative; background:none; top:5px; left:auto; }
  #header #logo img { width:100px; }
  #header #social-icons { position:absolute; top:10px; right:0; margin:0; padding:0; }
  #search { display:inline-block; position:absolute; padding:0; background-color:#fff; top:15px; right: 10px; height:30px; }
  #search .search-button { display:none; }
  #search input[type='text'] { border:0; padding:0 5px; margin:0; width:190px; height:30px; top:-1px; background:none; color:#666; font-size:11px; border:1px solid #5c5c5c; }
  #search input[type='text']:focus { color:#666; font-style:normal; }

  .header-wrapper {
  height:110px;
  background-color:#fff;
  margin:0 auto;
  width: 100%;
  position:relative;
  padding:0;
}
  
  #nav  { margin:0 auto; text-align:center; width: 100%; background-color: #cdb8b6; }
  #nav .row {
    width: 100%;
    margin: 0 auto;
  }
  #nav ul { width:100%; text-align:center; z-index:999; position:relative; display: table; }
  #nav ul li { list-style: none; display:inline-block; font-size:16px; display:table-cell;  }
  #nav ul li a { color: #555555; display: inline-block; line-height: 40px; padding: 0 15px; text-decoration: none; transition: all 0.25s ease 0s; width: 100%; box-sizing: border-box; }
  #nav ul li a:hover { background-color: #b8a5a3; color:#fff; }

  #nav ul li > ul {
    background-color: #eee;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: none;
    left: 0;
    opacity: 0.97;
    padding: 1%;
    position: absolute;
    text-align: left;
    top: 40px;
    transition: all 0.25s ease 0s;
    width: 98%;
    border-radius: 0 0 10px 10px;
  }
  
  #nav ul li:hover > ul { display:block; transition: all 0.25s ease 0s; }
  #nav ul li li { float:left; width: 33.3333333333%; font-size: 14px; }
  #nav ul li li a { width:100%; box-sizing:border-box; color: #444; line-height: normal; padding: 12px 10px; text-shadow: 0 1px 0 #fff }
  #nav ul li li a:hover { background-color: #b8a5a3; color: #fff; text-shadow: 0 1px 0 #444 }

  #nav ul li:hover > a { background-color: #b8a5a3; transition:all 0.25s ease 0s; color: #fff; }

  #nav ul li.active a { display:inline-block; color:#fff; text-decoration:none; background-color: #b8a5a3; text-shadow: 0 1px 0 #000 }
  #nav ul li.active li a { background: none; color: #444; text-shadow: 0 1px 0 #fff; }
  #nav ul li.active li.active a { background-color: rgba(0,0,0,0.25); border-left:2px solid #fff; padding-left:18px; }
  #nav ul li.active a:hover { background-color: #666; text-shadow: 0 1px 0 #444; }
  #nav ul li.active li a:hover { background-color: #b8a5a3; text-shadow: 0 1px 0 #444; color: #fff; }
  
  #content { padding:10px; width:100%; margin:0 auto; transition: width 0.2s ease; -webkit-transition: width 0.2s ease; -mox-transition: width 0.2s ease; box-sizing: border-box; }
  #features { background-color: #b8a5a3; border-top:none; padding:0;}
  #features .row { margin:0; width: 100%; }
  #features .feature { float:left; margin-right:0; width:33.3333333333%; background-color:#b8a5a3; padding-bottom:0; }
  #features .feature img { width:100%; display:block; }
  #features .feature h4 { padding:10px; color:#fff; font-size:1.25em; }
  #features .feature.last { margin-right:0; }
  #whatson .title h3 { color:#fff; font-size:1.25em; background:url(img/title-bg.png) center right; width:50%; padding:5px 10px;  }
  #whatson .title p { position:absolute; color:#fff; font-size:1em; float:left; top:2px; right:5px; }
  .frame { display:inline-block; background-color:#eee; box-shadow: 0 2px 2px #999; padding:5px; margin-bottom:10px; width:100%; }
  .frame img { display:block; width:100% }
  .frame span { display:block; padding:5px 5px 0 0; }
  .frame.frame-right { float:right; margin:0 0 10px 20px; width:50%;}
  .frame.frame-left { float:left; margin: 0 20px 10px 0; width:50px;}
  #col-main .welcome h2 { font-size:1.9em; margin-bottom:10px; }
  .twitter-feed .row { width: 740px; }

  .info-toolbar { background-color: #eee; margin-top: -20px; }
  .info-toolbar .row { margin: 0 auto; padding: 10px 0; width: 100%; text-align: center; }
  .info-toolbar .row h2 { line-height: 150%; }
  .info-toolbar .row h2 a { padding:3px 5px; background-color: #ccc; text-decoration: none;  box-shadow: 0 1px 2px #999; display: inline-block; }

  .header-wrapper .spektrix-toolbar {
    right: 10px;
  }
}

/* iPad landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
    .flexslider .item {
      height: 300px;
    }
  
}

/* iPad portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {

    #nav ul li {
      font-size: 13px;
    }
    .whatson-buttons .whatson-button img {
      width: 215px;
    }
    .header-wrapper .stalbans-toolbar {
      left: 33%;
    }
}


/* iphone */
@media only screen and (max-width : 767px)
{
  #header .sitename { display:inline-block; }
  img { max-width:100%; }
  .flexslider { margin: 0; clear: both; }
  #col-main .welcome { padding:0; background-color:#fff; box-shadow: none; margin-bottom:20px; }
  #col-main .welcome h2 { font-size:30px; margin-bottom:10px; }
  #header { height:40px; text-align:center; background-color:#b8a5a3; box-shadow: 0 3px 5px #999; }
  #header a#logo { position:relative; background:none; top:auto; left:auto; display:none }
  #header #logo img { width:100px; }
  #content { padding:15px; width:auto; margin:0; }
  #nav,
  #sitemap,
  #search,
  #social-icons,
  .flex-caption,
  .flex-subcaption,
  .trip-advisor-bubble,
  #header .phone { display:none; }
  
  .row {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  
  #col-main h2 { color:#444; margin-bottom:10px; font-size:1.75em; }
  #col-main .intro { color:#444; margin-bottom:10px; font-size:1.25em; line-height:125%; padding-bottom:10px; border-bottom:1px solid #eee; margin-bottom:10px; }
  #call-to-action { width:100%; }
  #call-to-action .narrow { float:left; margin:0; width:50%; }
  #call-to-action .narrow.last { float:right; margin:0; width:50%; }
  #call-to-action .narrow img,
  #call-to-action .wide img { width:100%; }
  #features { border:none; padding:0; }
  #features .row { margin:0; width: 100%; }
  #features .feature { float:none; margin-right:0; width:100%; background-color:#b8a5a3; padding:0; }
  #features .feature img { width:100%; display:block; }
  #features .feature h4 { padding:10px; color:#fff; font-size:1.5em; }
  #features .feature.last { margin-right:0; }
  #banner { margin-bottom:10px; }
  #banner img { display:block;}
  #footer { padding:15px 0; }

  #col-main .welcome h2 { border:none; }

  .frame { display:block; background-color:#eee; box-shadow: 0 2px 2px #999; padding:2%; margin-bottom:20px; width:96%; }
  .frame img { display:block; width:100% }
  .frame span { display:inline-block; padding:5px 5px 0 0; width:100%; }
  .frame.frame-right,
  .frame.frame-left { float:none; margin: 0 0 20px 0; padding:2%; width:96%;}

  #catalogue .col { float: none; width:100%; }
  #catalogue .col img { width:100%; }
  #catalogue .col.odd { margin-right:0; }
  #catalogue .col .image { position:relative; }
  #catalogue .col .image img { max-width:767px; }
  #catalogue .col .image h3 { position:absolute; top:0; left:0; padding:5px; background-color:rgba(255,255,255,.75); width:100%; }

  #catalogue.key-people .col { float: none; width:100%; }
  #catalogue.key-people .col img { width:100%; }
  #catalogue.key-people .col.odd { margin-right:0; }
  #catalogue.key-people .col .image { position:relative; }
  #catalogue.key-people .col .image img { max-width:767px; }
  #catalogue.key-people .col .image h3 { position:absolute; font-size: 1em; top:0; left:0; padding:5px; background-color:rgba(255,255,255,.75); width:100%; }

  .twitter-feed .row { width: 100%; padding: 0 15px; box-sizing: border-box; }
  .twitter-feed .col {
    float: none;
    width: 100%;
  }
  
  .info-toolbar { background-color: #eee; }
  .info-toolbar .row { margin: 0 auto; padding: 10px 0; width: 100%; text-align: center; }
  .info-toolbar .row h2 { line-height: 150%; }
  .info-toolbar .row h2 a { padding:3px 5px; background-color: #ccc; text-decoration: none;  box-shadow: 0 1px 2px #999; display: inline-block; }
  
  .header-wrapper .spektrix-toolbar { position:relative; top:0; right:0; margin:0; padding:0; text-align: center; display: block; height: 40px; }
  .header-wrapper .spektrix-toolbar p { line-height: 40px; margin:0; padding:0; }
  .header-wrapper .spektrix-toolbar a { position:relative; width:100px; padding: 0; margin: 0 0 0 36px; font-weight:normal; text-decoration:none; left: 0; transition: 0.2s ease-in-out; }

  .header-wrapper .stalbans-toolbar { position: relative; bottom: 10px; left: 0; margin: 0; padding: 0 10px; text-align: center; display: block; }
  .header-wrapper .stalbans-toolbar p { margin: 0; padding: 0; text-align: left; width: 33.333333%; float: left; line-height: 20px; }
  .header-wrapper .stalbans-toolbar a.icon { display: inline-block; color:#333; background-color: #eee; height: 20px; width: 20px; overflow: hidden; text-indent: -999px; border: 1px solid #333; border-radius: 50%; text-align: left; float: left; margin-right: 5px; }
  .header-wrapper .stalbans-toolbar a.icon.book { background: #cdb8b6 url(img/book.svg) center center no-repeat; background-size: 75%; }
  .header-wrapper .stalbans-toolbar a.icon.donate { background: #cdb8b6 url(img/donate.svg) center center no-repeat; background-size: 75%; }
  .header-wrapper .stalbans-toolbar a.icon.friends { background: #cdb8b6 url(img/friends.svg) center center no-repeat; background-size: 75%; }
  
}