/* 

        project: internet services - 2nd edition
        author: luka cvrk (www.solucija.com) */


/* default styles
   -------------- */
*{ margin: 0; padding: 0; }* 
body { 
    font: .7em Arial, "Trebuchet MS", Tahoma, sans-serif; 
    line-height: 1.6em;
    background: #fff; 
    color: #444; 
    height: 100vh;
}

html {
    height: 100vh;
}

fieldset {
    border: 1px solid lightsteelblue;
    padding: 3px;
    margin: 3px;
}



a {	color: #E0691A;	background: inherit; text-decoration: none;}
a:hover { color: #6C757A; background: inherit; }


/* This is the LOGO */
h1 { 
    font: bold 2.5em "Trebuchet MS", Arial, Sans-Serif; 
    padding: 0 0 0 8px; 
    margin: 0; 
}

h1 a { color: #737373; background: inherit; }
.orange { color: #E0692A; }
sup { font-size: .5em; }

h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; }
h2 { font-size: 1.5em; margin-bottom: 5px; color: #000; background: inherit; }
p {	margin: 0 0 5px 0; }

table th {
    font-weight: bold;
}
ul { 
    list-style :none;
    margin-left:2px;
}

.clear,.clearer {clear: both;}
.clearer {
    display: block;
    font-size: 0;
    line-height: 0;
    height: 0;
}

.show {
    display: block;
}

.hide {
    diplay: none;
}
/* layout
   ------ */

.body_text {
    margin-left:1em;
    margin-right:1em;
}

.content { 
    margin: 0 auto;
    /*width: 980px;*/
    min-width: 600px;
    padding: 0 2px 0 2px; 
}

.header { 
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 65px;
    background: #fff url(images/headerbg.gif) repeat-x bottom;
    color: #808080;
    min-width: 1000px;
    padding: 0 0 0 0;
    z-index: 2030;
}

.top_info {
    float: right;

    padding: 5px 0 4px 0;
    color: #808080;
    z-index: 2020;
}

.top_info_left {
    display: block;
    margin-top:2px;

    float: left;
    z-index: 2020;
}

.top_info_right {
    float: right;
    height: 50px;
    width: 230px;
    padding: 0 0 0 8px;
    border-left: 1px solid #eee;
}

.browse_category  {
    width: 230px;
    color: #FFF;
    background: inherit;
}
/* Menu Bar */
.bar { 

    clear: both;
    font-size: 1em;
    height: 40px; 
    color: #FFF;

}

.logo {
    position: absolute;
    top: 0px;
    left: 10px;
}



.horizontal_orange_line{
    height: 1px;
    padding-top: 1px;
    background: #FF9148 url(images/menubg.gif) repeat-x;
}

.bar li { 
    display: block;
    width: 60px;
    padding-right: 12px;
    padding-left: 12px;
    vertical-align: middle;
    color: #FFEADC;
    border-left: 1px solid #eee;
    float: left; 
}

.bar ul li input, .bar ul li img {
    display: block;
    clear:both;
    margin-left: auto;
    margin-right: auto;
}

.bar li.active { 
    background: #E0691A url(images/bar.gif) repeat-x; 
    color: #E0692A;
    font-weight: bold; 

}

.bar li:first-child {
    width: 150px;
    color: #808080;
    font-size: medium;
    border-left: none;
    text-align: right;
}

.bar li:first-child div:first-child {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: xx-large;
}

.bar li a { 
    font-weight: bold;
    color: #E0692A; 
    background: inherit;
    text-decoration: none;
} 

.bread_crumb {	
    padding-left:3px;
    font-size:9px;
    color:black;
    font:bold;
    float: left;
    width: 100%;
    display: block;
}

.bread_crumb a, .bread_crumb a:visited {
    text-decoration:none;
    color:#0000FF;
}

.bread_crumb a:hover{
    color: #b22222;
}

.views_menu{
    padding-bottom: 0px;
    float: right;
    margin-right:10px;
}

/* search form */
.search_field { 
    background: #fff url(images/searchbg.gif) no-repeat right; 
    color: #808080;
    clear: both;
    font-weight: bold;
    padding: 7px 12px 10px 10px;
    margin: 5px 0;
}
input.search { 
    width: 292px; 
    border: 0;
    background: #FFF url(images/input.gif) no-repeat;
    padding: 4px; 
    color: #E0691A;
    font-weight: bold;
    margin: 0 0 0 3px;
}
input.body {
    border: 1px solid #999999;
    background: #FFF;
    padding: 1px;
    font-weight: normal;
    margin: 0 0 0 3px;
    height: 20px;
}
input.submit {
    background: #E0691A url(images/submit2.gif);
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 80px;
    margin: 0 5px 1px 0;
    color: #FFF;
    font: bold 1em Arial, Sans-Serif;
}
.grey { color: #808080; background: inherit; font-weight: normal; }
.search_form { float: right; }

.vertical_line
{
    background:url(images/verticalLine.jpg) no-repeat;
    position:relative;
    float:right;
}

/* left side
   --------- */

.left {	
    width: 100%;	  
    min-width: 600px;
    vertical-align: top;
    padding: 5px;
    border-right:1px;
    border-color: red;
}

.left_menu
{
    width: 100px;
    border-collapse: collapse;
    vertical-align: top;
    padding-top: 0 5px 0 5px;
    font: bold 1em "Trebuchet MS", Arial, Sans-Serif;
    color: #E0692A;

}

.left_menu td
{
    padding-bottom:20px;
    border-right: 1px solid #DDD;
}

.middle_content
{
    vertical-align: top;
    font: normal 1em "Trebuchet MS", Arial, Sans-Serif;
    height: 400px;
    padding: 2px;
    min-width: 400px;

}

.left h2 {
    clear: both;
    background: #E8E8E8 url(images/h2bg.gif) no-repeat center left;
    color: #444;
    padding: 3px 0 4px 43px;
    font: bold 1.4em "Trebuchet MS", Arial, Sans-Serif;
    margin: 0 0 10px 0;
}
.left_side {
    float: left;
    width: 160px;
    padding: 0 0 0 10px;
    margin: 10px 0 0 38px;
}

.left_side a, .right_side a, .middle_side a { color: #414141; background: #FFF; }

.middle_side {
    float: left;
    width: 160px;
    background: #FFF url(images/dotted.gif) repeat-y;
    color: #414141;
    padding: 0 0 0 30px;
    margin: 10px 0;
}

.right_side {
    float: right;
    width: 200px;
    background: #FFF url(images/dotted.gif) repeat-y;
    color: #414141;
    padding: 0 0 0 10px;
    margin: 10px 0;
}
.left_box { 
    margin: 0 0 10px 0; 
    color: #000; 
    background: #FFF; 
    padding: 3px 0; 
}


/* right side
   ---------- */

.right {
    float: right;
    width: 100%;
    margin: 4px 0 2px 0;
    vertical-align: top;
}
.right h3 {
    background: #F3DCB0;
    border: 1px solid #BBBBBB;
    color: #555;
    padding: 8px 0 8px 5px;
    font: bold 1em Tahoma, Arial, Sans-Serif;
    margin: 0 0 3px 0;
}

.right table.title {
    width:100%;
    height:25px;
    margin: 0 0 1px 0;
    padding: 0;
}

.right table.title td.icon {
    background: #F3DCB0;
    border: 1px solid #BBBBBB;
    color: #555;
    width: 25px;
    font: bold 1em Tahoma, Arial, Sans-Serif;
    margin: 0;
}

.right table.title td.words {
    background: #F3DCB0;
    border: 1px solid #BBBBBB;
    color: #555;
}

.right table.title td.words span {
    font: bold 1em Tahoma, Arial, Sans-Serif;
}

.right_articles {
    background: #F3EFE7;
    color: #414141;
    padding: 2px 8px 2px 8px;	
    margin: 0 0 2px 0;
    font: normal 1em Tahoma, Arial, Sans-Serif;

}

.right_articles div {
    overflow: auto; 
    max-height:140px; 
    width:100%; 
    min-height: 80px;
}

.notice {
    background: #eee;
    color: #808080;
    padding: 12px 8px;	
    margin: 0 0 3px 0;
}
.image {
    float: left;
    margin: 0 9px 3px 0;
}

.rightCalendarHeader table, td {
    padding:0;
    margin:0;
}

.rightCalendar{
    padding:0;
    margin:0;
    table-layout: fixed;
}

/* footer
   ------ */

.footer { 
    clear: both;
    text-align: left;
    padding: 10px 0;
    border-top: 1px solid #ccc;
    line-height: 2em;


}
.footer a { color: #808080; background: #fff; }

.seperator {
    background:url(images/dotted.gif) repeat-x center;

}

.seperator_dash {
    background:url(images/bg-dotted.gif) repeat-x center;

}

.panel {
    padding:10px;
}

.reservation{
    border: 1px; 
    z-index: 9;
    width: 300px; 
    height: 300px;
    position: absolute;
    left: 100px; 
    top: 100px;
}

#rack 
{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#rateRack 
{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#rateRack td {
    padding:0px 0px 0px 0px;
    cursor: pointer;
}

.chevron {
    font-weight: bold;
    font-size: 12pt;
    height: 35px;
    width: 35px;
    line-height: 35px;
}

.chevron span {
    /* Abs positioning makes it not take up vert space */
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    /* Border is the new background */    
}

.rotate {
    /* Rotate from top left corner (not default) */
    transform-origin: 16px 18px;
    transform: rotate(90deg);
}

.rackHeaderCell {
    border:1px solid #909090;
}

/* Month header 1 */
.rackHeaderCell1 {
    background: #ffebd5;
    overflow:  hidden;
    font-weight: bold;
    padding-left: 0px;
}

/* Month header 2*/
.rackHeaderCell2{
    background: #d3ffd5;
    overflow:  hidden;
    font-weight: bold;
    padding-left: 0px;
}

/* Month header 1 */
.rateHeaderCell1 {
    background: #ffebd5;
    overflow:  hidden;
    font-weight: bold;
    padding-left: 0px;
}

/* Month header 2*/
.rateHeaderCell2{
    background: #d3ffd5;
    overflow:  hidden;
    font-weight: bold;
    padding-left: 5px;
}

.rackCell {
    border:1px dotted #909090;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.rackCellSolidBorder {
    border-top:1px solid #909090;
    border-bottom:1px solid #909090;
    border-left:1px double #909090;
    border-right:1px solid #909090;
}

.rackCellSolidLeftBorder{
    border:1px dotted #909090;
    border-left:1px solid #909090;
}

.rackCellAvailability {
    border-top: 1px solid #909090;
    border-bottom: 1px solid #909090;
    border-left:1px dotted #909090;
    border-right:1px dotted #909090;
}

.rateHeaderCell {
    border:1px solid #909090;
}

.rateCell {
    border:1px solid #909090;
}


.redText {
    color: red !important;
}

.rateCellSolidBorder {
    border-top:1px solid #909090;
    border-bottom:1px solid #909090;
    border-left:1px solid #909090;
    border-right:1px solid #909090;
}

.rateCellSolidLeftBorder{
    border:1px dotted #909090;
    border-left:1px dotted #909090;
}

.dayCheckBoxList span{
    padding: 10px;
}

.inlineRackText {
    width: 100%;
    text-align: center;
    font-size: 10pt;
    box-sizing: border-box;
}

.availGrid {
    background-color: lightgrey;
}

.availGridWeekend {
    background-color: #bbb;
}

.tableSuccess {
    background-color: #5cb85c !important;
    color: white !important;
    font-weight: bold !important;
}

.tableStopSell {
    background-color: orange;
}

.pebble {
    color: white;
    background-color: lightseagreen;
    height: 20px;
    line-height: 20px;
    width: 100%;
}

.pebble2 {
    color: white;
    background-color: lightskyblue;
    height: 20px;
    line-height: 20px;
    width: 100%;
}

.tableError {
    background-color: #d9534f !important;
    color: white !important;
}

.tableEditing {
    border: 2px solid blue !important;
}

.borderless {
    outline: none !important;
    border-color: transparent;
    background-color: transparent;
    border: 0;
}

.weekendGrid {
    background-color: lightyellow;
    border:1px dotted #909090;
}

.imageContainer
{
    position: relative;
    overflow: hidden;
    z-index: 5;
    vertical-align: middle;
    top: 0px;
}

.imageText{
    z-index: 15;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.roomText{
    z-index: 15;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: black;
    font-weight:bold;
}

.imageButton{
    z-index: 30;
    position: relative;    
    left: 0px;
    top: 0px;
    width: 100%;
    margin: 0px;

}

.rackButton{
    border: 0px white hidden;
    background: white;
    width: 100%;
    font-size: 1.0em;
}

.rateButton{
    border: 0px transparent hidden;
    background: transparent;
    width: 100%;
    font-size: 1.2em;
}

.rackButtonClipped{
    border: 1px white;
    border-left: 5px white ridge;
    background: white;
    width: 100%;
    font-size: 1.0em;
}

.rackButtonSelected {
    border: 1px solid red;
    background: lightyellow;
    width:100%;
}

.calendar{
    z-index: 3500;
}

.rackTabView {
    position: relative;
    display: block;
    border-bottom: 1px #999999 solid;
    width: 100%;
    z-index: 20;
}

.rackTabViewButton {
    position: relative;
    border: 1px #999999 solid;
    border-bottom: 1px #FFFFFF solid;
    bottom: -1px;
    z-index: 200;
    margin-left: 3px;
    background: #FFFFFF;
    display: inline;
    min-width: 120px;
    height: 25px;
    color: #E0692A;
    font-weight: bold;
}

.rackTabViewButtonNormal {

    position: relative;
    border: 0;
    border-bottom: 0;
    margin-left: 3px;
    background: #FFFFFF;
    display: inline;
    min-width: 120px;
    height: 25px;
    color: #E0692A;
    font-weight: bold;
}

.rightDotted {
    border-right: 1px #909090 dotted;
}

.glGrid {
    display: block;
    overflow-y: auto;
    height: 300px;
    width: 100%;
}

/* Data Grid colors */
.gridHeader{
    background-color: #F3DCB0;

}

.gridFooter {

}

.gridFooter td {
    padding: 2px;
}

.gridHeader th,td {
    padding: 2px;
}
/* Style */
.gridStyle{
    background-color: #F3EFE7;
}

.gridStyle td {
    padding: 2px; 
}
/* Alternating Style*/
.gridAltStyle{
    background-color: #F3E5CB;
}
.gridAltStyle td {
    padding: 2px;
}

/*88888888888888 Highlightable table 888888888888888888888888888 */
.gridStyleHighLight{
    background-color: #F3EFE7;
    cursor: pointer;
}

.gridAltStyleHighLight{
    background-color: #F3E5CB;
    cursor: pointer;
}

.gridStyleHighLight:hover{
    background-color: lightblue;
    cursor: pointer;
}

.gridAltStyleHighLight:hover{
    background-color: lightblue;
    cursor: pointer;
}

/* wizard colors */

.wizardBody{
    background: none;
    width: 100%;
}

.wizardSideBar{
    width: 120px;
    padding: 10px;
}

.wizardSideBar tr{
    height: 30px;
}

.wizardStep{
    background: #FFF;
}

.wizardHeader{
    background: lightsteelblue;
    height: 30px;
    text-align: center;
    color: white;
}

.wizardNav{
    background: none;
    height: 30px;
    line-height: 30px;
}    

.emptyTemplate{
    width: 100%;
    display: block;
    background:  #F3DCB0;
    margin: auto;
    color: #444;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

.emptyTemplateRight{
    width: 100%;
    display: block;

    margin: auto;
    color: red;
    font-size: 1em;
    font-weight: normal;
    text-align: center;
}

.hideButton{
    display: none;
}

.todayCalendarDay {
    border: 1px solid red;
}

.example-target {
    padding: 4px 10px 4px 35px;
    cursor: help;
    background: #0F67A1 url(help_icon.gif) no-repeat 3px center;
    color: white;
}

.frontDeskSubMenu {
    display: inline;
    padding-left:20px;
}

.frontDeskSubMenu li {
    display: inline;
    padding-right:8px;
    font-weight: bold;
}

/* Reports */
.reportHeader {
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.reportBody {
    padding: 10px 20px;

}

.reportFooter {
    padding: 10px 20px;
}

/* ------------------------Transaction icons ---------------- */
.transReverseOriginal {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/refresh20.png) ;
}

.transReversePartner {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/refresh20.png) ;
}

.transAdjustOriginal {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/arrow-up20.png) ;
}

.transAdjustPartner {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/arrow-down20.png) ;
}

.transMoveDestination {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/arrow-right2-20.png) ;
}

.transMoveOriginal {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/arrow-left2-20.png) ;
}

.transMovePartner {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/arrow-left2-20.png) ;
}

/*------------------------ Reservation Status ICONS ------------------------*/
.waitlist, .reserved, .checkedin, .checkedout, .noshow {
    background-position: center;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.waitlist {
    background-image: url(images/arrow-down2-20.png);
}

.reserved {
    background-image: url(images/20x20/calendar20.png) ;
}

.checkedin {
    background-image: url(images/20x20/checkin20.png) ;
}

.checkedout {
    background-image: url(images/20x20/checkout20.png) ;
}

.noshow {
    background-image: url(images/20x20/noshow.png);
}

/*----------------- AutoCOmplete styles -------------------------*/
.acomplete { 
    position: relative; 
    z-index: 5; 
    background-color: #EDF5FF; 
    border: 1px solid #243356;
    max-height: 200px;
    width: 400px !important;
    overflow-y: auto;
    cursor: pointer;
}

.acomplete ul, .acomplete li { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    color: #333; 
}
.acomplete li { 
    padding: 4px; 
    border-top: 1px solid #ccc; 
    text-align: left;
}
.acomplete .selected { 
    background-color: #ffc; 
}

/*-------------------------- TDATEPICKER ------------------------------*/

.TDatePicker_default {
    z-index: 2;
}

.dashboard  span{
    padding-left: 20px;
    padding-right: 8px;
    color: green;
    font-size: 1.2em;
    font-weight: bold;
    text-align: right;
}