/* @group Base */
body {
     padding-top: 20px;
     padding-bottom: 20px;
   }
 .bgcolor {
     background-color: none;
   }
 .lightblue {
    background-color: none;
   }
.form-horizontal .control-label {
   width: 70px;
   }
.form-horizontal .controls {
  margin-left: 20px;
    }

td.right {
  text-align: right;
}


.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}
.edit {color: green;}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: normal;
  src: local('Quicksand'), url('fonts/Quicksand/Quicksand-Regular.ttf') format('truetype');
}

 .panel-content {
   padding:15px;
 }

 .ui-icon-znp-menu {
	background-image: url("../img/znp-menu-icon.png");
 }
 .ui-icon-znp-nophone {
	background-image: url("../img/znp-nophone-icon.png");
 }

 .background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

.white_panel {
	border:2px solid #a1a1a1;
	padding:10px 20px;
	background:white;
	width:80%;
	border-radius:25px;
}


.grey_panel {
	border:2px solid #a1a1a1;
	padding:10px 20px;
	background:#dddddd;
	width:80%;
	border-radius:25px;
}

img.navbarIcon {
  display: block;
  margin-left: auto;
  margin-right: auto;

  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;

  height: 50%;
  width: auto;
}
 .navbar-text {font: 2.2em Quicksand; font-size: 200%; text-shadow: none; font-weight: normal; color: white; text-align: left; vertical-align: middle;}

 select {
    font-size:1.2em;
    border-color:#999; /* without this, it won't work */
}


 .znp-standard-text,
 .znp-xlarge-text,
 .znp-large-text,
 .znp-medium-text,
 .znp-small-text,
 .znp-xsmall-text,
 .znp-xxsmall-text,
 .znp-keypad,
 .znp-footer-text,
 .znp-button-text,
 .znp-large-button-text,
 .znp-medium-button-text,
 .znp-small-button-text,
 .znp-success-text,
 .znp-panel-button-text,
 .znp-header-button-text,
 .znp-label-text,
 .county-scroller,
 #customer_county,
 #total_value,
 #phone_no,
 #pin,
 #terminal_label
  {
 	font-family: "Trebuchet MS", Helvetica, sans-serif;
 	text-shadow: none;
 	text-align: center;
 	position: relative;
 }


 .znp-alert-text,
 .znp-info-text
   {
 	font-family: "Trebuchet MS", Helvetica, sans-serif;
 	text-shadow: none;
 	text-align: left;
 	position: relative;
 }


  p, body
   {
 	font-family: "Trebuchet MS", Helvetica, sans-serif;
 	text-shadow: none;
 	text-align: left;
 	position: relative;
 }

 .znp-standard-header  { min-height: 8%; }


 .black 	{ color: black;}
 .white 	{ color: white;}
 .green 	{ color: #719740;}
 .red  		{ color: darkred;}
 .darkgrey  { color: darkgrey;}

 .znp-keypad {width: 90%; height: 90%; font-size: 200%; color: white;}

 .znp-header-navbar { height: 40%; font-size: 200%; color: black;}

 .znp-background
 {
 	background-image: url(../img/leather_background.jpg);
 	vertical-align: middle;
 }


  .znp-xlarge-text {font-size: 210%;}
  .znp-large-text  {font-size: 170%;}
  .znp-medium-text {font-size: 130%;}
  .znp-medium-left-text {font-size: 120%;}
  .znp-small-text  {font-size: 110%;}
  .znp-xsmall-text {font-size: 100%;}
  .znp-xxsmall-text {font-size: 80%;}


  .znp-30-column {width: 30%;}
  .znp-60-column {width: 60%;}
  .znp-10-column {width: 10%;}
  .znp-70-column {width: 70%;}
  .znp-50-column {width: 50%;}
  .znp-20-column {width: 20%;}


  .ui-block-a, .ui-block-b, .ui-block-c
  {
  	padding: 0px;
  	margin: 0 0 0 0;
  	vertical-align: middle;
  	display: inline-block;
  };



 .znp-settings-heading-text {font: 1.0em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none; font-weight: normal; color: white; text-align: justify;}
 .znp-heading-text 			{font: 1.2em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none; font-weight: bold; color: white; text-align: center;}
 .znp-footer-text 			{ font-size: 1.0em; }


 .znp-alert-text 			{font-size: 150%; align: left; color: red;}
 .znp-info-text 				{font-size: 150%; color: white;}
 .znp-success-text 			{font-size: 150%; color: #719740;}

 .phone_num_format 			{width: 90%; height: 90%; font: 1.7em "Trebuchet MS", Helvetica, sans-serif;  text-shadow: none; text-align: center; position: relative; color: white;}
 .trans_num_format 			{width: 90%; height: 90%; font: 2.0em "Trebuchet MS", Helvetica, sans-serif;  text-shadow: none; text-align: center; position: relative; color: white;  }

/* Specific Entry Fields Format */
 #total_value,
 #phone_no
 {
 	width: 90%;
 	height: 100%;
 	font-size: 2.2em;
 	font-weight: bold;
 }

 #pin,
 #terminal_label
 {
 	width: 90%;
 	height: 90%;
 	font-size: 1.6em;
 	font-weight: bold;
 	text-align: left;
 }

 #customer_name,
 #customer_name_lite,
 #customer_street,
 #customer_town,
 #customer_town_lite,
 #customer_county,
 #customer_county_lite,
 #customer_country,
 #tel_area,
 #tel_number,
 #mob_area,
 #mob_number,
 #email,
 #email_lite,
 #password_1, #password_2,
 #customer_pin, #customer_pin2,
 #customer_date_of_birth
 {
 	width: 90%;
 	height: 90%;
 	font-size: 120%;
 	font-weight: bold;
 	text-align: left;
 }



/* The Buttons */
 .znp-xlarge-button-text 	{width: 90%; height: 90%;  font-size: 250%;   color: white;}
 .znp-large-button-text 	{width: 90%; height: 90%;  font-size: 200%;   color: white;}
 .znp-normal-button-text 	{width: 90%; height: 90%;  font-size: 170%;   color: white;}
 .znp-small-button-text  	{width: 90%; height: 90%;  font-size: 130%;   color: white;}

 .znp-small-button-text,
 .znp-header-button-text  	{font-size: 130%; color: white;}
 .znp-panel-button-text 	{font-size: 100%; color: white;}



 .submit_button 			{width: 90%; height: 90%;  font: 1.7em "Trebuchet MS", Helvetica, sans-serif;   font-weight: bold; text-align: center; position: relative; color: white;}
 .confirm_button 			{width: 90%; height: 90%;  font: 1.4em "Trebuchet MS", Helvetica, sans-serif;   font-weight: bold; text-align: center; position: relative; color: white;}


 .znp-data-text 			{font: 1.0em "Trebuchet MS", Helvetica, sans-serif; line-height: 100%; text-shadow:none; color: white;}
 .znp-label-text			{line-height: 100% color: #719740;}


.znp-input 		{font: 2.5em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none; color: black;}
.znp-text 		{font: 1.4em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none;color: white;}
.znp-label {font: 1.4em "Trebuchet MS", Helvetica, sans-serif; font-style: normal; text-shadow: none; color: #719740;}

.znp-input-text 							{font: 1.0em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none; font-weight: bold; color: white; text-align: center;}
.znp-heading-text 							{font: 1.2em "Trebuchet MS", Helvetica, sans-serif; text-shadow: none; font-weight: bold; color: white; text-align: center;}

.alert {border-color: white;};

#rbuttons  {
	border-radius: 50%;
	border : 0.1em solid white;
	background : rgba(0,0,0,0.0);
	height: 4em;
	width: 4em;
}

#tabs {
	font: 0.9em sans-serif;
}

#rbuttons .ui-btn-inner {
	display: block;
	font: 2.0em sans-serif;
}

#rbuttons .ui-btn-text {
	display: block;
	margin-top: -0.2em;
}


.error_box {
    background:#FAD3C4;
    border:1px solid #A75B4E;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    color:#444444;
    display:none;
    font-size:13px;
    margin:0px 0px 15px 0px;
    padding:8px 8px;
    width:800px;
}

.success_box {
    background:#E2F1BB;
    border:1px solid #598800;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    color:#000000;
    display:none;
    font-size:13px;
    margin:0px 0px 15px 0px;
    padding:8px 8px;
    width:800px;
}