@charset "utf-8";
/* CSS Document */
/* niet meer nodig
body{
	background-image: url("/images/kluis.jpg");
	background-size:100%;
    background-color: #cccccc;
}
*/
#mask{position:absolute; top:118px; width:100%; float:left;}
#container_login {
    width:400px;
    padding:0px;
    background:rgba(255,255,255,0.8);
    margin:0 auto;
    border:1px solid black;
    border-top-color:black;
    border-bottom-color:black;
    box-shadow:0 1px 1px #ccc;
    border-radius:0px;
    position:relative;
}
#container_login ul, li {
    margin:0;
    padding:0;
    list-style-type:none;
}
h1 {
    margin:0;
    padding:10px 0;
    font-size:24px;
    text-align:center;
    background:transparant;
    border-bottom:1px solid #dde0e7;
    box-shadow:0 -1px 0 #fff inset;
    border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
    text-shadow:1px 1px 0 #fff;
}
#container_login ul li {
    margin:10px 20px;

}
#container_login li {
    text-align: center;
}

/*style input elements:*/
#container_login input, select {
    padding:10px 10px;
    border:1px solid #d5d9da;
    border-radius:5px;
    box-shadow: 0 0 5px #e8e9eb inset;
    width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */
    font-size:1em;
    outline:0; /* remove webkit focus styles */
}
#container_login input:focus, select:focus {
    border:1px solid #b9d4e9;
    border-top-color:#b6d5ea;
    border-bottom-color:#b8d4ea;
    box-shadow:0 0 5px #b9d4e9;
}
/*styles to our other form elements*/
label {
    color:#555;
}
#container_login span {
    /*background:#f6f6f6;*/
	background:transparant;
    padding:3px 5px;
    display:block;
    border-radius:5px;
    margin-top:5px;
	float:center;
}
/*style the buttons*/
#container_login input[type=button] {
    background: #57a9eb; /* Old browsers */
    background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
    background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
    border:1px solid #326fa9;
    border-top-color:#3e80b1;
    border-bottom-color:#1e549d;
    color:#fff;
    text-shadow:0 1px 0 #1e3c5e;
    font-size:.875em;
    padding:8px 15px;
	width:150px;
    border-radius:20px;
    box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
	cursor:pointer;
}
#container_login button:active {
    background: #3a76c4; /* Old browsers */
    background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
    background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
    box-shadow:none;
    text-shadow:0 -1px 0 #1e3c5e;
}
/*Now we are going to style the box that informs users if they are meeting the password requirements. First, we will style the containing element (#pswd_info).*/
#pswd_info{
	position:absolute;
	bottom:-55px;
	bottom: -115px\9; /* IE Specific */
    right:55px;
    width:250px;
    padding:15px;
    background:#fefefe;
    font-size:.875em;
    border-radius:5px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd;
}
#pswd_info2{
	top:100px;
	/*bottom: -115px\9;  IE Specific */
    width:96%;
	background:#fefefe;
	padding:2%;
    border-radius:0px;
    border:1px solid #ddd;
	text-align: center;
}
/*Now let’s add some style to the H4 element:*/
#pswd_info h4{
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;
	text-align: center;
}
/*Lastly, we are going to use the CSS ::before selector to add an “up-pointing triangle”. This is a geometric character which can be inserted using it’s corresponding UNICODE entity. Normally in HTML you would use the character’s HTML entity (▲). However, because we are adding it in CSS, we must use the UNICODE value (25B2) preceded by a backslash.*/
/*DEZE WERKT NIET*/
#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}
/*Let’s add some styles to our requirements. If the requirement has been met, we’ll give it a class of “valid”. If it hasn’t been met, it will get a class of “invalid” (default class). As for the icons, I am using two 16×16 pixel icons from the Silk Icon Set.*/
.invalid {
    background:url(../images/invalid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#ec3f41;
}
.valid {
    background:url(../images/valid.png) no-repeat 0 50%;
    padding-left:22px;
    line-height:24px;
    color:#3a7d34;
}
/*Now that we have everything styled exactly how we want it, we’re going to hide the password information box. We’ll toggle it’s visibility to the user using JavaScript. So let’s add the following rule:*/
#pswd_info, #pswd_info2 {
    display:none;
}