/* utility methods */

.bold { font-weight: bold; }
.italic { font-style: italic; }
.normal { font-weight: normal; }
.hide { visibility: hidden; display: none; }
.confirmation { color: Green; }
.error { color: Red; }
.rightalign { text-align: right; }
.leftalign {text-align: left; }
.topalign { vertical-align: top; }
.green { color: Green; }
.red { color: Red; }
.center { text-align: center; }
.clear { clear: both; }
.pointer { cursor: pointer; }
.floatleft { float: left; }
.floatright { float: right; }
.centerblock { margin: 0 auto 0 auto; }
.smallfont { font-size: 9px; }
.fulltable { width: 100%; }
.mediumfont { font-size: 10px; }
.black { color: #000; }

/* copy */

.description { border: solid 1px #000; background-color: #e3e3e3; margin-bottom: 10px; padding: 5px; font-weight: bold; }

/* cash accountability */

#cashaccountability { }

#cashaccountability #collectionticket { width: 600px; /*border: solid 1px #000;*/ padding: 10px; }
#cashaccountability #collectionticket .table { width: 100%; }
#cashaccountability #collectionticket .table .left { width: 310px; vertical-align: top; }
#cashaccountability #collectionticket .table .left .title { font-weight: bold; font-size: 16px; }
#cashaccountability #collectionticket .table .right { width: 290px; vertical-align: top; }

#cashaccountability #collectionticket .collecttable { width: 100%; border: solid 1px #000; }
#cashaccountability #collectionticket .collecttable td { padding: 5px; }
#cashaccountability #collectionticket .collecttable input { width: 100px; }
#cashaccountability #collectionticket .collecttable .checkboxfield { font-size: 10px; }
#cashaccountability #collectionticket .collecttable .checkboxfield input { width: auto; }
#cashaccountability #collectionticket .collecttable .title td { background-color: #000; color: #fff; }
#cashaccountability #collectionticket .collecttable .label { }
#cashaccountability #collectionticket .collecttable .field { }
#cashaccountability #collectionticket .collecttable span { width: 50px; }
#cashaccountability #collectionticket .table .right .total { width: 100%; font-weight: bold; font-size: 18px; background-color: #ebebe6; padding: 4px; }

#cashaccountability #collectionticket #buttons input { width: 100px; }

/* calendar popup */
 
.calendarpopup { z-index: 100; visibility: hidden; position: absolute; /*background-color: white; layer-background-color: white;*/ width: 160px; }
.calendarpopup td { padding: 0px; }
 
/* tabs */

.tabs { height: 23px; margin-bottom: 5px; background: url('../_images/tabs/tab-bg.png') #fff; text-align: center; }
.tabs ul { list-style-type: none; padding-left: 0px; margin-left: 0px; width: 726px; height: 23px; margin: 0px auto 0px auto; }
.tabs ul li { width: 100px; height: 23px; background: url('../_images/tabs/tab_1.png') #fff no-repeat; text-align: center; float: left; }
.tabs ul li.on { background: url('../_images/tabs/tab-on_1.png') #fff no-repeat; }
.tabs ul li span { height: 23px; vertical-align: bottom; padding-top: 5px; }
.tabs ul li a { height: 23px; line-height: 23px;  }
.tabs ul li a,.tabs ul li a:active,.tabs ul li a:visited { color: #fff; font-weight: bold; text-decoration: none; cursor: pointer; }
.tabs ul li a:hover { color: #fff; text-decoration: underline; }
.tabs ul li.on a,.tabs ul li.on a:active,.tabs ul li.on a:visited { color: #5c5c5c; }
.tabs ul li.on a:hover { color: #5c5c5c; }

/* table */

.container { width: 100%; border: solid 1px #cfcfcf; }
.container .title { font-weight: bold; background-color: #e3e3e3; color: #000; }
.container td { padding: 5px; }
.container .label { font-weight: bold; width: 80px; vertical-align: top; }
.container .field { }
.container .moneyfield { text-align: right; }

.formtable { width: 100%; padding: 0px; border: 0px; }
.formtable .title { font-weight: bold; }
.formtable .title td,th { padding: 5px 5px 5px 5px; /*height: 27px;*/ background: url('../_images/grid/header.png') #c5ddf4 top left repeat-x; vertical-align: middle; border-bottom: solid 1px #6296cb; }
.formtable .title td.leftcorner,th.leftcorner { border-left: solid 1px #6296cb; }
.formtable .title td.rightcorner,th.rightcorner { border-right: solid 1px #6296cb; }
.formtable .title td.bothcorners,th.bothcorners { border-left: solid 1px #6296cb; border-right: solid 1px #6296cb; }
.formtable .title img { vertical-align: middle; padding-left: 2px; }
.formtable .title a { vertical-align: middle; font-size: 12px; }
.formtable .title a:hover { color: #000; }
.formtable td { padding: 5px; }
.formtable .altrow { background-color: #e6f0fa; }
.smallgrid td { font-size: 11px !important; }

.emptytable { width: 100%; padding: 0px; }
.emptytable td { padding: 0px; }
.emptytable .left { text-align: left; }
.emptytable .right { text-align: right; }
.emptytable .right img { border: 0px; }

/* subheader */

.subheader { color: #003091; font-weight: bold; font-size: 13px; }
.subheader .hr { background: url('../_images/subdivider.png'); width: 115px; height: 1px; border: 0px; font-size: 1px; margin: 3px auto 0px auto; }

/* homepage */

.pinStyleBlue { BACKGROUND: url(_images/pin_blue.png) no-repeat 0px 0px; FONT: bold 12px Arial; WIDTH: 20px; CURSOR: pointer; COLOR: #fff; PADDING-TOP: 3px; POSITION: relative; TOP: -15px; HEIGHT: 30px; TEXT-ALIGN: center }
.pinStyleRed { BACKGROUND: url(_images/pin_red.png) no-repeat 0px 0px; FONT: bold 12px Arial; WIDTH: 25px; CURSOR: pointer; COLOR: #fff; POSITION: relative; TOP: -15px; HEIGHT: 30px; TEXT-ALIGN: center }
.pinStyleGreen { BACKGROUND: url(_images/pin_green.png) no-repeat 0px 0px; FONT: bold 12px Arial; WIDTH: 25px; CURSOR: pointer; COLOR: #fff; POSITION: relative; TOP: -15px; HEIGHT: 30px; TEXT-ALIGN: center }
.pinStyleYellow { BACKGROUND: url(_images/pin_yellow.png) no-repeat 0px 0px; FONT: bold 12px Arial; WIDTH: 25px; CURSOR: pointer; COLOR: #fff; POSITION: relative; TOP: -15px; HEIGHT: 30px; TEXT-ALIGN: center }
.pinStyle1 .text { POSITION: relative; TOP: 2px }

/* help tooltip */

a.tooltip
{
    position: relative;
    z-index: 24; 
    text-decoration: none;
    cursor: help;
}

a.tooltip:hover{z-index: 25;}

a.tooltip span{display: none; visibility: hidden;}

a.tooltip:hover
{
	background: none;
}

a.tooltip:hover span
{
	visibility: visible;
    display: block;
    position: absolute;
    top: -115px; 
    left: 35px;
    background: #fff;
    z-index: 100;
 }
 
 a.tooltip:hover span.help
{
	visibility: visible;
    display: block;
    position: absolute;
    top: -10px; 
    left: 35px;
    padding: 5px; 
    border: solid 1px #000; 
    background-color: #e3e3e3; 
    color: #000; 
    font-weight: normal; 
    width: 250px;
    z-index: 100;
 }
 
a.tooltip:hover span span
{
    display: inline;
    position: static;
    background: none;
	border-width: 0px;
}
 
a.tooltip img { border: 0px; }

/* planogram */

#planogram { width: 100%; height: 276px; }

#planogram .left { vertical-align: top; }
#planogram .left .scrollbox { overflow: auto; height: 276px; }
#planogram .left .scrollbox .planogram { border: solid 1px #cfcfcf; margin: 0px 1px 1px 0px; }
#planogram .left .scrollbox .planogram .title { font-weight: bold; }
#planogram .left .scrollbox .planogram .title td { padding: 3px; background: url('../_images/grid/header.png') #c5ddf4 top left repeat-x; vertical-align: middle; border-bottom: solid 1px #6296cb; border-left: solid 1px #6296cb; border-right: solid 1px #6296cb; }
#planogram .left .scrollbox .planogram td { padding: 0px 0px 1px 0px; font-size: 9px; }
#planogram .left .scrollbox .planogram input { font-size: 9px; width: 25px; }

#planogram .right { vertical-align: top; width: 130px; }
#planogram .right td { font-size: 9px; }
#planogram .right input { font-size: 9px; }
#planogram .right select { font-size: 9px; }
#planogram .right .size td { padding-bottom: 3px; }
#planogram .right .search td { padding-bottom: 3px; }
#planogram .right #products { border: solid 1px #000; overflow: auto; height: 227px; }
#planogram .right #products #tblProducts { padding: 3px; width: 100%; }

/* modal background */

.modalbackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}
.modal { background-color: #fff; border: solid 1px #000; width: 400px; }
.modal .title { font-weight: bold; background: #e3e3e3; height: 26px; }
.modal .title .left { float: left; padding: 5px; }
.modal .title .right { float: right; padding: 5px; }
.modal .body { padding: 10px; }
.modal .body .scroller { clear: both; height: 350px; overflow: auto; }
.modal .body .scroller .content { width: 95%; }
.modal .buttons { width: 100%; }

/* login */

.login { border: solid 2px #6a7fa5; font-size: 11px; width: 350px; }
.login td { padding: 5px; }
.login .title td { background-color: #3c65a3; color: #000; font-weight: bold; font-size: 12px; }
.login .field td { background-color: #cedfef; }
.login .field .label { font-weight: bold; width: 80px; }
.login .field .input input { width: 200px; }
.login .help td { background-color: #cedfef; font-size: 10px; text-align: right; }
.login .help a.link { color: #3a649e; }
.login .button td { text-align: center; background-color: #3c61a7; }
.login .button input { color: #d5051f; font-weight: bold; }