@import url('/assets/css/custom/countryside-icons.css');

#page {
	/* Gradient and footer images in one. */
	background:	url(/-/media/Files/CSS/microsites/basingstoke-canal/basingstoke-canal-footer-left.png),
				url(/-/media/Files/CSS/microsites/basingstoke-canal/countryside-footer-right.png),
				url(/-/media/Files/CSS/microsites/basingstoke-canal/kingfisher.png),
				url(/-/media/Files/CSS/microsites/basingstoke-canal/basingstoke-header.png),
				#d8daba;
	background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
	background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -140px left;
	background-size:auto, auto, auto, contain;

	padding-bottom: 25em;
	margin-bottom: 0;
}

#page .navbar {
	margin-top:140px;
}
#page .navbar .nav {
	text-align: center;
	margin-bottom: 0.75em;
	width: 100vw;
	left: calc(-50vw + 50%);
}

#page .navbar .nav>li {
	border: none;
	float: none;
	display: inline;
	margin: 0 0.25em;
	padding: 0.75em 0.5em;
}

#page .navbar .nav>li>a {
	display: inline-block;
    padding: 0;
	text-shadow: none;
}

#page .navbar-inner {
	background-color:transparent;
	box-shadow:none;
	border:none;
}
#page .navbar-inner .nav#local_menu_header > li {
	border: none;
	float: none;
	display: inline;
	margin: 0 0.25em;
	padding: 0.75em 0.5em;
}
#page .navbar-inner .nav#local_menu_header > li > a {
	color:#1d5c42;
	display: inline-block;
}
.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a:active,
.breadcrumb a:focus,
.breadcrumb a:hover {
	color:#ffffff;
	border-bottom-color:#ffffff;
}
#global_container_breadcrumb aside {
	display:none;
}

.surryImg {
	float:left;
}

@media only screen and (min-width: 37em) {
	
	.dropdown-menu li a:hover,
	.dropdown-menu li a:focus {
		color: #222;
		background-color:#aed7cf;
	}
}
@media only screen and (min-width: 37em) and (max-width: 58em) {
	/*#page .navbar{
		margin-top:0;
	}*/
	#page .navbar-inner .nav#local_menu_header > li > a{
		margin:0;
	}
	.navbar .nav{
		margin: 0 auto;
		display: block;
		width: 497px;
	}
	.breadcrumb li a{
		font-size:0.7rem;
		line-height:100%;
	}
}
@media only screen and (max-width: 37em) {
	#page .logo {
		display: block;
		width: 75%;
		margin: 0 auto .5em;
		float: none;
	}
}
@media only screen and (min-width: 593px) and (max-width: 780px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top 0px left;
	}
	#page .navbar {
		margin-top:65px;
	}
	#global_container_breadcrumb {
		margin-bottom:5px;
	}
}
@media only screen and (min-width: 781px) and (max-width: 929px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 67px right 25%, top 0px left;
	}
	#page .navbar {
		margin-top:85px;
	}
}
@media only screen and (min-width: 930px) and (max-width: 960px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 67px right 25%, top 0px left;
	}
	#page .navbar {
		margin-top:110px;
	}
}
@media only screen and (min-width: 960px) and (max-width: 1109px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 67px right 25%, top -20px left;
	}
	#page .navbar {
		margin-top:100px;
	}
}
@media only screen and (min-width: 1110px) and (max-width: 1180px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -60px left;
	}
	#page .navbar {
		margin-top:90px;
	}
}
@media only screen and (max-width: 37em) {
	#page {
		/* Gradient and footer images in one. */
		background:	url(/-/media/Files/CSS/microsites/basingstoke-canal/basingstoke-canal-footer-left.png),
					url(/-/media/Files/CSS/microsites/basingstoke-canal/countryside-footer-right.png),
					url(/-/media/Files/CSS/microsites/basingstoke-canal/kingfisher.png),
					#d8daba;
		background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%;
		background-size:auto, auto, auto, contain;

		padding-bottom: 25em;
		margin-bottom: 0;
	}
	.breadcrumb a,
	.breadcrumb a:visited,
	.breadcrumb a:active,
	.breadcrumb a:focus,
	.breadcrumb a:hover {
		color:#000000;
		border-bottom-color:#000000;
	}
	#page .navbar {
		margin-top:0;
	}
}
@media only screen and (min-width: 1181px) and (max-width: 1250px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 67px right 25%, top -40px left;
	}
}
@media only screen and (min-width: 1250px) and (max-width: 1360px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 67px right 25%, top -66px left;
	}
}
@media only screen and (min-width: 1361px) and (max-width: 1459px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -90px left;
	}
}
@media only screen and (min-width: 1460px) and (max-width: 1570px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -115px left;
	}
	#page .navbar {
		margin-top:140px;
	}
}
@media only screen and (min-width: 1571px) and (max-width: 1749px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -140px left;
	}
	#page .navbar {
		margin-top:140px;
	}
}
@media only screen and (min-width: 1650px) and (max-width: 1749px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -170px left;
	}
}
@media only screen and (min-width: 1750px) {
	#page .navbar {
		margin-top:210px;
	}
}
@media only screen and (min-width: 1900px) and (max-width: 2049px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -180px left;
	}
}
@media only screen and (min-width: 2050px) and (max-width: 2219px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -220px left;
	}
}
@media only screen and (min-width: 2220px) and (max-width: 2370px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -260px left;
	}
}
@media only screen and (min-width: 2371px) and (max-width: 2560px) {
	#page {
		background-position:left calc(100%), right calc(100%), bottom 90px right 25%, top -300px left;
	}
}

a[role="button"].green {
	background-color: #1d5c42;
	border-color: #D8DABA;
	color: #ffffff;
	text-shadow:none;
}
a[role="button"].green:hover {
	background-color: #00693c;
	color: #ffffff;
}
#slideshow .navcontrols {
	z-index:9999;
}

.breakout-bg {
	padding:1em 0;
}
.breakout-bg.alternate {
	background:rgba(29,92,66,0.5);
	color:#ffffff;
	text-shadow:0 1px rgba(0,0,0,.75);
}
.breakout-bg.alternate h2 {
	color:#ffffff;
	text-shadow:0 1px rgba(0,0,0,.75);
}
.breakout-bg.alternate .bx-viewport.has-next:after {
	background: rgba(29,92,66,0.5);
	background: -moz-linear-gradient(left, rgba(0,98,128,0) 0%, #7a9b7e 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, #7a9b7e), color-stop(100%, rgba(0,98,128,0.25)));
	background: -webkit-linear-gradient(left, rgba(0,98,128,0) 0%, #7a9b7e 100%);
	background: -o-linear-gradient(left, rgba(0,98,128,0) 0%, #7a9b7e 100%);
	background: -ms-linear-gradient(left, rgba(0,98,128,0) 0%, #7a9b7e 100%);
	background: linear-gradient(to right, rgba(0,98,128,0) 0%, #7a9b7e 100%);
	right:-1px;
}

.breakout-bg.alternate .bx-viewport.has-prev:before {
	background: rgba(29,92,66,0.5);
	background: -moz-linear-gradient(left, #7a9b7e 0%, rgba(248, 248, 248, 0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248, 248, 248, 0)), color-stop(100%, #7a9b7e));
	background: -webkit-linear-gradient(left, #7a9b7e 0%, rgba(248, 248, 248, 0) 100%);
	background: -o-linear-gradient(left, #7a9b7e 0%, rgba(248, 248, 248, 0) 100%);
	background: -ms-linear-gradient(left, #7a9b7e 0%, rgba(248, 248, 248, 0) 100%);
	background: linear-gradient(to right, #7a9b7e 0%, rgba(248, 248, 248, 0) 100%);
}

.breakout-bg a.thumbnail.center {
	text-shadow: none;
}

.well {
	background:#1d5c42;
	color:#fff;
	text-shadow: 0 1px rgba(0,0,0,.75);
}

.well.dateblock{
	color: #2f2f2f;
	text-shadow: none;
}

.well a:link,
.well a:hover {
	color:#fff;
	 border-bottom: 1px solid #fff;
	padding-bottom: 1px;
	text-decoration: none;
}

.well a:visited {
    color: #D8DABA;
    border-bottom: #D8DABA;
 
}
.well.alternate {
	background-color:#7a9b7e;
	color:#000000;
}

.well.alternate a:link,
.well.alternate a:hover,
.well.wonky a:link,
.well.wonky a:hover {
	color: #000000;
	border-bottom: 1px solid #000000;
	text-shadow: none;
}

.well.alternate a:visited {
    color: #012C46; 
    border-bottom: #012C46;
}

/* Wonky well styles */
.well.wonky {
	position: relative;
	margin-top: 1em;
	margin-right: 25px;
	padding-left:2em;
	padding-right:50px;
	background-color:#7a9b7e;
	color:#000000;
}

.well.wonky > *,
.well.wonky.alternate > * {
	z-index:1000;
	position:relative;
}
.well.wonky:before,
.well.wonky:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:0;
	 background-color:#7a9b7e;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.well.wonky:before {
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.well.wonky:after {
	-webkit-transform: skewX(3.25deg);
	transform: skewX(3.25deg);
}

.well.wonky.alternate {
	background-color:#1d5c42;
}
.well.wonky.alternate:before,
.well.wonky.alternate:after {
	background-color:#1d5c42;
}

.well.alternate p span.xtra-large {
    color: #000;
}


#page .event-search-breakout {
	background: none;
	padding: 0;
}

.nb-things-to-do .newsletter-img {
    background: #709E7C !important;
}

label[for="newsletter-email"] {
	color: #000 !important;
}