/*
Name:		ANTaR - Pledge Form
Author:		RBurnie, Hugeobject http://www.hugeobject.com.au

NB: There is a seperate stylesheet for IE 6/7 inconsistencies
	include both (ie6/7 via conditional comment)
*/


div#letter_instructions {
	padding-top: 1em;
}

/*
Blurb wrapper at top
*/
div#pledge_intro {
	min-height: 260px;
	position: relative;
}

div#blurb p {
	padding: 0.2em 0.5em 0.3em 0.5em;
}
/*
The pledge count element
	Number is inserted inside of strong tag
*/

div#pledge_count {
	float: right;
	width: 200px;
	height: 260px;
	background: #fff url(../images/pledge-alt.gif) no-repeat;
}
object#pledge {
	float: right;
}
div#pledge_count p {
	position: relative;
}
div#pledge_count span {
	display: block;
	position: absolute;
	left: -9999px;
}
div#pledge_count strong {
	display: block;
	position: absolute;
	top: 130px;
	left: 40px;
	font: 30px Arial, Helvetica, sans-serif;
	color: #eeb64f;
}
div#pledge_count strong.target { color: #ee3438; }

/* = PLEDGE FORM ======================================================================= */
form#pledge {
	margin: 0;
	padding: 0;
	clear: both;
}

form#pledge fieldset {
	margin: 0;
	/*
	The negative margin here is to adjust for the top padding added to the legend element
	the legend needs top padding to acheive the gradient background heading style because
	legends cant be controlled by making the blocks like aother elements. The gradient is actually 
	applied to the fieldset
	*/
	margin-top: -30px;		/*(ie6/7) margin-top: -5px;*/
	padding: 0;
	border: 0;
	background-image:url(http://www.antar.org.au/images/stories/h2-gradient2.gif);
	background-repeat:repeat-x;
}

form#pledge legend{
	font-size:1.3em;
	font-weight:bold;
	height:35px;
	padding-top:40px;		/*(ie6/7) padding-top: 10px;*/
	/*padding-left:15px;		/*(ie6/7) padding-left: 10px;*/
	color: #000 !important;
}

form#pledge div.description {
	padding-left: 12px;
}
form#pledge li div.description { padding-left: 0; }
form#pledge strong.required {
	
}
form#pledge strong.required em {
	color: red;
}
/* == OL child of fieldset == ==========================================================
	Used for semantic structure, clean code and flexibility for styling
	Each "item" in the form has its own li
*/
form#pledge fieldset ol {
	list-style-type: none;
	margin: 0;
}
form#pledge fieldset ol li {
	padding-top: 0.5em;
	padding-left: 20px !important;
	margin: 0 0 0.4em -20px;
	background: transparent url(../images/form-item.gif) 0 5px no-repeat;
	border-bottom: 1px dashed #dbdbdb;
}
form#pledge fieldset ol li.last { border: 0; }
/*
Make labels block floated left this will acheive 2 column effect as long as the markup structure is:
<li>
	<label></label>
	<input/>
</div>
*/
form#pledge label {
	display: block;
	width: 50%;
	float: left;
}
/*
A reset for labels that we want to fill entire with (for the checkboxes)
see bellow for checkbox style
*/
form#pledge label.inline {
	display: inline;
	width: auto;
	float: none;
}

form#pledge input {
	border: 1px solid #999;
}
/*
Checkboxes - markup structure is:
<li>
	<label>
		<input/>
		the checkbox text
	</label>
</li>
*/
form#pledge label input {
	display: block;
	float: left;
	margin-right: 5px;
	border: 0;
}

form#pledge button {
	background-color:#FFFFFF;
	border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
	border-style:double;
	border-width:3px;
	display: block;
	height:26px !important;
	line-height:18px !important;
	padding:0px 5px;
	margin: 10px auto;
}
div.error { 
	background-image: none !important;
	background-color: #fff; 
}
div.error ul {
	font-size: 1em;
	color: #f00;
	font-style: normal;
	text-transform: none;
}