/*****************************************************************************/
/* Algemene instellingen                                                     */
/*****************************************************************************/

/* Standaard instellingen voor de body */
body {
  font-family      : Verdana,Arial;
  font-size        : 9pt;
  padding          : 0;
  margin           : 0;
  background-color : #ccc;
}

img {
  border           : 0;
}

/*****************************************************************************/
/* Indeling van de pagina                                                    */
/*****************************************************************************/

/* Buitenste container - horizontaal en verticaal gecentreerd */
div#floater {
  position         : absolute;
  top              : 50%;
  left             : 50%;
  width            : 748px;
  height           : 548px;
  margin-left      : -374px; /* Negative half of width. */
  margin-top       : -274px; /* Negative half of height. */
  background-color : #fff;
  border           : 1px solid #222;
}
/* Content container */
div#content {
  position         : relative;
  top              : 24px;
  left             : 24px;
  width            : 720px;
  height           : 500px;
  background-color : #fff;
}
/* Header */
div#header {
  position         : relative;
  width            : 700px;
  height           : 32px;
  line-height      : 32px;
  font-size        : 18pt;
  font-weight      : bold;
  text-align       : center;
  color            : #008;
  background-color : #fff;
  clear            : both;
}
/* Subheader - bevat de huidige directory */
div#subheader {
  position         : relative;
  width            : 700px;
  height           : 24px;
  line-height      : 24px;
  font-size        : 10pt;
  font-weight      : bold;
  color            : #fff;
  background-color : #008;
  float            : left;
  clear            : both;
}
/* Main content - bevat de directory listing */
div#main {
  position         : relative;
  width            : 720px;
  height           : 432px;
  background-color : #fff;
  clear            : both;
}
/* Footer */
div#footer {
  position         : relative;
  width            : 700px;
  height           : 16px;
  line-height      : 16px;
  font-size        : 8pt;
  text-align       : center;
  color            : #fff;
  background-color : #06c;
  clear            : both;
}
/* Error message */
div#error {
  position         : relative;
  width            : 700px;
  height           : 32px;
  line-height      : 32px;
  font-size        : 10pt;
  font-weight      : bold;
  text-align       : left;
  color            : #f00;
  background-color : #fff;
  clear            : both;
}

/*****************************************************************************/
/* Opmaak                                                                    */
/*****************************************************************************/
/* Content header - scrollt niet mee */
div.header {
  font-weight      : bold;
  width            : 700px;
  height           : 24px;
  line-height      : 24px;
  color            : #fff;
  background-color : #06c;
  float            : left;
  clear            : both;
}
/* Content - scrollt indien nodig */
div.data {
  font-weight      : bold;
  width            : 720px;
  height           : 408px;
  line-height      : 24px;
  overflow         : auto;
  clear            : both;
}
/* Content row */
div.row {
  font-weight      : normal;
  width            : 700px;
  height           : 24px;
  line-height      : 24px;
  color            : #000;
  background-color : #ddd;
  border-bottom    : 0px solid #444;
  float            : left;
  clear            : both;
}
/* Toont huidige directory */
div.dirinfo {
  width            : 640px;
  font-weight      : bold;
  float            : left;
}
/* Icon */
div.icon {
  width            : 30px;
  text-align       : center;
  float            : left;
}
/* File/Directory naam */
div.name {
  width            : 350px;
  float            : left;
}
/* File size */
div.size {
  width            : 100px;
  text-align       : right;
  float            : left;
}
/* File date */
div.date {
  width            : 160px;
  text-align       : right;
  float            : left;
}
/* Padding */
div.dirinfo div,
div.name div,
div.size div,
div.date div {
  padding          : 0 5px;
}
/* Separator */
div.name div,
div.size div,
div.date div,
div.icon div {
  border-left      : 1px solid #ccc;
}

/*****************************************************************************/
/* Login window                                                              */ 
/*****************************************************************************/
#loginForm {
  display          : block;
  position         : absolute;
  width            : 400px;
  height           : 200px;
  left             : 140px;
  top              : 140px;
  background-color : #eee;
  border           : 3px solid #aaa;
  z-index          : 2;
  padding          : 12px;
}

/*****************************************************************************/
/* Popup windows                                                             */ 
/*****************************************************************************/

#popupAddDirectory,
#popupAddFile,
#popupRenameDirectory,
#popupRenameFile,
#popupRemoveDirectory,
#popupRemoveFile,
#popupAddFile {
  display          : none;
  position         : fixed;
  _position        : absolute; /* hack for internet explorer 6*/
  width            : 400px;
  height           : 200px;
  background-color : #fff;
  border           : 3px solid #aaa;
  z-index          : 2;
  padding          : 12px;
}

/*****************************************************************************/
/* Opmaak form op popup windows                                              */
/*****************************************************************************/

div.formheader {
  text-align       : left;
  color            : #06c;
  font-size        : 12pt;
  font-weight      : 700;
  border-bottom    : 1px dotted #d3d3d3;
  padding-bottom   : 2px;
  margin-bottom    : 20px;
}
div.formdata {
  clear            : both;
  float            : left;
  width            : 100%;
  margin-bottom    : 20px;
  font-size        : 10pt;
}
div.formlabel {
  float            : left;
  width            : 40%;
  font-weight      : bold;
}
div.forminput {
  float            : left;
  width            : 50%;
}
div.formoutput {
  float            : left;
  width            : 50%;
}
div.formbuttons {
  clear            : both;
  float            : left;
  width            : 100%;
}
div.formbutton {
  float            : left;
  width            : 30%;
  font-size        : 12pt;
}