body {
  background-image: url('../images/patterns/billie_holiday.png');
}

.jumbotron-custom {
	padding: 40px 0px 0px 0px;
	margin-bottom	: 0px;
	background-size: cover; 
	background-position: center; 
	min-height: 300px;
	color: #ffffff;
	text-shadow: 1px 1px #000000;
	text-overflow: ellipsis;
	/*margin-left: 0px;
	margin-right: 0px;*/	
}

.jumbotron-custom > .container {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	padding: 5px;
	text-align: center;
	height: 100%;
	min-height: 300px;
}

.featurette-heading >.text-muted {
	color: #fcff9e;
}

.jumbotron-custom   h1 {
	letter-spacing: 3pt;
	font-family: "Salsa", helvetica, sans-serif;
	margin-bottom	: 0px;
}

.featurette-divider {
	margin: 40px 0px; 
	border-color: #999;
}

hr {
	border-color: #999;
}

.contact {
	margin: 8px;
	text-align: left !important;
}

.contact h2 {
  margin-bottom: 3px;
}
.pier-map-iframe {
 visibility: hidden; position: absolute; 
 }	

.italic {
	font-style: italic;
}

.mainpage-intro-smallscreen  {
	visibility: visible;
	position: relative;
}
.mainpage-intro-md  {
	visibility: hidden;
	position: absolute;
}
.mainpage-intro-lg  {
	visibility: hidden;
	position: absolute;
}

.footer_contact {
	visibility: hidden;
	position: absolute;
}

.desktop-only {
	visibility: hidden;
	position: absolute;
}

.masthead-md-wrapper {
	visibility: hidden;
	position: absolute;
}

.yellow-gradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f7bd2a+51,fbdf93+100 */
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f7bd2a 51%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f7bd2a 51%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f7bd2a 51%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}	 


.navbar-brand  {
	font-family: "Salsa", sans-serif;
	color: #fff !important;
	font-size: 28px;
	text-shadow: 2px 2px 0px #333;
}

.navbar-nav > li > a {
	color: #4364BF !important;
	/*text-shadow: 1px 1px #000;*/
}

.main-content {
  margin-top: 0x;	
  padding-bottom: 10px;
}

.navbar-toggle {
	text-shadow: 1px 1px #000;
}

.icon-bar {
	box-shadow: 1px 1px #000;
}

.img-circle {
	box-shadow: 3px 3px 5px #666;
}

.vertical-nav {
  position: inherit;
}


/* little different this time
   Using max-width query to style the 'mobile' nav links */
@media (max-width: 767px) {
  .nav > li {
    margin: 2px 0px;
    border: 1px solid black;
    border-radius: 3px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
  }
  .navbar-nav  a {
    font-weight: bold;
    text-shadow: 1px 1px #aaa;
  
  }
  /* unset bootstrap default */
  .navbar-inverse .navbar-nav > .active > a {
    background-color: inherit;
  }
  .navbar-inverse .navbar-nav > .active {
    background: #8585aa;
    background: #cecece;
    background: -moz-linear-gradient(top, #cecece 0%, #c6c6c6 50%, #cecece 51%, #9e9e9e 100%);
    background: -webkit-linear-gradient(top, #cecece 0%,#c6c6c6 50%,#cecece 51%,#9e9e9e 100%);
    background: linear-gradient(to bottom, #cecece 0%,#c6c6c6 50%,#cecece 51%,#9e9e9e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#9e9e9e',GradientType=0 )
  }
	.navbar-wrapper {
		position: absolute !important;
	}
}

.footerFaBackground {
  background-image: url('../images/familyamusements.png');
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: contain;
}

@media (min-width: 768px) {
	body {
		background-image: url('../images/patterns/beach.jpg');
		background-size: 300px 327px;
	}
	.jumbotron-custom {
		padding: 80px 0px 0px 0px;
		min-height: 275px;
		text-shadow: 2px 2px #000000;
		border-left: 1px solid #aaa;
		border-right: 1px solid #aaa;
	}
	
	.main-content {
	  background-image: url('../images/patterns/billie_holiday.png'); 
	  background-color: #eee;
	  padding-left: 30px; 
	  border-left: 1px solid #aaa; 
	  border-right: 1px solid #aaa; 
	}
	
	.jumbotron-custom > .container {
		min-height: 0; 
		width: 95% !important;
	}

	.jumbotron-custom  h1 {
		font-size: 48px;
		padding-left: 10px
		padding-right: 10px;
	}
				
	.mobile-only-link {
		cursor: inherit;
		color: inherit;
		text-decoration: inherit;
	}			
	.mobile-only-link:hover {
		cursor: inherit;
		color: inherit;
		text-decoration: inherit;
	}

	.theatrewhatson hr {
		visibility: hidden;
		position: absolute;
	}
	
	.desktop-only {
		visibility: inherit;
		position: inherit;
	}
	

	/*
	  In medium viewports, there isn't enough room to get all the nav links on 
	  one line, so let's move the Contact link to the footer and hide the 'home' 
	  link (since the words Britannia Pier link to the homepage anyway)
	*/
	.nav_home {
		visibility: hidden;
		position: absolute !important;
		width: 0px;
		height: 0px;
    /*padding: 0 !important;
    margin: 0 !important;*/
	}
  
  .navbar-brand {
    display: none;
    visibility: hidden;
    position: absolute;
  }

  .navbar-inverse, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    background: none;
    border: none;
  }
  
  .navbar-nav > li > a {
    padding: 01px;
  } 
  
  .navbar-nav {
    float: inherit;
  }

  
  .vertical-nav {
    position: relative;
  }
	
	.vertical-nav ul {
		margin: 0;
		padding: 0;
		/*text-align: center;*/
	}
	.vertical-nav  li {
		display: inline;
		float: left;
		list-style: none;
		margin-top: 0px;
    margin-bottom: 5px;
		margin-right: 5px;
		padding: 0px;
		background: #f09e00;
		background-image: -webkit-linear-gradient(top, #ffce00, #f09e00);
		background-image: -moz-linear-gradient(top, #ffce00, #f09e00);
		background-image: -ms-linear-gradient(top, #ffce00, #f09e00);
		background-image: -o-linear-gradient(top, #ffce00, #f09e00);
		background-image: linear-gradient(to bottom, #ffce00, #f09e00);
		-webkit-border-radius: 5;
		-moz-border-radius: 5;
		border-radius: 5px;
		/*text-shadow: 1px 1px 0px #fff;*/
		-webkit-box-shadow: 0px 1px 1px #333;
		-moz-box-shadow: 0px 1px 1px #333;
		box-shadow: 0px 1px 1px #666666;
		color: #ffffff;
		padding: 3px 8px 3px 8px;
		text-decoration: none;
		font-family: "Salsa", sans-serif;
		font-size: 100%;
		text-transform: uppercase;
	}
	
	.vertical-nav li:hover {
		background: #3cb0fd;
		background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
		background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
		text-decoration: none;
	}

	.vertical-nav li.active {
		background: #3cb0fd;
		background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
		background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
		background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
		text-decoration: none;
    color: #fff;
    text-shadow: 1px 1px 0 #333;
		
	}
	.vertical-nav li.active a{
    color: #fff !important;
    text-shadow: 1px 1px 0 #333;	
  }
  .vertical-nav li.active a:before {
		content: "";
	}
	.vertical-nav li.active a:after {
		content: "";
	}
	
	.vertical-nav a {
		display: block;
		color: #4364BF;
	}
	
	.vertical-nav li.active a{
		color: #fff;
		text-shadow: 1px 1px 0px #333;
	}
	
	.vertical-nav li:hover a {
		color: #fff;
		text-shadow: 1px 1px 0px #333;
	}
	
	.vertical-nav a:hover {
		text-decoration: none;
    color: #fff;
	}
	.vertical-nav {
		/*min-width: 100%;*/
		margin-top: 10px;
		margin-bottom: 0px;
		/*text-align: center;*/
		height: 35px;
		margin: 0 auto;
		
	}
	
	
	.start-content {
		clear: all; 
	}
	
	.masthead-md {
		color: yellow;
		margin-top: 20px;
		height: 50px;
		border: 1px solid transparent;
		border-radius: 4px;
		

		-webkit-box-shadow: 0px 1px 1px #333;
		-moz-box-shadow: 0px 1px 1px #333;
		box-shadow: 0px 1px 1px #333;
		color: #ffffff;
		padding: 0px 20px;
		text-decoration: none;
		vertical-align: middle;
	}

	.masthead-md-brand {
		font-family: "Salsa", sans-serif;
		text-shadow: 2px 2px 0px #333;
		font-size: 24pt;
		float: left;
	}
	
	.masthead-md-brand > a {
		color: #fff;
	}
	
	.masthead-md-brand > a:hover {
		text-decoration: none;
		text-shadow: 2px 2px 0px #999;
	}
	
	.masthead-md-subbrand {
		position: relative;
		text-shadow: 1px 1px 0px #333;
		top: 50%;
		transform: translateY(-50%);
		float: left;
		padding: 0px 10px;
		font-style: italic;
		font-weight: normal;
		/*font-size: 140%;
		font-family: "Salsa", sans-serif;*/
		
	}
	
	.masthead-md-wrapper {
		/*background: red;*/
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		visibility: visible;
		z-index: 200;
		
	}

	.footer_contact {
		visibility: inherit;
		position: inherit;
	}

	.mainpage-intro-smallscreen  {
		visibility: hidden;
		position: absolute;
	}
	.mainpage-intro-md  {
		visibility: inherit;
		position: inherit;
	}
	.mainpage-intro-lg  {
		visibility: hidden;
		position: absolute;
	}

}

.img-circle:hover {
	opacity: 0.8;
}

#owa-tracker-post-container {
	visibility: hidden;
	position: absolute;
	height: 0px;
	overflow: hidden;
}

@media (min-width: 992px) {
	.vertical-nav  li {
		display: block;
		float: inherit;
	}
	.vertical-nav {
		padding-top: 10px;
		margin: inherit;
		display: table;

	}
	
	.start-content {
		clear: inherit;
		min-height: 370px;
	}

	.featurette-swapsides {
		float: right !important;
	}
	
	.mobile-only {
		visibility: hidden;
		position: absolute;
	}

	.nav_home {
		visibility: visible;
		position: relative !important;
		width: inherit;
		height: inherit;
    padding: inherit;
    margin: inherit;
	}
	
	.footer_contact {
		visibility: hidden;
		position: absolute;
	}
	.pier-map-iframe {
		visibility: visible;
		position: relative;
	}
	.mainpage-intro-smallscreen  {
		visibility: hidden;
		position: absolute;
	}
	.mainpage-intro-md  {
		visibility: hidden;
		position: absolute;
	}
	.mainpage-intro-lg  {
		visibility: inherit;
		position: inherit;
	}
	
}

@media (min-width: 1200px) {
	.mobile-only {
		visibility: hidden;
		position: absolute;
	}
	
	.theatrewhatson hr {
		visibility: hidden;
		position: absolute;
	}
	
	.vertical-nav li {
		font-size: 115%;
	}

}
	
* > a:active {
	text-decoration: none;
}