Legenda:

Sprint 3 

index.php (de log in scherm)

session.php (dit checkt of de persoon die inlogt admin is)

planning.php (de ticket overzicht voor de user)

ticketinsert.php

ticketedit.php

ticketdelete.php

board.php (de ticket overzicht voor de admin)

user.php (de users overzicht voor de admin)

userinsert.php

useredit.php

userdelete.php

style.css

html body{
    background-color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    height: 100%;
    min-width: 100%;
    font-size: 13px;
    color: #404040;
    direction: ltr;
}
form{
    position:inherit;

}
nav{
     position: absolute;
     top:0;
     left:0;
     width:100%;
     height:60px;

 }
label{
    text-align:center;
    color:#587791;
    font-size:15px;
    width:100px;
    margin-bottom:15px;
}
a{
    font-size: 30px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    color:      white;
    position: relative;
    top:10px;
    padding-right:5px;

}
td {
    padding: 0 10px;
    height:36px;
}
th{

    font-size: 20px;
}
/* HIER ONDER IS VOOR GLOBAL VARIABELS */
.wrapper{
     position:relative;
     min-width: 100%;
     height: 100%;
 }

.banner{
    background-color:#587791;
    width:100%;
    height:60px;
    position:absolute;
    top:0;
    color:white;
    text-align: center;
}
#home-button {
    font-family: Arial, sans-serif;
    text-align: center;
    margin:0;
    font-size: 50px;
}
#home-button2{
     font-size:  50px;
     top:        0;
     float:left;
     padding-left:5px;
     height:60px;
     background-color:#587791;
 }
#home-button2:hover {
    background: #90a8bc;
    text-decoration: none;
}
.nav-buttons{
    float:left;
    top:        10px;
    color:      white;
    padding-right:15px;
    background-color:#587791;
}
.nav-buttons:hover{
    background: #90a8bc;
    text-decoration: none;
}
.second-nav{
    position: absolute;
    width: 100%;
    top: 60px;
    height: 24px;
}
.add {
    position: inherit;
    margin-left:10px;
    margin-right:10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-family: Arial,sans-serif;
    color: #90a8bc;
    font-size: 15px;
    background: #eff3f5;
    padding: 3px 6px 2px 6px;
    border: solid #269900 1px;
    text-decoration: none;
}
.add:hover {
    background: #c6ffb3;
    text-decoration: none;
}
.edit {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    color: #90a8bc;
    font-size: 13px;
    background: #eff3f5;
    padding: 6px 10px 6px 10px;
    border: solid #ffffff 1px;
    text-decoration: none;
    position:inherit;
    display: inline-table;
}

.edit:hover {
    background: #ffff80;
    text-decoration: none;
}
.delete {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Arial, sans-serif;
    color: #90a8bc;
    font-size: 13px;
    background: #eff3f5;
    padding: 6px 10px 6px 10px;
    border: solid #ffffff 1px;
    text-decoration: none;
    position:inherit;
    display: inline-table;
}
.delete:hover {
    background: #ff9980;
    text-decoration: none;
}
.form-title{
    text-align: center;
    font-size:20px;
    color:#587791;
}
.label{
    font-size:20px;
    color:white;
}
.submit{
    background-color:#587791;
}
.text-field-big{
    height:200px;
    width:296px;
    border: 2px solid #587791;
    border-left: none;
    border-right: none;
    direction: ltr;
    tab-index: 3;

}
/* HIER ONDER IS VOOR PROFILE */
#home-button-field{
    width:550px;
    height: 60px;
}
#sign-out {
    top:10px;
    float:right;
    padding-right:30px;

}
#sign-out:hover {
    background: #90a8bc;
    text-decoration: none;
}
/* HIER ONDER IS VOOR INDEX */
.back{
     position:absolute;
     left:40%;
     right:400px;
     top:30%;
     width:300px;
     height:40%;
     background-color:white;
     border: 2px solid #587791;
}
.form{
    position:inherit;
    width:30%;
    height:30%;
}
.login{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              60px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
.login:hover{
    background: #cfdae2;
    text-decoration: none;
}
.login-title{
    text-align:center;
    color:#587791;
    font-size:20px;
    margin-top:10px;
}
.text-field{
    height:30px;
    width:298px;
    border: 2px solid #587791;
    border-left: none;
    border-right: none;
}
.test{
    background-color:transparent;
    width:300px;
}
.fill-up{
    width:298px;
    height:40px;
    float:left;
    background-color: transparent;
}
.fill-up2{
    width:120px;
    float:left;
    background-color: transparent;
}
.fill-up3{
    text-align: center;
}
.fill-up4{

}
.foto{
    position:relative;
    float:left;
    width:40%;
}
.foto{
    position:relative;
    float:right;
    width:40%;
}
/* HIER ONDER IS VOOR IN PROGRESS */

/* HIER ONDER IS VOOR BOARD */

/* HIER ONDER IS VOOR TICKETINSERT */
.form-frame-ticket{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:429px;
    background-color:white;
    border: 2px solid #587791;

}
.form-frame-ticket-admin{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:472px;
    background-color:white;
    border: 2px solid #587791;

}
.subject{
    background-color:#587791;
}
.content{
    background-color:#587791;
}
.type{
    background-color:#587791;
}
#request-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              70px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
    margin-left: 80px;
    margin-bottom: 15px;
}
#request-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#notification-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              85px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
    margin-left: 65px;
}
#notification-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#instruction-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              80px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
#instruction-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
#question-button{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height:             30px;
    width:              70px;
    background-color:   white;
    color:              #587791;
    border:             2px solid #587791;
    font-size: 13px;
    position: inherit;
}
#question-button:active{
    background-color: #cfdae2;
    text-decoration: none;
}
/* HIER ONDER IS VOOR USERR*/
.users {
    position: absolute;
    width: 100%;
    top: 120px;
}
.odd{
    background-color: #708fa8;
    color: white;
}
.even{
    background-color:#90a8bc;
    color: white;
}
/* HIER ONDER IS VOOR USERINSERT */
.form-frame-user{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:388px;
    background-color:white;
    border: 2px solid #587791;
}
.username {
    background-color:#587791;
}
.password {
    background-color:#587791;
}
.verify {
    background-color:#587791;
}
.email {
    background-color:#587791;
}
.company-name {
    background-color:#587791;
}
/* HIER ONDER IS VOOR USEREDIT */
.form-frame-user2{
    position:absolute;
    left:40%;
    right:400px;
    top:30%;
    width:300px;
    height:388px;
    background-color:white;
    border: 2px solid #587791;

}
.type-admin{
    background-color:#587791;
}
/* HIER ONDER IS VOOR TICKETS */
.type-select{
    margin-left: 70px ;
    margin-bottom: 20px ;
}
/* HIER ONDER IS VOOR BOARD */
.board-box{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: Arial,sans-serif;
    background: #eff3f5;
    border: solid #ffffff 1px;
    text-decoration: none;
    padding: 25px 25px 25px 25px;
}
.board-subject{
    position:inherit;
    top: 0;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-content{
    position:inherit;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-type{
    position:inherit;
    background-color: #eff3f5;
    color: #587791;
    margin: 0;
    padding: 0;
}
.board-link{
    display:block;
}
.ticket-frame{
    position: absolute;
    width: 100%;
    top: 120px;
}
#edit2{
    border: solid #587791 1px;
    left:10px;
}
#delete2{
    border: solid #587791 1px;
    left: 100px;
}
.table-not-done{
  width:25%;
    display: block;
    position: inherit;
}
.table-pending{
    width:25%;
    display: block;
    position: inherit;
    left:25%;
}
.table-in-progress{
    width:25%;
    display: block;
    position: inherit;
    left:50%;
}
.table-done{
    width:25%;
    position: inherit;
    left:75%;
}