/* Copper UI */


/* Depreciated: wf_comment uses this. */
div.quickpanel textarea { width: 70%; }
div.quickpanel p.panelhelp { font-size: 80%; }
div.quickpanel a.panelbutton { background: #aac; border: 2px outset #aac; padding: 2px 1em; color: #000; text-decoration: none;}
div.quickpanel a.panelbutton img { vertical-align: bottom;}


div.ClickDash ul { margin: 0; padding: 0; }
div.ClickDash ul li {
list-style: none inside none;
height: 16px;
float: left;
position: relative;
}
div.ClickDash ul li a {
height: 16px;
text-indent: -9000px;
display: block;
}
div.ClickDash ul li a       { width: 50px; height: 16px; }
div.ClickDash ul li a:hover { background-position: 0 -16px; }

/* ************************************************************************************************ */

.ClickToolbar {
  background: #ddd url(/i/click/e/cu/toolbar-background.png) repeat-x scroll bottom center;
  border: 1px solid #999;
  padding: 2px 8px;
  margin: 2px;
  display: block;
  height: 25px;
}
.ClickToolbar a {
  display: block;
  float: left;
  width: 60px;
  font: bold 12px Arial, Verdana, Helvetica, sans-serif;
  background: #bbf;
  color: #333;
  text-align: center;
  padding: 2px 14px 2px 8px;
  border: 1px outset;
  margin: 2px;
  text-decoration: none;
}
.ClickToolbar a:hover {
  color: #fff;
  background-color: #006;
}
.ClickToolbar a img {
  float: left;
}

/* ************************************************************************************************ */

.ClickStrip {
  background: #ddd;
  border: 1px solid #ccc;
  padding: 0 4px;
  margin: 0;
  font-size: 14px;
  line-height: 14px;
  vertical-align: baseline;
  white-space: nowrap;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.ClickStrip a {
  font: 12px Arial, Verdana, Helvetica, sans-serif;
  background: #ddd;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0 4px;
  font-weight: bold;
}
.ClickStrip a + a {
  border-left: 1px solid #999;
}
.ClickStrip a:hover {
  color: #fff;
  background-color: #006;
}
.ClickStrip a img {
  border: 0;
  margin: 0;
  vertical-align: text-bottom;
}
/* ************************************************************************************************ */

.ClickTile {
  background: #ddd;
  padding: .3em 1em;
  font: 10pt/12pt Arial, Verdana, Helvetica, sans-serif;
  border: 1px solid #bbb;
  margin: 2px;
}


@media print {
  .ClickTileCu01   { border: 1px solid #999; }
  .ClickTileCorner { display: none; }
}


/*   Copper  //////////////////////////// */


#uitooltip {
    display:none;
    background:transparent url(/i/click/css/tooltip/black.png);
    font-size:12px;
    height:55px;
    width:160px;
    padding:25px;
    color:#fff;
}
#uitooltip.bottom {
    background:transparent url(/i/click/css/tooltip/black.png);
    height:55px;
}

div.uiMaxlengthNotice {
  clear: both;
  width: 160px;
  text-align: right;
  float: right;
  padding: 1px 1em;
  font-size: 85%;
  position: relative;
  color: #666;
}
div.uiMaxlengthNoticeAlert {
  color: #c00;
}

.ui-widget  { font-size:  0.9em; }

.card h3 { font: 1.4em Arial, sans; border-bottom: 1px solid #999; margin: 0.2em 0 0.2em 0; }

.card  label.label { width: 20%; float: left; text-align: right; font-weight: bold; padding-top: 7px; }
.card .field { width: 78%; float: right; clear: right;}
.card p.field { width: 100%; float: none; clear: both;}
.card div.field .field { width: 98%; float: left; clear: right;}
.card .fieldfull { width: 100%; clear: both;}
.panel .cardtitle { display: none; }
.cardcount1 .cardtitle { display: block; }
.cardtitle { margin-top: 0; padding-top: 0; border-bottom: 1px solid #ccc; font: bold 18pt Arial, sans; color: #000; }


.card { background: none #ddd; border: 1px solid #ccc; padding: .5em 2em; }

.card  .toolbar { text-align:right; clear: both; margin-left: 0; margin-right: 0; }
.card * + .toolbar { border-top: 1px solid #ccc; padding-top: 0.2em; margin-top: 3em; }


div.entry .card p, .card p           { clear: both; margin: 1em 0 0 0; text-indent: 0; }
.card .help       { font-size: 80%; padding-top: 0; margin: 0; margin-right: 2em; padding: 0 0 1em 0;}
.card .help label { font-size: 80%; width: 77%; float: right; font-weight: normal; line-height: 150%;}

.card p.rule      { height: 1px; border-bottom: 1px solid #ccc; margin: 1em 0; padding: 0; }


.card input, .card textarea { border: 1px solid #aaa; border-color: #aaa #ccc #ccc #aaa; padding: 0.1em 0 0.1em 0.5em; font-family: Verdana;}
.card textarea { height: 8.8em;}
.card p.checkbox { padding-left: 17%; }
.card p.checkbox label.label { float: right; width: 95%;  text-align: left; }
.card p.checkbox input { width: 18px; height: 1em; float: left; }


.commit { background-color: #fa0; background-image: none; color: #fff;  }
.tool { background-color: #99d; background-image: none; color: #fff; }

.button {padding: .4em 1em .4em 20px;text-decoration: none;position: relative; font-size: 10pt; }
.button span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

#entry div.card .submit, input.submit
{
  font-weight: bold;
  color: #000;
  margin: .2em 0;
  width: 140px;
  height: 24px;
  background: #ffa20f url(/i/click/base/button/button_submit_out.gif);
  border: 0;
}
#entry div.card .submit:hover
{
  background: #f6c36c url(/i/click/base/button/button_submit_over.gif);
}



/* Dialogs */

.uimodal {

    /* overlay is hidden before loading */
    display:none;

    /* standard decorations */
    width:400px;
    border:10px solid #666;

    /* for modern browsers use semi-transparent color on the border. nice! */
    border:10px solid rgba(82, 82, 82, 0.698);

    /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}



.uimodal div {
    padding: 0;
    border:  1px solid #222;
    background-color:#fff;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}

.uimodal p {
  padding: 10px;
}
.uimodal p + p {
  padding-top: 0;
}

.uimodal h2 {
    color:#fff;
    background-color:#669;
    padding:5px 10px;
    border:1px solid #669;
    font-size:20px;
    height: 28px;
    margin: 0;
}
.uimodalaction h2 {
    off-background: #669 url(/i/click/css/spinner/666699-24.gif);
    mook: no-repeat scroll center right;
}

/*   TABS */



/* root element for tabs  */
ul.tabs {
  list-style:none;
  margin:0 !important;
  padding:0;
  border-bottom:1px solid #666;
  height:30px;
}

/* single tab */
ul.tabs li {
  float:left;
  text-indent:0;
  padding:0;
  margin:0 !important;
  list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
  background: url(/i/click/css/tabs/tabs.png?a) no-repeat -420px 0;
  font:bold 1em Arial, sans;
  display:block;
  height: 30px;
  line-height:30px;
  width: 134px;
  text-align:center;
  text-decoration:none;
  color:#333;
  padding:0px;
  margin:0px;
  position:relative;
  top:1px;
}

ul.tabs a:active {
  outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
  background-position: -420px -31px;
  color:#fff;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
  background-position: -420px -62px;
  cursor:default !important;
  color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s       { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover   { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l       { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover   { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl      { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover  { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
div.panes div.pane {
  display:none;
}


/* Menu - Shadow */

html>body div.outerbox
{
  padding: 0 5px 5px 0;
}
html>body div.outerbox div.shadowbox1
{
  position: absolute;
  right: 0;
  bottom: 5px;
  width: 5px;
  height: 100%;
  background: url(/i/click/css/menu/core/myshadow.png) no-repeat right top;
}
html>body div.outerbox div.shadowbox2
{
  position: absolute;
  bottom: 0;
  right: 5px;
  height: 5px;
  width: 100%;
  background: url(/i/click/css/menu/core/myshadow.png) left bottom;
}
html>body div.outerbox div.shadowbox3
{
  position: absolute;
  bottom: 0;
  right: 0;
  height: 5px;
  width: 5px;
  background: url(/i/click/css/menu/core/myshadow.png) no-repeat right bottom;
}
html>body .innerbox
{
  margin: 0;
  display: inherit;
}


/* Menu - Bar and section */

div.menu-bar {
  background-color: #ccc; /* url(/i/click/e/cu/toolbar-background.png); */
  font: 12px Verdana, Arial, sans;
  border: 1px solid #aaa;
  border-bottom: 0;
  height: 22px;
  cursor: default;
}
div.menu-bar span {
  padding: 2px 1em;
  line-height: 22px;
}
div.menu-bar span + span{
  margin-left: 1em;
}
div.menu-bar span:hover {
  background-color: #9ac;
}
#root-menu-div ul {
  border: 1px solid #aaa;
}
#root-menu-div li{
  white-space:nowrap;
}
* html #root-menu-div li{
  height: 1.5em; /* fixing ie6 problem */
}
ul.menu,
#root-menu-div ul {
  background: #ccc url('/i/click/css/menu/core/menuitemback.png');
  list-style: none;
  margin: 0;
  padding: 0;
}
li.menu-separator.active{
  background-color: transparent;
}
li.active {
  background-color: #9ac;
}
.activetarget{
  background-color: #ccc;
}

* html div.menu-item {
  display: inline; /* fixes problem in ie6 */
}

li.menumain {
  float: left;
  padding: 0 10px;
}
div.menu-item {
  padding: 6px 10px 1px 30px;
  font: 12px Verdana, Arial, sans;
  height: 18px;
  cursor: default;
}
div.menu-item img.menu-item-icon {
  position: absolute;
  left: 3px;
}
img.menu-item-arrow{
  position: absolute;
  right: 4px;
  top: 8px;
}
li.menu-separator{
  border-bottom: 1px solid #aaa;
  border-left: 30px solid #ddd;
  font-size: 0; /* for ie */
  height: 0;
  line-height: 0; /* for ie */
  margin: 2px 0;
}


/************ Date Picker ******************/
* input.hasDatepicker
{
/*
  background: white url(/i/click/css/ui/date.icon.png) left no-repeat;
  padding-left: 20px;
*/
  background-image: url(/i/click/css/ui/date.icon.png);
  background-repeat: no-repeat;
  background-position: center right;
}

/************* jquery.tooltip.js ***********/
#tooltip {
  position: absolute;
  z-index: 3000;
  border: 1px solid #111;
  background-color: #eee;
  padding: 5px;
  opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }