@import url('sprites.css');
@import url('../attributes.css');

BODY
{
  background-color: #fff;
  font-family: 'Roboto Condensed','Arial','Tahoma',sans-serif;
  font-size: 11pt;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
BODY.login
{
  margin: 75px;
  padding: 100px;
  background-color: #999;
}

/* == HEADINGS ============================================================== */

H1
{
  font-size: 18pt;
  margin: 18px 0px 10px 0px;
  color: #66d;
}
H2
{
  font-size: 16pt;
  margin: 12px 0px 2px 0px;
  color: #55d;
}
H3
{
  font-size: 14pt;
  margin: 6px 0px 2px 0px;
  color: #44d;
}
H4
{
  font-size: 12pt;
  margin: 6px 0px 2px 0px;
  color: #33b;
}

/* == DIVIDERS ============================================================== */

/* inquiry note */
DIV.note
{
  border: 1px solid #bbb;
  background-color: #f4f4f4;
  padding: 4px;
}

DIV.booking
{
  color: #fff;
  font-weight: bold;
  margin: 20px auto;
  background-color: #777;
  border-radius: 4px;
  padding: 4px;
  width: 500px;
}

/* receipt form */
DIV.rcform
{
  background-color: #ccd;
  border: 1px solid #888;
  border-radius: 2px;
  margin: auto;
}

/* receipt frame */
DIV.rcframe
{
  position: relative;
  padding: 4px;
  background-color: #f3f3f0;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  margin: 20px auto;
  width: 960px;
}

DIV.gallery
{
  /* text-align: center; */
  margin: auto;
}
DIV.item
{
  display: inline-table;
  padding: 10px;
}

DIV.form
{
  text-align: center;
}

DIV.form DIV
{
  display: inline-block;
  margin: 0 20px;
  width: 150px;
}

DIV.form LABEL
{
  text-align: center;
  display: block;
  font-size: 8pt;
}

/* == FORMS ================================================================= */

INPUT[type='text'],
INPUT[type='password'],
INPUT[type='checkbox'],
TEXTAREA,
SELECT
{
  font-size: 10pt;
  border-width: 1px;
  border-color: #ccc;
  border-radius: 3px;
  background-color: #fff;
  padding: 2px;
  margin: 1px;
}

TEXTAREA.nicEdit
{
  width: 600px;
  height: 50px;
}

BUTTON,
INPUT[type='button'],
INPUT[type='submit'],
INPUT[type='reset'],
A.button,
A.btn
{
  color: #eee !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 9pt !important;
  font-weight: bold !important;
  font-family: Tahoma  !important;
  display: inline-block;
  background-color: #aaa;
  border-radius: 4px;
  padding: 10px 5px;
  cursor: pointer;
  border: none;
  width: 180px;
}
BUTTON:enabled:hover,
INPUT[type='button']:enabled:hover,
INPUT[type='submit']:enabled:hover,
INPUT[type='reset']:enabled:hover,
A.button:hover,
A.btn:hover
{
  background-color: #66f;
  color: #fff;
}
A.button
{
  width: 170px;
  border: 2px solid #ddd;
}
A.btn
{
  color: #444 !important;
  background-color: #bbb;
  font-size: 8pt !important;
  font-weight: normal !important;
  width: 36px;
}
A.btn:hover
{
  color: #fff !important;
  background-color: #66f;
}
BUTTON.add,
A.add
{
  cursor: copy;
}

INPUT:read-only,
INPUT[readonly],
INPUT[readonly="readonly"],
INPUT:-moz-read-only
{
  align-content: center;
  background-color: #bbf;
  color: #444;
}

INPUT.date
{
  color: #00f;
  font-size: 10pt;
  border: 1px solid #99d;
  border-radius: 3px;
  background-color: #eef;
  text-align: center;
  cursor: pointer;
  width: 80px;
}

INPUT.colorpick
{
  border-radius: 3px;
  background-color: #bbb;
  text-align: center;
  font-family: monospace;
  font-size: 9pt;
  width: 70px;
  cursor: crosshair;
  color: #222;
}

/*required*/
INPUT.req
{
  background-image: url('images/markr.png');
  background-repeat: no-repeat;
  background-position: top right;
}

/*reported*/
INPUT.rep
{
  background-image: url('images/markb.png');
  background-repeat: no-repeat;
  background-position: top right;
}

/*read-only*/
INPUT.ro
{
  cursor: default;
  background-color: #ccf;
  color: #444;
}

TEXTAREA
{
  font-size: 9pt;
}


/* == TABLES ================================================================ */

/* table */
TABLE.tms
{
  color: #444;
  font-size: 9pt;
  border-width: 1px;
  border-color: #999;
  border-spacing: 1px;
  border-collapse: separate;
  border-radius: 6px;
  background-color: #eee;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  /*width: 100%;*/
}

/* THEAD */
TABLE.tms THEAD TH,
TABLE.tms THEAD TD
{
  color: #fff;
  text-align: center;
  padding: 4px;
}

TABLE.tms THEAD TH
{
  width: 54px;
  font-size: 8pt;
  font-weight: normal;
  background-color: #88f;
}
TABLE.tms THEAD TD
{
  font-size: 10pt;
  font-weight: bold;
  background-color: #aaf;
}
TABLE.tms THEAD TR:first-child TH,
TABLE.tms THEAD TR:first-child TD
{
  border-top: 1px solid #77c;
}
TABLE.tms THEAD TR:last-child TH,
TABLE.tms THEAD TR:last-child TD,
TABLE.tms THEAD TR TH[rowspan],
TABLE.tms THEAD TR TD[rowspan]
{
  border-bottom: 3px solid #77c;
}

/* TBODY */
TABLE.tms TH,
TABLE.tms TD
{
  padding: 4px;
}
TABLE.tms TH
{
  background-color: #bbf;
  text-align: center;
}
TABLE.tms TD
{
  background-color: inherit;
}
TABLE.tms TBODY TR:nth-child(even) TD
{
  background-color: #d8d8d8;
}
TABLE.tms TBODY TR:nth-child(odd) TD
{
  background-color: #e4e4e4;
}
TABLE.tms TBODY TR.alert TD
{
  background-color: #fcc;
}

/* TFOOT */
TABLE.tms TFOOT TH,
TABLE.tms TFOOT TD
{
  background-color: #bbb;
}
TABLE.tms TFOOT TH
{
  color: #fff;
  font-size: 11pt;
  background-color: #888;
}
TABLE.tms TFOOT TR:first-child TH,
TABLE.tms TFOOT TR:first-child TD
{
  border-top: 2px solid #888;
}
TABLE.tms TFOOT TR:last-child TH,
TABLE.tms TFOOT TR:last-child TD
{
  border-bottom: 1px solid #ddd;
}

/* CORNERS */
TABLE.tms *:first-child TR:first-child TH:first-child,
TABLE.tms *:first-child TR:first-child TD:first-child
{
  border-top-left-radius: 5px;
}
TABLE.tms *:first-child TR:first-child TH:last-child,
TABLE.tms *:first-child TR:first-child TD:last-child
{
  border-top-right-radius: 5px;
}
TABLE.tms *:last-child TR:last-child TH:first-child,
TABLE.tms *:last-child TR:last-child TD:first-child
{
  border-bottom-left-radius: 5px;
}
TABLE.tms *:last-child TR:last-child TH:last-child,
TABLE.tms *:last-child TR:last-child TD:last-child
{
  border-bottom-right-radius: 5px;
}

/* wide additional class - 1st column width */
TABLE.tms.wide1 THEAD TR TH:first-child,
TABLE.tms.wide1 THEAD TR TD:first-child
{
  width: 75%;
}
/* wide additional class - 2nd column width */
TABLE.tms.wide2 THEAD TR TH:nth-child(2),
TABLE.tms.wide2 THEAD TR TD:nth-child(2)
{
  width: 75%;
}
/* wide additional class - 3rd column width */
TABLE.tms.wide3 THEAD TR TH:nth-child(3),
TABLE.tms.wide3 THEAD TR TD:nth-child(3)
{
  width: 75%;
}
/* wide additional class - 4th column width */
TABLE.tms.wide4 THEAD TR TH:nth-child(4),
TABLE.tms.wide4 THEAD TR TD:nth-child(4)
{
  width: 75%;
}

TABLE.tms TBODY TR TD.menu,
TABLE.tms TBODY TR TH.menu
{
  color: #222;
  border-radius: 2px;
  text-align: center;
  background-color: #bbf;
}
TABLE.tms TBODY TR TH.menu
{
  border-right: 6px solid #aaa;
}
TABLE.tms TBODY TR TD.menu
{
  border-bottom: 6px solid #999;
  width: 72px;
}

TABLE.tms TBODY TR TD.menu:hover,
TABLE.tms TBODY TR TH.menu:hover
{
  color: #fff;
  cursor: pointer;
  background-color: #88f;
}
TABLE.tms TBODY TR TD.menu:hover
{
  border-bottom: 6px solid #33f;
}

TABLE.tms TBODY TR TH.menu:hover
{
  border-right: 6px solid #33f;
}

/* svi TH elementi koji imaju title atribut*/
TH[title]
{
  cursor: help;
}
TH[title]:hover
{
  color: #444;
  background-color: #ff9;
}

TH.filter
{
  border-bottom: 2px solid #f33;
}

/* table cells */
TH.money,
TD.money
{
  text-align: right;
  font-weight: normal;
  font-size: 10pt;
}
TH.total
{
  text-align: right;
  padding-right: 20px;
}

TD.subtotal
{
  border-top: 2px solid #888;
}

/* == MENUS ================================================================= */
/* table headers */
DIV.menubar
{
  color: #fff;
  background-color: #99f;
  padding: 2px 1px;
  padding: 4px 4px;
}

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

TD.p
{
  background-color: #aaa;
  border-radius: 2px;
  font-size: 10pt;
}

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


/* ========================================================================== */

DIV.colorpick
{
  width: 12px;
  height: 12px;
  border: 1px solid #333;
  position: relative;
  display: inline-block;
}

/* == BOLDERS =============================================================== */

.red
{
  color: #d33;
}
B.payedon
{
  color: #fff;
  background-color: #3b3;
  border-radius: 5px;
  padding: 2px 60px;
  margin: 2px;
}
B.notpayedon
{
  color: #fff;
  background-color: #f33;
  border-radius: 5px;
  padding: 2px 50px;
  margin: 2px;
}
B.deleted
{
  color: #fff;
  background-color: #fc0;
  border-radius: 5px;
  padding: 2px 45px;
  margin: 2px;
}
B.booking
{
  color: #fff;
  background-color: #888;
  border-radius: 5px;
  padding: 8px 45px;
  margin: 8px 0px;
}
B.user
{
  color: #fff;
  background-color: #888;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 2px;
}

/* == PARAGRAPHS ============================================================ */

P.alert,P.info,P.warn,P.master
{
  color: #446;
  background-repeat: no-repeat;
  background-position: center top;
  font-size: 9pt;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #eee;
  padding: 24px 4px 4px 4px;
  margin: 10px auto;
  /*  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);*/
}
P.alert
{
  background-color: #fcc;
  background-image: url('images/alert.png');
  width: 460px;
}
P.info
{
  background-color: #ccf;
  background-image: url('images/info.png');
  width: 460px;
}
P.warn
{
  background-color: #fcf;
  background-image: url('images/warn.png');
  width: 460px;
}
P.master
{
  display: inline-block;
  background-color: #ffc;
  background-image: url('images/server.png');
}

/* ========================================================================== */

SMALL
{
  font-size: 8pt;
  font-weight: normal;
  white-space: nowrap;
}

/* == HR ==================================================================== */

HR.dots
{
  background: url('../images/dots.png') repeat-x;
  height: 4px;
  border: 0px;
}
HR.lines
{
  background: url('../images/lines.png') repeat-x;
  height: 4px;
  border: 0px;
}

/* == ACCORDION ============================================================= */

#accordion
{
  margin: auto;
  width: 90%;
}

#accordion .ui-accordion-content
{
  font-size: 8pt;
}

/* == PAGER ================================================================= */

P.pager A
{
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 5px;
  margin: 1px;
  display: inline-block;
  width: 24px;
  cursor: pointer;
  background-color: #bbb;
}
P.pager A.sel
{
  background-color: #99f;
}
P.pager A:hover
{
  background-color: #888;
}
P.pager A:first-child
{
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
P.pager A:last-child
{
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

IMG.receipt-icon
{
  position: absolute;
  top: 20px;
  right: 20px;
}

/* == WIDTHS ================================================================ */

.w480
{
  width: 482px !important;
}
.w360
{
  width: 358px !important;
}
.w240
{
  width: 232px !important;
}
.w180
{
  width: 176px !important;
}
.w120
{
  width: 108px !important;
}
.w70
{
  width: 70px !important;
}
.w50
{
  width: 50px !important;
}
.w35
{
  width: 35px !important;
}

.center
{
  text-align: center !important;
}