/*
 * Stylesheet for additional elements for mediacenter
 *
 * (included after main styles; can be used to add to or override them)
 * TODO: Migrate back once it is clear which elements can be reused multiple times.
 */

@charset "UTF-8";
#head {
    margin-bottom:0px;
}

ul.small_bullets {
}

ul.small_bullets li {
    font-weight:normal !important;
    font-size:13px;
    margin-bottom:10px;
}

#content.landing {
    width: 940px;
    padding-left: 60px;
    background: url("../images/smartdrive/paymailer_product_background_main.png") no-repeat #fff;
    background-position: 0px 0px;
}

.landing #content-headline {
    margin-bottom: 18px;

}


#content.landing p#content-subtitle {
    width: 440px;
}


.landing_topmail .box {
    height: 185px;
}

.landing .box .text{
    float:left;
}

.landing .box h2 {
    margin-bottom: 0px;

}

.landing #box-left {
       background: url("../images/mediacenter/product_topmail_box.png") no-repeat;

}

.landing #box-left p {
 padding-right:30px;
 width:270px;
}

.landing #box-right {
    background: url("../images/mediacenter/product_topmail_box.png") no-repeat;

}


.landing #box-right p {
 padding-right:10px;
 width:270px;
}

.landing #box-right h2{

}

.landing #box-left h2 {
	margin-left:127px;
}

 .landing #box-right h2 {
    margin-left:115px;
}

.landing-checkout{
    margin-left:32px;

}


#content.landing{
    background: #fff;
    width:1001px;
    padding:0px;
}

/*Freemailer specific boxes*/
.landing_promail {
    padding:30px;
}

/*Checkout */

/*Checkout*/
.cash form button#submitnow {
    xmargin-left: 0px;
    xwidth: 383px !important;
}

.cash form fieldset#fs-test label{
    width:760px;
}

/*Topmail specific*/

.landing_topmail {
    margin:0px;
    background: url("../images/mediacenter/product_topmailer_bkg.png") no-repeat 0 0;
    padding:30px;
    padding-left:60px;
    height:670px;
}



/*TODO: We should migrate this into styles.css*/
.landing .box img{
    margin-top:3px;
}

.landing .box .box_header{
    margin-top:17px;
    margin-bottom:17px;
}

div#promail_left, div#freemail_left{
    width: 331px !important;
    background: url("../images/mediacenter/product_promail_box_left_no_img.png") no-repeat;
    margin-top:4px;
    height: 571px;
    padding-left:15px;
    padding-right:15px;
    padding-top:15px;
}

div#promail_left img,div#freemail_left img{
    float:none;
}

div#promail_right,div#freemail_right {
    width:512px !important;
    margin-left:10px;
    margin-top:4px;
    padding-left:30px;
    padding-right:20px;
    padding-top:15px;
    background: url("../images/mediacenter/product_promail_box_right.png") no-repeat;
    height: 571px;
}

#promail_right .box_header,#freemail_right .box_header{
    display:block;
    width:450px;
}

#promail_right .box_header_image img{
	float:none;
}

#promail_right ul.small_bullets li {
	margin-bottom:30px;
}

#promail_right a {
	display:block;
	margin-top:25px;
}

div#freemail_left{
    padding-top: 50px;
    background: url("../images/mediacenter/product_freemail_box_left.png") no-repeat;
}


/*TODO: Replace with inline image - this isn't pretty*/
div#freemail_left .box_footer{
    position:relative;
    top:190px;
}

/*TODO: God damn special cases all the time. Needs to be replaced as well*/
div#freemail_left ul.small_bullets li,div#freemail_right ul.small_bullets li {
    margin-bottom:0px;
}




div#freemail_right {
    padding-top: 50px;
    background: url("../images/mediacenter/product_freemail_box_right_txt.png") no-repeat;
}

div#freemail_right .box_footer{
    position:relative;
    top:233px;
}

div#freemail_right a{
       float:right;
       display:block;
       width:180px;
       height:40px;
}

div#freemail_right .box_ps{
    font-size:10px;
    display:block;
    float:left;
    width: 320px;
}

.product_promail_table {
    width: 952px;
    height: 212px;
    background: url("../images/mediacenter/product_promail_table.png") no-repeat;
}

.product_promail_table td.head {font-weight:bold;}

.product_promail_table td{
    padding-left:10px;
    width:187px;
    height:48px;
}


/*Welcome*/
.welcome .btn {
    margin : 25px 0px 20px 0px;
    width : 800px;
}

.welcome .btn div {
    float : left;
    height : 60px;
}

.welcome .box4 {
    width : 893px;
    height : 256px;
    padding:30px;
    background: url("../images/mediacenter/sale_suc_box_bottom.png") no-repeat;
}

.welcome .box4 .big_bullets{
    width: 500px;
    margin-top:10px;
    font-weight:normal !important;
}

.welcome #mediacenter_welcome_promailer_box4 .text{
    width:500px;
    display:block;
    margin-top:50px;
}

.welcome #mediacenter_welcome_promailer_box4 #content-headline{
    float:none
}

.welcome #mediacenter_welcome_promailer_box4 .landing-checkout{
    float:right;
    display:block;
    width:200px;
    margin-right:100px;
    margin-top:200px;
}

.welcome .box4 .text{
    padding:16px;
}

.welcome .box4 #content-headline{
    margin:0px 0px 5px 0px;
}

.welcome .box4 img{
    margin-top: 16px;
}

.welcome .box4#mediacenter_welcome_freemailer_box4 {
    background: url("../images/mediacenter/sale_suc_freemail_box_bottom.png") no-repeat;
    height : 443px;
}

.welcome .box4#mediacenter_welcome_freemailer_box4 .content-subtext{
    margin-top:280px;
}


.welcome .box4#mediacenter_welcome_freemailer_box4 ul{
    text-align:left;
    width:350px;
    margin-bottom:0px;
}

.welcome .box4#mediacenter_welcome_freemailer_box4 a{
    display:block;
    width:327px;
margin-right:20px;
}


#smartdrive_welcome_freemailer_box4_img img {
    margin: 16px;
}


/*Product detail*/

#content.product_detail{
    background: url("../images/mediacenter/product_bkg.png") no-repeat 0px 34px #fff;

    /*Again: who does this? Somebody had the idea of adding the floated elements outside of the containing div,
    but not as floated elements, but rather as relatively positioned elements. So whenever we add something new now, or remove the old, this will be broken. Why?
    Also: Look at the messy width the surrounding content now has...
    */
    margin:0px;
    width: 1001px;
}

#content.product_detail h1 {
    font-size : 18px !important;
    margin-bottom : 20px;
    color:#000;
}


#content.product_detail .box_desc h2 {
    font-size : 13px;
    margin-bottom: 15px;
    color:#000;
}

#content.product_detail .box_general {
    background: none;
    width: 775px;
}

#content.product_detail .box_detail{

}

/*box_info and box_desc together = 785px*/
#content.product_detail .box_general .box_info {
    margin-top : 0px;
    margin-right : 40px;
    width:327px;
}


#content.product_detail .box_general .box_info p  {
    font-size : 12px;
    line-height:18px;
}


#content.product_detail .box_general .box_desc {
    width: 380px;
    margin-top : 50px;
    margin-left:20px;
}

#content.product_detail .box_teaser {
    position : absolute;
    top : 40px;
    right : 0px;
    width: 150px;
    padding-right:20px;
    padding-top: 20px;
}

#content.product_detail .box_teaser .item{
}


#content.product_detail .box_detail #accordion .ui-accordion-content {
    background-color: #fff;
}


#content.product_detail .box_general ul li {
    width : 360px;
    line-height: 1.6em;
    margin-bottom : 10px;
}

/*This should be added to the styles.css*/
#content.product_detail .box_detail{
    margin-left:20px !important;
}


#content.product_detail .box_detail #accordion-button{
    display:block;
    right:0px;
    margin-top:20px;
    margin-left:400px;
    margin-bottom:20px;
}


#content.product_detail .box_detail h2 {
    margin-top : 25px;
    margin-bottom : 13px;
    font-size : 18px !important;
    color:#000;
}

#content.product_detail .box_general {
    margin-bottom : 40px;
}