@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic,700italic|Titillium+Web:900);
/* CSS Document */
/** { margin: 0; padding: 0px; }*/



*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}dl,menu,ol,ul{margin:0 0 20px 0;list-style:none}dd{margin:0 0 0 40px}menu,ol,ul{padding:0}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


html { font-family:'Source Sans Pro', sans-serif; font-weight:700;font-size: 18px;  line-height: 1.4;}@media (max-width: 62em){html {font-size:15px;}}@media (max-width: 48em){html {font-size:13px;}}
	body {
	color: #ffffff;
/*	text-align: center; */
	background-color: #C4DCE3;
	overflow-x:hidden;
	margin: 0;
	}
	.group:after{content:"";display:table;clear:both}
.page-wrap { 
/*	text-align: center;*/
	margin: 0 auto;
	padding: 0px;
	max-width: 1350px;
	width: 75%;
	border: solid #777;
	border-width: 1px 1px;
	}	@media (max-width: 75em){.page-wrap {width: 90%;}} @media (max-width: 48em){.page-wrap {width: 100%;}}
	.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}
	
//-------------------------------FONTS

h1, h2, h3, h4, h5, h6 {font-weight:700; }
.quote h4 { margin:0; padding:0;} 

// ------------------------------HEADER
img {margin:0; padding:0;}
header {margin:0; padding:0;}
.logo { float: left; position: absolute; width: 238px; height:80px; background: url(../images/logo.png) no-repeat; top:15px; left: 15px; z-index: 1; }
.newlogo { float: left; position: absolute; width: 374px; height:125px; background: url(../images/Cable_Bay_Kayaks_Logo.png) no-repeat; top:15px; left: 15px; z-index: 1; }
@media (max-width: 48em){.logo {top:5px; left: 5px;}}
.quote {float: right; position: absolute; text-align:right; top:15px; right:15px;}	@media (max-width: 48em){.quote{position:absolute; top:5px; right:5px;} .home .quote {position:absolute; top:auto; bottom:2px; right:2px;}}
q {font-style:italic;}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
.ref { font-size:small;}
.ident-bar {
margin: 0;
padding: 0;  
position: relative;        
}	

.content-wrap {
  background: #2c698d;
  width:100%;
}

	.grid{padding:40px 0 40px 40px}.grid-1-2{width:50%}.grid-2-3{width:66.66%}.grid-1-3{width:33.33%}.grid-1-4{width:25%}.grid-3-4{width:75%}[class*='grid-']{float:left;padding-right:40px;position:relative;margin:0 0 40px 0}@media (max-width: 48em){[class*='grid-']{float:none;width:100%}}
aside {
text-align:center;}
/* quotation div */
div#quote {
	height: 76px;
	margin: 0px;
	padding: 0em;
float: right;
}

div#quote h4 {
	line-height: normal;
	font-weight: bold;
	text-align: right;
	text-indent: 30%;
	margin: 0px;
	vertical-align: text-bottom;
	padding: 15px 15px 15px 0px;
}
img.logo {
	float: left;
	margin: 0 1em 0.8em 0;
	}
img.border
{
	border: 4px solid #C4DCE3;
}	
	
/* main content */	
div#content {
	text-align: left;
	margin-top: 15px;
	margin-bottom: 0px;
	padding-top: 210px; 
	}

/* classes for in content */
.backgroundbluetext {
	color: #C4DCE3;
}
.center
{
text-align: center;
}
.smallertext {
	font-size: 0.8em;
}

.whitesmall {
    font-size: 0.9em;
    color: #FFFFFF;
}
.photobox {
    background-color: #C4DCE3;
    padding: 4px 8px;
    text-align: center;
    color: #2C698D;
 /*   width: 130px;*/
}
.photo-copyright {
	font-size: 10px;
	color: #ffffff;
}

P.index-photoheading {
	font-size: 12px;
	margin-top: 3px;
	margin-bottom: 0px;
}
.grid a {
    border-bottom: 1px dotted;
	}
.grid a:hover, .grid a:active {
    border-bottom: 1px solid;
	}

a:link {
    color: #f48130;
}
a:visited {
    color: #dc742b;
}
a:hover {
    color: #f7a76e;
}
a:active {
    color: #f69a59;
}
.orangebox a:link {
    color: #2c698d;
}
.orangebox a:visited {
    color: #235471;
}
.orangebox a:hover {
    color: #6d9ebc;
}
.orangebox a:active {
    color: #628ea9;
}

footer {
clear: both;
text-align: center;
width: 100%;
background: #2c698D;
	color: #C4DCE3;
	font-weight: bold;
/*	margin: 10px;*/
	font-size: 0.8em;
}
footer img{
	margin: 0px 10px 0px 40px;
}
.footer-header { color: #fff; text-align: left;}
footer a:link, footer a:visited {
	color: #C4DCE3;
	}
/* the following are bits not currently used but may be

#content li {
	line-height: 1.4em;
	color: #FFFFFF;
}
*/


/* Navigation styling */
.nav {
text-align:center;
	position:relative;
	display:inline-block;
	/*font-size:20px;*/
	font-weight:700;
	width: 100%;
	background: #6d9ebc;
}
.gallery .nav { background: #c4dce3; /* to make menu work with odd % */}
.nav-list {
	width:100%;
	list-style:none;
}
.nav-item {
	float:left;
	*display:inline;
	zoom:1;
	width:16.66%;
}
.nav-item a {
	display:block;
/*	width:16.6%;*/
	padding:15px 2px;
	color:#FFF;
	background:#6d9ebc;
	text-decoration: none;
}
/*.nav-item:first-child a {
	border-radius:5px 0 0 5px;
}
.nav-item:last-child a {
	border-radius:0 5px 5px 0;
}
*/
.nav-item a:hover {
	background:#c4dce3;
	color: #2c698d;
}
/* Current button */
.home .nav-item.home a, .tours .nav-item.tours a, .local .nav-item.local a, .accomm .nav-item.accomm a, .contact .nav-item.contact a, .gallery .nav-item.gallery a { background:#2c698d; color: #fff;}
/* Mobile Navigation */
.nav-mobile {
	display:none; /* Hide from browsers that don't support media queries */
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	background:#6d9ebc url(../images/nav.svg) no-repeat center center;
	height:40px;
	width:40px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}

.google-maps {
        position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
//---------------------------- LISTS
/*.main-content ul, .popBox ul { margin-left:40px;}
.main-content ul li { color: #c4dce3;}

.main-content li:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  color: #cdab54;
  color: #ee7318;
}
*/
.main-content ul, ol{
  display:inline-block;
  border:solid 1px;
  padding:0.5em;
  padding-left:2em;
  margin:0.5em;
}

.main-content ul, ol.custom-bullet{
  list-style:none;
  margin-left: 40px;
  vertical-align: middle;
}
.main-content ul > li, ol.custom-bullet >li {
  clear:left;
  margin-bottom: 1em;
}


.main-content ul > li:before, ol.custom-bullet > li:before {
  content:"";
  height:1em;
  width:1em;
  display:block;
  float:left;
  margin-left:-1.5em;
  padding-top:5px;
  background-position: center;
  background-repeat:no-repeat;
  background-size:100%:
}


.main-content ul > li:before{
  content:"";
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid meet'><circle cx='50' cy='50' r='45' fill='#ee7318' stroke='#ee7318' stroke-width='5'/></svg>");
}
.singlelblue {
    padding: 10px;
    text-align: left;
    color: #2C698D;
    background-color: #C4DCE3;
    vertical-align: middle;
}
.singlelblue img { padding-right: 10px; max-width: 50%}
#box-container { max-width:750px; margin:0 auto;}
.box {
    list-style-type: none;
    float: left;
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    width: 30%;
}
.box a img {
    -webkit-back-visibility: hidden;
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
aside ul { display: block; list-style: disc; text-align: left; padding-left: 25px; color: #2c698d;}
aside img {
    max-width: 100%;
    height: auto;
}
figure { 
  display: block; 
  position: relative; 
  overflow: hidden; 
}

figcaption { 
position: absolute;
/*display:block;*/
width:200px; 
font-size: 1.5em;
    top: 4px;
	left: 50%;
	margin-left: -100px;
    padding: .5em;
  /*    background: rgba(0,0,0,0.5);*/
}



//---- BUTTONS
.myButton {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f87e2d), color-stop(1, #f79f2d));
	background:-moz-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-webkit-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-o-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-ms-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:linear-gradient(to bottom, #f87e2d 5%, #f79f2d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f87e2d', endColorstr='#f79f2d',GradientType=0);
	background-color:#f87e2d;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:8px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f79f2d), color-stop(1, #f87e2d));
	background:-moz-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-webkit-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-o-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-ms-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:linear-gradient(to bottom, #f79f2d 5%, #f87e2d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f79f2d', endColorstr='#f87e2d',GradientType=0);
	background-color:#f79f2d;
}
.myButton:active {
	position:relative;
	top:1px;
}
.button, #rcp_submit, #rcp_update_card {
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  outline: 0;
  border-radius: 0;
  color: white !important;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f87e2d), color-stop(1, #f79f2d));
	background:-moz-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-webkit-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-o-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:-ms-linear-gradient(top, #f87e2d 5%, #f79f2d 100%);
	background:linear-gradient(to bottom, #f87e2d 5%, #f79f2d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f87e2d', endColorstr='#f79f2d',GradientType=0);
	background-color:#f87e2d;
  -moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
  white-space: nowrap;
  padding: 9px 30px !important;
  line-height: 1.4;
  border: 0;
  position: relative;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  
	text-shadow:0px 1px 0px #111;
}
.button:not(.disabled):hover, .button:not(.disabled):focus, #rcp_submit:not(.disabled):hover, #rcp_submit:not(.disabled):focus, #rcp_update_card:not(.disabled):hover, #rcp_update_card:not(.disabled):focus {
  color: white;
  bbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f79f2d), color-stop(1, #f87e2d));
	background:-moz-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-webkit-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-o-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:-ms-linear-gradient(top, #f79f2d 5%, #f87e2d 100%);
	background:linear-gradient(to bottom, #f79f2d 5%, #f87e2d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f79f2d', endColorstr='#f87e2d',GradientType=0);
	background-color:#f79f2d;
}
//---- SIDE BOXES
.boxheader { background-color: #333;}
.darkbox { background-color: #6d9ebc; line-height: 1.4em; font-size: 1.5em; }
.bluebox { background-color: #c4dce3;}
.orangebox {background-color: #F48130;
    color: #ffffff;
    padding: 4px 8px;
    text-align: left;}
.bluebox {padding:4px 8px; color: #555555; background-color: #c4dce3; border: none}
//---- CSS POPUPS
.pop-up {position:absolute; top:0; left:-500em}
.pop-up:target {position:static; left:0;}

.popBox {
text-align: left;
font-weight:700;
  background-color: #2C698D;
	margin: 0;
	padding: 10px;
  /* alternatively fixed width / height and negative margins from 50% */
  position:absolute; left:30%; right:30%; top:30%; bottom:30%;

  z-index:1;
  /* padding:1%; removed 17/07/2012 */
  border:1px solid #3a3a3a;

  /* CSS3 rounded corners, drop-shadow and opacity fade in */
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-box-shadow:2px 2px 4px #3a3a3a;
  -moz-box-shadow:2px 2px 4px #3a3a3a;
  box-shadow:2px 2px 4px #3a3a3a;
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}

.popBox:hover {box-shadow:3px 3px 6px #5a5a5a;}
li.answer
{
	color: #c4dce3;
	list-style-type: none;
	margin-bottom: 10px;
}
.popBox a {
color: #c4dce3;
}
  
  .lightbox {display:none; text-indent:-200em; background:#000; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox {display:block}
.close {
  position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
  font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none;
  background:#000; border:3px solid #fff; color:#fff;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  -moz-box-shadow: 0 0 1px 1px #3a3a3a;
  -webkit-box-shadow: 0 0 1px 1px #3a3a3a;
  box-shadow: 0 0 1px 1px #3a3a3a;
}
.close:before {content:"X"}
.close:hover {box-shadow:0 0 1px 1px #c00; background:#c00;}
.close span {text-indent:-200em; display:block;}
/* .popScroll {max-height:99%; overflow-y:scroll;} removed 17/07/2012 */
.popScroll {position:absolute; top:9%; left:3%; right:3%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}
  
/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media screen and (min-width: 1250px) {
   #box-container { max-width:1000px; margin:0 auto;}
.box {
    list-style-type: none;
    float: left;
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    width: 23%;
}
}
@media screen and (min-width: 1800px) {
   #box-container { max-width:1250px; margin:0 auto;}
.box {
    list-style-type: none;
    float: left;
    margin-bottom: 1rem;
    margin-left: 1%;
    margin-right: 1%;
    width: 18%;
}
}
@media only screen and (min-width: 320px) and (max-width: 48em) {
	.nav-mobile {
		display:block;
	}
	.nav {
		width:100%;
		padding:40px 0 0;
	}
	.nav-list {
		display:none;
	}
	.nav-item {
		width:100%;
		float:none;
	}
	.nav-item a {
		background:#6d9ebc;
		padding:10px;
	}
/*	.nav-item:first-child a {
		border-radius:5px 0 0;
	}
	.nav-item:last-child a {
		border-radius:0 0 5px 5px;
	}*/
	.nav-active {
		display:block;
	}
	.nav-mobile-open {
		border-radius:5px 5px 0 0;
		-webkit-border-radius:5px 5px 0 0;
		-moz-border-radius:5px 5px 0 0;
	}
}