@charset "utf-8";
/*-------------------------------------
bcm.css
Ver. 2.0
June 2017
CSS file for Brighton Cycle Map

Lovell Johns Ltd.
---------------------------------------*/

body {
	font-family: Helvetica Neue, Helvetica, Trebuchet MS, Arial, Verdana, Tahoma, sans-serif;
	font-size:14px;
	background:#f1f2f2;
}
* {
	margin:0;
	padding:0;
}
.p {
	color:#000000;
	font-size:1.2em;
	line-height:1.2em;
	margin:0px;
	margin-bottom:0.4em;
	text-align: center;
}
a:link,
a:visited {
	color:#004586;
	text-decoration:underline;
	}
a:hover,
a:active {
	color:#b58701;
	text-decoration:underline;
}
#maincontent {
	padding: 3px;
}
#maplayer {
	width: 100%;
	max-width:1800px;
	min-width:500px;
	height: 700px;
	border: none; 
	cursor: pointer;
}
#mapfooter{
	width: 630px;
	overflow: hidden;
}
img.clickable{
	cursor: pointer;
}
img{
	border: none;
}
.sublayer{
	margin-top:5px;
}
p.legendGroupHeader{
	padding:5px;
	color:#000000;
	font-weight:bold;
	background: url(../images/scalebarback.png);
	background-repeat: repeat;
}
a.legendGroupHeaderLink{
	color:#000000;
	font-weight:bold;
	text-decoration:none;
	font-size: 14px;
}
div.legendGroup{
	display:block; 
	border: solid 1px #999999; 
	/*border-radius: 2px;*/
	box-shadow: 0px 1px 3px; 
	padding:5px;
	background: url(../images/scalebarback.png);
	background-repeat: repeat;
}
div.mapfooterleft{
	position: absolute;
	bottom: 5px;
	left: 5px;			
	background: url(../images/scalebarback.png);
	background-repeat: repeat;	
	float:left;
	z-index: 2000;
	margin:5px;
	padding:5px;
	font-size: 10px;
	color: #333333;
	box-shadow: 0px 1px 3px;
	/*border-radius: 5px;*/
}
table{
	margin-left:10px;
	font-size:11px;
}
table.popupContent{
	font-size:11px;
	border-collapse: collapse;
	margin-left: 0px;
}
table.popupContent td{
	font-size:13px;
	border: 1px #999999 solid;
	margin-left: 0px;
}
td.legendCell{
	padding:2px;
	margin:0px;
	font-weight:bold;
	vertical-align:top;
	line-height: 16px;
}
#openingMessage{
	position: fixed;
	top: 40px;
	left: 50%;
	width:900px;
	z-index:999999;	
	font-weight: bold;
	padding:20px;
	color: #999999;
	display:none;
	margin-left: -410px;
}
#openingMessageContent{
	display:block;
}
#openingMessageMobile{
	display:none;
}
#openingMessageProceed{
	display:none;
}
#leglayerdivmobile {
	display:none;
}
#mobleglayerdivmin {	
	display:none;
}
#mobhelpdivmin  {	
	display:none;
}
div.olControlZoom{
	display:block;
}
#mobTools {	
	display:none;
}
#howtoUseMessageMob{
	display:none;
}
#howtoUseMessage{
	position: fixed;
	top: 10%;
	left: 50%;
	width:380px;
	z-index:999999;
	font-size: 14px;
	font-weight: normal;
	text-align:center;
	padding:20px;
	color: #000000;
	display:none;
	margin-left: -210px;
	background-color:#FFFFFF;
}	
#howtoUseMessage p{
	margin-bottom:10px;
}
button{
	color:#000000;
	background:#cccccc;
	font-size:16px;		
	padding:6px;
	border:1px solid #999999;
	cursor:pointer;
	margin-top: 10px;
}
button:hover{
	color:#000000;
	background:#eeeeee;
	/*border:1px solid #999999;*/
}

p.legmessageDesktop{
	color:#666666;
	text-align:left;
	font-size:14px;
	font-style:oblique;
	padding-top:10px;
	display:block;
}
p.legmessageMobile{
	color:#666666;
	text-align:left;
	font-size:14px;
	font-style:oblique;
	padding-top:10px;
	display:none;
}
#printButton{
	visibility: visible;
 }	 
.ljnote{
	display:inline-block;	 
}	 
 
/*Cookie Notice*/
#cookiesdirective{text-align:center;}
.cookiefooter {background-color: #743449;display: inline-block;font-size: 12px;margin: 0 auto;padding: 0.5em 180px 0.5em 1em;position: relative;width: auto;}
.cookiefooter p { color: white;}
.cookiefooter a {color: #A6A6A6; border-bottom: 0px dotted #A6A6A6; text-decoration: none;}
.cookiefooter input:hover {background: #858A90;}
.cookiefooter input { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 0px 10px 0px 10px; height: 100%; border: 0px; background: #C5E3D7; color: #743449; -webkit-appearance: none; border-radius: 0px;font-weight:bold;font-size:14px; }


/*---------------------------------------------------TEMPLATE*/
@media only screen and ( max-width: 3000px) { 	
	#maplayer {
		width: 100%;
		min-width:320px;
		height: 500px;
		border: none; 
		cursor: pointer;
	}	
	#pageMaskMob{
		position:absolute; 
		top:0; 
		left:0; 
		min-height:100%; 
		width:100%; 
		background: #743449;  
		opacity:.75; 
		filter:alpha(opacity=75); 
		z-index:4000; 
		visibility:visible;
	}
	#openingMessage{
		position: fixed;
		top: 40px;
		left: 50%;
		width:670px;   
		z-index:999999;	
		font-weight: bold;
		padding:20px;
		color: #999999;
		display:none;
		margin-left: -330px;		 
	}
	#openingMessageMob{
		position: fixed;
		top: 40px;
		left: 50%;
		width:900px;
		z-index:999999;	
		font-weight: bold;
		padding:20px;
		color: #999999;
		display:none;
		margin-left: -410px;
	}
	#openingMessageContent{
		display:block;
	}
	#openingMessageMobile{
		display:none;
	}
	#leglayerdiv {
		display:none;
	}
	#leglayerdivmobile {
		background-color:#FFFFFF;	
		position: absolute;	
		top: 0px;
		right: 5px;
		z-index: 5000;
		padding:5px 10px 10px 10px;
		display:none;
		max-width: 290px;
		width: 100%;
	}		
	#mobleglayerdivmin {	
		position: absolute;	
		top: -3px;
		right: 5px;  		
		cursor: pointer;
		display:none;
		width: 120px;
		z-index: 3000;
		background-color: #FFFFFF;
		padding: 5px;
		text-align: center;
		box-shadow: 0px 2px 3px;
		/*border-radius: 8px;*/
		font-size:16px;
		font-weight:bold;
	}
	#mobhelpdivmin {	
		position: absolute;	
		top: -3px;
		right: 140px;  		
		cursor: pointer;
		display:none;
		width: 150px;
		z-index: 3000;
		background-color: #FFFFFF;
		padding: 5px;
		text-align: center;
		box-shadow: 0px 2px 5px;
		/*border-radius: 8px;*/
		font-size:16px
	}			
	#mobTools {	
		position: absolute;	
		top: 35px;
		right: 10px;	
		display:none;
		z-index: 6000;
		padding: 5px;
	}	
	td.legendCellOff{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:middle;
		border:none;
		background-color:#FFFFFF;
		color:#999999;
		line-height: 16px;
	}	
	td.legendCell{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:middle;
		background-color:#EAEAEA;
		border-top: 1px solid #999999;
		border-bottom: 1px solid #999999;
		color:#000000;
		width:250px;
		font-style:normal;
		line-height: 16px;
	}	
	td.legendCellInactive{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:middle;
		background-color:#EAEAEA;
		border-top: 1px solid #999999;
		border-bottom: 1px solid #999999;
		color:#000000;
		width:250px;
		font-style:oblique;
		line-height: 16px;
	}
	td.legendCellInactiveOff{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:middle;
		background-color:#FFFFFF;
		border: none;
		color:#999999;
		width:250px;
		font-style:oblique;
		line-height: 16px;
	}
	table{
		font-size:17px;
		border-collapse: collapse;
		margin-left: 0px;
		width: 100%;
	}
	table.popupContent{
		font-size:13px;
		border-collapse: collapse;
		margin-left: 0px;
	}	
	table.popupContent td{
		font-size:13px;
		border: 1px #999999 solid;
		margin-left: 0px;
	}	
	.mobLegImage{
		padding-right:10px;
	}		
	#howtoUseMessageMob{
		position: fixed;
		top: 50px;
		left: 50%;
		width:380px;  
		z-index:999999;
		font-size: 13px;
		font-weight: normal;
		text-align:center;
		padding:10px;   
		color: #000000;
		display:none;
		margin-left: -145px; 
		background-color:#FFFFFF;
		box-shadow: 0px 1px 3px;
		/*border-radius: 3px;*/
	}	
	#howtoUseMessageMob p{
		margin-bottom:10px;
	}
	#howtoUseMessage{
		display:none;
	}		
	table.allamenitiesOff  td{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:top;
		background-color:#FFFFFF;
		color:#999999;
		font-size:10px;	
	}			
	table.allamenities  td{
		padding:2px;
		margin:0px;
		font-weight:normal;
		vertical-align:top;
		background-color:#EAEAEA;
		color:#000000;
		font-size:10px;
	}
	#openingMessageProceed{
		display:block;
	}
	a.legendGroupHeaderLink{
		color:#000000;
		font-weight:bold;
		text-decoration:none;
		font-size: 18px;
	}	
}

/*---------------------------------------------------MOBILE TEMPLATE*/

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

	div.olControlZoom{
		display:none;
	}	
	#openingMessage{
		position: fixed;
		top: 10%;
		left: 50%;
		width:220px;
		z-index:999999;
		font-size: 16px;
		font-weight: bold;
		text-align:center;
		padding:20px;
		color: #000000;
		display:none;
		margin-left: -130px;
	}	
	#openingMessageMob{
		position: fixed;
		top: 40px;
		left: 50%;
		width:294px;
		z-index:999999;	
		font-weight: bold;
		padding:20px;
		color: #999999;
		display:none;
		margin-left: -167px;
	}	
	#openingMessageContent{
		display:none;
	}
	#openingMessageMobile{
		display:block;
	}
	#howtoUseMessageMob{
		position: fixed;
		top: 5px;
		left: 50%;
		width:280px;  
		z-index:999999;
		font-size: 13px;
		font-weight: normal;
		text-align:center;
		padding:5px;   
		color: #000000;
		display:none;
		margin-left: -145px; 
		background-color:#FFFFFF;		
		box-shadow: 0px 1px 3px;
		/*border-radius: 3px;*/
	}
	p.legmessageDesktop{
		color:#666666;
		text-align:left;
		font-size:14px;
		font-style:oblique;
		padding-top:10px;
		display:none;
	}	
	p.legmessageMobile{
		color:#666666;
		text-align:left;
		font-size:14px;
		font-style:oblique;
		padding-top:10px;
		display:block;
	}
	.ljnote{
		display:none;	 
	}	 
	#mobhelpdivmin {	
		width: 100px;
	}	
	 div.mapfooterleft{
		bottom: 18px;
		left: 8px;			
	}
 
 
 
}

@media only screen and ( max-width: 375px) { 
	#printButton{
		visibility: hidden;
	}
}
/*-----------------End of file*/