/*Name:Order styles */
/* ----------------------------------------------------------------------
	ORDER
	Modify the content div to accomodate the forms.
	---------------------------------------------------------------------- */
#yourorder #content {
	background-image:none;
	padding-bottom:0;
}
#yourorder form {
	margin:0 2em;
}
#yourorder #pageTitle {
	margin-bottom:1em;
}
#yourorder h2 {
	border-bottom:1px solid #cccccc;
	padding-bottom:0.3em;
}
#yourorder dl {
	width:95%;
	float:left;
	clear:both;
}
#yourorder dt, 
#yourorder dd {
	float:left;
	margin-bottom:0.5em;
}
#yourorder dt{
	width:20%;
	text-align:right;
	font-weight:bold;
	padding-right:1em;
}
#yourorder dd {
	width:70%;
	clear:right;
}
textarea{
	font-family:"Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size:1em;
}

fieldset {
	border-top: 1px solid #CCCCCC;
	margin:0;
}

legend{
	padding:0 0.5em;
	margin-bottom:0.5em;
}

/* ----------------------------------------------------------------------
	SELECTION TABLE
	Some slightly complex layouts to style the table used for selection.
	We need to set borders, widths and colours. It also involves a 
	few background images, say in the table headers. 
	----------------------------------------------------------------------*/
#productSelection {
	width:100%;
	text-align:left;
	clear:both;
}
#productSelection th,
#productSelection td {
	padding:0.5em 5px;
}
/* HEADING STYLES */
#productSelection th {
	border-bottom:1px solid #999999;
}
#productSelection thead th {
	font-weight:bold;
	font-size:1.1em;
	background-color:#027948;
	color:#FFFFFF;
}
#productSelection tbody th {
	color:#666666;
	font-size:1.6em;
}
/* ACTUAL CONTENT */
#productSelection td {
	border-bottom:1px solid #dddddd;
	border-right:0;
}

#productSelection td.name {
	width:18em;
	vertical-align:top;
}

#productSelection .first td {
	border-top:1px solid #CECDC3;
}
#productSelection td label span{
	font-weight:normal;
}
#productSelection .quantity {
	width:2.5em;
}
#productSelection .total {
	width:3em;
	text-align:right;
}
#productSelection td label {
	width:auto;
	margin-bottom: 0;
	height: auto !important;
	text-align:left;
	font-weight:bold;
	margin-top:0;
}
#productSelection input {
	margin:0 !important;
	width:2em;
}
#productSelection .pricePerDozen {
	width:6em;
}
/* Heighlighted rows */
/* Learn to spell before codding */
#productSelection .highlight {
	background-color:#ECECE4 !important;
}

/* ----------------------------------------------------------------------
	TOTALS
	A styled definition list for the name/value pairs. 
	Positioning of the flash file.
	---------------------------------------------------------------------- */
	
#totals .orderDisplay {
	float:left;
}
#totals {
	margin-top:1em;
	background-color:#98C49E;
	float:left;
	padding-bottom:0.6em;
	width:100% !important;
}
#totals dl {
	margin:0.9em 0 0 0 !important;
	font-size:1.2em;
	float:left;
	width:718px !important;
}
#totals dt {
	clear:left;
	float:left;
	font-weight:bold;
	color:#333333;
	text-align:right;
	width:86% !important;
	margin-right:2% !important;
}
#totals dd {
	float:right;
	clear:right;
	color:#000000;
	font-weight:bold;
	text-align:right;
	width:10% !important;
}
/* THE TOTAL PRICE */
#totals dt.price {
	width:23em;
	text-align:right;
}
/* flash box */
#totals #cartons {
	margin-left:1em;
}

/* ----------------------------------------------------------------------
	NEXT STEP
	Controls for moving through and finalising the order.
	---------------------------------------------------------------------- */
#controls {
	padding:1.2em 0 0 0;
	border:0;
	background-color:#cccccc;
	padding-left:0;
	padding-right:0;
	width:100%;
	float:left;
	margin-bottom:1.2em;
}
#controls p {
	float:left;
	width:50%;
	clear:left;
	margin-left:1em;
}
#controls button {
	float:right;
	margin-top:0.3em;
	margin-left:0.5em;
	margin-right:1em;
}


/* ----------------------------------------------------------------------
	SHIPPING DESTINATION
	Styling the radio buttons on the shipping page so they sit correctly.
	---------------------------------------------------------------------- */
#freight label {
	width:42%;
	clear:none;
}
#freight .option {
	clear:none;
	margin-right:0 !important;
}
#freight label strong {
	color:#666666;
}

/* ----------------------------------------------------------------------
	ORDER PROGRESS
	An unordered list displayed at the bottom of the order page.
	---------------------------------------------------------------------- */
#orderProgress {
	float:left;
	clear:both;
	width:57em;
	border-bottom:2px solid #A48956;
	margin:0 0 1em 2em !important;
	display:inline; /* Hack to stop IE margin-doubling */
}
#orderProgress li {
	margin:0 !important;
	float:left;
	list-style-type:none;
}
#orderProgress a {
	font-size:1.2em;
	float:left;
	margin-right:0.5em;
	padding:0.4em 0.8em;
	background-color:#cccccc;
	color:#666666;
	text-decoration:none !important;
}
#orderProgress a.current {
	background-color:#DDB770;
	color:#ffffff !important;
	background-image:url(../images/form_progress_bkg.gif);
	background-repeat:repeat-x;
	background-position:bottom left;
}
#orderProgress a.completed {
	background-color:#EBD5AB;
}

/* ----------------------------------------------------------------------
	CONFIRMATION PAGE
	Some small layout tweaks for the confirmation page
	---------------------------------------------------------------------- */
#listSub label,
#orderUpdate .box label {
	width:auto;
	clear:none;
	padding:0 0 0 0.5em;
	text-align:left;
}
#orderUpdate .box label {
	width:370px;
}
#orderUpdate .box {
	width:100%;
	float:left;
}
#orderUpdate {
	padding:1.2em 4% 0 4%;
	float:left;
}
#orderUpdate h3 {
	margin-bottom:0.8em;
}
#orderUpdate button {
	float:right;
}

/* ----------------------------------------------------------------------
	ERROR DISPLAY
	Simple little DIV that we are using to display some inline errors.
	---------------------------------------------------------------------- */
.error {
	z-index:6;
	line-height:1em;
	position:absolute;
	background-color:#660000;
	color:#ffffff;
	padding:0.5em 0.7em;
	width:12em;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	border:1px solid #330000;
}

/* Server side validation style */

.formValidation {
	background-color:#FFFAA8;
	background-image:url(../images/icon_error.gif);
	background-repeat:no-repeat;
	background-position:16px 16px;
	padding:10px 4px 0px 64px;
	border:1px solid #F7DC7B;
	margin-bottom: 0.5em;
}

#userMessage{
	clear:both;
	padding:1em 1em 1em 64px;
	margin:0 2em 1em 2em;
	border:1px solid #CCCCCC;
	background-color:#E6E6E6;
	background-position:16px 16px;
	background-repeat:no-repeat;
}

#userMessage h3 {
	margin-bottom:0.5em;
}

#userMessage.formError{background-image:url(../ui/icon_userMessage_warning.gif);}
.he-required {border-color:#1EB474!important;}
.attention {border-color:red!important;}


/* ----------------------------------------------------------------------
	CONFIRMATION PAGE:
	Some tweaks for the disclaimer checkbox &c
	---------------------------------------------------------------------- */
#confirm h3 {
	border-bottom:1px solid #cccccc;
	margin:1em 0 0.5em 0;
	padding-bottom:0.3em;
	float:left;
	width:100%;
	clear:both;
}
#confirm dl {
	margin-top:0.5em;
}
#confirm dd,
#confirm dt {
	font-weight:normal !important;
}
#confirm dd {
	font-style:italic;
}
#confirm .block div dt {
	width:30%;
}
#confirm .block div dd {
	width:50%;
}
#confirm .block {
	border:1px solid #cccccc;
	background-color:#ECF2EE;
	float:left;
	padding:0.8em 2%;
	width:96%;
}
#confirm .block div {
	float:left;
	width:49%;
}
/* THE TABLE */
#confirm table {
	width:100%;
	clear:both;
}
#confirm th,
#confirm td {
	padding:0.4em 0.6em;
	border-bottom:1px solid #cccccc;
}
#confirm thead th {
	font-weight:bold;
	background-color:#027948;
	color:white;
	font-size:1.1em;
}
#confirm table .total {
	text-align:right;
}
#confirm tfoot tr {
	text-align:right;
}
#confirm tfoot tr.total {	
	font-size:1.5em;
	padding:0.3em 0 !important;
}