/*
    Rimote.nl ~ Shop CSS
    Author: J.N. van Oosten
    Creation date: 13-07-2010
    Description: Styles Rimote Media Webshop
    Copyright (C) Rimote Media / J.N. van Oosten
*/

/*--------------------------------------------------------------------------------*/
/* Login Form
/*--------------------------------------------------------------------------------*/
#login_form_wrapper {
    -moz-border-radius:5px 5px 5px 5px;
    -webkit-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    -moz-box-shadow:0 0 2px #555;
    -webkit-box-shadow:0 0 2px #555;
    box-shadow:0 0 2px #555;
    border:5px solid #EFEFEF;
    display:block;
    margin:25px auto;
    width:380px;
}

    #login_form_wrapper h2 {
        border-top-left-radius:5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px; 
        border-top-right-radius:5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        background:url("../img/page_header_bg.png") repeat-x scroll center bottom #0077B2;
        color:#fff;
        display:inline-block;
        font-size:1.8em;
        margin-bottom:0;
        padding:10px;
        width:360px;
    }

    #login_form_wrapper form {
        margin:0 auto;
        padding: 5px 10px 20px;
        width:250px;    
    }
    
        #login_form_wrapper fieldset {
            background-color:#fff;
            border:0 none;
            margin:0;
            padding:0;
            width:auto;
        }
    
            #login_form_wrapper  input.txt {
                float:none;
            }
        
            #password-clear {
                display: none;
            }
            
            #login_form_wrapper #send {
                margin:5px 0 0;
            }
            
            #login_form_wrapper p {
                float:right;
                
            }
            
                #login_form_wrapper a {
                    color:#666666;
                }
            
    #login_form_wrapper .message {
        margin:190px 0 0 -10px;
        display:block;
    }
    
        #login_form_wrapper .message  p{
            margin:0;
        }
        
    #login_form_loading {
        margin-left:5px;
        display:none;
    }
                
/*--------------------------------------------------------------------------------*/
/* Forgot password form
/*--------------------------------------------------------------------------------*/    
#password_forgot_wrapper {

}

    #password_forgot_wrapper fieldset {
        background-color:#fff;
        border:0 none;
        margin:0;
        padding:0;
        width:auto
    }

    #password_forgot_wrapper #send {
        margin:5px 0 50px;
    }
    
/*--------------------------------------------------------------------------------*/
/* ColorBox (lightbox/modals)
/*--------------------------------------------------------------------------------*/
/* ColorBox Core Style */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}


/* Media queries for overlay */

@media all and (max-width:768px) {
    #colorbox {
        /*  override width, position, height, padding  */
        height: 600px;
        width:75% !important;
        margin: 0 auto;
        left: 13% !important;
        padding-right:0px !important;
    }

    #cboxWrapper {
        /*  override width, height */
        height: auto!important;
        width:100% !important;
         margin: 0 auto;
         position:relative
    }

    #cboxWrapper > div {
        margin: 0 auto;
    }

    #cboxTopCenter, #cboxBottomCenter{
        /*  override width  and hieght for cboxcontent*/
    }

    #cboxContent {
        float:none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto;
        
        border-radius: 10px;
    }

    #cboxLoadedContent {
        /* within cboxcontent: override width and height ?  */
        /* and in there customize customer_check_wrapper */
        height:auto !important;
        width: 98% !important;
        margin: 0 auto !important;
        text-align:center;
    }    

    #customer_check_wrapper {
        width:90%;
        margin: 0 auto;
        /* #klanten_login */
    }

    #nieuwe_klant_box, #klanten_login {
        float:none !important;
        display:block;
        border:none !important;
        width:unset !important;
    }

    #login_link {
        margin-bottom: 20px !important;
    }

    #cboxTopLeft, #cboxTopRight, #cboxTopCenter, #cboxMiddleLeft, #cboxMiddleRight, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight {
        display:none;
    }

    #cboxContent > #cboxClose {
        right: 10%;
        margin-top: 10px;
    }
}

@media all and (max-width:480px) {
    #colorbox {
        /*  override width, position, height, padding  */
        width:95% !important;
        max-width:480px;
        margin: 0 auto;
        left:2% !important;
    }
}



/* Colorbox theme */
#cboxOverlay{background:#0078A5;}
#colorBox{}
    #cboxTopLeft{width:25px; height:25px; background:url(../img/colorbox/border1.png) 0 0 no-repeat;}
    #cboxTopCenter{height:25px; background:url(../img/colorbox/border1.png) 0 -50px repeat-x;}
    #cboxTopRight{width:25px; height:25px; background:url(../img/colorbox/border1.png) -25px 0 no-repeat;}
    #cboxBottomLeft{width:25px; height:25px; background:url(../img/colorbox/border1.png) 0 -25px no-repeat;}
    #cboxBottomCenter{height:25px; background:url(../img/colorbox/border1.png) 0 -75px repeat-x;}
    #cboxBottomRight{width:25px; height:25px; background:url(../img/colorbox/border1.png) -25px -25px no-repeat;}
    #cboxMiddleLeft{width:25px; background:url(../img/colorbox/border2.png) 0 0 repeat-y;}
    #cboxMiddleRight{width:25px; background:url(../img/colorbox/border2.png) -25px 0 repeat-y;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxLoadingOverlay{background:url(../img/loading.gif) 5px 5px no-repeat #fff;}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#666; font-size:1.3em;}
        #cboxClose:hover{text-decoration:underline;}
    
/*--------------------------------------------------------------------------------*/
/* Tabs
/*--------------------------------------------------------------------------------*/
ul.tabs_wrapper {
    height: 39px;
    margin-bottom: -1px !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
}

    ul.tabs_wrapper li {
            border-bottom: 1px solid #FFFFFF;
            float: left;
            height: 36px;
            list-style: none outside none;
            margin: 0 5px 0 0 !important;
            overflow: hidden;
            padding: 0.25em 0 0;
            position: relative;
            z-index: 1;
    }

    ul.tabs_wrapper li.selected {
        z-index: 3;
    }

        ul.tabs_wrapper a {
            background-color: #ECF8FE;
            border: 1px solid #A6D1E6;
            border-bottom: 0;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
            color: #0a83bf;
            float: left;
            font-weight: bold;
            line-height: 2em;
            padding: 5px 10px;
            text-decoration: none;
        }

            @media all and (max-width: 480px) {
                

                ul.tabs_wrapper li {
                    font-size:1.2em !important;
                    margin: 0 2px 0 0 !important;
                }

                ul.tabs_wrapper a {
                    
                    line-height:2.2em;
                    padding: 5px 3px;
                }
            }

            ul.tabs_wrapper .selected a {
                border: 1px solid #ccc;
                color: #222;
                background: #FFF;
            }

            ul.tabs_wrapper a:hover {
                background: #FCFEFF;
            }

            ul.tabs_wrapper a:active {
                border: 1px solid #ccc;
                background: #EEE;
            }

            .tab_content {
                clear: left;
                position: relative;
                z-index: 2;
                padding: 1.3em 0 1em;
                border-top: 1px solid #CCC;
            }
            
/*--------------------------------------------------------------------------------*/
/* Notifications
/*--------------------------------------------------------------------------------*/
div.message_js,
div.message {
    -moz-box-shadow: 0 0 5px #949494;
    -webkit-box-shadow: 0 0 5px #949494;
    box-shadow: 0 0 5px #949494;
    background-color:#FFF5B6;
    border:1px solid #D6A103;
    color:#444444;
    cursor:pointer;
    display:none;
    margin-left:60%;
    padding:10px;
    position:absolute;
    text-align:left;
    top:20px;
    width:380px;
    z-index:10001;
}

    /* responsive layout for messages on smaller devices */
    @media screen and (max-width : 980px) {
        div.message_js,
        div.message {
            width: 300px;
            padding: 7px;
        }
    }

    @media screen and (max-width : 768px) {
        div.message_js,
        div.message {
            top: 50px;
            position:relative;
            margin-left:0;
        }
    }

    @media screen and (max-width : 480px) {
        div.message_js,
        div.message {
            width: 250px;
            padding: 5px;
        }
    }



    div.message_js { /* Messages created by JS validation */
        cursor:default;
        position:relative;
        top:0;
    }

    div.notification_success {
        background:#e1ffdd;
        border-color:#409836;
    }

    div.notification_announcement {
        background:#ecf8fe;
        border-color:#a6d1e6;
    }

div.message_js h4,
div.message h4{
    background:url("../img/ico/ico_warning_yellow.png") no-repeat scroll 0 3px transparent;
    color:#695005;
    font-size:1.4em;
    font-weight:bold;
    padding-left:24px;
}

    div.notification_success h4{
        background:url("../img/ico/ico_confirm_green.png") no-repeat scroll 0 1px transparent;
        color:#236f1a;
    }

    div.notification_announcement h4{
        background: none;
        color:#006A9F;
    }

div.message_js  p,
div.message_js  li,
div.message  p,
div.message  li {
    margin-left:25px;
    padding:0!important;
}

div.message_js .validation_errors,
div.message .validation_errors {
    margin-top: -10px;
}

    div.message_js .validation_errors li,
    div.message .validation_errors li {
        font-size: 1.3em;
        font-weight: bold;
        list-style: disc outside none;
        margin-left: 40px;
    }

/*--------------------------------------------------------------------------------*/
/* Header 1 menu (username + logout link)
/*--------------------------------------------------------------------------------*/
#user_menu {
    border-bottom-left-radius:5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px; 
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background-color:#EEEEEE;
    border-bottom:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    float:right;
    height:18px;
    margin:-15px 10px 0;
    padding:10px;
    position:relative;
    width:auto;
    z-index:0;
}

    #user_menu span {
        color:#666;
    }
    
    #user_menu p {
        color:#666;
        font-size:1.2em;
        line-height:18px;
        vertical-align:middle;
    }
    
    #user_menu a {
        color:#555555;
    }    
    
        #user_menu a#link_profile {
            background:url("../img/ico/ico_user.png") no-repeat scroll right 2px transparent;
            padding-right:20px;
        }
        
        #user_menu a#link_logout {
            background:url("../img/ico/ico_key.png") no-repeat scroll right 2px transparent;
            padding-right:20px;
        }
        
    #user_menu a:hover {
        opacity:0.7;
    }

/* styling for the user menu in the hamburger */
@media only screen and (max-width: 768px) {

    #user_menu {
        margin: 0 auto;
        float:none;
        background-color:#005c8a;
        border:1px solid #005c8a;
        border-radius: 5px;
        box-shadow:3px 3px 3px #012e45;
        width: 175px;
        height: 50px;
    }

    #user_menu p, #user_menu a {
        color:#fff;
    }

    #user_menu #link_logout {
        float:right;
    }

     #user_menu span {
         color:#005c8a;
     }

}
/*--------------------------------------------------------------------------------*/
/* Profile (Klantgegevens)
/*--------------------------------------------------------------------------------*/
.input.text label {
  display: block;
  position: absolute;
}

.input.text input {
  display: block;
  position: relative;
  left: 200px;
}

#invoice-fields {
  overflow: hidden;
}

p.loading {
    display: inline-block;
    background:url("../img/loading.gif") no-repeat scroll 6px 8px #FFF5B6;
    border:1px solid #D6A103;
    color:#666666;
    font-weight:bold;
    padding:5px 10px 5px 26px;
}

/*--------------------------------------------------------------------------------*/
/* Invoices 
/*--------------------------------------------------------------------------------*/
#debtor_balance {
    background-color: #FFFFDF;
    width: 100% !important;
}

    #debtor_balance span:first-child {
        font-size: 1.3em;
    }
    
    #debtor_balance strong.minus-emphasis {
        font-size: 1.1em;
    }

    
    @media all and (max-width:576px) {
        #debtor_balance span:first-child {
            font-size: 1em;
        }

        #debtor_balance strong.minus-emphasis {
            font-size: 0.9em;
        }
    }

#invoice_payment_wrapper {
    background-color:#F7F7F7;
    border:1px solid #CCCCCC;
    margin-top:2em;
    margin-bottom: 2em;
    padding:10px;
}

    #invoice_payment_grid_wrapper {
        margin-bottom:0;
    }

    #invoice_payment_grid {
        background-color:#fff;
        padding-top:5px;
        width:670px;
    }
    
#invoice_payment_submit_wrapper {
    background-color:#FFFFFF;
    padding:10px;
    width:650px;
}

    #total_price {
        background-color:#FFFFDF;
        font-size:1.4em;
        margin-left:306px;
        padding:3px 6px;
        width:114px;
    }
    
    #invoice_payment_submit_wrapper fieldset {
        background:url("../img/ideal.png") no-repeat 11px 7px #F7F7F7;
        border:1px solid #CCCCCC;
        margin-bottom:0;
        padding:10px;
        width:auto;
    }
    
    #invoice_payment_submit {
        float:right;
        margin:6px;
    }

/*--------------------------------------------------------------------------------*/
/* Overzicht
/*--------------------------------------------------------------------------------*/
    fieldset.overzicht {
        margin:10px 0 20px !important;
        padding:0 0 20px;
        width:auto;
    }

    fieldset.overzicht legend {
        color:#006A9F;
        padding:10px 5px 10px 3px;
    }
    
    fieldset.overzicht.pakket legend {
        background: url("../img/ico/ico_package_small.png") no-repeat scroll 2px 5px transparent;
        color: #3F3F3F;
        margin: 0 0 15px 10px !important;
        padding: 5px 5px 0 35px !important;
    }

    fieldset.overzicht p {
        margin:2px 0 21px 21px;
        padding: 0 25px 0 0;
    }
    
    fieldset.overzicht ol {
        border-bottom:1px solid #D5E9FA;
        padding-bottom:10px;
    }

    fieldset.overzicht li {
        border-top:0 none;
        font-size:1.3em !important;
        display:inline-block;
        list-style:none outside none;
        margin-left:10px;
        padding:0 15px;
        width:auto;
    }
    
    fieldset.overzicht li:first-child {
        margin-left:6px !important;
    }

    fieldset.overzicht li.right {
        padding-left:0;
    }

    
    fieldset.overzicht a.link_da {
        background:url("../img/ico/ico_config.png") no-repeat scroll 0 2px transparent;
        color:#666666;
        padding-left:22px;
    }
    
    fieldset.overzicht .help {
        padding: 0 0 0 2px;
    }
    

    fieldset.overzicht table {
        font-size:0.9em;
        margin:15px 25px 0;
        width:638px;
    }

    fieldset.overzicht a.button.blue.small.round {
        float: right;
    }

        @media all and (max-width: 992px) {
            fieldset.overzicht {
                margin:10px auto 0px !important;
            }
            
            fieldset.overzicht table {
                width:98% !important;
                margin: 10px auto;
               /* font-size: 0.7em; */
            }
            fieldset.overzicht li {
                margin: 0px 0px 10px 6px !important;
                padding: 10px 10px;
            }
            fieldset.overzicht a.button.blue.small.round {
        float: right;
    }


        }

        @media all and (max-width: 480px) {
            fieldset.overzicht li {
                display:block;
            }

            fieldset.overzicht a.button.blue.small.round {
                float: none;
            }
        }

        /*
        @media all and (max-width: 768px) {
            fieldset.overzicht table {
                widows: 80% !important;
                margin: 10px auto;
                font-size: 0.7em;
            }
        }
        */
        fieldset.overzicht td a{
            color:#444;
            text-decoration:none;
        }
    
        fieldset.overzicht td a:hover{
            text-decoration:underline;
        }
    
        table tr.standard td:first-child a{
            color:#006A9F;
        }

        table tr.alias td:first-child,
        table tr.redirect td:first-child{
            background-image:url("../img/ico/ico_child.png");
            background-position:4px 1px;
            background-repeat:no-repeat;
            padding-left:20px;
        }
    
        fieldset.overzicht table td span{
            color:#555;
            font-size:0.8em;
            padding:0;
        }
    
        td.standard,
        td.redirect,
        td.alias {padding-top:0 !important;}

        td.standard span {background:url("../img/ico/ico_home.png") no-repeat scroll 0 -2px transparent;display:block;height:18px;line-height:18px;text-indent:-999em;width:20px;}
        td.redirect span {background:url("../img/ico/ico_redirect.png") no-repeat scroll 0 -2px transparent;display:block;height:18px;line-height:18px;text-indent:-999em;width:20px;}
        td.alias span {background:url("../img/ico/ico_alias.png") no-repeat scroll 0 -2px transparent;display:block;height:18px;line-height:18px;text-indent:-999em;width:20px;}
    
    tr.unknown {
      background-color: #FFFFDF !important;
    }
    
    tr.vps_offline {
      color: rgba(0,0,0,.5);
    }
    

    /*--------------------------------------------------------------------------------*/
    /* Progress bar
    /*--------------------------------------------------------------------------------*/
        .meter { 
            height: 10px;  /* Can be anything */
            position: relative;
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
            -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
            -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
            box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        }
        .meter > span {
            display: block;
            height: 100%;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(43,194,83);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(43,194,83)),
              color-stop(1, rgb(84,240,84))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(43,194,83) 37%,
              rgb(84,240,84) 69%
             );
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
        }
        .meter > span:after, .animate > span > span {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-image: 
               -webkit-gradient(linear, 0 0, 100% 100%, 
                  color-stop(.25, rgba(255, 255, 255, .2)), 
                  color-stop(.25, transparent), color-stop(.5, transparent), 
                  color-stop(.5, rgba(255, 255, 255, .2)), 
                  color-stop(.75, rgba(255, 255, 255, .2)), 
                  color-stop(.75, transparent), to(transparent)
               );
            background-image: 
                -moz-linear-gradient(
                  -45deg, 
                  rgba(255, 255, 255, .2) 25%, 
                  transparent 25%, 
                  transparent 50%, 
                  rgba(255, 255, 255, .2) 50%, 
                  rgba(255, 255, 255, .2) 75%, 
                  transparent 75%, 
                  transparent
               );
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            overflow: hidden;
        }
        
        .animate > span:after {
            display: none;
        }
        
        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 50px 50px;
            }
        }
        
        
        .meter.darkblue > span {
            background-color: #0078A5;
            background-image: -moz-linear-gradient(top, #0078A5, #007EAD);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0078A5),color-stop(1, #007EAD));
            background-image: -webkit-linear-gradient(#0078A5, #007EAD); 
        }
        
        .orange > span {
            background-color: #f1a165;
            background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
            background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
        }
        
        .red > span {
            background-color: #f0a3a3;
            background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
            background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
        }
        
        .blue > span {
            background-color: #A8CEFF;
            background-image: -moz-linear-gradient(top, #A8CEFF, #0000ff);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #A8CEFF),color-stop(1, #f42323));
            background-image: -webkit-linear-gradient(#A8CEFF, #f42323);
        }        
        
        .nostripes > span > span, .nostripes > span:after {
            -webkit-animation: none;
            background-image: none;
        }
    
#commissions {
    background:#FFFFCC;
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFFAF), to(#FFFFCC));
    background: -moz-linear-gradient(top, #FEFFAF,  #FFFFCC);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFFAF', endColorstr='#FFFFCC');
    color:#444;
    float:right;
    margin-top: -31px;
    margin-bottom: 3em;
    width: 286px;
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}

    @media all and (max-width: 992px) {
        #commissions {
            float:left;
            margin-top: 10px ;
        }
    }
    
    #commissions caption{
        background-color: #E5E59E;
        color: #7b7c00;
        font-family: sans-serif;
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.3em;
        padding: 10px;
        -moz-border-radius:10px 10px 0 0;
        -webkit-border-radius:10px 10px 0 0;
        border-radius:10px 10px 0 0;
    }
    
    #commissions tr.odd{
        background-color: #FFFFE0;
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    #commissions thead th{
        
    }
    
    #commissions td,
    #commissions th {
        padding:3px 7px 0px 10px;
    }
    
    #commissions td{
        
    }
    
    #commissions tfoot th{
        color: #666666;
        font-size: 1.1em;
        padding: 12px;
    }

/*--------------------------------------------------------------------------------------------------------------------------------*/
/* ORDER general styles
/*--------------------------------------------------------------------------------------------------------------------------------*/
#order_content {
    padding:10px;
    width:600px;
    display:flex;
    flex-direction:column;
}

.intro_shop,
.intro_shop a,
.intro_shop {
    color:#777;
}

    .intro_shop, .webshop_options {
        text-align:center;
    }

    #bag {
        background:url("../img/page_shop_sprites.png") no-repeat scroll 11px -194px transparent;
        display:block;
        height:290px;
        margin:0 -9px;
        width:auto;
    }
    
        #bag span {
            background: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(224,224,172)),
                color-stop(1, rgb(255,255,199))
            );
            background: -moz-linear-gradient(
                center bottom,
                rgb(224,224,172) 0%,
                rgb(255,255,199) 100%
            );
            border-color: #DFDFC3;
            border-style: solid;
            border-width: 0 1px;
            display: block;
            height: 30px;
            margin: 0 0 0 36px;
            position: absolute;
            width: 245px;
            z-index: 5;
        }
        
    #order_icons {
        background: url("../img/page_shop_sprites.png") no-repeat scroll 79px -615px transparent;
        display: block;
        height: 115px;
        width: auto;
    }
        
#order_stage_wrapper {
    padding:10px;
    width:617px;
}
    
    /*--------------------------------------------------------------------------------*/
    /* Progress tracker
    /*--------------------------------------------------------------------------------*/
    #progress_wrapper {
        background-color:#F7F7F7;
        margin-bottom:2em;
        padding:10px;
        position:relative;
        z-index:0;
        display:flex;
        justify-content: center;
        flex-wrap: nowrap;
    }
    @media all and (max-width: 480px) {
        #progress_wrapper {
            /* fix for IOS small screen */
             padding: 5px;
        }
    }
        
    
        #progress_wrapper li {
            border-top:3px solid #999999;
            display:inline-block;
            font-size:1.2em;
            margin-right:-3px;
            margin-top:13px;
            padding:7px 0;
            text-align: center;
        }
            .step1 {background:url("../img/page_shop_sprites.png") no-repeat 24px 4px transparent;width: 141px;}
            .step2 {background:url("../img/page_shop_sprites.png") no-repeat -4px -33px transparent;width: 150px;}
            .step3 {background:url("../img/page_shop_sprites.png") no-repeat -18px -72px transparent;width: 146px;}
            .step4 {background:url("../img/page_shop_sprites.png") no-repeat -33px -109px transparent;width: 141px;}

            #progress_wrapper li.passed,
            #progress_wrapper li.current {
                border-color:#0077B2;
            }

            #progress_wrapper li.current {
        
            }
            
                #progress_wrapper li.current a{

                }
    
            .progress_cart {
                float:right;
                height:21px;
                margin:-18px -4px 0 -19px;
                width:21px;
            }
            
                #progress_wrapper li.current .progress_cart {
                    background:url("../img/ico/ico_cart.png") no-repeat 0 0 transparent;
                }
            
            #progress_wrapper li a,
            .progress_txt {
                color:#444;
            }

    /*--------------------------------------------------------------------------------*/
    /* Order summary(Shopping cart)
    /*--------------------------------------------------------------------------------*/    
    #order_summary {
        -moz-border-radius:5px 5px 0 0;
        -webkit-border-radius:5px 5px 0 0;
        border-radius:5px 5px 0 0;
        background: #FFFFDF;
        background: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(255,255,189)),
            color-stop(0.7, rgb(255,255,223))
        );
        background: -moz-linear-gradient(
            center bottom,
            rgb(255,255,189) 0%,
            rgb(255,255,223) 70%
        );
        border-color: #DFDFC3;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        display:block;
        margin:14px 0 -30px 27px;
        padding:10px 10px 35px;
        position:relative;
        width:225px;
        z-index:1;
        -webkit-box-shadow: inset 1px 1px 1px #FFF;
        -moz-box-shadow: inset 1px 1px 1px #FFF;
        box-shadow: inset 1px 1px 1px #FFF;
    }    
    
        #order_summary h2 {
            background:url("../img/page_shop_sprites.png") no-repeat scroll -266px -148px transparent;
            color:#444444;
            font-size:1.5em;
            line-height:31px;
            margin-bottom:0.3em;
            padding-left:43px;
        }
        
        #order_summary ul {
            margin:10px 0;
        }
        
        #order_summary li {
            background:#FFFFF4;
            background:rgba(255,255,255,0.7);
            background:none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
            border:1px solid #CECF81;
            color:#666;
            font-size:1.1em;
            line-height: 1.6em;
            margin-bottom:5px;
            min-height:30px;
            padding:3px 5px;
        }
        
            #order_summary li strong,
            #order_summary li em {
                color:#444;
                font-size:1.1em;
            }
            
            #order_summary li span.cart_price{}
        
            .remove_product_link {
                background:url("../img/page_shop_sprites.png") no-repeat scroll 2px -487px transparent;
                display:block;
                float:right;
                height:19px;
                margin-top:3px;
                text-indent:-999em;
                width:20px;
            }
        
            .remove_product_link:hover {
                background:url("../img/page_shop_sprites.png") no-repeat scroll -277px -487px transparent;
            }
        
        #order_summary hr {
            background-color: #DFDFC3;
            border-color: transparent transparent #ffffdf;
            border-style: none none solid;
            border-width: 0 0 1px;
            height: 2px;
        }
        
        p.order_summary_total {
            margin-bottom:5px;
            text-align:right;
        }
        
            p.order_summary_total em {
                font-size:0.9em;
                margin-right:2px;
            }
        
            p.order_summary_total small {
                color: #9E9F63;
                font-size: 0.9em;
                font-style: italic;
                margin-right: 2px;
            }
            
        #order_submit {
            width:196px;
        }
        
        #order_cancel {
            background:url("../img/page_shop_sprites.png") no-repeat scroll 5px -483px transparent;
            color:#666666;
            display:inline-block;
            float:right;
            font-size:1.2em;
            line-height:20px;
            margin-bottom:10px;
            margin-top:5px;
            padding:3px 5px 3px 25px;
            text-align:right;
            text-decoration:none;
        }
        
            #order_cancel:hover {
                background:url("../img/page_shop_sprites.png") no-repeat scroll -274px -483px #9F9F9F;
                color:#fff;
            }
            
        #order_summary_add_products {
            text-align:center;
        }
        
            #order_summary_add_products a {
                font-size:1.1em;
                font-weight:normal;
                margin:-6px 2px 0;
                padding:3px 8px 3px 6px;
                text-decoration:none;
            }
        
    /*--------------------------------------------------------------------------------*/
    /* Config selection buttons
    /*--------------------------------------------------------------------------------*/
    fieldset.config_input {
        border: 1px solid #CCCCCC;
        display: inline-block;
        margin: 0 0 15px;
        padding: 10px 10px 10px 8px;
        width: 90%;
    }
    .config_select {
        background:#F7F7F7; /* Fallback */
        background: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(247,247,247)),
            color-stop(0.65, rgb(255,255,255))
        );
        background:
        -moz-linear-gradient(
            center bottom,
            rgb(247,247,247) 0%,
            rgb(255,255,255) 65%
        );
        border:1px solid #CCCCCC;
        display:inline-block;
        font-size:1.3em;
        margin: 0 0 15px;
        padding: 10px 10px 10px 8px;
        width:577px;
     }
     
    .config_select.selected {
        background:#EFFAFF;
        background: -webkit-gradient(linear, left top, left bottom, from(#dff5ff), to(#EFFAFF));
        background: -moz-linear-gradient(top, #dff5ff,  #EFFAFF);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dff5ff', endColorstr='#EFFAFF');
        border-color:#B3D8EA;
     }
     
        .config_select:hover {
            border-color:#8BC3DF; 
            background:rgb(236,248,254); /* Fallback */
            background: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(236,248,254)),
                color-stop(0.65, rgb(255,255,255))
            );
            background:
            -moz-linear-gradient(
                center bottom,
                rgb(236,248,254) 0%,
                rgb(255,255,255) 65%
            );
         }
     
        .config_select strong {
            color:#006A9F;
            text-decoration:underline;
        }
     
        .config_select  span {
            color:#444444;
            display:block;
            font-size:0.9em;
        }    

        .config_select fieldset {
            background-color:#FFFFF5;
            /*
            background: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(255,255,255)),
                color-stop(0.65, rgb(247,247,247))
            );
            background:
            -moz-linear-gradient(
                center bottom,
                rgb(255,255,255) 0%,
                rgb(247,247,247) 65%
            );*/
            border:1px solid;
            border-color:#CCCCCC #EAEAEA #EAEAEA #CCCCCC;
            font-size:0.7em;
            margin:5px 28px 0;
            padding:5px;
            width:auto;
        }

            .config_select fieldset label {
                padding:16px 0 10px 21px;
                text-align:left;
            }

        .submit_wrapper {
            margin-top:1.5em;
            min-height:34px;
            padding:10px;
        }
        
            .submit_wrapper p {
                clear:left;
                color:#888888;
                float:left;
                line-height:33px;
                margin:0;
            }
        
            .submit_wrapper .loading {
                background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
                display: inline;
                float: right;
                height: 16px;
                margin: 8px 10px 0 0;
                width: 16px;
            }
        
            .submit_wrapper .button {
                float:right;
                font-size: 1.3em;
            }

            @media all and (max-width:767px){
                
            }





/*--------------------------------------------------------------------------------------------------------------------------------*/
/* ORDER STEPS
/*--------------------------------------------------------------------------------------------------------------------------------*/
    
    /*--------------------------------------------------------------------------------*/
    /* 1. Order index (winkelen)
    /*--------------------------------------------------------------------------------*/    
    #order_index_continue,
    #order_index_continue:visited {
        -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 2px #444444;
        -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 2px #444444;
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 2px #444444;
        background:url("../img/page_shop_sprites.png") no-repeat 18px -531px #0078a5 !important; /* Fallback */
        background: 
            url("../img/page_shop_sprites.png") no-repeat 18px -531px,
            -webkit-gradient(linear, left top, left bottom, from(#3197CA), to(#0078a5)) !important;  /* Colors from blue buttons in global.css */
        background: 
            url("../img/page_shop_sprites.png") no-repeat 18px -531px,
            -moz-linear-gradient(top,  #3197CA,  #0078a5) !important;  /* Colors from blue buttons in global.css */
        border: 1px solid #0076A3;
        font-family: 'Trebuchet MS',Helvetica,Tahoma,Arial !important;
        font-size: 1.2em;
        margin: 2em 0 0.3em 168px;
        padding: 10px 10px 10px 70px;
        text-align: left;
        width: 163px;
    }    
    
        #order_index_continue:hover {
            -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 5px #444444;
            -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 5px #444444;
            box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 5px #444444;
            background:url("../img/page_shop_sprites.png") no-repeat 18px -531px #0095cd !important; /* Fallback */
            background: 
                url("../img/page_shop_sprites.png") no-repeat 18px -531px,
                -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)) !important;  /* Colors from blue buttons in global.css */
            background: 
                url("../img/page_shop_sprites.png") no-repeat 18px -531px,
                -moz-linear-gradient(top,  #0095cc,  #00678e) !important;  /* Colors from blue buttons in global.css */
        }
    
            #order_index_continue span{
                font-size: 0.8em;
                font-weight: normal;
                margin: 7px 0 0;
                color: #fff !important;
            }
        
            #order_index_continue strong{
                font-size: 1em;
                color:#fff;
            }
    
    a.product_select {
        -moz-box-shadow: 0 0 3px #CCCCCC;
        -webkit-box-shadow: 0 0 3px #CCCCCC;
        box-shadow: 0 0 3px #CCCCCC;
        background:url("../img/page_shop_sprites.png") no-repeat -247px 21px transparent;
        border:1px solid #CCCCCC;
        display:inline-block;
    /*    margin:1em 0 0.3em 80px; */
        margin: 1em auto 0.3em;
        min-height:40px;
        padding:10px 10px 10px 70px;
        text-decoration:none;
        width:340px;
        text-align:center;
    }
     
         a.product_select:hover {
            -moz-box-shadow: 0 0 2px #444;
            -webkit-box-shadow: 0 0 2px #444;
            box-shadow: 0 0 2px #444;
            border-color:#8BC3DF; 
            background:url("../img/page_shop_sprites.png") no-repeat -247px 21px rgb(236,248,254); /* Fallback */
            background: url("../img/page_shop_sprites.png") no-repeat -247px 21px,
            -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(236,248,254)),
                color-stop(0.65, rgb(255,255,255))
            );
            background: url("../img/page_shop_sprites.png") no-repeat -247px 21px,
            -moz-linear-gradient(
                center bottom,
                rgb(236,248,254) 0%,
                rgb(255,255,255) 65%
            );
         }
        
    a.product_select.unavailable {
        background-color: #eee;
        opacity: 0.5; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
        filter: alpha(opacity=50); /* IE6-IE8 */
    }
        
        a.product_select.unavailable:hover {
            background: url("../img/page_shop_sprites.png") no-repeat -247px 21px #eee !important;
            border-color:#ccc; 
        }
     
            a.product_select strong {
                text-decoration:underline;
            }
         
            a.product_select span {
                color:#444444;
                display:block;
                font-size:0.9em;
            }
        
        #login_link.product_select {
            background: url("../img/page_shop_sprites.png") no-repeat 22px -520px #dff5ff;
            background: url("../img/page_shop_sprites.png") no-repeat 22px -520px,
            -moz-linear-gradient(top, #dff5ff,  #EFFAFF);
            background:  url("../img/page_shop_sprites.png") no-repeat 22px -520px,
            -webkit-gradient(linear, left top, left bottom, from(#dff5ff), to(#EFFAFF));
        }
        
            #login_link.product_select:hover {
                border-color:#8BC3DF; 
                background:url("../img/page_shop_sprites.png") no-repeat 22px -520px rgb(236,248,254); /* Fallback */
                background: url("../img/page_shop_sprites.png") no-repeat 22px -520px,
                -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0, rgb(236,248,254)),
                    color-stop(0.65, rgb(255,255,255))
                );
                background: url("../img/page_shop_sprites.png") no-repeat 22px -520px,
                -moz-linear-gradient(
                    center bottom,
                    rgb(236,248,254) 0%,
                    rgb(255,255,255) 65%
                );
             }
    
    /*--------------------------------------------------------------------------------*/
    /* 2. Domaincheck
    /*--------------------------------------------------------------------------------*/    
    
        /*--------------------------------------------------------------------------------*/
        /* Domainchecker
        /*--------------------------------------------------------------------------------*/        
        #onpage_domaincheck {
            -moz-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            -webkit-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            background-color:#f2f2f2;
            background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
            background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
            border-color:#fff;
            height:auto;
            margin:2em 0 !important;
            padding:14px;
            position:relative;
            z-index:2;
            width: auto;
        }
        
            #onpage_domaincheck form {
                display: flex;
                flex-direction: inherit;
            }
        
            #onpage_domaincheck label {
                color:#888;
                font-size:1.4em;
            }
            
            #onpage_domaincheck_input {
                flex-grow: 1;
            }
            
            #domain_external_input {
                width: 288px;
            }
            
            #onpage_domaincheck_input,
            #domain_external_input,
            #onpage_domaincheck_select {
                border:1px solid #CCCCCC;
                color:#00608F;
                font-size:1.5em;
                height:24px;
                margin:0 9px 0 0;
                padding: 6px 28px 6px 7px;
            }


            
                #onpage_domaincheck_input.loading {
                    background:url("../img/loading.gif") no-repeat scroll 298px center #fff;
                }
            
            #onpage_domaincheck_input.default {
                color:#777;
                font-style:italic;
            }    
            
            #onpage_domaincheck_select {
                border:1px solid #CCCCCC;
                color:#00608F;
                font-size:1.5em;
                height: 37px;
                margin:0 5px 0 0;
                padding:8px 10px 10px 7px;
            }

            #onpage_domaincheck_button{
                float:right;
                margin-top:-1px;
            }

            #onpage_domaincheck_button:active{
                opacity:0.5;
                outline:none;
            }
            
        /*--------------------------------------------------------------------------------*/
        /* Domainchecker results
        /*--------------------------------------------------------------------------------*/
        #domain_head {
            margin-top:1.2em;
        }
        
            #domain_head span {
                color:#004A6F;
            }
        
        #domain_results_wrapper {
            -moz-border-radius:0 0 5px 5px;
            -webkit-border-radius:0 0 5px 5px;
            border-radius:0 0 5px 5px;
            -moz-box-shadow:1px 1px 5px #FFFFFF inset;
            -webkit-box-shadow:1px 1px 5px #FFFFFF inset;
            -o-box-shadow:1px 1px 5px #FFFFFF inset;
            box-shadow:1px 1px 5px #FFFFFF inset;
            background-color:#FFF5B6;
            border-color:#D6A103;
            border-style:solid;
            border-width:0 1px 1px;
            margin-left:10px;
            margin-bottom:2em;
            padding:10px;
            width: auto;
            z-index:0;
        }
        
        #domain_results_wrapper.free {
            background:#e1ffdd;
            border-color:#9FBF9B;
        }
        
            #domain_results_wrapper h2 {
                background:url("../img/ico/ico_warning_yellow.png") no-repeat scroll 0 2px transparent;
                color:#695005;
                font-size:1.7em;
                font-weight:bold;
                line-height:22px;
                margin:3px 0;
                padding-left:24px;
            }
        
            #domain_results_wrapper.free h2 {
                background:url("../img/ico/ico_confirm_green.png") no-repeat scroll 0 1px transparent;
                color:#236f1a;
            }
        
            #domain_results_wrapper p {
                margin-bottom:0;
            }
        
            #domain_results_wrapper a {
                color:#695005;
            }
        
            #domain_results_wrapper.free a {
                color:#236f1a;
            }
            
            #domain_results_wrapper p.small {
                font-size: 1.1em;
            }            
            
            .domain_results_table {
                margin:1em 0;
            }
            
                .domain_results_table td {
                    background-color:#fff;
                    background-color:rgba(255,255,255,0.7);
                }
            
                .domain_results_table td.tld {
                    -moz-border-radius:5px 0 0 5px;
                    -webkit-border-radius:5px 0 0 5px;
                    border-radius:5px 0 0 5px;
                    background-color:#444;
                    background-color:rgba(0,0,0,0.3);
                    color:#fff;
                    text-align:center;
                }
            
                .domain_results_table td.price {
                    background-color:rgba(0,0,0,0.2);
                    color:#000;
                    text-align:center;
                }
                
                .domain_results_table td.domain {
                    font-size:1.4em;
                    padding:2px 10px 3px;
                }
                
                .domain_results_table td .button {
                    font-size:1em;
                }            
                    
    /*--------------------------------------------------------------------------------*/
    /* 2. Packages
    /*--------------------------------------------------------------------------------*/
    
    /* Pricing table 
       Rewriting Styles from global.css
    */


    div.pricing {
        margin: 0 auto;
        max-width:99%;
        display:flex;
        justify-content: space-around;
        flex-wrap:wrap;
    }

    div.pricing_plan {
        display:inline-block;
        text-align:center;
        width:130px;
        margin: 0 auto 2em;
        border-radius: 25px;
    }

    /* fix for visual regression on larger screens */
    @media all and (min-width:992px) {

        div.pricing {
            flex-wrap:nowrap;
        }

        div.pricing_plan {
            width:150px;
        }

        div.pricing ._1{
            border-radius: 10px 0px 0px 0px !important;
        }

        div.pricing ._2, div.pricing ._3{
            border-radius: 0px !important;
        }

        div.pricing ._4{
            border-radius: 0px 10px 0px 0px !important;
        }

    }

    div.pricing .price{
        background-color:#0078B3;
        background: -webkit-gradient(linear, left top, left bottom, from(#0078B3), to(#098CCE));
        background: -moz-linear-gradient(top,  #0078B3,  #098CCE);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078B3', endColorstr='#098CCE');

        border-right:1px solid #0078B3;
        border-bottom:4px solid #006A9F;
        border-radius: 10px 10px 0px 0px;

        color:#fff;

        font-size:1.8em;
        line-height:1.2em;
        padding:10px 0;
        text-shadow:0 1px 1px #111111;
    }
        div.pricing .price span {
            font-size:0.9em;
            font-weight:bold;
            color:#C7EAFB;
            margin-top:5px;
        }

    div.pricing ul {
        background-color:#f2f2f2;
        background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
        background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
    }

        div.pricing ul li:hover{
            background:#f2f2f2 !important;
            background:rgba(0,0,0,0.07) !important;
        }

        div.pricing ul li{
            background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
            background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
            border-bottom:1px solid #CCCCCC;
            border-top:1px solid #FFFFFF;
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;
            font-size:1.1em;
            padding:5px;
            text-shadow:1px 1px 1px #FFFFFF;
        }

        div.pricing span.help {
             display:block;
        }
       
        div.pricing ul li .buttons {
            font-size:1.2em !important;
            margin:5px 0;
        }

    /* responsiveness of pricing table */

    @media all and (max-width: 993px) {
        div.pricing_plan {
            width:120px;
        }
    }


    @media all and (max-width: 768px) {
        div.pricing_plan {
            width:120px;
        }

    }

    @media all and (max-width: 480px) {
        div.pricing_plan {
            width:auto;
        }   
    }

    /* Pricing table 
       See global.css for more styles
    */

        #pricing_shop li div.radio {
            display:none;
        }

        #pricing_shop li.hover {
            background: -webkit-gradient(linear, left top, left bottom, from(#E4E4E4), to(#FCFEFF));
            background: -moz-linear-gradient(top,  #E4E4E4,  #FCFEFF);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E4E4E4', endColorstr='#FCFEFF');        
        }
        
        #pricing_shop li.highlight {
            background: -webkit-gradient(linear, left top, left bottom, from(#D3D3D3), to(#e4e4e4));
            background: -moz-linear-gradient(top,  #D3D3D3,  #e4e4e4);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D3D3D3', endColorstr='#e4e4e4');
        }
        
        #pricing_shop th.highlight {
            border-bottom:4px solid #00557C;
        }
        
        #pricing_shop .check span:first-of-type {
            background: url("../img/ico/ico_check.png") no-repeat scroll left center transparent;
            display: inline-block;
            text-indent: 1.3em;
        }
        
        /* Existing domain option */            
        .config_select #domain_account.fail,
        .config_select #domain_cart.fail {
            border-color:#BF0000 !important;
        }
        
        #domain_cart_message,
        #domain_account_message {
            display: inline-block;
            margin: 0 0 5px 22px;
        }
        
            #domain_cart_message.fail,
            #domain_account_message.fail {
                color:#BF0000 !important;
            }
        
        /* New-domain option */
        #domain_new_wrapper,
        #domain_external_wrapper {
            margin:5px 0 5px 29px;
        }
        
            #domain_new_wrapper input[type="text"],
            #domain_external_wrapper input[type="text"]{
                font-size:1.1em;
                height:20px;
                padding:4px 10px 4px 7px;
                width:250px;
            }
        
            #domain_new_wrapper #onpage_domaincheck_input.loading {
                background:url("../img/loading.gif") no-repeat scroll 243px center #FFFFFF;
            }
            
            #domain_new_wrapper #onpage_domaincheck_input.fail,
            #domain_external_wrapper #domain_external_input.fail {
                border-color:#BF0000 !important;
            }
            
            #domain_new_wrapper select {
                font-size:1.1em;
                height:30px;
                padding:4px 6px 4px 7px;
            }
            
            #domain_new_wrapper #onpage_domaincheck_button {
                margin:0 30px 0 0;
                width:69px;
            }
            
            #domain_new_wrapper #result,
            #domain_external_wrapper #domain_external_input_message {
                background-color:#FFFFF5;
                display:none;
                font-size:1em;
                font-weight:bold;
                margin:5px 0 0 -5px;
                padding:5px;
            }
            
                #domain_new_wrapper #result span{
                    display:inline;
                }
                
                #domain_new_wrapper #result span.fail,
                #domain_external_wrapper #domain_external_input_message span.fail {
                    color:#BF0000 !important;
                }
            
            #domain_new_wrapper #result.free {
                background-color:#E1FFDD;
            }
            
            #domain_new_wrapper #result.notfree {
                background-color:#FFF5B6;
            }
                     


    /*--------------------------------------------------------------------------------*/
    /* 3. VPS
    /*--------------------------------------------------------------------------------*/
    
    #vps_types{
        margin-bottom: 1em;
    }

        #vps_types li {
            display: block;
            float: left;
        }
        
            #vps_types div.radio {
                display: none;
            }    
    
            #vps_types .button {
                padding: 10px 0;
                margin-left: 10px;
                width: 107px; /* CHANGE THIS WIDTH IF WE HAVE MORE THAN 4 PACKAGES */
                -webkit-transition: 0.3s linear all;
                -moz-transition: 0.3s linear all;
                -ms-transition: 0.3s linear all;
                -o-transition: 0.3s linear all;
                transition: 0.3s linear all;                
            }    
    
            #vps_types li:first-child .button {
                margin-left: -3px;
            }    
    
                #vps_types .button .package_name,
                #vps_types .button .package_price {
                    display: block;
                }
                
                #vps_types .button .package_name {
                    color: #fff;
                    font-size: 1.7em;
                    margin-bottom: 4px;
                }    
    
                #vps_types .button .package_price {
                    color: #ccc;
                    font-size: 1.2em;
                }    
                
    #vps_package_configuration {
        -moz-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
        -webkit-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
        box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
        background-color:#f2f2f2;
        background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
        background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
        border-color:#fff;
        margin:2em 0 0 !important;
        padding:15px 20px;
        position:relative;
        z-index:2;
    }    
    
        /* Slider styles from jquery UI*/
        .ui-slider { position: relative; text-align: left; }
        .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
        .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

        .ui-slider-horizontal { height: .8em; }
        .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
        .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
        .ui-slider-horizontal .ui-slider-range-min { left: 0; }
        .ui-slider-horizontal .ui-slider-range-max { right: 0; }

        .ui-slider-vertical { width: .8em; height: 100px; }
        .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
        .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
        .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
        .ui-slider-vertical .ui-slider-range-max { top: 0; }
    
        .vps_slider_wrapper {
            height: 55px;
            margin-bottom: 1em;
        }

            .vps_slider_label {
                display: block;
                float: left;
                font-size: 1.3em;
            }
            
                .vps_slider_label .unit_wrapper {
                    display: block;
                }
                
            .vps_slider_wrapper .vps_slider {
                background: none repeat scroll 0 0 #C7C7C7;
                background: none repeat scroll 0 0 rgba(0, 0, 0, 0.13);
                border: 1px solid #CCCCCC;
                -webkit-box-shadow: 0 1px 1px #FFFFFF, 0 1px 1px #999999 inset;
                -moz-box-shadow: 0 1px 1px #FFFFFF, 0 1px 1px #999999 inset;
                box-shadow: 0 1px 1px #FFFFFF, 0 1px 1px #999999 inset;
                display: block;
                float: right;
                height: 11px;
                margin-top: 25px;
                padding: 5px;
                width: 450px;
            }
                
                .vps_slider_wrapper .vps_slider .ui-widget-header {
                    background: #0095cd;
                    background: -webkit-gradient(linear, left top, left bottom, from(#3197CA), to(#0078a5));
                    background: -moz-linear-gradient(top,  #3197CA,  #0078a5);
                    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3197CA', endColorstr='#0078a5');
                    -moz-border-radius: 3px 0 0 3px;
                    -webkit-border-radius: 3px 0 0 3px;
                    border-radius: 3px 0 0 3px;
                    -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4) inset;
                    -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4) inset;
                    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.4) inset;
                    height: 10px;
                    margin: 6px;
                }
                
                    .vps_slider_wrapper .vps_slider .ui-slider-handle:active,
                    .vps_slider_wrapper .vps_slider .ui-slider-handle {
                        background: url("../img/page_shop_sprites.png") repeat-x scroll -14px -910px #D0E5F5;
                        border: 1px solid #FFFFFF;
                        -webkit-border-radius: 5px 5px 5px 5px;
                        -moz-border-radius: 5px 5px 5px 5px;
                        border-radius: 5px 5px 5px 5px;
                        -webkit-box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset;
                        -moz-box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset;
                        box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset;
                        cursor: col-resize;
                        height: 27px;
                        opacity: 1;
                        margin-left: -14px;
                        width: 20px;
                    }
                    
                    .vps_slider_wrapper .vps_slider .ui-state-hover,
                    .vps_slider_wrapper .vps_slider .ui-state-focus {
                        background: url("../img/page_shop_sprites.png") repeat-x scroll -61px -910px #D0E5F5;
                        border: 1px solid #999;
                        outline: medium none;
                    }
                    
                    .vps_slider_wrapper .vps_slider .ui-state-focus {
                        -webkit-box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset, 0 0 5px 1px #3197CA;
                        -moz-box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset, 0 0 5px 1px #3197CA;
                        box-shadow: 0 1px 1px #999999, 0 1px 1px #FFFFFF inset, 0 0 5px 1px #3197CA;
                    }
                    
    .vps_metric_wrapper {
        border-top: 1px solid #FFFFFF;
        -webkit-box-shadow: 0 -1px 0 #CCCCCC;
        -moz-box-shadow: 0 -1px 0 #CCCCCC;
        box-shadow: 0 -1px 0 #CCCCCC;
        font-size: 1em;
        margin-top: 20px;
        padding-top: 5px;
    }    
    
        .vps_metric_wrapper li{
            display: block;
            float: left;
            margin-top: 10px;
            font-size: 1.3em;
            width: 130px;
        }    
            
    .vps_metric_wrapper strong,
    .vps_slider_label strong {
        color: #555;
        font-weight: normal;
        text-shadow: 0 1px 1px #fff;
    }
    
    #VPSDiskspace,
    #VPSMemory,
    .min_traffic_metric,
    .minimum_snapshot_metric,
    .minimum_cpu_metric,
    .max_vps_servers {
        color: #3197CA;
        display: block;
        float: left;
        font-size: 1.7em;
        font-weight: bold;
        line-height: 1em;
        text-shadow: 0 1px 1px #FFFFFF;
    }
    
        span.unit {
            color: #222222;
            display: block;
            float: left;
            font-size: 1.1em;
            font-weight: bold;
            height: 15px;
            line-height: 15px;
            margin: 0 0 0 3px;
            text-shadow: 0 1px 1px #FFFFFF;
            text-transform: uppercase;
        }
    
    /* VPS configuration accordion */
    #vps_template_configuration .configuration_item {
        margin: 0 0 10px;
    }
    
        #vps_template_configuration div.title {
            -moz-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            -webkit-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
            background-color:#f2f2f2;
            background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
            background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
            border-color:#fff;
            border-style: solid;
            border-width: 1px;
            color:#555;
            cursor: pointer;
            font-size: 1.4em;
            padding: 10px;
            text-shadow: 0 1px 1px #FFFFFF;
            text-align:right;
            height: 23px;
        }
        
            #vps_template_configuration div.title:hover {
                background: url("../img/page_shop_sprites.png") repeat-x 22px -752px #d4d5d5;
            }
            
            #vps_template_configuration div.title.ui-state-active {
                -moz-box-shadow:0 0 1px #0686C6;
                -webkit-box-shadow:0 0 1px #0686C6;
                box-shadow:0 0 1px #0686C6;
                background:url("../img/page_header_bg.png") repeat-x scroll center top #FFFFFF !important;
                filter: none;
                border-color:#fff;
                color:#fff;
                text-shadow: none;
            }
            
                #vps_template_configuration div.title em.selected {
                    color: #222;
                    font-size: 0.9em;
                    margin-left: 3px;
                }
                
                    #vps_template_configuration div.title.ui-state-active em.selected {
                        color: #DFF5FF;
                    }
            
                #vps_template_configuration div.title span {
                    background: url("../img/page_shop_sprites.png") no-repeat -223px -947px transparent;
                    float: left;
                    padding-left: 25px;
                }
            
                    #vps_template_configuration div.title:hover span {
                        background-position: -253px -917px;
                    }
        
                    #vps_template_configuration div.title.ui-state-active:hover span,
                    #vps_template_configuration div.title.ui-state-active span {
                        background-position: -285px -896px;
                    }
        
                    #vps_template_configuration #step1,
                    #vps_template_configuration #step2,
                    #vps_template_configuration #step3,
                    #vps_template_configuration #step4,
                    #vps_template_configuration #step5 {
                        background: url("../img/page_shop_sprites.png") no-repeat scroll 5px -1px transparent;
                        display: block;
                        float: right;
                        height: 20px;
                        width: 20px;
                    }
        
                        #vps_template_configuration #step2 {background-position: -12px -38px;}
                        #vps_template_configuration #step3 {background-position: -32px -77px;}
                        #vps_template_configuration #step4 {background-position: 5px -1px;}
                        #vps_template_configuration #step5 {background-position: 5px -1px;}
    
    /* Config options */
    #vps_template_configuration div.options {
        border-left: 8px solid #EEEEEE;
        margin-left: 4px;
        margin-top: 1px;
        padding: 15px;
    }
    
        /* Config OS family & template blocks */
        #vps_template_configuration .config_select {
            width: auto;
        }
        
        #vps_template_configuration #templates .config_select { 
            width: 537px;
        }
        
            #vps_template_configuration #templates .config_select.selected { 

            }
                
                /* (Not) recommended OS choices */
                #vps_os_choice .recommended {
                    
                }
                
                    #vps_template_configuration .recommended .option_description strong:after {
                        background: url("../img/ico/ico_star.png") no-repeat scroll 5px 4px #FFFFCA;
                        border: 1px solid #E8E8A7;
                        -webkit-border-radius: 5px 5px 5px 5px;
                        -moz-border-radius: 5px 5px 5px 5px;
                        border-radius: 5px 5px 5px 5px;
                        color: #333333;
                        content: "Beste keuze";
                        display: inline-block;
                        font-size: 0.9em;
                        font-weight: bold;
                        margin-left: 5px;
                        padding: 0 9px 0 18px;
                        text-decoration: none !important;
                    }
                
                    #link_show_not_recommended {
                        font-weight: bold;
                    }
                    
                        #link_show_not_recommended:before {
                            color: #000000;
                            content: "+";
                            display: block;
                            float: left;
                            font-weight: bold;
                            padding: 0 5px 0 0;
                            text-align: center;
                            text-decoration: none;
                            width: 7px;
                        }
                    
                        #link_show_not_recommended.open:before {
                            content: "-";
                        }
                
                #vps_os_choice .not_recommended {
                    display: none;
                }

    
                /* Blocks content */
                #vps_template_configuration .config_select .option_description {
                    color: #666;
                    font-size: 0.9em;
                    overflow: auto;
                }
        
                    #vps_template_configuration .option_description a {
                        color: #666;
                    }
        
                    #vps_template_configuration .option_description strong {
                        display: block;
                        font-size: 1em;
                        text-transform: capitalize;
                    }
                
                /* OS Family thumbs */
                #vps_os_choice .os {
                    background:url("../img/linux_distros.png") no-repeat scroll 0px 0px #fff;
                    border: 1px solid #EEEEEE;
                    float: right;
                    height: 75px;
                    margin: 3px 3px 0 10px;
                    text-indent: -999em;
                    width: 100px;
                }                    
                        #vps_os_choice span.debian {background-position: 24px 6px;}
                        #vps_os_choice span.ubuntu {background-position: -67px 6px;}
                        #vps_os_choice span.fedora {background-position: -164px 6px;}
                        #vps_os_choice span.centos {background-position: -259px 5px;}
                        #vps_os_choice span.opensuse {background-position: -367px 4px;}
                        #vps_os_choice span.scientific {background-position: -466px 5px;}
    
        /* VPS Specs form */    
        #vps_template_configuration fieldset {
            margin: 0 !important;
            padding: 10px 0 0;
            width: auto;
        }
        
            #vps_template_configuration li {
                width: 95%;
            }
        
                #vps_template_configuration label {
                    width: 192px;
                }
                    
        /* Validations */        
        #vps_template_configuration .options .fail {
            background-color: #FFF5B6;
            color: #6F0000 !important;
            font-size: 1.3em;
            font-weight: bold;
            margin: 0 0 15px;
            padding: 10px;
        }
        
        #vps_specs_fields span.error {
            display: block;
            margin: -8px 57px 0 0;
            min-height: 17px;
            padding: 10px;
            position: relative;
            width: 245px;
        }
            
    /*--------------------------------------------------------------------------------*/
    /* 4. Advanced domain config
    /*--------------------------------------------------------------------------------*/        

    #domain_config_advanced {
        font-size: 1.3em;
    }
    
    #domain_config_submit {
        font-size: 1em;
    }
    
    #domain_config_advanced div.options {
        border-left: 8px solid #CCCCCC;
        margin-left: 5px;
        padding: 5px;
    }
    
        #domain_config_advanced div.options > p {
            color: #0077B2;
            font-size: 1.3em;
            font-weight: bold;
            margin: 10px 0 0 5px;
        }
    
    #domain_config_advanced fieldset {
        background-color: transparent;
        border-color: transparent;
        margin-bottom: 5px;
        font-size: 1.3em;
        padding: 5px 0 0 5px;
    }
    
        #domain_config_advanced fieldset > label {
            float: none;
            font-size: 1em;
            line-height: 23px;
            padding: 6px 5px 0 0;
            text-align: left;
            width: auto;
        }
    
        #domain_config_advanced p {
            font-size: 1em;
        }
    
        #domain_config_advanced h3 {
            font-size: 1.1em !important;
            margin-bottom: 0.2em;
        }
    
            #domain_config_advanced h3:first-letter,
            #domain_config_advanced h3 span:first-letter {
                text-transform: capitalize;
            }
    
        #domain_config_advanced hr {
            clear:both;
            height:1px;
            border:0;
            color:#ccc;
            margin-top:10px;
        }
    
        #domain_config_advanced select {
            font-size:1em;
            padding: 3px;
        }
    
        #domain_config_advanced .config_options_wrapper {
            display: none;
            margin-left: 28px;
            height: 200px;
        }
    
        #domain_config_advanced .config_options_wrapper.visible {
            display:block;
        }
    
            #domain_config_advanced .config_options {
                background-color: #FFFFF5;
                border: 1px solid #EFEFE0;
                margin-top: 1em;
                overflow: auto;
                padding: 20px;
            }
        
                #domain_config_advanced span.more{
                    color:#777;
                    font-size: 0.9em;                
                }
        
                    #domain_config_advanced span.more span.domain_full_name {
                        color: #555555;
                    }
        
                #domain_config_advanced .config_options label{
                    clear:both;
                    float: left;
                    font-size: 1em;
                    font-weight: bold;
                    line-height: 26px;
                    padding: 3px;
                    text-align: left;
                    width: auto;
                }
        
                #domain_config_advanced .config_options input,
                #domain_config_advanced .config_options select{
                    background-color: #FFFFFF;
                    border-color: #8F8F8F #BFBFBF #BFBFBF #8F8F8F;
                    border-style: solid;
                    border-width: 1px;
                    color: #00608F;
                    display: block;
                    float:right;
                    font-size: 1.1em;
                    line-height: 1.4em;
                    margin:0 0 0 10px;
                    padding: 4px 6px;
                    position: relative;
                    width: 250px;
                    z-index: 1;
                }
                
                    #domain_config_advanced .config_options input:focus,
                    #domain_config_advanced .config_options select:focus{
                        background-color: #FEFEEE;
                    }
                
                    #domain_config_advanced .config_options input:hover,
                    #domain_config_advanced .config_options select:hover{
                        -webkit-box-shadow: 0 0 4px #1188C3;
                        -moz-box-shadow: 0 0 4px #1188C3;
                        box-shadow: 0 0 4px #1188C3;
                    }
        
                #domain_config_advanced .config_options li,
                #domain_config_advanced .config_options li.focus {
                    background: none;
                    border: 0 none;
                    font-size: 0.9em !important;
                    padding: 0;
                    width: auto;
                }
        
                    #domain_config_advanced .config_options li select{
                        float:left;
                    }
        
                    #domain_config_advanced .config_options .domain_full_name {
                        color: #004A6F;
                        line-height: 1.5em;
                    }
                    
                /* Validations */            
                #domain_config_advanced .config_options input.fail {
                    border-color:#BF0000 !important;
                }
            
                #domain_config_advanced #authcode_input_message {
                    background-color:#FFFFF5;
                    display:none;
                    font-size:1em;
                    font-weight:bold;
                    margin:5px 0 0 -5px;
                    padding:5px;
                }
                
                    #domain_config_advanced #authcode_input_message .fail {
                        color:#BF0000 !important;
                    }

            
    /*--------------------------------------------------------------------------------*/
    /* 5. Customer
    /*--------------------------------------------------------------------------------*/        
    #order_profile_wrapper fieldset {
        margin:20px 0;
        padding:0 0 10px;
        width:auto;
    }    
    
        #order_profile_wrapper legend {
            background-image:none!important;
            display:inline-block;
            margin:0 0 5px 5px !important;
            padding:5px 10px;
        }    
    
        #order_profile_wrapper ol > li {
            padding:0 0 0 53px;
            width:545px;
        }    
    
        #order_profile_wrapper #error_msg h4 {
            line-height:1.8em;
        }    
    
        #order_profile_wrapper span.error {
            width: 103px;
        }    

            #order_profile_wrapper span.error[for="UserHuisnr"] {
                margin: -1px 0 0 -423px;
                min-height: 39px;
                position: absolute;
            }
            
        /*--------------------------------------------------------------------------------*/
        /* Existing Customer
        /*--------------------------------------------------------------------------------*/    
        #welcome_existing_client .special {
            padding: 20px;
        }
            
            #welcome_existing_client .special h3 {
                color: #3F3F3F;
                font-size: 1.4em;
                margin-bottom: 5px;
            }
        
            #welcome_existing_client .special td {
                color: #555;
                font-size: 1.3em;
                margin-bottom: 10px;
            }
        
                #welcome_existing_client td.label {
                    color: #999999;
                    font-size: 1.2em;
                    min-width: 75px;
                    padding-right: 10px;
                }
        
            #welcome_existing_client .special .button {
                font-size: 1.1em;
                margin-top: 5px;
            }    
            
            #welcome_existing_client_account {
                float: left;
                max-width: 270px;
                min-width: 250px;
            }        
            
            #welcome_existing_client_invoice {
                float: left;
                max-width: 286px;
            }
            
    /*--------------------------------------------------------------------------------*/
    /* 6. Confirmation
    /*--------------------------------------------------------------------------------*/                
    #order_overview_wrapper {
        background-color: #F0F0F0;
        padding: 10px 10px 0;
    }
    
    span.price{
        -moz-border-radius:0 3px 0 3px;
        -webkit-border-radius:0 3px 0 3px;
        border-radius:0 3px 0 3px;
        background-color:#5F5F5F;
        background-color:rgba(0, 0, 0, 0.2);
        clear: right;
        float: right;
        margin: -3px -5px;
        padding: 3px 5px 3px 8px;
        text-shadow: 1px 1px 1px #444444;
        width: 107px;
    }
        span.price span {
            font-size: 0.9em;
            color: #efefef;
        }
    
        #order_overview_wrapper > ul {
            color: #000;
            font-size: 1.3em;
        }
        
            #order_overview_wrapper li {
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                border-radius:3px;
                margin-bottom: 5px;
                text-shadow: 0 1px 3px #fff;
            }
            
            #order_overview_wrapper > ul > li {
                margin:3px;
            }
            
            li.package {
                margin: 3px 6px 10px !important;
            }

                li.package > span{
                    -moz-border-radius:3px;
                    -webkit-border-radius:3px;
                    border-radius:3px;
                    background: url("../img/ico/ico_package_white.png") no-repeat scroll 3px 3px #999;
                    color: #FFFFFF;
                    display: block;
                    margin: 0 -3px 5px;
                    padding: 3px 5px 3px 26px;
                    text-shadow: 1px 1px 1px #444444;
                }

                    li.package > span > span.details {
                        color: #fff !important;
                        font-size: 0.9em;
                        font-style: italic;
                        text-shadow: 1px 1px 1px #444444;
                    }
                    
                        li.package > span span.help {
                            color: #CCCCCC;
                            font-style: normal;
                        }
                
                    li.package > span > span.price{
                        padding: 3px 7px 3px 6px;
                    }
            
                li.package ul.domains,
                li.package ul.vps_extras {
                    padding: 0 0 0 13px;
                }
            
                        li.package ul.domains li:before,
                        li.package ul.vps_extras li:before {
                            float:left;
                            margin: -2px 0 0 -47px;
                            content: url("../img/ico/ico_child.png");
                        }
            
                        li.package ul.domains span.price,
                        li.package ul.vps_extras span.price {
                            padding: 3px 4px 3px 8px;
                            width: 107px;
                            display:inline;
						}
			
					ul.domains > li,
					ul.vps_extras > li {
						background: url("../img/ico/ico_domain.png") no-repeat scroll 3px 3px #ccc;
						color:#222;
						padding: 3px 5px 3px 28px;
					}
					
						ul.vps_extras > li.vps_extra {
							background: url("../img/ico/ico_extra.png") no-repeat scroll 3px 3px #ccc;
						}
			
						ul.domains span.price,
						ul.vps_extras span.price {
							background-color:#7F7F7F;
							background-color:rgba(0, 0, 0, 0.3);
							color: #fff !important;
						}
			
						ul.domains span.details,
						ul.vps_extras span.details {
							color: #555555 !important;
							font-size: 0.9em;
							font-style: italic;
						}
			
			li.single_domain {
				margin: 3px 3px 10px !important;
			}

				li.single_domain li {
					background-color: #999;
					background-image: url("../img/ico/ico_domain_white.png");
					color: #FFFFFF;
					text-shadow: 1px 1px 1px #444444 !important;
				}

					li.single_domain li strong {
						text-transform: capitalize;
					}

					li.single_domain li span.details {
						color: #fff !important;
						text-shadow: 1px 1px 1px #444444 !important;
					}

					li.single_domain li span.price {
						background-color:#7F7F7F;
						background-color: rgba(0, 0, 0, 0.2) !important;
					}
					
						li.single_domain span.help {
							color: #CCCCCC;
						}
			
	/* Summary */
	#order_overview_total_price {
		border-top: 1px dotted #666;
		color: #000000;
		display: block;
		float: right;
		margin-top: 10px;
        margin: 10px auto;
		padding: 10px 5px 3px 5px;
		text-align: right;
	/*	width: 569px; */
        width:95%;
		text-shadow: 0 1px 0 #efefef;
	}
	
		#order_overview_total_price h3 {
			font-size: 1.2em;
		}
	
		#order_overview_total_price p {
			font-size: 1.2em;
			padding-top: 5px;
		}
	
			#order_overview_total_price strong {
				background-color: #4E7D0E;
				-webkit-border-radius: 3px 0 0 3px;
				-moz-border-radius: 3px 0 0 3px;
				border-radius: 3px 0 0 3px;
				color: #FFFFFF;
				display: block;
				font-size: 1em;
				margin: 12px -15px 0 0;
				padding: 5px 15px 5px 10px;
				text-shadow: none;
			}
	
		#order_overview_total_price .left {
			text-align: left;
			width: 300px;
		}
	
		#order_overview_total_price .left p span,
		#order_overview_total_price .right p span {
			color: #555555;
		}


    @media screen and (max-width : 992px) {
        #order_overview_total_price .left {
            width:50%;
        }
    }


	/* Customer input textarea */	
	#UserKlantOpmerking {
		background-color:#FFFFFF;
		border-color:#8F8F8F #BFBFBF #BFBFBF #8F8F8F;
		border-style:solid;
		border-width:1px;
		color:#00608F;
		font-family: 'Trebuchet MS',Helvetica,Tahoma,Arial;
		font-size:1.4em;
		line-height:1.4em;
		margin: -8px 0 3px;
		padding: 4px 6px;
		position: relative;
		width: 586px;
		z-index: 1;
	}

		#UserKlantOpmerking:focus{
			background-color:#FEFEEE;
		}

		#UserKlantOpmerking:hover{
			box-shadow: 0 0 4px #1188c3;
			-webkit-box-shadow: 0 0 4px #1188c3;
			-moz-box-shadow: 0 0 4px #1188c3;
		}

        @media screen and (max-width : 992px) {
            #UserKlantOpmerking  {
                width:90%;
            }
        }
		
	/*--------------------------------------------------------------------------------*/
	/* 7. Payment select
	/*--------------------------------------------------------------------------------*/
	.payment_method_wrapper {
		background-color: #FFFFF5;
		border: 1px solid #EFEFE0;
		margin-top: 1em;
		overflow: auto;
		padding: 20px;
	}
	
		.payment_method_wrapper h3 {
			color:#3F3F3F;
			font-size:1.5em;
			margin-bottom:0.7em;
		}
        
        .mollie_info {
            background: url("../img/mollie.png") no-repeat scroll 0 5px transparent;
            padding-left: 75px;
        }
		
		.ideal_info {
			background: url("../img/ideal.png") no-repeat scroll 0 5px transparent;
			padding-left: 75px;
            height: 50px;
            padding-top: 10px;
		}
        
		.manual_transfer_info {
			background: url("../img/ico/ico_manual_big.png") no-repeat scroll 0 4px transparent;
			padding-left: 60px;
		}
		
			#ideal_issuer {
				border-color: #8F8F8F #BFBFBF #BFBFBF #8F8F8F;
				border-style: solid;
				border-width: 1px;
				color: #00608F;
				display: block;
				float: left;
				font-size: 1.4em;
				margin: 0 10px 0 0;
				padding: 4px 6px;
				width: 250px;
				z-index: 1;
			}
		
			#ideal_issuer.fail {
				border-color:#BF0000;
			}
		
			#ideal_issuer_message {
				color:#BF0000;
				margin-bottom: 0;
			}
			
	#balance-expired-notice {
		margin-top: 20px;
		padding: 10px; 
		background-color: #ffffcc; 
		margin-bottom: 1em;
	}
	
	#select-payment fieldset {
		width: inherit;
	}
            
/*--------------------------------------------------------------------------------*/
/* Changelog
/*--------------------------------------------------------------------------------*/
#changelog P {
    font-size: 1em;
}

#changelog span {
    color: black;
    font-size: 1em;
}

#changelog .button, #changelog .tiny, #changelog .green {
    font-size: 1em;
    padding: 5px;
}

#changelog .lightgrey {
    color: #666;
}

#changelog textarea {
    min-height: 40px;
}

/*--------------------------------------------------------------------------------*/
/* Clusters
/*--------------------------------------------------------------------------------*/

#template_families .button, #template_families .tiny, #template_families .green {
    font-size: 0.8em;
    color: black;
    padding: 5px;
}


/*--------------------------------------------------------------------------------*/
/* Media Queries for mobile responsiveness
/* Author: Maurine Kacel
/*--------------------------------------------------------------------------------*/
@media screen and (max-width : 993px)  {
    
    #order_content {
        width:67%;
        margin-top:26px;
    }

     #order_side {
        margin: 0 auto;
        min-width:216px;
        width: 25%;
        position: relative;
        top: 30px;
        z-index:3;
    }

        #order_icons {
            background:url("../img/page_shop_sprites.png") no-repeat scroll 0px -620px transparent
        }

        #bag {
            display:none;
        }

    #order_summary {
        margin: 0 0 0 0;
        width: 90%;
        border-width: 1px;
    }

    a.product_select {
        width: 300px;
        display:block;
    }

    #order_content p {
        align-self:center;
    }
    /* domain checker styling */
        #onpage_domaincheck_input,
        #domain_external_input {
            width: 50%;
        }

        #onpage_domaincheck_select {
            max-width: 18%;
        }

        #onpage_domaincheck_button {
            padding: 8px 5px 9px;
        }

    .step1, .step2, .step3, .step4 {
        max-width: 120px;
    }

    .step1 {
        background-position: 7px 4px;
    }

    .step2 {
        background-position: -19px -33px;
    }

    .step3 {
        background-position: -30px -72px;
    }

    .step4 {
        background-position: -44px -109px;
    }

    /* domain checker after picking a hosting package */
    .config_select {
        width:90%;
    }

    #domain_new_wrapper input[type="text"], #domain_external_wrapper input[type="text"] {
        width:35%;
    }
}


@media screen and (max-width : 767px){

     #login_form_wrapper {
        padding:0px;
    /*  width:290px; */
        width: 90%;
    }

        #login_form_wrapper h2 {
        /*    width:270px; */
            width:93%;
        }

        #login_form_wrapper form {
            margin:0 auto;
            padding: 0px 0px 0px;
        /*   width:300px;*/
        width:100%;
        }

        #login_form_wrapper fieldset {
          /*  width:200px;*/
          width:90%;
            margin:10px 5px 20px;
        }


    #order_content {
        width:95%;
        padding: 0 0 0 0;
    }

    #order_side {
        width: 50%;
        margin-bottom:50px;
    }

    #order_content p, #order_content h2{
        align-self:center;
    }

    #progress_wrapper li a, #progress_wrapper li .progress_txt {
        padding-left:15px;
    }

    .step2 a {
        padding-left:5px !important;
    }

    .step1, .step2, .step3, .step4 {
    /*    max-width: 75px; */
        max-width: 25%;
    }
    
    #order_index_continue {
        margin: 10px 0;
    }
}


@media screen and (max-width: 480px) {
/* domain check */

#onpage_domaincheck {
    padding: 10px;
}
    /*domain checker styling */
    /*check button */
    #onpage_domaincheck_button {
        display:block;
        float:none;
        padding: 8px 14px 9px;
    }

    /* domain input */ 
    #onpage_domaincheck_input,
    #domain_external_input,
    #onpage_domaincheck_select {
        width:49%;
    }

    /* domain selection */

    #onpage_domaincheck_select {
       min-width:25%;
       padding:8px 8px 8px 7px;
       height: 38px;
    }


    a.product_select {
        width: 220px;
        display:block;
        text-align:left;
    }


    #progress_wrapper li {
        font-size: 1em;
    }

    #welcome_existing_client_account td{
        overflow-wrap: break-word;
    }

    #welcome_existing_client_invoice td{
        overflow-wrap: break-word;
        max-width:200px;
    }


    /* domain check after picking hosting package */

    #domain_new_wrapper input[type="text"] {
        width:40%;
    }

    #domain_external_wrapper input[type="text"] {
        width:50%;
    }

    #order_profile_wrapper ol > li {
        padding: 0 10px 0 10px;
        width: 100%;
    }
}


/* 
    User Menu media query
    Moves the user menu above the breadcrumbs
    Ideally, the user menu should be moved to the hamburger menu < 768px
*/ 

@media all and (max-width : 768px) {

    #breadcrumbs_wrapper {
        display:flex;
        flex-direction: column;
        height:auto;
        align-content:flex-start;
        margin-bottom: 10px;
    }

    #breadcrumbs {
        order: 2;
        margin: 1em 0.5em 0;
    }
}

@media screen and (max-width : 480px) {

    #breadcrumbs a, #breadcrumbs .top_currentCrumb {
        font-size:1em !important;
    }
}