/* 
	CONNECT THEME - CUSTOM OVERRIDE
*/
/*
This stylesheet can be used to override all custom.css styles used in the selected/configured theme.
Add styles to this stylesheet file if you want to change the look and feel of a themes page elements./*

NOTE:
*DO NOT*
	Change other css files in the 'App_Themes' directory, as the changes will not be persisted when a new
	version of the software is installed.

*DO NOT*
	Add styles that effect the grid layout and positioning of page elements.
	eg. Do not override any ('span' 'span-fluid' 'span-container') styles.
	(if you do, you will break all the grid and complex media query theme settings!!).

/*------------------------
HOW AND WHAT TO STYLE HERE:
We suggest that you only edit the following settings so you can customise your version of join@home.
	
	Text (font family, size(em), weight, color),
	Borders (style,width,colour)
	Images (Add any custom images to the (Styles/images) folder.

PLEASE REFER TO THE JOIN@HOME CUSTOMISATION GUIDE WHEN CREATING CUSTOM OVERRIDE STYLING.
	Any styling added here will be used across all screen sizes unless overuled by classes in mediaoverride.css
----------------------------------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------------------------------*/
/* PAGE BASE
	Styles used on the base containers that structure the pages. Only change the background colours used here if required.
	Uncomment the necessary style and  edit the color value so it matches your design.
	Uncomment (html):
*/
/*html {background:#EFEFFE;}*/

/*--------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------*/
/* PAGE HEADER BACKGROUND
	Header background – apply a background image with your companies branding replacing the image template (.png format).
	Retain the existing dimensions of the file 2024pixels wide x 218pixels high. This image should only hold imagery that
	allows the title text (company name and strapline) to remain readable.
	DO NOT under any circumstances add any embedded text in to this graphic!
	Only real text defined in the j@h configurator should be used in the page header.

	Add your branded background image to the Styles directory:   OnlineReg2.Web/Styles/images/header-bac.png
	
	NOTE: Don’t change/add new image positioning css values.
	Uncomment the header background style (.header_inner):
	
*/
/*.header_inner { background-image: url("../images/header-bac.png") }*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/*  COMPANY LOGO
	Replace the existing template image with your own logo (.png format)
	but retain the same size dimensions of 50pixels high by minimum width of 123pixels and maximum width of 480pixels.
	
	Add your company logo.png image to the directory:   OnlineReg2.Web/Styles/images/logo.png
	If you change the image file name update the reference in the style. 
	
	NOTE: Don’t change the image positioning css values.
	Uncomment the style (#company-logo):
*/
/*
#company-logo {background: url(../images/logo.png) no-repeat 0 0 rgba(0, 0, 0, 0) };}
*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------------------*/
/* PAGE BODY
	Apply a color to the body of the page so it matches your design.
	Uncomment (body): 
*/
/*body {background-color:#FFFFFF;}*/
/*--------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------------------*/
/* INNER CONTENT MAIN
	this is the area between the Progress Steps bar and the Footer that contains the content and the Membership Summary column.
	Uncomment to apply.
*/
/*
#contentAndSummaryContainer {background-color:#FFFFFF;}
*/
/*--------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------------------*/
/* INNER BODY CONTENT
	This is the left hand inner container to the left of the Membership Details column.
	Uncomment to apply.
*/
/*
#content .content_inner{}
*/
/*---------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------------------------*/
/* MEMBERSHIP DETAILS SUMMARY COLUMN
	This is the right hand column container to the right of the page content. Change the background and border colors.
	Uncomment to apply.
*/
/*
#summarybar {
	background-color:#FFFF;
	border-bottom:1px solid #B14A9C;
}
*/
/*
#summarybar .inner {
	background-color: #F7F7FF;
	border-bottom: medium none #B14A9C;
	border-left: 1px solid #B14A9C;
}
*/
/*---------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* PROGRESS STEPS CONTAINER BAR
	This is the bar that holds all the registration step titles eg Site > Initial Details > Membership > Full Details > Pay
	Change the colour of the bar if required.
	Uncomment the style (#progressbar):
*/
/*#progressbar{
	background: -moz-linear-gradient(center bottom , #B14A9C 0%, #BFBFBF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border-bottom:1px solid #B14A9C;
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* PROGRESS STEP ICON
	Change the icon to the left of the progress step titles.
	Upload a replacement image in to: OnlineReg2.Web/Styles/images/progress-step-arrow.fw.png
	Retain the dimensions and size of the existing icon 15pixels wide x 21pixels high.
	Uncomment the style (.progressStep_container):
*/
/*.progressStep_container{background:url("../images/progress-step-arrow.fw.png");}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* PROGRESS STEP TEXT
	Change the progress step titles color and font weight if required.
*/
/*.progressbox_text{color:#FFFFFF;}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* MEMBERSHIP SUMMARY DETAILS
	Change the bar and text styling in this right hand column container.
*/
/* Header Bar Top - Change the background color and text color.*/
/*.summarybar_title{
	background-color: #B14A9C;
	color: #FFFFFF;
}*/
/* Sub Header Bar - Change the background graduation color (or change to solid color), border and text color.*/
/*#summarybar .inner .titlebar{
	background: -moz-linear-gradient(center bottom , #F0DDEC 0%, #E1BAD9 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border-color: #FFFFFF;
	color: #4A1F41;
}*/
/* Summary column body text - Change the text color and background (match to container background color) color. */
/*.subcontentleft{
	background-color: rgba(0, 0, 0, 0);
	color: #000000;
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* TYPOGRAPHY Styles
	change the font family:
*/
/*body, input, button, select, textarea, site-h4, legend, gscaptcha, #finish-reg-header, #footer-support-telephone-no, footer-link {
	font-family:"Trebuchet MS",Droid Sans,Helvetica Neue,Arial,sans-serif;
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* TABLES
	change the table styles:
*/
/* Table Header - only change the background and border colors*/
/*.selMemTableHead {
	background: #D5F0EC;
	border-bottom: 1px solid #DDDDDD;
	color: #333333;
}*/
/* Table Row - only change the background and border colors */
/*.selMemTableRow {
	border-bottom: 1px solid #DDDDDD;
	background:#FFFFFF;
}*/
/* Table Alternate Row - only change the background and border colors */
/*.selMemTableAltRow {
	background-color: #E1F1FD;
	border-bottom: 1px solid #DDDDDD;
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
/*  Footer container - add a graduated or solid color here
#footer {
	background: -moz-linear-gradient(center bottom , #EEEEEE 0%, #EEEEEE 100%);
	background-color: #EEEEEE;
}

/* Telephone Number defined in the configurator - change the text color. */
/*#footer-support-telephone-no {color:#0064CD;}*/

/* Privacy Policy link defined in the configurator - change the text color. */
/*#Privacy-Policy-Text a {color:#0064CD;}*/
/* hover state*/
/*#Privacy-Policy-Text a:hover {}*/

/*------------------------------------------------------------------------------------------------------------------------------*/

/* 
*   BWM Join online styles 
*   2016
*
*/

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700');

body {
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
}

body strong {
	font-weight: 700;
}

p,
li,
label,
input.gsbutton-next,
.btn,
.dropdown-menu a,
.filter-option {
	font-size: 1em;
}

#ctl00_pnlImageHeader::after{
	content: 'Join Online';
	display: block;
	clear: both;
	text-align: center;
	z-index: 9999;
	position: relative;
	color: #fff;
	font-size: 2.5em;
	letter-spacing: 1px;
	padding: 1em 0;
	font-weight: 300;
	background-color: rgba(0, 0, 0, 0.3);
	text-transform: uppercase;
	border-bottom: 20px solid #000;
}

.wizard {
	margin-right: 20px;
}

/* header img */
#company-image-container img,
#ctl00_websiteLogo,
#ctl00_Image2,
#headerdesktopright {
	display: none;
}

#company-image-container::before,
#headerdesktopleft::before,
#headermobile::before
 {
	content: url(http://newportlive.co.uk/images/portals/logo-newport-260px.png);
}

#ctl00_pnlImageHeader,
#headerwrapper 
{	background-repeat: no-repeat;
	background-position: initial;
	background-size: cover;
	padding: 1em 0 0;
}

#ctl00_pnlImageHeader {
	background-image: url('http://newportlive.co.uk/images/portals/banner-join-home.jpg');
}

#company-image-container {
		width: 1170px;
		background-color: transparent;
		margin: 0 auto 2em;
}
#contentwrapper {
	padding: 1.5em 4em;
}

.step .header-bac,
#summarybar .inner .summarybar_title,
#summarybar .inner .titlebar {
	background-color: #000000;
	color: #fff;
	border: 1px solid #000;
	font-size: 1.1em;
}
.header {
	font-size: 1.2em;
}

.header-bac,
.summarybar_title,
.titlebar {
	padding: 0.5em 0;
	line-height: normal;
    padding: 0.5em 0 0.25em;
    min-height: 23px;
}

.step .header {
	color: #fff;
	letter-spacing: 1px;
}

.step {
	border-radius: 0;
}

.navigation-bottom-inner {
	border-radius: 0;
}
.summary-username-container,
.summary-user-email-container {
	padding: 0;
}
#summarybar .inner .summarybar_title {
	line-height: normal;
}
#summarybar .inner .summarybar_title, 
#summarybar .inner .titlebar {
	padding-left: 0.5em;
	font-weight: 600;
	letter-spacing: 1px;
}

#summarybar .inner .summarybar_title span {
	padding: 0;
}

.subcontentleft,
#Reg_MemberDetail_Container {
	padding: 1em 0.5em;
	line-height: normal;
}


.subcontentleft,
#summarybar .inner .subcontentleft p {
	font-size: 1em;
	color: #000;
}

#summarybar .inner .summarybar_title span {
	padding-left: 0;
}

/* input rounded corners overrides */
.btn-group.open .btn.dropdown-toggle,
.bootstrap-select.btn-group, 
.bootstrap-select.btn-group[class*=span],
.btn-group>.btn:first-child,
.bootstrap-select.btn-group .dropdown-menu,
input,
input[type="text"],
textarea,
#summarybar {
	border-radius: 0;	
}

/* form styling */

input {
	padding: 0.5em !important;
	height: auto !important;
}

.gscaptcha {
	font-size: 0.75em !important;
}

.gscaptcha input {
	font-size: 1em !important;
	padding: 0!important;
	min-height: 24px;
}

#ctl00_MainContent_Wizard1_ctl01_lblSiteSubHeading {
	margin: 1em 0;
}


.btn {
	padding: 0.5em 1.5em;
	background-image: none;
}

.btn:focus {
	outline: none;
	border: 1px solid #009ddb;
}

.btn-group>.btn:hover,
.btn-group>.btn:focus {
	border: 1px solid #009ddb;
	background-color: transparent;
}

.gsbutton-next.active, 
.gsbutton-next:active, 
.gsbutton-next:focus, 
.gsbutton-next:hover, 
.open>.dropdown-toggle.gsbutton-next {
	background-color: #009ddb;
}

button, 
input[type="button"],
html input[type=button], 
input[type=reset], 
input[type=submit],
.loginLink {
	background-color: #009ddb;
    color: #fff;
    font-weight: 900;
    padding: 10px 20px;
    border: 1px solid #ccc;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
    /*text-transform: uppercase;*/
    border-radius: 0;
    font-weight: 400;
    font-size: 1.2em;
}

input[type="button"].gsbutton-back,
.loginLink {
	background-color: #fff;
	border: 1px solid #000;
	color: #000;
}
button:hover, 
input[type="button"]:hover,
html input[type=button]:hover, 
input[type=reset]:hover, 
input[type=submit]:hover,
.loginLink:hover,
button:focus, 
input[type="button"]:focus,
html input[type=button]:focus, 
input[type=reset]:focus, 
input[type=submit]:focus,
.loginLink:focus,
input[type="button"]:hover,
input[type="button"]:focus {
	background-color: #000;
	color: #fff;
}

.btn-group.bootstrap-select:nth-of-type(1) {
	margin-right: 15px;
}

.dropdown-menu li>a:focus, 
.dropdown-menu li>a:hover, 
.dropdown-submenu:hover>a {
	background-color: #009ddb;
	background-image: none;
}

.radio-label label {
	margin: 0 0 0.25em 0;
	font-size: 0.85em;
	vertical-align: top;
	line-height: normal;
    padding: 0;
    font-weight: 700;
}

.inline-help-indented {
	padding: 0;
	font-style: italic;
	margin: 0 0 0.75em 0;
}

.radio-label:nth-last-of-type(1) .inline-help-indent {
	margin-bottom: 0;
}

.content_inner_main,
.content_inner_main span {
	text-indent: 0;
}

/* footer */
#footer {
	height: auto;
	background-color: #000;
	border: none;
	color: #fff;
	padding-bottom: 0.5em;
	font-size: 15px;
}

#footer-support-telephone-no {
	padding-top:0;
}

#footer a {
	color: #fff;
	transition: all 0.25s;
}

#footer a:hover,
#footer a:focus {
	color: #fff;
	border-color: #fff;
}

/* specific to book online portal */
.navbar-default {
	background-color: rgba(0, 0, 0, 0.75);
	border: none;
	border-radius: 0;
	color: #fff;
	margin: 2em auto 0;
}

#ctl00_lnkChangeLanguage {
	font-size: 12px;
}

#headerwrapper .btn-success {
	background-color: #585858;
	border: none;
}

#headerwrapper .btn-success:hover,
#headerwrapper .btn-success:focus {
	background-color: #000;
}

.navbar-default a {
	color: #fff;
}

#headerwrapper::after{
	content: 'Book Now';
	display: block;
	clear: both;
	text-align: center;
	z-index: 9999;
	position: relative;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	letter-spacing: 1px;
	padding: 0.75em 0;
	font-weight: 300;
	background-color: rgba(0, 0, 0, 0.65);
	text-transform: uppercase;
	border-bottom: 20px solid #000;
}

#headerwrapper {
	background-image: url('http://newportlive.co.uk/images/portals/banner-gym.jpg');
	padding: 0;
	background-position: center;
}

.btn-group-xs>.btn, 
.btn-xs {
	font-size: 18px;
	border-radius: 0;
	padding: 0.25em 0.5em;
}
.title h1 {
	margin-bottom: 25px;
}

/* login box */
#ctl00_MainContent_pnOnlineReg {
	font-size: 14px;
	border-radius: 0;
}
#form_1,
.connect.signin-main * {
	border-radius: 0;
}

.connect.signin-main input {
	margin-bottom: 1.25em !important;
	padding: 10px !important;
	border: 1px solid #fff !important;
	transition: border 0.25s;
}


.connect.signin-main input:hover,
.connect.signin-main input:focus {
	border: 1px solid #009ddb !important;
	box-shadow: none;
}

.connect.signin-main .signin {
	background-color: #009ddb;
	font-size: 16px;
	font-weight: 400;
}

.connect.signin-main .signin:hover,
.connect.signin-main .signin:focus {
	background-color: #000;
}

.RegistrationMessage p:nth-last-of-type(1) {
	margin-bottom: 0;
}


/* responsive */
@media screen and (max-height: 875px) {
	#footer {
		position: relative;
	}
}

@media screen and (min-width: 1199px) {
	/* stop footer slipping up on large screens if page is short */
	#contentwrapper {
	   min-height: 53vh;
	}
}

@media screen and (max-width: 1200px) {
	#company-image-container {
		width: 992px;
	}
	#company-image-container::before {
		padding-left: 1em;
	}

	#ctl00_pnlImageHeader::after {
		padding: 0.75em 0;
		font-size: 2em;
	}
	#contentwrapper {
		padding: 1.5em;
	}

	label {
		margin: 0.5em 0;
	}

	#footer {
		position: relative;
	}
}

@media screen and (max-width: 1020px) {
	#company-image-container {
		width: auto;
		max-width: 100%;
	}
	#footer .span4.offset1 {
		display: none;
	}
}
@media screen and (max-width: 992px) {
	#contentwrapper {
		padding: 1em;
	}

	body {
		font-size: 1em;
	}
	.summary-user-email,
	.summary-username {
		font-size: 0.9em;
	}

	#summarybar .inner .summarybar_title, #summarybar .inner .titlebar {
		padding: 0.65em 0.5em 0.25em;
	}

	.header {
		font-size: 1em;
	}

}
@media screen and (max-width: 786px) {
	#headermobile {
		text-align: center;
	}
	#headerwrapper::after {
		font-size: 3em;
		padding: 0.5em 0;
	}
	.title h1 {
	    margin: 15px 0;
	    font-size: 26px;
	}
	.forgotPassword-content {
		font-size: 15px;
	}

	.forgotPassword-content input[type="submit"] {
		margin-right: 1em;
	}
	
	.forgotPassword-content input[type="submit"],
	.forgotPassword-content a.loginLink {
	    padding: 0.5em 1.5em!important;
	}

	#ctl00_MainContent_passwordRequest input[type="text"] {
		width: 100%;
	}
}

@media screen and (max-width: 655px) {
	#company-image-container::before {
		margin: 0 auto;
	}
	#ctl00_pnlImageHeader {
		background-position: 25% bottom;
	}	
}

@media screen and (max-width: 525px) {
	#ctl00_outerLinks a {
		margin-right: 15px;
	}

	#ctl00_pnlImageHeader {
		background-position: 45% bottom;
	}	
	#company-image-container::before {
		height: 75px;
	    display: block;
	    text-align: center;
	}
	#ctl00_pnlImageHeader::after {
		padding: 0.5em 0;
		font-size: 1.5em;
		font-weight: bold;
		border-bottom: 10px solid #000;
	}
	.wizard,
	#summarybar,
	.step,
	.nav {
		margin: 0 auto;
	}

	#sticker {
		padding: 0;
	}

	.diverror {
		margin-bottom: 0.5em;
	}

	.error {
		padding: 0.5em;
	}

	/* join online form */
	.connect.signin-main .form-footer,
	.connect.signin-main .form-main {
		padding-left: 20px;
		padding-right: 20px;
	}

	.connect.signin-main .form-main {
		padding-top: 20px;
	}
}

@media screen and (max-width: 350px) {
	.forgotPassword-content input[type="submit"], 
	.forgotPassword-content a.loginLink {
		padding: 0.5em 1.5em!important;
		display: block;
		width: 100%;
		margin: 0 0 1em;
	}
}