/* GymSync Booking Global CSS */

/* Resets */
html {font-size:100%; height:100%; width:100%;}
html, body, div, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
}

/* Clearfix */	
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */
.clear {clear:both; font-size:0em; height:0em; line-height:0em;}
.clearElement {clear:both;}

/* Styles */
body {font-size:62.5%;line-height: 1;color: black; font-family: "Lato",Arial,sans-serif; margin:0; padding:0; width:100%; background-color:#3a3a3a;} 
h1,h2,h3,h4,h5,h6 {font-size:1.3em;font-weight:normal; margin:0.8em 0 0.3em; line-height:1.1em; color:#4c4c4c;}
	
h1 { font-size: 4.5em; font-weight:bold; margin-top:0; }
h2 { font-size:2.7em; margin-bottom: 0.6em; }
h3 { font-size:2.4em;}
	
.subText { font-size:2.5em; margin-bottom:1em;}
p { margin:0.7em 0; }
p, li, .p {font-size:1.4em; color:#666; line-height:1.4em; list-style:none;}
li p, li .p {font-size:1em;}
table {border-collapse: separate;border-spacing: 0;}
a img {border:none;}
:focus, :active {outline: 0;}
ol, ul {list-style: none; margin:0; padding:0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {	quotes: "" "";}
strong { font-weight:bold;}
.hidden {display:none!important; }
.invisible { visibility:hidden; height:0; width:0;}
.bold {font-weight: bold;}
.underline {text-decoration: underline; }
a {text-decoration:none; display:inline; cursor:pointer; color:#0b5db1; }
a img {border:none;}
a:hover  {cursor:pointer; text-decoration:underline;}

#skipToContent a { font-size:1.4em; position:absolute; top:1em; left:1em; width:1px; height:1px; overflow:hidden; }
#skipToContent a:focus { text-decoration:underline; display:block; width:100px; height:20px; overflow:visible; }

#pageWrap { width:96.6em; margin:0 auto; display:block; } 
#pageContent { margin:1em 0 0 0; }

/* form elements styles */
.button.default:hover {background: url(/_webApp/i/buttons/default.jpg) 0 -32px  #e6e6e6; }
.text { padding:6px; }
.dropdown { background-color:#FFF; border:1px solid #b3b791; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; color:#535353; font-size:1.3em; padding:0.7em 0.3em 0.5em 0.5em;}
.watermark { color:#c5c5c5;}
.disabled, .aspNetDisabled, .disabled:hover, .aspNetDisabled:hover { opacity:0.6; filter: alpha(opacity=40); cursor:pointer;}
.label { font-size:1.4em; }

.floatLeft { float:left; }
.floatRight { float:right; }

/* feedback message style */
.success {  background:#e1f5da; color: #387d06; padding: 0.6em 0.8em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1em; border: 1px solid #c1e9b3; }
.success p { color: #387d06; margin:0; }
.fail, .failure {  background: #f8e6e6; color: #be0a0a;	padding: 0.6em 0.8em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1em; }
.fail p, .failure p { color: #be0a0a; margin:0; }
.info {  background: #fffdd2; color: #3e3e34; padding: 0.6em 0.8em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 1em; }
.info p { color: #3e3e34; margin: 0; }

/* error styles */
.error {  color: #be0a0a;  background: url(/_webApp/i/global/error.png) no-repeat top left #f8e6e6;  display: block; 
          font-size: 1.4em; padding: 0.6em 0.8em 0.6em 2.2em; -webkit-border-radius: 5px; -moz-border-radius: 5px; 
          border-radius: 5px; clear: both; font-size:1.2em; line-height:1.4em; margin:0.5em 0; position:relative; 
          text-align:left; border: 1px solid #F7ABAB;}
.error.inline {display: inline;}
.error.inlineblock {display: inline-block;}
.error .arrow {background: url(/_webApp/i/global/error_arrow.png) no-repeat center left transparent; display:block; height:1em; width:2em; position:absolute; top:-0.8em; left:0.5em; }
.error p { font-size:1.2em; margin:0; color: #be0a0a; }

/* HTML CONTENT*/
.htmlContent { font-size:1.4em; color:#797979;}
.htmlContent p { font-size:1em;}
.htmlContent ul, .htmlContent ol { margin-left:2.5em; }
.htmlContent ul li { list-style-type:disc; margin:0.5em 0; list-style-position:outside; font-size:1em; line-height:1.2em;}
.htmlContent ol li { list-style-type:decimal; margin:0.5em 0; list-style-position:outside; font-size:1em; line-height:1.2em; }
.htmlContent a { text-decoration:underline;}
.htmlContent table { max-width:100%; border-top:1px solid #CCC; border-left:1px solid #CCC;}
.htmlContent table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:0.5em; vertical-align:top; padding: 0.5em;}

/* button styles */
.button {  border-style: solid;  border-width: 1px; color: #fff; cursor: pointer; -webkit-border-radius: 0.5em;   -moz-border-radius: 0.5em; border-radius: 0.5em; background-repeat: repeat-x; background-position: top; }
.button.default { border-color: #ccc; background-image: url(/_webApp/i/buttons/default.jpg); background-color: #cecece; color: #474747; }
.button.default:hover {background: url(/_webApp/i/buttons/default.jpg) 0 -40px  #e6e6e6; }
.button.primary, .button.primary.aspNetDisabled:hover { border-color: #7da101; background: url(/_webApp/i/buttons/primary.jpg) repeat-x 0 0 #8CAA16; color:#2f2f2f; font-size:1.7em; padding:0.3em 1.5em; line-height:1.7em; }
.button.secondary:hover { background: url(/_webApp/i/buttons/secondary.jpg) repeat-x 0 -60px #febe00; }
.button.secondary, .button.secondary.aspNetDisabled:hover { border-color: #d98500; background: url(/_webApp/i/buttons/secondary.jpg) repeat-x 0 0 #fd8900; color:#2f2f2f; font-size:1.7em; padding:0.3em 1.5em; line-height:1.7em; }
.button.primary:hover { background: url(/_webApp/i/buttons/primary.jpg) repeat-x 0 -60px #4883ac; }
.button.positive { border-color: #094d08; background-image: url(/_webApp/i/buttons/confirm.jpg); background-color: #137e11; }
.button.positive:hover { background-image: url(/_webApp/i/buttons/confirm-hover.jpg); background-color: #1f9a1c; }
.button.negative { border-color: #4d0808; background-image: url(/_webApp/i/buttons/remove.jpg); background-color: #7e1111; }
.button.negative:hover { background-image: url(/_webApp/i/buttons/remove-hover.jpg); background-color: #9a1c1c; }
.button.warning { border-color: #904b01; background: url(/_webApp/i/buttons/warning.jpg) repeat-x 0 0 #cd6405; }
.button.warning:hover { background: url(/_webApp/i/buttons/warning.jpg) repeat-x 0px -40px #cd6405; }
.memberResult .button.warning { min-width: 9.4em;}
.button.small { font-size: 1.4em; padding: 0.3em 1em; }
.button.large { font-size: 1.8em; padding: 0.6em 0.7em; }
a:hover.button { text-decoration: none; }
.buttons .button { margin: 0 0.6em 0.6em 0; }
.buttons.fixed { position: absolute; bottom: 0.1em; left:0.1em; padding: 1.2em 2em 0.4em 2em; background: url(_webApp/i/global/white-70.png) repeat; width: 64.7em; border-top: 1px solid #ffffff; }
.buttonPanel { background: url(/_webApp/i/global/butPanel_bkground.jpg) repeat-x top left #b6b6b6; display:block; color:#666666; padding:0.8em; -webkit-border-radius: 0.5em;   -moz-border-radius: 0.5em; border-radius: 0.5em; border: 1px solid #d6d6d6; text-decoration:none;}
.buttonPanel:hover {text-decoration:none;} 
.fixedInner { padding-bottom: 2em; }

body.js .noJsDropdownFix { display:none; } 
#cboxLoadedContent .popUpForm .row .button.goBut { display:none; width:0; height:0; padding:0; margin:0; line-height:0; border:0; font-size:0; }
.js #loginRegister.onPage .goBut { display:none;}
.noJS #loginRegister.onPage .goBut { display:inline;}

/* HEADER ITEMS */
#mainBody { width:100%; margin:0; padding:0 0 3em 0; background-color:#FFF; min-height:50em;}
#topHeader {background: url(/_webApp/i/global/grey-bg.png) #373737; height:1.5em;}
#topHeader .innerContent { padding:0; }
.innerContent, .innerContent .onPage .inner { width: 80% /* 940px */; margin:0 auto; max-width: 95em; position: relative; }
@media screen and (max-width: 930px) { .innerContent, .innerContent .onPage .inner { width: 90% } }
#header { background-color:#fff; display:block; margin:0;  }
#header .innerContent { overflow:hidden; z-index:10; position:relative;}
.logo { float:left; padding-right:3em; padding-top:4em; padding-bottom:2.2em; z-index:20; position:relative;}
#socialLinks { float:right; position: relative; width:20.5em; zoom:1; height:2.8em; margin:1em; clear: both;}
#facebook-like-button { height:2.1em; width:5.5em; margin-right:0.8em; position: absolute; left:0; }
.twitter-follow-button { left: 90px; position: absolute; width:12.2em!important; top:0;}
.highlightLink.top { }
@media screen and (max-width: 990px) { .highlightLink.top { display: none; } }
@media screen and (min-width: 990px) { #socialLinks {margin-left: 30%; } }

/* Login Panel */
#login { display:none;}
#slidingLoginPanel, #loggedInPanel { float: right; padding: 0 1.5em 1em 1.5em; background: url(/_webApp/i/global/grey-bg.png) #373737; -webkit-border-radius: 0 0 1em 1em; -moz-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; max-width:55%;}
#slidingLoginPanel { -webkit-border-radius: 0 0 0 1em; -moz-border-radius: 0 0 0 1em; border-radius: 0 0 0 1em; }
#slidingLoginPanel { display:none; }
#slidingLoginPanel .error  { max-width:30.5em; margin-bottom:0;}
.noJs #slidingLoginPanel.closed { display:block;}
.noJs #loginPanel .col { width:18.3em;}
.loginPanelTabs { float:right; clear:right; background: url(/_webApp/i/global/grey-bg.png) #373737; -webkit-border-radius: 0 0 1em 1em; -moz-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; z-index:10; position:relative; margin-bottom:1em; margin-left: 1em; }
.loginPanelTabs span { width:6em; font-size:1.3em; color:#fff; cursor:pointer; margin:0 1.3em 0 0.5em; padding:0.8em 0 0.7em 0; display:block; text-align:center;}
.loginPanelTabs .closeTab { display:none; background: url(/_webApp/i/global/up_arrow.png) no-repeat center right; }
.loginPanelTabs .loginTab { background: url(/_webApp/i/global/down_arrow.png) no-repeat center right; }

/* Login Panel Styles */
#loginPanel { font-family: 'Varela Round', sans-serif; position:relative;}
#loginPanel h2 {margin: 0; color: #fff; font-size:1.7em; display:block; margin-bottom:0.5em;  }
#loginPanel .resetPassword { position:absolute; top:0.3em; right:1em; color:#c4c4c4; font-size:1.3em; font-weight:normal; text-decoration:underline;} 
#loginPanel .loginBtn, #loginPanel .logout { float:right; padding:0.4em 0 0.5em; margin-right:0; font-size:1.5em; width:7.2em;}
#loginPanel input { font-size:1.4em; margin-right:0.5em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; border:none; margin-bottom:0.5em;}
#loginPanel .text { padding:0.6em;}
#loginPanel .text.watermark { color:#999;}
#loginPanel .col { float:left; display:block; width:19.8em; margin-right:0.8em;}
#loginPanel .col input { width:90%;}
#loginPanel .col .error.small { width:13.3em; margin-top:0;}
#loginPanel .memberLinks { margin:1.3em 0 1em 0; float:left;}
#loginPanel .memberLinks a { font-size:1.4em; color:#e7e7e7; margin-right:1.2em; line-height:1.5em; padding:0.3em 0 0.3em 0;}
#loginPanel p { color: #e7e7e7; }
#loginPanel .textWarning { float: left; margin-right: 1.25em; }
#loginPanel .memberLinks a:hover { color:#ffffff; }
#loginPanel .memberLinks a.current { text-decoration:underline; }
#loginPanel .memberLinks a.current:hover { cursor:default; }
#loginPanel .memberLinks .myGym a { padding-left:2em; background: url(/_webApp/i/global/timetableIcon.png) no-repeat top left;}
#loginPanel .memberLinks .profile a { padding-left:2em; background: url(/_webApp/i/global/profileIcon.png) no-repeat top left;}
#loginPanel .memberLinks .classes a { padding-left:2em; background: url(/_webApp/i/global/myClassesIcon.png) no-repeat top left;}
.button.panel { background-color:#606060; color:#fff;  }
#loginPanel .loginUpdateView {position:relative;}
#loginPanel .connections {float:right;}

/* navigation styles */
#nav { height:8em; }


/* Generic Styles*/
.mainContentPanel { float:left; width:80%; }
@media screen and (max-screen: 760px) { .mainContentPanel { width: 100%; } }
.onPage .resetPassword { border:none; background:none; color:#333; text-decoration:underline;  margin-left:1em;}
.sideBar { float:right; width:26em; }
.sideBar ul { padding: 0 0 0 1.8em; }
.sideBar li { list-style:disc; }
.highlightPanel { padding: 4.347826086956522% /* 20px / 460px */; border:1px solid #cbceb2; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background: url(/_webApp/i/global/highlight_bkground.png); position:relative; display:block;}
.highlightPanel.primary {  background: url(/_webApp/i/global/primaryhighlight_bkground.png); border:1px solid #ffc440; margin-right:3em; clear:both;}
.sideBar li { list-style:disc; }
.sideBar .highlightPanel { padding:1.4em;}
.highlightPanel ul { margin-left:0; }
.highlightPanel .button { margin-top:0.8em; width:100%; display: block; text-align: center; padding: 3% 0; }
.highlightPanel h2 { font-weight:bold; margin:0; color:#333333; font-size: 2em; }
.highlightPanel h2 span { display:block; font-weight:normal; font-size:0.65em; color:#494949; font-size: 0.85em; line-height: 1.3; padding-top: 3%;}
.js .highlightPanel .dropdown { margin:1em 0;}
.js .highlightPanel .first .dropdown {margin-right:0.8em;}
.highlightPanel a.notListed {color:#868b64; font-size:1.4em; text-decoration:underline; clear:both; padding-top:1em; display:block; padding-left:0.5em; float:left;}
.js .highlightPanel a.notListed { padding-top:0.5em;}
.highlightPanel .dropdown { margin:0.2em 0 0.6em;}
.highlightPanel .noJsDropdownFix .button { float:none; padding:0.5em 1em; margin-left:0.5em;}
a.highlightLink { background: url(/_webApp/i/global/right_arrow.png) no-repeat center right #048bc4; color:#FFF; font-size:1.6em; line-height: 1.4; padding:1.041666666666667% 3.125% 1.041666666666667% 1.5625% /* 10px 15px / 960px */; display:block; float:right; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; margin-bottom:1.2em; text-decoration:none !important;}
a.highlightLink span { font-size:0.8em; }
.panelTopContent  { width: 48.936170212766% /* 460px / 940px */; float:left; clear:both;} 
.panelContent { clear:both; padding-top: 8.51063829787234%; } 
.panelContent h3 { margin-top: 0; }
.highlightPanelWrap  { width: 48.936170212766% /* 460px / 940px */; float:left; }
.sidePanel { width: 48.936170212766% /* 460px / 940px */; float:right; text-align:right; padding: 1% 0;
    margin-right: -2.234042553191489%; }
.sidePanel img { width: 100%; height: auto; }


/* Home Styles */
#home { background: url(/_webApp/i/global/home_bkground.jpg) no-repeat center top #fff; margin-top:-8em; padding-top:7em; padding-bottom:2em; zoom:1;}
#home .highlightPanel { margin-bottom:2em; float:right; width:39.130434782608696% /* 180px / 460px */ ;}
#home .highlightPanel.primary { float: left; margin: 0; }
@media screen and (max-width: 750px) { #home .highlightPanel { min-height: 14em; } }
#content_BtnRegister, #content_BtnLogin { text-align: center; padding: 3% 0; }
#content_BtnRegister { text-shadow: 1px 1px 0px #fed591;
        filter: dropshadow(color=#C9DD76, offx=1, offy=1); }
#content_BtnLogin { text-shadow: 1px 1px 0px #C9DD76;
        filter: dropshadow(color=#C9DD76, offx=1, offy=1); }
#home .appDownloadLinks li { float:left; width:25%; margin:1em 2% 0 0; }
#home .panelTopContent { padding-top: 5.3191489361702% /* 50px / 460px */; padding-bottom: 3.723404255319149%; /* 35px / 940px */ }
#home h1 { line-height:1.3em; font-size: ; /* 45px / 940px */ }
.appDownloadLinks { margin-bottom:1em;  clear:both;}
.appDownloadLinks img { float:left; margin-right:0.5em;} 
.appDownloadLinks .download { display:block; text-shadow: 0px 1px 0px #ffffff; } 
.appDownloadLinks .panelText { font-size:1.1em; font-weight:bold; text-shadow: 0px 1px 0px #ffffff;} 

.gymDetails h1 { margin:0;}
.gymDetails h2 { margin-top:0; color:#666666;}
.gymDetails h3 { font-size:1.8em;}
.gymDetails p { font-size:1.6em;}

/* Feedback Page Styles - i.e. Confirmation */
.feedbackMessage.header { background: none repeat scroll 0 0 #32343B; border-bottom: 1px solid #2A2C30; padding: 1em 0; }
.feedbackMessage.header .innerWidth { padding: 0; }
.gymLogo { margin-top: 1em; }

/* gym timetable styles */
.timetableNavigation { margin-top:2em;}
.timetableNavigation ul { margin-left:0.8em; width:99%;}
.timetableNavigation li { float:left; background: url(/_webApp/i/calendar/calTabRight.png) no-repeat top right; width:12.9%; z-index:10; display:block; border-top:1px solid #fff;position:relative;top:0.14em;}
.timetableNavigation li .aspNetDisabled {  opacity:1; filter: alpha(opacity=40); cursor:default;}
.timetableNavigation li.prev .aspNetDisabled, .timetableNavigation li.next .aspNetDisabled { opacity:0.3; filter: alpha(opacity=30); cursor:default;}
.timetableNavigation li.next, .timetableNavigation li.prev { margin-right:0px; margin-left:-0.2em; width:2.5em; border-left:1px solid #DBDBDB; border-right:1px solid #DBDBDB; 
                                                             border-top:1px solid #DBDBDB;-webkit-border-radius: 0.3em 0.3em 0 0; -moz-border-radius:0.3em 0.3em 0 0; border-radius:0.3em 0.3em 0 0; background: url(/_webApp/i/buttons/default.jpg) repeat-x top left #E1E1E1; line-height:2.6em; min-height:2.4em; }
.timetableNavigation li.prev { margin-right:1em; margin-left:0;}
.timetableNavigation li input { cursor:pointer; border:0; position:relative; z-index:1; width:95%; text-align:center; cursor:pointer; position: relative; left:-0.2em; 
                                padding: 0.8em 0 0.7em 1.8em; background: url(/_webApp/i/calendar/calTab.png) no-repeat top left; margin:0 1.5em 0 -1em; z-index:10; font-size:0.9em; border:0; vertical-align:bottom;}
.timetableNavigation li.prev input, .timetableNavigation li.next input { width:3em; text-indent:-99999px; left:0; margin-left:0; 
                                                                         background: url(/_webApp/i/calendar/leftArrow.png) no-repeat center center; padding:0; height:2.75em; 
                                                                         overflow:hidden; display:block; border:0;}
.timetableNavigation li.next input { background: url(/_webApp/i/calendar/rightArrow.png) no-repeat center center; }
.timetableNavigation li.current input { font-weight:bold; color:#000; background: url(/_webApp/i/calendar/calTab.png) no-repeat left -40px;  }
.timetableNavigation li.current { background: url(/_webApp/i/calendar/calTabRight.png) no-repeat right -40px; position:relative; z-index:15; top:0.14em;}


.classListings {border: 1px solid #D8CCC5; background:#f4f2f1; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; padding: 1.5em; position: relative; z-index: 0; left: 2px;}
.classListings h3 { margin:0.5em 0 0.8em;}
.classListings ul { border-top:1px solid #cccccc;}
.classListings li {display:block; clear:both; padding:1.3em 1em; border-bottom:1px solid #cccccc;background-color:#fff; min-height:2.4em; margin:0; z-index:10; overflow:visible;}
.classListings li span.full { text-align: left; width: 130px; color:#C87100;}
.classListings li .cancelled { width:20em; color:#cc0000; text-align:left;}
.classListings li .day { margin:0 2em 0 0; float:none; display:block; font-size:1.1em; line-height:1.5em;}
.classListings li .time { margin:0 3em 0 0; font-size:1.1em; color:#333333; float:left; line-height:1.2em; display:block;}
.classListings li .title { margin:0 0.5em 0 0; font-size:1.2em; color:#333333; float:left; width:16em; text-align:left; line-height:1.2em; display:block; vertical-align:middle;}
.classListings li .classDetails {display:block; float:left; width:30em; max-width:30em; padding-top:0.4em; vertical-align:middle;}
.classListings li .classOther {display:block; float:left; font-size:1em; max-width:13em; line-height:1.2em; padding-top:0.4em; vertical-align:middle; }
.classListings li .controls {float:right; line-height: 2.2em; width:21em; text-align:right; margin-top:-0.1em; zoom:1; display:block; vertical-align:middle; position:relative;}
.classListings li .controls .cancelLink { color:#666; font-size:1em; width:9em; text-align:center; text-decoration:underline; background:none; border:0; cursor:pointer; float:left; padding:0.4em; }
.confirmPanel { background-color:#f2f2f2; position:absolute; top:-2.5em; right:-0.8em; border:3px solid #666666; padding:0 0.6em 0.6em; width:19.5em; -webkit-border-radius: 0.5em; 
                -moz-border-radius: 0.5em; border-radius: 0.5em;}
.confirmPanel .button { float:right; margin:0 !important;}
.confirmPanel .button.positive { margin-left:8px !important; }
.confirmPanel span { display:block; float:none; text-align:center; padding-bottom:0.1em; font-size:1.1em;}
.classListings.tall li { min-height:3.6em;}
.classListings.tall li .confirmPanel { top:-2.8em;}
.classListings.tall li .confirmPanel span { padding:0.2em 0;}
.classListings li .controls .button { width:130px; margin-left:8px; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; font-size:1.1em; vertical-align:middle;}
.classListings li .controls .attending { color:#009900; background: url(/_webApp/i/global/attending.png) no-repeat left center; width:7.5em; padding:0.2em 0 0.3em 2em; text-align:left; 
                                         line-height:2.6em; vertical-align:middle;}
.classListings li .controls .reserve { color:#C87100; background: url(/_webApp/i/global/reserved.png) no-repeat left center; width:7.5em; padding:0.2em 0 0.3em 2em; text-align:left; 
                                       line-height:2.6em; vertical-align:middle;}
.classListings li .infoPopup { display:none; position:absolute; text-indent:0; background:url(/_webApp/i/calendar/sessionToolTipArrow.png) left top no-repeat; z-index:10; top:1.2em; left:0; }
.classListings li .infoPopup p { color:#fff;  }
.classListings li .infoPopup .content { background:url(/_webApp/i/global/sideBar_bkground.jpg) repeat-y top right #595959; padding:5px 25px 12px 12px; 
                                        -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; margin:0.5em 0 0 -0.5em; zoom:1; font-size:0.8em; width: 10em;}
.classListings li .controls input.closeConflict { background:url(/_webApp/i/global/close-alt.png) 0px 0px no-repeat transparent; text-indent:-99999px; height:2em; width:2em; 
                                                  border:none; cursor:pointer; margin-top:0.8em; float:right;}
.classListings li .controls .conflictInfo { line-height: 16px; text-align: left; float:left; font-size:1em; width:17em; padding:0.6em 0 0.3em;}
.classListings li .classStatus { vertical-align:middle; padding-left:6px; }

.classListings li a.infoIcon { text-decoration:none; color:#FFF; width:22px; height:22px; display:inline-block;text-align:center; margin-left:6px; line-height:20px; 
                               text-indent:-99999px; background: url(/_webApp/i/global/information.png) no-repeat center center; position:relative;}
.classListings .loading {position:absolute; width:100%; height:100%; opacity:0.6; filter: alpha(opacity=60); 
                         top:0; left:0; display:none; z-index:1; background:url('/_webApp/i/calendar/loading.gif') 375px 30px no-repeat #fff;}
.gymDetails .weekCommencingDropdownList, .gymDetails h3 { float: left; }
.gymDetails .weekCommencingDropdownList { position: relative; top: 0.5em; left: 1em;  }
.gymDetails .weekCommencingDropdownList select { width: 17.4em; }
.gymDetails .weekCommencingDropdownList .customStyleSelectBoxInner { width: 16.5em !important; white-space: nowrap !important; overflow: hidden !important; }
.gymDetails .weekCommencingDropdownList .button { padding: 0.5em 1em; position: relative; top: -0.2em; left: 0.5em; }
.js .gymDetails .weekCommencingDropdownList .button  { display: none; }

/* Payment dialogs */
#bookingPayment {height:35em;width:50em;padding:1em;}
#bookingPayment .buttons {position:absolute;right:0;bottom:0;margin-bottom:1em;}
    #bookingPayment .infoPanel {margin:1em 2em;position:relative;}
    #bookingPayment .infoPanel p {margin:0;}
    #bookingPayment .infoPanel .label {font-size:inherit;width:8em;display:inline-block;}
    #bookingPayment .infoPanel .info {font-weight:bold;background-color:inherit;padding:0;}
    #bookingPayment .infoPanel .buttons {position:absolute;right:0;top:0;margin-bottom:0;}
    #bookingPayment #BtnSubmitCard {visibility:hidden;}
    #bookingPayment .errors {color:red;}

/* footer styles */
#footer { background: url(/_webApp/i/global/footer_bkground.jpg) repeat-x center top #3a3a3a; padding:2em 0; clear:both;}
#footer p, #footer a { color:#fff; margin:0.2em 0;}
#footer a {text-decoration:underline; }
.footerBranding { padding-top:1.5em;}
#footer .telephone { font-size:1.8em;}
.footerCol { width:24em; float:left;}
.footerCol.first { margin-right:2em; padding-right:1em; border-right:1px solid #585858;}
.footerCol li { line-height:1.6em;}
.footerCol li a { color:#f2f2f2;}

/* Popup styles */
.popUpForm .error { border:1px solid #f7abab; margin:0.3em;}
.popUpForm { background:#f9faf2; border:1px solid #cbceb2; padding:0.4em 0.5em 0 0.5em; -webkit-border-radius: 0.8em; -moz-border-radius: 0.8em; border-radius: 0.8em; margin:1.5em 0;}
.popUpForm input {width:20em; margin:0.4em 0; font-size:1.4em; background-color:#FFF; border:1px solid #ccc; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em;} 
.popUpForm label {color:#666; display:block;} 
.popUpForm .row { border-top:1px dashed #e2e4d6; padding:0.5em 1em; min-height:3.5em; position:relative; }
.popUpForm .row.first { border-top:0;}
.popUpInner .button { margin-right:0.5em;}
.popUpForm .dropdown { width:21em;}
.noJs .popUpForm .dropdown { width:22.5em;}
.popUpForm .customStyleSelectBox { width:20em;}
.popUpForm .customStyleSelectBoxInner {width: 240px !important; white-space: nowrap !important; overflow: hidden !important;} 
.popUpForm .row .button { width:auto; margin-left:1em; clear:both; }
.onPage .popUpForm input.positive { background-color:#137e11; border-color: #094d08; }


/* Main form styles */
.pageForm .error, .onPage .popUpForm .error  { border:1px solid #f7abab; margin:0.3em;}
.pageForm .error.seperated, .pageForm p.error, #cboxLoadedContent #loginRegister .regView .error.inline { margin-left:15.2em; margin-top:1em; display:inline-block; margin-top:0.2em; color:#BE0A0A;}
.pageForm, .onPage .popUpForm { background:#f9faf2; border:1px solid #cbceb2; padding:0.4em 0.5em 0 0.5em; -webkit-border-radius: 0.8em; -moz-border-radius: 0.8em; border-radius: 0.8em; margin-bottom:1em;}
.pageForm input, .onPage .popUpForm input {width:20em; margin:0.4em 0; font-size:1.4em; background-color:#FFF; border:1px solid #ccc; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em;}
.pageForm input { width: 50%; }
.formWrap { padding-bottom: 5%; }
.pageForm .checkboxList, .onPage .popUpForm .checkboxList { width:20em; float:left;}
.pageForm .checkboxList label, .onPage .popUpForm label { float:left; font-size:1.4em; width:10em; padding:0.6em 0;}
.pageForm .checkboxList input { float:left; width:2em; margin:0.6em 0; border:0; clear:left;}
.pageForm input.button { width:12em;}
.pageForm label, .pageForm .label,  .onPage .popUpForm label, .onPage .popUpForm .label {color:#666; display:block; float:left; width:12em; padding:0.8em 0; margin-right:1em; line-height:1.3em;} 
.pageForm .row { border-top:1px dashed #e2e4d6; padding:0.6em 1em;}
.pageForm .row p { color:#888a7b;}
.pageForm .row.first { border-top:0;}
.formSection h3 { margin-top:1.5em;}

/* login/register panel */
#loginRegister { background:#fff; display:none; }
#loginRegister .inner, .popUpInner {padding:1em; background-color:#FFF;}
#loginRegister h3 { font-weight:bold; margin:0; color:#333333; font-size:2.8em; }
#loginRegister .loginBox { float:left; width:67em;}
.loginBox .keepLoggedIn input { display: inline-block; width: 1em; margin: 1em 0em; border:0;}
#cboxLoadedContent #loginRegister .loginBox, #cboxLoadedContent #loginRegister .regView { max-width:51.5em;}
#loginRegister .registerBox {border:1px solid #000;  float:right; width:200px;}
#loginRegister .regView .label { display:block; }
#loginRegister .regView .regInfo { display:block; }
#loginRegister .regView .inner { overflow:hidden; padding:0em; }
#loginRegister .selectedGym .gymName { font-weight:bold;}
.register { display:none;}
.resetPass { /*width: 51em; margin:0 auto;*/ width:100%; }
/* compact version styles */
#loginRegister.compact {width:34em;}
#loginRegister.compact .error.inline { display:block; clear:both; }
#loginRegister .gymLocation { width:16em; }
#loginRegister .btnLocation { border-color: #7da101; background-color: #8CAA16; font-size: 1.2em; position: relative; height: 2.5em; 
                              top: -1px; margin: 0; text-align: center; width: 4.4em; padding: 0; }
#loginRegister .suggestedLocations { padding:1em; display:block; clear:both; }
#loginRegister .suggestedLocations ul { border:1px solid #ccc; background:#fff; border-bottom:none; border-radius:0.3em; }
#loginRegister .suggestedLocations li { cursor:pointer; display:block; line-height:1.6em; border-bottom:1px solid #ccc; padding:0.4em; }
    
#loginRegister .locationsLoading { background: url('/_webApp/i/global/loading-small.gif') 6px 4px no-repeat #fff; width: 24px;height: 22px; 
                                   display: inline-block; position: absolute; left: 405px; top: 13px; display:none; }
#loginRegister .cantFindGym { padding-left: 13em; }
#loginRegister .codeInfo { width: 45.4em; }
#loginRegister .codeInfo h3 { font-size:1.4em; font-weight:bold; color: #666; line-height: 1.8em; padding-left: 2em; 
                              background:url('/_webApp/i/global/information.png') 0px 0px no-repeat transparent; }
#loginRegister .codeInfo p { }
#loginRegister .checkCodeText { width:16em; }
#loginRegister .checkCodeButton { border-color: #7da101; background-color: #8CAA16; font-size: 1.2em; position: relative; height: 2.5em; 
                              top: -1px; margin: 0; text-align: center; width: 4.4em; padding: 0; }
#loginRegister .registerGymPanel { margin-bottom: 1em; width: 27em; margin-left: 18.2em; }
#loginRegister .registerGym { font-weight:bold; margin: 0; padding: 0; line-height: 1em; }

#loginRegister .row p label {font-size:1em;width:auto;}
#loginRegister .row p input {width:auto;margin:0.8em 0;}
#loginRegister .row p .error {font-size:0.85em;margin-left:5em;}

#cboxLoadedContent { border:2px solid #999; -webkit-box-shadow: 2px 1px 2px 0px #999999; box-shadow: 2px 1px 2px 0px #999999;  -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; overflow:hidden !important; background-color:#fff; max-width:54em; height:auto;}
#cboxLoadedContent h1 { margin-top:0; font-size:2.8em;}
#cboxLoadedContent h3 { margin-top:0; font-size:2.8em;}
#cboxLoadedContent p { color:#333;}
#cboxContent #loginRegister { width:100%;}
#cboxContent, #colorbox, #cboxOverlay, #cboxWrapper { overflow:visible !important; z-index: 100;}
#cboxClose{position:absolute; top:-0.8em; right:-0.8em; background: url(/_webApp/i/global/close.png) no-repeat 0 0;  width:2em; height:2em; text-indent:-9999px;border:none;}
#cboxClose:hover{background-position:0 -28px;}
#colorbox { z-index:101; }


/* Responsive Styles */
.innerContent.scalable { max-width:95em; width:96%; padding:0 2%;}
.innerContent.scalable h1 { font-size:3.8em;}
.innerContent.scalable .logo { padding-right:0; max-width:100%;}
.innerContent.scalable .logo img { max-width:100%;}
.innerContent.scalable #loginRegister.onPage .inner { max-width:95em; width:100%; padding:0; }
.innerContent.scalable .pageForm { width:96%;}
.innerContent.scalable .pageForm label { padding:0.7em 0 0.2em 0; }
.innerContent.scalable .pageForm input { max-width:96%;}
@media screen and (max-width: 553px) {
	.innerContent.scalable .pageForm .error.seperated { margin-left:0;}
}



/* Selectmenu
----------------------------------*/
.highlightPanel .customStyleSelectBox { margin:1em 0; }
.highlightPanel .first .customStyleSelectBox { margin-right:0.8em;}
.customStyleSelectBox { background: url(/_webApp/i/global/selectArrow.jpg) no-repeat right center transparent; font-size:1.2em; padding:0.7em 0 0.5em 0.8em; border:0.1em solid #CCCCCC; border-radius: 0.3em 0.3em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; height:1.3em; background-color:#FFF; font-size:1.4em;}
.customStyleSelectBoxInner {width: 131px !important; white-space: nowrap !important; overflow: hidden !important; line-height: 15px;} 
.js .mediumSelect .dropdown { width:13.5em;} 
.mediumSelect .dropdown { width:19.5em;} 
.mediumSelect .customStyleSelectBox { width:12.6em;} 


/* Get the app notification */
#PnlAppPopup {display:none; z-index:20; position:relative; }
#PnlAppPopup input.button, #PnlAppPopup a { font-size:1em; margin-left:0.5em;} 
#PnlAppPopup p { border:1px solid #000; font-size:1.5em; padding:0.6em 1em 0.6em 2.5em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; color:#fff; background: url(/_webApp/i/global/AppIcon.png) no-repeat 0.6em 0.5em #333; margin-top:0;}
#PnlAppPopup .android {display:none; }
#PnlAppPopup .apple {display:none;}

@media screen and (max-width: 480px) {
	#PnlAppPopup span { display:block; padding:0 0 0.5em 0; font-size:1.2em; }
	#PnlAppPopup a { display:block; float:left; margin-left:0;}
}

/* Cancellation Policy Dialog */
#PagePolicyPanel, #PolicyPanel { width:100%; }
#PolicyPanel { display:none; }
#PagePolicyPanel.inPage  .closeBtnWrap { display:none; }

/* Profile Page */
.checkBoxHeightFix input {margin-top:2em !important;}
	
	
.comingSoon { position: absolute; left: 23%; top: -8%; z-index: 150; }

@media screen and (max-width: 1160px) { 
	
	#home .highlightPanel { min-height: 14.5em; }
	#home.holdingHome .highlightPanel { min-height: 0; }
}

@media screen and (max-width: 1060px) { 
	
	#home .highlightPanel { min-height: 16.5em; }
	#home.holdingHome .highlightPanel { min-height: 0; }
	#home .panelTopContent { padding-top: 2.5%; min-height:0; }
	#home .appDownloadLinks li { width: 35%; }
}

@media screen and (max-width: 955px) {
	#home.holdingHome .highlightPanel { min-height: 14.5em; }
}
@media screen and (max-width: 870px) { 
	#home.holdingHome .highlightPanelWrap { width: 100%; float: none; }
	.comingSoon { top: -6%; }
}

@media screen and (max-width: 730px) { 
	#home .appDownloadLinks li { width: 45%; }
	.highlightPanelWrap { width: 100%; float: none; }
	#home .highlightPanel { min-height: 12.5em; }
	.panelContent { padding-top: 0; }
	#footer a.highlightLink { margin-bottom: 5%; }
	.pageForm input { width: 97%; }
	.pageForm .error.seperated, .pageForm p.error, #cboxLoadedContent #loginRegister .regView .error.inline { margin-left: 0; }
}

@media screen and (max-width: 640px) { 
	#home .panelTopContent,
	.panelContent,
	.sidePanel,
	#home .appDownloadLinks li,
	.footerCol,
	.mainContentPanel { 
		width: 100%; float: none; }
	.mainContentPanel { padding-top: 6%; }
	.logo {margin:0; padding: 0; }
	#home .panelTopContent { min-height: 0;padding-top:5.31915%;  }
	.sidePanel { margin: 0 0 8%; padding: 0%; }
	#home .highlightPanel,
	#home .highlightPanel.primary { 
		width: 91.4893617021276%; padding: 4.2553191489362%; float: none; margin-bottom: 5%; min-height: 0; }
	#footer a.highlightLink { 
		width: 90.625%; float: none; padding:2.083333333333334% 6.25% 2.083333333333334% 3.125%;}
	#mainBody { padding: 0; }
	.footerCol.first { border: none; }
	#PnlAppPopup { margin-top: 8%; }
	#home.holdingHome .sidePanel { margin-top: 0;}
	#home h1 { padding: 4% 0; }
	.comingSoon { top: -2%; left: 45%; }

}

@media screen and (max-width: 320px) {
	.logo { width: 100%; }
	.logo img { width: 100%; height: auto; }
	.comingSoon { top: -1%; left: 32%; }
	#home.holdingHome h1 { margin-top: 8%; }
}

/* CONFIRM BOOKING PAGE STYLES */
.confirmBooking .error { font-size:1.4em; }

/* CANCEL BOOKING PAGE STYLES */
.cancelBooking  .error { font-size:1.4em; }

/* SUGGEST A GYM PAGE STYLES */
.suggestGym .label { width:16em; }
.suggestGym .error.inline { margin-left:19.9em; }

/* PROFILE PAGE STYLES */
.profile input.changePassword { margin-left:11.2em; }
.changePasswordBtns, .changePasswordPanel { display:none; }
.profile .label { width:10em; display:inline-block; }
.profile .text { width:20em; }
.profile p {padding:0 1em;}
.profile .connection .label {width:80%;padding:0;}
.profile .connection button {text-align:right;float:right;}

/* APP STORE PAGE STYLES */
.appStore {}
.appStore .appDownloadLinks li { width: 20em; float: left; margin: 1em 2em 1em 0em; }

/* Generic Styles */
.box { border:1px solid #000; -webkit-border-radius: 0.8em; -moz-border-radius: 0.8em; border-radius: 0.8em; padding:1em; }    
.box.blue { background: #E5ECFF; border-color: #B3C7FF; }
.box.green { background: #f9faf2; border-color: #cbceb2; }
.box.orange { background: url(/_webApp/i/global/primaryhighlight_bkground.png); border-color: #ffc440; }

/**************** LOADING OVERLAY ****************/

#loadingOverlay {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:white;
    opacity:0.9;
    z-index:1000;
}

#loadingOverlay div {
    font-size:1.5em;
    top:40%;
    left:48%;
    position:fixed;
    background-color:#1f9a1c;
    background-image:url(/_gymbuddy/i/buttons/confirm.jpg);
    padding:0.3em 1em;
    color:#fff;
    border-radius:5px;
    border:#094d08 1px solid;
    opacity:1;
}

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

#loadingOverlay div span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

#loadingOverlay div span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

#loadingOverlay div span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

/**************** /LOADING OVERLAY ****************/