/* form.css */

body, html
{
	width: 100%;
	height: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

#formContainer
{
	width: 510px;
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 70%;
	margin-left: auto;
	margin-right: auto;
	background: #fff url("../images/background.png") no-repeat;
	border: 1px solid #778;
}
	#formContainer *
	{
		margin: 0;
		padding: 0;
	}
	#formContainer p
	{
		margin: 7px 0 7px 10px;
	}
	#formContainer ul, #formContainer ol
	{
		padding: 7px 0 7px 30px;
	}
	#formContainer h4
	{
		font-size: 150%;
		margin-bottom: 10px;
	}
	#formContainer blockquote
	{
		margin: 5px 5px 5px 20px;
		padding-left: 5px;
		border-left: 5px solid #ccc;
		
	}
	#formContainer input, #formContainer textarea, #formContainer select, #formContainer button
	{
		font-family: Verdana, Tahoma, sans-serif;
		font-size: 100%;
		padding: 2px;
	}
	#formContainer input.inputText, #formContainer textarea, #formContainer select
	{
		border: 1px solid #ddd;
		background-color: #eee;
	}
	#formContainer form
	{
		font-size: 100%;
	}
		#formContainer form fieldset
		{
			border: none;
			border-bottom: 5px solid #ccc;
		}
			#formContainer form fieldset label
			{
				display: block;
				float: left;
				width: 27%;
				text-align: right;
				padding-top: 3px;
				padding-right: 5px;
				font-weight: bold;
			}
			#formContainer form fieldset legend
			{
				font-size: 120%;
				font-weight: bold;
			}
			#formContainer form fieldset .inputText
			{
				width: 70%;
			}
			#formContainer form fieldset div.optional, #formContainer form fieldset div.required
			{
				width: 100%;
				padding: 5px 0 5px 0;
			}
				#formContainer form fieldset div.required label
				{
					color: red;
				}
				#formContainer form fieldset div.optional fieldset, #formContainer form fieldset div.required fieldset
				{
					border: 1px solid #ccc;
					padding: 5px 0px 5px 0px;
					margin: 0px 0px 0px 28%;
					width: 70%;
				}
				
					#formContainer form fieldset div.optional fieldset label, #formContainer form fieldset div.required fieldset label
					{
						float: none;
						width: auto;
						text-align: left;
						padding-top: 0;
						font-weight: normal;
						color: black;
					}	
					#formContainer form fieldset div.optional fieldset legend, #formContainer form fieldset div.required fieldset legend
					{
						font-size: 100%;
					}
					#formContainer form fieldset div.required fieldset legend
					{
						color: red;		
					}


	#formContainer #errorContainer
	{
		padding: 5px;
		background-color: #ffeeee;
		border-top: 1px solid #778;
		border-bottom: 5px solid red;
	}
	
	#formContainer #errorContainer h4
	{
		font-size: 120%;
	}

	#formContainer small
	{
		display: block;
		clear: both;
		font-size: 90%;
		padding-left: 28%;
	}
	
	#formContainer select.selectDay
	{
		width: 20%;
	}
	
	#formContainer select.selectMonth
	{
		width: 29%;
	}
	
	#formContainer select.selectYear
	{
		width: 20%;
	}
	
	#formContainer .scrollbox
	{
		display: block;
		width:470px;

		height: 200px;
		overflow: auto;
		font-size: 80%;
		text-align: justify;
		padding: 2%;
		margin-bottom: 10px;
	}
	
	#formContainer .buttons
	{
		margin: 5px 0;
		text-align: center;
	}
	
	#formContainer .visible
	{
		display: auto;
	}
	#formContainer .emphasis
	{
		font-weight: bold;
		color: red;
	}

	
	/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
	
	/*--------------------------------------------------
	  REQUIRED to hide the non-active tab content.
	  But do not hide them in the print stylesheet!
	  --------------------------------------------------*/
	#formContainer .tabberlive .tabbertabhide {
	 display:none;
	}
	
	/*--------------------------------------------------
	  .tabber = before the tabber interface is set up
	  .tabberlive = after the tabber interface is set up
	  --------------------------------------------------*/
	#formContainer .tabber {
	}
	.tabberlive {
	 margin-top:1em;
	}
	
	/*--------------------------------------------------
	  ul.tabbernav = the tab navigation list
	  li.tabberactive = the active tab
	  --------------------------------------------------*/
	#formContainer ul.tabbernav
	{
	 margin:0;
	 padding: 20px 0 3px 0px;
	 border-bottom: 1px solid #778;
	 font: bold 12px Verdana, sans-serif;
	 text-align: center;
	}
	
	#formContainer ul.tabbernav li
	{
	 list-style: none;
	 margin: 0;
	 display: inline;
	}
	
	#formContainer ul.tabbernav li a
	{
	 padding: 3px 0.5em;
	 margin-right: 3px;
	 border: 1px solid #778;
	 border-bottom: none;
	 background: #DDE;
	 text-decoration: none;
	}
	
	#formContainer ul.tabbernav li a:link { color: #448; }
	#formContainer ul.tabbernav li a:visited { color: #667; }
	
	#formContainer ul.tabbernav li a:hover
	{
	 color: #000;
	 background: #AAE;
	 border-color: #227;
	}
	
	#formContainer ul.tabbernav li.tabberactive a
	{
	 background-color: #fff;
	 border-bottom: 1px solid #fff;
	}
	
	#formContainer ul.tabbernav li.tabberactive a:hover
	{
	 color: #000;
	 background: white;
	 border-bottom: 1px solid white;
	}
	
	/*--------------------------------------------------
	  .tabbertab = the tab content
	  Add style only after the tabber interface is set up (.tabberlive)
	  --------------------------------------------------*/
	#formContainer .tabberlive .tabbertab {
	 padding:5px;
	 border-top:1px solid #aaa;
	 border-top:0;
	
	 /* If you don't want the tab size changing whenever a tab is changed
	    you can set a fixed height */
	
	 /* height:200px; */
	
	 /* If you set a fix height set overflow to auto and you will get a
	    scrollbar when necessary */
	
	 /* overflow:auto; */
	}
	
	/* If desired, hide the heading since a heading is provided by the tab */
	#formContainer .tabberlive .tabbertab h2 {
	 display:none;
	}
	#formContainer .tabberlive .tabbertab h3 {
	 display:none;
	}
	
	/* Example of using an ID to set different styles for the tabs on the page */
	#formContainer .tabberlive#tab1 {
	}
	#formContainer .tabberlive#tab2 {
	}
	#formContainer .tabberlive#tab2 .tabbertab {
	 height:200px;
	 overflow:auto;
	}
