/* Define Standard font content */
body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
}


/* Header resizing */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }


div.clear_anchor {
	font-size: 0;
	clear: both;
}


/**
 * This class allows you to block out a page element as 
 * with rounded edges and a gray-white background.
 */
.page_panel {  
	-moz-border-radius: 8px; -webkit-border-radius: 8px;
	-moz-box-shadow: 3px 1px 8px #777777; box-shadow: 3px 1px 8px #777777;
	margin: 5px 10px 10px 5px;
	padding: 10px;
	background-color: #EEEEEE;
	border: 1px solid gray;
}

	.page_panel p.instructions, .page_panel p.header, .page_panel p.footer {
		padding: 5px 10px;
		background-color: #DDDDDD;
		color: #555555;
		line-height: 1.2;
		font-size: 0.8em;
		text-align: justify;
	}

	.page_panel p.header, .page_panel p.footer {
		background-color: transparent;
		padding: 5px 0px;
	}

	.page_panel legend {
		margin-bottom: 5px;
		text-align: left;
		font-size: 1.25em;
		font-weight: bold;
	}

ul.page_panel_tab {
	position: relative;		/* Combined with the negative bottom position, this makes the tabs ride slightly over the content pane below */
	left: 0px;
	bottom: -1px;	 				/* Should match the content pane's border thickness (see below) */
	padding-top: 12px;
	margin-left: 1.25em;
	font-size: 0.85em;
	zoom: 1;
}

ul.page_panel_tab li.page_panel_tab {	/* NOT-SELECTED main menu tabs */
	display: -moz-inline-box; display: inline-block;  zoom: 1; *display: inline; /* Cross-browser inline-block support */
	margin-right: 0.3em !important;						/* Provide a space to the right of each tab. */
	margin-top: 0.7em;							/* Leave a space for selected tabs to 'pop' into - Note that if you change the top-margin, 
																		you need to recalc the selected li's anchor's bottom-padding below */
	vertical-align: bottom;					/* Force the tabs to the bottom of their UL */
	background: #DDDDDD; 							/*  Main menu-tab not-selected item color */
	border: 1px solid #777777;					/* Borders of the tabs */
	border-bottom: 1px solid black !important;	/*  This should match the border of div#content_pane below, to blend the bottom of the tab into the panel */
	white-space: nowrap;					/* Do not allow wrapping of tab text */
		
	/* Rounding effects for the tabs */
	-moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;
}
	
	
	ul.page_panel_tab li.page_panel_tab a {
		text-decoration: none;
		color: black;
		display: block;				/* Make the anchors take up space, to 'push' the link out to fill the tab */
		padding: 0.15em 1em;	/* Pad out the anchor so it stretches out it's parent LI: this is where the size of the tab comes from 
														 Note that if you change this value, you need to recalc the selected anchor's bottom-padding below */
	}

	ul.page_panel_tab li.page_panel_tab a:hover {
		color: #555555;
	}

	ul.page_panel_tab li.page_panel_tab.ui-tabs-selected {	/* 'active' tabs- there should really only be one */
		border-color: black;												/*  Make the border stand out more */
		font-weight: bold;
		background-color: #EEEEEE;										/* The color of active tabs, should match the content_pane background color below */
		text-decoration: underline;
		margin-top: 0px;														/* Pop this tab up to the top of the UL, to make it look 'active' */
		border-bottom: 1px solid #EEEEEE !important;	/* Make the bottom border merge with the content pane */
	}

		ul.page_panel_tab li.page_panel_tab.ui-tabs-selected a {
			padding-bottom: 0.85em;					/* Pad out the bottom of the tab to make it taller. 
			  																In order to keep the tabs aligned, this should be 
			   																 the not-selected bottom-padding of the 'div#bars ul li a' (see above), 
			  																 plus the 'div#bars ul li' top-margin (see above) */
		}




/* Deleted Content */
.deleted_content {	
	font-style: italic;
	color: #999999;
}


/* Hidden Content */
.hidden {	
	display: none !important;
}


/* JQuery UI Tabs - minimum required css */
.ui-tabs .ui-tabs-hide {
	display: none;
}


/* right-click menu items */
ul.contextMenu {
	width: auto;
	-moz-box-shadow: 3px 1px 8px #777777; box-shadow: 3px 1px 8px #777777;
	font-size: small;
	padding: 5px;
	background-color: white;
}

	/* This probably doesn't belong here, but its the only spot it fits for now */
	ul.contextMenu li.list_element_delete, ul.contextMenu li.record_action_delete, ul.contextMenu li.record_action_Delete {
		background: url("../images/button_cancel.png") 3px center no-repeat;
	}



/* === Field Types === */

/* Make all selects a little wider than usual, to prevent cutting off options with the select's flair */
option {		
	padding-right: 0.5em;
}

/* Field List labels should be inline and constant width */
li label.field_list_label {
 display: -moz-inline-box; display: inline-block;  zoom: 1; *display: inline; /* Cross-browser inline-block support */ 
 width: 10em;
 vertical-align: top;
 line-height: 1.0;
}

/* Field list labels for checkboxes, however, should be organized differently */
li label.field_list_label.checkbox {
	font-size: smaller;
	width: auto;
	margin-left: 0.25em;
	margin-right: 1em;
}

/**
 * readonly checkbox standins
 * thanks to David Vignoli - http://www.iconfinder.net/icondetails/1711/48/?q=package:nuvola2%20check
 * LGPL'ed
 */
span.readonly_checkbox_checked, span.readonly_checkbox_not_checked {
	vertical-align: middle;
	display: -moz-inline-box; display: inline-block;  zoom: 1; *display: inline; /* Cross-browser inline-block support */
	width: 22px;
	height: 22px;
	font-size: 0px;
	margin-left: 2em !important;
	text-align: right;
}

span.readonly_checkbox_checked {
	background: url("../images/camera_test.png") no-repeat;
	background-position: 100% 50%;
}

span.readonly_checkbox_not_checked {
	background: url("../images/button_cancel.png") no-repeat;
	background-position: 100% 50%;
}


/* Multiselect and radioselect */
div.multiselect_wrapper {
	display: -moz-inline-box; display: inline-block;  zoom: 1; *display: inline; /* Cross-browser inline-block support */
	padding: 10px;
	height: 10em;
	overflow-y: auto;
	border: 1px dashed gray;
	background-color: white;
	line-height: 1.5;
}

	div.multiselect_wrapper label, div.multiselect_wrapper input {
		vertical-align: center;
		margin: 0px;
	}

	div.multiselect_wrapper label {
		font-weight: normal;
		font-size: small;		
	}


div.notice {
	background-color: #FFFF99;
	border: 2px solid yellow;
	margin: 1em;
	padding: 0.5em;
	width: 30em;
}