body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dt,dd,ol,ul,li,hr,fieldset,form,label,legend,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,summary,hgroup {
	margin:0;
	padding:0;
	border:0
}


table { font-size: 1.0em }

a:active,a:hover {
	outline:0
}
@-webkit-viewport {
	width:device-width;
}
@-moz-viewport {
	width:device-width;
}
@-ms-viewport {
	width:device-width;
}
@-o-viewport {
	width:device-width;
}
@viewport {
	width:device-width;
}
body {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	/*color:#37302a;
	background:#E6E6E6;
	font:normal 100%/1.4 sans-serif */
	background-color: var(--page-background);
}
section {
	border-bottom:1px solid var(--border-color);
	float:left;
	width:100%;
	height:150px
}
section.footer.u-full-width {
	border: none;
}
.header {
	background:var(--header-color);
	height:59px;
	float:left;
	width:100%
}

.header a {
	font-family: "clear_sans_mediumregular", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

body ul a {
	font-family: "clear_sans_mediumregular", Helvetica, Arial, sans-serif;
	font-size:12px; 

}
.logo {
	-webkit-tap-highlight-color:transparent;
	text-decoration:none;
	font-weight:bold;
	line-height:55px;
	padding:0 20px;
	color:var(--logo-color);
	/*background: var(--logo-path) no-repeat;*/
	float:left
}
.nav-collapse,.nav-collapse * {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-weight: bold;
}
.nav-collapse {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none
}
.nav-collapse,.nav-collapse ul {
	list-style:none;
	width:100%;
	float:left;
	z-index: 1000;
}

.container {
	z-index: 5;
}

.modal-body textarea {
	margin-bottom: 0;
	width: 100%;
}

#conversation {
	height: 10rem;
	overflow-y: auto;
}

#conversation .glyphicons {
	line-height:1rem;
}

#membersocial i.social {
	font-size: 1.5rem;
}

#membersocial i.glyphicons {
	font-size: 1.5rem;
	line-height:1rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 1rem;
	margin-left: -0.75rem;
}

#membersocial img {
	height: 1.5rem;
}

#groupmessages {
	height: 35rem ;
	margin-bottom: 1.5rem;
	overflow-y: scroll;
}

#userlist i.glyphicons {
	font-size: 1.5rem;
	line-height: 0.75rem;
}

.inbox h5 {
	margin-left: 5.5rem;
	margin-top: -0.5rem;
}

#memberlist .member { white-space: pre; }

/* inline fix for glyphicons */
.glfix {
	font-size: 1.5rem;
	line-height:1rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 1rem;
	margin-left: -0.75rem;
	margin-top: -0.25rem;
}

/* for glyphicons as menu buttons */
.glmenu {
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 1rem;
	margin-left: 1rem;
	margin-top: -0.25rem;
}

#sendmenu {
	margin-top: 1rem;
	border: 1px groove var(--menu-border);
	border-radius: 4px;
	padding: 0.25rem;
}


.offline {
	color: var(--member-offline) ;
}

/* BLUF 4.5 new footer */
.aboutbox {
	border-radius: 15px;
	text-align:center;
	font-weight:normal;
	min-height:3rem;
	padding:1rem;
	margin-top: 0.75em;
	margin-bottom: 1em;
	border: 1px groove  var(--menu-border);
}

.pwforgotten {
	border: 1px groove var(--menu-border);;
	border-radius: 15px;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
}

div.row.alert {
	background-color:var(--alert-panel);
	border-radius: 15px;
	text-align:center;
	font-weight:bold;
	min-height:5rem;
	padding:1.5rem;
	margin-top: 1em;
	margin-bottom: 1em;
}
div.row.alert a {
	font-weight:bolder;
	color: var(--alert-text);
}
div.row.filter {
	background-color: var(--panel-info);
	border-radius: 15px;
	min-height:5rem;
	padding:1.5rem;
}

.photo {
	border-radius: 5px;
}

/* fix for column view */
#memberlist .twelve.columns a .glyphicons {
	margin-top: -0.4rem;
}

#memberlist a .glyphicons {
	color:var(--icon-color);
	font-size:1.75rem;
	margin-left: -0.75rem;
}
#memberlist a .social {
	color:var(--icon-color);
	font-size:1.75rem;
	padding-top: 0.5rem;
	padding-left: 0.5rem;
}

#memberlist p {
	padding-left: 8rem;
}
#memberlist p i.glyphicons {
	margin-left: -0.75rem;
}

p.alert {
	background-color:var(--alert-panel);
	border-radius:5px;
	min-height:3rem;
	padding:1.5rem;
	font-weight:bold;
	margin-top: 1em;
	margin-bottom: 1em;
}

p.info {
	background-color:var(--panel-info);;
	border-radius:5px;
	min-height:3rem;
	padding:1.5rem;
	margin-top: 1em;
	margin-bottom: 1em;
}

p.info i.glyphicons {
	line-height: 0.5rem;
}

/* Jan 2018 tweaks for modals */
/* tweak Sep 2021, fix thumb cropper */
div.modal.fade.in div { background-color: var(--page-background) ; color: var(--modal-color)}
div.modal.fade.in div.modal-body textarea { background-color: var(--modal-text-bg) }
div.modal.fade.in .close { color: var(--modal-color); opacity: 0.7}

div#photoThumbs.modal.fade.in {
	background-color: var(--page-background);
}
div#photoThumbs.modal.fade.in div {
	background-color: unset;
}

.promotext {
	background-color: var(--panel-promo);
	border-radius: 15px;
	padding: 2rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	text-align:center;
}
.promotext a {
	color: var(--promo-text);
	font-weight:bold;
}
#notes {
	margin-top: 1em;
	border-style: dotted;
	border-width: thin;
	border-radius: 0.5rem;
	padding: 0.2em;	
}

/* improve para spacing for long chunks of text */
.block p {
	margin-top: 0.5rem ;
}

.story {
	border-width: 4px ;
	border-color: var(--story-border);
	border-style: none;
	
}

.story p {
	margin-top: 0.5rem ;
}

#profilebody p {
	margin-top: 0.5rem ;
}

blockquote {
	padding: 0 3em;
	font-style: italic
}

#photochooser {
	height: 30rem;
	overflow-y: scroll;
}

.pmthumb {
  height: 140px;
  width: 140px;
  border-width: 1px;
  border: solid;
  border-color:var(--thumb-border);
  object-fit: contain; 
  margin-right: 2px;
  margin-bottom: 2px
}

.ptselected {
	border-color: var(--thumb-selected);
}

.ptvisible {
	border-color: var(--thumb-used);
}

.msg-selected {
	background: var(--msg-selectd);
}

.blufevent {
	border-radius: 10px;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: var(--event-background);
}

.event {
	cursor: pointer;
}

.event img {
	border-radius: 5px ;
}

/* joypixels images */
.joypixels {
	height: 1rem ;
}


/* pride colour scheme for menus 
.pride1 { background: #e70000 !important }
.pride2 { background: #ff8c00 !important }
.pride3 { background: #e4d600 !important }
.pride4 { background: #00811f !important }
.pride5	{ background: #004455 !important }
.pride6 { background: #760089 !important }

/* fix up a few other bits */
.inbox h5 {
    font-family: "clear_sans_mediumregular";
}

/* tweaks for BLUF 4.2 */
.inlineflag {
	height: 24px ;
	margin-right: 5px ;
	margin-top: -5px;
}

.previewgrid {
	width: 120px;
	height: 120px;
	display: inline-block;
	background-color: var(--grid-background);
	border: solid 1px rgb(0,0,0,0.2);
	padding: 10px;
	margin: 12px;
	border-radius: 10px;
}

.previewghost {
	width: 120px;
	height: 120px;
	display: inline-block;
	background-color: var(--ghost-background);
	border: solid 1px rgb(0,0,0,0.2);
	padding: 10px;
	margin: 12px;
	border-radius: 10px;
}

/* some heading tweaks for better look with league spartan */
/*h4, h5, h6 { margin-bottom: -0.5rem !important; }*/

h3, h4, h5, h6 {
	margin-top: 1rem;
	margin-bottom: -0.5rem
}

div.story h3,h4, h5  {
	margin-top: 1rem;
  margin-bottom: -0.25rem;
}

/* this is for the city guide pages */
.cityguide {
	font-family: 'ChunkFive-Roman';
    font-weight: bold;
    font-style: normal;
    font-size: 75px;
    color: var(--city-background);
    margin-top: 200px;
    margin-left: 20px
}

.cityinfobox {
	/*background:rgba(221, 221, 221, 0.85); */
	border-radius: 10px;
	margin-top: 0px;
	margin-right:0px;
	margin-bottom:1rem;
	/*padding:10px*/
}

.citybanner {
	background-repeat: no-repeat; 
	background-size: cover; 
	height:300px
}

/* big emoji support */
.bigemoji {
	font-size: 40px;
}

/* fix for confirmation pop-ups in dark colour scheme */
.jconfirm { color: var(--conf-background)}

/* for translations */
.translated {
	font-style:italic;
	color:var(--translated-text);
	margin-left:5px;
}

.translator {
	font-style:italic;
	text-align: right;
	font-variant-caps: small-caps;
	color: var(--translated-text);
	margin-right:10px ;
}

.popover-content {
	color: black;
}

.popover-title {
	color: black;
}

a.button {
	color: var(--skeleton-input) ;
}

/* profile blur */
.blurred {
	filter: blur(5px);
}

#landingimg {
	background: var(--logo-path) no-repeat;
	background-size: cover ;
	height: 100px;
}


@media screen and (min-width: 600px ) {
.cityguide {
	font-family: 'ChunkFive-Roman';
    font-weight: bold;
    font-style: normal;
    font-size: 100px;
    color: var(--city-background);
    margin-top: 375px;
    margin-left: 20px
}

.cityinfobox {
	background:rgba(221, 221, 221, 0.85);
	border-radius: 10px;
	margin-top: 20px;
	margin-right:20px;
	padding:10px
}

.citybanner {
	background-repeat: no-repeat; 
	background-size: cover; 
	height:500px
}

}




@media screen and (min-height: 30rem) {
	#conversation {
	height: 20rem;
	overflow-y: auto;
}

	#npt {
	height: 20rem;
	overflow-y: auto;
}

	#mainfilters {
		display:none;
	}
	
	#photochooser {
	height: 20rem;
	overflow-y: scroll;
	}
}

@media screen and (min-height: 50rem) {
	#conversation {
	height: 40rem;
	overflow-y: auto;
}

	#npt {
	height: 40rem;
	overflow-y: auto;
}
	#mainfilters {
		display:block;
	}
	
	#photochooser {
		height: 40rem;
		overflow-y: scroll;
	}
}

@media screen and (min-height: 65rem) {
	#conversation {
	height: 55rem;
	overflow-y: auto;
}

	#npt {
	height: 55rem;
	overflow-y: auto;
}

	#mainfilters {
		display: block;
	}
}


@media screen and (min-width: 61em) {
	.nav-collapse {
		width:auto;
		float:right
	}
	#mainfilters {
		display: block;
	}
}
.nav-collapse>ul {
	border-top:1px solid var(--menu-collapse);
}
.nav-collapse li {
	float:left;
	width:100%
}

@media screen and (min-width: 61em) {
	.nav-collapse li {
		width:auto
	}
}
.nav-collapse a {
	color:var(--menu-color);
	text-decoration:none;
	width:100%;
	background:#666;
	border-bottom:1px solid var(--menu-collapse);
	padding:0.7em 1em;
	float:left;
}
.nav-collapse a:active {
	color:var(--menu-active);
}
@media screen and (min-width: 61em) {
	.nav-collapse a {
		margin:0;
		padding:1.25em 1.5em;
		float:left;
		text-align:center;
		border-bottom:0;
		border-right:1px solid var(--menu-color);
		width: 12em;
	}
	.nav-collapse li:last-child a {
		border:0
	}
}
@font-face {
	font-family:"responsivenav";
	src:url("/fonts/responsivenav-7d300749.eot");
	src:url("/fonts/responsivenav-7d300749.eot?#iefix") format("embedded-opentype"),url("/fonts/responsivenav-9a5862ae.ttf") format("truetype"),url("/fonts/responsivenav-c8cb3e9f.woff") format("woff"),url("/fonts/responsivenav-75076bba.svg#responsivenav") format("svg");
	font-weight:normal;
	font-style:normal
}
.nav-toggle {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	text-decoration:none;
	text-indent:-999px;
	position:relative;
	overflow:hidden;
	width:70px;
	height:55px;
	float:right
}
.nav-toggle:before {
	color:var(--menu-color);
/*	font-family:"responsivenav", sans-serif;*/
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	font-size:28px;
	text-transform:none;
	position:absolute;
	content:"≡";
	text-indent:0;
	text-align:center;
	line-height:55px;
	/*speak:none; */
	width:100%;
	top:0;
	left:0
}
.nav-toggle.active::before {
	font-size:24px;
	content:"x"
}
.dropdown ul a {
	background:var(--menu-dropdown);
	padding-left:1.5em
}
.dropdown ul ul a {
	background:var(--border-color);
	padding-left:2.5em
}
@media screen and (min-width: 61em) {
	.js .nav-collapse .dropdown ul {
		display:none
	}
}
.dropdown ul {
	background:var(--menu-dropdown);
}
.dropdown ul ul {
	border:0;
	padding:0
}
.dropdown .dropdown.opened .dropdown-toggle {
	background:var(--border-color);
}
.dropdown-toggle:after {
	content:"+";
	font-size:1.5em;
	line-height:1.0;
	float:right
}
.dropdown.opened>.dropdown-toggle:after {
	content:"–"
}

@media screen and (min-width: 61em) {
	.js .nav-collapse,.js .nav-collapse .dropdown ul {
		max-height:none;
		overflow:visible
	}
	.dropdown-toggle:after {
		content:"";
		width:0;
		height:0;
		margin:0.3em 0 0 0.5em;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
		border-top:6px solid var(--menu-color);
	}
	.dropdown ul .dropdown-toggle:after {
		content:"";
		width:0;
		height:0;
		margin:0.3em 0 0 0.5em;
		border-bottom:6px solid transparent;
		border-top:6px solid transparent;
		border-left:6px solid var(--menu-color);
	}
	.nav-collapse a:hover {
		color:var(--menu-hover);
	}
	.nav-collapse .dropdown {
		position:relative
	}
	.nav-collapse .dropdown li {
		width:100%
	}
	.nav-collapse .dropdown ul a {
		text-align:left;
		border:0
	}
	/* fix by Nigel for some touchscreen devices */
	.nav-collapse ul li.dropdown:after {
		  padding: 30px;
		  content: '';
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
	}
	.js .nav-collapse .dropdown:hover>ul {
		clip:auto;
		position:absolute;
		width:10em;
		top:56px;
		left:0;
		display:block !important
	}
	.js .nav-collapse .dropdown .dropdown:hover>ul {
		top:0;
		left:10em
	}
	.js .nav-collapse ul>.dropdown:last-child ul {
		left:auto;
		right:0
	}
}

/* menu update August 2019 */
#bluflogo {
	height: 30px;
	margin-top: 10px;
}

@media screen and (min-width: 1355px) {
	#bluflogo{
		height: 40px;
		margin-top: 5px;
	}
}

@media screen and (min-width: 1400px) {
	#bluflogo {
		height: 50px;
		margin-top: 0px;
	}
}
@media screen and ( min-width: 768px) {
		
	#landingimg {
		height: 120px ;
	}
}
@media screen and ( min-width: 900px) {
		
	#landingimg {
		height: 200px ;
	}
}
/*
@media screen and (max-width: 1300px) {
	.nav-collapse a {
		width: 9em;
	}
	.dropdown-toggle:after {
		margin: 0;
	}
}

@media screen and (max-width: 1299px) {
	.nav-collapse a {
		width: 100%
	}
}*/