/* 
Styles in this file will be moved to forms.css later, 
these styles are pretty much the same as the ones in forms.css.
This css file is only used for testning purposes only and will be removed later on.

Yacine
2010-08-09 

*/

/* = FORM PAGE ELEMENTS UL LI
---------------------------------------------------*/
.form ul li {
	width: 368px;
	margin-top: 0;
	float: left;
	height: 65px;
	position: relative;
}

	.form .select-block li { width: 252px; }

.form ul li.odd, 
.form ul li.alignright { float: right; }

.form ul li.stretch { width: 100%; }

.form ul li.textarea-block {
	width: 100%;
	height: 200px;
}

.form ul li.button-block, 
.form ul li.checkbox-block, 
.form ul li.submit-block {
	width: 100%;
	height: 35px;
}

.form ul li.radio-block {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
.form.book-ils ul li.radio-block {
	width: 368px;
	height: 65px;
	margin-bottom: 0;
}

.form ul li ul.radio-group { margin-bottom: 20px; }

.form ul li ul.radio-group li {	height: auto; }

#intro-block {
	width: 600px;
	margin: 10px 0;
	color: #666;
}

#bookings  {
	padding: 15px 0 0;	
}

/* = FORM ELEMENTS
---------------------------------------------------*/

.form {	font: 13px arial; }

.form input.text, 
.form select, 
.form textarea, 
.form input[type=text] {
	background: #fbfbfb;
	border: solid 1px #CDCDCB;
	width: 356px;
	padding: 6px 5px;
	display: block;
	font-size: 13px;
}

.form select {
	width: 368px; 
	padding: 5px;
	color: #555;	
	clear: both;
}
	
	/* This width is also set in main.js to deal width IE fixed width issue.  */
	.form .select-block select {	width: 242px; }
	
	.form select.inline { float: left; }

.form .dob-group { float: left; clear: both;  }
.form .dob-group select {
	float: left;
	width: auto;
	margin-right: 10px;
	clear: none;
}

.form .zip-group.postal { float: left; width: 102px; margin: 0 0 1em 0; }
.form .zip-group.city { float: right; width: 246px; margin: 0 0 1em 0; }

.form input.text.small {  width: 90px;  }
.form input.text.small.clear { clear: both; }
.form input.text.mid { width: 234px; }

.form textarea {
	width: 744px;
	height: 135px;
}

.form .smallTextbox { width: 368px; }
.form .smallTextbox textarea { width: 356px; }

.form label {
	padding: 0 0 3px 0;
	color: #777;
	float: left;
	font-weight: bold;
}

	.form ul li.stretch label { width: 100%; }

	.form table label {
		font-weight: normal; 
		float: left;
		padding: 3px 0 5px 0;
	}
	
	.form label a { padding: 0 0 0 5px; }
	
	.form table input { float: left; margin-left: -20px; }

.form .checkbox-block input { float: left; }
.form .checkbox-block label { float: left; padding: 2px 0 0 2px; }

.form input.text:focus, 
.form select:focus, 
.form textarea:focus, 
.form input[type=text]:focus {
	border-color: #aaa;
}

	.form table { clear: both; }
	.form table td {
		width: 160px; 
		padding-left: 23px;
		vertical-align: top;
	}
	
	.form table.radio td {
		width: auto; 
		padding-right: 15px;
	} 
	
	.form .step1 table.radio td {
		width: 160px;
	}

.form input.text.disable, 
.form select.disable, 
.form textarea.disable, 
.form input[type=text].disable,
.form select[disabled],
.form input[disabled] {
	background: #dcdcdc;
}

/*-------- submit/button ---------*/

.onsubmit {
	display: none; 
	padding: 4px 0 0 10px;
}

.form .submit-block span, 
.form .button-block span {
	background: transparent url(/sitecore/__/_images/blue_button.gif) no-repeat 0 0;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	padding-left: 11px;
	font-size: 12px;
	margin-right: 15px;
}

.form .submit-block input, 
.form .button-block input,
.form .button-block span a {
	background: transparent url(/sitecore/__/_images/blue_button_checkarrow.gif) no-repeat 100% -26px;
	border: medium none;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	font-weight: bold;
	margin: 0;
	padding: 4px 38px 5px 0px;
	font-size: 12px;
}

.form .button-block input.button {
	background: transparent url(/sitecore/__/_images/blue_button.gif) no-repeat 100% -26px; 
	padding: 4px 31px 5px 20px;
}

a.btnBack {
	font-size: 12px;
	font-weight: bold;
	padding: 5px;
	float: left;
	color: #777;
}

/* = ERROR VALIDATION BLOCKS
---------------------------------------------------*/

.form input.text.invalid, 
.form select.invalid, 
.form textarea.invalid, 
.form input[type=text].invalid,
.form table.invalid {
	background-color: #FFF0F0;
	border: 1px solid #fed9d9;
}

.form #error-block {
	border: 1px solid #fed9d9;
	background-color: #FFF0F0;
	color: #555555;
	display: none;
	float: left;
	font-weight: bold;
	padding: 10px;
	width: 734px;
	text-align: center;
}

#bookings #error-block { float: none; }

.error-text { display: none; }

/* = FORM SELECTION BLOCK
---------------------------------------------------*/
#selection-block {
	height: 60px; 
	font-weight: bold; 
	color: #999;
}
#frm_contactus #selection-block
{
	height: 1px;
}

#selection-block li {
	padding: 12px 20px;
	background: url("/sitecore/__/_images/selection_block_new2.gif") no-repeat -250px 0;	
	width: 210px;
	float: left;
	height: 18px;
	line-height: 19px;
	text-align: left;	
}

	#selection-block li.first {
		padding: 12px 10px; 
		width: 230px; 
	}
	#selection-block li.first,
	#selection-block li.first.selected-prev { background-position: 0 -48px; }

	#selection-block li.selected {
		background-position: -250px -48px; 
		color: #fff;
	}

	#selection-block li.first.selected {
		background-position: 0 0;
		color: #fff;
	}
	
	#selection-block li.last { background-position: 100% 0; }
	#selection-block li.last.selected{background: #5F6973 url('/sitecore/__/_images/selection_block_new2.gif' ) no-repeat right -96px;}	

#selection-block.big li {
	width: 173px;
	background-position: -322px 0;
	padding: 12px 8px;
}

	#selection-block.big li.first.selected { background-position: -73px 0; }
	#selection-block.big li.first.selected-prev { background-position: -323px -96px; }
	#selection-block.big li.selected-prev { background-position: -73px -48px; }
	#selection-block.big li.selected { background-position: -73px 0; }
	#selection-block.big li.last-prev { background-position: -76px -48px; }	
	#selection-block.big li.last.selected { background-position: 100% -96px; }
	#selection-block.big li.last { background-position: 100% 0;	}

/* = FORM HELP TEXT
---------------------------------------------------*/

.form .help-block {
	display: none !important;
	position: relative;
	margin-left: 5px;
}

.form .help-icon {
	/*border: solid 1px red;*/
	background: url('/sitecore/__/_images/help_icon.gif') center center no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	cursor: pointer;
}

.form .help-text {
	position: absolute;
	left: -7px;
	bottom: 20px;
	width: 350px;
	padding-bottom: 5px;
	background: url('/sitecore/__/_images/help_bottom.gif') left bottom no-repeat;
	font-size: 12px;
	display: none;
	z-index: 9999;	
}

.form .help-text ul li {
	width: auto;
	margin-top: 0;
	float: none;
	height: auto;
	display: block;
	position: static;
}

.form .help-text div {
	border: solid 1px #DDD; /*#5F6973;*/
	border-bottom: none;
	padding: 10px;
	background: #E5EFEA;
	background: url('/sitecore/__/_images/help_bg.gif');
}

/* = FORM-TABLE
---------------------------------------------------*/
.form .form-table {
	background: #F7F7F7;
	margin-bottom: 10px;
	width: 100%;
	color: #777;
}

	.form .form-table th {
		padding: 10px;
		background: #E8F0F3;
		text-align: left;
		border: 2px solid #fff;
	}

	.form .form-table td {
		padding: 5px;
		border: solid 2px #FFF;
		vertical-align: middle;
		width: auto;
		color: #777;
	}
	
	.form .form-table td.value {
		text-align: right; 
		width: 13%;
	}
	
	.form .form-table td.checkboxCell {
		text-align: center; 
		width: 5%;
	}
		 
	.form .form-table td label {
		padding: 0px; 
		float: none;
	}

	.form .form-table tr.even td,
	.form .form-table tr.even { background: #F1F0EF; }

	.form .form-table tr.row-selected td,
	.form .form-table tr.row-selected {
		font-weight: bold ;
		background: #E0FFE0;
		color: #666;
	}
		
	.form .form-table input	{
		margin: 5px; 
		float: none; 
	}
	
.form legend,
.form .form-inblock legend {
	padding: 0 0 11px 0;
	color: #666;
	font-weight: bold;
	font-size: 14px;
}

#table-infomeetings { background: #F1F0EE; }

	#table-infomeetings .sortdate span { display: none; }

	#table-infomeetings tr.even { background-color: #F8F9F4; }

#tblPrices { font: 12px/1.5 arial; }

#table-infomeetings td, 
#tblPrices td {
	padding: 5px 10px; 
	width: auto; 
}

	#tblPrices td.button-block { padding: 7px 5px 5px 5px;  }

.form-table th.header span {
	background: url(      '/sitecore/__/_images/header.gif' ) no-repeat right 50%;
	padding-right: 10px;
}

#Table2 tfoot td,
.form-table tfoot td {
	font-weight: bold;
	background: #BFE6F4;
}

.form-table tfoot td span {
	font-weight: bold; 
	color: #000; 
}

.form-table table td {
	padding: 0;	
	border: none ;
}

/*------- loading ------*/

#ddl_loading { visibility: hidden; }
#tbl_loading,
#prices_load,
#table_loading {
	width: 100%;
	position: static;
	background-position: 50%;
}

.waiting {
	position: absolute;
	right: 14px;
	top: 0;
	background: url(/sitecore/__/_images/ajax-load-small.gif) no-repeat right top;
	width: 16px;
	height: 16px;
	display: none;
}

/* = Thankyou page
---------------------------------------------------*/
.div-block {
	border: solid 1px #CCC;
	background-color: #e8f0f3;
	padding: 10px;
	margin-bottom: 20px;
	clear: both;
	width: 728px;
	font: 12px/1.5 arial;
	color: #666;
}

.div-block ul, 
.div-block div {
	width: 350px;
	text-align: left;
}

.div-block ul li {
	width: 350px;
	height: auto;
	margin-top: 0;
	float: left;
	position: relative;
	display: block;
	padding: 0 0 5px;
}

.div-block ul li span {
	width: 170px;
	display: inline-block;
	float: left;
	font-weight: bold;
}

.div-block ul li span.highlight { font-weight: normal; }

/* = Page-block
---------------------------------------------------*/

#info-block  {
	background: none;
	border: none;
	border-top: 1px solid #ccc;
	width: 756px;
	padding: 20px 0;
}

#info-block.infomeeting {
	border-top: none; 
	border-bottom: 1px solid #ccc; 
	margin-bottom: 20px;
	padding: 0 0 15px;
}

#info-block .right-col {
	float: right;
	width: 370px;
}

#info-block .left-col {
	float: left;
	width: 370px;
	font-weight: bold;
}

#page-block {
	text-align: center;
	margin: 10px 0 20px 0;	
	font-size: 12px;
}

#page-block a {
	text-decoration: underline; 
	padding: 2px 5px;
	font-weight: bold;
	color: #888;	
}

#page-block a:hover,
#page-block a.selected { text-decoration: none; }

#page-block #prev, 
#page-block #next {	background: url(/sitecore/__/_images/page_block_images.gif) no-repeat; }

#page-block #prev {
	padding: 2px 12px 2px 23px; 
	background-position: 0 2px;
}

#page-block #next {
	padding: 2px 23px 2px 12px; 
	background-position: 100% -32px;
}