@charset "UTF-8";
/* CSS Document */

@import url(base-form.css);
@import url(//fonts.googleapis.com/css?family=Oswald:300,700,400&subset=latin,latin-ext);


* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	padding:0;
	margin:0;
	color:#000000;
	text-align: centre;
	font-family: 'Oswald', sans-serif;
	background: url(stripes/headerbg.png) repeat;
	background-color: #e4e3e3;
	font-weight:300;
}


a, a:link, a:visited, a:active {
	color: #158574;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

img {
	max-width: 100%;
}

b {
    font-weight: 400;
	font-style:italic;
}


div.warning {
	color: #FF0000;
}

div.dialogue.password p { /*fix*/
	padding-top: 20px;
}

div.main {
	padding: 0 20px 90px 20px;
	margin:auto;
	max-width: 60em;
	background-color: #f3f1f1;
}


/* teams and services page */

div.teams, div.services {
	margin:auto;
	padding: 0;
}

div.service, div.team {
	margin-left:-20px;
	margin-right:-20px;
	padding: 40px 0 0px 0;
	border-width: 40px 30px 0px 30px;
	border-image:url(stripes/hr_lg.png) 40 30 0 30 repeat stretch;
}

.serviceName, .teamName {
	text-align: center;
	margin:auto;
	padding: 20px 40px 5px 40px;
	text-transform:uppercase;
}
.serviceDescription, .teamDescription {
	max-width: 55em;
	text-align: center; /*fix*/
	margin: 20px auto;
	padding: 0 20px;
	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	background-color:#ffffff;
}

.teamDescription {
	padding: 20px 20px;
	 /* to fix lack of paragraph tags within this area, unlike on .serviceDescription */
}

/* top area before form */
div.instructions {
	color:#000000;
	width: 100%;
	padding: 40px 0 20px 0;
	margin-left:-20px;
	margin-right:-20px;
}

div.instructions p {
	max-width: 55em;
	text-align: center; /*fix*/
	margin:auto;
	padding: 0px 30px;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
}

div.gridPage {
	margin: 0;
	margin-left:-20px;
	margin-right:-20px;
	padding:20px 0 0 0;
}

div.header {
	background: url(stripes/headerbg.png) repeat;
	background-color:#158574;
	overflow:hidden;
	border-bottom: solid 3px #158574;
}

.headerText {
	color:#000000;
	font-size:22px;
}
.title {
	text-transform:uppercase;
	color:#FFFFFF;
	font-weight:400;
	font-size:40px;
	text-shadow: 3px 3px 0px #28897c;
	padding: 0px 30px; /*fix*/
}

h2 {
font-weight:normal;
}


div.footer {
	padding: 5px 0;
	margin: 0;
	background: url(stripes/headerbg.png) repeat;
	background-color:#158574;
	overflow:hidden;
	border-top: solid 3px #158574;
	min-height: 50px;
	color:#FFFFFF;
}

div.poweredBy {
    background-color: #CCCCCC;
}


div.serviceGroup {
	border: 2px solid #AAA;
	padding: 30px;
	margin: 30px;
}

span.serviceGroupName, span.serviceGroupDivider {
	display:none;
}

/* timezone detect page */

body.timezoneDetect {
	background: white;
	text-align: center;
	padding: 100px;
}

/* grid of times */

div.grid {
	clear:both;
}

div.Page {
	margin: 0px auto;
}

div.timeZone input.submit {
	display: none;
}

div.gridDay {
	max-width: 300px;
	margin: 0px auto;
}

span.gridHeaderDayName, span.gridHeaderDate {
	display: none;
}

div.gridHeader {
	background-color: #000000;
}

div.gridHeader h4 {
	color: #FFFFFF;
	text-transform:uppercase;
	white-space: nowrap;
	padding: 5px;
}

div.gridSlot {
	padding: 10px;
	margin: 4px 0px;
	white-space: nowrap;
	cursor: pointer;
}

/* time slot NOT free */
div.gridBusy, div.gridTechnicallyFree {
	color: #999999;
	text-decoration: none;
	background-color: #e4e3e3;
}

div.showTechnicallyFree div.gridTechnicallyFree {
	background-color: #158574; /*fix*/
	color: #ffffff;
}

/* time slot free */
div.gridFree {
	background-color: #158574; /*fix*/
	color: #ffffff;
	cursor: pointer;
}

div.gridFree a{
	color: #ffffff;
}

/* time slot free background hover */
div.gridHighlight {
background:	#000000;
color: #ffffff;/*fix*/
}

div.gridHighlight a{
	color: #ffffff;
}

/* time slot free text override on hover */
div.gridHighlight a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

/*
 The wideCol, mediumCol and narrowCol classes will be dynamically
 and incrementally added where possible. If the result wraps the
 grid, they will be removed for the safe failover.
*/

div.paging.wideCol, div.gridDay.wideCol {
	margin: 0px 2px;
	float: left;
	overflow: hidden;
}

div.paging.wideCol {
	width: 45px;
}

div.paging.wideCol h4 {
	margin: 0px;
}

/* hover of previous and next buttons */

div.paging.wideCol h4 a:hover {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 45px;
	opacity:0.5;
}

/* next and previous buttons - LARGE*/

div.paging.pagingNext.wideCol h4 a {
	background-image: url(stripes/pageLeftRight.png);
	background-repeat: no-repeat;
	width: 30px;
	background-position: center right;
}

div.paging.pagingPrevious.wideCol h4 a {
	background-image: url(stripes/pageLeftRight.png);
	background-repeat: no-repeat;
	width: 30px;
	background-position: center left;
}

html.rtl div.paging.pagingNext.wideCol  h4 a {
	background-image: url(stripes/pageLeftRight.png);
	background-repeat: no-repeat;
	width: 30px;
	background-position: center left;
}

html.rtl div.paging.pagingPrevious.wideCol h4 a {
	background-image: url(stripes/pageLeftRight.png);
	background-repeat: no-repeat;
	width: 30px;
	background-position: center right;

}

/* next and previous buttons - SMALL */

div.paging.mediumCol.pagingNext h4 a {
	background-image: url(stripes/pageLeftRight_Small.png);
	background-repeat: no-repeat;
	width: 20px;
	background-position: center right;
}

div.paging.mediumCol.pagingPrevious h4 a {
	background-image: url(stripes/pageLeftRight_Small.png);
	background-repeat: no-repeat;
	width: 20px;
	background-position: center left;
}

html.rtl div.paging.mediumCol.pagingNext  h4 a {
	background-image: url(stripes/pageLeftRight_Small.png);
	background-repeat: no-repeat;
	width: 20px;
	background-position: center left;
}

html.rtl div.paging.mediumCol.pagingPrevious h4 a {
	background-image: url(stripes/pageLeftRight_Small.png);
	background-repeat: no-repeat;
	width: 20px;
	background-position: center right;
}

div.gridDay.wideCol {
	width: 100px;
}

div.gridDay.wideCol h4 {
	margin: 0px;
}

div.gridDay.wideCol span.gridHeaderFull {
	display: none;
}

div.gridDay.wideCol span.gridHeaderDayName, div.gridDay.wideCol span.gridHeaderDate {
	font-weight: normal;
	display: block;
}

div.paging.mediumCol {
	width: 30px;
}

div.gridDay.mediumCol {
	width: 80px;
	font-size: small;
}

div.gridDay.narrowCol {
	width: 65px;
	font-size: x-small;
}

/* booking form and other pages */

div.dialogue {
	max-width: 60em;
	margin: 0px auto;
}

div.bookingForm {
	text-align:center;
	padding:40px 0px;
	margin:auto;
}

div.itemLabel {
	color:#158574;
	max-width: 55em;
	text-transform:uppercase;
}

/* to correct padding inconsistencies in mobile */


input.dialogueText {
	width: 400px;
	max-width: 90%;
	height: 30px;
}

textarea.dialogueTextArea {
	width: 400px;
	max-width: 90%;
	height: 150px;
}

div.dialogue.bookingForm {
	text-align: left;
	text-align: start; /* not universally supported, hence following fix */
}

input.invalid, textarea.invalid {
	border-color: #FF0000;
}

html.rtl  div.dialogue.bookingForm {
	text-align: right;
}



div.itemAfter.singleLine, div.itemAfter.singleLine p {
	display: inline;
}

div.item.required div.itemLabel p:first-child:before {
	content: "*";
	color: #FF0000;

}


div.kaptcha {
	width: 200px;
	border: none;
	padding: 10px;
	text-align: center;
}

div.kaptchaImage img {
	width: 150px;
	height: 50px;
}

input.kaptchaResponse {
	width: 150px;
}

div.periodButtons {
	padding: 10px;
}

button.showing {
	font-weight: bold;
}

div.grid {
	position: relative;
}

div.noFreeMessage.modal {
	position: absolute;
	top: 100px;
	left: 25%;
	width: 50%;
	background-color: #FFFFFF;
	color: black;
	border: 1px solid black;
	padding: 40px;
}

div.headerStart, div.headerEnd, div.mainStart, div.mainEnd, div.footerStart, div.footerEnd,
div.instructionsStart, div.instructionsEnd,
div.teamsStart, div.teamsEnd, div.teamStart, div.teamEnd,
div.servicesStart, div.servicesEnd, div.serviceGroupStart, div.serviceGroupEnd, div.serviceStart, div.serviceEnd {
	display: none;
}


/* region drop downs */

.timeZone select, select#duration.durationDropDown, select#units.unitsDropDown {
	-webkit-appearance: none;
	background: transparent;
	overflow: hidden;
	background: url(stripes/dropdown.png) no-repeat right;
	font-size:14px;
	padding: 10px 50px 10px 30px;
	align-items: center;
	border: none;
	white-space: pre;
	-webkit-rtl-ordering: logical;
	color: #FFFFFF;
	background-color: #158574;
	cursor: default;
	border-radius: 0;
	display:inline-block;
	vertical-align:middle; /* aligns text to left of selctes to vertical middle */
	margin: 0 1px 5px 0;


}
.timeZone select:hover, select#duration.durationDropDown:hover, select#units.unitsDropDown:hover {
	background: url(stripes/dropdown_h.png) no-repeat right;
	background-color: #000000;
	color:#FFFFFF;
}



/* jump to date button*/
div.timeZone {
margin: 15px 0;
clear:both;
display:inline-block;
padding: 0;
}

div.jumpDate {
margin: 15px 0;
}

div.ui-datepicker {
	background-colour: transparent;
}


.ui-datepicker-trigger {
    background-color: #158574;
	color:#FFFFFF;
	padding:10px;
    border:none;
	font-size:14px;
    cursor:pointer;
	margin: 0px;
}
/* jump to date button - hover */
.ui-datepicker-trigger:hover {
    background-color: #000000;
	color:#FFFFFF;
}





/* buttons */

div.dialogueRadioDiv {
	margin-bottom: 20px;
}

div.teamSelect, div.serviceSelect {
	margin: 30px 0 50px 0;
}

div.teamSelect.checkbox, div.serviceSelect.checkbox {
	-webkit-appearance: none;
}

div.teamSelect a, div.serviceSelect a{
	font-size:16px;
	text-align:center;
	padding: 10px 20px;
   	background-color: #158574;
	color:#FFFFFF;
    border:none;
    cursor:pointer;
}

div.teamSelect a:hover, div.serviceSelect a:hover {
    background-color: #000000;
	color:#FFFFFF;
}

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
	font-size:16px;
	text-align:center;
	padding: 10px 20px;
	background-color: #158574; /*fix*/
	color:#FFFFFF;
    border:none;
    cursor:pointer;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]::-webkit-file-upload-button:hover, button:hover {
    background-color: #000000; /*fix*/
	color:#FFFFFF;
}

/*FIX*/ /* this needs to be separate from the above, otherwise IE8 & 9 don't pick up the styles */
button {
	font-size:16px;
	text-align:center;
	padding: 10px 20px;
	background-color: #158574; /*fix*/
	color:#FFFFFF;
    border:none;
    cursor:pointer;
	margin: 5px; /*fix*/
}

button:hover {
    background-color: #000000; /*fix*/
	color:#FFFFFF;
}

button.ui-datepicker-trigger {
margin-bottom: 0px !important;
}


/* check boxes */
input[type=checkbox] {
	margin-bottom: -5px;
    -webkit-appearance:button;
    border: 3px #000000 solid;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;
    width:20px;
    height:20px;
}

input[type=checkbox]:checked {
	background:url(stripes/checkbox.png) center no-repeat;
}

/* radio buttons */
input[type=radio] {
	margin-bottom: -5px;
    border-radius:10px;
    -webkit-appearance:button;
    border: 3px #000000 solid;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;
    width: 21px;
    height: 21px;
}

input[type=radio]:checked {
   background:url(stripes/radiobox.png) center no-repeat;

}



.durationService {
}

div.teamPic img, div.servicePic img {
  	margin: auto;
	padding:0;
    display: block;
	border:#000000 solid 1px;
	background-color:#FFFFFF;
	max-width: 90%; /*fix*/
	max-height:400px;
}


div.teamPic img { /*fix*/
}

.teamDescription, .serviceDescription {
}

.serviceDuration {
}

div.serviceEnd {
	height: 5px;
	margin:auto;
	padding: 10px;
	background-color:#CC0000;
	width: 100%;
}



.logo {
	display: block;
	margin: 30px auto 20px auto;
	max-width: 80%;
}

.logo.largeImage {
	width: 400px;
}

.logo.portrait {
	width: auto;
	max-height: 400px;
}


a.pageButton {
}

hr {
	/*
	border-width: 40px 30px 0px 30px;
	border-image:url(stripes/hr_lg.png) 40 30 0 30 repeat stretch;
	*/ /*fix*/
	background: url(stripes/hr_sm.png) repeat-x center center;
	height: 40px;
	border: none;
	padding: 0;
	margin: 0;
}


.gridHeaderDayName {
}

.gridHeaderDate {
}

.teamName, .serviceName {
	color:#158574;
}

.serviceDuration {
	color:#158574;
	text-transform:uppercase;
}

/***************/
/* DATE PICKER */
/***************/

.ui-widget-header {
    background: #000 !important;
    border: none !important;
}

.ui-widget-content {
	color: #000 !important;
	background: #e4e3e3  !important;
}

.ui-datepicker td span, .ui-datepicker td a {
	border-radius:3px;
	text-align:center !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    border: none !important;
	color:#222 !important;
}

.ui-datepicker {
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	color: #fff !important;
	border: none !important;
	background: #158574 !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	border: none !important;
	background: #000 !important;
	color: #fff !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #000 !important;
    border: none !important;
    color: #fff !important;
}

.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}

.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e {
	background: url('/resources/jquery-ui-1.8.23/themes/ui-lightness/images/ui-icons_ffffff_256x240.png') !important;
	background-position: -48px -192px !important;
	cursor: pointer;
}

.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e:hover {
	background: url('/resources/jquery-ui-1.8.23/themes/ui-lightness/images/ui-icons_ffffff_256x240.png') !important;
	background-position: -48px -192px !important;
	cursor: pointer;
}

.ui-datepicker-next.ui-corner-all {
	width: 20px !important;
	height: 20px !important;
	top: 11px !important;
	right: 10px !important;
}

.ui-datepicker-next.ui-corner-all:hover {
	background: #158574 !important;
}

.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w {
	background: url('/resources/jquery-ui-1.8.23/themes/ui-lightness/images/ui-icons_ffffff_256x240.png') !important;
	background-position: -80px -192px !important;
	cursor: pointer;
}

.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w:hover {
	background: url('/resources/jquery-ui-1.8.23/themes/ui-lightness/images/ui-icons_ffffff_256x240.png') !important;
	background-position: -80px -192px !important;
	cursor: pointer;
}

.ui-datepicker-prev.ui-corner-all {
	width: 20px !important;
	height: 20px !important;
	top: 11px !important;
	left: 10px !important;
}

.ui-datepicker-prev.ui-corner-all:hover {
	background: #158574 !important;
}

.payment {
	background: url("stripes/headerbg.png") #E4E3E3;
	border:none;
	margin-left: 15px;
}

@media all and (max-width: 800px) {
	.payment {
		margin-left: 0px;
	}
}


@media all and (max-width: 600px) {
	.title { font-size: 24px !important; }
}

@media all and (max-width: 480px) {
	#gridPage { margin: 0px 15px; } /*fix*/
	input[type='checkbox'] { margin-bottom: 0; }
}