@media screen {

html {
  margin              : 0px;
  padding             : 0px;
}

body {
  margin              : 0px;
  padding             : 0px;
  background-color    : #F5F9FD;
  color               : #000;
  font-size           : 12px;
  font-family         : Helvetica, Verdana, sans-serif;
}

h1 {
  text-align           : center;
  font-size            : 150%;
}

/* the main title; h1 alone is also used in the popup windows. */
h1#title {
  margin               : 0px;
  padding              : 1ex 0px;
  background-color     : White;
  background-image     : url("title.png");
  background-repeat    : no-repeat;
  height               : 95px;

}

/* there is a span element within the h1 element to enable displaying
   an image only and blanking out the span */
h1 span {
  display              : none;
}

h2 {  /* Heading for link to task list and details */
  margin               : 0px;
  padding              : 0px;
  font-size            : 150%;
}

h3 {  /* heading for sections (especially the lists: user&groups, ...) */
  font-size           : 120%;
  margin              : 0px;
  padding             : 0px;
}

h4 {  /* used for the list headings in Flyspay's options */
  font-size           : 100%;
  margin              : 1em 0px 0px 0px;
  padding             : 0px;
}

h4+p {
  margin              : 0px;
  padding             : 0px;
  font-style          : italic;
}

p {
  margin              : 1ex 0px;
  padding             : 0.5ex 0.5em;
}

form {
  margin              : 0px;
  padding             : 0px;
  display             : inline;
}

form p {
  margin              : 0px;
  padding             : 0px;
}

td {
  vertical-align      : top;
}

th {
  vertical-align      : top;
}

input, textarea, select, button {
  background-color    : #eef7ff;
  color               : #03008f;
  border              : 1px ridge #000000;
  margin              : 2px;
  font-size           : 100%;
}

/* labels are used nearly in every form */
label {
  text-align          : right;
  display             : block;
  margin              : 4px;
}

/* div.admin and p.admin is used for areas that only administrators can use
   p.admin for instance for adding comments
   table.admin serves the same purpose */
/* table.login is the framework for the login form at the bottom of a page */
/* table.userlist is found in the user&groups section */
div.admin, p.admin, table.admin, table.login, table.userlist {
  border              : 1px solid #ccc;
  margin              : 1em 0px;
  padding             : 0px;
  background-color    : #e6eef6;
  color               : black;
  font-family         : Helvetica, Verdana, sans-serif;
}

/* The paragraph containing the main menu */
p#menu {
  border              : 1px solid #ccc;
  margin              : 1em 0px;
  padding             : 0px;
  background-color    : #e6eef6;
}

p#menu span#adminmenu {
  display             : block;
}

table.userlist td, table.userlist th {
  border              : 1px solid #CCC;
}

table.login {
  width               : 80%;
  margin-left         : auto;
  margin-right        : auto;
}

/* table.head is the table containing the task-list-link and the
   search-bug-number form */
table.head {
  width               : 100%;
}


/* p#showtask contains the form to search for a specific task number */
p#showtask {
  text-align          : right;
  width               : 40%;
  margin-left         : auto;
  position            : relative;
  top                 : -2em;
}

img {
  border              : none;
}

/* used in p#menu for the login information. The rest is really just
   emphasized text */
em {
  font-style          : normal;
  font-weight         : bold;
}

a {
  text-decoration     : none;
}

a:link {
  color               : #03008f;
  background-color    : transparent;
}

a:visited {
  color               : #03008f;
  background-color    : transparent;
}

a:hover {
  color               : #0600ff;
  background-color    : transparent;
  text-decoration     : underline;
}

/* offsite is only used for the link to the Flyspray homepage */
a.offsite:before {
  content             : "\2197";
}
/* The paragraph containing the search form */
p#search {
  margin-bottom       : 1em;
  border              : 1px solid #cccccc;
  background-color    : #e6eef6;
}

p#search select {
  background-color    : #eef7ff;
  color               : #03008f;
  border              : 1px rigde black;
}

p#search label {
  float               : left;
  display             : block;
  padding             : 0.5ex;
  height              : 2.5em;
}

/* The table listing taskson the main page */
table#tasklist {
  width               : 100%;
  background-color    : #e6eef6;
  border-spacing      : 0px;
  border-collapse     : collapse;
}

table#tasklist th {
  text-align          : left;
  padding             : 2px 1em 2px 2px;
  border-bototm              : 1px solid #cccccc;
}

table#tasklist td {
  border-bottom       : 1px solid #CCC;
  padding             : 2px 1ex 2px 2px;
}

table#tasklist td.taskid, table#tasklist th.taskid {
  text-align          : center;
  padding             : 2px 1ex;
}

table#tasklist td.taskdate {
  text-align          : left;
  white-space         : nowrap;
}

table#tasklist td.progress {
  vertical-align      : middle;
  text-align          : center;
}

table#tasklist tfoot td {
  text-align          : center;
  background-color    : white;
  padding             : 1em 0px;
  border : none;
}

/* table.list is any table holding lists like resolutions, ... */
table.list th, table.list td {
  padding-right       :  2em;
}

table.list label, p#showtask label, p.admin label, form#formaddrelatedtask label {
  display : inline;
}

/* Area containing all details to a given task */
div#taskdetails {
  margin              : 0px 0px 1em 0px;
  background-color    : #e6eef6;
  border              : 1px solid #ccc;
}

div#taskdetails h2 {
  font-size           : 100%;
  padding             : 0.3ex 1ex;
  font-weight         : normal;
}

/* form#edittask is only used for the button that allows editing of
   a task. It is displayed on the details page */
div#taskdetails form#formedittask {
  display             : block;
  width               : 20%;
  margin-left         : auto;
  text-align          : right;
  position            : relative;
  top                 : -1.7em;
}

/* Task details are listed within a table */
div#taskdetails table {
  width               : 100%;
}

div#taskdetails table th {
  text-align          : left;
  font-weight         : bold;
}

/* dic#content is a generic container for anything but the title and
   the footer paragraph */
div#content {
  border               : 2px solid #948d94;
  margin               : 1ex 1em;
  padding              : 1em;
  background-color     : #fff;
}

/* Powered by Flyspray */
p#footer {
  margin              : 2em 1em;
}

/* used solely for several browsers do not support [type="submit"]
   selectors. These are buttons and buttons only used by the admin */
input.adminbutton, input.mainbutton, button {
  background-color    : #838ab5;
  color               : #ffffff !important;
  background-image    : url(button.png);
  background-repeat   : repeat-x;
  border              : 1px ridge #000000;
  font-weight         : bold;
}

/* The acknowledgement/refusal of login information is displayed in
   div#loginmessage */
div#loginmessage {
  text-align          : center;
  position            : absolute;
  top                 : 45%;
  width               : 80%;
  left                : 10%;
  border              : 1px solid #CCC;
  background-color    : #e6eef6;
  padding             : 1ex;
}

div#loginmessage h1 {
  margin              : 0px 0px 1em 0px;
  font-size           : 100%;
  font-weight         : normal;
}

div#loginmessage p, form#registernewuser p {
  margin              : 0px;
  padding             : 0px;
}

/* div.redirectmessage is used in modify.php when you change things and are redirected
   to the index or details page */
div.redirectmessage {
  border              : 1px solid #CCC;
  background-color    : #e6eef6;
  padding             : 1ex;
  text-align          : center;
}

/* form#registernewuser, form#chgpassword, form#newgroup are used in
   the popup windows  */
form#chgpassword h1, form#registernewuser h1, form#newgroup h1 {
  font-size           : 110%;
  margin              : 2px;
  padding             : 0px;
}

/* .buttons used for table cells containing buttons */
.buttons {
  text-align          : center;
}

form#registernewuser strong, form#newgroup strong {
  color               : red;
}



p#tabs {
  margin              : 0px;
  padding             : 0px;
}

div.tabentries {
  background-color    : #e6eef6;
  margin              : 0px 0px 1em 0px;
  border              : 1px solid #CCC;
  min-height          : 5em;
}

.tabentry {
  margin              : 2px 1em;
  border-bottom       : 1px solid #ccc;
}

/* This is the division that keeps the buttons to modify comments
   (delete, edit) */
div.modifycomment {
  float: right;
  width : 20em;
  text-align : right;
}

div.modifycomment p {
  display : inline;
  margin  : 0px;
  padding : 0px;
}

/* The tabs containing the links to comments, attachments, ...
   in details.php */
p#tabs a {
  margin              : 2px 0px;
  padding             : 0px 1em;
  white-space         : nowrap;
}

/* separators between the links in the tabs */
p#tabs small {
  display             : none;
}

p#tabs a.tabnotactive {
  background-image    : url("tab-notactive.png");
  background-repeat   : no-repeat;
  background-position : top left;
  background-color    : #cad0d7;
  border-right        : 1px solid #93989D;
}

p#tabs a.tabactive {
  background-image    : url("tab-active.png");
  background-repeat   : no-repeat;
  background-position : top left;
  background-color    : #e6eef6;
  border-right        : 1px solid #CCC;
}

/* p.unregistered holds links to open new task when you're unregistered */
p.unregistered {
  margin              : 0px;
  padding             : 0px;
}

/* Some generic classes; severity classes are used for colour
   indication of severities. severityx_over classes are used
   for hover effects (JavaScript) */
.severity1 {
  background-color     : #fff5dd;
  color                : #000000;
}

.severity1_over {
  background-color     : #ffe9b4;
  color                : #000000;
}

.severity2 {
  background-color     : #ecdbb7;
  color                : #000000;
}

.severity2_over {
  background-color     : #efca80;
  color                : #000000;
}

.severity3 {
  background-color     : #ecd0b7;
  color                : #000000;
}

.severity3_over {
  background-color     : #edb98a;
  color                : #000000;
}

.severity4 {
  background-color     : #ffd5d1;
  color                : #000000;
}

.severity4_over {
  background-color     : #ffb2ac;
  color                : #000000;
}

.severity5 {
  background-color     : #f3a29b;
  color                : #000000;
}

.severity5_over {
  background-color: #f3867e;
  color: #000000;
}

/* .fineprint is merely used for the details about when a task has
   been created and changed (in the details pages) */
.fineprint {
  font-size            : smaller;
}

}


@media print {
p#menu {
  display              : none;
}


}