/*
    Rimote.nl ~ General CSS
    Author: J.N. van Oosten
    Creation date: 15-05-2010
    Description: General styles Rimote Media website
    Copyright (C) Rimote Media / J.N. van Oosten
*/

/*--------------------------------------------------------------------------------*/
/* GRID                                     */
/*--------------------------------------------------------------------------------*/
.grid_1 {width: 60px;}
.grid_2 {width: 140px;}
.grid_3 {width: 220px;}
.grid_4 {width: 300px;}
.grid_5 {width: 380px;}
.grid_6 {width: 460px;}
.grid_7 {width: 540px;}
.grid_8 {width: 620px;}
.grid_9 {width: 700px;}
.grid_10 {width: 780px;}
.grid_11 {width: 860px;}
.grid_12 {width: 940px;}

.column {
    margin: 0 10px;
    /* 
        Do not hide overflow anymore to allow for wider tables
        overflow: hidden; 
    */
    float: left;
    display: inline;
}
.row {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
}

/*--------------------------------------------------------------------------------*/
/* GENERAL STYLES                               */
/*--------------------------------------------------------------------------------*/
html {
    height:100%;
    overflow-y: scroll;
}

body {
    background-color:#fff;
    height:100%;
    font:62.5%/1.7 'Trebuchet MS',Helvetica,Tahoma,Arial;
}

h1, h2, h3 {
    font-family:sans-serif;
}

strong {
    font-weight:bold;
}

a {
    color:#006A9F;
    cursor:pointer;
    text-decoration:underline;
    -webkit-transition: color 0.1s linear;
    -moz-transition: color 0.1s linear;
    transition: color 0.1s linear;
}


a:focus,
a:active,
input:focus,
input:active {
    outline:none;
}

a:hover {
    color: #2F4A5F; 
    text-decoration:none;
}

a:hover span {
    cursor:pointer
}

a:active {
    opacity:0.4;
} 

h1 {
    color:#0077B2;
    font-size:2em;
    font-weight:bold;
    line-height:1.5em;
}

h2 {
    color:#0077B2;
    font-size:1.4em;
    font-weight:bold;
    line-height:1em;
}

h3 {
    color:#0077B2;
    font-size:1.2em;
    font-weight:bold;
    line-height:1em;
}

p, td, th {
    font-size:1.3em;
}

p {
    margin-bottom:1em;
}

input {
    font-family:'Trebuchet MS',Helvetica,Tahoma,Arial;
}

small {
    font-size: 0.85em;
}

tr.inactive {
    background-color: #ffbbbb !important;
}

tr.inactive td {
    background-color: #ffbbbb !important;
}

ul.list-default {
    list-style: disc outside none !important;
    padding: 0 0 0 50px;
    margin: 0;
}

ul.list-default li, fieldset.overzicht li:first-child {
    list-style: inherit !important;
    display: list-item !important;
    margin-left: 6px !important;
    padding: 0 0 0 10px !important;
}

/*--------------------------------------------------------------------------------*/
/* COMMON CLASSES
/*--------------------------------------------------------------------------------*/
.round {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.round2 {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.round3 {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

.round4 {
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
}

.cufon-loading h1 { /* hide text replaced by Cufon (before Cufon text is shown) */
    visibility: hidden !important;
}

.cufon_head {
    color:#0077B2;
    font-size:2em;
    margin-bottom:0.5em;
}

    h3.cufon_head {
        color: #006A9F;
        font-size:1.8em;
    }

.cufon_head2 {
    color:#004A6F;
    font-size:4em;
    margin:0 0 0.1em -3px;
    text-shadow:1px 1px 0 #FFFFFF;
}

.cufon_head3 {
    color:#0077B2;
    font-size:2em;
    margin-bottom:0.7em;
}

.left {
    float:left;
}

.right {
    float:right;
}

.hidden {display:none; visibility:hidden;} 

.special {
    background-color:#FCFEFF;
    border:1px solid #D5E9FA;
    margin:0 0 20px;
    padding:20px 10px 10px;
    text-shadow: 0 1px 0 #fff;
}

div.warning {
    background:url("../img/ico/ico_warning_yellow.png") no-repeat scroll 10px 10px transparent;
    background-color:#FFF5B6;
    border:1px solid #D6A103;
    color:#695005;
    font-size:1.2em;
    font-weight:bold;
    padding:10px;
    padding-left: 34px;
}

b.help,
span.help,
.help,
span a .help {
    color:#6F6F6F;
    cursor:help;
    font-weight:bold;
    letter-spacing:1px;
    line-height:1em;
}   

    /*--------------------------------------------------------------------------------*/
    /* BUTTONS                                  */
    .button , 
    .button:visited {
    /*
        border-bottom:1px solid; 
        border-color:#909090;
        cursor:pointer;
        display:inline-block;
        padding:5px 10px 6px; 
        position:relative;
        text-decoration:none;
        background:#222 url(../img/page_sprites.png) repeat-x left -269px;
        color: #fff; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        text-shadow:0 -1px 1px #333;
    */
        color: #fff; 
        cursor: pointer;
        display: inline-block;
        font-weight:bold;
        font-family:Arial, Helvetica, sans-serif;
        outline: none;
        padding: .5em 1em .5em;     
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6);
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 1px 0 rgba(0, 0, 0, 0.6);
        -moz-user-select: none;
        -webkit-user-select: none;  
        -webkit-transition: opacity 0.35s linear;
        -moz-transition: opacity 0.35s linear;
        -ms-transition: opacity 0.35s linear;
        -o-transition: opacity 0.35s linear;
        transition: opacity 0.35s linear;
    }
    
    .button:hover{
        text-shadow: 0 1px 1px rgba(0,0,0,0.5) !important;
        text-decoration: none;
    }

    input[type="submit"]:hover,
    input[type="reset"]:hover{
        border-bottom:0 none;
    }

    .button:active  {
        -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.6) inset;
        -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.6) inset;
        box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.6) inset;
        opacity:0.9;
    }

    .xsmall.button, 
    .xsmall.button:visited { 
        font-size: 0.8em; 
        text-shadow:0 1px 1px #333; 
    }

    .small.button, 
    .small.button:visited { 
        font-size: 1em; 
        text-shadow:0 1px 1px #333; 
    }

    .button, 
    .button:visited,
    .medium.button,
    .medium.button:visited  { 
        font-size: 1.4em; 
        line-height: 1; 
    }

    .large.button, .large.button:visited { 
        font-size:1.5em;
        line-height:1.3em;
        padding:8px 14px 9px; 
    }
    
    /* colors! */   
    .red {
        color: #fff;
        border: solid 1px #980c10 !important;
        background: #d81b21 !important;
        background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)) !important;
        background: -moz-linear-gradient(top,  #ed1c24,  #aa1317) !important;
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317') !important;
    }
    
        .red:hover {
            color: #faddde;
            background: #b61318;
            background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
            background: -moz-linear-gradient(top,  #c9151b,  #a11115);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
        }
        .red:active {
            color: #de898c;
            background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
            background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
        }
    
    .blue {
        color: #fff;
        border: solid 1px #0076a3 !important;
        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');
    }
    
        .blue:hover {
            color: #fff !important;
            background: #007ead!important;
            background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
            background: -moz-linear-gradient(top,  #0095cc,  #00678e);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
        }
        .blue:active {
            color: #eee !important;
            background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#3197CA));
            background: -moz-linear-gradient(top,  #0078a5,  #3197CA);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#3197CA');
        }

    
    .white {
        color: #606060;
        border: solid 1px #b7b7b7 !important;
        background: #fff;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        background: -moz-linear-gradient(top,  #fff,  #ededed);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
    }

        .white:hover {
            background: #ededed!important;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
            background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
        }
        .white:active {
            color: #999!important;
            background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
            background: -moz-linear-gradient(top,  #ededed,  #fff);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
        }

    
    .black {
        color: #fff !important;
        border: solid 1px #333 !important;
        background: #333 !important;
        background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)) !important;
        background: -moz-linear-gradient(top,  #666,  #000) !important;
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000') !important;
    }
    
        .black:hover {
            color: #eee!important;
            background: #000 !important;
            background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)) !important;
            background: -moz-linear-gradient(top,  #444,  #000) !important;
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000') !important;
        }
        .black:active {
            color: #666!important;
            background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)) !important;
            background: -moz-linear-gradient(top,  #000,  #444) !important;
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666') !important;
        }

    
    .gray {
        color: #e9e9e9;
        border: solid 1px #555 !important;
        background: #6e6e6e;
        background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
        background: -moz-linear-gradient(top,  #888,  #575757);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    }
    
        .gray:hover {
            color: #fff !important;
            background: #616161;
            background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
            background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
        }
        .gray:active {
            color: #afafaf;
            background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
            background: -moz-linear-gradient(top,  #575757,  #888);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
        }
    
    .green {
        color:#E8F0DE;
        border: 1px solid #538312 !important;
        background:#7DB72F;
        background:-moz-linear-gradient(center top , #7DB72F, #4E7D0E) repeat scroll 0 0 transparent;       
        background: -webkit-gradient(linear, left top, left bottom, from(#7DB72F), to(#4E7D0E));
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DB72F', endColorstr='#4E7D0E');
    }
    
        .green:hover {
            color: #eee !important;
            background:#6B9D28;
            background:-moz-linear-gradient(center top , #6B9D28, #436B0C) repeat scroll 0 0 transparent;       
            background: -webkit-gradient(linear, left top, left bottom, from(#6B9D28), to(#436B0C));
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6B9D28', endColorstr='#436B0C');
        }
        .green:active {
            color: #afafaf;
            background: -webkit-gradient(linear, left top, left bottom, from(#436B0C), to(#436B0C));
            background: -moz-linear-gradient(top,  #436B0C,  #436B0C);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#436B0C', endColorstr='#436B0C');
        }       
    
    /* disabled  buttons */     
    button[disabled]:active, 
    button[disabled]:hover, 
    button[disabled],
    input[type="reset"][disabled]:active,
    input[type="reset"][disabled],
    input[type="button"][disabled]:hover,
    input[type="button"][disabled]:active,
    input[type="button"][disabled],
    select[disabled] > input[type="button"],
    select[disabled] > input[type="button"]:active,
    input[type="submit"][disabled]:active,
    input[type="submit"][disabled] {
      background-color:#9f9f9f!important;
      color:#ccc;
      cursor:inherit;
      left:0;
      text-shadow: none!important;
      top:0;
      user-input:disabled; 
    }

    /*--------------------------------------------------------------------------------*/
    /* KB widget
    /*--------------------------------------------------------------------------------*/
    #kb_widget {
        /*background: url("../img/loading.gif") no-repeat center center #fff;*/
        display: none;
        margin-top: 5em;
        padding-bottom: 10px;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }
    

        #kb_widget > h2 {
            background-color: #f3faeb;
            color: #4E7D0E;
            display: block;
            font-size: 1.4em;
            margin-bottom: 5px;
            padding: 10px;
        }

        #kb_widget ul {
            margin-bottom: 5px;
        }
        
            #article_wrapper #kb_widget  li,
            #kb_widget li {
                /*border-top: 1px solid #dcefc2;*/
                font-size: 1em;
                padding: 0;
                margin: 0;
                list-style: none outside none;
            }
        
            #article_wrapper #kb_widget  li:first-child,
            #kb_widget li:first-child {
                border-top: 0 none;
            }
        
            #kb_widget li.open {
                background-color: #F3FAEB;
            }
            
                #kb_widget li > a {
                    color: #5c5c5c;
                    display: block;
                    font-size: 1.15em;
                    font-weight: bold;
                    padding: 5px 10px 5px 10px;
                    text-decoration: none;
                }
            
                    #kb_widget li > a:before {
                        content: "+";
                        color: #4E7D0E;
                        display: block;
                        float: left;
                        font-weight: bold;
                        padding: 0 5px 0 0;
                        text-align: center;
                        text-decoration: none;
                        width: 7px;
                    }
            
                    #kb_widget li > a:first-letter {
                        text-transform:capitalize;
                    }
                
                    #kb_widget li.open > a {
                        background-color: #dcefc2;
                        color: #4E7D0E;
                    }
                    
                    #kb_widget li:hover > a {
                        background-color: #dcefc2;
                    }
            
                        #kb_widget li.open > a:before {
                            content: "-";
                        }
            
                #kb_widget li > div {
                    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
                    display: none;
                    font-size: 0.9em;
                    padding: 10px;
                }
            
                    #kb_widget li > div h1,
                    #kb_widget li > div h2,
                    #kb_widget li > div h3 {
                        color: #222 !important;
                    }
            
                    #kb_widget li > div h1{
                        font-size: 1.6em;
                        margin: 0 0 0.5em;              
                    }
            
                    #kb_widget li > div h2{
                        font-size: 1.4em;
                        margin: 0 0 0.3em;                  
                    }
            
                    #kb_widget li > div h3{
                        font-size: 1.3em;
                        margin: 0 0 0.1em;              
                    }
            
                    #kb_widget li > div p{
                        color: #444;
                    }
            
                    #kb_widget li > div a{
                        color: #004A6F !important;              
                    }
        
    /*--------------------------------------------------------------------------------*/
    /* Pricing */
    table.pricing {
        margin:1em 0 3em -10px;
        width:709px;
    }
    
            table.pricing td,
            table.pricing th {
                text-align:center;
            }

        /* We are not using the first column anymore */ 
        /*
            table.pricing td:first-child {
                padding-left:15px;
                text-align:left;
                width:130px;
            }

        /*
            /* Mijn Rimote Testing:  there is double styling over the pricing shop table */
        /*
            table.pricing .check span {
                background:url("../img/ico/ico_check.png") no-repeat scroll center center transparent;
                display:block;
                text-indent:-999em;
            }
        */    
        table.pricing thead {
            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');
        }
        
            table.pricing th {
                color:#fff;
                border-right:1px solid #0078B3;
                border-bottom:4px solid #006A9F;
                font-size:1.8em;
                line-height:1.2em;
                padding:10px 0;
                text-shadow:0 1px 1px #111111;
            }
        
            table.pricing th.first {
                background:url("../img/ico/ico_package.png") no-repeat scroll 90% 10px #FFFFFF !important;
                border-right:0 none;
                border-bottom:0 none;
                padding:0;
            }
        
                table.pricing th.first span {
                }
            
            table.pricing th.second {
                background:url("../img/page_sprites.png") no-repeat scroll -256px -907px transparent;
                padding:0;
            }
    
            table.pricing th.last {
                background:url("../img/page_sprites.png") no-repeat scroll right -990px transparent;
                border-right:0 none;
                padding:0;
                
            }
    
                table.pricing th span {
                    font-size:0.9em;
                    font-weight:bold;
                    color:#C7EAFB;
                    margin-top:5px;
                }
    
                    table.pricing th span span {
                        color:rgba(255, 255, 255, 0.9);
                        font-size:0.6em;
                        display:inline;
                    }
            
        table.pricing tbody {
            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');
        }
        
            table.pricing tbody tr:hover td{
                background:#f2f2f2 !important;
                background:rgba(0,0,0,0.07) !important;
            }
        
            table.pricing tbody td{
                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;
                position: relative; 
                width:30px;
                text-shadow:1px 1px 1px #FFFFFF;
            }
        
            table.pricing tbody tr:first-child td.first {
                background: url() no-repeat -293px -1112px, -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2); /* FF3.6 */
                background: url() no-repeat -293px -1112px, -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2)); /* Saf4+, Chrome */
                border-top:1px solid #ccc;
            }
                
            table.pricing tbody td .button {
                font-size:1.2em !important;
                margin:5px 0;
            }
        
        table.pricing tfoot {
            background-color:#DFDFDF;
            background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#c5c5c5));
            background: -moz-linear-gradient(top,  #f2f2f2,  #c5c5c5);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#c5c5c5');
            height:50px;
        }
        
            table.pricing tfoot td{
                border-bottom:1px solid #AFAFAF;
                border-top:1px solid #fff;
                border-right:1px solid #ccc;
                vertical-align:middle;
                height:50px;
            }
        
                table.pricing tfoot p{
                    text-align:right;
                    font-style:italic;
                    color:#555;
                    padding:0 10px;
                    margin-bottom:5px;
                }
            
    #pricing_domains tfoot {height:30px;}
    #pricing_domains tfoot td {height:30px;padding-top:5px;}
    
    /*--------------------------------------------------------------------------------*/
    /* Promo buttons */
    .box_promo {
        color:#444;
        background-image:url("../img/page_promo_sprites.png");
        background-repeat:no-repeat;
        background-color:rgb(236,248,254);
        border: 1px solid #a6d1e6;
        font-size: 1.2em;
        line-height: 1.2em;
        margin-bottom: 1em;
        min-height: 40px;
        padding: 15px 15px 16px 70px;
        text-decoration: none;
    }
    
        #link_home {background-position: 10px 7px ;padding: 10px 50px 10px 70px;}
        #link_mijnrimote {background-position: -44px -84px;}
        #link_support {background-position: -113px -205px;}
        #link_shop {background-position: -185px -340px;}
        #link_recurring_payments {
            background-image: none;
            padding-left: 15px;
        }
    
        .box_promo strong {
            color: #006A9F;
            display: block;
            font-size: 1.2em;
            margin-bottom: 5px;
        }
        
        .box_promo:hover {
            background-color:#fcfeff;
            border-color:#b3d8ea;
        }
        
        .box_promo.type2 {
            background-color:#eee;
            border: 1px solid #bbb;
        }
        
            .box_promo.type2 strong {
                color: #333;
            }
            
            .box_promo.type2:hover {
                background-color:#ccc;
                border-color:#777;
            }
/*--------------------------------------------------------------------------------*/
/* PAGE LAYOUT
/*--------------------------------------------------------------------------------*/
#container {
    min-height:100%;
    position:relative;

}
    /* Background for homepage  */
    #home #header_wrapper {
        background:#fff url(../img/page_frontpage_header_bg.png) repeat-x center top;
        height:425px;
    }
    
    #header_wrapper {
        background:#fff url(../img/page_header_bg.png) repeat-x center top;
        height:auto;
        min-width:960px;
        width:100%;
    }
    
        #header1,
        #header2 {
            margin:0 auto;
            width: 960px;
        }       
    
    #content_wrapper {
        padding-bottom:150px;   /* Height of the footer  + 50 px gutter*/
        display:flex;
        justify-content:center;
        flex-wrap: wrap;
    }

        body.admin-home #content_wrapper {
            display:block;
        }

        body.admin-home #article_wrapper {
            margin-left:250px;
        }

        #article_wrapper {
            order: 2;
            margin:0 0 0 0 ;
        }


        #menu_wrapper {
            order: 1;
            margin: 0 0 0 0;
        }

    #notifications {
        position: fixed;
        top: 1em;
        z-index: 10;
    }
    
/*--------------------------------------------------------------------------------*/
/* HEADER 1 STYLES
/*--------------------------------------------------------------------------------*/
#header1 {
    height:72px;
}
        
#header1 h1{
    padding-top:14px;
}

#header1 h1 a{
    background:transparent url("../img/page_sprites.png?20110812") no-repeat scroll 0 0;
    display:block;
    height:50px;
    text-indent:-999em;
    width:176px;
}

#header_domaincheck {
    float:right;
    margin-top:8px;
}

    #header_domaincheck label {
        color:#fff;
        float:left;
        font-size:1.6em;
        font-weight:bold;
        line-height:1em;
        margin:0 0 8px;
        text-shadow:0 1px 1px #000000;
    }
    
    #domaincheck_input{
        background:url("../img/page_sprites.png") no-repeat scroll 0 -154px transparent;
        border:0 none;
        color:#D10000;
        float:left;
        font-size:1.4em;
        height:22px;
        line-height:1.4em;
        padding:2px 10px 5px 7px;
        width:191px;
    }
    
    #domaincheck_input.default {
        color:#666666;
        font-style:italic;
    }   

    #domaincheck_button{
        background:url("../img/page_sprites.png") no-repeat scroll -208px -154px transparent;
        float:left;
        height:27px;
        margin:0 0 0 -3px;
        padding:0;
        text-indent:-999em;
        width:92px;
    }
            
    #domaincheck_button:hover{
        background:url("../img/page_sprites.png") no-repeat scroll -208px -184px transparent;
    }

    #domaincheck_button:active{
        opacity:0.5;
        outline:none;
    }
    
/*--------------------------------------------------------------------------------*/
/* FOOTER
/*--------------------------------------------------------------------------------*/
#footer_wrapper {
    background:url("../img/page_sprites.png") repeat-x scroll left -1197px #F2F2F2;
    border-top:1px solid #fff;
    bottom:0;
    min-height:100px;
    min-width:960px;
    width:100%;
    margin:0;
    position:absolute;
}

#footer_wrapper > * {
    margin: 0;
}

    /*--------------------------------------------------------------------------------*/
    /* GO TO TOP LINK                                       */
    #link_top_wrapper {
        margin-top:-22px;
        margin-bottom:10px;
    }
    
        #link_top {
            background-color:#F2F2F2;
            border-color:#CCCCCC;
            border-style:solid solid none;
            border-width:1px;
            color:#666666;
            font-size:1.1em;
            margin-left:10px;
            padding:5px 10px 0;
            text-decoration:none;
            -moz-border-radius-topleft:5px;
            -webkit-border-top-left-radius:5px;
            border-radius-topleft:5px;
            -moz-border-radius-topright:5px;
            -webkit-border-top-right-radius:5px;
            border-radius-topright:5px;         
        }
        
            #link_top span {
                color:#AFAFAF;
            }

        #link_top:hover {
            text-decoration:underline;
        }
        
            #link_top:hover span {
                color:#000;
            }
            
    /*--------------------------------------------------------------------------------*/
    /* FOOTER 1                                         */
    #footer1 {
        background:url("../img/page_sprites.png") no-repeat scroll 675px -343px transparent;
        margin-bottom:-5px;
        margin-top:-25px;
        padding-top:50px;
    }
    
    #footer1 ul {
        line-height:inherit;
        margin-bottom:10px;
    }

        #footer1 li {
            font-size:1.3em;
            font-weight:bold;
            line-height:1.6em;
            margin:0 0 5px 0;
        }

            #footer1 li a{
                color:#0077B2;
                text-decoration:none;
            }

            #footer1 li a:hover{
                text-decoration:underline;
            }
            
            #footer1 li li {
                background:url("../img/page_sprites.png") no-repeat scroll -236px -38px transparent;
                font-size:0.9em;
                font-weight:normal;
                margin:0 0 5px 0;
                padding-left:15px !important;
            }   
            
            #footer1 li li:hover {
                background:url("../img/page_sprites.png") no-repeat scroll -234px -38px transparent;
            }
            
                #footer1 li li a{
                    color:#000;
                }

    /*--------------------------------------------------------------------------------*/
    /* FOOTER 2                                 */  
    #footer2 .column {
        background:url("../img/page_sprites.png") repeat-x scroll left -1197px transparent;
        margin-top:20px;
        padding-top:12px;
    }
    
        #footer2 p {
            color:#666;
            font-size:1.2em;
            text-shadow:0 0 3px #fff;
        }   
        
        #footer2 span {
            background:url("../img/page_sprites.png?20110812") no-repeat scroll left -61px transparent;
            display:inline-block;
            height:21px;
            margin-right:5px;
            text-indent:-999em;
            width:76px;
        }
        
        #footer2 a {
            color:#555;
        }
    
/*--------------------------------------------------------------------------------*/
/* FRONTPAGE ELEMENTS
/*--------------------------------------------------------------------------------*/    

    /*--------------------------------------------------------------------------------*/
    /* HEADER 2 STYLES                              */
    #header2 {
        height:352px;
    }
        
    #header2 {
        background:transparent url(../img/header2_bg.png) no-repeat scroll center 0;
    }
    
    #header2 div.slide {
        margin-top:0;
        padding-top:10px;
    }
        
    /* Hide tab content #2 and  #3  */
    #slide_webapplicaties.slide {display:none;}
    #slide_websites.slide {display:none;}
        
        #header2 .slide h2{
            color:#fff;
            font-size:3.3em;
            font-weight:bold;
            letter-spacing: 0;
            line-height:1.5em;
            margin-bottom:0.5em;
            margin-top:10px;
            text-transform:normal;
        }
        
        #header2 .slide h3 {
            color:#f5f5f5;
            font-size:1.8em;
            font-weight:bold;
            line-height:1em;
            margin-bottom:0.5em;
        }
        
            #header2 .slide h3 strong{
                color:#fff;
                font-size:1.1em;
            }
        
        
        
        #header2 .slide ul {
            list-style:disc inside url("../img/header2_bullet.png");
            margin-bottom:0.5em;
            text-shadow:0 1px 1px #333;
        }

            #header2 .slide li {
                color:#f5f5f5;
                font-size:1.6em;
                font-weight:bold;
                line-height:1em;
                margin-bottom:0.3em;
            }
            
        #header2 .slide .button {
            padding-top:0.7em;
            margin:0.5em 1em 0 0;
        }
        
        /* Tab #2: webapplicaties */        
        #slide_webapplicaties.slide h2{
            font-size:3em;
        }           
            
    /*--------------------------------------------------------------------------------*/
    /* CONTENT TABS                                 */
    #tabs_wrapper {
        margin:0 10px;
    }
    
        /*--------------------------------------------------------------------------------*/
        /* TAB STYLES                                       */  
        #tabs_wrapper .tab, 
        #tabs_wrapper .tab:visited {
            border:1px solid #fff;
            color:#004A6F;
            cursor:pointer;
            display:inline-block;
            font-size:2.2em;
            margin-right:30px;
            padding:8px 15px 6px;
            position:relative;
            text-decoration:none;
        }
        
        #tabs_wrapper .tab:active {
            opacity:0.6;
        }       
        #tabs_wrapper .tab.active {
            background:url("../img/page_sprites.png") repeat-x scroll left -269px #fbfbfb;
            border-bottom:1px solid #fbfbfb;
            border-left:1px solid #CCCCCC !important;
            border-right:1px solid #CCCCCC !important;
            border-top:1px solid #CCCCCC !important;
            padding:20px 15px;
            /* top */   
            -moz-border-radius-topleft:10px;
            -webkit-border-top-left-radius:10px;
            border-radius-topleft:10px;
            -moz-border-radius-topright:10px;
            -webkit-border-top-right-radius:10px;
            border-radius-topright:10px;
            /* bottom (none) */ 
            -moz-border-radius-bottomleft:0;
            -webkit-border-bottom-left-radius:0;
            border-radius-bottomleft:0;
            -moz-border-radius-bottomright:0;
            -webkit-border-bottom-right-radius:0;
            border-radius-bottomright:0;
        }
        
        #tabs_wrapper .tab.inactive:hover {
            background:url("../img/page_sprites.png") repeat-x scroll left -224px #fff;
            border:1px solid #ccc!important;
        }
        
        /*--------------------------------------------------------------------------------*/
        /* TAB CONTENT STYLES                               */
        #tabs_content_wrapper {
            background-color:#fbfbfb;
            border:1px solid #ccc!important;
            margin-top:-1px;
            padding-bottom:15px;
        }   
        
        /* fix top left corner when 1st tab active  */
        #tabs_content_wrapper.firsttab { 
            -moz-border-radius-topleft:0!important;
            -webkit-border-top-left-radius:0!important;
            border-radius-topleft:0!important;
        }
        
            /* Hide tab content #2 and  #3  */
            #tabs_content_wrapper #webapplicaties.tabs_content {display:none;}
            #tabs_content_wrapper #websites.tabs_content {display:none;}
            
            #tabs_content_wrapper .tabs_content_block {
                height:100px;
                margin-top:10px;
                padding-top:10px;
                position:relative;
                width:449px;
            }
            
            #tabs_content_wrapper .tabs_content_block:nth-child(1),
            #tabs_content_wrapper .tabs_content_block:nth-child(2){
                border-bottom:1px solid #CCCCCC;
                padding-bottom:10px;
            }
            
            #hosting_domeinnamen.tabs_content .icon {
                background-image:url("../img/tab_icons_hostingdomein.png");
                display:block;
                float:left;
                height:75px;
                margin:5px 21px 5px 16px;
                text-indent:-999em;
                width:75px; 
            }
                /* Icons for hosting & domeinnamen  */
                #hosting_domeinnamen.tabs_content #block1 .icon {background-position:-3px -6px;}
                #hosting_domeinnamen.tabs_content #block2 .icon {background-position:-83px -15px;}
                #hosting_domeinnamen.tabs_content #block3 .icon {background-position:-3px -93px;}
                #hosting_domeinnamen.tabs_content #block4 .icon {background-position:-83px -83px;}
            
            
            #hosting_domeinnamen.tabs_content p {
                width:470px;    
            }
            
            #hosting_domeinnamen.tabs_content a {
                color:#666666;  
            }
            
            #hosting_domeinnamen.tabs_content a.title {
                color:#006A9F;
                font-size:1.1em;    
            }           
            
    /*--------------------------------------------------------------------------------*/
    /* CONTENT COLUMNS                                                              */
    #columns_wrapper {
        margin-top:80px;
    }

        #columns_wrapper .column { /* Fix 1px left offset of cufon fonts*/
            margin-left:9px;
            padding-left:30px;
            width:270px;
        }
    
        #columns_wrapper .column h2 {
            color:#0077B2;
            font-size:2em;
            margin:0 0 0.7em -1px;
        }
        
        #columns_wrapper .column p {
            padding-right:10px;
        }
        
        #columns_wrapper .column a.link_twitter {
            background:url("../img/page_sprites.png") repeat-x scroll -1px -120px  transparent;
            padding-left:22px;
        }
        
    /*column 1 */   
    #column1 {
        margin-top:-60px;
        padding-bottom:5px;
        position:relative;
    }
        
    #btn_goToWebshop {
        margin-left:2px;
        margin-top:-10px;   
    }

    #google {background-position:-51px -38px;height:34px;width:86px;}
    #directadmin {background-position:-136px -125px;height:34px;width:123px;}
    #php {background-position:-687px -32px;height:34px;width:50px;}
    #ideal {background-position:-737px -32px;height:34px;width:111px;}

    #google:hover {background-position:-51px -4px;}
    #directadmin:hover {background-position:-136px -2px;}
    #php:hover {background-position:-687px 2px;}
    #ideal:hover {background-position:-737px 1px;}
    
    /* Invoices page */
    img.ideal-logo {
        width: max-content;
        margin-bottom: 20px;
    }
    
/*--------------------------------------------------------------------------------*/
/* DEFAULT PAGES ELEMENTS
/*--------------------------------------------------------------------------------*/

    /*--------------------------------------------------------------------------------*/
    /* BREADCRUMBS                                     */
    #breadcrumbs_wrapper {
        height:24px;
        margin-bottom:20px;
        padding-top:15px;
    }
    
        #breadcrumbs .top_crumbBox {
            height:22px;
        }
    
        #breadcrumbs a {
            background:url("../img/page_sprites.png") no-repeat scroll right -640px transparent;
            color:#666;
            font-size:1.2em;
            line-height:17px;
            margin:0 0 0 -15px;
            padding:2px 16px 3px;
            position:relative;
            text-decoration:none;
            z-index:9;
        }
        
        /* Fix z-index for breadcrumb levels  (classes created only in IE)  */
        #breadcrumbs a.child4 {z-index:7;}
        #breadcrumbs a.child5 {z-index:6;}
        #breadcrumbs a.child6 {z-index:5;}
        #breadcrumbs a.child7 {z-index:4;}
        #breadcrumbs a.child8 {z-index:3;}
        /* Fix z-index for breadcrumb levels    */
        #breadcrumbs a:nth-child(4) {z-index:7;}
        #breadcrumbs a:nth-child(5) {z-index:6;}
        #breadcrumbs a:nth-child(6) {z-index:5;}
        #breadcrumbs a:nth-child(7) {z-index:4;}
        #breadcrumbs a:nth-child(8) {z-index:3;}
        
        #breadcrumbs a:hover {
            background-position:right -666px;
            color:#000;
        }
    
        #breadcrumbs .top_homeCrumb {
            font-weight:bold;
            margin:0;
            padding-left:7px;
            z-index:10;
        }
        
        #breadcrumbs .top_currentCrumb {
            color:#555;
            font-size:1.2em;
            font-weight:bold;   
            margin-left:-3px;
            padding:2px 0 1px 0;            
        }
    
    #breadcrumbs .beta {    
        color: #6F0000;
        font-size: 0.8em;
    }
    
    /*--------------------------------------------------------------------------------*/
    /* SIDE MENU                                    */
    #menu_wrapper {
        background:url("../img/page_menu_sprites.png") no-repeat scroll right bottom transparent;
        padding-bottom:57px;
    }  
    
    #menu_wrapper ul {
        background-color:#fff;
        line-height:inherit;
        margin-bottom:10px;
    }

        #menu_wrapper li {
            border-bottom:1px solid #CCCCCC;
            margin:0;
        }

            #menu_wrapper li.first a{
                background:url("../img/page_menu_sprites.png") no-repeat scroll right -200px transparent;
                padding:0px 0 0 10px;
                margin-top:15px;
            }

            #menu_wrapper li.first.active a{
                background:url("../img/page_sprites.png") no-repeat scroll right -824px #FFFFFF !important;
                padding:15px 0 0 10px;
            }

            #menu_wrapper  li a{
                background:url("../img/page_menu_sprites.png") no-repeat scroll right -260px transparent;
                color:#2F4A5F;
                display:inline-block;
                font-size:1.4em;
                font-weight:normal;
                line-height:3em;
                padding:0 0 0 10px;
                text-decoration:none;
                width:210px;
            }

            #menu_wrapper li a:hover{
                background:none repeat scroll 0 0 #fff;
            }
            
            #menu_wrapper li a:active {
                position: relative;
                top: 0;
                left: 2px;
            } 

            #menu_wrapper li.active a{
                background:url("../img/page_sprites.png") no-repeat scroll right -839px #FFFFFF !important;
                color:#0077B2;
            }

                #menu_wrapper li.active li a{
                    background:none repeat scroll 0 0 #fff!important;
                    color:#000!important;
                }
    
            #menu_wrapper li ul {
                border-bottom:0 none;
                margin-bottom:0;
            }
            
                #menu_wrapper li li {
                    border-top:1px solid #CCCCCC;
                    border-bottom:0 none;
                    font-size:0.9em;
                    font-weight:normal;
                    margin:0;
                    padding-left:15px !important;
                }   
                
                    #menu_wrapper li li a {
                        background:none repeat scroll 0 0 #fff;
                        color:#000;
                        text-decoration:none;
                    }   
                
                    #menu_wrapper li li.active a {
                        background:url("../img/page_sprites.png") no-repeat scroll -96px -841px #FFFFFF !important; 
                        color:#0077B2!important;
                    }
                
                    #menu_wrapper li li a:hover {
                        text-decoration:underline;
                    }
                    
                    #menu_wrapper li li.first a,
                    #menu_wrapper li li.first.active a{
                        background:none repeat scroll 0 0 #fff;
                        padding:0 0 0 10px;
                    }
                    
                        #menu_wrapper li li.first.active a{
                            background:url("../img/page_sprites.png") no-repeat scroll -96px -841px #FFFFFF !important;
                            padding:0 0 0 10px;
                        }
                        
    #menu_wrapper #menu_promo {
        margin-top:8em;
        position: relative;
        width: 220px;
    }
                    
    /*--------------------------------------------------------------------------------  */
    /* CONTENT                                          */                  
    #article_wrapper {
     /*   margin-left:250px; *//* Makes this layer go to the right side of the page */  
        margin-top: 26px;
        padding-left:10px;
        width:690px;
    }
            #article_wrapper p {
                width:90%;
            }

            #article_wrapper #profile p {
                width:unset;
            }

            #article_wrapper ul{
                list-style:disc inside none;
                margin-bottom: 21px;
            }
        
            #article_wrapper li{
                color:inherit;
                font-size:1.3em;
                line-height:inherit;
                margin:0 0 0.2em 1em;
            }
            
/* Responsive webdesign */
/* Desktop extra large (Full HD)
    Example: @media all and (min-width: 768px) and (max-width: 980px) {
   ========================================================================== */
/* Desktop Full HD */
@media all and (min-width: 1880px) {
    body.admin-home .row {
        width: 1660px;
    }

    body.admin-home #article_wrapper {
        width: 1390px;
        margin-top: 15px;
    }

    body.admin-home #menu_wrapper {
        margin-left: -1650px;
    }

    body.admin-home #header1, #header2 {
        width: 1660px;
    }

    body.admin-home div.message {
        margin-left: 600px;
        top: 100px;
    }
}

/* Desktop extra large */
@media all and (min-width: 1400px) and (max-width: 1880px) {
    body.admin-home .row {
        width: 1385px;
    }

    body.admin-home #article_wrapper {
        width: 1115px;
        margin-top: 15px;
    }

    body.admin-home #menu_wrapper {
        margin-left: -1375px;
    }

    body.admin-home #header1, #header2 {
        width: 1385px;
    }

    body.admin-home div.message {
        margin-left: 450px;
        top: 100px;
    }
}

/* Desktop large */
@media all and (min-width: 1200px) and (max-width: 1400px) {
    body.admin-home .row {
        width: 1210px;
    }

    body.admin-home #article_wrapper {
        width: 939px;
        margin-top: 15px;
    }

    body.admin-home #menu_wrapper {
        margin-left: -1204px;
    }

    body.admin-home #header1, #header2 {
        width: 1210px;
    }
    
    body.admin-home div.message {
        margin-left: 375px;
        top: 100px;
    }
}

/* Desktop normal */
@media all and (min-width: 1024px) and (max-width: 1200px) {
    body.admin-home .row {
        width: 995px;
    }

    body.admin-home #article_wrapper {
        width: 690px;
        margin-top: 15px;
    }

    body.admin-home #menu_wrapper {
        margin-left: -950px;
    }

    body.admin-home #header1, #header2 {
        width: 995px;
    }

    body.admin-home div.message {
        margin-left: 199px;
        top: 100px;
    }
}


/* Desktop small */
@media all and (max-width: 1024px) {
    body.admin-home .row {
        width: 995px;
    }

    body.admin-home #article_wrapper {
        width: 790px;
        margin-top: 15px;
        margin-left: 180px;
    }
    
    body.admin-home .grid_3 {
        width: 160px;
    }

    body.admin-home #menu_wrapper {
        margin-left: -990px;
    }
    
        body.admin-home #menu_wrapper li {
            font-size: 0.9em;
            width:100%;
        }

        body.admin-home #menu_wrapper li a {
            width:94%;
        }

    body.admin-home #header1, #header2 {
        width: 995px;
    }

    body.admin-home div.message {
        margin-left: 199px;
        top: 100px;
    }
}


/*--------------------------------------------------------------------------------*/
/* MEDIA QUERIES FOR GLOBAL.CSS
/* Author: Maurine Kacel
/* Date: 15/04/2019
/*--------------------------------------------------------------------------------*/

/* @media screen and (max-width : 992px) and (min-width : 768px) { */
@media screen and (max-width : 993px) {


    .grid_1 {width: 48px;}
    .grid_2 {width: 112px;}
    .grid_3 {width: 25%;} /* 180px */
    .grid_4 {width: 240px;} 
    .grid_5 {width: 380px;} 
    .grid_6 {width: 380px;}
    .grid_7 {width: 432px;}
    .grid_8 {width: 496px;}
    .grid_9 {width: 560px;}
    .grid_10 {width: 624px;}
    .grid_11 {width: 688px;}
    .grid_12 {width: 752px;}

    .column {
        margin: auto;
        overflow: hidden;
        float:left;
        display: inline-block;
    }


    .row {
        width: 100%; /* 768 px */
        margin: 0 auto;
        overflow: hidden;
    }

    #header_wrapper {
        min-width:768px;
    }

        #header1, #header2 {
            margin:0 auto;
            width: 95%;
        }


    #footer_wrapper {
        min-width:768px;
        width:100%;
    }
        #footer1, #footer2 {
            width: 95%;
            margin:0 auto;
        }

    #menu_wrapper  li a{
        width:94%;
    }

    #article_wrapper {
        margin: 26px auto 0px;
        padding-left:10px;
        width:70%; 
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    #menu_wrapper #menu_promo {
        width: 95%;
    }
}

/* 768PX Small laptops, tablets -----------------------------     */

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

    /* GRID   -----------------------------     */

    .grid_1 {width: 45px;}
    .grid_2,
    .grid_3,
    .grid_4 {width: 250px;} /* 180px */
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8 {width: 380px;}
    .grid_9 ,
    .grid_10 ,
    .grid_11,
    .grid_12 {width: 560px;}

    /* HEADERS STYLES   --------------------------     */

    #header_wrapper {
        min-width:500px;
    }

    #footer_wrapper {
        min-width:576px;
    }

    /* CONTENT   -----------------------------     */

    #menu_wrapper {
        width: 180px;
    }

    .column  #menu_wrapper{
        float:left !important;
    }

    #menu_wrapper  li a{
        width:94%;
    }

    /* Article Wrapper */
    /* below 576 the menu is toggled with the hamburger menu method */
    #article_wrapper {
        width:65%; 
    }


}

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

    .grid_1,
    .grid_2 {width: 208px;}
    .grid_3,
    .grid_4 {width: 300px;}
    .grid_5,
    .grid_6 {width: 416px;}
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {width: 416px;} /* Trying this set up before checking if one width can control the whole layout on tablet/landscape view */


    #header_wrapper {
        min-width:400px;
    }

    #footer_wrapper {
        min-width:480px;
    }

    /* Styling the Mobile Menu (Blue Theme to overlay over white background) */

    #menu_wrapper {
        display:none; 
        margin-left:0px;
        top: 70px;
        right: 0px;
        z-index: 10; /* because breadcrumbs is at 9 */
        position: absolute;
        width:220px;
        height:90%; 
        background-color: #0077B2;
        background-image:none;

        padding: 15px 5px;
    }

        #menu_wrapper #menu_promo {
            margin: 2em auto 0;
        }

        #menu_wrapper  li {
            background-color: #0077B2;
        }

            #menu_wrapper  li a{
                background-color: #0077B2;
                background-image:none;
                color: #fff;
            }
                #menu_wrapper li a:hover, #menu_wrapper li.first a:hover{
                    background:none repeat scroll 0 0 #005c8a;
                }

                #menu_wrapper li.active a {
                    background-image:none !important;
                    background-color: #005c8a !important;
                    color: #fff;
                    font-weight:bolder;
                }

                #menu_wrapper li.active a::after {
                    content: "\00203A";
                    position:relative;
                    left: 50px;
                    font-size:20px;
                }
                

                #menu_wrapper li.active li a{
                    background:none !important;
                    color:#000!important;
                }
    

                #menu_wrapper li.first a {
                    background-image:none;
                    background-color: #0077B2;
                }

                #menu_wrapper li.first.active a {
                    padding: 0px 0px 0px 10px;
                    background:none !important;
                    background-color: #005c8a !important;
                }

    /* Article Wrapper */
    /* below 576 the menu is toggled with the hamburger menu method */
    #article_wrapper {
        width:95%;
        padding:0;
    }

/* hide user men u to use the one in the hamburger menu */
    .hide_user_menu {
        display:none !important;
    }

}

/* Don't forget to put the min:320px in comments if I do not use the 320 MQ */

@media screen and (max-width : 479px) {
    
    .grid_1, .grid_2, .grid_3,
    .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9,
    .grid_10, .grid_11, .grid_12 {width: 95%;} /* Try 100% before trying 260px */

    .login_links {
        width: 75%;
    }

    #header_wrapper {
        min-width:300px;
    }

    #footer_wrapper {
        min-width:320px;
    }   

}

#topnav, #topnav-opened {
    font-size:40px;
    vertical-align: middle;
    display:inline;
    position:absolute;
    right:5%;
    top:2px;
    z-index:999; 
    cursor:pointer !important;
    color: #fff;
}

#topnav-opened {
    display:none;
}

#menu_wrapper {
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}


@media all and (min-width: 769px) {
    #topnav, #topnav-opened  {
        display:none;
    }

    #menu_wrapper {
        display:block !important;
    }

    .mobile_menu {
        display:none;
    }
}

table.default.display
.grid {
    padding-top: 21px;
}