*{margin: 0; padding:0;}

/* ---------- START NATIVE HTML STUFF ---------- */

body{
  font-family: 'Arial', Helvetica, sans-serif;
  font-size:15px;  
  line-height: 1.5em;
  background-color: #FFFFFF;
  color:#000000;
}  

img{
  float: left;
  border: none;
}

/* H2 is the same as H1, only different color. Etc. for others */
h1{
  font-size:32px;
  color:#ff6600; /*logo red*/
  font-weight:bold;
  margin: 20px 0 20px 0;
}  
h2{
  font-size:32px;
  color:#007ac2; /*logo blue*/
  font-weight:bold;
  margin: 20px 0 20px 0;
}
h3{
  font-size:22px;
  color:#ff6600; /*logo red*/
  font-weight:bold;
  margin: 10px 0 10px 0;
}  
h4{
  font-size:22px;
  color:#007ac2; /*logo blue*/
  font-weight:bold;
  margin: 10px 0 10px 0;
}  
h5{
  font-size:12px;
  color:#e73137; /*logo red*/
  font-weight:bold;

}  
h6{
  font-size:12px;
  color:#007ac2; /*logo blue*/
  font-weight:bold;
}  

/* Content Text */
p,span, ul{
  /*font-size: 12px;*/
  font-size: 100%;

}
.center{
    text-align:center;
  }
  .right{
    text-align:right;
  }
  .bold{
    font-weight:bold;
  }  

  /* Basic links in webpagina */
  a{
    text-decoration: none;
  }
  a.blue{
    color:#007ac2; /*logo blue*/
  }

  a.blue:hover{
    color:#e73137; /*logo red*/
  }

  a.red{
    color:#e73137; /*logo red*/
  }

  a.red:hover{
    color:#007ac2; /*logo blue*/
  }

  /* Style list items */
  ul{
    list-style: url("../img/listItem.png");
  }
  li{
    
    list-style-position: inside;
    padding: 0;
  }

  /* Style description list */
  dt.red{
    color:#e73137; /*logo red*/
    font-weight:bold;
  }

  dt.blue{
    color:#007ac2; /*logo blue*/
    font-weight:bold;
  }

    /* Content description list */
    dd{
      margin-left: 15px;
    }
  /* END Style description list */

  /* ---------- STYLE BUTTONS ---------- */
  a.buttonRed{
    margin-top: 10px;

    padding: 10px 20px 10px 20px;

    background: #e73137;
    border-radius: 5px;
    color: white;
    font-weight: normal;

    cursor: pointer;
  }
  a.buttonRed:hover{
    background-color: #007ac2;
  }

  a.buttonBlue{
    margin-top: 10px;
    
    padding: 10px 20px 10px 20px;
    
    background: #007ac2;
    border-radius: 5px;
    color: white;
    font-weight: normal;

    cursor: pointer;
  }
  a.buttonBlue:hover{
    background-color: #e73137;
  }
  /* ---------- END STYLE BUTTONS ---------- */
 
/* ---------- END  NATIVE HTML STUFF ---------- */

/* ---------- BACKGROUND COLORS ---------- */
.backgroundBlue{
  background-color: #007ac2; /*logo blue*/
}
  .overlayBlue{
    background-color: rgba(0, 122, 194, 0.90); /*logo blue*/
     /* TRANSPARANTIE VERANGEN DOOR IMAGES */
  }
.backgroundRed{
  background-color: #e73137; /*logo red*/
}
  .overlayRed{
  background-color: rgba(231, 2, 2, 0.90); /*logo red*/
   /* TRANSPARANTIE VERANGEN DOOR IMAGES */
  }
/* ---------- END BACKGROUND COLORS ---------- */

/* ---------- START TABLE ---------- */
/* BASIC SETTINGS TABLE */
table, td, th, tr{
  font-size: 100%;
  background: none;
}

tbody tr td{
  font-weight: normal;
  font-style: normal;
  text-align: left;
  /*border-right: 1px solid #FFFFFF;*/
  vertical-align: top;
}

/* END BASIC SETTINGS TABLE */
  /* ----- TABLE BLUE ----- */
  .tableBlue thead tr th{
    font-weight: bold;
    font-style: normal;
    background: #007ac2; /*Logo blue*/
    border-right: 1px solid #FFFFFF;
    color: white;
    text-align: center;
  }

  .tableBlue tfoot{
    background: #FFFFFF; /*Logo red*/
    color: #000000;
    text-align: right;
    border-top: 1px solid #007ac2;
  }
  /* ----- END TABLE BLUE ----- */
  /* ----- TABLE RED ----- */
  .tableRed thead tr th{
    font-weight: bold;
    font-style: normal;
    background: #e73137; /*Logo Red */
    border-right: 1px solid #FFFFFF;
     color: white;
     text-align: center;
  }


  .tableRed tfoot{
    background: #FFFFFF;
    color: #000000;
    text-align: right;
    border-top: 1px solid #e73137; /*Logo Red*/
  }
  /* ----- END TABLE RED ----- */
/* ---------- END TABLE ---------- */

/* ---------- START BASIC LAYOUT SETTINGS ---------- */
.pageHead{
  background: #FFFFFF;
}  

.header{
  border-bottom: 1px solid #EEEEEE;
  box-shadow: 0 8px 6px -6px #EEEEEE;
}

.pageContent{  
  vertical-align: top;

  margin: 0px 1% 0 1%;
  padding: 1%;
}

.pageContentBackground{
  background: url("/img/bgLogin.jpg") left bottom;
  vertical-align: top;
  
  min-height: 450px;

  margin: 5px 1% 0 1%;
  padding: 1% 6% 1% 6%;
}

.pageFoot{
  margin-top:10px;
  padding-bottom:10px;

  text-align:center;
  background-color:#e73137;  /*logo red*/
  color:#ffffff;
  height:30px;  
}  

.clear{clear: both;}

/* ---------- END BASIC LAYOUT SETTINGS ---------- */

/* ---------- START SWITCH STATS ---------- */
.switchStats{
  float: right;
  margin-top: 10px;
}

.switchStats select{
  border: 1px solid #cccccc;
  border-radius: 0px;
  line-height: 20px;
  height: 35px;
  background: none;
  box-shadow: inset 0px 8px 6px -8px #CCCCCC,
  inset 0px -8px 6px -8px #CCCCCC;
}

.switchStats select option{
  padding: 10px;
}
/* ---------- END SWITCH STATS ---------- */

/* ---------- START SWITCH DESKTOP / TABLET / MOBILE ---------- */
#logo img{
  height: 60px;
}

ul.switchDevice{
  list-style:none;
  float: left;
  margin-left: 20px;
}

.switchDevice li{
  float: left;
  display: block;
  box-shadow: inset 0px 8px 6px -8px #CCCCCC,
          inset 0px -8px 6px -8px #CCCCCC;
  border: 1px solid #CCCCCC;
  margin: 10px 10px 10px 0px;
  
}
  li.desktop{
     background: url("/img/desktop.d.png") center center no-repeat;
  }
  li.tablet{
     background: url("/img/tablet.d.png") center center no-repeat;
  }
  li.mobile{
     background: url("/img/mobile.d.png") center center no-repeat;
  }

   .switchDevice li a{
    height: 30px;
    width: 30px;
    text-align: left;
    display: block;
  }

  .switchDevice li.desktopActive{
    background: url("/img/desktop.active.d.png") center center no-repeat;
  }

  .switchDevice li.tabletActive{
    background: url("/img/tablet.active.d.png") center center no-repeat;
  }

  .switchDevice li.mobileActive{
    background: url("/img/mobile.active.d.png") center center no-repeat;
  }
/* ---------- END SWITCH DESKTOP / TABLET / MOBILE ---------- */

/* ---------- START NAVIGATIE --------- */

ul.nav{
  border: 1px solid #cccccc;
  float: right;
  clear: top;
  font-size: 100%;
  list-style: outside none none;
  margin: 10px 10px 5px 10px;
}

  ul.nav li{
    float: left;
    display: block;
    width: 140px;
    box-shadow: inset 0px 8px 6px -8px #CCCCCC,
            inset 0px -8px 6px -8px #CCCCCC;
  }

  ul.nav li a{
    text-align: left;
    display: block;
    color: #999999;
    padding: 5px 0px 5px 30px;
    border-right: 1px solid #CCCCCC;
  }

  ul.nav li a:hover{
    color: #FFFFFF;
    background-color: #007ac2; /*Logo blue*/
  }


  li.home a{
     background: url("/img/home.d.png") 10px center no-repeat;
  }
  li.stats a{
     background: url("/img/stats.d.png") 10px center no-repeat;
  }

  li.settings a{
     background: url("/img/configure.d.png") 10px center no-repeat;
  }
  li.profile a{
     background: url("/img/personal.d.png") 10px center no-repeat;
  }
  li.logout a{
     background: url("/img/logout.d.png") 10px center no-repeat;
  }

  /* ---------- START TABS  --------- */

    .tabs{
      margin: 0px;
      border-bottom: 1px solid #EEEEEE;
      box-shadow: 0 8px 6px -6px #EEEEEE;
      float: right;
    }

     a.tabRed{
      color: white;
      font-size: 80%;
      font-weight: bold;
      width: 120px;
      padding: 5px 0px 5px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 7px 7px 0px 0px;
      background: #e73137;
    }

    a.tabBlue{
      color: white;
      font-size: 80%;
      font-weight: bold;
      width: 120px;
      padding: 5px 0px 5px 0px;
      text-align: center;
      display: inline-block;
      border-radius: 7px 7px 0px 0px;
      background: #007ac2;
    }
    
    a.tabRed:hover, a.tabBlue:hover{
       background-color: #38AA20;
    }

     a.tabBlue:hover{
    }
  /* ---------- END STYLE TABS ---------- */

  /* ---------- END TABS  --------- */
/* ---------- END NAVIGATIE --------- */

/* ---------- START TOOLTIPS ---------- */
  .warning .titel, .info .titel, .feedback .titel{
    font-size: 40px;
    font-weight: bold;
    padding-top: 20px;
    margin-bottom: 40px;
  }

  .info{
    color:#FFF;
    padding: 15px;
    margin: 10px;

    font-style: italic;

    border-radius: 5px;
    background-color: rgba(100, 166, 32, 0.90); /* GREEN RGB COLORS A APACITY (TRANSPARANTIE) */
    /* TRANSPARANTIE VERANGEN DOOR IMAGES */
    text-align: center;
  }  

  .feedback{
    color:#FFF;
    padding: 15px;
    margin: 10px;
    
    font-style: italic;

    border-radius: 5px;
    background-color: rgba(246, 166, 35, 0.90); /* ORANGE RGB COLORS A APACITY (TRANSPARANTIE) */
     /* TRANSPARANTIE VERANGEN DOOR IMAGES */
    text-align: center;
  }  

  .warning{
    color:#FFF;
    padding: 15px;
    margin: 10px;

    font-weight:bold;

    border-radius: 5px;
    background-color: rgba(231, 2, 2, 0.90); /* ROOD RGB COLORS A APACITY (TRANSPARANTIE) */
     /* TRANSPARANTIE VERANGEN DOOR IMAGES */

    text-align: center;
  }  
/* ---------- END TOOLTIPS ---------- */

/* ---------- START BASIC STYLES ---------- */

.menu{
  border-radius: 25px;
  border: 2px solid #e73137; 
  padding: 3px;
  width: 500px;
  text-align:left;
  font-size:14px;
  text-align:center;
}

.width100{
  width:100px;
  display: inline-block;  
}  
.width150{
  width:100px;
  display: inline-block;  
}  
.width200{
  width:200px;
  display: inline-block;  
}  
/* ---------- END BASIC STYLES ---------- */

/* ---------- START LOGIN SETTINGS ---------- */
.loginWrapper b, .loginWrapper p, #newPassword b, #newPassword p, #loginCreateAccount b, #loginCreateAccount p{
  color: #FFFFFF;
}
.loginWrapper{
  background: none;
  margin: 0 auto;
  padding: 8% 0 1% 0;
  width: 390px;
}  

#hasAccount{
  background: url("/img/bgHasAccount.png");  /*AANPASSEN NAAR HUISSTIJL*/
  padding: 10px 24px 90px;
  border-radius: 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
}

#hasAccount label {
  color: #FFF;
}

#hasAccount .input, #hasAccount input[type="text"] {
  font-size: 24px;
  margin: 2px 6px 16px -5px;
  padding: 3px;
  width: 100%;
  background: #fbfbfb none repeat scroll 0 0;
}

#hasAccount input[type="text"], input[type="password"]{
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
  color: #32373c;
  outline: 0 none;
}

#hasAccount input[type="submit"]{
  height: 30px;
  float: right;
  line-height: 28px;
  padding: 0 12px 2px;
  color: #FFFFFF;
  background: url("/img/btnRed.png");
  border: none;
}

/* Wachtwoord vergeten? */
.forgotPassword, .makeAccount {
  clear: both;
  font-size: 13px;
  float: right;
  padding: 5px;
}

.forgotPassword a, .makeAccount a{
  color: #FFF;
}

  /* ---------- START WACHTWOORD VERGETEN ----------- */
  .loginNewPasswordWrapper{
    background: none;
    margin: 0 auto;
    width: 390px;
    display: none;
  }

    #newPassword{
      background: url("/img/bgForgotPassword.png");  /*AANPASSEN NAAR HUISSTIJL*/
      padding: 10px 24px 45px;
      border-radius: 0px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    }


    #newPassword label {
      color: #FFF;
    }

    #newPassword .input, #newPassword input[type="text"] {
      font-size: 24px;
      margin: 2px 6px 16px -5px;
      padding: 3px;
      width: 100%;
      background: #fbfbfb none repeat scroll 0 0;
    }

    #newPassword input[type="text"]{
      background-color: #fff;
      border: 1px solid #ddd;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
      color: #32373c;
      outline: 0 none;
    }

    #newPassword input[type="submit"]{
      height: 30px;
      float: right;
      line-height: 28px;
      padding: 0 12px 2px;
      border: none;
      color: #FFFFFF;
      background: url("/img/btnBlue.png");
    }
  /* ---------- EIND WACHTWOORD VERGETEN ---------- */


  /* ---------- START AANVRAGEN ACCOUNT ---------- */
  .loginCreateAccountWrapper{
    background: none;
    margin: 0 auto;
    margin-top: 10px;
    width: 390px;
    display: none;
  }
  
    #loginCreateAccount{
      background: url("/img/bgForgotPassword.png");  /*AANPASSEN NAAR HUISSTIJL*/
      padding: 10px 24px 45px;
      border-radius: 0px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 1);;
    }


    #loginCreateAccountWrapper label {
      color: #FFF;
    }

    #loginCreateAccountWrapper .input, #loginCreateAccountWrapper input[type="text"] {
      font-size: 24px;
      margin: 2px 6px 16px -5px;
      padding: 3px;
      width: 100%;
      background: #fbfbfb none repeat scroll 0 0;
    }

    #loginCreateAccountWrapper input[type="text"]{
      background-color: #fff;
      border: 1px solid #ddd;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
      color: #32373c;
      outline: 0 none;
    }

    #loginCreateAccountWrapper input[type="submit"]{
      height: 30px;
      float: right;
      line-height: 28px;
      padding: 0 12px 2px;
      background: url("/img/btnBlue.png");
      border:none;
      color: #FFFFFF;
      cursor: pointer;
    }
    /* ---------- END AANVRAGEN ACCOUNT ---------- */
/* ---------- END LOGIN SETTINGS ---------- */

/* ---------- START ERROR FULLSCREEN ----------- */
.error{
  border: 5px solid #e73137;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
}

.error img{
  float: none;
  padding: 20px;
}

.error p{
  font-size: 150%;
  color: #e73137;
  line-height: 2em;
}

h1.error{
  border: none;
  font-size: 300%;
}

/* ---------- END ERROR FULLSCREEN ----------- */

.loginFeedbackInfo{
	border:3px dashed green;
	background-color:#ffffff;
	padding:10px;	
}	
.loginFeedbackError{
	border:3px dashed red;
	background-color:#ffffff;
	padding:10px;	
}	

/*RM 19 feb 2016. new -change-as-you-type password*/
.setYourOwnLength{color:#880000;}	
.setYourOwnLowercase{color:#880000;}
.setYourOwnUppercase{color:#880000;}
.setYourOwnSpecial{color:#880000;}

.setYourOwnLengthOk{color:#004e00;font-weight:bold;}	
.setYourOwnLowercaseOk{color:#004e00;font-weight:bold;}	
.setYourOwnUppercaseOk{color:#004e00;font-weight:bold;}	
.setYourOwnSpecialOk{color:#004e00;font-weight:bold;}