/* Het inlogformulier en maak een acount formulier */
.formcontainer {
    /* display: none; */
    position: relative;
    margin:10px 0 10px 50%;
    width:45%;
}

.formcontainer h2 {
    float:left;
    margin:0;
}

/* Link naar formulier om een account te maken */
.navlink {
    float:right;
    line-height:2em;
    margin:0;
}
/* E-mail en wachtwoord invoervelden */
.formcontainer form input[type="text"],
.formcontainer form input[type="password"],
.formcontainer form input[type="email"] {
    padding: 8px 6px;
    font-size: 1.25em;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.formcontainer form input[type="checkbox"],
.formcontainer form label {
    margin-top:12px;
    margin-bottom:10px;
}

.invoercontainer {
    margin:5px 0;
    position:relative;
}
.formcontainer form input[type="submit"] {
    float:right;
}

/* Het maak-account formulier */
#createaccount {
    
}
#createaccount form #vnaam {
    float:left;
    width:59%;
    margin-right:1%;
}
#createaccount form #tvoegsel {
    width:40%;
}

/* Wachtwoord vergeten formulier */
#wwvergetenform {
    
}

.formfoutcontainer {
    position: absolute;
    width:100%;
    left:-105%;
    height:100%;
}

/* De wolkjes die een foutmelding weergeven voor de invoervelde bij het inloggen */
.errorpijl {
    float:right;
    position: relative;
}
.errorpijl:before, .errorpijl:after {
    left: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.errorpijl:after {
    border-color: rgba(255, 244, 244, 0);
    border-left-color: rgb(255, 244, 244);
    border-width: 10px 15px;
    top: 20px;
    margin-top: -10px;
}
.errorpijl:before {
    border-color: rgba(213, 98, 98, 0);
    border-left-color: rgb(213, 98, 98);
    border-width: 11px 16px;
    top: 20px;
    margin-top: -11px;
}

.warningpijl {
    float:right;
    position: relative;
}
.warningpijl:before, .warningpijl:after {
    left: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.warningpijl:after {
    border-color: rgba(255, 255, 234, 0);
    border-left-color: rgb(255, 255, 234);
    border-width: 10px 15px;
    top: 20px;
    margin-top: -10px;
}
.warningpijl:before {
    border-color: rgba(166, 166, 0, 0);
    border-left-color: rgb(166, 166, 0);
    border-width: 11px 16px;
    top: 20px;
    margin-top: -11px;
}

.notificationpijl {
    float:right;
    position: relative;
}
.notificationpijl:before, .notificationpijl:after {
    left: 100%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.notificationpijl:after {
    border-color: rgba(244, 255, 244, 0);
    border-left-color: rgb(244, 255, 244);
    border-width: 10px 15px;
    top: 20px;
    margin-top: -10px;
}
.notificationpijl:before {
    border-color: rgba(98, 213, 98, 0);
    border-left-color: rgb(98, 213, 98);
    border-width: 11px 16px;
    top: 20px;
    margin-top: -11px;
}

#wwopvragenterug, #nieuwaccountterug {
    display:none;
    float:right;
}

#wwnotificatie {
    float:right;
    max-width:200px;
    position:relative;
}

#accountvoorwaarden, #accountnotificatie, #wwinfo {
    position:absolute;
}

#jscheck {
	position:absolute;
	top:0px;
	width:1024px;
} #jscheck .error {
	margin:0 25% 0;
}

/* Mobile Phones Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait){

}
/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) and (orientation: landscape){

}
/* Mobile Phones Portrait or Landscape */
@media screen and (max-device-width: 640px){

}
/* iPhone 4+ Portrait or Landscape */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .formcontainer {
        margin-left:50%;
        left:0px;
        width:50%;
    }
    .formfoutcontainer {
        max-width:90%;
        left:-95%;
    }
    .errorpijl:after {
        border-width: 16px 22px;
        top: 20px;
        margin-top: -10px;
    }
    .errorpijl:before {
        border-width: 17px 23px;
        top: 20px;
        margin-top: -11px;
    }
}

/* Tablets Portrait or Landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    
}