/* sets up the basic framework including a so called grid
   this file is processed by the servlet CSS.java to replace
   the variables @xxx and @{xxx} which are defined in conf/misc/ui.conf
*/

/* clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* first set everything to zero */
* { margin:0; padding:0; }
body { margin:0; padding:0; }
img { border: 0; }

/* get rid of highlighting in safari */
input:focus { outline: none; }
select:focus { outline: none; }
textarea:focus { outline: none; }
button:focus { outline: none; }


/* default font definitions - font-size defines 1em and is used to scale everything */
body { font-family:Helvetica, Arial, sans-serif; font-size:20px; }

[class^='col-'] {
  float: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/*
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

[class^='col-'] {
  padding: 1em 1em 1em 1em;
}

/*
[class*='col-']:last-of-type {
  padding-right: 1em;
}
*/

.col-100 { width: 100%; }
.col-95  { width: 95%;  }
.col-90  { width: 90%;  }
.col-88  { width: 88%;  }
.col-85  { width: 85%;  }
.col-80  { width: 80%;  }
.col-75  { width: 75%;  }
.col-70  { width: 70%;  }
.col-60  { width: 60%;  }
.col-50  { width: 50%;  }
.col-40  { width: 40%;  }
.col-33  { width: 33%;  }
.col-30  { width: 30%;  }
.col-25  { width: 25%;  }
.col-20  { width: 20%;  }
.col-15  { width: 15%;  min-width: 7.5em; }
.col-12  { width: 12%;  min-width: 4em; }
.col-10  { width: 10%;  min-width: 5em; }
.col-5   { width: 5%;   min-width: 1em;  }
.col-3   { width: 3%;   min-width: 1em;  }
.col-2   { width: 2%;   min-width: 0.5em;  }

/* fixed row (usually topmenu) and vertical padding to
   compensate for div being taken out of document flow */
.fixedrow {
  position:fixed;
  display: table;
  z-index:100;
  height:3em;
  width: 100%;
}
.vpad1 { height:1em; }
.vpad2 { height:2em; }
.vpad3 { height:3em; }
.vpad4 { height:4em; }

.fr {float: right; }
.fl {float: left; }
.fn {float: none; }
.il {display:inline;}

@media only screen and (max-width: 600px) {
  body { font-size: 2em; }
  [class^='col-'] { float: none; width: 100%; }
}

/* ======= this is the end of the basic framework ======= */

/* the following are site specific, non-semantic, general definitions
   for buttons, panels and popup boxes */

.ie8 .panel {
  background: #cccccc;
  background-size: auto 100%;
  padding: 0.7em 0.7em 0.7em 0.7em;
}

.panela {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  background: #000;
  margin: 3em 0 0 0;
  padding: 0.7em 0.7em 0.7em 0.7em;
  font-weight: bold;
  color: #FFF;
}

.panelb {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  background: #ddd;
  padding: 0.7em 0.7em 0.7em 0.7em;
  margin-left:2em;
  margin-right:2em;
}

.panelc {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  background: #FF8080;
  padding: 0.7em 0.7em 0.7em 0.7em;
  margin-left:2em;
  margin-right:2em;
}

.paneld {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  border:0.2em solid @cd_panel_bo;
  color: @cd_paneld_fg;
  background: @cd_paneld_bg;
  background-size: auto 100%;
  padding: 0.7em 0.7em 0.7em 0.7em;
}

.borders {
  -moz-border-radius: 1.5em;
  border-radius: 1.5em;
  border:0.2em solid @cd_panel_bo;
  padding: 0.7em 0.7em 0.7em 0.7em;
}

.poppanel {
  position: absolute; z-index:9999;
  background: #fff;
  -moz-border-radius: 0.75em;
  border-radius: 0.75em;
  border:0.1em solid #444;
  font-size:1.2em;
  padding: 0.3em 0.3em 0.3em 0.3em;
  display: none;
}
.poptop { font-weight: bold; white-space: nowrap; margin: 0.1em 0.5em 0.3em 1em; }

img#popclose { float:right; margin: 0 0 0 0.5em; }
img.popclose { float:right; margin: 0 0 0 0.5em; }

.center {
  margin-left: auto;
  margin-right:auto;
}

/* buttons */

.buttona {
  -moz-border-radius: 1em;
  border-radius: 1em;
  background: @{cd_butta_bg};
  padding: 0.7em 0.7em 0.7em 0.7em;
  text-align: center;
  min-width: 5em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.buttona:hover {
  background: @{cd_butta_bg_hover};
}
.buttona a { text-decoration:none; font-size:1.1em; font-weight:bold; color: @{cd_butta_fg}; }
.buttona img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }

.buttonb {
  -moz-border-radius: 1em;
  border-radius: 1em;
  background: @{cd_buttb_bg};
  padding: 0.7em 0.7em 0.7em 0.7em;
  text-align: center;
  min-width: 5em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.buttonb:hover {
  background: @{cd_buttb_bg_hover};
}
.buttonb a { text-decoration:none; font-size:1.1em; font-weight:bold; color: @{cd_buttb_fg}; }
.buttonb img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }

.buttonc {
  -moz-border-radius: 1em;
  border-radius: 1em;
  background: @{cd_buttc_bg};
  padding: 0.7em 0.7em 0.7em 0.7em;
  text-align: center;
  min-width: 5em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.buttonc:hover {
  background: @{cd_buttc_bg_hover};
}
.buttonc a { text-decoration:none; font-size:1.1em; font-weight:bold; color: @{cd_buttc_fg}; }
.buttonc img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }

.smallbuttona {
  -moz-border-radius: 0.75em;
  border-radius: 0.75em;
  background: @{cd_sbutta_bg};
  padding: 0.2em 0.7em 0.2em 0.7em;
  text-align: center;
  min-width: 10em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.smallbuttona:hover {
  background: @{cd_sbutta_bg_hover};
}
.smallbuttona a { text-decoration:none; font-weight:bold; color: @{cd_sbutta_fg}; }
.smallbuttona img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }

.smallbuttonb {
  -moz-border-radius: 0.75em;
  border-radius: 0.75em;
  background: @{cd_sbuttb_bg};
  padding: 0.35em 0.7em 0.35em 0.7em;
  text-align: center;
  min-width: 10em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.smallbuttonb:hover {
  background: @{cd_sbuttb_bg_hover};
}
.smallbuttonb a { text-decoration:none; font-weight:bold; color: @{cd_sbuttb_fg}; }
.smallbuttonb img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }

.smallbuttonc {
  -moz-border-radius: 0.75em;
  border-radius: 0.75em;
  background: @{cd_sbuttc_bg};
  text-align: center;
  padding: 0.35em 0.7em 0.35em 0.7em;
  min-width: 10em;
  max-width: 15em;
  margin: 0 0 1em 1em;
}
.smallbuttonc:hover {
  background: @{cd_sbuttc_bg_hover};
}
.smallbuttonc a { text-decoration:none; font-weight:bold; color: @{cd_sbuttc_fg}; }
.smallbuttonc img { float:right; vertical-align:bottom; margin:0 0 0 1em; border:0; }