﻿
*
{
	margin: 0px;
	padding: 0px;
	border: none;
}
input[readonly] {
	background-color: #ccc;
}

#payment {

    font-size: 24px;
}

#message {
    background:#f7ca77;

  
}

small, .small {
	font-size: 80%;
	font-weight: normal;
	text-transform:lowercase;
}
.warning {
	background: darkgoldenrod;
}

ul#prodlist li a span#stocks  {
    font-weight: bold;
      color: #888;
}

.stocks {
    color: #888;
}
#orders i {
    font-size: 24px;
    margin: 0 5px;
}



span#overlay_text{
     background: #222; color: #eee; display: none; position: relative; top: -20px; z-index: 3; width:100px;
     margin: 0 auto;



}
tr.Mpesa {
    background: #c4f8c4;
}
tr.Cash {
    background: #f5f5f5;
}
.brand {
    margin:0 auto; 
    bottom: 10%; 
    display: block;
     text-align: center;
      position: absolute; 
      bottom:0;
      width: 50%;
    z-index: -999;
}

.brand img {
      width: 100%;
}
.add.btn.btn-primary {
    color: #fff;
}
body.logon {

  height: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 0;
}

#payment input {
    font-size: 24px;
    width: 100%;
    float: right;
}

#amtdue {
    width: 80%;
    margin: 0px auto;
    text-align: center;
}
      
#holdon, #loadcart {

    position: absolute;
  width: 150px;
  height: 150px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;

  display: none
}  

 #loadcart {

    position: absolute;
  width: 100px;
  height: 100px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -60px;

  display: none
}  
#holdon img , #loadcart img {
    border-radius: 50%;
    width: 100%;
    height: auto;
}
    

 body.logon::after {
    background: url(../Images/eRetailSplash.png) no-repeat;
  content: "";
  opacity: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
}


ul.nav-sidebar   {
    margin: 5px;
    padding: 5px;


}

#ordersbalance {

    color: red;
}
.nav-sidebar li {
    list-style-type: none;
    width: 100%;
    background: #f5f5f5;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
   
}
.nav-sidebar li a:hover {
color: #666;

}

.form-horizontal {
    width: 100%;
}

.nav-sidebar li i {
   font-size: 32px;
   margin: auto;
}

.nav-sidebar li span {
    width: 100%;
   display: block;
 
}
.items {
    background: #eee;
    padding: 10px;
    line-height: 1.2;

    border-radius: 10px;

}
#Process {
    font-size: 14px;
font-weight: 600;

}
.items label, items select, items button {
    font-size: 12px;
}
.total {
    background: beige;
}
input[type="text"]:disabled, select:disabled, input[type="text"]:read-only {
    background: #dddddd;
}

.btn.done.btn-primary {
    background: #67c100;
}


#ordersbalance {
    color: red;
}
#summary {
    text-align: center;
    font-size: large;
    line-height: 1.5em;
  
}
    .items, .cart td {
        font-size: 13px;
        color: #222;
        padding:5px;
    }
body
{
	font-family: Verdana;
	font-size: 12px;
	background-color: #eee;
	padding:0px;
}
ul.dining li {
 list-style-type: none;
  background: #67c100;
float: left;
 width: 80px;
      border-radius: 8px;
 padding: 10px;
 height: 80px;
 line-height: 20px;
 text-align: center;

  box-shadow: 5px 5px 3px #888888;
 margin: 10px;
 display: block;
}

ul.dining li a {
      width: 80px;
 
display:block;
 height: 80px;
    color:#fff;
     font-size: 18px;
     width: 100%;
     border-radius: 8px;
}


#paymentbuttons {
    width: 80%;
    margin: 20px auto;
}

ul.customers li span 
{
    color: #ccc;
    font-size: 70%;
    width: 100%;
    display: block;
}
ul.customers li {
 list-style-type: none;
  background: #666;
float: left;
 width: 15%;
      font-size: 14px;
 padding: 5px;
 height: 40px;

 text-align: center;

 margin: 10px;
 display: block;
}


ul.customers li a {
     
    color:#fff;
     font-size: 16px;
       line-height: 16px;
 
display:block;

}

.orderitemscashier  {
    display: block;
    float: left;
    width: 100%;
  height: 80px;
  font-size:80%;
  overflow-y: scroll;
}

.orderitems  {
    display: block;
    float: left;
    width: 100%;
  height: 40px;
  font-size:80%;
  overflow-y: scroll;
}
ul.orders li {
 list-style-type: none;
  background:#f5f5f5;
float: left;
 width: 23%;
 
 padding: 5px;
 height: 180px;
 line-height: 16px;
 text-align: left;
 border: 1px solid #ccc;
 border-radius: 5px;
 margin: 5px;
 display: block;

}


ul.orders li a {
     
    color:  #222;

    font-size: 12px;

}
#clear {
    padding: 5px;
    margin: 5px;
}
#search {
    margin-top:5px;
}

ul.staff  {
    padding: 20px 0px;
    height: 450px;


}

.noerror {
    background: #5cb85c;
}

ul.staff li {
 list-style-type: none;
  background: #67c100;
float: left;
 width: 120px;
 
 padding: 5px;
 height: 80px;
 text-align: center;

 border-radius: 20px;
 margin: 5px;
 display: block;
box-shadow: 5px 5px 3px #888888;
opacity: 0.95;
}


ul.staff li a {
     
    color: #fff;
     display: block;

     font-size: 18px;
        width: 100%;
 padding-top: 5px;
 
display:block;
 height: 100%;


}





.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 47px;
    line-height: 46px;
    float: left;
    margin-right: 10px;
    background-color: #67c100;
    border-top: 1px solid #d4d4d1;
    border-right: 1px solid #d4d4d1;
    border-left: 1px solid #d4d4d1;
    list-style-type: none;
}

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
}
.tabs-menu li button,.tabs-menu li input,   .tabs-menu li input, .tabs-menu li select {
    line-height: 14px;
    padding: 8px;

}

.tabs-menu li a {
  padding: 20px;
color: #fff;
text-decoration: none;
font-size: 24px;
}

.tabs-menu .current a {
    color: #2e7da3;
}

.tab {
    border: 1px solid #d4d4d1;
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: 100%;
    height: 100%
}

.tab-content {
    width: 100%;
    padding: 5px;
    display: none;
        height: 100%
}

#tables, #orders, #sales { 

 
 overflow-y : auto;
 overflow-x: hidden;
height: 500px;
}

.logo img {
    height: 30px;

    padding: 5px;
    background: #eee;

}
#container
{
	float: left;
}

#header a {
	color: #eee;
	
	
}
.addtocart  {
  margin: 10px; 
  }

.addtocart img {
border-style: none;
width: 100px;
height: 80px;
border-radius: 10%;
box-shadow: 1px 1px 2px #222;
display: block;
background: #ccc;
text-align: center;
margin: 0 auto;
}




.error  {


    color: red;
}
table.inner  {
        border-collapse: collapse;
    background-color: transparent;border: none;

}
table.inner  tbody tr:nth-of-type(2n+1) {
    background-color:transparent;

}

table.inner td, table.inner tr {
border: none;

}

.inner, td.inner  {
    font-size: 90%;

}

th, td {

    padding: 5px;
}

table.inner td ,table.inner th, table.inner tr {

    padding: 0px;
        border:none;
    font-size: 90%;
}
#header
{
	float: left;
	width: 100%;
	border-bottom: 1px dotted #ccc;

	background: #222;
}

#header h1
{
	font-size: 16px;
	float: left;

	padding: 10px 0px 5px 0px;
}


#UserName, #Password, #PIN {
    font-size: 24px;
}

ul li a
{
	font-size: 12px;

}
.corporate, .corporate select, .corporate input {
    font-size:11px;
    padding:2px;
}
.items label, items select, items button {
    font-size: 12px;
}

h3#product {
    font-size: 1.5em;
    margin: 10px 0;
}
#ibl h3 {
      font-size: 1.5em;
}

#main, .main
{
	
padding:10px;
float: left;
width: 100%;

}

ul
{
	list-style-type: square;
	margin-left: 0px;
	font-size: 14px;
}





.product {
	height: 420px;
	overflow-y:scroll;
	background: beige;
	display:block;


}
.voided {
    background: #ccc;
}

.prodimage  {
	
    margin: 10px auto;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
    background: #eee;
    height: 300px;



   

}

.prodimage img {


   height: 100%;



}


#cart{
	
	height:360px;
	width:100%;

}

.items{
	
        overflow-x:hidden;
	        overflow-y:auto;
}

.easyPaginateNav {
    clear: both;

margin-top: 35px;
}


.easyPaginateNav  a, .easyPaginateNav a:link {
	display: block;

	background: #333;
	border-radius: 50%;
	margin: 5px;
	width: 30px; height: 30px;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
    font-weight: bold;
    font-family:Georgia;
	text-decoration: none;
	
	
	
	
}

table.payment {
    vertical-align: middle;
    background: #ccc;

}
table.payment input {

    margin: 5px;
    font-size: 16px;
    color:#000;
    width: 95%;
    
}


#payment   {

    width:80%;
    margin:20px auto;



}

.form {
	background: #eee;
	padding: 10px;
	width: 100%;
}

#money, .money {

	font-size: 120%;
    font-weight: 700;
	color: #67c100;
	
}

#payment h1  {

  background: #000;
  color: lime;


}
ul#cartbutton  {

    margin: 0;
    padding:0;
}


ul#cartbutton li a {
    color:#fff;
   font-size: 1.2em;
   display : block;
   text-decoration:none;
   height: 100%;
   width: 100%;

    
   


}


ul#cartbutton li  {
text-align: center;
display: block;
float: left;
padding: 1%;
margin: 1% 1%;
list-style-type: none;
border-radius: 5px;
width: 30%;
}

.grey {

  background:#666;
}

.lime {

  background:lime;
}


.green {

  background:#666;
}

.orange {
      background:#67c100

}


.silver {

  background:#ccc;
}




.easyPaginateNav  a.current, #categories a.hover, #categories a.current, .easyPaginateNav a:hover {
    background: #67c100;
}

ul#prodlist
{
	list-style: none;
	margin: 0px;
	padding:0px;
    width: 100%;
    height: 384px;

	
float:left; 


}

ul#prodlist li {
	height: 120px;
	width: 21%;
	float: left;
	margin:0 8px;
	text-align: center;

}

ul#submenu
{
	list-style: none;
	margin: 20px 0;
	padding:0px;
	
float:right; 


}

ul#submenu li {

	float: left;
	margin-right: 30px;
	text-align: center;

}


ul#submenu li a {
    background: #67c100;
    color: #fff;
	padding: 10px;
    

}

ul#submenu li a:hover {

    background:#003e3e;
}
ul#prodlist li a, ul#prodlist li .button
{
	font-size: 12px;
font-weight: normal;
line-height: 1em;
width: 100%;
word-wrap: break-word;
}

.form-group {
    margin-top: 0.5rem;
      margin-bottom: 0.5rem;
}
ul#prodlist li a span
{
	color: #666;
	font-size: 12px;
}

ul#prodlist li a span#overlay_text {
    color: #67c100;
    font-size: 16px;
    line-height: 18px;
}
a.addtocart  {
	color: #666;
	font-size: 12px;
}

#cart-total {


    color:  #67c100;
  
    width: 100%;
}

#change  {
text-align: center; color: red; padding: 5px;
font-size: 1.6em;
text-shadow: 1px 1px 1px #fff;
margin: 0 auto;

}

.cart-total {
background: #000;
color: #67c100;
font-size: 1.5em;
text-align: center;
border-radius: 10px;
font-weight: 600;
}

#cart
{
	float: right;
}

#update-message
{
	color: #F6855E;
	font-weight: bold;
}

button 
 {
    width: 100%
}


button a
{
	color: #fff !important;
}

#footer a {
	color: #67c100;
font-weight: bold;

	
	
}
#footer
{
	clear: both;
	padding: 4px  10px;
	text-align: left;
	border-top: 1px dotted #8A8575;
	border-bottom: 1px dotted #8A8575;
	font-family:Verdana;
	font-size:80%;
}



#primary_nav_wrap a {
	color: #fff;
	
	
}

.cuser a{
    color: #67c100;
}
#primary_nav_wrap
{
   margin-left:  30px;
   float: left;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;

	text-decoration:none;
	font-weight:300;
	font-size:16px;
	line-height:32px;
	padding:0 15px;
	z-index:99999;

}


#primary_nav_wrap ul a:hover {
	color: #918151;
	
	
	
	
}
#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul ul li a  {	color:#918151;

}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover, #primary_nav_wrap ul li:hover a
{
	background:#eee;
    color:#222;
}

    #primary_nav_wrap ul ul li:hover a {
        background: #ccc;

    }

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0;
    z-index: 9999;
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}
/******************** Top Navigation ************************/



ul#navlist
{
	float: right;
	margin: 0px;
	padding:0px;
}
div.genre h3 {
	font-size:16px;
	color: orange;
	text-align:center;
	width: 100%;
	
}
ul#navlist li
{
	display: inline;
		margin: 0px;
	padding:0px;
}

ul#navlist li a
{
	border-left: 1px dotted #8A8575;
padding: 5px 10px;

color: #fff;
text-decoration: none;
float: left;

}

ul#navlist li:first-child a
{
	border: none;
}

ul#navlist li a:hover
{
	color: #ccc;
}

/********************* End top navigation ***************************/

p
{
	margin-bottom: 2px;
	margin-top: 2px;
    padding:0px;
}

h2
{
	color: #5e5b54;
}

h2, h3
{
	margin-bottom: 10px;
	font-size: 16px;
	
	font-weight: bold;
}

h3
{
	color: #9B9993;
}

#header h1 a, h3 em
{
	color: #5E5B54;
}

a, a:link, a:visited, a:focus, a:hover 
{

	text-decoration: none;

}





/***************************** sidebar navigation ****************************/

#categories
{
	font-family: Verdana;
	list-style-type: none;


	margin: 0;
	float: left;
}

#categories li {
	float: left;
	margin: 5px;
	width :15%;
	display: block;


font-size: 12px;

	
	
}

#categories li a  {
	
background-color: #666;
	padding:5px;
	
}
#categories a:active {
	background: #67c100
	
}

#categories a:link, #categories a:visited
{
	color: #fff;
	text-decoration: none;
	font-size: 0.8em;
}

#categories a:hover
{
	background: #67c100;

}


a.category {
      display: block;
    text-align: center;
}
.user {


    text-transform: uppercase;
}
div#proddetails p
{
	margin-bottom: 5px;
	color: #5e5b54;
	font-weight: bold;
}

	p em {
    color: #67c100;
    font-style: normal;
    font-size: 90%;
    letter-spacing: -1px;
}


/* Form styles */
legend
{
	padding: 10px;
	font-weight: bold;
}

fieldset
{
	border: #9b9993 1px solid;
	padding: 0 10px;
	margin-bottom: 10px;
	clear: left;
}
.alert, .success , .bg-success{
	display: none;
	
}

 #orders span {
color: #fff;
display: block;
float: right;padding: 2px;
border-radius: 5px;
font-size: 80%;
width: 50px;
text-align: center;
 }

 #orders span.error {

background: red;
}

 #orders span.success {
background: #67c100;

}
div.editor-field
{
	margin-bottom: 10px;
}

input[type=text], input[type=password], select
{

}

.form-group input {
	width: 100%;
}

/* Styles for validation helpers */
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Tables */
table
{
	
	border-collapse: collapse;
	color: #666666;

	width: 100%;
}

th
{

	color: #000;

	text-align: left;
}

th, td
{

}

table.menuconfig td {
    font-weight:600;
    vertical-align:top;

}

 table.payment tr:hover
{
	background-color:#fff98a;
}

  .menu {
        background: transparent;
        height: 30px;
        padding: 0 10px;
        color: #FFFFFF;
    }

        .menu > li {
            display: inline-block;
            padding: 2px 6px 22px 2px;
            display: inline-block;
            text-align: center;
            height: 32px;
            width: 176px;
            color: #FFFFFF;
        }

            .menu > li a {
                display: inline-block;
                background: url(../Images/R1.PNG);
                padding: 2px 6px 22px 2px;
                display: inline-block;
                text-align: center;
                height: 32px;
                width: 176px;
                color: #222;
            }

                .menu > li a:hover {
                    display: inline-block;
                    background: url(../Images/R2.PNG);
                    padding: 2px 6px 22px 2px;
                    display: inline-block;
                    text-align: center;
                    height: 32px;
                    width: 176px;
                    color: #000000;
                }

    .sub-menu {
        position: absolute;
        display: none;
        background-color: transparent;
        padding: 5px;
    }

        .sub-menu > li {
            display: block;
            cursor: pointer;
            background: url(../Images/R1.PNG);
        }

            .sub-menu > li a:hover {
                display: block;
                cursor: pointer;
                background: url(../Images/R2.PNG);
            }





    .sub-menu2 {
        position: absolute;
        display: none;
        background-color: pink;
    }

        .sub-menu2 > li {
            display: block;
            cursor: pointer;
            background-color: green;
        }

            .sub-menu2 > li a:hover {
                display: block;
                cursor: pointer;
                background-color: pink;
            }


    .sub-menu2 {
        margin-top: -20px;
        margin-left: 178px;
    }

    li:hover .sub-menu {
        display: block;
    }

    li:hover .sub-menu2 {
        display: block;
    }


    #sidebar {
  background-color: #eee;
  border-right: 1px solid #ccc;
  bottom: 0;
  display: block;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: fixed;
  top: 64px;
  width: 264px;
  z-index: 1000;
}
#sidebar > ul.nav {
  padding-bottom: 24px;
}
#sidebar > ul.nav > li {
  margin: 0;
}
#sidebar > ul.nav > li > a {
  color: #20252b;
  font-size: 14px;
  font-weight: 700;
}
#sidebar > ul.nav > li > a:hover,
#sidebar > ul.nav > li > a.active {
  background-color: #e1e1e1;
}
#sidebar > ul.nav > li > a > span {
  margin-left: 6px;
}
#sidebar > ul.nav > li ul.sub-menu {
  list-style: none;
  padding: 0;
}
#sidebar > ul.nav > li ul.sub-menu > li:hover,
#sidebar > ul.nav > li ul.sub-menu > li.active {
  background-color: #e1e1e1;
}
#sidebar > ul.nav > li ul.sub-menu > li > a {
  color: #000;
  display: block;
  padding: 7px 5px 7px 40px;
  text-decoration: none;
}
#sidebar > ul.nav > li.divider {
  background-color: #ccc;
  height: 1px;
  margin: 0;
  overflow: hidden;
}
/* sidebar toggle */
.sidebar-toggle {
  display: none !important;
}
.page-content-toggle {
  margin-left: inherit !important;
}