@charset "UTF-8";

/**
 * <Monsters with an Attitude>
 *
 * Checkout
 *
 * @author 			Davy De Pauw <davy@marlon.be>
 * @copyright		Marlon bvba <http://www.marlon.be>
 * @date 			2008-09-03
 * @lastmodified	2008-09-03
 */

/* checkout process
---------------------------------------------------------- */

.page-checkout .indent h1, .page-account .indent h1 {
	position: absolute;
	top: 0;
	left: 378px; 
	font-size: 24px;
	line-height: 24px;
}

.page-account .indent h2
{
	position: absolute;
	top: -45px;
	left: 365px; 
	font-size: 20px;
	line-height: 24px;
}

.page-checkout .box a { text-decoration: underline; }

.col{
	position: relative;
	float: left;
	margin-right: 18px;
	padding-top: 42px;
	width: 342px;
}

.page-account .accountcol
{
	padding-top: 0px;
}

.col h2.sifr-4 {
	position: absolute;
	top: 0;
	left: 0;
}

.col .box h2.sifr-4 { position: static; }

/* checkout process -> steps
---------------------------------------------------------- */

#steps
{
	position: absolute;
	top: 198px;
	left: 0;
}

#steps ol {
	margin: 0;
	padding: 0;
	list-style: none;	
}

#steps ol li {
	float: left;
	width: 162px;
	margin-right: 18px;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: lowercase;
	line-height: 27px;
	color: #93d1d0;
	background: url(../img/bg_checkout.png) no-repeat 0 0;
}

#steps ol li.last {
	margin-right: 0;
}

#steps ol li.selected {
	color: #fff;
}

#steps ol li span {
	padding: 0 17px;
}

#steps ol li a {
	float: left;
	width: 162px;
	line-height: 27px;
	color: #93d1d0; 
}

#steps ol li#step-1 { background-position: 0 0; }
#steps ol li#step-2 { background-position: -180px 0; }
#steps ol li#step-3 { background-position: -360px 0; }
#steps ol li#step-4 { background-position: -540px 0; }
#steps ol li#step-5 { background-position: -720px 0; }
#steps ol li#step-6 { background-position: -900px 0; }


#steps ol li#step-1.selected { background-position: 0 -27px; }
#steps ol li#step-2.selected { background-position: -180px -27px; }
#steps ol li#step-3.selected { background-position: -360px -27px; }
#steps ol li#step-4.selected { background-position: -540px -27px; }
#steps ol li#step-5.selected { background-position: -720px -27px; }
#steps ol li#step-6.selected { background-position: -900px -27px; }

/* checkout process -> tabs
---------------------------------------------------------- */

#tabs, #accounttabs {
	list-style: none;
}

#tabs li, #accounttabs li {
	float: left;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 27px;
	background: #ecf7f4 url(../img/bg_corners.png) no-repeat -4416px 0;
}

#tabs li.ui-tabs-selected, #accounttabs li.ui-tabs-selected {
	background: #c1e5db url(../img/bg_corners.png) no-repeat -4416px 0;
}

#tabs li a, #accounttabs li a  {
	float: left;
	padding: 0 17px;
	line-height: 27px;
	background: url(../img/bg_corners.png) no-repeat 100% 0;	
}

.ui-tabs-hide { display: none; }

/* checkout process -> login
---------------------------------------------------------- */

.login {
	margin-right: 0;
}

.login .box {
	margin: 0 0 10px 0;
	background: #c1e5db url(../img/bg_corners.png) no-repeat -4416px 0 !important;
}

.login fieldset {
	padding: 18px !important;
	height: 108px;
	background: url(../img/bg_corners.png) no-repeat -3750px 100%;	
}

.login fieldset dl,
fieldset.login dl {
	margin: 0;
	padding: 0;
}

.login fieldset dl dt,
fieldset.login dl dt {
	position: absolute;
	margin-left: 190px;
	font-weight: bold;
	font-size: .9em;
	line-height: 24px;
	text-transform: lowercase;
	color: #754125;
}

.login fieldset dl dd,
fieldset.login dl dd {
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
}

.login fieldset dl dd input,
fieldset.login dl dd input {
	padding: 5px;
	width: 166px;
	border: 2px solid #fff;
}

.btn-secundary
{
	margin-left: 17px;
}

.ico-login
{
	position: absolute;
	top: 143px;
	right: 10px;
	width: 40px;
	height: 40px;
	text-indent: -999em;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -69px;
}

/* checkout process -> buttons
---------------------------------------------------------- */

.btn-register,
.btn-login,
.btn-password,
.btn-account-edit,
.btn-send,
.btn-save {
	position: relative;
	float: left;
	width: 96px;
	height: 27px;
	text-indent: -999em;
	overflow: hidden;
	cursor: pointer;
	border: none;
	font-size: 0px;
	line-height: 27px;
}

.btn-password
{
	width: 132px;	
}

.btn-order, .btn-pay
{
	float: left;
	width: 132px;
	height: 27px;
	text-indent: -999em;
	overflow: hidden;
	cursor: pointer;
	border: none;
	font-size: 0px;
	line-height: 27px;
}

.btn-pay
{
	width: 80px;	
}

.payment .btn-pay
{
	float: left;	
}

.btn-next {
	float: left;
	width: 83px;
	height: 27px;
	font-size: 0px;
	line-height: 0px;
	text-indent: -999em;
	cursor: pointer;
	border: none;
	background: none;
}

.btn-cancel
{
	float: right;
	font-weight: bold;
	line-height: 27px;
	text-decoration: underline !important;
	text-transform: lowercase;
}

.btn-print {
	float: left;
	margin: 10px 0 0 0;
	width: 96px;
	height: 27px;	
	text-indent: -999em;
	overflow: hidden;
	cursor: pointer;
	border: none;
}

/* checkout process -> help
---------------------------------------------------------- */

a.ico-help {
	float: left;
	width: 27px;
	height: 27px;
	line-height: 27px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -690px;
}

a.ico-help:hover {
	background-position: -27px -690px;
}

div.help {
	position: absolute;
	bottom: 0;
	right: -180px;
	width: 162px;
	padding: 0 0 0 18px !important;
	font-size: 11px;
	line-height: 1.4em;
	color: #754125;
	background: url(../img/bg_arrow_help.png) no-repeat 4px 50%;
}

.help.hidden {
	display: none;
}

div.help p {
	margin: 0 0 10px 0;
}

div.help .outer {
	position: relative;
	height: 163px;
	background: #ecf7f4 url(../img/bg_corners.png) no-repeat -4092px 0;	
}

div.help .inner {
	margin: 0;
	padding: 14px 18px 18px 18px !important;
	min-height: 131px;
	height: auto !important;
	height: 131px;
	background: url(../img/bg_corners.png) no-repeat -4254px 100% !important;	
}

/* checkout process -> error
---------------------------------------------------------- */

div.last {
	width: 180px;
	margin-right: 0;
}

div.error {
	padding: 0 0 0 18px;
	color: #fff;
	background: url(../img/bg_arrow_error.png) no-repeat 4px 18px;
}

div.delivery-error .error { padding-top: 26px; background-position: 4px 36px; }

#message-validation
{
		color:#ff0000;
		font-weight:bold;	
	}

div.error p {
	margin: 0;
	padding: 0;
	font-size: .95em;
	font-weight: bold;
	line-height: 1.25em;
}

div.error .outer {
	position: relative;
	height: 144px;
	background: #000 url(../img/bg_corners.png) no-repeat -4092px 0;	
}

div.error .inner {
	margin: 0;
	padding: 18px;
	min-height: 108px;
	height: auto !important;
	height: 108px;
	background: url(../img/bg_corners.png) no-repeat -4254px 100%;	
}

div.error .ico-warning {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 41px;
	height: 36px;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -141px;
}

/* checkout process -> error
---------------------------------------------------------- */

fieldset dl dt.error,
fieldset .error label {
	color: #e60404 !important;
}

fieldset div.error {
	padding: 0;
	background: none;	
}

fieldset dl dd.error input,
fieldset .error input  {
	border: 2px solid #e60404 !important;
}

fieldset dl dd.error .radiobutton input,
fieldset .error .radiobutton input{
	border: 0px !important;
}

/* checkout process -> common
---------------------------------------------------------- */

.page-checkout .box, .page-account .box {
	clear: left;
	background: #ECF7F3 url(../img/bg_corners.png) no-repeat -4416px 0;
}

.page-checkout .box .inner, .page-account .box .inner {
	padding: 17px 0;
	background: url(../img/bg_corners.png) no-repeat -3750px 100%;	
}

.box .row {
	position: relative;
	margin-bottom: 7px;
}

.box .row .col
{
	margin: 0;
	padding: 0;
	width: 144px;
}

.box fieldset {
	margin-bottom: 18px;
	padding: 0 17px;
}

.box fieldset input.field {
	margin: 0;
	padding: 5px;
	width: 166px;
	border: 2px solid #fff;
}

.box fieldset input.help {
	float: left;
	margin: 0 10px 0 0;	
}

.box fieldset select {
	margin-right: 5px;
	padding: 5px;
	font-size: .9em;
	font-weight: bold;
	color: #754125;
	border: none;
}

.box fieldset input.large { width: 294px; }
.box fieldset input.medium { width: 240px; }
.box fieldset input.small,
.box fieldset select.small { width: 96px; }

.box fieldset select.day { width: 54px; }
.box fieldset select.month { width: 100px; }
.box fieldset select.year { width: 72px; }

.box .row label {
	display: block;
	margin-bottom: 4px;
	font-size: .9em;
	font-weight: bold;
	color: #754125;
}

.box .row label.optional {
	color: #6a978a;
}

.box .actions {
	padding: 0 17px;
}

.box .actions .btn-secundary { line-height: 27px; }

.box .inner p.feedback
{
	padding: 0 15px;	
}

.box .inner p.feedback a
{
	text-decoration :underline
}

.col h3
{
	color:#754125;
	margin-bottom: 18px;
	padding: 0 17px;
}

.col h4
{
	color:#754125;
}

/* checkout process -> register
---------------------------------------------------------- */

.page-checkout .register, .page-account .register {
	margin-right: 0;
}

.page-checkout .register .box, .page-account .register .box {
	background-color: #C1E5DB;
}

.register fieldset.login {
	padding: 17px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.register .box .row .col {
	width: 100px;
	/* added on 2009/01/27 */
	width: auto;
	margin-right: 20px;
}

/* checkout process -> delivery
---------------------------------------------------------- */

.page-checkout .delivery {
	margin-right: 0;
}

.page-checkout .delivery .box, .page-account .register .box  {
	background-color: #C1E5DB;
	background-position: 100% 0 !important;
}

.page-checkout .delivery-error {}

.register fieldset.login {
	padding: 17px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.delivery .address {
	padding: 14px 17px;
	font-size: .95em;
	font-weight: bold;
	color: #754125;
	background: #fff;
}

/* checkout process -> delivery
---------------------------------------------------------- */

.explain .box .checkbox {
	/*margin: 2px 2px 0 0;*/
}

.explain .box label {
	display: block;
	margin: 0 0 10px 0;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: lowercase;
}

#message-counter {
	font-weight: bold;
	text-transform: lowercase;
	color: #93d1d1;
}


.explain .giftwrap
{
		float:left;
	}


/* checkout process -> payment
---------------------------------------------------------- */

.creditcard-type {
	float: left;
	display: inline !important;
	margin-right: 16px;
	height: 45px;
	line-height: 45px;
	vertical-align: middle;
}

.creditcard-type-last
{
	margin-right: 0px;	
}

.creditcard-type input { 
	float: left; 
	margin: 15px 2px 0 0;
	height: auto;
	line-height: 43px;
}

.creditcard-type img {
	float: left;
}

.payment h4
{
	margin-bottom: 4px;
	font-size: 1em;
}

.payment .row
{
	margin-bottom: 25px;	
}

.payment .row .col
{
	width: 75px;	
}

.payment fieldset
{
	padding-right: 5px;
	margin-bottom: 5px;	
}

/* checkout process -> explain
---------------------------------------------------------- */

.page-checkout .explain .inner, .page-account .explain .inner {
	padding: 17px;
	font-size: .9em;
	line-height: 1.45em;
	color: #754125;
}

.page-checkout .explain .inner p, .page-account .explain .inner p {
	margin: 0 0 27px 0;
}

.page-checkout .explain .inner .text p, .page-account .explain .inner .text p {
	margin-bottom: 0;
}

.page-checkout .explain ul, .page-account .explain ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-checkout .explain li, .page-account .explain li {
	position: relative;
	margin: 0 0 0 0;
	width: 307px;
}

.page-checkout .explain .text, .page-account .explain .text {
	position: relative;
	margin: 0 0 27px 0;
	padding-left: 72px;
	min-height: 54px;
	z-index: 10;
}

.page-checkout .explain .payment
{
	padding-left: 0px;	
}

.page-checkout .explain .corners, .page-account .explain .corners
{
	position: absolute;
	top: 0px;
	margin: 0 0 27px 0;
	padding-left: 72px;
	min-height: 54px;
	z-index: 10;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -744px;	
}

.page-checkout .col .text h3, .page-account .col .text h3 
{
	padding: 0;
	margin: 0;
}

.page-checkout .explain li h3, .page-account .explain li h3 {
	font-size: 1.1em;
	text-transform: lowercase;
}

.page-checkout .explain li p, .page-account .explain li p {
	margin: 0;
}


.page-checkout .explain li img, .page-account .explain li img {
	position: absolute;
	top: 0;
	left: 0;
} 

/* checkout process -> overview
---------------------------------------------------------- */

.section .overview {
	margin-bottom: 20px;
	background: url(../img/bg_overview.png) repeat-y 0 0;
} 

.overview .col {
	padding-top: 0;
}

.overview .col-narrow {
	float: left;
	padding: 0 10px 0 17px;
	width: 153px;
}

.overview .block {
	position: relative;
	color: #754125;
}

.overview .block h2 { 
	margin: 0 0 10px 0;
	font-size: 1em;
	height: 25px; 
}
.overview .block p,
.overview .block div { font-size: .9em; }

.overview .block .address { margin-bottom: 25px; }

.overview .last {
	padding-right: 0;
	width: 145px;
}

.overview .ico-edit {
	position: absolute;
	top: 0;
	right: 0;
	width: 27px;
	height: 27px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -717px;
}

.overview .ico-edit:hover { background-position: -27px -717px; }

.col-narrow .address {
	padding: 0;
}

.overview table tr td {
	font-size: .9em;
	line-height: 27px;
	height: auto;
	border-left: none;
	padding: 0 8px;
}

.overview table tr td a {
	font-weight: bold;
	color: #e60404;
}

.overview table tr td.product {
	width: 190px;
}

.overview table tr.odd td.product
{
	background: #ecf7f4 url(../img/bg_buttons.png) no-repeat 0 -641px;
}

.overview table td.product a
{
	width: 190px;
	height: 20px;
	overflow: hidden;
	display: block;	
	line-height: 20px;
}

.overview table tr td.amount {
	width: 35px;
	color: #754125;
}

.overview table tr td.price {
	width: 65px;
	font-weight: bold;
	text-align: right;
	color: #754125;
}

.overview table tr.odd td.price
{
	background: #ecf7f4 url(../img/bg_buttons.png) no-repeat 100% -641px;
}

.overview label {
	float: left;
	margin: 0 0 10px 0;
}

.overview label a {
	text-decoration: underline;
}

.section .overview .col .checkout-actions
{
	margin-top: 25px;
	font-size: 1em;
	clear: both;
	float: left;
	width: 100%;
}

.terms
{
	margin-top: 10px;
	float: left;
	width: 135px;
	clear: both;
}

/* checkout process -> number indicators
---------------------------------------------------------- */

.ico-number-1,
.ico-number-2,
.ico-number-3 {
	position: absolute;
	top: 22px;
	right: 0;
	width: 26px;
	height: 26px;
	text-indent: -999em;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 -636px;
}

.ico-number-2 { background-position: -27px -636px;}
.ico-number-3 { 
	top: 22px;
	background-position: 0 -663px; 
}

/* checkout process -> overview error
---------------------------------------------------------- */

.overview .error
{
	position: relative;

	float: left;
	width: 162px;
	height: 80px;
	line-height: 1.3em;
	background-position: 4px 10px;
	z-index: 200;
}

.overview .error p {
	margin: 0;
	padding: 0;
}

.section .overview .checkout-actions .error p
{
		font-size: 1.25em;
}

.overview .error .outer {
	height: 78px;
}

.overview label.error { float: none; color: #e60404; }
.overview label.error a { display: inline; color: #e60404; }

.overview .error .inner {
	min-height: 38px;
	height: auto !important;
	height: 35px;
	padding: 16px 50px 18px 18px;
}

/* checkout process -> total (updated 30/10/2008)
---------------------------------------------------------- */

dl.checkout-total {
	margin: 10px 0 0 0;
	padding: 0 0 0 0;
}

dl.checkout-total dt {
	position: absolute;
	float: left;
	padding: 0 16px;
	width: 188px;
	line-height: 36px !important;
	z-index: 10;
}

dl.checkout-total dd {
	margin: 0 0 3px 0;
	padding: 0 16px;
	width: 310px;
	text-align: right;
	line-height: 36px;
}

dl.checkout-total .subtotal {
	font-weight: bold;
	text-transform: lowercase;
	line-height: 27px !important;
	background: #c1e5db url(../img/bg_buttons.png) no-repeat scroll 0 -668px;
}

dl.checkout-total dd.subtotal {
	line-height: 20px;
	background: #c1e5db url(../img/bg_buttons.png) no-repeat scroll 100% -668px;	
}

dl.checkout-total .delivery { 
	line-height: 36px;
	color: #754125; 
}

dl.checkout-total dt.delivery { 
	font-weight: bold; 
	font-size: 1em;
	text-transform: lowercase;
}

dl.checkout-total dd.delivery { font-size: 1.2em; }


dl.checkout-total .discount {
	text-transform: lowercase;
	color: #fff;	
}

dl.checkout-total dt.discount {	font-weight: bold; }


dl.checkout-total dd.discount {
	height: 36px;
	font-size: 1.35em;
	background: url(../img/bg_buttons.png) no-repeat 0 -569px;
}

dl.checkout-total dt.total { line-height: 27px !important; }

.overview #sifr-total { margin-top: 5px; line-height: 20px !important; height: 27px !important; font-size: 1em; }

dl.checkout-total dd.total {
	position: relative;
	height: 36px;
	font-size: 20px;
	line-height: 36px;
	color: #fff;
	background: url(../img/bg_buttons.png) no-repeat 0 -605px;	
}

/* checkout process -> head
---------------------------------------------------------- */

.head {
}

.head .col,
.head-main .col {
	padding-top: 0;
}

.head-main .block {
	margin: 10px 0 20px 0;
}

.head .last {
	padding-top: 0;
	width: 162px;
}

.head-main { 
	float: left;
	width: 720px; 
	font-size: .9em;
	color: #754125;
	overflow: hidden;	
}

.head-main a { text-decoration: underline; }

.head-main h2 {
	font-size: 1.3em;
}

.section.head {
	margin-bottom: 12px;
	padding-bottom: 56px;
	border-bottom: 1px solid #c2e5db;
}

.head .last .outer {
	background: #ecf7f4 url(../img/bg_corners.png) no-repeat -4092px 0;
}

.head .last dl.order-details {
	padding: 14px 18px;
	font-size: .9em;
	color: #754125 !important;
	background: url(../img/bg_corners.png) no-repeat -4254px 100%;
}

.head .last dl dt {
	font-size: .95em;
	text-transform: lowercase;
}

.head .last dl .ordernum {
	margin: 5px 0 10px 0;
	font-size: 2em;
	font-weight: bold;
	color: #e60404;
}

.head .last dl .date,
.head .last dl .time {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
}

/* checkout process -> print view (added 30/10/2008)
---------------------------------------------------------- */

#print-detail-address {
	display: none;
}


dl.order-details dd span.when {
	display: none;
}