/* DIMENSIONS */
@total-columns  : 12;
@column-width   : 60px;
@column-margin  : 10px;
@siteWidth              : 960px;
@mobile-max             : 639px;
@mobile-small   : 504px;
@tablet-min             : @mobile-max + 1px;
@tablet-max             : 959px;
@desktop-min    : @tablet-max + 1px;
@mobile-min             : 320px;
@basic-margin   : 15px;

/* COLORS */
@orange-red                     : #e04421;                      /* Titles, Links, Lines and Decorations */
@dark-orange-red        : #c83615;                      /* Lines and Decorations */
@darker-orange-red      : #AA1800;                      /* Exposed Filter Buttons */
@dark-brown                     : #271d18;                      /* Lines and Decorations */
@medium-brown           : #332823;                      /* Text and Decorations */
@light-brown            : #3e312b;                      /* Lines and Decorations */
@calendar-brown         : #974e2c;
@dark-tan-brown         : #83675a;
@tan-brown                      : #bfad9e;                      /* Menu Text, Lines and Decorations */
@tan                            : #e7cfc2;                      /* Background */
@almost-black           : #555;
@dark-grey                      : #b3b3b3;                      /* Join Today - Table Lines */
@grey                           : #e5e1d8;                      /* Join Today - Table Lines */
@light-grey                     : #c2c2c2;                      /* Join Today - Table Gradient */
@white-grey                     : #f9f9f9;                      /* Join Today - Table Gradient */
@gold                           : #cca237;                      /* Lines and Decorations */
@silver                         : #bdccd4;                      /* Lines and Decorations */
@system-silver          : #cccccc;                      /* Default Tables and Decorations */
@greena                          : #05B912;                      /* Lines and Decorations */
@plus                           : #D54D61;                      /* Lines and Decorations */
@basic                          : #61456B;                      /* Lines and Decorations */
@bronze                         : #a36a3b;                      /* Lines and Decorations */
@blue                           : #00aeef;                      /* Lines and Decorations */
@dreamer                        : @blue;
@green                          : #55b949;
@dark-blue                      : #367da5;
@white                          : #ffffff;                      /* Lines and Decorations */
@black                          : #000000;                      /* Lines and Decorations */
@transparent            : rgba(232,223,208,0.7);

/* FONTS */
@font-copy              : helvetica, arial, sans-serif;
@font-primary   : "proxima-nova", sans-serif;
@font-secondary : "museo-slab", sans-serif;

/* Pages For Join Today - Content Type */
@gold-workamper                 : page-node-22188;
@gold-employer                  : page-node-38149;
@silver-workamper               : page-node-22187;
@silver-employer                : page-node-38148;
@bronze-workamper               : page-node-38119;
@bronze-employer                : page-node-38147;
@dreamer-workamper              : page-node-192;
@basic-employer                 : page-node-90;
@plus-employer                  : page-node-91;
@plus-green-employer    : page-node-92;
@featured-employer              : page-node-93;
@join-today                             : page-node-82;
@workamping-join-today  : page-node-39;

/* FUNCTIONS */
.clearer {
    &:after {
        content: ".";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }
}

.page-place-ads {
    
    .content {
        
        .login, .create {
            float: left;
            margin-top: 5px;
            
            a {
                
                label {
                    cursor: pointer;
                    text-align: center;
                    background: @blue;                
                    color: @white;
                    font-family: @font-primary;
                    font-weight: normal;
                    border-radius: 14px;
                }
                
                &:hover {
                    text-decoration: none;                    
                }
            }
        }
        
        .login {
            margin-right: 10px;
            
            a label {
                width: 285px;
                padding: 52px 85px;
            }
        }
        
        .create a label {
            padding: 40px 60px;
            width: 335px;
        }
        
        &:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
    }
    
    #header-wizzard {
        width: 100%;
        margin: 10px 10px 0px 10px;

        ul {
            margin: 0px;
            padding: 0px;
        }
        
        .number {
            display: none;
        }

        li {
            width: 120px;
            text-align: center;
        }

        .title-steps {
            list-style: none;
            float:left;
            position: relative;
            padding: 10px 7px;
            line-height: 20px;
            margin-right: 18px;
            width: 114px;
            color:@white;
            font-family: @font-secondary;
            font-weight: bold;
            text-align: center;
            background: @darker-orange-red;
            font-size: 17px;
            height: 41px;
            vertical-align: middle;


                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: -14px;
                    margin: auto;
                    height: 0;
                    border-left: 14px solid @darker-orange-red;
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                }

                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -14px;
                    margin: auto;
                    height: 0;
                    border-left: 15px solid transparent;
                    border-top: 31px solid @darker-orange-red;
                    border-bottom: 30px solid @darker-orange-red;   
                }
        }

        #title-step1, #title-step3, #title-step4, #title-step6 {
            padding: 20px 8px 0 7px;
        }

        .current-step {
                    background: @orange-red;

                    &:after {
                        border-left: 14px solid @orange-red;
                    }

                    &:before {
                        border-top: 31px solid @orange-red;
                        border-bottom: 30px solid @orange-red;
                    }
                }

    }
    
    #content-all-steps {
        width: 100%;
        float: none;
        clear: both;
        border: 1px solid #000;
    }

    .content-steps {
        margin: 14px;
        
        .error {
            border: 1px solid #B40404 !important;
        }
        
        .view-header, .view-footer, tfoot {
            display: none;
        }
        
        thead {
            height: 60px !important;
        }
        
        p {
            font-size: 15px;
        }
        
        #change-user {
            .input-user-name, #user-name {
                float: left;
            }
            
            .input-user-name {
                width: 105px;
            }
            
            #search-user {
                
                padding: 5px 20px;
                text-decoration: none;
                font-size: 16px;
                font-weight: 700;
                font-family: @font-secondary;
                color: @white;
                background-color: @orange-red;
                border: none;
                margin: 0 10px 20px 20px;


                &:link, 
                &:visited, 
                &:hover, 
                &:active {
                        color: @white;
                        background-color: @orange-red;
                }

                &:hover, 
                &:active {
                        color: @white;
                        background-color: @dark-orange-red;
                }
            }
            
        }
        
        h2 {
            margin: 0px !important;
            color: @orange-red;
            font-family: @font-secondary;
        }
        
        .previos-ad-options {
            
            float: left;
            width: 100%;
            height: 85px;
            margin-top: 12px;
            width: 840px;
            
            .options-ads {                
                margin-top: 6px;
            }
            
            /*.prev-ads {
                
                
            }*/
            
            .label-prev-ads {
                width: 817px !important;
                font-weight: 100 !important;
                height: 85px;
                float: right;
            }
        }
        
        
        
        
        .div-steps {
            padding: 14px;
            background:url("images/tan-50-percent.png") !important;
        }
        
        #info-user-div {
            
            .intro-text {
                font-style: italic;
            }
            
            .inputs-info-user1 {
                
                float: left;
                width: 430px;
                margin-bottom: 16px;
           
                
                .labels-step1-1 {
                    float: left;
                    width: 100px;
                }

                .inputs-info-user {
                    width: 302px;                   
                }
                
            }
            
            &:after {
                clear: both;
                content: ".";
                display: block;
                height: 0;
                visibility: hidden;
            }     
                      
        }
        
        #account-information-div {
            
            width: 407px; 
            display: inline-block;
            
            #inputs-account-info-user {
                .inputs-account-user1 {
                    float: left;
                    width: 100%;
                    margin: 15px 0px 6px 0px;
                    
                    .labels-step1-2 {
                        float: left;
                        width: 135px;
                    }
                    
                    .inputs-account-info-user {
                        width: 255px;
                    }
                    
                    #phone, #fax {
                        width: 180px;
                    }
                }
                
                &:after {
                    clear: both;
                    content: ".";
                    display: block;
                    height: 0;
                    visibility: hidden;
                }
            }
        }
        
        #mailing-information-div {
            
            width: 407px; 
            display: inline-block;
            margin-left: 18px;
            
            #inputs-mailing-info-user {
                .inputs-mailing-user1 {
                    float: left;
                    width: 100%;
                    margin: 15px 0px 6px 0px;
                    
                    .labels-step1-3 {
                        float: left;
                        width: 135px;
                    }
                    
                    .inputs-mailing-info-user {
                        width: 235px;
                        height: 18px;
                        padding: 2px;
                    }
                    
                    #edit-mailing-state, #edit-mailing-country {
                        height: 24px;
                    }
                    
                    #country, #zipcode {
                        width: 180px;
                    }
                }
                
                &:after {
                    clear: both;
                    content: ".";
                    display: block;
                    height: 0;
                    visibility: hidden;
                }
            }
                       
        }
        
        
        
        
        #info-subscription {
            float: left;
            width: 54%;
        }
        
        #roles {       
            float: right;            
            width: 367px;
            min-height: 157px;
        }
        
        #roles #roles-options,
        #roles #go-green-check {
            display: inline-block;
        }
        
        #roles #roles-options {
            width: 100px;
            margin-left: 15px;
        }
        
        #roles .title1 {
            margin-bottom: 10px !important;
        }
        
        #roles #go-green-check {
            width: 190px;
            background: @green;
            float: right;
            padding: 10px;
            
            h2 {
                font-size: 16px !important;
            }
            
            #grenndiv #text-go-green {
                font-size: 13px !important;
                margin: 5px 0 5px 36px;
                color: @white;
            }
            
            .form-item-go-green-1 {
                margin: 0px !important;
                width: 100%;
                
                #go-green {
                    display: inline-block;
                }
                
                .option-label-go-green {
                    width: 80px !important;
                    display: inline-block;
                    color: @white;
                    font-weight: normal !important;
                }
            }
        }
        
        #view {
            float: left !important;
            width: 100%;
            margin-top: 14px;
        }
        
        #current-sel {
            float: right;
            height: 50px;
            width: 367px;
            margin-top: 14px;
        }
        
        .end-div {
            float: none;
            clear: both;
            display: block;
        }
        
        .order-details {
            margin-top: 14px;            
        }
        
        #content-step-6 {
            
            #subscriber-info, #ad-details {
                float: left;
                width: 410px;
                margin-right: 14px;
            }
            
            #payment-details, #order-detail {
                float: right;
                width: 410px;
            }
            
            
            
            &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                }
        }
        
        #content-step2 {
            
            #info-subscription {
                
                #renew-membership {
                    border: 3px solid @dark-orange-red;
                    background: @orange-red;
                    margin: 12px 5px 0 69px;
                    padding: 12px 30px;
                    width: 262px;
                    
                    label {
                        font-family: @font-secondary;
                        font-size: 14px;
                        color: @white;
                        font-weight: 700;
                    }
                }
                
            }
        }
        
        #content-step-3 {
            #pick-ad {
                float: left;
                margin-top: 14px;
                padding: 25px 45px;
                width: 330px;
                
                .form-item {
                    margin: 0px;
                }
            }
            
            #select-typead {
                float: right;
                background:url("images/tan-50-percent.png") !important;
                padding: 20px 32px;
                width: 400px;                
                margin-top: 14px;
                
                .form-item {
                    margin: 0px;
                }
                
                .label-list-ad-type {
                    font-size: 17px;
                    color: @orange-red;
                    font-family: @font-secondary;
                    margin-bottom: 14px;
                }
            }
            
            &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                }
        }

        #content-step-4 {
            #sizebanneremail{margin-bottom: 14px;}
            #sizebanner, #budget, #url, #publishdate, #supercharge-div {
                
                .form-item {
                    margin-bottom: 4px !important;
                    margin-top: 4px !important;
                }
                
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;
            }
            
            #title-createad01 {
                margin-bottom: 14px !important;
            }
            
            #sizead {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;
                
                .form-item {
                    margin: 4px 2px;
                }
                
                .form-item-Jobinar-time {
                    margin-bottom: 10px;
                }
            }
            
            #Jobinar-div {
                
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                margin-right: 14px;
                width: 532px;
                
                .form-item {
                    margin: 4px 2px;
                }
                
                .form-item-Jobinar-time {
                    margin-bottom: 10px;
                }
            }
            
            #Jobinar-div2 {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;
                
                .form-item {
                    margin: 4px 2px;
                }
                
                .form-item-Jobinar-time {
                    margin-bottom: 10px;
                }
            }
            
            #designad {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;
            }

            #table-issue {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 530px;
                margin-right: 14px;
                margin-bottom: 14px;
            }

            #use-logo-div {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 290px;
                margin-bottom: 14px;

                #uselogo {
                    width: 210px;
                    margin: 0 auto;
                }

                #check-value .form-item-arvc-member {
                    margin-bottom: 0px !important;
                }
            }

            #coments {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 623px;
                margin-bottom: 14px;
                margin-right: 14px;
            }
            
             #feat-emp{
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 862px;
                margin-bottom: 20px;
            }

            #questions {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 196px;
                margin-bottom: 14px;
            }

            #oldad {
                padding: 14px;                
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;

                .select-prev-ads {
                    float: left;
                    font-size: 15px;
                    margin: 10px 0;
                }

                .load-ads-text {
                    float: right;
                    font-size: 15px;
                    margin: 10px 0;
                    color: @orange-red;
                }

                #inputslastads {
                    clear: both;
                }
            }

            #ad-copy {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;

                #wordcount {
                    width: 190px;
                    float: left;

                    #label-word-count {
                        float: left;
                        width: 84px;
                    }

                    #edit-wordcount {
                        float: left;
                    }
                }

                #cost-ad {
                    width: 670px;
                    float: left;

                    #label-cost {
                        float: left;
                        margin-right: 5px;
                    }

                    #cont-value {
                        float: left;
                    }

                    #text-cost {
                        float: right;
                        font-size: 14px;
                        font-style: italic;
                        width: 332px;
                    }
                }
            }

            #borderad, #stateus {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;   
                margin-bottom: 14px;
                width: 862px;

                p {
                    margin: 5px 0px !important;
                    width: 460px;
                    float: left;
                }

                .form-item-state-us {
                    float: left;
                }
            }

            #extra-info, #notices {
                padding: 14px;
                background:url("images/tan-50-percent.png") !important;
                float: left;
                width: 862px;     
            }

            #extra-info {
                margin-bottom: 14px;
            }

            #end-created-ad {
                clear: both;
                height: 0px;
            }
        }
        
        #content-step-5 {
            #payment-options {
                .form-item-pay {
                    #div-payments-options {
                        width: 800px;
                        margin-bottom: 10px;
                        padding: 10px;
                    }
                    
                    #adcard {
                        width: 44%;
                        float: left;
                        margin-right: 14px;
                        padding: 18px;
                        border: 1px solid @orange-red;
                        border-radius: 6px;
                    }
                    
                    #billing-info {
                        width: 45%;
                        float: left;
                        padding: 18px;
                        border: 1px solid @orange-red;
                        border-radius: 6px;
                    }
                    
                    &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                    }
                    
                    .form-item {
                        margin-top: 4px;
                        margin-bottom: 4px;
                    }
                }
            }
        }
        
    }
    
    #buttoms {
        margin-top: 14px;
        
        #content-buttom {            
            background: @dark-tan-brown;
            height: 57px;
        }
        
        #content-buttom .next-steps {
                
                float: right;
                background-color: @green;
                color: white;
                font-size: 20px !important;
                margin-left: 4px;
                padding: 16px 14px;
                text-decoration: none;
                font-family: @font-secondary;
                font-weight: bolder;
                color: #ffffff;
                width: 170px;
                text-align: center;
                border: none !important;

                &:hover { 
                        background-color: @green + 30; 
                        text-decoration:none;
                }

                &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                }  
        }
        
        #content-buttom .previous-steps {
                
                float: right;
                background-color: @orange-red;
                color: white;
                font-size: 20px !important;
                margin-left: 0;
                padding: 16px 14px;
                text-decoration: none;
                font-family: @font-secondary;
                font-weight: bolder;
                color: #ffffff;
                width: 170px;
                text-align: center;
                border: none !important;

                &:hover { 
                        background-color: @dark-orange-red; 
                        text-decoration:none;
                }

                &:after {
                        clear: both;
                        content: ".";
                        display: block;
                        height: 0;
                        visibility: hidden;
                }  
        }
               
        
    }

}
#expiration-role p {
    font-size: 17px !important;
    padding-bottom: 20px;
}
.sub-info p{ padding-bottom: 16px;}

.edit-pay-option-container {
    float: left;
    margin-bottom: 10px;
    width: 50%;
}
#cards-user1{clear:both;}
 #subscriber-info label,#payment-details-content label{display:inline;}
#title-step1::before {
    border-left: 0 none !important;
}
#title-step1 {
    margin-left: -10px;
}
// Submit Advertising - Mobile and Tablet
@import "submit-advetising-mobile.less"; // Keep at bottom of file