/*If @charset "utf-8";*/
/* CSS Document */
@charset "utf-8";

body {
	
	font-family: 	"Roboto";
	font-size: 		14px;
	color:			#676767;
	line-height: 	125%;
	
	max-width:		100%;
	border:			2px solid;
  	border-color: 	#9cb2af;
	border-radius: 	5px;
	padding:		0px 2%;	
}

/* These headings are for OUTSIDE the forms (currently unused)*/
h1 {
	font-size:		130%;
	line-height: 	150%;
	margin:			5px 0px 5px 5px;
}
h4, h3, h2 {
	font-size:		110%;
	font-weight:	normal;
	font-stretch:	semi-expanded;
	line-height: 	150%;
}
/* ----------------------------------------------------------*/

form > div {
  clear: 			both;
  overflow: 		hidden;
  padding: 			0px;
  margin: 			0px 0px 1px 0px;
}

form > h1 {
	font-size:		110%;
	line-height: 	125%;
	padding:		12px 0px 6px 0px;
	margin: 		0px;
	color:			#9cb2af;
}
form > h2 {
	font-size:		105%;
	line-height: 	125%;
	margin:			0px;
	color:			#000000;
	padding:		10px 0px 20px 0px;
}
form > h3 {
	font-size:		100%;
	line-height: 	125%;
	margin:			6px 0px;
	color: 			#9cb2af;
}
form > p {
	padding:		5px 0px 5px 0px;
	margin:			0px 0px 5px 0px;
	color: 			#222;
}

label {
	width: 			35%;
	float: 			left;
	padding:		5px 0px 0px 0px;
	margin:			0px 0px 0px 0px;
	color: 			#595959;
}

img {
	margin:			8px 3px 0px 0px;
}

input.submitbutton {
	background-color: #9cb2af;
	color:			#000000;
	
	width: 			90%;
	border-top: 	2px solid #ccc;
	border-left: 	2px solid #ccc;
	border-right: 	2px solid #eee;
	border-bottom: 	2px solid #eee;
	border-radius: 	3px;
	font-weight: 	bold;
	
	padding:		6px 2px;
	margin-top:		10px;
}
input.submitbutton:hover {
	background-color: #9cb2af;
}

form > div > div {
  width: 			80%;
  float: 			right;
  padding-top:		5px;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select
 {
	background-color: #f6f6f6; 
	width: 			95%;
	border-top: 	2px solid #ccc;
	border-left: 	2px solid #ccc;
	border-right: 	2px solid #eee;
	border-bottom: 	2px solid #eee;
	border:			1px solid #ddd;
	border-radius: 	3px;
	padding:		2px 0px 2px 2px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  outline: 0;
  border:			1px solid;
  border-color: 	#9cb2af;
}

/* Mandatory star */
.redstar {
	color:			#C09;
	font-size:		16px;
}
/*	.............................................................. */
/*							Special cases						   */
/* ..............................................................  */
/* 	For number of persons boxes */
input.smallnumber { 
	width:			22px; 
	float: 			left;
	padding:		2px 0px 0px 2px;
	margin-right: 	66%;
	margin-bottom:	2px;
} 
input.smallnumber:focus {
	border-color: 	#9cb2af;
}

.errormessage {
	color:			#DD0000;
	font-size:		16px;
	line-height: 	150%;
}
/* Mini drop downs */
select.smallnumberselect, 
select.clock, 
select.guesttitle { 
	width:			50px; 
	margin:			0px 2px 2px 0px;
}

/* Confirmation Checkboxes */
input.confirmbox  {
	width:			15px;
	padding:		2px 0px 2px 2px;	
}

/* Date picker */
input.inputdatepicker
{
	padding:		2px 0px 2px 2px;
	margin: 		4px 0px 1px 0px;
	width:			110px;
}

/*tabular presentations */
th
{
	font-weight:	bold;
	padding-top:	10px;
	font-size:		13px;
	text-align:		left;
}

td
{
	padding-right: 	5px;
	padding-left:	0px;
	font-size:		13px;
}

/* Summary info at top of booking forms */
#dbinfoL {
	width: 			35%;	
	margin: 		1px 5px 1px 0px;
	float: 			left;
}

/* ============================================================================= */
/*									Phones 										 */
/* ============================================================================= */
@media (max-width: 400px) {  
h1, h2 {
	font-size:		60%;
	line-height: 	125%;
}
  form > div > label {
	width: 			90%;
    float: 			none;
    margin: 		0 0 5px 0;
  }
  
  form > div > div {
    width: 			100%;
    float: 			none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=submit],
  textarea,
  select {
    width: 			98%;
	padding:		2px 0px 2px 2px;
	margin-top:		6px; 
  }
  

/*	.............................................................. */
/*							Special cases						   */
/* ..............................................................  */

  /* For very short answer boxes */ 
  label.nowrap {
	width: 			45%;
	float: 			left;
  }
  
  /* partysize */
  input.smallnumber { 
    width:			35px; 
	margin-right: 	6%;
  } 
  
  /* Hours and Mins */
  select.smallnumberselect { 
    width:			45px; 
    margin-left: 	10px;
  } 
  
  /* Date picker */
  input.inputdatepicker
  {
	width:			110px;
  }

}





/* And for VERY WIDE forms */
@media (min-width: 1200px) {
form label {
  	text-align: 	right;
}

}