



/* stage 1 */

#domesticConfirmBox {
    margin:                         30px 0 40px 0;
}

.order-oil-large {
    background:                     url('../images/orderoil-bg.jpg') no-repeat;
    height:                         388px;
    margin:                         20px 0;
    width:                          980px;
}

.order-oil-large .form {
    float:                          left;
    height:                         345px;
    margin:                         0 10px;
    position:                       relative;
    width:                          301px;
}

.order-oil-large .form img.step-number {
    left:                           -20px;
    position:                       absolute;
    top:                            -15px;
}

.order-oil-large .form .title {
    background:                     url('../images/orderoil-title-bg.jpg') no-repeat;
    height:                         62px;
    margin:                         0;
    width:                          270px;
}

.order-oil-large .form .title span {
    display:                        none;
}

.order-oil-large .form p {
    color:                          #FFF;
    padding:                        10px 0 10px 0;
}

.order-oil-large .form p img.help {
	float:							right;
	margin:							0 15px 0 0;
}

.order-oil-large .form a.commercial-quotes {
    background:                     url('../images/illustration-drop.png') no-repeat;
    color:                          #FFF;
    display:                        block;
    font:                           15.37px 'Myriad Pro', Trebuchet MS, Arial, Sans-serif;
    height:                         36px;
    margin:                         10px 0 0 0;
    padding:                        9px 0 0 50px;
    text-decoration:                none;
    text-transform:                 uppercase;
}

.order-oil-large .form a.commercial-quotes:hover {
    text-decoration:                underline;
}

.order-oil-large .form .form-item {
    background:                     url('../images/quotepanel-formitem-bg.png') no-repeat;
    height:                         47px;
    margin:                         0 0 3px;
    width:                          301px;
}

.order-oil-large .form .form-item label {
    color:                          #303030;
    float:                          left;
    font:                           18px/47px 'Myriad Pro', Trebuchet MS, Arial, Sans-serif;
    margin:                         0 0 0 10px;
    width:                          83px;
}

.order-oil-large .form label.fieldNameError
,.order-oil-large .form span.fieldNameError
{
    color:                          white !important;
    font-weight:                    bold !important;
}

.order-oil-large .form .form-item input.input-text {
    border:                         1px solid #707070;
    height:                         19px;
    font-size:                      15px;
    margin:                         8px 10px;
    width:                          175px;
}

.order-oil-large .form .form-item input.input-text.volume {
    width:                          55px;
}

.order-oil-large .form .form-item input.input-text.maxPrice {
    width:                          55px;
}

.order-oil-large .form .form-item span.or {
    color:                          #303030;
    font:                           18px/18px 'Myriad Pro', Trebuchet MS, Arial, Sans-serif;
}

.order-oil-large .form .form-item select {
    border:                         1px solid #707070;
    margin:                         3px 10px;
    width:                          185px;
}

.order-oil-large .form .form-item select.lower {
    margin:                         0 10px;
}

.order-oil-large .form .form-item-minor {
    margin:                         0 0 3px;
    width:                          301px;
}

.order-oil-large .form .form-item-minor span {
    color:                          #303030;
    font:                           14px/14px 'Myriad Pro', Trebuchet MS, Arial, Sans-serif;
	float:							left;
    width:                          90px;
	margin:							0 0 0 10px;
}

.order-oil-large .form .form-item-minor label {
    color:                          #303030;
    font:                           14px/14px 'Myriad Pro', Trebuchet MS, Arial, Sans-serif;
	margin:							0 10px 0 0;
}

.order-oil-large .form .form-item-minor input {
    margin:                         0;
    padding:                        0;
}

.order-oil-large .form .input-submit {
    bottom:                         -43px;
    position:                       absolute;
    right:                          -33px;
    z-index:                        12;
}

.order-oil-large .form .privacy {
    float:							left;
    margin:							10px 0 0 0;
    right:                          -33px;
}

.order-oil-large .form .privacy a {
	color:							#fff;
	text-decoration:				none;
}

.order-oil-large .form .privacy a:hover {
	color:							#fff;
	text-decoration:				underline;
}




.order-oil-large .steps {
    float:                          left;
    width:                          639px;
}

.order-oil-large .steps .step {
    height:                         92px;
    margin:                         0 0 10px;
    padding:                        25px 0 0 101px;
    position:                       relative;
}

.order-oil-large .steps .step img.step-number {
    left:                           -7px;
    position:                       absolute;
    top:                            15px;
}

.order-oil-large .steps .step .title {
    float:                          left;
    height:                         62px;
    width:                          156px;
}

.order-oil-large .steps .step .title span {
    display:                        none;
}

.order-oil-large .steps .step .desc {
    color:                          #FFF;
    float:                          left;
    font-size:                      12px;
    padding:                        15px 0 0 38px;
}

.order-oil-large .steps .step img.illustration {
    position:                       absolute;
    right:                          5px;
    top:                            -15px;
}

.order-oil-large .steps .step.step-one {
    margin-top:                     9px;
}

.order-oil-large .steps .step.step-one .title {
    background:                     url('../images/orderoil-stepone-title.gif') no-repeat;
}

.order-oil-large .steps .step.step-two .title {
    background:                     url('../images/orderoil-steptwo-title.gif') no-repeat;
}

.order-oil-large .steps .step.step-two img.step-number {
    left:                           -10px;
    top:                            5px;
}

.order-oil-large .steps .step.step-two img.illustration {
    right:                          -40px;
    top:                            -33px;
}

.order-oil-large .steps .step.step-three .title {
    background:                     url('../images/orderoil-stepthree-title.gif') no-repeat;
    margin-top:                     2px;
    width:                          171px;
}

.order-oil-large .steps .step.step-three .desc {
    padding:                        10px 0 0 23px;
}

.order-oil-large .steps .step.step-three img.illustration {
    right:                          -45px;
    top:                            18px;
}







/* stage 2 */

/*
.quoteLeftCol {
    float:                          left;
    width:                          660px;
}

.quoteRightCol {
    float:                          left;
    margin:                         0 -4px 0 20px;
    width:                          304px;
}
*/

.quoteLeftCol {
    float:                          left;
    margin:                         0 16px 0 0;
    width:                          304px;
}

.quoteRightCol {
    float:                          left;
    width:                          660px;
}

.box660 {
	margin:							0 0 10px 0;
    width:                          660px;
}

.box660 .top {
    background:                     url('../images/blueBox660Top.gif') no-repeat;
    width:                          660px;
    height:                         6px;
}

.box660 .bottom {
    background:                     url('../images/blueBox660Bottom.gif') no-repeat;
    width:                          660px;
    height:                         6px;
}

.box660 .content {
    background:                     #5a91c8;
	padding:						5px 10px;
}

.box660 .content h2 {
	border:							none;
	color:							#fff;
	margin:							0 0 0 0;
}

.box660 .content p {
	color:							#fff;
}

.box660 .content p.strong {
	font-size:						1.3em;
	margin:							0;
}

.box660 .content img.main {
	float:							right;
	margin:							-80px 0 0 0;
}

.quoteHeader {
    /*background:                     url('../images/orangeBar660x39.gif') no-repeat;
    width:                          660px;*/
    background:                     url('../images/orangeBar980x39.gif') no-repeat;
    height:                         39px;
}

.quoteHeader h3 {
	color:							#fff;
	margin:							0;
	padding:						0 0 0 10px;
    line-height:                    39px;
}

.quoteHeader h3 span {
	font-size:						11px;
}

.quoteHeader h3 a {
	color:							#fff;
	text-decoration:				none;
}

.quoteHeader h3 a:hover {
	color:							#fff;
	text-decoration:				underline;
}






#quoteRowsWrapper {
	margin:							0 6px 0 6px;
	font-size:						1.2em;
	color:							#333;
}

#quoteRowsWrapper img.rosette {
	float:							right;
	margin:							0 10px 0 5px;
}

#quoteRowsWrapper h4 {
	color:							#000;
	font-weight:					normal;
	font-size:						1.5em;
	padding:						0;
	margin:							0;
	border:							none;
}

#quoteRowsWrapper h4 span {
	font-size:						0.8em;
}

#quoteRowsWrapper h4.emergency {
	color:							#f30;
}

#quoteRowsWrapper .quoteRowHeader {
    background:                     #333;
	color:							#fff;
	text-align:						left;
	font-weight:					normal;
	padding:						5px 10px;
}

#quoteRowsWrapper .groupSavings {
    background:                     #5a91c8;
	border-bottom:					1px solid white;
	color:							#fff;
	padding:						5px 10px;
}

#quoteRowsWrapper .row1 {
	background:                     #c1d5ea;
	border-bottom:					1px solid white;
	padding:						5px 10px;
}

#quoteRowsWrapper .row2 {
	background:                     #d7e4f1;
	border-bottom:					1px solid white;
	padding:						5px 10px;
}

#quoteRowsWrapper .express {
	background:                     #eee;
	border-bottom:					1px solid white;
	padding:						5px 10px;
}

#quoteRowsWrapper .hidden {
	display:						none;
}

#quoteRowsWrapper .groupSavings h4 {
	color:							#fff;
}

#quoteRowsWrapper .service {
	width:							190px;
	float:							left;
}

#quoteRowsWrapper .date {
	width:							205px;
	float:							left;
	padding-top:					0;
}

#quoteRowsWrapper .info {
	width:							90px;
	float:							left;
	padding-top:					15px;
}

#quoteRowsWrapper .price {
	width:							115px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .vat {
	width:							125px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .total {
	width:							100px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .volume {
	width:							65px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .price2 {
	width:							85px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .vat2 {
	width:							115px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .total2 {
	width:							75px;
	float:							left;
	line-height:					48px;
}

#quoteRowsWrapper .order {
	width:							120px;
	float:							left;
	padding-top:					10px;
}

#quoteRowsWrapper .quoteRowHeader div {
	padding-top:					0;
	line-height:					110%;
}

.quoteFooter {
    /*background:                     url('../images/orangeBar660x39.gif') no-repeat;
    width:                          660px;*/
    background:                     url('../images/orangeBar980x39.gif') no-repeat;
    height:                         39px;
	padding:						10px 0 0 10px;
}

#quoteRowToggle {
	display: inline-block;
}






#quoteTable {
	margin:							0 6px 0 6px;
	border-collapse:				collapse;
	table-layout:					auto;
	/*width:							648px;*/
	width:							968px;
}

#quoteTable th {
    background:                     #333;
	color:							#fff;
	text-align:						left;
	font-weight:					normal;
}

#quoteTable td {
	color:							#333;
	font-weight:					normal;
}

#quoteTable tr.collapsed {
    visibility:						collapse;
}

#quoteTable tr.row1 {
    /*background:                     #eee;*/
	background:                     #c1d5ea;
	border-bottom:					1px solid white;
}

#quoteTable tr.row2 {
   /* background:                     #f5f5f5;*/
	background:                     #d7e4f1;
	border-bottom:					1px solid white;
}

#quoteTable tr.row3 {
    background:                     #ddd;
	border-bottom:					1px solid white;
}

#quoteTable tr.groupSavings {
    background:                     #5a91c8;
	border-bottom:					1px solid white;
}

#quoteTable tr.express {
    background:                     #eee;
	border-bottom:					1px solid white;
}

#quoteTable tr.groupSavings td {
	color:							#fff;
}

#quoteTable th, #quoteTable td {
	padding:						5px 10px;
	font-size:						1.2em;
	white-space:					nowrap;
}

#quoteTable h4 {
	color:							#000;
	font-weight:					normal;
	font-size:						1.5em;
	padding:						0;
	margin:							0;
	border:							none;
}

#quoteTable h4 span {
	font-size:						0.8em;
}

#quoteTable h4 span a {
	color:							#000;
	text-decoration:				underline;
}

#quoteTable h4 span a:hover {
	color:							#000;
	text-decoration:				none;
	cursor: pointer;
}

#quoteTable tr.groupSavings td h4 {
	color:							#fff;
}

#quoteTable img.tanker {
	/*float:							left;
	margin:							0 5px 0 0;*/
}





.order-buttons {
    margin:                         10px 0;
}

.order-buttons input {
    margin-right:                   5px;
}




/*
table.quoteTable {
    border:                         1px solid #FFF;
    border-collapse:                collapse;
}

table.quoteTable th {
    background:                     #dc5508;
    border:                         1px solid #FFF;
    color:                          #FFF;
    font:                           17px Trebuchet MS, Arial, Sans-serif;
    padding:                        5px 10px;
    text-align:                     left;
}

table.quoteTable tr {
    background:                     #f1f1f1;
}

table.quoteTable tr.row1 {
    background:                     #e8e7e7;
}

table.quoteTable td {
    border:                         1px solid #FFF;
    padding:                        5px 10px;    
}

table.quoteTable td span {
    color:							#dc5508;
    font-weight:					bold;    
    font-size:						17px;    
}
*/









/* Stage 2a cross-selling */

.sub-panel.store-item {
    float:                          left;
    margin:                         0 5px 8px 0;
    position:                       relative;
    width:                          325px;
}

.sub-panel.store-item .content-left-bg {
    height:                         185px;
}


.sub-panel.store-item img.product-thumb {
    border:                         2px solid #e4e4e4;
    float:                          left;
    margin:                         0 10px 0 0;
}

.sub-panel.store-item .product-details {
    float:                          left;
    width:                          209px;
}

.sub-panel.store-item img.special {
    float:                          right;
    margin:                         0 0 5px 5px;
}

.sub-panel.store-item h3 {
    /*float:                          left;*/
    margin:                         0 0 3px 0;
}

.sub-panel.store-item h4 {
	color:							#f90;
	font-size:						1.5em;
    margin:                         0 0 3px 0;
}

.sub-panel.store-item p {
    margin:                         0 0 5px 0;
	padding: 0;
}

.sub-panel.store-item ul {
    margin:                         0 0 0 15px;
	padding:						0;
}

.sub-panel.store-item .buttons {
    bottom:                         10px;
    position:                       absolute;
    right:                          10px;
}

.sub-panel.store-item .buttons a {
    margin-bottom:                  0;
}

.sub-panel.store-item p {
    clear:                          both;
}










/* Your BoilerJuice Order (Order Process) */

form.order-process-form label {
    clear:                          both;
    color:                          #fa8a11;
    float:                          left;
    margin:                         10px 0 0;
    padding:                        5px 0 0;
    width:                          140px;
}

form.order-process-form label.existing {
    float:                          none;
    width:                          auto;
}

form.order-process-form .existing-radio-list {
    height:                         20px;
    margin:                         10px 0;
}

form.order-process-form .existing-radio-list input {
    float:                          left;
}

form.order-process-form .existing-radio-list label {
    clear:                          none;
    color:                          #767676;
    font:                           11px Tahoma, Arial, Sans-serif;
    margin:                         0;
    padding:                        4px 0 0 10px;  
    width:                          40px;  
}

form.order-process-form select {
    float:                          left;
    margin:                         10px 0 0;
    width:                          176px;
}

form.order-process-form input.input-text {
    float:                          left;
    margin:                         10px 0 0;
    width:                          164px;
}

form.order-process-form textarea {
    float:                          left;
    margin:                         10px 0 0;
    width:                          164px;
}

form.order-process-form input.input-submit {
    float:                          right;
    margin:                         20px 0 10px 0;
}

form.order-process-form a.back, form.order-process-form .right-buttons {
    float:                          left;
    margin:                         20px 0 10px 0;
}

form.order-process-form .right-buttons a {
    float:                          left;
    margin:                         0 5px 0 0;
}

form.order-process-form .detail {
    float:                          left;
    margin:                         10px 0 0;
    padding-top:                    5px;
    width:                          174px;
}

form.order-process-form .detail.wide {
    width:                          265px;
}

form.order-process-form .detail span.value {
    color:                          #fa8a11;
    font-size:                      12px;
}

form.order-process-form .detail small a {
    text-decoration:                none;
}

form.order-process-form .detail.margin-left {
    margin:                         0 0 0 140px;
}

form.order-process-form .detail input.input-text {
    float:                          none;
    margin:                         -5px 0 0 0;
    width:                          145px;
}

form.order-process-form .tooltip {
    width:                          180px;
}

form.order-process-form .check-list {
    height:                         20px;
    margin:                         10px 0;
}

form.order-process-form .check-list input {
    float:                          left;
    margin-top:                     8px;
}

form.order-process-form .check-list label {
    clear:                          none;
    color:                          #767676;
    font:                           11px Tahoma, Arial, Sans-serif;
    margin:                         0;
    padding:                        8px 0 0 10px;  
    width:                          225px;
}

form.order-process-form .actions {
    float:                          left;
    width:                          200px;
}

form.order-process-form .actions a {
    display:                        inline-block;
    margin:                         10px 5px 0 0;
    padding-top:                    5px;
}

form.order-process-form h3 {
    margin-bottom:                  0;
}

form.order-process-form hr {
    height:                         5px;
}

form.order-process-form p.label {
    font-size:                      12px;
}

form.order-process-form p.label span {
    color:                          #fa8a11;
}

.note {
    background:                     #e4e4e4;
    margin:                         20px 0 10px;
    padding:                        10px;
}

.note b {
    color:                          #3C3C3C;
}










/* Confirmation
-------------------------------------------------------------------------------------- */

table.confirmTable {
    border:                         1px solid #FFF;
    border-collapse:                collapse;
	width:							600px;
	margin:							0 0 20px 0;
}

table.confirmTable th {
    background:                     #dc5508;
    border:                         1px solid #FFF;
    color:                          #FFF;
    font:                           17px Trebuchet MS, Arial, Sans-serif;
    padding:                        5px 10px;
    text-align:                     left;
}

table.confirmTable tr {
    background:                     #f5f5f5;
}

table.confirmTable tr.row1 {
    background:                     #e8e7e7;
}

table.confirmTable td {
    border:                         1px solid #FFF;
    padding:                        5px 10px;    
}

table.confirmTable td span {
    color:							#dc5508;
    font-weight:					bold;    
    font-size:						17px;    
}




#cartCheckoutTable {
	border-collapse: separate;
	border-spacing: 1px;
	margin:							0 0 20px 0;
	background: #fff;
}

#cartCheckoutTable th, #cartCheckoutTable td {
	padding: 5px 10px;
	white-space: nowrap;
}

#cartCheckoutTable th {
    font-size:                      13px;
	background: #487dba;
	color: white;
}

#cartCheckoutTable td {
}

#cartCheckoutTable tr.row1 {
	background: #f1f1f1;
}

#cartCheckoutTable tr.row2 {
	background: #e7e7e7;
}










/* Delivery vehicle Sub-Panel */

.sub-panel.vehicle {
    position:                       relative;
    margin:                         30px 0 7px 0;
}

.sub-panel.vehicle img.illustration {
    position:                       absolute;
	/*
    right:                          -20px;
    top:                            -30px;
	*/
    right:                          10px;
    top:                            -30px;
}

.sub-panel.vehicle hr {
    background:                     #f9a147;
    border-color:                   #f9a147;
    clear:                          both;
}

.sub-panel.vehicle .content a {
	color:							white;
}

.sub-panel.vehicle .content h4 {
	color:							#fff;
	font-weight:					normal;
	font-size:						1.5em;
	padding:						0;
	margin:							0;
	border:							none;
}

.sub-panel.vehicle .content h4 span {
	font-size:						0.8em;
}

.sub-panel.vehicle table {
	border-collapse: collapse;
	width: 100%;
	margin: 10px 0;
}

.sub-panel.vehicle .content td {
	padding: 5px 5px 5px 0;
	border-bottom: 1px solid white;
}











/* Boiler Servicing Sub-Panel */

.sub-panel.boiler-service {
    position:                       relative;
    margin:                         30px 0 7px 0;
}

.sub-panel.boiler-service img.illustration {
    position:                       absolute;
    right:                          -10px;
    top:                            -20px;
}

.sub-panel.boiler-service input {
    float:                          left;
    margin:                         8px 10px 10px 5px;
}

.sub-panel.boiler-service label {
    color:                          #FFF;
    float:                          left;
    font-size:                      11px;
    padding:                        7px 0 0 0;
}

.sub-panel.boiler-service label.heading {
    float:                          none;
    font-size:                      12px;
    width:                          auto;
}

.sub-panel.boiler-service h3 {
    /*font:                           11px Tahoma, Arial, Sans-serif;
    font-weight:                    normal;
    margin:                         0;*/
    color:                          #fff;
}

.sub-panel.boiler-service hr {
    background:                     #f9a147;
    border-color:                   #f9a147;
    clear:                          both;
}

.sub-panel.boiler-service .moreinfo {
    float:                          right;
    margin:                         0 0 5px;
}

.sub-panel.boiler-service .content img.icon {
    float:                          left;
    margin:                         4px 5px 0 0;
}

.sub-panel.boiler-service .content a {
	color:							white;
}

.sub-panel.boiler-service .content p span {
    font-size:                      14px;
}

.sub-panel.boiler-service .content p span strong {
    font-size:                      18px;
	color:							black;
}







.content-right .sub-panel.store-item {
    float:                          none;
    height:                         auto;
    width:                          auto;
}

.content-right .sub-panel.store-item h2 {
    border-bottom:                  1px solid #E4E4E4;
    font-size:                      18px;
}

.content-right .sub-panel.store-item h3 {
    font-size:                      14px;
}

.content-right .sub-panel.store-item .product-details {
    width:                          180px;
}

.content-right .sub-panel.store-item span.price {
    margin:                         0;
}







.sub-panel.order-process {
    position:                       relative;
}

.sub-panel.order-process .inner-content {
    height:                         172px;
    width:                          445px;
}

.sub-panel.order-process .freequote-panel {
    position:                       absolute;
    right:                          10px;
    top:                            10px;
}



















/* Process Tabs */

ul.tab-menu {
    border-bottom:                  4px solid #ea6a12;
    height:                         38px;
    list-style-type:                none;
    margin:                         0 0 10px;
    padding:                        0;
}

ul.tab-menu li {
    display:                        inline;
    float:                          left;
    margin:                         0 9px 0 0;
    padding:                        0;
}

a.process-tab {
    background:                     url('../images/processTabBg.gif') no-repeat right top;
    color:                          #3d3d3d;
    display:                        inline-block;
    font:                           17px Trebuchet MS, Arial, Sans-serif;
    height:                         22px;
    padding:                        8px 10px 8px 0;
    position:                       relative;
    text-decoration:                none;
}

a.process-tab:hover, a.process-tab.current {
    background:                     url('../images/processTabBg.gif') no-repeat right -38px;
    color:                          #FFF;    
}

a.process-tab.disabled:hover {
    background:                     url('../images/processTabBg.gif') no-repeat right top;
    color:                          #3d3d3d;
	/*cursor:							default;*/
}

a.process-tab .number {
    display:                        block;
    float:                          left;
    height:                         42px;
    margin:                         -12px 0 0 0;
    width:                          47px;
}

a.process-tab .number.one, a.process-tab.disabled:hover .number.one {
    background:                     url('../images/processTabOne.gif') no-repeat;
}

a.process-tab:hover .number.one, a.process-tab.current .number.one {
    background:                     url('../images/processTabOne.gif') no-repeat 0 -42px;
}

a.process-tab .number.two, a.process-tab.disabled:hover .number.two {
    background:                     url('../images/processTabTwo.gif') no-repeat;
}

a.process-tab:hover .number.two, a.process-tab.current .number.two {
    background:                     url('../images/processTabTwo.gif') no-repeat 0 -42px;
}

a.process-tab .number.three, a.process-tab.disabled:hover .number.three {
    background:                     url('../images/processTabThree.gif') no-repeat;
}

a.process-tab:hover .number.three, a.process-tab.current .number.three {
    background:                     url('../images/processTabThree.gif') no-repeat 0 -42px;
}

a.process-tab .number.four, a.process-tab.disabled:hover .number.four {
    background:                     url('../images/processTabFour.gif') no-repeat;
}

a.process-tab:hover .number.four, a.process-tab.current .number.four {
    background:                     url('../images/processTabFour.gif') no-repeat 0 -42px;
}

a.process-tab .number.five, a.process-tab.disabled:hover .number.five {
    background:                     url('../images/processTabFive.gif') no-repeat;
}

a.process-tab:hover .number.five, a.process-tab.current .number.five {
    background:                     url('../images/processTabFive.gif') no-repeat 0 -42px;
}






