body { background-color: #fff; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid gray;
  width: 100%;
}

div.progressBar div.background {
  height: 18px;
  width: 0%;
}

/* **************** MY STYLES *********************** */

/* *********** COLORS *********** */

h1, h2 { color: green; }
#modules { border-color: gray; }
th { background-color: green; }
.red { color : red; }
.dangerous { color: red } /* better than just 'red' */
th.red { 
       color: white;
       background-color: red; 
}

/* *********** MENU *********** */

dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#menu {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    z-index: 100;
}

#menu dl {
    float: left;
    width: 9em;
    background-color: white;
}

#menu dl.logout {
    width: 4.5em;
}

#menu dl.logout dt {
    background: #fff;
}

#menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    border: 1px solid gray;
    margin: 1px;
}

#menu dd {
    border: 1px solid gray;
}

#menu li {
    text-align: center;
    background: #fff;
}

#menu li a, #menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
    background: #eee;
}


/* *********** MODULES LIST *********** */

#modules {
    margin-top: 6px;
    border-top: 1px solid;
    padding-top: 2px;
}

#modules ul {
    list-style-type: none;    
}

#modules li{
    display: inline;
}

#modules a {
    text-decoration: none;
    font-weight: bold;
    padding: 0 5px;
}

/* *********** TABLES *********** */

tr { background-color: #eee; }

tr.totals { background-color: #ccc; }
tr.grandtotals { background-color: #bbb; }

th {
    font-size: 13px;
    color: white;
}

th, td {
    padding: 3px;
}

td.number {
    text-align: right;
}

td.center {
    text-align: center;
}

a.alert {
    text-decoration: none;
}

h1 {
    font-size: large;
}

.inline {
    display: inline;
}

.filter {
    margin: 10px 0;
}

/* *********** MAIN *********** */
#main {
    position: absolute;
    top: 3em;
    left: 0.5em;
}

/* *********** LOGIN *********** */
#login {

}

/* CALENDAR */

table.calendar {
    margin-top: 1em;
}

table.calendar tr.today, div.cal_month td.today {
    background-color: #dfd;
}

table.calendar tr.holiday, div.cal_month td.holiday {
    background-color: #fdd;
}

table.calendar td {
    padding: 10px;
}

table.calendar p.day {
    margin: 0;
    text-align: center;
    font-size: xx-large;
}

table.calendar p.cwday {
    text-align: center;
    margin-top: 10px;
}

/* CALENDAR BY MONTH */
div.positioned {
    position: relative;
    height: 100%;
}

div.cal_months {
    margin: 1em 0;
}

div.clear {
    clear: both;
}

div.cal_month {
    float: left;
    margin: 0 15px 0 0;
    min-height: 350px;
}

div.cal_month td {
    width: 45px;
    height: 45px;
    margin: 0;
    padding: 0;
    position: relative;
}

div.cal_month p.day {
    margin: 0;
    padding-top: 10px;
    text-align: center;
    font-size: large;
}

a.corner_button {
    position: absolute;
    bottom: 0;
    right: 0;
    text-decoration: none;
    border: 1px solid black;
    background-color: white;
    padding: 0 2px;
    font-size: smaller;
}

a.corner_button:hover {
    color: white;
    background-color: black;
}

#events_list {
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -25%;
    width: 50%;
    max-height: 100%;
    overflow: auto;
    border: 1px solid black;
    padding: 1em;
    background-color: white;
}

.cal_date_select {
    width: 200px;
}

/* COUNTERS */

form.new_counter, form.edit_counter, div.counter {
    margin: 2px;
}

form.new_counter select, form.edit_counter select {
    font-size: 13px;
}

form.edit_counter input, form.new_counter input {
    font-size: 13px;
    width: 70px;
}

a.add_counter, a.edit_counter, a.cancel_counter, a.save_counter, a.remove_counter {
    background-color: transparent;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
}

a.add_counter {
    background-image: url(../images/add_gray.png);
    margin: 2px;
}

a.edit_counter {
    background-image: url(../images/edit_gray.png);
}

a.remove_counter {
    background-image: url(../images/remove_gray.png);
}

a.cancel_counter {
    background-image: url(../images/cancel.png);
}

a.save_counter {
    background-image: url(../images/ok.png);
}