/* --------------------------------------------------------------------------------------------------
 * Styles for various table forms. Copyright (C) MobiHealth B.V. 2007-2012
 * --------------------------------------------------------------------------------------------------
 */
 
/* --------------------------------------------------------------------------------------------------
 * A table with rounded edges and a shadow under it, projected slightly towards the right/bottom edge. 
 * Images for this table are: fclean_*
 */
table.frame_clean_shadow {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	overflow: auto;
	height: 100%;
}

/* Inner table used for the top/bottom rows, so that the width of the rounded corner images
   doesn't create extra left/right margins */
table.frame_clean_shadow_helper {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
}

table.frame_clean_shadow,
table.frame_clean_shadow tr td.edge_left,
table.frame_clean_shadow tr td.edge_right,
table.frame_clean_shadow_helper,
table.frame_clean_shadow_helper tr td.edge_top_left,
table.frame_clean_shadow_helper tr td.edge_top,
table.frame_clean_shadow_helper tr td.edge_top_right,
table.frame_clean_shadow_helper tr td.edge_bottom_left,
table.frame_clean_shadow_helper tr td.edge_bottom,
table.frame_clean_shadow_helper tr td.edge_bottom_right {
	padding: 0px;
}

/* Top row specific */
table.frame_clean_shadow_helper tr td.edge_top {
	background: url(../img/fclean_edge_t.png) repeat-x;
	width: 99%;
}

/* Middle rows specific */
table.frame_clean_shadow tr td.edge_left {
	background: url(../img/fclean_edge_l.png) repeat-y;
	width: 11px;
}

table.frame_clean_shadow tr td.edge_middle {
	 background: #fff;
}

table.frame_clean_shadow tr td.edge_right {
	background: url(../img/fclean_edge_r.png) repeat-y;
	width: 16px;
}

/* Bottom row specific */
table.frame_clean_shadow_helper tr td.edge_bottom {
	background: url(../img/fclean_edge_b.png) repeat-x;
	width: 99%;
}

/* --------------------------------------------------------------------------------------------------
 * A wizard-like table for a process with a predefined list of steps. The steps are visualized in a 
 * column to the left, the step itself to the right, and to the bottom a "continue" button.
 * There are more than just <table> styles to achieve this.
 * Images are: wizard_*
 */

table.wizard {
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.wizard tr td.edge_top,
table.wizard tr td.edge_left,
table.wizard tr td.edge_right,
table.wizard tr td.edge_bottom {
	padding: 0px;
	vertical-align: top;
}

table.wizard tr td.edge_top {
	text-align: center;
	font-weight: bold;
	color: white;
	background: url(../img/wizard_edge_t.png) repeat-x;
}

table.wizard tr td.edge_left {
	background: url(../img/wizard_edge_l.png) repeat-y;
	vertical-align: middle;
	width: 1px;
}

table.wizard tr td.edge_right {
	background: url(../img/wizard_edge_r.png) repeat-y;
	vertical-align: middle;
	width: 1px;
}

table.wizard tr td.edge_bottom {
	background: url(../img/wizard_edge_b.png) repeat-x;
	height: 9px;
}

table.wizard tr td.steps_top {
	vertical-align: top;
	padding: 10px;
	width: 145px;
}

table.wizard tr td.steps_bottom {
	padding: 0px;
}

table.wizard ul.steps {
	list-style:none;
	padding: 0;
	margin: 0;
}

table.wizard li.step_greyed,
table.wizard li.step_active,
table.wizard li.step_enabled {
	color: #333333;
	font-family: Arial, Verdana, sans-serif;
	font-size: 10pt;
	margin-bottom: 15px;
	padding-left: 15px;	
	background-position: top left;
	background-repeat: no-repeat;
}

table.wizard li.step_greyed {
	background-image: url(../img/wizard_step_grey.png);
	color: #666666;
}

table.wizard li.step_active {
	background-image: url(../img/wizard_step_blue.png);
	font-weight: bold;
}

table.wizard li.step_enabled {
	background-image: url(../img/wizard_step_green.png);
	font-weight: bold;
}

table.wizard tr td.body, 
table.wizard tr td.buttons_top,
table.wizard tr td.buttons_bottom {
	border-left: 1px solid #00adef;
	padding: 10px;
}

table.wizard tr td.body {
	border-bottom: 1px solid #00adef;
}

table.wizard tr td.buttons_top {
	padding: 10px 10px 0px 10px;
}

table.wizard tr td.buttons_bottom {
	padding: 0px;
}

/* --------------------------------------------------------------------------------------------------
 * A simple table for showing lists of things (e.g. filter results) with a grey background header. 
 * Multiple header and body row types available.
 */

table.list1 {
	border-collapse: collapse;
	border: 1px solid #cccccc;
}

table.list1 tr td.header, table.list1 thead tr td {
	background-color: #f1f1f1;
	text-align: left;
	padding: 0 6px 0 6px;
}

table.list1 tr td.cheader {
	background-color: #f1f1f1;
	text-align: center;
	padding: 0 6px 0 6px;
}

table.list1 tr td.body {
	padding: 0 6px 0 6px;
}

table.list1 tr td.tbody {
	padding: 3px 6px 3px 6px;
}

/* --------------------------------------------------------------------------------------------------
 * A simple table for showing lists of images and text.
 */

table.imglist {
	border: none;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.imglist td {
	border-top: 1px solid #666666;
	padding-bottom: 8px;
	vertical-align: top;
}