body 
{
    background-image:url("../Images/MasterBG.JPG");
    background-repeat:repeat-y;
}

#date_time
{
    font-family:Tahoma;
    font-size:20px;
    cursor:pointer;
    margin:0px 0px 0px 0px;
}

#MainHeaderLogoDiv
{
    height:70px;
    width:100.8%;
    margin-right:0px;
    margin-top:-20px;
    margin-left:-10px;
    color: #222222;
    border-bottom:3px solid #AAA;
    background-color: #EFEFEF;
    background-image: -moz-linear-gradient(top, #B5B5B5, #EFEFEF);
    background-image: -ms-linear-gradient(top, #B5B5B5, #EFEFEF);
    background-image: -o-linear-gradient(top, #B5B5B5, #EFEFEF);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#B5B5B5), to(#EFEFEF));
    background-image: -webkit-linear-gradient(top, #B5B5B5, #EFEFEF);
    background-image: linear-gradient(top, #B5B5B5, #EFEFEF);
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    font-family: Tahoma;
}

.modal 
{
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../Images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

body.loading
{
    overflow: hidden;   
}

body.loading .modal
{
    display: block;
}

img.MenuIconsImg
{
    height:30px;
    cursor:pointer;
}

#MachineSelect
{
    margin: 0px auto;
    width:150px;
    border-radius:5px;
}

div.CalendarDiv
{
    float:left;
}

#orderHeader
{
    height:auto;
    margin: 10px auto;
    width: 60%;
    font-family:Tahoma;
    font-size:20px;
}

#OrderFooter
{
    height:auto;
    width: 100%;
    font-family:Tahoma;
    font-size:20px;
}

#MainContentDiv
{
    margin: 30px auto;
    width: 60%;
    height:auto;
    float:left;
    text-align:center;
}

#jqxWidget
{
    font-size: 13px;
    font-family: Tahoma;
    float: none;
    background-color: #FFF;
    text-align:center;
    height:450px; 
    margin-top:5px;  
    padding:5px 0px 0px 5px;
    border-top:2px solid #D2D2D2;
    border-left:2px solid #D2D2D2;
    border-bottom:4px solid #8E8E8E;
    border-right:4px solid #8E8E8E;
}

#LeftMenuDiv
{
    margin:30px auto;
    width:20%;
    height:200px;
    float:left;
    text-align:center;
}

#ButtonsRightDiv
{
    width: 15%;
    float:right;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    z-index:-100;
    
     color: #222222;
  border-color: #AAAAAA;
  border-left:3px solid #AAAAAA;
  background-color: #EFEFEF;
  font-family: Tahoma;
}

#LoguotButtonDiv
{
    position:absolute;
    bottom:0px;
    right:0px;
}

#HeadLineTextDiv
{
    font-family:Tahoma;
    font-size:xx-large;
    font-weight:bold;
    text-align:center;
    margin:0px auto;
}

#FaultErrorHeader
{
    font-family:Tahoma;
    font-size:large;
    font-weight:bold;
}

img.ButtonMainPage
{
    cursor:pointer;
    margin:  50px 0px 0px 0px;
    width:90%;
}

input.SettingWorkOnPlan
{
    width:100px;
    height:40px;
    float:right;
    margin-top:5px;
    margin-right:15px;
    border-radius:5px;
    border-color:#C0C0C0;
}

input.BackToOrders
{
    width:100px;
    height:24px;
    float:left;
    margin-top:5px;
    border-radius:5px;
    border-color:#C0C0C0;
}
/**edit button style**/
section {
	margin: 0px auto;
	width: 75px;
	height: 95px;
	position: relative;
	text-align: center;
}

:active, :focus {
	outline: 0;
}

/** Font-Face **/
@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'), 
  	   url("fonts/fontawesome-webfont.woff") format('woff'), 
  	   url("fonts/fontawesome-webfont.ttf") format('truetype'), 
  	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}

/** Styling the Edit Button **/
a.ActionButton 
{
    margin:10px auto 25px;
	font-family: Tahoma;
	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
	font-size: 15pt;
	display: block;
	position: relative;
	text-decoration: none;
    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
    			0px 7px 10px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
	width: 150px;
	height: 40px;
	border: 0;
	color: #EFEFEF;/* rgb(37,37,37);*/
	border-radius: 35px;
	text-align: center;
	line-height: 35px;
	background-color: rgb(83,87,93);

	transition: color 350ms ease, text-shadow 350ms;
		-o-transition: color 350ms ease, text-shadow 350ms;
		-moz-transition: color 350ms ease, text-shadow 350ms;
		-webkit-transition: color 350ms ease, text-shadow 350ms;
}

a.ActionButton:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
}
/*edit button when active*/
a.on {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17), 
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
 	color: #FF0000;
  	text-shadow: 0px 0px 3px rgb(255,0,0);
}

a.ActionButton:active:before, a.on:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Styling the Indicator light */
a.ActionButton + span {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgb(226,0,0);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(226,0,0,0.5);
 	border-radius: 4px;
 	clear: both;
 	position: absolute;
 	bottom: 0;
 	left: 42%;
 	transition: background-color 350ms, box-shadow 700ms;
	-o-transition: background-color 350ms, box-shadow 700ms;
	-moz-transition: background-color 350ms, box-shadow 700ms;
	-webkit-transition: background-color 350ms, box-shadow 700ms;
}

a.on + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

a.EditButtonPressed
{
 position: relative;
    color: rgba(0,0,0,1);
    text-decoration: none;
    background-image: -webkit-gradient(linear, center top, center bottom, from(#B20000), to(#FF0000));
    font-family:'tahoma';
    font-weight: bold;
    font-size: small;
    display: block;
    padding: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px rgba(130,130,130,1), 0px 9px 25px rgba(0,0,0,.7);
    margin: 0px auto;
 width: 100px;
 text-align: center;
 
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 -ms-transition: all .1s ease;
 -o-transition: all .1s ease;
 transition: all .1s ease;
}

a.EditButtonPressed:active 
{
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(60,60,60,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}

/* Button */

.button {
    background-color: #222;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image:         linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    border: 1px solid #111;
    color: #c6c6c6;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/10px sans-serif;
    margin: 0px;
    padding: 10px 15px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
    vertical-align: top;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
       -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
            box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:hover,
.button:focus {
    background-color: #242424;
    color: #f6f6f6;
    -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
       -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
            box-shadow: 0 1px 4px hsla(0,0%,0%,.4),
                        inset 0 1px 0 hsla(0,0%,100%,.2);
}
.button:after {
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-image:    -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-image:     -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-image:      -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-image:         linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0));
    background-position: 50% 0%;
    background-size: 200% 200%;
    content: '';
    display: none;
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.button:hover:after,
.button:focus:after {
    display: block;
}
.button:before {
    background: #363636;
    bottom: -8px;
    content: '';
    left: -8px;
    position: absolute;
    right: -8px;
    top: -8px;
    z-index: -1;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
                        inset 0 1px 1px hsla(0,0%,0%,.4),
                        inset 0 0 5px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
                        inset 0 1px 1px hsla(0,0%,0%,.4),
                        inset 0 0 5px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
                        inset 0 1px 1px hsla(0,0%,0%,.4),
                        inset 0 0 5px hsla(0,0%,0%,.2);
}
.button:active {
    background-color: #202020;
    color: #b6b6b6;
    padding: 11px 15px 9px;
    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
                        inset 0 1px 4px hsla(0,0%,0%,.8);
       -moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
                        inset 0 1px 4px hsla(0,0%,0%,.8);
            box-shadow: 0 1px 0 hsla(0,0%,100%,.1),
                        inset 0 1px 4px hsla(0,0%,0%,.8);
}
.button:active:after {
    display: block;
    left: 1px;
    opacity: .5;
    right: 1px;
    top: 31px;
}




/*---Right Menu Buttons---*/

/* Let's change the box-model */
* {
	box-sizing: border-box;
}

/* Now, the wrapper */
.wrapper {
	width: 70%;
	height: 50px;
	margin: 50px auto;
	position: relative;
}

/* We hide the input and place it on top of everything else */
.wrapper input {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity :0;
	cursor: pointer;
	z-index: 100;
}

/* Let's deal with the label now, which is our graphical element */
.wrapper label {
	display: block;
	/*font-weight:bolder;*/
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-out;
	border-radius: 10px;
	position: relative;
	background: #b25244;
  background: linear-gradient(#f7f2f6, #b2ac9e);
	box-shadow:
		inset 0 2px 3px rgba(255,255,255,0.13),
    0 5px 8px rgba(0,0,0,0.3),
    0 10px 10px 4px rgba(0,0,0,0.3);
	/* Now let's give it some font styles, for the incoming icon */
	font-size: 20px;
	line-height: 50px;
	font-family:Tahoma;
	color: #666666;
	text-shadow: 0 2px 1px rgba(0,0,0,0.25);
	text-align: center;
	z-index: -1; /* We will need this later */
}

/* Now pseudo-elements, just to make the whole button nicer */
.wrapper label:after {
	content: "";
	position: absolute;
	top: -20px;
	right: -20px;
	bottom: -20px;
	left: -20px;
	z-index: -2;
	border-radius: inherit;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.15);
}

/* The second one */
.wrapper label:before {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
	z-index: -1;
	border-radius: inherit;
	box-shadow:
		inset 0 10px 10px rgba(0,0,0,0.13);
	-webkit-filter: blur(1px);
	filter: blur(1px);
	/* The blur filter is a little smooth trick. It makes those kind of shadows smoother. Looks great, doesn't it ? */
}

.wrapper input:checked ~ label {
	box-shadow:
		inset 0 2px 3px rgba(255,255,255,0.13),
    0 5px 8px rgba(0,0,0,0.9),
    0 3px 10px 4px rgba(0,0,0,0.2);
	color: #000000;
	/*font-weight:bolder;*/
}