.steps{	color: #FF0000;	font-size: 24pt;}
.red-bold {	color: #FF0000;	font-weight: bold;}
.red-bold a:visited {	color: #FF0000;	font-weight: bold;}
.error {	color: #FF0000;}
.hide {	display: none;}
.show {	display: block;}
img.ajax-loader{display: none;	margin: auto;}
.left {float: left;}
.right {float: right;}
.clear {clear:both;}

.page-navigation {overflow: hidden; width: 100%; text-align: center;}
.page-navigation a {padding-right: 1em; font-weight: bold; font-size: 1.2em; }
.page-navigation form {position: relative; float: left; right: 50%;}
.page-navigation div {position: relative; float: left; left: 50%;}


/* Forms */
form fieldset {padding-top: 1em; margin-bottom: 0; margin-top: 1em; border: 0px solid transparent;}
form fieldset legend {padding: 1em 0;}
form input.text,
form input.password {width: 24em;}
form label {float: left; width: 12em; text-align: right; padding-right: 1em;}
form div {float: left; padding-bottom: 1em; clear: left; position: relative; width: 100%;}
form .fieldset-controls {padding-left: 13em; padding-top: 0; margin: 0 0 1em 0;}
form select {margin-top: 0em;}

/* User registration forms */
/*
#user-title-block {float: left; width: auto; clear: none; margin-left: 7em;}
#user-title-block label {float: none; display: block; text-align: left; width: 5em;}

#user-email-block ,
#user-pass-block,
#user-phone-block {margin-left: 7em;}

#user-email-block label {float: none; display: block; text-align: left; padding-right: 0.9em;}
#user-email-block input {}

#user-pass-block,
#user-pass-confirm-block,
#user-first-name-block,
#user-last-name-block {float: left; width: auto; clear: none;}

#user-pass-block label,
#user-pass-confirm-block label,
#user-first-name-block label,
#user-phone-block label,
#user-last-name-block label {float: none; display: block; text-align: left; padding-right: 0.9em;}

#user-pass-block input,
#user-pass-confirm-block input,
#user-first-name-block input,
#user-last-name-block input {width: 11em;}

#user-registration-form-step1 .fieldset-controls {padding-left: 7em;}
*/
#home-delivery-address {margin: 0pt auto; width: 40em;}
#home-delivery-address label {width: 5em;}
#home-delivery-address #delivery-postcode-wrapper {width: 18em;}

#user-registration-form-step2 label,
#user-details-update-form label {width: 13em;}

#user-registration-form-step2 .fieldset-controls,
#user-details-update-form .fieldset-controls {padding-left: 14em;}

#delivery-contact-address-wrapper {margin: -2em 0pt 0pt 22em;}
#delivery-contact-address-wrapper label {float: none; width: 16em;}

#contact-postcode-wrapper,
#delivery-postcode-wrapper {width: 26em;}
#contact-postcode-wrapper input.text,
#delivery-postcode-wrapper input.text { width: 10em; }

div#contact-state-wrapper,
div#delivery-state-wrapper { clear: none; width: 12em; }
div#contact-state-wrapper label,
div#delivery-state-wrapper label { width: 5em; }

/* Update login form */
#user-login-update-form .fieldset-controls p,
#user-details-update-form .fieldset-controls p {display: inline; margin-left: 1em;}

/* login form  & Add student form */
#add-child-form div p,
#login-form div p {position: absolute; left: 38em; width: 20em;}

/*edit name form */
#edit-child-name input.text {width: 18em;}
#edit-child-name label {float: none;}

/* sibling order form */
input.sibling-product {width: 7em;}

input.extra-student-first-name,
input.extra-student-last-name {width: 18em;}
input.extra-student-grade {width: 9em;}

/* order form */
input#item-quantity {width: 2em;}

/* checkout form */
#checkout-form p {float: left; margin:-2.2em 0 0 11em;}
#checkout-form .delivery-options { padding: 1em;}
#checkout-form .delivery-options label { width: 25em; text-align: left; margin-left: 10em; font-weight: bold;}
#checkout-form .delivery-options label input { float: left; padding-right: 1em;}
#checkout-form .delivery-options label span { padding-left: 2em; padding-bottom: 0.5em; display: block;}


 


#add_student_table{	border-spacing: 1px; background-color: #D4D0C8; empty-cells: show; border: 0px solid transparent; width: 100%; margin-bottom: 1em;}
#add_student_table td{ padding: 5px;}
#add_student_table td.title{ font-weight: bold;}
#add_student_table tr{	background-color: #EFEFEF;}
#add_student_table td.controls{text-align: center;	width: 4em;}

#add-student-form {width: 100%; padding-bottom: 2em;}
#add-student-form div {padding: 0.5em 1em 0 1em; float: left; width: 100%; clear: left;}
#add-student-form div input {width: 8em;}
#add-student-form label {float: left; width: 10em; margin-right: 1em; padding-top: 0.2em;}

#add-student-form legend {font-weight: bold; padding: 0;}
#add-student-form fieldset {float: left;}
#add-student-form fieldset#automatic-entry {width: 28em;}
#add-student-form fieldset#automatic-entry label {width: 4em;}
#add-student-form fieldset#manual-entry {width: 22em;}
#add-student-form fieldset.controls { margin-top: 1.8em;}

#add-student-form #linked-students-select {}

legend {  margin-left: 1em;  color: #000000;  font-weight: bold;}


/* Linked Students (table) */

#linked-students{background-color: #EFEFEF; width: 100%; empty-cells: show; border-collapse: collapse;}
#linked-students td, 
#linked-students th {padding: 5px; border: 1px solid #D4D0C8;}
#linked-students th.controls {width: 3em;}

/* Student Orders (table) */

#student-orders{background-color: #EFEFEF; width: 100%; empty-cells: show; border-collapse: collapse;}

#student-orders .student-title td.name-controls {width: 10em;}
#student-orders .student-title .first-name {float: left; margin-right: 1em;}
#student-orders .student-title .last-name {}
#student-orders .student-title td.total-column {width: 3em}

#student-orders td, 
#student-orders th {padding: 5px; border: 1px solid #D4D0C8;}
#student-orders thead th{ text-align: left;}
#student-orders thead label{font-weight: normal;	color: blue;	text-decoration: underline;}
#student-orders #add-student-button, 
#student-orders input {font-weight: normal;}
#student-orders tr.student-title{background-color: #D4D0C8;}
#student-orders tr.student-title td{ height: 54px;}
#student-orders tr.student-title td.ajax-loader{text-align: center; width: 2em}
#student-orders tr.student-title td.ajax-loader img{display: none;}
#student-orders tr.student-title td.total-column {font-weight: bold;}
#student-orders tr.student-title .name{	font-weight: bold; width: 15em;}
#student-orders tr.student-title .orig {font-weight: normal;}
#student-orders tr.student-title input {width:8em;}
#student-orders tr.student-title .name-controls {float:right;}

#student-orders .student-add-product .product-options {white-space: nowrap;}
#student-orders .student-add-product .item-qty {width: 6em;} 

#student-orders .student-item span.product-name{ padding-right: 2em;}
#student-orders .student-item span.cal-year{ padding-right: 2em;}
#student-orders .student-item span.design{padding-right: 2em;}
#student-orders .student-item .quantity input{ width: 2em;}

#student-orders .item-quantity { white-space:nowrap;} 
#student-orders .quantity-input { width: 2em;}
#student-orders td.item-cost{   text-align: right;}
#student-orders td.quantity{    width: 6em;}
#student-orders td.product-cost{text-align: right;}
#student-orders .buttons{	    text-align: center;}
#student-orders tfoot td{       text-align: right;}

/* order related */

#order_summary{ border: 1px solid #D4D0C8; background-color: #EFEFEF; width:100%; border-collapse: collapse;}
#order_summary th {	border: 1px solid #D4D0C8; font-weight: bold; padding: 5px;}
#order_summary th.qty_col{ width: 30px;}
#order_summary th.remove_col{ width: 55px;}
#order_summary th.price_col{ width: 60px;}
#order_summary td {	border: 1px solid #D4D0C8; padding: 5px;}
#order_summary td.item_student{white-space: nowrap;}
#order_summary td.item_cost{ text-align: right; width: 60px;}
#order_summary td.item_qty{ text-align: center; width: 30px;}
#order_summary td.item_design{ text-align: center;}
#order_summary td.remove_link{ text-align: right; font-weight: normal; width: 55px;}
#order_summary tr{ background-color: #EFEFEF;}
#order_summary tr#discount { background-color: #FFFFFF;}
#order_summary td.sibling_items{ padding:0px; border: 0px;}
#order_summary .sibling_items table { width: 100%; height: 100%;}
#order_summary td.sibling_items{ height: 100%;}
#order_summary #total_cost{ background-color: #FFFFCC; font-weight: bold;}


#order_title{ font-weight: bold; background-color: #EFEFEF; border: 1px solid #999999; text-align: center; padding: 5px; margin-bottom: 10px;}

#order_progress { width: 100%; background-color: #CCCCCC; vertical-align: top; margin-bottom: 10px; border-collapse: collapse;}
#order_progress .complete   { background-color: #D6EAFD;}
#order_progress .active     { background-color: #AACFFF;}
#order_progress .incomplete { background-color: #FFFFFF;}
#order_progress th { color: black; width: 20%; text-align: center;}
#order_progress td { vertical-align: top; text-align: center;}

#order_controls {text-align: center; padding: 5px; margin: 20px auto 10px auto; width: 700px;}


#postage td{ text-align: right;}
#order_total td{ text-align: right;}

/*#delivery p {text-align: center;} */
#delivery #postal-address{ background-color:#EFEFEF; border:1px solid #D4D0C8; margin:auto; padding-left:1em; width:25em;}
#delivery #postal-address dt{width: 5em; float:left; font-weight: bold; text-align:right;}
#delivery #postal-address dd{margin-left: 6em;}

#add_student{ text-align:  right; font-weight: normal;}
#discount{ color: red; font-weight: bold; text-align: right;}
#total_price{ background-color: #FFFFCC; text-align: right;}
#add_another_student_button{ width: 700px; text-align: center; padding: 5px; margin-bottom: 10px;}
#sibling_button{ width: 700px; text-align: center; padding: 5px; margin-bottom: 10px;}

#add_another_product{background-color:#EFEFEF; border:1px solid #D4D0C8; font-weight:bold; margin-bottom:10px; margin-top:20px; padding:5px; text-align:center; width:700px;}
table#pack_totals{ background-color:#D4D0C8; width: 60%;}
#pack_totals tr{ background-color: #EFEFEF;}
#pack_totals td.cost_total{	width: 15%;	text-align: right;}

#order-number {font-weight: bold;}
#order-number dt {float:left; text-transform: uppercase; text-decoration: underline; width: 10em;}

form#linked-students {background-color: transparent; margin: auto; width: 450px;}
form#linked-students label:after {content:":" }

form#linked-students fieldset{border: 0px solid transparent; }
form#linked-students legend {font-weight: bold;}

/* Samples */
#product-samples {clear:both; float: left; width: 100%;}
#design-samples {clear:both; float: left; padding-top: 1em;}

#product-samples h2,
#design-samples  h2 { color: white; background-color: #336699; padding: 0.2em 1em;}

#product-samples .product-sample,
#design-samples  .design-sample {width: 125px; float: left; margin: 0.2em; position: relative;}

#product-samples .product-sample {height: 210px;}
#design-samples  .design-sample {height: 175px;}

#product-samples .product-sample h3,
#design-samples  .design-sample  h3 {font-size: 1em;}

#product-samples .product-sample img,
#design-samples  .design-sample  img { position: absolute; bottom: 0;}

#transaction-result{ margin: 3em auto; width: 40em; text-align: center;}


/* Tooltips */

#tooltip {background-color:#ffffcc; border:1px solid #111111; padding: 1em; position:absolute; z-index:3000; width: 160px;}
#tooltip .body p {font-size: 11px;}
#tooltip h3, #tooltip div {	margin:0;}
#tooltip img {margin: 0 auto; display:block;}
#tooltip.sample {width: auto;}
#tooltip.sample p {max-width: 220px;}

.tooltip-content {display: none;}
