/**

 * Buttons

 */

.tombols {
  border-bottom: #cccccc 1px solid;
  position: relative;
  text-align: center;
  border-left: #cccccc 1px solid;
  padding-bottom: 0.4em;
  padding-left: 1em;
  padding-right: 1em;
  display: inline-block;
  font-family: Arial, sans-serif;
  background: url(css/images/ui-bg_glass_100_f6f6f6_1x400.png) #f6f6f6 repeat-x
    50% 50%;
  color: #800080;
  font-size: 1em;
  overflow: visible;
  border-top: #cccccc 1px solid;
  cursor: pointer;
  font-weight: bold;
  margin-right: 0.1em;
  border-right: #cccccc 1px solid;
  text-decoration: none;
  padding-top: 0.4em;
  -moz-border-radius: 4px 4px 4px 4px;
}

.tombols:hover {
  border-bottom: #fbcb09 1px solid;
  border-left: #fbcb09 1px solid;
  background: url(css/images/ui-bg_glass_100_fdf5ce_1x400.png) #fdf5ce repeat-x
    50% 50%;
  color: #c77405;
  border-top: #fbcb09 1px solid;
  font-weight: bold;
  border-right: #fbcb09 1px solid;
  text-decoration: none;
}

.tombols:active {
  color: #e00;
}

.button {
  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  -khtml-border-radius: 4px;

  border-radius: 4px;

  -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);

  -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3);

  cursor: pointer;

  display: inline-block;

  font: 12px/16px "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue",
    Helvetica, Arial, Verdana, sans-serif;

  padding: 4px 10px;

  outline: none !important;

  text-align: center;

  text-decoration: none;

  position: relative;

  -moz-box-sizing: border-box !important;
}

.button:hover {
  text-decoration: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
}

.button[disabled] {
  -moz-box-shadow: none;

  -webkit-box-shadow: none;

  box-shadow: none;
}

.button-round {
  -moz-border-radius: 16px;

  -webkit-border-radius: 16px;

  -khtml-border-radius: 16px;

  border-radius: 16px;

  padding: 7px 0;

  width: 30px;
}

.button-gray {
  background: #f1f1f1;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e9e9e9),
    to(#d1d1d1)
  );

  background: -moz-linear-gradient(top, #e9e9e9, #d1d1d1);

  -pie-background: linear-gradient(top, #e9e9e9, #d1d1d1);

  border: 1px solid #bbb;

  color: #555;

  text-shadow: 0 1px 0 #fff;
}

.button-gray:hover,
.button-gray:focus {
  border: 1px solid #aaa;

  background: #ececec;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e1e1e1),
    to(#c1c1c1)
  );

  background: -moz-linear-gradient(top, #e1e1e1, #c1c1c1);

  -pie-background: linear-gradient(top, #e1e1e1, #c1c1c1);

  border: 1px solid #999;

  color: #555;
}

.button-gray:active,
.button-gray.active,
.button-gray.current {
  background: #ddd;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ccc),
    to(#e9e9e9)
  );

  background: -moz-linear-gradient(top, #ccc, #e9e9e9);

  -pie-background: linear-gradient(top, #ccc, #e9e9e9);

  border: 1px solid #999;

  color: #555;
}

.button-gray[disabled] {
  background: #f1f1f1;

  border: 1px solid #bbb;

  color: #555;

  text-shadow: 0 1px 0 #fff;
}

.button-orange {
  background: #f78d1d;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#faa51a),
    to(#f47a20)
  );

  background: -moz-linear-gradient(top, #faa51a, #f47a20);

  -pie-background: linear-gradient(top, #faa51a, #f47a20);

  border: solid 1px #dd6611;

  color: #fef4e9;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-orange:hover,
.button-orange:focus {
  background: #f47c20;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f88e11),
    to(#f06015)
  );

  background: -moz-linear-gradient(top, #f88e11, #f06015);

  -pie-background: linear-gradient(top, #f88e11, #f06015);

  border: solid 1px #aa5511;

  color: #fef4e9;
}

.button-orange:active,
.button-orange.active,
.button-orange.current {
  background: #f47a20;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f47a20),
    to(#faa51a)
  );

  background: -moz-linear-gradient(top, #f47a20, #faa51a);

  -pie-background: linear-gradient(top, #f47a20, #faa51a);

  border: solid 1px #aa5511;

  color: #fef4e9;
}

.button-orange[disabled] {
  background: #f78d1d;

  border: solid 1px #dd6611;

  color: #fef4e9;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-red {
  background-color: #c44747;

  background: -moz-linear-gradient(top, #dd5f5f 10%, #a92c2c 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #dd5f5f),
    color-stop(0.9, #a92c2c)
  );

  -pie-background: linear-gradient(top, #dd5f5f 10%, #a92c2c 90%);

  border: 1px solid #a92c2c;

  color: #fef4e9;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-red:hover,
.button-red:focus {
  background-color: #c44747;

  background: -moz-linear-gradient(top, #dd4141 10%, #a92121 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #dd4141),
    color-stop(0.9, #a92121)
  );

  -pie-background: linear-gradient(top, #dd4141 10%, #a92121 90%);

  border: 1px solid #711;

  color: #fef4e9;
}

.button-red:active,
.button-red.active,
.button-red.current {
  background-color: #c44747;

  background: -moz-linear-gradient(top, #a92c2c 10%, #dd5f5f 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #a92c2c),
    color-stop(0.9, #dd5f5f)
  );

  -pie-background: linear-gradient(top, #a92c2c 10%, #dd5f5f 90%);

  border: 1px solid #711;

  color: #fef4e9;
}

.button-red[disabled] {
  background: #c44747;

  border: 1px solid #a92c2c;

  color: #fef4e9;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-blue {
  background: #0095cd;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#00adee),
    to(#0078a5)
  );

  background: -moz-linear-gradient(top, #00adee, #0078a5);

  -pie-background: linear-gradient(top, #00adee, #0078a5);

  border: 1px solid #034462;

  color: #fff;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-blue:hover,
.button-blue:focus {
  background: #007ead;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#0095cc),
    to(#00678e)
  );

  background: -moz-linear-gradient(top, #0095cc, #00678e);

  -pie-background: linear-gradient(top, #0095cc, #00678e);

  border: 1px solid #234;

  color: #fff;
}

.button-blue:active,
.button-blue.active,
.button-blue.current {
  background: #80bed6;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#0078a5),
    to(#00adee)
  );

  background: -moz-linear-gradient(top, #0078a5, #00adee);

  -pie-background: linear-gradient(top, #0078a5, #00adee);

  border: 1px solid #234;

  color: #fff;
}

.button-blue[disabled] {
  background: #0095cd;

  border: 1px solid #034462;

  color: #fff;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.button-green {
  color: #fff;

  background: #8fc857;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#8fc857),
    to(#5c9425)
  );

  background: -moz-linear-gradient(top, #8fc857, #5c9425);

  -pie-background: linear-gradient(top, #8fc857, #5c9425);

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);

  border: 1px solid #561;
}

.button-green:hover,
.button-green:focus {
  border: 1px solid #556611;

  background: #8fbb44;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#8fbb44),
    to(#5c8825)
  );

  background: -moz-linear-gradient(top, #8fbb44, #5c8825);

  -pie-background: linear-gradient(top, #8fbb44, #5c8825);

  border: 1px solid #342;
}

.button-green:active,
.button-green.active,
.button-green.current {
  background: #8fbb44;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#5c8825),
    to(#8fbb44)
  );

  background: -moz-linear-gradient(top, #5c8825, #8fbb44);

  -pie-background: linear-gradient(top, #5c8825, #8fbb44);

  border: 1px solid #342;
}

.button-green[disabled] {
  color: #fff;

  background: #8fc857;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);

  border: 1px solid #561;
}

/**

 * Action Buttons

 */

ul.action-buttons {
  list-style-type: none;

  padding: 0;
}

ul.action-buttons li {
  display: block;

  float: left;

  margin: 0 2px;

  height: 26px;

  width: 26px;

  line-height: 24px;
}

ul.action-buttons li:first-child {
  margin-left: 0;
}

ul.action-buttons li:last-child {
  margin-right: 0;
}

.button span {
  display: inline-block;

  float: left;

  height: 16px;

  margin-right: 5px;

  position: relative;

  width: 16px;
}

a.button.no-text {
  display: block;

  text-indent: -999em;

  padding: 0;

  line-height: 24px;

  overflow: hidden;
}

.button.no-text span {
  display: block;

  margin: 0;

  height: 24px;

  width: 24px;
}

.button span.accept {
  background: transparent url(../images/accept.png) no-repeat center center;
}

.button span.add {
  background: transparent url(../images/add.png) no-repeat center center;
}

.button span.pencil {
  background: transparent url(../images/pencil.png) no-repeat center center;
}

.button span.bin {
  background: transparent url(../images/bin.png) no-repeat center center;
}

.button span.calendar {
  background: transparent url(../images/calendar.png) no-repeat center center;
}

.button span.help {
  background: transparent url(../images/help.png) no-repeat center center;
}

.button span.view-list {
  background: transparent url(../images/application_view_list.png) no-repeat
    center center;
}

.button span.view-grid {
  background: transparent url(../images/application_view_tile.png) no-repeat
    center center;
}

/**

 * Pagination

 */

/* PAGINATION */

div.pagination {
  padding: 3px 0 3px 0;

  margin: 0;
}

div.pagination a {
  padding: 2px 5px 2px 5px;

  margin: 2px;

  border: 1px solid #aaaadd;

  text-decoration: none; /* no underline */

  color: #000099;
}

div.pagination a:hover,
div.pagination a:active {
  border: 1px solid #000099;

  color: #000;
}

div.pagination span.current {
  padding: 2px 5px 2px 5px;

  margin: 2px;

  border: 1px solid #000099;

  font-weight: bold;

  background-color: #000099;

  color: #fff;
}

div.pagination span.disabled {
  padding: 2px 5px 2px 5px;

  margin: 2px;

  border: 1px solid #eee;

  color: #ddd;
}

/* END - PAGINATION */

.pagination {
  margin: 1em 0;

  padding: 0;
}

.pagination li {
  display: inline-block;

  float: left;

  margin: 0 2px;
}

.pagination li a {
  font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans",
    sans-serif;

  display: block;

  padding: 0 6px;

  height: 20px;

  line-height: 20px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  -khtml-border-radius: 3px;

  border-radius: 3px;

  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  cursor: pointer;

  outline: none !important;

  text-align: center;

  text-decoration: none;
}

.pagination li a.current {
  background: #000099;

  -pie-background: #fff;

  color: #fff;
}

/**

 * Widgets

 */

.widget {
  margin-bottom: 18px;

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 0 0 4px #eee;

  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -webkit-box-shadow: 0 0 4px #eee;

  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -khtml-box-shadow: 0 0 4px #eee;

  -khtml-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -pie-box-shadow: 0 0 4px #ccc;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  zoom: 1;
}

.widget header {
  background: #e1e1e1;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fafafa),
    to(#e1e1e1)
  );

  background: -moz-linear-gradient(top, #fafafa, #e1e1e1);

  -pie-background: linear-gradient(top, #fafafa, #e1e1e1);

  border: 1px solid #bbb;

  color: #333;

  font-size: 13px;

  text-shadow: 0 1px 0 #fff;

  margin: 0;

  padding: 0 10px;

  -moz-border-radius: 5px 5px 0 0;

  -webkit-border-top-left-radius: 5px;

  -webkit-border-top-right-radius: 5px;

  -khtml-border-top-left-radius: 5px;

  -khtml-border-top-right-radius: 5px;

  border-radius: 5px 5px 0 0;

  position: relative;
}

.widget header h2 {
  font-size: 13px;

  line-height: 30px;

  margin: 0;
}

.widget section {
  background: #fafafa;

  border-left: 1px solid #bbb;

  border-right: 1px solid #bbb;

  border-bottom: 1px solid #bbb;

  -moz-border-radius: 0 0 5px 5px;

  -webkit-border-bottom-left-radius: 5px;

  -webkit-border-bottom-right-radius: 5px;

  -khtml-border-bottom-left-radius: 5px;

  -khtml-border-bottom-right-radius: 5px;

  border-radius: 0 0 5px 5px;

  position: relative;
}

.widget section {
  padding: 10px;
}

.widget.modal {
  display: none;

  width: 300px;

  top: 100px !important;
}

/**

 * Tabs

 */

/* root element for tabs  */

.tabs {
  list-style: none;

  margin: 0 !important;

  padding: 0;

  height: 30px;

  border-bottom: 1px solid #aaa;
}

/* single tab */

.tabs li {
  float: left;

  text-indent: 0;

  padding: 0;

  margin: 0 2px 0 0 !important;

  list-style-image: none !important;

  border-top: 1px solid #aaa;

  border-left: 1px solid #aaa;

  border-right: 1px solid #aaa;

  -webkit-border-top-left-radius: 4px;

  -webkit-border-top-right-radius: 4px;

  -khtml-border-top-left-radius: 4px;

  -khtml-border-top-right-radius: 4px;

  -moz-border-radius: 4px 4px 0 0;

  border-radius: 4px 4px 0 0;
}

/* link inside the tab. uses a background image */

.tabs a {
  background: #ddd;

  background: -moz-linear-gradient(top, #eee, #ddd);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#eee),
    to(#ddd)
  );

  -pie-background: linear-gradient(top, #eee, #ddd);

  border-bottom: 1px solid #aaa;

  -webkit-border-top-left-radius: 3px;

  -webkit-border-top-right-radius: 3px;

  -moz-border-radius: 3px 3px 0 0;

  border-radius: 3px 3px 0 0;

  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  font-size: 11px;

  display: block;

  height: 29px;

  line-height: 30px;

  width: 111px;

  text-align: center;

  text-decoration: none;

  color: #000;

  padding: 0px;

  margin: 0px;

  position: relative;

  text-shadow: 0 1px 0 #fff;

  top: 0px;

  -webkit-background-clip: padding-box;
}

.tabs a:active {
  outline: none;
}

/* when mouse enters the tab move the background image */

.tabs a:hover {
  background: #ddd;

  -pie-background: #ddd;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */

.tabs .current,
.tabs .current:hover,
.tabs li.current a {
  border-bottom: 1px solid #fff;

  background: #fff;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e1e1e1),
    to(#fff)
  );

  background: -moz-linear-gradient(top, #e1e1e1, #fff);

  -pie-background: linear-gradient(top, #e1e1e1, #fff);

  cursor: default !important;

  color: #000 !important;

  text-shadow: 0 1px 0 #fff;
}

/* tab pane styling */

.panes {
  border: 1px solid #aaa;

  border-top: 0;
}

.panes section {
  display: none;

  padding: 15px 10px;

  min-height: 100px;

  background-color: #fff;
}

/**

 * Calendar

 */

/* calendar root element */

#calroot {
  background-color: #fff;

  -moz-box-shadow: 0 0 4px #eee;

  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -webkit-box-shadow: 0 0 4px #eee;

  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -khtml-box-shadow: 0 0 4px #eee;

  -khtml-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -pie-box-shadow: 0 0 4px #ccc;

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  font-size: 11px;

  margin-top: -1px;

  width: 205px;

  z-index: 10000;

  zoom: 1;
}

/* head. contains title, prev/next month controls and possible month/year selectors */

#calhead {
  background: #e1e1e1;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fdfeff),
    color-stop(0.5, #e1e1e1),
    color-stop(0.5, #d2d2d2),
    color-stop(1, #a1a2a4)
  );

  background: -moz-linear-gradient(
    top,
    #fdfeff 0%,
    #e1e1e1 50%,
    #d2d2d2 50%,
    #a1a2a4 100%
  );

  -pie-background: linear-gradient(
    top,
    #fdfeff 0%,
    #e1e1e1 50%,
    #d2d2d2 50%,
    #a1a2a4 100%
  );

  border: 1px solid #bbb;

  -moz-border-radius: 5px 5px 0 0;

  -webkit-border-top-left-radius: 5px;

  -webkit-border-top-right-radius: 5px;

  -khtml-border-radius: 5px 5px 0 0;

  border-radius: 5px 5px 0 0;

  color: #333;

  font-size: 13px;

  height: 22px;

  margin: 0;

  padding: 2px 0;

  position: relative;

  text-shadow: 0 1px 0 #fff;
}

#caltitle {
  float: left;

  text-align: center;

  width: 162px;

  line-height: 20px;
}

#calnext,
#calprev {
  display: block;

  width: 20px;

  height: 20px;

  background: transparent url(../images/prev.gif) no-repeat scroll center center;

  float: left;

  cursor: pointer;
}

#calnext {
  background-image: url(../images/next.gif);

  float: right;
}

#calprev.caldisabled,
#calnext.caldisabled {
  visibility: hidden;
}

/* year/month selector */

#caltitle select {
  font-size: 10px;
}

#calbody {
  background: #fafafa;

  border-left: 1px solid #bbb;

  border-right: 1px solid #bbb;

  border-bottom: 1px solid #bbb;

  -moz-border-radius: 0 0 5px 5px;

  -webkit-border-bottom-left-radius: 5px;

  -webkit-border-bottom-right-radius: 5px;

  -khtml-border-bottom-left-radius: 5px;

  -khtml-border-bottom-right-radius: 5px;

  border-radius: 0 0 5px 5px;

  padding: 3px;

  position: relative;
}

/* names of the days */

#caldays {
  height: 14px;

  border-bottom: 1px solid #ddd;
}

#caldays span {
  display: block;

  float: left;

  width: 28px;

  text-align: center;
}

/* container for weeks */

#calweeks {
  background-color: #fff;

  margin-top: 4px;
}

/* single week */

.calweek {
  clear: left;

  height: 22px;
}

/* single day */

.calweek a {
  display: block;

  float: left;

  width: 27px;

  height: 20px;

  text-decoration: none;

  font-size: 11px;

  margin-left: 1px;

  text-align: center;

  line-height: 20px;

  color: #666;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  -khtml-border-radius: 3px;

  border-radius: 3px;
}

/* different states */

.calweek a:hover,
.calfocus {
  background-color: #ddd;
}

/* sunday */

a.calsun {
  color: red;
}

/* offmonth day */

a.caloff {
  color: #ccc;
}

a.caloff:hover {
  background-color: rgb(245, 245, 250);
}

/* unselecteble day */

a.caldisabled {
  background-color: #efefef !important;

  color: #ccc !important;

  cursor: default;
}

/* current day */

#calcurrent {
  background-color: #498ce2;

  color: #fff;
}

/* today */

#caltoday {
  background-color: #333;

  color: #fff;
}

/* Progress bars

---------------------------------------------------------------------*/

.progress {
  border: 1px solid #ccc;

  position: relative;

  display: block;

  height: 22px;

  padding: 0;

  min-width: 200px;

  margin: 4px 0;

  background: #dedede;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ccc),
    to(#e9e9e9)
  );

  background: -moz-linear-gradient(top, #ccc, #e9e9e9);

  -pie-background: linear-gradient(top, #ccc, #e9e9e9);

  -moz-box-shadow: 0 1px 0 #fff;

  -webkit-box-shadow: 0 1px 0 #fff;

  box-shadow: 0 1px 0 #fff;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  -khtml-border-radius: 4px;

  border-radius: 4px;

  position: relative;
}

.progress span {
  display: block;

  height: 20px;

  margin: 0;

  text-align: center;

  padding: 0;

  position: relative;

  width: 0;

  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  -khtml-border-radius: 3px;

  border-radius: 3px;
}

.progress span b {
  color: #fff;

  line-height: 20px;

  padding-left: 2px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.progress.progress-blue span {
  border: 1px solid #0078a5;

  background-color: #5c9ade;

  background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #00adee),
    color-stop(0.9, #0078a5)
  );

  -pie-background: linear-gradient(top, #00adee 10%, #0078a5 90%);
}

.progress.progress-green span {
  border: 1px solid #5c9425;

  background-color: #77af3f;

  background: -moz-linear-gradient(top, #8fc857 10%, #5c9425 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #8fc857),
    color-stop(0.9, #5c9425)
  );

  -pie-background: linear-gradient(top, #8fc857 10%, #5c9425 90%);
}

.progress-orange span {
  border: 1px solid #f47a20;

  background-color: #faa51a;

  background: -moz-linear-gradient(top, #faa51a 10%, #f47a20 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #faa51a),
    color-stop(0.9, #f47a20)
  );

  -pie-background: linear-gradient(top, #faa51a 10%, #f47a20 90%);
}

.progress-red span {
  border: 1px solid #a92c2c;

  background-color: #c44747;

  background: -moz-linear-gradient(top, #dd5f5f 10%, #a92c2c 90%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.1, #dd5f5f),
    color-stop(0.9, #a92c2c)
  );

  -pie-background: linear-gradient(top, #dd5f5f 10%, #a92c2c 90%);
}

/**

 * Inputs and Validation

 */

input,
textarea,
select {
  outline: none;
}

fieldset {
  border: 1px solid #bbb;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  padding: 20px;

  margin-bottom: 10px;
}

fieldset.home {
  border: 2px solid #bbb;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  padding: 20px;

  margin-bottom: 10px;

  background: #f5f5f5;
}

fieldset legend {
  border-left: 1px solid #bbb;

  border-right: 1px solid #bbb;

  padding: 0 10px;
}

fieldset.home legend {
  border: 2px solid #bbb;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  padding: 5px;

  margin-bottom: 10px;

  background: #ffcc99;

  color: #cc6600;

  font-weight: bold;
}

.form label {
  display: block;

  font-size: 12px;

  float: left;

  font-weight: bold;

  margin: 0;

  text-align: right;

  clear: left;

  width: 100px;
}

.form label small {
  color: #666666;

  display: block;

  font-size: 11px;

  font-weight: normal;

  line-height: 11px;

  text-align: right;

  width: 160px;
}

.form .action {
  clear: left;

  margin-left: 170px;
}

.form input,
.form textarea,
.form select {
  float: left;

  margin: 2px 0 20px 10px;

  clear: right;
}

label em {
  color: red;

  font-style: normal;
}

input.half,
select.half,
textarea.half {
  width: 50%;
}

input.kecil,
select.kecil,
textarea.kecil {
  width: 50;
}

input.full,
select.full,
textarea.full {
  width: 95%;
}

input {
  position: relative;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
input[type="time"],
input[type="date"],
input.date {
  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  -khtml-border-radius: 3px;

  border-radius: 3px;

  border: 1px solid #ccc;

  padding: 4px 6px;

  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

  /*font: 13px/16px Arial, sans-serif !important;*/
}

select {
  padding: 3px;

  position: relative;
}

textarea {
  margin-bottom: 10px;

  position: relative;
}

input.full {
  width: 94%;
}

.invalid {
  border: 1px solid red !important;
}

.form-error {
  -moz-box-shadow: #ddd 0px 0px 6px;

  -webkit-box-shadow: #ddd 0px 0px 6px;

  box-shadow: #ddd 0px 0px 6px;

  background-color: #000;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  -khtml-border-radius: 4px;

  border-radius: 4px;

  color: #fff;

  display: none;

  font-size: 11px;

  height: 15px;

  padding: 4px 10px;

  z-index: 9999;
}

.form-error p {
  color: #fff;

  display: block;

  margin: 0px;

  line-height: 15px;
}

.form-error em {
  display: block;

  width: 0;

  height: 0;

  border: 5px solid;

  border-color: transparent #000 transparent transparent;

  /* positioning */

  position: absolute;

  top: 6px;

  left: -10px;
}

/**

 * Speech Bubbles

 */

.speech-bubble,
.tooltip,
.popupballoon {
  position: relative;

  padding: 10px;

  margin: 1em 0 1em;

  color: #000;

  background: #ddd; /* default background for browsers without gradient support */

  /* css3 */

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  border-radius: 5px;

  min-height: 20px;
}

.speech-bubble.left {
  margin-left: 20px;
}

/* creates triangle */

.tooltip:before,
.popupballoon:before {
  content: "";

  display: block; /* reduce the damage in FF3.0 */

  position: absolute;

  bottom: -31px; /* value = - border-top-width - border-bottom-width */

  left: 75px; /* controls horizontal position */

  width: 0;

  height: 0;

  border: 15px solid transparent;

  border-top-color: #dd6611;
}

/* creates the larger triangle */

.tooltip.left:before {
  top: 9px; /* controls vertical position */

  left: -16px; /* value = - border-left-width - border-right-width */

  bottom: auto;

  border-width: 11px 16px 11px 0;

  border-style: solid;

  border-color: transparent #dd6611;
}

.speech-bubble:after,
.tooltip:after,
.popupballoon:after {
  content: "";

  display: block; /* reduce the damage in FF3.0 */

  position: absolute;

  bottom: -15px; /* value = - border-top-width - border-bottom-width */

  left: 50px; /* controls horizontal position */

  width: 0;

  height: 0;

  border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */

  border-style: solid;

  border-color: #ddd transparent;
}

.speech-bubble.left:after,
.tooltip.left:after {
  top: 10px; /* controls vertical position */

  left: -15px; /* value = - border-left-width - border-right-width */

  bottom: auto;

  border-width: 10px 15px 10px 0;

  border-color: transparent #ddd;
}

.comment .speech-bubble.left {
  margin-top: 10px !important;

  width: 590px;
}

.tooltip {
  border: 1px solid #dd6611;

  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);

  margin-top: 0px;

  width: 160px;

  display: none;

  background: #f9d835;

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #f9d835),
    color-stop(0.3, #f9d835),
    color-stop(1, #f3961c)
  );

  background: -moz-linear-gradient(top, #f9d835 0%, #f9d835 30%, #f3961c 100%);

  -pie-background: linear-gradient(top, #f9d835 0%, #f9d835 30%, #f3961c 100%);

  text-align: center;

  z-index: 999;
}

.tooltip:after {
  border-color: #f3961c transparent;

  left: 75px;

  zoom: 1;
}

.tooltip.left:after {
  border-color: transparent #f9d835;
}

.tooltip.left {
  width: 200px;
}

.subnav .tooltip.left {
  left: 131px !important;
}

.tooltip .avatar {
  background: #fff url(../images/user_32.png) no-repeat center center;

  display: block;

  float: left;

  height: 60px;

  margin-right: 10px;

  width: 60px;

  -moz-box-shadow: 0 0 3px #000;

  -webkit-box-shadow: 0 0 3px #000;

  -khtml-box-shadow: 0 0 3px #000;

  box-shadow: 0 0 3px #000;
}

.tooltip h5,
h6 {
  margin: 0;
}

.popupballoon {
  background: #fff;

  border: 1px solid #777;

  display: none;

  height: auto;

  position: absolute;

  width: 200px;

  z-index: 1000;

  -moz-box-shadow: 0 1px 3px #777;

  -webkit-box-shadow: 0 1px 3px #777;

  -khtml-box-shadow: 0 1px 3px #777;

  box-shadow: 0 1px 3px #777;

  zoom: 1;
}

.popupballoon:after {
  border-color: #fff transparent;
}

.popupballoon.top:before {
  top: -16px; /* value = - border-top-width - border-bottom-width */

  left: 29px; /* controls horizontal position */

  border-width: 0 16px 16px; /* vary these values to change the angle of the vertex */

  border-color: #777 transparent;
}

.popupballoon.top:after {
  top: -15px; /* value = - border-top-width - border-bottom-width */

  left: 30px; /* controls horizontal position */

  border-width: 0 15px 15px; /* vary these values to change the angle of the vertex */

  border-color: #fff transparent;
}

.popupballoon h3 {
  margin-top: 0;
}

.popupballoon input[type="text"],
.popupballoon input[type="date"],
.popupballoon input.date {
  width: 185px;
}

.popupballoon select {
  width: 200px;
}