﻿/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
    display: block;
    margin-top: 8px;
    text-align: center;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

.tall-button 
{
    height: 100px !important; 
    font-size: 42px !important;
}

.tall-button .ui-btn-text
{
    font-size: 42px !important;
}

/* Custom  Header menu styles */
#header{
    overflow: visible; /* Let menu content overflow outside the header */
}
#header ul { /* Menu Name */
    margin-top: 0.5em;
}
#header .ui-btn-corner-all {
    /* border-radius: 0; /* Make the menu button squarish */
}
#header ul ul { /* Menu Item List */
    position: absolute; /* Position absolutely */
    display: none; /* Hide */
    z-index:500; /* Ensure visibility over other elements on page */
    margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header ul ul li {
    width: 150px; /* Fixed width menu items*/
    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul ul li ul li {
    width: 150px; /* Fixed width menu items*/
    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul ul li a {
    white-space: normal; /* Stop long menu names from truncating */
}
#header ul:hover ul {
    /* display: block; /* Display menu on hover over parent */
}
#menu-left {
    float: left;
    margin-left:0.5em;
}
#menu-right {
    float: right;
    margin-right:0.5em;
}
#menu-left ul {
    margin-left:0.5em;
}
#menu-right ul {
    margin-right: 0.5em;
    right: 0em;
}
#menu-left {
    float: left;
    margin-left:0.5em;
}
#menu-right {
    float: right;
    margin-right:0.5em;
}
#menu-left ul {
    margin-left:0.5em;
}
#menu-right ul {
    margin-right: 0.5em;
    right: 0em;
}
#home .ui-header {
    height: 45px;
}
#home .ui-header h1 {
    font-size: 16pt;
    margin-bottom:0px;
}
#txtSpan {
    position: relative;
    display: inline-block;
    top: -5px; /* Doesnt seem possible to vertically center otherwise */
}
#home .ui-header h2 {
    font-size: 14pt;
    margin-top: 0px;
}
#home .ui-header h3 {
    font-size: 12pt;
    margin-top: 0px;
}

span.menu-button
{
    width:95px;
}

ul.menu 
{
    list-style-type: none;
    padding: 0;
    margin: 0;   
}

/* END Custom  Header menu styles */


/* jQuery mobile styles
-----------------------------------------------------------*/


/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active  {
    text-shadow: none;
}

li.ui-li-static {
    background: #F1F1F1 /*{a-input-text-background-color}*/;
}

li.hold, label.hold
{ 
  padding: 0px;
  background: #FF5353;
  text-align: left;
  color: Black;
}

li.nohold, label.nohold
{ 
  padding: 0px;
  background: #A6CAA9;
  text-align: left;
  color: Black;
 }
  
 td.installed, li.installed
 {
     background: #A6CAA9;
 }
 
  td.cancelled, li.cancelled
 {
     background: Goldenrod;
 }
 
  td.assigned, li.assigned
 {
     background: Silver;
 }
 
 li.inspection
 {
     height: 100px;
 }
 
 .ui-icon-ytw-reports 
 {
    background: url("../Content/Images/ytw-reports.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
  .ui-icon-ytw-detail 
 {
    background: url("../Content/Images/ytw-detail.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
   .ui-icon-ytw-workorder
 {
    background: url("../Content/Images/ytw-workorder.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
   .ui-icon-ytw-receive
 {
    background: url("../Content/Images/ytw-receive.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
  .ui-icon-ytw-ship 
 {
    background: url("../Content/Images/ytw-ship.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
 .ui-icon-ytw-railloading 
 {
    background: url("../Content/Images/ytw-railloading.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
 .ui-icon-ytw-inspect 
 {
    background: url("../Content/Images/ytw-inspect.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
 .ui-icon-ytw-parts
 {
    background: url("../Content/Images/ytw-parts.png") no-repeat rgba(0,0,0,0.4) !important;   
 }
 
 /*button.remove
 {
     background-color: Red;
     color: White;
 }*/
/* My Override of jQuery mobile styles
-----------------------------------------------------------*/
/*
.ui-slider-input {
    display : none !important;
}*/

.ui-page {
	padding-top: 0px;
	padding-bottom: 0px;
}

.ui-body-d {
	padding-top: 0px;
	padding-bottom: 0px;
}

.ui-content {
	padding-top: 0px;
	padding-bottom: 0px;
}

/*.ui-input-text */
input[type=text] {
    background: #FBFBFB /*{a-input-text-background-color}*/;
}	

textarea {
    background: #FBFBFB /*{a-input-text-background-color}*/;
}	

/*.ui-input-text */
input[type=number] {
    background: #FBFBFB /*{a-input-text-background-color}*/;
}	

input[type=password] {
    background: #FBFBFB /*{a-input-text-background-color}*/;
}	

.ui-li-thumb, .ui-li-icon { 
    left: 1px; 
    max-height: 20px; 
    max-width: 20px; 
    position: absolute; 
    top: 0; 
} 

#tblKeypad .ui-btn
{
    height: 65px; 
    font-size: 25px;
}

/* Begin MODAL Wait Style */
	
/* Start by setting display:none to make this hidden. 
   Then we position it in relation to the viewport window 
   with position:fixed. Width, height, top and left speak 
   speak for themselves. Background we set to 80% white with 
   our animation centered, and no-repeating */ 
.modal { 
    display:    none; 
    position:   fixed; 
    z-index:    1000; 
    top:        0; 
    left:       0; 
    height:     100%; 
    width:      100%; 
    background: rgba( 255, 255, 255, .6 )  
                url('../Content/Images/FhHRx.gif')  
                50% 50%  
                no-repeat; 
} 
 
/* When the body has the loading class, we turn 
   the scrollbar off with overflow:hidden */ 
body.loading { 
    overflow: hidden;    
} 
 
/* Anytime the body has the loading class, our 
   modal element will be visible */ 
body.loading .modal { 
    display: block; 
} 

/* End MODAL Wait Style */

div.ui-checkbox {
    height: 40px !important;
}

.ui-btn-up-r {    border: 1px solid #721414;    background: #AB2525;    font-weight: bold;    color: #fff;    text-shadow: 0 -1px 1px #000;    background-image: -moz-linear-gradient(top, #C54E4E, #AB2525);    background-image: -webkit-gradient(linear,left top,left bottom,        color-stop(0, #C54E4E),        color-stop(1, #AB2525));    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#C54E4E', EndColorStr='#AB2525')";}.ui-btn-up-r a.ui-link-inherit {    color: #fff;}.ui-btn-hover-r {    border: 1px solid #6E0000;    background: #B64B4B;    font-weight: bold;    color: #fff;    text-shadow: 0 -1px 1px #000;    background-image: -moz-linear-gradient(top,         #D47272,         #B64B4B);    background-image: -webkit-gradient(linear,left top,left bottom,        color-stop(0, #D47272),        color-stop(1, #B64B4B));    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#D47272', EndColorStr='#B64B4B')";}.ui-btn-hover-r a.ui-link-inherit {    color: #fff;}.ui-btn-down-r {    border: 1px solid #772222;    background: #C54E4E;    font-weight: bold;    color: #fff;    text-shadow: 0 -1px 1px #000;    background-image: -moz-linear-gradient(top, #9E3939, #C54E4E);    background-image: -webkit-gradient(linear,left top,left bottom,        color-stop(0, #9E3939),        color-stop(1, #C54E4E));    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9E3939', EndColorStr='#C54E4E')";}.ui-btn-down-r a.ui-link-inherit {    color: #fff;}.ui-btn-up-r,.ui-btn-hover-r,.ui-btn-down-r {    font-family: Helvetica, Arial, sans-serif;    text-decoration: none;}
