*{ margin:0; padding:0; outline:0;}

html, body {
    line-height:18px;
    font-family: Arial,Tahoma;
    font-size: 12px;
}

H1{ margin-bottom:3%; letter-spacing: -1px; font-weight:normal; font-size:1.833333333em;}
H2 {font-size: 1.25em; line-height:0.9999999em; letter-spacing:-1px;}

p{margin-bottom:2%; text-align:justify; display:block; }
p.no-record{ width:100%; margin:5% 0px; font-weight:bold; color:#6a0f0c;}
br{clear: both;}
a img{border:none;}
hr{border:1px #e3e3e4 solid; width:100%; margin:2px 0 0 0;}


small{ font-size:0.916666667em;}

A{text-decoration:underline; background-color:Transparent;}
A:hover{text-decoration:none; background-color:Transparent; cursor:pointer;}
A.current{text-decoration:underline; font-weight:bold;} 

/*ul, ol{margin-bottom:2%;}*/
li{ list-style:none;}
.InfoPage li, ul.lijst li{ line-height:23px; list-style:disc inside;}

table { width:100%;}

.goback{
    float:left; 
    width:200px;
    padding-top:10px;
    height:30px;
    margin-top:5%;
}
.goback a{font-weight:normal;}
.goback:hover{ text-decoration:none; }

/* Button */
.button, a.akkoord{
    /*padding:3% 7%;*/
    padding:0.8em 1.5em; 
    border:none; 
    cursor:pointer;
    font-size:1.166666666666667em;  /*14px*/
}
.button:hover{}
.button:focus {border:none;}
.btnDisabled{cursor:not-allowed;}
.btnDisabled:hover {color:#0073c6; background-color:#ffffff;}

a.akkoord{ text-decoration:none;}

.RadButton_Default .rbDecorated {
    border:none; 
    cursor:pointer;
    font-size:1.166666666666667em;
    background-color:#0073c6; color:#ffffff
}

.rcbSeparator
{
    font-size:1.2em;
}

/* textbox */
input{-webkit-appearance: none; border-radius: 0;}
select {border-radius:0;} 

input.txtBox, input.mdatum, textarea {
    width: 80%;
    text-indent: 5px;
    padding: 0.5em 0;
    font-size:1em;
    font-family: Arial;
    -webkit-appearance: none;
    border-radius: 0;

    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;    
}
select{padding:1% 0; text-indent:0.10%; border:1px solid #484747; color:#505050; }



html body .RadInput_Default .riEmpty, html body .RadInput_Empty_Default {
    color: #a5a5a5;
}

html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default {
    color: #333;
    font: 12px Arial !important;
}

html body .RadInput .riTextBox, html body .RadInputMgr {
    /* border:none !important; */
    border-radius:0;
    padding: 0.5em 0 !important;
    
}

.RadInput_Default, .RadInputMgr_Default {
    font: 12px Arial; 
    width:80%;
    text-indent:5px;
    border-radius:0;
}



.RadComboBox_Default .rcbInput { font-family:Arial !important;}

.txtBox-alternate{padding:1% 0; font-size:0.916666667em; text-indent:4px;}

 input.mdatum {
     width:45%;
     text-indent: 25px;
     background:#ffffff url("../common/ic_calendar.png") no-repeat scroll 4px center;
     min-width:100px;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     transition: all .5s;
}


.ie input[type="email"]:focus, .ie input[type="password"]:focus{
    background:transparent;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
    zoom: 1;}
.ie7 label, .ie6 label{display: none;}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {display: none;}
input:focus + label{right: 65px; color:#666666; font-style:italic;}


/**/
 html body form .RadInput .MyEmptyTextBox,
        html body form .RadInput .MyEnabledTextBox,
        html body form .RadInput .MyHoveredTextBox,
        html body form .RadInput .MyFocusedTextBox,
        html body form .RadInput .MyInvalidTextBox,
        html body form .RadInput .MyNegativeTextBox
        {
              width: 80%;
            text-indent: 5px;
            padding: 0.5em 0;
    font-size:1em;
    font-family: Arial;
        
    }
html body form .RadInput .defEmptyTextBox,
html body form .RadInput .defEnabledTextBox,
html body form .RadInput .defHoveredTextBox,
html body form .RadInput .defFocusedTextBox,
html body form .RadInput .defInvalidTextBox,
html body form .RadInput .defNegativeTextBox{
    font: 1em arial;
    -webkit-appearance: none; border-radius: 0;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
    box-sizing: border-box;  
   height:30px;
   color:#484747;
}
html body .RadInput .defEmptyTextBox{color: #999;}
html body form .RadInput .defHoveredTextBox,
html body form .RadInput .defFocusedTextBox{
    border-color: #ef7f01;
    background: #eeeeee;
}
html body form .RadInput .defEnabledTextBox{ color:#484747;}
html body form .RadInput .defInvalidTextBox{ background-color:red;}
html body form .RadInput .defNegativeTextBox{ color: #930; font-weight: bold;}

html body .riSingle .riTextBox[type="text"] {
    margin: 0;
    text-indent: 5px;
    /*padding: 0.5em 0;*/
    font-size:1em;
    font-family: Arial;
    -webkit-appearance: none;
    border: 1px solid #505050; 
    color:#484747;
    height:28px;
}



/* Label */
label{
    line-height: 35px; 
    position: relative; 
    right: 260px;
    top: 0; 
    bottom: 0; 
    color:Transparent;
    -moz-transition: 0.3s right ease;
    -ms-transition: 0.3s right ease;
    -o-transition: 0.3s right ease;
    -webkit-transition: 0.3s right ease;
    transition: 0.3s right ease;
 	z-index: 0; 
    cursor:text;}

label.static{
    right: 65px; top: 0; bottom: 0; color:#666666;
    -moz-transition:none;
    -ms-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

 /* div */
.box {display: block; width: 100%;}
.InfoPage{ display:block; width:90%; max-width:900px;}
.modalwindow {display:block; width:600px; padding:2% 1%;}

/* Error */
div.loginError{ float:left; width:375px; padding-top:10px; } 
.errorTextContainer{
    background:url('../common/ic_error.png') no-repeat left top;
    padding-left:24px; min-height:24px;  
}
.errorText{color:#DD1821;font-weight:bold; font-size:11px;}
.errorText-alternate{color:#ffffff; font-size:12px;}

.errorIcon {background:url('../common/ic_error.png') no-repeat center  center;min-height:24px; padding:2px 0 0 24px;
}


div.okContainer{
    background:url('../common/ok.gif') no-repeat left center ;
    padding-left:16px; 
    line-height:19px;
   
}
.ok{font-size:11px;color:#108e03; font-weight:bold;}


.RadWindow_Metro a.rwIcon { /*background: url('../common/ic_error.png') !important;*/ } 


/* */
#wrapper{ width: 80%; max-width:1152px; margin:0 auto;}
#container{width:98%; margin: 0 auto; padding:0; }
#header{ width:100%; height:111px; padding-top:2%;  clear:both; display:block;}

div#logo{display:block; width:258px;}
div#logo img{ border:0;}

#col-block{ margin-top:1%; padding-bottom:3%; min-height:300px; width: 100%;  display:block; }
#col1{ width: 75%; clear:both; display:inline-block; padding-bottom:3%; margin-top:1%; }
#col2{ display:inline-block; width:23%; margin: 1% 0 0 2%; vertical-align:top; padding:39px 0 3% 0; }
    
#bottom{ width: 100%; margin: 1.5em auto 0 auto; font-size: 0.916666667em; border-top: 1px solid #505050; color: #505050; clear: both; }
#bottom A{ text-decoration:none;}
#bottom A:hover { text-decoration:underline;}

#bottom .language{display:inline-block; width:20%; background:#ffffff url('../common/ic_lang.png') no-repeat left 9px; padding:10px 0px 5px 30px; }
select.ddlLanguage{font-size:0.916666667em; padding:1% 1% 1% 0; text-indent:1%; border:1px solid #484747; color:#505050; width:100px; }

#bottom .list-links{ display:inline-block; line-height:2em; font-weight:bold; vertical-align:top; padding-top:1%; text-align:right; width:24.5%;}
#bottom .list-links li{line-height:2em; /*28px*/}

.socmed a{
    margin:1% 0px 5px 5px;
    background:url('../common/socmed.png') no-repeat left top;
    display: inline-block;
	height: 32px;
    width:32px;	
	outline: none;
	text-indent: -9000px;
	position: relative;
}
.socmed a.facebook{background-position:0px -1px;}
.socmed a.facebook:hover{background-position: 0px -36px;}
.socmed a.twitter{background-position: 0px -70px;}
.socmed a.twitter:hover{background-position: 0px -105px;}
#bottom .copyright{text-align:right;}



/*tab*/
#tabs{ float:left; width:100%;  margin-top:2%; font-size:1.25em; /*15px*/ }
#tabs A:hover, #tabs A.selected {}
.nav li {display:inline;}
.nav li a{ text-decoration:none; padding-right:8px; font-weight:bold; letter-spacing:-1px; line-height:1.666666666666667em; /*30px;*/  }
.nav li + li {padding-left:2%;}


.nav-bo { /*border-bottom:5px solid #484747;*/ font-size:1em !important;}
.RadMenu_Metro .rmRootGroup { background-color:#ffffff !important; color:#505050 !important; border:none !important}
.RadMenu_Metro .rmRootGroup .rmItem { border-right:none !important; }
.RadMenu_Metro .rmRootGroup .rmRootLink:hover, .RadMenu_Metro .rmRootGroup .rmFocused > .rmRootLink {
    border-color: #8e8e8e !important;
    color:#ffffff;
    background-color:#eeeeee;
}

.RadMenu_Metro .rmVertical rmGroup rmLevel1{ background-color:red !important;}
.RadMenu_Metro .rmGroup, .RadMenu_Metro .rmMultiColumn { 
    background-color:#8e8e8e !important;
    border-color:#8e8e8e !important;
}

.subTabItem a { color:#ffffff !important;}
.subTabItem a:hover { color:#d67f1e !important; background-color:#eeeeee !important; }

.rmExpanded { background-color:#8e8e8e !important; color:#d67f1e !important;}
.rmDisabled a:hover { background-color:#8e8e8e !important; color:inherit !important;}

.rmFocused > .rmLink{ background-color:#8e8e8e !important; color:#d67f1e !important;}

.RadMenu:after, .RadMenu ul:after, .RadMenu li:after, .RadMenu div:after { clear:none !important}

.RadMenu_Metro .rmRootLink { border:none !important; margin-right:10px !important}


/**/


 /* WebPrint */
 #webprint{ 
    display:block;
    width:80%;
    padding:10%;
    background-color:#0073c6; 
    color:#ffffff;
    font-weight:bold;
    text-align:center;
}

/*landing page*/
.landingBox{ float:left; text-align:center; margin-top: 15%; width: 100%; color:#484747}
.landingBox .intro{ display:block; width: 100%; padding: 4% 0px 2% 0px; font-weight:bold;}


div.clickable { /* Containing div must have a position value */ position:relative; } 
div.clickable a{
    position:absolute; width:100%; height:100%; top:0; left:0; 
    text-decoration:none;   
    z-index:10; /* raises anchor tag above everything else in div */ 
    background-color:white; /*workaround to make clickable in IE */ 
    opacity: 0; /*workaround to make clickable in IE */ 
    filter: alpha(opacity=1); /*workaround to make clickable in IE */ 
}



/* form */
.form-element{display:block; margin-bottom:9px;}
.label-column{display:inline-block;}
.data-column{ display:inline-block;}

#form1 label.error { background:url('../common/ic_error_small.png') no-repeat 0px 0px; padding-left: 16px; right: 0px; color:#DD1821;}
#form1 label.checked { background:url('../common/ic_yes_small.png') no-repeat 0px 0px;}
#form1 .success_msg { font-weight: bold; color: #0060BF; margin-left: 19px; }
#form1 #dateformatStatus, #form1 #termsStatus { margin-left: 6px; }





/* --------- default -------------  */
@media screen and (min-width: 641px) {

    /* right column overview*/
    .boxOverview { display: block; width: 100%; padding: 10% 0; }
    div.boxOverview .row1 { font-weight: bold; font-size: 1.166666666666667em; line-height: 1.222222222222222em; display: block; width: 85%; margin: 0 auto; }
    div.boxOverview .row2, 
    div.boxOverview .row3 { display: block; width: 100%; margin-top: 10px; text-align: center; }
    div.boxOverview .row2 .tegoed { position: relative; top: -10px; }
    div.boxOverview .row2 .balance { padding: 0 2px 0 15px; font-weight: bold; padding-right: 2px; letter-spacing: -1px; font-size: 2.333333333333333em; /*28px;*/ }
    div.boxOverview .row2 .cent { font-size: 1.5em; font-weight: normal; letter-spacing: -1px; position: relative; top: -5px; }

    div.boxOverview .row2 .refresh {
        background: #d67f1e url('../common/ic_refresh_alt.png') no-repeat center center;
        width: 20px;
        height: 20px;
        border: 0;
        margin-left:2.5em;}
    div.boxOverview .row2 .refresh:hover {background-image:url('../common/ic_refresh.png'); cursor:pointer;}

    div.boxOverview .row3 .tegoed { position: relative; top: -5px; }
    div.boxOverview .row3 .balance { padding: 0 2px 0 12px; font-weight: bold; padding-right: 2px; letter-spacing: -1px; font-size:1.5em;  }
    div.boxOverview .row3 .cent { font-size: 1.15em; font-weight: normal; letter-spacing: -1px; position: relative; top: -5px; }



    .logout { display: block; width: 100%; text-align: center; margin-top: 13px; padding: 10px 0; background: #505050 url('../common/Lock_White_48x48.png') no-repeat 95% center; }
    .logout a { color: #fff; text-decoration: none; letter-spacing: -1px; font-size: 1.833333333333333em; /*22px*/ }
    .logout a:hover { color: #eeeeee; }

    .bo_logout { width: 140px;text-align: right; float: right; font-size: 13px;}
    .bo_logout a { font-size: 13px; color: #0073c6 !important; text-decoration: underline !important; letter-spacing: -1px; }
    .bo_logout a:hover { color: #58b7fb; text-decoration: none !important; }


    
    .bloxInfo{ float:left; width:45%; margin:5% 0 5% 0;}    
    .bloxInfo + .bloxInfo{ margin-left:9.5%; }  
    .bloxInfo h2{ font-size:1.5em; font-weight:normal; margin-bottom:5%;}


    /* form */
    table.frm1{ width:100%; border-spacing: 0px; border-collapse: collapse; empty-cells: show;}
    table.frm1 td.field{padding-bottom: 1%;}
    table.frm1 td.status {vertical-align: top; width: 10%;}
    table.frm1 td.footer{ padding:1% 5% 0 0px; text-align:right; }
    table.frm1 td.inpt { width:70%; padding:1% 10px 1% 0;}
    table.frm1 td.vald { width:5%; text-align:center; }
    table.frm1 td.footer-save {padding:5% 1% 0 0; text-align:right;
        }
    table.frm1 td h2 { margin: 25px 0 5px;}
}


/* --------- smartphone -------------  */
@media screen and (max-width: 640px){
    
        /* textbox */
    input[type=search] {
        text-indent: 25px;
        width:75%;
        background: url("../common/ic_search_gray.png") no-repeat scroll 4px center #ffffff;
        border: 1px solid #505050;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        transition: all .5s;}

    input[type=search]:focus {width:90%;border: 1px solid #ff7e00;}

    /* Label */
    label {display:none;}


    #wrapper{ margin:0 auto; width: 100%; background-color:#333333;}
    #container{width:98%; margin: 0 0 0 auto; background-color:#ffffff;}

    #header{ /*position: fixed !important;
       left: 0px !important;
       right: 0px !important;
       top: 0px !important;
       z-index: 999 !important;*/}

    div#logo{ display:block; width:100%; margin:2% 0 3% 0; }

    #col-block{ width: 98%; padding: 0 1%;}
    #col1{ width: 98%; padding: 0 1%; margin-top: 20px; clear:both; }
    #col2{display:none;}

    #bottom { width: 98%; padding: 0 1%; margin: 1.5em auto 0 auto; 
              /*
        position: fixed !important;
        left: 0px !important;
        right: 0px !important;
        bottom: 0px !important;
        z-index: 999 !important;
        */
    }
    #bottom .language{ width:40%;display:inline-block;}
    #bottom .list-links{text-align:left; width:100%;}
    #bottom .list-links li{text-align:left;}
    #bottom .socmed {width:48% !important; text-align:right; min-width:30%; padding-right:1%;}
    #bottom .copyright{padding-top:2%;}
    
    
    
    #mobile-header img { width:100%;    }
    #mobile-header {
      background-color:#eeeeee;
      display:table !important;
      background-color:#333333;
      width:100%;
      padding:1% 0;
    }
    .mobile-header-row {
        display:table-row;
    }
    .mobile-header-cell {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        color:#ffffff;
    }

    #responsive-menu-button {    }
    #mobile-header .menu {padding-left:1%; width:9%;}
    #mobile-header .logout {width:12%; padding-right:2%;}
    .mobile-header-cell span {font-size:1.5em;}
    .tweeRegel span { font-size:1.2em;}

    .mobile-header-cell .mFQuota {display:block; margin-top:4px;}

    


    .bloxInfo{display:block; width:100%; margin:5% 0 2% 0;}    
    .bloxInfo + .bloxInfo{ margin-left: 0; }  
    .bloxInfo h2{ font-size:1.5em; font-weight:normal; margin-bottom:2%;}


    /*tab*/
    #tabs{ width:100%; display:block; clear:both; }
    #tabs A{ text-decoration:none;  display:block; font-weight:bold;  letter-spacing:-1px;}

   
    /* Form */
    table.frm1 td.field{padding:0 0 4% 2%;}
    table.frm1 td.status {vertical-align: top; width: 5%;}
    table.frm1 td.footer{padding:2% 5% 2% 0;text-align:right;}



}

/* --------- tablet -------------  */
@media screen and (min-width: 641px) and (max-width: 1024px) {

    #wrapper {width:95%; }
    .logout a { font-size: 1.5em; /*18px*/}
 
}


/* --------- desktop -------------  */
@media screen and (min-width: 1025px) {

  

  

}

/* --------  End -----------  */




/* detail view */
table.view{ border-collapse:collapse; width:100%;}
table.view td{text-align:left; padding:5px 0px 5px 3px;}
table.view tr.head{ font-size:14px;  font-weight:normal; text-align:left;}
table.view tr.alternate{}



div.checked
{
    background:#ffffff url('../common/ic_yes.png') no-repeat left top;
    padding-left:35px; 
    min-height:24px;
    padding-top:5px;
    font-size:14px;
    font-weight:bold;
}

div.warning
{
    background:#ffffff url('../common/ic_error.jpg') no-repeat left top;
    padding-left:24px; 
    min-height:24px;  
    font-size:13px;
    font-weight:bold;
    color:red;
}






/*-------------------------*/
.modalBackground {
	/*filter:alpha(opacity=70);
	opacity:0.7;*/
    /*background-color:#333333;*/
    /*position:absolute; top:0;
    left:0; 
    overflow:hidden;*/
    z-index:9999; 
    width:100%; 
    height:100%; 	
}

.modalPopup {
    width:605px; 
    background-color:#FFFFFF;
    border:solid 1px #3b86e0;
	padding:3px; 
}



/*  */
.ajax__balloon_popup .oval {
 
}

/* SMALL SIZE */
.ajax__balloon_popup .oval .small {
	width:330px;
	padding: 0px;
	color: #484747;
	text-align: left;
	border: 4px solid #fff;
	
    position: absolute;
	background: #eeeeee;
    white-space:normal;     	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}

.ajax__balloon_popup .oval .small .bottom_right {
    width:337px;
    height:65px; 

    left:-344px;
    top:-110px;
}
.ajax__balloon_popup .oval .small .bottom_right .ajax__content {
	padding:5px; 
}

.ajax__balloon_popup .oval .small .bottom_right:before,
.ajax__balloon_popup .oval .small .bottom_right:after{
	content: '';
	position: absolute;
	bottom: -12px;
	left: 13px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #666666;
}
.ajax__balloon_popup .oval .small .bottom_right:after{
	border-top: 10px solid #ffffff;
    margin-bottom:1px;
}

<!-- -->
.ajax__balloon_popup .oval .medium {
	/*width:230px;
	height:100px; 
	bottom: 0px;*/

    padding: 0px;
	color: #484747;
	text-align: left;
	border-left: 4px solid #fff;
	position: absolute;
	
	background: #eeeeee;
    white-space:normal;     	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.ajax__balloon_popup .oval .medium .top_right {
    width:250px;
    height:90px; 
}
.ajax__balloon_popup .oval .medium .top_right .ajax__content {
	padding:5px; 
}
.ajax__balloon_popup .oval .medium .top_right:before,
.ajax__balloon_popup .oval .medium .top_right:after{
	content: '';
	position: absolute;
	bottom: 64px;
	left: 0;
	margin-left: -15px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #666666;
}
.ajax__balloon_popup .oval .medium .top_right:after{
    bottom: 64px;
	margin-left: -14px;
	border-right: 10px solid #ffffff;

}

<!-- -->


iframe {overflow:hidden;}


/* validator */ 
.Errhighlight{background-color:#fff5f5; border:1px dotted #e19b9b !important;}

.CustomValidatorCalloutStyle div, 
.CustomValidatorCalloutStyle td {
    border:solid 1px #e19b9b;
    background-color: #eeeeee;}

.CustomValidatorCalloutStyle .ajax__validatorcallout_error_message_cell{ color:#DD1821;}


/* calendar */
.calendar{ background-color:#eeeeee;}
.calendar .ajax__calendar_active { background-color:#0073c6; color:#ffffff; font-weight:bold;}
.calendar .ajax__calendar_hover { font-weight:bold; color:#0073c6;}


/* Asirra */
#asirra_LayoutTable
{
    width: 380px;
}
#asirra_ChallengeTableBody td{ padding:5px;}
#asirra_InstructionsTextId{ font-weight:bold;}
#asirra_EnlargedDiv{ border:3px solid #0073c6; font-size:10px; text-align:left; background-color:#eeeeee;}



/*top balk */
.cntTopBar {display:block; width:100%; margin:2% 0;}
.cntTopBar a:hover { background-image:url('../common/ic_addRecord_mo.png');color:#ef7f01;}
.cntTopBar a {
    background: url("../common/ic_addRecord.png") no-repeat left center;
     padding:10px 0px 10px 40px;
     display:inline-block;
     color:#505050;
     font-weight:bold;
     text-decoration:none;
     font-size:1.1em;
}