/*






















 include of configuration.ftl

 contentWidth=819 */

/*
----------------------------------------------
Adjustment for some globally styled elements
----------------------------------------------
*/

body .box-content {
	z-index: 0; /*sets a new stacking order (important for the visibility of the buttons and the #buttonLane)*/
}

#checkoutNavi .done .numberFrame {
    color: transparent;
    background: url(/ips-opdata/layout/ips01/widget/button/images/icons/step-tick.png) no-repeat center;
}

/*
-----------------------------------------------
Styling for the breadcrumbs-navigation 
-----------------------------------------------
*/

#checkoutNavi a {
    display: block;
    cursor: pointer;
}

#checkoutNavi .wrapper {
    padding: 10px 0px;
}

#checkoutNavi .box-default-subbar {
    background-color: transparent;
}

/*
-----------------------------------------------
Styling for the checkoutTeaser and its content
-----------------------------------------------
*/

.checkoutTeaser {
	float:left;
	width: 20%;
	padding: 5px;
	text-align: center;
}

.checkoutContainer h2{
text-align:left;

}
.row.checkoutContainer {
    margin: 0;
}

#contentDiv section{
    box-shadow: 0 0 5px #CCCCCC;
}

.checkoutTeaser img {
	margin-top: 20px;
}

.checkoutTeaser ul {
	width: 150px;
	margin: 20px auto;
}

.checkoutTeaser ul li {
	text-align: left;
	line-height: 1.5em;
	color: #71797F;
	padding: 5px 0px 7px 35px;
	background: url('/ips-opdata/layout/ips01/commons/images/icons/arrowOkGray.png') no-repeat 7px 4px;
}

/* Removes the teaser form the finish page. !important needed due to foundation */
#finish .checkoutTeaser {
    display: none !important;
}


/*
-----------------------------------------------
Content styling
-----------------------------------------------
*/

#cartHeading div {
    display: none;
}

#cartHeading .btn-link {
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    margin-left: 25px;
    color: #656875;
    text-transform: none;
}


#checkoutContent {
    float: left;
	min-height: 300px;
}

.box-content #backButton.btn-default {
	left: 15px;
	right: auto;
}

#paymentOverview{
    margin-top: 20px;
}

#buttonLane {
    padding: 15px;
	width: 100%;
	
	clear: both;
	position: relative;
	min-height: 62px;
}

#paymentCCBtn{
    padding-right: 30px;
    border: none;
}

#buttonLane .continue {
    float: right;
}

#buttonLane .back {
    width: 70px;
}

#buttonLane .back:hover {
    color: #fff;
}

#orderPrint li{
list-style:none;
}

/*
-----------------------------------------------
Styling for the accordion and its elements
-----------------------------------------------
*/

.paymentType,
.shippingInformation {
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 8px;
    cursor: pointer;
}

.paymentType h5,
.shippingInformation h5 {
    margin: 5px 0px;
    clear: both;
}

.selected {
    background-color: #fff;
    border: 1px solid #579722;
    cursor: default;
}

.paymentType img,
.shippingInformation img {
	display: inline-block;
	height: 48px;
	vertical-align: middle;
}

.paymentType h6,
.shippingInformation h6 {
	display: inline-block;
	height: 12px;
    padding: 0 10px 5px;
    vertical-align: middle;
    font-size: 14px;
}

.infoBtn {
    background: url('/ips-opdata/layout/ips01/commons/images/icons/info_32x32.png') no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    width: 32px;
    vertical-align: middle;
}

.formField {
    margin: 10px 8px;
    width: auto;
}

/*
-----------------------------------------------
Styling for the "payment selection" page
-----------------------------------------------
*/

.paymentView,
.shippingView {
    padding: 0px 0px 10px 74px;
}

.paymentView h4,
.shippingView h4 {
    margin: 10px 0px;
    font-weight: bold;
    font-size: 16px;
}

#ccVC {
	width: 117px;
}

.shopChangeBtn {
    margin-left: 93px;
}

#paymentOverview .shopChangeBtn {
    display: none;
}


/*
-----------------------------------------------
Styling for the "shipping selection" page
-----------------------------------------------
*/

/* shop selection */

#locationSearchForm {
    padding: 0px;
    width: 100%;
}

.formLine {
    position: relative; /*Ensures the correct positioning of the label.placeholder*/
}

#searchStr {
    padding: 5px;
    width: 50%;
}

#searchStrBtn,
#printOrderBtn {
    float: left;
}

#printOrderBtn:hover{
    color: #fff;
}

#locationList {
    position: relative;
    width: 515px;
}

#locationList * {
    cursor: pointer;
}

#locationList .location {
    width: 100%;
    height: auto;
    position: relative;
}

#locationList .location input {
    margin: 0px;
    height: 30px;
    margin-left: 5px;
    float: left;
}

#locationList .location input[type="radio"]:checked + label {
    background: #ddd;
}

#locationList .location label {
    text-align: left;
    line-height: 30px;
    vertical-align: top;
    padding-left: 30px;
}

/* address input form */
#deviatingAddressBtn {
    position: relative;
	left: 8px;
	bottom: auto;
}

#userAddressFormBox,
#deviatingAddressFormBox {
    margin-bottom: 10px;
}

.fieldGroup1,
.fieldGroup2 {
    float: left;
}

/*
-----------------------------------------------
Styling for the summary page
-----------------------------------------------
*/

#paymentContent,
#billingAddress ul,
#shippingAddress ul,
#shopAddress ul,
#termsOfUse {
    border: 1px solid #d2d2d2;
    padding: 10px;
    background-color: #f4f5f5;
    margin-bottom: 15px;
    line-height: 1.5em;
}

#paymentContent {
    padding: 5px;
}

#paymentContent img {
	display: inline-block;
	height: 48px;
	vertical-align: middle;
}

#termsSelection {
    width: 740px;
}

#termsContainer input {
	float: left;
}

#termsContainer label {
	text-align: left;
	width: 620px;
	line-height: 1.5em;
	position: relative;
	bottom: 0px;
}

.check{
    width: 100px;
}


#termsContainer label a {
	text-decoration: underline;
	font-weight: bold;
	color: #491;
}

/** checkout options style */

.checkoutOption {
	border: 1px solid #e9e9e9;
	padding: 0 0 0 54px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
}

.checkoutOption .checkoutOptionImg {
	float: left;
	margin-top: 3px;
}

.checkoutOption label {
	display: block;
	height: 40px;
    line-height: 40px;
	text-align: left;
	float: left;
	margin: 0px 10px;
}

.checkoutOption .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border: 1px solid #454545;
    margin: 21px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: inset 0 17px 6px -12px rgba(0,0,0,.2), inset 0 0 0 2px #fff;
}

.checkoutOption .checkbox.selected {
    background-color: #491;
}

.checkoutMainWidth {
    width: 80%;
    min-height: 307px;
}

.checkoutOption .optionimageEnhancementDescription {
    display: none;
}

#summary #checkoutContent{
    width: 100%;
    border: none;
}

.colPicture h1{
    display: inline;
    color: #000;
    font-size: 19px;
}

.colPicture h2{
    display: inline;
    color: #000;
    font-size: 19px;
}

.colPicture h3{
    display: inline;
    color: #000;
    font-size: 19px;
}

.colPicture h4{
    display: inline;
    color: #000;
    font-size: 19px;
}

#coupon {
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: inset 0px 0px 0px 5px #fff, inset 0px -60px 50px -30px rgb( 125 , 189 , 72 );
    background: #579722;
    margin-bottom: 20px;
}

#coupon p {
    padding: 5px 10px 5px 0;
    display: inline-block;
    width: auto;
}

#coupon label {
    display: block;
    float: left;
    width: 60%;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0px; 
}

#couponBtnContainer {
    width: 40%;
    float: left;
    margin: 10px 0px;
}

#inputCoupon {
    width: 30%;
    float: left;
}

#couponSubmit {
    float: right;
}

/*-----------
Coupon teaser 
----------*/

#couponTeaser {
    width: 760px;
    margin-bottom: 10px;
    height: 78px;
    border: 1px solid #e2e2e2;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: inset 0px 0px 0px 5px #fff, inset 0px -60px 50px -30px rgb( 125 , 189 , 72 );
    background: #579722;
}

#couponTeaser h3 {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0px;
}

#couponTeaser p {
    color: rgb( 0 , 49 , 0 );
    font-size: 16px;
    margin: 0px;
}