body.login {
    margin: 0;
    padding: 0;
    background: #f3f3f3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 62.5%;
    overflow: hidden;
    color: #fff;
}
/*
Verticale centreren wordt verkregen door het: 
  - absoluut positioneren van het ouder element;
  - zetten van een negatieve topmarge met een lengte van de helft van de hoogte van het te centreren (kinder-)element (#log);
  - meegeven van een top positie van 50%;
  - meegeven van een breedte van 100%;
*/
body.login div#contentVert {
    position: absolute;
    background: url(/images/telemagics/dog.png) no-repeat 50% -29px;
    margin-top: -193px;
    top: 50%;
    width: 100%;
}
/*
Horizontaal centreren wordt verkregen door het: 
  - meegeven van een vaste breedte, in ons geval 480px;
  - zetten van een auto marge. 
*/
body.login div#log {
    width: 409px;
    height: 307px;
    margin: 76px auto 116px auto;
    background: url(/images/telemagics/bpms-bg.png) no-repeat;
    padding: 0;
}

body.login div#log img#logo-wit {
    margin: 20px 0 20px 20px;
}

body.login div#log form {
    width: 240px;
    margin: auto;
    padding: 20px 0 20px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

body.login div#log form fieldset div.entry, body.login div#log form fieldset div.submit {
    float: left;
    width: 240px;
}

body.login div#log form fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

body.login div#log form legend {
    display: none;
}

body.login div#log form label {
    float: left;
    width: 240px;
    padding: 5px 0 5px 0;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
}
body.login div#log div#contentlog form fieldset div.entry select#gebruikersnaam {
    float: left;
    border: 1px solid #ddd;
    height: 18px;
    font-size: 1em;
    color: #555;
    width: 234px;
    font-family: verdana;
}
body.login div#log div#contentlog form fieldset div.entry select option {
    background: #eee;
}
body.login div#log div#contentlog form fieldset div.entry input.invulveld {
    float: left;
    background: url(/images/telemagics/bg_input.gif) repeat-x;
    border: 1px solid #ddd;
    height: 12px;
    padding: 4px;
    font-size: 1em;
    color: #555;
    width: 224px;
    font-family: verdana;
}
body.login div#log div#contentlog form fieldset input.invulveld:hover {
    border: 1px solid #ccc;
    color: #999;
}
body.login div#log div#contentlog form fieldset input.invulveld:focus {
    border: 1px solid #ffd5b4;
    color: #555;
}
body.login div#log input.login {
    float: left;
    margin: 20px 0px 0px 38px;
    width: 69px;
    height: 21px;
    background: url(/images/telemagics/opslaanknop.png) no-repeat;
    cursor: pointer;
    border: 0px;
}
body.login div#log input.login:hover {
    background: url(/images/telemagics/opslaanknop2.png) no-repeat;
    border: 0px;
}
body.login div#log input.wis {
    float: left;
    margin: 20px 0px 0px 20px;
    width: 69px;
    height: 21px;
    background: url(/images/telemagics/wissenknop.png) no-repeat;
    cursor: pointer;
    border: 0px;
}
body.login div#log input.wis:hover {
    background: url(/images/telemagics/wissenknop2.png) no-repeat;
    border: 0px;
}
body.login div#log p {
    display: block;
    height: 30px;
    width: 350px;
    margin: 0;
}