@import url(base-form.css);

body {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 145%;
	color: #222;
	background: #fff;
}

a, a:link, a:active, a:visited {
	color: #607b84;
}

a:hover {
	color: #567b87;
	text-decoration: underline;
}

#password {
	border: 1px solid #ccc;
	padding: 5px;
}

button {
	display: inline-block;
	background: #eaeef0;
	border: 1px solid #cad5d8;
	color: #444;
	padding: 5px 10px;
	margin: 5px auto;
	text-decoration: none;
	border-radius: 2px;
}

button:hover {
	border: 1px solid #607b84;
}

hr {
	background: #dcdcdc;
	border: none;
	height: 1px;
}

div.content {
	padding: 20px;
	max-width: 960px;
	margin: 20px auto;
	text-align: left;
}

h1.title, h1 {
	font-weight: normal;
	color: #607b84;
	text-align: center;f
	font-size: 26px;
	line-height: 30px;
}

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

.logo.largeImage {
	width: 400px;
}

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


div.header {
	text-align: center;
}

div.instructions {
	text-align: center;
	margin-bottom: 50px;
}

div.footer, div.poweredBy {
	text-align: center;
}

/************/
/* Services */
/************/

h2.serviceName {
	font-weight: normal;
	float: left;
	width: 80%;
	margin-top: 0;
	padding-top: 0;
}

div.servicePic {
	float: left;
	width: 15%;
	margin-right: 4%;
}

div.servicePic img {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom:20px;
}

div.serviceDescription, div.serviceDuration, div.servicePrice, div.serviceSelect {
	float: right;
	width: 80%;
}

.service.noImage h2.serviceName, .service.noImage div.serviceDescription, .service.noImage div.serviceDuration, .service.noImage div.servicePrice, .service.noImage div.serviceSelect {
	float: none;
	width: 100%;
	margin: 0px auto;
}

div.serviceSelect a, div.serviceSelect a:visited {
	display: inline-block;
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	color: #444;
	padding: 5px 10px;
	margin-top: 10px;
	text-decoration: none;
	border-radius: 2px;
}

div.serviceSelect a:hover {
	border: 1px solid #bababa;
}

div.serviceEnd {
	clear: both;
	display: block;
	height: 40px;
}

@media all and (max-width: 650px) {
	div.servicePic {
		width: 25%;
	}

	div.serviceDescription, div.serviceDuration, div.servicePrice, div.serviceSelect, h2.serviceName {
		width: 70%;
	}
}

@media all and (max-width: 400px) {
	div.servicePic {
		float: none;
		width: 50%;
		display: block;
		margin: 0px auto;
	}

	div.serviceDescription, div.serviceDuration, div.servicePrice, div.serviceSelect, h2.serviceName {
		float: none;
		width: auto;
		text-align: center;
	}
}

/*********/
/* Teams */
/*********/

h2.teamName {
	font-weight: normal;
	float: left;
	width: 80%;
	margin-top: 0;
	padding-top: 0;
}

div.teamPic {
	float: left;
	width: 15%;
	margin-right: 4%;
}

div.teamPic img {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom:20px;
}

div.teamDescription, div.teamDuration, div.teamPrice, div.teamSelect {
	float: left;
	width: 80%;
}

.team.noImage h2.teamName, .team.noImage div.teamDescription, .team.noImage div.teamDuration, .team.noImage div.teamPrice, .team.noImage div.teamSelect {
	float: none;
	width: 100%;
	margin: 0px auto;
}

div.teamSelect a, div.teamSelect a:visited {
	display: inline-block;
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	color: #444;
	padding: 5px 10px;
	margin-top: 10px;
	text-decoration: none;
	border-radius: 2px;
}

div.teamSelect a:hover {
	border: 1px solid #bababa;
}

div.teamEnd {
	clear: both;
	display: block;
	height: 40px;
}

@media all and (max-width: 650px) {
	div.teamPic {
		width: 25%;
	}

	div.teamDescription, div.teamDuration, div.teamPrice, div.teamSelect, h2.teamName {
		width: 70%;
	}
}

@media all and (max-width: 400px) {
	div.teamPic {
		float: none;
		width: 50%;
		display: block;
		margin: 0px auto;
	}

	div.teamDescription, div.teamDuration, div.teamPrice, div.teamSelect, h2.teamName {
		float: none;
		width: auto;
		text-align: center;
	}
}


/********/
/* Grid */
/********/

#spinner { text-align: center; }

div.periodButtons {
	text-align: center;
}

div.gridDay.wideCol, div.gridDay.mediumCol, div.gridDay.narrowCol {
	margin: 0px;
}

div.gridHeader, div.gridSlot {
	border: 1px solid #DDDDDD;
	margin: 0px;
}

div.gridHeader {
	background: #607b84;
	text-align: center;
	color: #fff;
	padding: 5px 0;
}

div.gridSlot {
	text-align: center;
}

div.gridSlot a {
	text-decoration: none;
}

div.gridFree {
	background-color:#eaeef0;
	cursor: pointer;
}

div.showTechnicallyFree div.gridTechnicallyFree {
	background-color:#eaeef0;
}


div.gridFree:hover {
	cursor: pointer;
}

div.gridFree a {
	color: #444;
	text-decoration: none;
}

div.gridHighlight {
	background: #cad5d8;
	cursor: pointer;
}

div.gridHighlight a, div.gridHighlight a:hover {
	text-decoration: none;
	color: #000;
	cursor: pointer;
}

div.paging {
	text-align: center;
}

div.paging a {
	display: inline-block;
	background: #f5f5f5;
	border: 1px solid #dcdcdc;
	color: #444;
	padding: 5px 10px;
	margin: 5px auto;
	text-decoration: none;
	border-radius: 2px;
}

div.paging a:hover {
	border: 1px solid #bababa;
}

div.paging.pagingNext.wideCol h4 a, html.rtl div.paging.pagingPrevious.wideCol h4 a {
	width:30px;
	background-color: #ffffff;
	background-image: url('box/pageLeftRight.png');
	background-position: right;
	background-repeat: no-repeat;
	border: none;
}

div.paging.pagingPrevious.wideCol h4 a, html.rtl div.paging.pagingNext.wideCol  h4 a  {
	width: 30px;
	background-color: #ffffff;
	background-image: url('box/pageLeftRight.png');
	background-position: left;
	background-repeat: no-repeat;
	border: none;
}

div.paging.mediumCol.pagingNext h4 a, html.rtl div.paging.mediumCol.pagingPrevious h4 a {
	width: 24px;
	background-color: #ffffff;
	background-image: url('box/pageLeftRightSmall.png');
	background-position: right;
	background-repeat: no-repeat;
	border: none;
}

div.paging.mediumCol.pagingPrevious h4 a, html.rtl div.paging.mediumCol.pagingNext h4 a {
	width: 24px;
	background-color: #ffffff;
	background-image: url('box/pageLeftRightSmall.png');
	background-position: left;
	background-repeat: no-repeat;
	border: none;
}

div.timeZone, div.jumpDate {
	margin: 30px;
	text-align: center;
}

	/* JQUERY DATEPICKER */

	/* Wrapper */
	.ui-datepicker {
		border: 1px solid #607b84 !important;
		background: #eaeef0 !important;
	}

	/* Inside the wrapper - main background for the entire calendar */
	.ui-widget-content {
		background: #eaeef0 !important;
	}

	/* Header bar (where the month/year is displayed */
	.ui-widget-header {
		background: #607b84 !important;
		border: 1px solid #607b84 !important;
	}

	/* Days of the week */
	.ui-datepicker-calendar {
		color: #607b84 !important;
	}

	/* Background of numbers */
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		border: 1px solid #607b84 !important;
		background: #fff !important;
		color: #607b84!important;
		border-radius: 3px !important;
		text-align:center !important;
	}

	/* Background of numbers when you hover */
	.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: 1px solid #607b84 !important;
		background: #607b84 !important;
		color: #ffffff !important;
		border-radius: 3px !important;
		text-align:center !important;
	}

	/* Today's date */
	.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
		background: #607b84 !important;
		border: 1px solid #607b84 !important;
		color: #fff !important;
	}

	/* Previous arrow - background */
	.ui-datepicker-prev.ui-corner-all {
		width: 20px !important;
		height: 20px !important;
		top: 8px !important;
		left: 10px !important;
	}
	.ui-datepicker-prev.ui-corner-all:hover {
		background: none !important;
		border: none !important;
	}

	/* Previous arrow icon */
	.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w, .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;
	}

	/* Next arrow - background */
	.ui-datepicker-next.ui-corner-all {
		width: 20px !important;
		height: 20px !important;
		top: 8px !important;
		right: 10px !important;
	}
	.ui-datepicker-next.ui-corner-all:hover {
		background: none !important;
		border: none !important;
	}

	/* Next arrow icon */
	.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e, .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;
	}



/***************/
/* Booking form*/
/***************/

div.itemLabel {
	color: #607b84;
}

input[type='submit'] {
	display: inline-block;
	background: #eaeef0;
	border: 1px solid #cad5d8;
	color: #444;
	padding: 5px 10px;
	margin: 5px auto;
	text-decoration: none;
	border-radius: 2px;
	font-size: 15px;
}

input[type='submit']:hover {
	border: 1px solid #607b84;
}

#submitButton {
	background: #607b84;
	color: #fff;
	border: 1px solid #607b84;
}

#submitButton:hover {
	border: 1px solid #6c8993;
}

div.kaptcha { max-width: 100%; }
div.kaptcha input#kaptcha { max-width: 100%; }

.payment {
    margin-left:15px;
}

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