@import url(//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700&subset=latin,latin-ext);
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=latin,latin-ext);
@import url(base-form.css);

body {
	background-color:#ffffff;
	margin:0;
	padding:0;
	text-align:left;
	font-family:'Titillium Web', sans-serif;
	font-weight:400;
	color: #6e6e6e;
}

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

a:hover, a:active {
text-decoration: underline;
color:#81ad32;
}

p, ol, ul{
	font-size: 120%;
	margin:0;
}

h1 {
	font-family: 'Roboto Slab', serif;
	font-size: 200%;
	font-weight:400;
}

h2, h3, h4 {
	font-family: 'Roboto Slab', serif;
	font-size: 150%;
	font-weight:400;
}

ol,ul{

}

#spinner {
	padding: 30px; /*fix*/
	text-align: center; /*fix*/
}

button {
background-color: #608124;
color: #ffffff;
text-transform: uppercase;
font-size: 120%;
border: none;
padding: 10px 30px;
margin: 10px 20px 0 20px;
}

button:hover {
background-color:#81ad32;
	color:#ffffff;
	text-decoration:none;
}

/* Password protected */
div.dialogue.password {
	text-align: center;
	padding-top: 20px;
}

div.dialogue.password p {
	margin-bottom: 15px;
}

input#password {
	border: 2px solid #ccc;
	font-size: 20px;
	padding: 12px;
}

.header{
	padding: 20px 0px 10px 0px;
	margin:0;
	background-color: #ffffff;
	text-align: center;
}


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

.title{
	max-width: 980px;
	margin: 20px auto;
}

.headerText, .footerText {
	max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.main{
	background:url(city/satinweave.png);
	-webkit-box-shadow: inset 0 0 8px rgba(68,68,68,0.3);
	   -moz-box-shadow: inset 0 0 8px rgba(68,68,68,0.3);
	        box-shadow: inset 0 0 8px rgba(68,68,68,0.3);
	padding: 20px;
}

.instructions {
	border-bottom: 1px solid #cccccc;
	padding: 40px 10% 20px 10%; /*fix*/
	max-width: 980px;
	margin: 0px auto;
}

.instructions p, ol, ul{
	color: #252525;
	font-size: 120%;
	margin:0;
	padding-bottom:20px;
}

.instructions ul{
padding-left: 20px;
}


/*SERVICES/TEAM PAGE*/


.services{
	display:block;
	max-width: 980px;
	margin: 0px auto;
}

div.service{
	margin:0;
	padding: 40px 10%;
	border-bottom:1px solid #cccccc;
	overflow: auto;
}

.service:last-child {
	border-bottom:none;
}


.serviceName a, .teamName a{
	font-size: 120%;
	text-shadow:1px 1px 0 rgba(255,255,255,0.5);
}


.servicePic {
float: left;
margin-right: 40px;
max-width: 30%;
}


.serviceGroup h1 {
padding: 0 10%;
}


h2.serviceName{
	margin: 0 0 5px 0;
}

.serviceDescription{
	margin-bottom:5px;
}

.serviceDescription p {
	margin: 0 0 15px 0;
}

.serviceDuration, .servicePrice{
	font-size:150%;
	display: inline;
	float:left;
}


.serviceDuration:after{
content: '•';
padding: 0 10px;
color:#cccccc;
}


.serviceSelect{
	max-width:150px;
	margin:20px 0 20px;
	float:left;
	clear:both;
}

.serviceSelect a{
	background-color:#608124;
	padding:8px 20px;
	color: #ffffff;
	text-transform:uppercase;
	font-size: 120%;
	padding: 5px 15px;
	margin-left: 10px;

}


.serviceSelect a:hover{
	background-color:#81ad32;
	color:#ffffff;
	text-decoration:none;

}


.serviceSubmit {
text-align: center;
}

input[type="submit"] {
background-color: #608124;
color: #ffffff;
text-transform: uppercase;
font-size: 120%;
border: none;
padding: 15px 30px;
margin: 0px 20px 0px 0px;
}

input[type="submit"]:hover {
background-color:#81ad32;
	color:#ffffff;
	text-decoration:none;
}


/*TEAM PAGE*/


.teams {
	max-width: 980px;
	margin: 0px auto;
}


div.team {
margin: 20px 2%;
padding: 40px 3%;
border: 1px solid #cccccc;
text-align: center;
float: left;
display: inline-block;
}


.teamPic{
	margin-bottom:20px;
}

.teamPic img {
	margin-left: auto;
	margin-right: auto;
}

h2.serviceName, h2.teamName{
	margin: 0 0 5px 0;
}


.teamSelect{
	max-width:150px;
	margin:20px auto 20px;
}

.teamSelect a{
	text-align:center;
	background-color:#608124;
	padding:8px 20px;
	color: #ffffff;
	text-transform:uppercase;
	font-size: 120%;
	padding: 5px 15px;
}

.teamSelect a:hover{
	background-color:#81ad32;
	color:#ffffff;
	text-decoration:none;

}


.teamDescription {
color: #6e6e6e;
font-size: 120%;
margin: 0;
}

.teamDescription p {
	margin: 0 0 15px 0;
}


div.teamsEnd {
display: block; /*fix*/
clear: both; /*fix*/
}




/*GRID PAGE*/

div.grid {
	text-align: center;
	display: block;
}

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

div.gridPage{
	padding: 40px 0;
	max-width: 980px;
	margin: 0px auto;
}

div.gridHeader, div.gridSlot {
text-align: center; /*fix*/
}


h4{
	font-size:120%;
	line-height:1.2;
	padding-bottom:10px;
}

div.gridHeader h4 {
	color: inherit;
	white-space: normal;
	font-size: 100%;
}

div.gridFree{
	font-size:120%;
	background-color:#608124;
}

div.gridFree a{
	color:#ffffff;
}

div.gridHighlight {
	font-size:120%;
	background-color: #81ad32;
}

div.gridHighlight a{
	color:#ffffff;
	text-decoration:none;
}

div.gridHighlight a:hover{
	text-decoration:none;
}

div.gridBusy, div.gridTechnicallyFree {
	font-size:120%;
	color: #aaaaaa;
	text-decoration: line-through;
}

div.periodButtons {
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

.paging.pagingBefore.pagingPrevious, .paging.pagingAfter.pagingNext {
	text-align: center; /*fix*/
}

	/* JQUERY DATEPICKER */

	/* Wrapper */
	.ui-datepicker { }

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

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

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

	/* Background of numbers */
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		border: 1px solid #608124 !important;
		background: #fff !important;
		color: #608124!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 #608124 !important;
		background: #608124 !important;
		color: #fff !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: #608124 !important;
		border: 1px solid #608124 !important;
		color: #fff !important;
	}

	/* Previous arrow - background */
	.ui-datepicker-prev.ui-corner-all {
		width: 20px !important;
		height: 20px !important;
		top: 10px !important;
		left: 10px !important;
	}
	.ui-datepicker-prev.ui-corner-all:hover {
		border: none !important;
		background: #608124 !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: 10px !important;
		right: 10px !important;
	}
	.ui-datepicker-next.ui-corner-all:hover {
		border: none !important;
		background: #608124 !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*/

.bookingForm{
	padding: 0;
}

div.item{
	border-bottom:solid 1px #cccccc;
}

div.item div {
    margin: 20px 0;
}

div.itemLabel p {
font-size: 140%;
padding: 0;
}

div.dialogue p{
	font-size: 100%;
	color:#252525;
}

div.serviceDescriptionOnForm p{
	font-size:100%;
}

div.itemContent{
	margin:0;
	font-size:120%;
	color:#252525;
}

.itemLabel p{
	color:#252525;
	text-transform:uppercase;
	font-size:120%;
	font-weight:700;
	padding-bottom:10px;

}

input.dialogueText {
width: 400px;
max-width: 90%;
line-height: 1.5;
font-size: 100%;
}

div.dialogueRadioDiv {
	line-height: 1.5;
	font-size: 100%;
}

div.itemContent {
font-size: 120%;
color: #252525;
}

div.itemAfter.singleLine, div.itemAfter.singleLine p {
display: inline;
font-size: 100%;
}

div.kaptcha { width: 240px; } /*fix*/
div.kaptcha  input { max-width: 80%; } /*fix*/

.item .itemLabel p, .item .itemContent p {
	margin: 0;
}

.serviceDescriptionOnForm p {
	margin: 15px 0;
}


/*thanks*/
div.dialogue.afterwards { padding: 30px 0; } /*fix*/

#window-resizer-tooltip{
	display:none;
}

/* footer */
div.footer { text-align: center; padding: 40px 0 20px 0; } /*fix*/
div.poweredBy { text-align: center; margin-bottom: 40px;  } /*fix*/


.payment {
    width:100%;
    max-width: 400px;
	left:25%;
	margin-top: 40px;
	margin-left: 10px;
}

.payment div.item {
    border:none;
}


/*------------------FOR LARGE VIEWPORT ONLY-------------------*/

@media (min-width: 901px) {


	div.team, div.team.teamsAnyLink {
		width: 45%;
		min-height: 250px;
		margin: 20px 2%;
	}


	.teams .team:nth-of-type(2n+4) {
		clear: left;
	}


}


/*------------------FOR MEDIUM AND SMALLER VIEWPORT ONLY-------------------*/
@media (max-width: 1020px) {

	.header, footer {
		padding: 20px;
		width: auto;
	}
}


@media (max-width: 900px) {


	div.team {
		margin: 20px auto;
		clear: both;
		float: none;
		display: block;
		width: 60%;
	}


}

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

@media (max-width: 720px) {
	input[type="submit"] {
		max-width: 80%; /*fix*/
		clear: both; /*fix*/
		margin: 30px auto; /*fix*/
		display: block; /*fix*/
		float: none; /*fix*/
		font-size: 100%;
		word-wrap: break-word;
	}

	div.team {
		width: auto;
		margin: 20px 30px;
	}
}

@media (max-width: 480px) {
	.title { font-size: 200%; word-wrap: break-word; margin: 0 auto; } /*fix*/
	input[type="submit"] {
		width: 80%;
		font-size: 18px;
		text-align: center;
		padding: 5%;
	}
}

@media (max-width: 425px) {
	.servicePic { float: none; display: block; margin: 10px auto; max-width:80%;}
}