/*
@site:
@name:		Parts all over - Forms
@author:	Rhys Burnie - Hugeobject - http://www.hugeobject.com.au
@required:	layout.css, typo.css
*/
/*
	NB: Safari < 3 doesnt allow you to style buttons and many other form elements
*/
/*
	TODO: REFINE
	
	CURRENTLY ONLY SETUP ENOUGH TO COVER HOME PAGE FORM MARKUP
	
*/
/* = DEFAULTS = ________________________________________________________________________________________________________________ */
form {
	padding: .5em 0;
	padding: 0; /* CSS by Andrew Lessels */
}

fieldset {/* TODO - REFINE RULE */
	width: 670px;
	width: auto; /* CSS by Andrew Lessels */
	margin: 0 auto;
}
legend {/* TODO - REFINE RULE */
	font-size: 1.3em;/* this size comes from the required size used in home search form */
	font-weight: bold;
}
fieldset ol {
	list-style-type: none;
	margin: 0 !important; /* ie6/7 needed !important */
}
fieldset ol li {
	margin: 0;
	padding: 4px 0;
}
/* bind "fieldset ol li" with clearfix */
fieldset ol li:after { 
    content: ".";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    line-height: 0;  
    height: 0;
}  
fieldset ol li {  
    display: inline-block;
} 
/* NB: html must have a xmlns attribute */
html[xmlns] fieldset ol li {  
    display: block;  
}  
* html fieldset ol li {  
    height: 1%;  
}
fieldset label, /* CSS by Andrew Lessels */
fieldset ol li label {
	display: block;
	float: left;
	width: 135px; /* was using % but this became problemetic with ie6 when sometimes it would get confudesed */
	font-size: 1.2em;
	font-weight: bold;
	color: #004A6E;
}
fieldset ol li.inline label {
	display: inline;
	width: auto;
	margin-right: 5px;
}

/* DISABLED CLASS */
fieldset ol li.disabled {
	opacity: 0.5;
	filter:aplha(opacity=50);
}

fieldset ol li.disabled select {
	background: #fff;
}
/* DESCRIPTION */
/*

*/
fieldset div.description {
	width: 530px;
	margin-left: 135px;/* redefined in ie6.css */
	font-size: 0.85em;
}
fieldset div.description p {
	padding: 0 0 0.2em 0;
}

/* == INPUTS == ------------------------------------------- */
/* 
	input types should have matching class names
	this way we can easily access them via css at any time
	ex. <input type="radio" class="radio" etc...
*/
/* === TEXT === */
input.text {/* TODO - REFINE RULE */
	width: 300px;
	border: 1px solid #7f9db9;
}
/* ==== SPECIAL TEXT ==== */
/* ===== PHONE ===== */
fieldset li.phone input.text {
	width: auto; /* will follw browser default or size attribute (according to browser) */
}
fieldset li.phone input.phone-area {
	width: 2em; /* 2em seems to be enough for 3 numbers */
	border: 1px solid #7f9db9;
}
/* === MULTI-GROUP (RADIO/CHECKBOXES) === */
fieldset.multi-group {
	border: 0;
	margin: 0;
	padding: 0;
}
fieldset.multi-group legend {
	font-size: 1.2em;
	font-weight: bold;
	color: #004A6E !important;
	/* set in ie7.css - margin-left: -8px; */
}
fieldset.multi-group li {
	line-height: 1.2em !important;
	margin: 0 !important;
}
fieldset.multi-group label {
	display: inline !important;
	width: auto !important;
	font-size: 1em;
	font-weight: normal;
}
fieldset.multi-group.col-mode li{
	padding-left: 20% !important;
}

input.radio {/* TODO - REFINE RULE */
	border: 0;
}
input.checkbox {/* TODO - REFINE RULE */
	border: 0;
}
/* === HIDDEN === */
input.hidden {
	display: none; 
	/* 
	sometimes white space is still rendered for hidden fields in ie6
	this will take it out of the equasion
	*/
}
/* === READONLY === */
/*
	used in addition to other classes if readonly attribute used
	ex. <input type="text" readonly="readonly" class="text readonly" ...etc
*/
input.readonly {/* TODO - REFINE RULE */
	
}
/* === BUTTONS/SUBMITS === */
fieldset li.button-indent {
	padding-left: 135px;
}

/* ==== BUTTON ==== */
input.button {/* TODO - REFINE RULE */
	
}
/* ==== SUBMIT ==== */
input.submit {
	width: 88px;
	height: 25px;
	background: transparent url(/images/sprite-submit-btn.png) 0 0 no-repeat;/* re-defined in ie6.css */
	margin: 0;
	margin-top: -4px;
	margin: 5px 0; /* CSS by Andrew Lessels */
	padding: 0;
	border: 0;
	text-indent: -9999px;
	cursor: pointer; /* hand in ie6.css */
	/*set in ie6.css - padding-top: 50px; hides text for ie6 */
}

input.submit:hover,
input.submit.hover {
	background-position: 0 -25px !important;/* ie6 wanted !important */
}
/* ==== GO (submit) ==== */
/*
	NB: for browsers that dont support :hover for any element (ie6 for example) a mouseover/out event
		needs to be unobtrusivley applied via js toggleing the class "hover" for the input element
*/
input.go {
	width: 60px;
	height: 25px;
	background: transparent url(/images/sprite-go-btn.png) 0 0 no-repeat;/* re-defined in ie6.css */
	margin: 0;
	margin-top: -4px;
	padding: 0;
	border: 0;
	text-indent: -9999px;
	cursor: pointer; /* hand in ie6.css */
	/*set in ie6.css - padding-top: 50px; hides text for ie6 */
}
input.set {
	float: right;
	width: 46px;
	height: 25px;
	background: transparent url(/images/sprite-set-btn.png) 0 0 no-repeat;/* re-defined in ie6.css */
	margin: 0;
	padding: 0;
	border: 0;
	text-indent: -9999px;
	cursor: pointer; /* hand in ie6.css */
	/*set in ie6.css - padding-top: 50px; hides text for ie6 */
}
input.login {
	width: 62px;
	height: 25px;
	background: transparent url(/images/sprite-login-btn.png) no-repeat;
	border: 0;
	text-indent: -999em;
}
input.logout {
	width: 73px;
	height: 25px;
	background: transparent url(/images/sprite-logout-btn.png) no-repeat;
	border: 0;
	text-indent: -999em;
}

input.login:hover,
input.login.hover,
input.logout:hover,
input.logout.hover,
input.set:hover,
input.set.hover,
input.go:hover,
input.go.hover {
	background-position: 0 -25px !important;/* ie6 wanted !important */
}
/* == SELECTS/OPTIONS == ----------------------------------- */
select {
	width: 304px;
	border: 1px solid #7f9db9; /* NB: IE won't allow border change on select */
}
select.small {
	width: 100px;
}

/* == TEXTAREA == ------------------------------------------ */
textarea {
	width: 530px;
	width: 525px; /* CSS by Andrew Lessels */
	border: 1px solid #7f9db9;
	padding: 2px; /* CSS by Andrew Lessels */
	font-size: 100%;
}
/* = SPECIAL NEEDS CLASSES = ____________________________________________________________________________________________________ */
/* == TOP 1PX BORDER ABOVE INPUT ITEM == */
fieldset ol li.border-top {
	border-top: 1px solid #fff;
}
/* == ALTERNATE LABEL WIDTHS == */
/*
	Default styles of label is to be display:block;float:left;width:40%;
	the follwoing alters the width of label
	Assumption: label is on the left
*/
/* === LABEL WIDTH 60% === ------------------------------------------- */
fieldset.cols-60-40 label {
	font-size: 1em;
	width: 60%;
}
fieldset.cols-60-40 input.text {
	width: 37%;
}
fieldset.cols-60-40 select {
	width: 38%;/* set to 59% for in ie6.css */
}
/* === LABEL WIDTH 30% === ------------------------------------------- */
fieldset.cols-30-70 label {
	font-size: 1em;
	width: 30%;
}
fieldset.cols-30-70 input.text {
	width: 67%;
}
fieldset.cols-30-70 select {
	width: 68%;/* set to 59% for in ie6.css */
}
/* == SINGLE TEXT WITH SUMIT - 1 LINE == */
/*
	A single text field (left) with submit button (right) on sinle line
	class "single-text-submit" applied to <li>
	expected markup:
	<li class="single-text-submit">
		<input type="text" class="text" ... />
		<input type="submit" class="go" ... /> class could be "submit"
	</li>
	
	NB: in ie6/7 the input text is positioned absolute to the li instead of float: right;
		because it wasnt behaving the same way as other browsers. This shouldnt be a problem
		beacesue unlike most of the other browsers text size increase is limited to "largest" in ie
		instead of getting really big.
*/
li.single-text-submit {
	text-align: right;
}
li.single-text-submit input.text {
	float: left; /* NB: positioning treated differently in ie6/7 .css */
	width: 60%;
}
/* 
dont need to do anything here at this stage
li.single-text-submit input.submit,
li.single-text-submit input.go {
	
}
*/
/* == SUB FORMS == */
div#sub form {	
	border-bottom: 6px solid #fff;
}
div#sub fieldset {
	width: 220px;
	margin: 0 auto;
	border: 0;
	background: transparent;
}
div#sub legend {
	color: #008DD2;
}
div#sub fieldset.multi-group legend {
	font-size: 1em;
}
div#sub li.single-text-submit input.text {
	float: left;
	width: 65%;
}

/* = INHERITED CLASS SPECIFIC RULES = ___________________________________________________________________________________________ */
/* == HOME PAGE (search vehicle type and keyword) == */
/*
	NB:	div.previous-searches rules here too
*/
div.home div#main form {	
	border-bottom: 6px solid #fff;
}
div.home div#main fieldset {
	width: 326px;
	margin: 0 auto;
	border: 0;
	background: transparent;
}
div.home div#main legend {
	color: #008DD2;
	/* set in ie6.css - margin-left: -8px; */
}
div.home div#main fieldset ol li label {
	width: 40%;
}
div.home div#main input.text {
	width: 59%;
}
div.previous-searches {
	width: 326px;
	margin: 0 auto;
}
div.previous-searches h2 {
	font-size: 1.3em;
	font-weight: bold;
	color: #008DD2;
	padding-left: 0;
	margin-top: 0.5em;
}
div.previous-searches ul {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 1em;
}
div.previous-searches li {
	line-height: 1.5em;
	margin-bottom: 0.2em;
}
div.previous-searches a,
div.previous-searches a:visited {
	color: #000;
}
div.previous-searches a:hover,
div.previous-searches a:active {
	color: #008DCF;
}

/* = CUSTOM FORMS = _____________________________________________________________________________________________________________ */
/* == SORT BY - PART OF SEARCH RESULTS PAGE == */
div.search-results-options form.sortby {
	margin: 0 0 0 24px; /* Working[ff,safari3,opera] left 20 + 4 (the padding left of results table td) */
	padding: 0;
}

.name {
	vertical-align: top;
	font-weight: bold;
	width: 115px;
	width: auto; /* CSS by Andrew Lessels */
	text-align: right;
	float: left;
	padding: 1px 5px;
	padding: 1px; /* CSS by Andrew Lessels */
	margin-top: 3px;
	clear: left;
}
.value {
	float: left;
	padding: 5px;
	padding: 4px; /* CSS by Andrew Lessels */
}
/* BEGIN CSS by Andrew Lessels */
span.value span {
	line-height: 20px;
	padding: 2px;
}
span.tooltip,
span.value textarea,
span.value input.input-text {
	float: left;
}
div#login form { 
	float: right; 
}
div#login input.input-text {
	width: 117px;
}
div#login label {
	padding: 0 5px;
}
div#login input.logout {
	margin-left: 5px;
}
input.input-text {
	border: 1px solid #7f9db9;
	padding: 2px;
}
label {
	line-height: 22px;
	zoom: 1;
}
label span.required {
	margin-left: 3px;
}
label.error {
	color: #CF0000;
}
table.input-checkbox {
	margin: 0;
}
.input-checkbox label {
	font-size: 100%;
	color: #000;
	font-weight: normal;
	width: auto;
	float: none;
	display: inline;
}
span.error input.input-text {
	border-color: #CF0000;
	background-color: #FFE8E8;
}
span.error-indicator {
	clear: left;
	display: block;
	font-size: 10px;
	color: #CF0000;
	position: relative;
	top: -4px;
}
div#price-option-container,
div#each-container,
div#gst-container,
div#condition-container,
div#type-container,
div#section-container,
div#manufacturer-container {
	float: left;
	width: 140px;
	margin-bottom: 8px;
}
div#notes-container,
div#section-container {
	clear: left;
}
div#price-option-container label,
div#each-container label,
div#gst-container label,
div#condition-container label,
div#type-container label,
div#section-container label,
div#manufacturer-container label {
	display: none;
}
div#price-option-container select,
div#each-container select,
div#gst-container select,
div#condition-container select,
div#type-container select,
div#section-container select,
div#manufacturer-container select {
	width: 120px;
}
div#section-other-container,
div#manufacturer-other-container {
	float: left;
	width: 207px;
	margin-bottom: 8px;
}
div#type-other-container {
	float: left;
	width: 180px;
	margin-bottom: 8px;
}
div#type-other-container input.input-text,
div#section-other-container input.input-text,
div#manufacturer-other-container input.input-text {
	width: 105px;
}
div#part-container {
	float: left;
	width: 320px;
	margin-bottom: 8px;
}
div#part-container input.input-text {
	width: 183px;
}
div#description-container {
	float: left;
	width: 518px;
	margin-bottom: 8px;
}
div#part-container span.error-indicator,
div#description-container span.error-indicator {
	margin-left: 106px;
}
div#comments-container {
	float: left;
	margin-bottom: 8px;
}
div#asking-container label,
div#comments-container label,
div#part-container label,
div#description-container label {
	width: 100px;
}
div#description-container input.input-text {
	width: 350px;
}
div#comments-container textarea {
	width: 530px;
	height: 66px;
}
div#asking-container {
	float: left;
	width: 190px;
	margin-bottom: 8px;
}
div#asking-container input.input-text {
	width: 60px;
}
div#notes-container textarea {
	width: 632px;
	height: 66px;
	margin-bottom: 15px;
}
div#contact-details-container div {
	margin-bottom: 8px;
}
div#contact-details-container label {
	width: 105px;
}
div#contact-details-container input.input-text {
	width: 450px;
}
div#contact-details-container span.error-indicator {
	margin-left: 111px;
}
div#contact-details-container #town-container {
	width: 280px;
	float: left;
}
div#contact-details-container #town-container input.input-text {
	width: 150px;
}
div#contact-details-container #postcode-container {
	width: 165px;
	float: left;
}
div#contact-details-container .prop {
	height: 100%;
}
div#contact-details-container #postcode-container label {
	width: 90px;
}
div#contact-details-container #postcode-container input.input-text {
	width: 50px;
}
div#contact-details-container #state-container {
	width: 150px;
	float: left;
}
div#contact-details-container #state-container label {
	width: 60px;
}
div#contact-details-container #state-container input.input-text {
	width: 50px;
}
div#contact-details-container #phone-container {
	clear: both;
}
div#contact-details-container #postcode-container span.error-indicator {
	margin-left: 74px;
}
div#contact-details-container #state-container span.error-indicator {
	margin-left: 44px;
}
div.new-listing input.submit {
	float: right;
}
span.required-information {
	font-size: 1.2em;
	font-weight: bold;
	color: #004A6E;
}
span.value span.info {
	width: 18px;
	height: 18px;
	background: url(../images/info-icon.png) no-repeat;
	text-indent: -999em;
	float: left;
	padding: 0;
	margin: 2px 0 0 4px;
}
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #333;
	background-color: #f7f5d1;
	padding: 5px;
	width: 210px;
}
#tooltip h3, 
#tooltip div { 
	margin: 0; 
}
#tooltip h3 {
	font-size: 12px;
	color: #000;
	font-weight: normal; 
} 
p.warning {
	font-size: 12px;
	color: #CF0000;
	font-weight: bold;
	margin: 5px 0; 
}
.dr-table-thead,
.dr-table-cell,
.dr-table-subheadercell,
.dr-table {
	font-size: 12px;
	border: 0 !important;
}
.dr-table-subheadercell {
	font-size: 15px;
	font-weight: bold;
	background-color: #FFF;
	color: #004A6E; 
}
#sub form,
#nav_main form {
	padding: 5px 0;
}
/* END CSS by Andrew Lessels */

.label-disabled {
	color: lightgray;
}