﻿BODY { margin: 0px; }

/*The width will be reduced automatically but fix the minimum width to prevent ugly layout */
.divMain
{
    min-width: 320px;
    height: auto;
    min-height: initial;
}

#divSubscribeLanguage
{
    margin-bottom: 10px;
}

#divLangSwitchInner
{
    right: 2px;
}

/*Remove marges around tabs*/
#divSubscribeSteps
{
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    margin-top: 0px;
}

/*Numbered blocks will be visible in mobile browsers only because it will be smaller and easier to click*/
.divTabNumber
{
    display: block;
    color: #FFFFFF;
    z-index: 20;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50% !important;
    margin-top: -14px;
    margin-left: -13px;
    border: 2px solid #FFFFFF;
    width: 22px;
    height: 22px;
    -webkit-border-radius: 12px;
	-moz-border-radius: 12px;
    border-radius: 12px;
    behavior: url(PIE.htc);
    text-align: center;
    font-weight: bold;
    z-index: 1003;
}

.divTabBullet, .divTabBulletSelected
{
    border-radius: 0px;
    left: 0px !important;
    width: 100% !important;
    border-left: 1px solid #dfdfe0 !important;
    right: auto !important;
    height: 40px;
    margin: 0px !important;
}

.divTabBulletSelectedContainer
{
    width: 100% !important;
    left: 0 !important;
    margin: 0px !important;
    height: 40px !important;
}

#divTabBasic .divTabBullet { border-left: 0px !important; }

.divTabBulletSmall { display: none !important; } 

.divTabText
{
    position: absolute;
    top: 12px;
    font-size: 12px;
    left: 40px !important;
    text-align: left !important;
    right: auto !important;
    color: #FFFFFF;
    margin-left: 0px !important;
    margin-right: auto !important;
    z-index: 1003;
}

/*Change the width logic of the tabs*/
.divTabMain25, .divTabMain25e { height: 40px; width: 19% !important; min-width: 60px; position: relative; }
.divTabMain50, .divTabMain50e { height: 40px; width: 28% !important; min-width: 60px; position: relative; }
.divTabMain100 { height: 40px; width: 25% !important; min-width: 60px; position: relative; }
.divSelectedCust { width: 43% !important; }
.divSelectedCust50 { width: 44% !important; }
.divSelectedCust100 { width: 75% !important; }

#divTabBasic .divTabText, #divTabCodes .divTabText, #divTabAccounts .divTabText, #divTabExtra .divTabText { display: none; }
#divTabCodes .divTabNumber, #divTabAccounts .divTabNumber, #divTabExtra .divTabNumber { color: #999999; border: 2px solid #999999; }

/*Set the location of the numbered block when selecting, hovering etc*/
.divSelectedCust .divTabNumber { left: 20px !important; }
.divSelectedCust .divTabText { display: block !important; }

.divSelected .divTabNumber, .divSelectedCust .divTabNumber
{
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}
    
.tabSelectedCust .divTabText, .tabSelectedCust2 .divTabText
{
    display: block !important;
    color: #FFFFFF !important;
    left: 40px;
}

/*Not required anymore*/
#divTabStrokes, #divTabStroke, #divTabStrokeSelected { display: none; }

/*Remove so much marges as possible*/
.divCaption
{
    font-size: 14px;
}

#divThanksMain .divCaptionInner
{
    padding: 0px;
    margin-left: 10px;
}

.divIntro, .divIntroInner
{
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    padding: 0px;
    padding-bottom: 10px;
    padding-top: 0px;
    border-bottom: 1px solid #D4D4D4;
}

#divLoginMain .divIntro, #divThanksMain .divIntro
{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

#divThanksMain .divIntroInner
{
    margin-top: 0px;
    padding-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.divPage
{
    padding-left: 10px;
    padding-right: 10px;
    min-height: initial;
    height: auto;
    padding-bottom: 5px;
    padding-top: 10px;
}

#divCodes, #divAccounts
{
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

#divCodes .divIntro, #divAccounts .divIntro, #divCodes .Validation, #divAccounts .Validation, #divThanksMain .Validation, #divLoginMain .Validation
{
    margin-left: 10px;
    margin-right: 10px;
}

#divLoginMain
{
    padding-left: 0px;
}

#divLoginMain .divPage, #divThanksMain .divPage
{
    padding-left: 0px;
    padding-right: 0px;
}

#divLoginEmailMain, #divLoginCodeMain
{
    margin-left: 10px;
    margin-right: 10px;
}

.cmdCode, .cmdCodeSelected, .cmdCodeAll, .cmdCodeAllSelected, .cmdAccount, .cmdAccountSelected, .cmdAccountAllSelected, .cmdAccountAll, .divReasonText
{
    margin-right: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 0px;
}

/*Remove the floating of the name, street+number and zipcode+city fields and force it to 100% width*/
#divFieldFirstName_BF, #divFieldFirstName_EF, #divFieldNamePrefix_BF, #divFieldNamePrefix_EF, #divFieldLastName_BF, #divFieldLastName_EF,
#divFieldCity_BF, #divFieldCity_EF, #divFieldZipcode_BF, #divFieldZipcode_EF, #divFieldStreet_BF, #divFieldStreet_EF, #divFieldNumber_BF, #divFieldNumber_EF
{
    float: none;
    width: 100% !important;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 8px;
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
}


.divButtonsMain
{
    padding: 0px;
    border-top: 1px solid #dfdfe0;
    position: relative;
    height: 95px;
    background-color: transparent;
}

#divLoginMain .divButtonsMain { height: 40px; }
#divThanksMain .divButtonsMain { height: 40px; }

/*Styling of footer and buttons*/
.ButtonNext, .ButtonCancel { width: 100%; height: 40px !important; }
.ButtonNext .rbSecondaryIcon { position: absolute; right: 20px; top: 10px; }
.ButtonNext .rbText { position: absolute !important; left: 12px !important; top: 10px !important; font-size: 14px; }
.ButtonCancel .rbPrimaryIcon { position: absolute; top: 10px; }
.ButtonCancel .rbText { position: absolute; right: 40px !important; top: 10px !important; font-size: 14px; }
.divButtonCancel { width: 50%; position: absolute; left: 0; margin-right: 0px; height: 40px; overflow: hidden; }		
.divButtonBack { margin-top: -6px; margin-left: -10px; }
.divButtonUnsubscribe { width: 100%; position: absolute; top: 55px; height: 40px; overflow: hidden; }
.divButtonUnsubscribe .rbText { position: absolute; left: 15px !important; top: 10px !important; font-size: 14px; }
.divButtonNext { width: 50%; position: absolute; right: 0px; border-left: 1px solid #dfdfe0; height: 40px; overflow: hidden; }
.ButtonNextSubmit INPUT { position: absolute !important; left: 12px !important; top: 10px !important; font-size: 14px !important; }

/*Style of basic controls*/
.txtEmptyMessage { color: #FFFFFF !important; }
.divLabel, .divLabelButtons { display: block; margin-bottom: 8px; padding-bottom: 0px; font-size: 12px; font-weight: bold; }
.divLabelMaf { display: block; font-weight: normal; float: none; margin-bottom: 2px; margin-top: 6px; }
#divMafAddressesMain { margin-top: 10px; }

.RadInput { width: 100% !important }
.divFieldRequired INPUT { color: black !important; }
.divFieldRequired INPUT.txtEmptyMessage { color: #FFFFFF !important; }
.FieldsDate { width: 100% !important; }

.divValHeader, .Validation .divCaptionInner { font-size: 16px !important; }

#divThanksReason { margin-top: 5px; }
#divThanksUnsubscribe { margin-top: 5px; }


.divDateMain
{
    width: 100% !important;
}

.divDateDay
{
    float: left; 
    width: 46px;
    margin-right: 5px;
}

.divDateMonth
{
    float: left;
    width: 46px;
    margin-right: 5px;
}

.divDateYear
{
    float: left;
    width: 55px;
}