@charset "utf-8";

body {
 margin: 0;
 padding: 0;
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 14px;
 color: #333;
 background-color: #fff;
}

a {
 color: #0134c5;
 background-color: transparent;
 text-decoration: none;
 font-weight: normal;
 outline-style: none;
}
a:visited {
 color: #0134c5;
 background-color: transparent;
 text-decoration: none;
 outline-style: none;
}
a:hover {
 color: #000;
 text-decoration: none;
 background-color: transparent;
 outline-style: none;
}

#breadcrumb {
 float: left;
 background-color: transparent;
 margin: 10px 0 0 42px;
 padding: 0;
 font-size: 10px;
 color: #666;
}
#breadcrumb_right {
 float: right;
 width: 175px;
 background-color: transparent;
 padding: 8px 8px 3px 0;
 text-align: right;
 font-size: 10px;
 color: #666;
}
#nav {
 background-color: #494949;
 margin: 0;
 padding: 0;
}
#nav2 {
 background: #fff url(images/nav_bg_darker.jpg) repeat-x left top;
 padding: 0 310px 0 0;
 margin: 0;
 text-align: right;
}
#nav_inner {
 background-color: transparent;
 padding: 8px 12px 0 20px;
 margin: 0;
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
}

#nav_inner h3 {
 font-size: 12px;
 color: #fff;
 margin: 0;
 padding: 0;
}

#nav_inner .td_sep {
 background: transparent url(images/nav_separator_darker.jpg) repeat-y left top;
 width: 25%;
 padding: 0 0 0 20px;
}
#nav_inner .td {
 width: 25%;
}
#nav_inner p {
 color: #eee;
 background-color: transparent;
 padding:0;
 margin: 0 0 10px 0;
}
#nav_inner ul {
 list-style-image: url(images/arrow.gif);
 padding: 0 0 0 18px;
 margin: 8px 0 12px 0;
}
#nav_inner li {
 padding: 0;
 margin: 0 0 4px 0;
}

#nav_inner a {
 color: #eee;
 background-color: transparent;
 text-decoration: none;
 font-weight: normal;
 outline-style: none;
}

#nav_inner a:visited {
 color: #eee;
 background-color: transparent;
 text-decoration: none;
 outline-style: none;
}

#nav_inner a:hover {
 color: #ccc;
 text-decoration: none;
 background-color: transparent;
 outline-style: none;
}

#masthead {
 margin: 0 40px 0 35px;
 padding: 0 0 0 6px;
 border-bottom: 1px solid #999;
}

#masthead h1 {
background-color: transparent;
color: #e13300;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0 0 6px 0;
}

#searchbox {
 background-color: transparent;
 padding: 6px 40px 0 0;
 text-align: right;
 font-size: 10px;
 color: #666;
}

#img_welcome {
 border-bottom: 1px solid #D0D0D0;
 margin: 0 40px 0 40px;
 padding: 0;
 text-align: center;
}

#content {
 margin: 20px 40px 0 40px;
 padding: 0;
}

#content p {
 margin: 12px 20px 12px 0;
}

#content h1 {
color: #e13300;
border-bottom: 1px solid #666;
background-color: transparent;
font-weight: normal;
font-size: 24px;
margin: 0 0 20px 0;
padding: 3px 0 7px 3px;
}

#content h2 {
 background-color: transparent;
 border-bottom: 1px solid #999;
 color: #000;
 font-size: 18px;
 font-weight: bold;
 margin: 28px 0 16px 0;
 padding: 5px 0 6px 0;
}

#content h3 {
 background-color: transparent;
 color: #333;
 font-size: 16px;
 font-weight: bold;
 margin: 16px 0 15px 0;
 padding: 0 0 0 0;
}

#content h4 {
 background-color: transparent;
 color: #444;
 font-size: 14px;
 font-weight: bold;
 margin: 22px 0 0 0;
 padding: 0 0 0 0;
}

#content img {
 margin: auto;
 padding: 0;
}

#content code {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

#content pre {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}

#content .path {
 background-color: #EBF3EC;
 border: 1px solid #99BC99;
 color: #005702;
 text-align: center;
 margin: 0 0 14px 0;
 padding: 5px 10px 5px 8px;
}

#content dfn {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #00620C;
 font-weight: bold;
 font-style: normal;
}
#content var {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #8F5B00;
 font-weight: bold;
 font-style: normal;
}
#content samp {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #480091;
 font-weight: bold;
 font-style: normal;
}
#content kbd {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #A70000;
 font-weight: bold;
 font-style: normal;
}

#content ul {
 /*list-style-image: url(images/arrow.gif);*/
 margin: 10px 0 12px 0;
}

li.reactor {
 list-style-image: url(images/reactor-bullet.png);
}
#content li {
 margin-bottom: 9px;
}

#content li p {
 margin-left: 0;
 margin-right: 0;
}

#content .tableborder {
 border: 1px solid #999;
}
#content th {
 font-weight: bold;
 text-align: left;
 font-size: 12px;
 background-color: /*#666*/#ED1C24;
 color: #fff;
 padding: 4px;
}

#content .td {
 font-weight: normal;
 font-size: 12px;
 padding: 6px;
 background-color: #f3f3f3;
}

#content .tdpackage {
 font-weight: normal;
 font-size: 12px;
}

#content .important {
 background: #FBE6F2;
 border: 1px solid #D893A1;
 color: #333;
 margin: 10px 0 5px 0;
 padding: 10px;
}

#content .important p {
 margin: 6px 0 8px 0;
 padding: 0;
}

#content .important .leftpad {
 margin: 6px 0 8px 0;
 padding-left: 20px;
}

#content .critical {
 background: #FBE6F2;
 border: 1px solid #E68F8F;
 color: #333;
 margin: 10px 0 5px 0;
 padding: 10px;
}

#content .critical p {
 margin: 5px 0 6px 0;
 padding: 0;
}


#footer {
background-color: transparent;
font-size: 10px;
padding: 16px 0 15px 0;
margin: 20px 0 0 0;
text-align: center;
}

#footer p {
 font-size: 10px;
 color: #999;
 text-align: center;
}
#footer address {
 font-style: normal;
}

.center {
 text-align: center;
}

img {
 padding:0;
 border: 0;
 margin: 0;
}

.nopad {
 padding:0;
 border: 0;
 margin: 0;
}


form {
 margin: 0;
 padding: 0;
}

.input {
     font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
     font-size: 11px;
     color: #333;
     border: 1px solid #B3B4BD;
     width: 250px;
     font-size: 11px;
     height: 1.5em;
     line-height: 1.5em;
     padding: 0;
     margin: 0;
}

.textarea {
     font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
     font-size: 14px;
     color: #143270;
     background-color: #f9f9f9;
     border: 1px solid #B3B4BD;
     width: 100%;
     padding: 6px;
     margin: 0;
}

.select {
     background-color: #fff;
     font-size:  11px;
     font-weight: normal;
     color: #333;
     padding: 0;
     margin: 0 0 3px 0; 
}

.checkbox {
     background-color: transparent;
     padding: 0;
     border: 0;
}

.submit {
    background-color: #000000;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
    height: 22px;
    line-height: 22px;
    margin: 0 0 1px;
    padding: 1px 5px 3px;
    width: auto;
}

.submit:hover {
     background-color: #99BC99; 
     color:#000;
}
.input-qty{
     font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
     font-size: 11px;
     color: #333;
     border: 1px solid #B3B4BD;
     width: 25px;
     font-size: 11px;
     height: 1.5em;
     line-height: 1.5em;
     padding: 0;
     margin: 0;
}

.forms .input-long {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
 color: #333;
 border: 1px solid #B3B4BD;
 width: 400px;
 font-size: 11px;
 height: 25px;
 line-height: 25px;
 padding: 0;
 margin: 0;
}

.forms .input-long {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
 color: #333;
 border: 1px solid #B3B4BD;
 width: 300px;
 font-size: 11px;
 height: 25px;
 line-height: 25px;
 padding: 0;
 margin: 0;
}

.forms .textarea {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 11px;
 color: #143270;
 background-color: #f9f9f9;
 border: 1px solid #B3B4BD;
 width: 290px;
 height: 100px;
 padding: 6px;
 margin: 0;
}

.forms label{
    font-weight: bold;
}

.button1 {
 background-color: #ED1C24;
 color: #fff; 
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 font-size: 12px;
 border: 1px solid #e13300;
 margin: 0;
 padding: 1px 5px 2px 5px;
 height: 35px;
 line-height: 18px;
 width: auto;
 -moz-border-radius: 5px;
 -border-radius:5px;
 font-weight: normal;
 cursor: pointer;
 box-shadow: 0 0 3px red;
 vertical-align: middle;
 display: inline-block;
}

.button1:hover{
    background-color :  #9d261d;
    color: #fff;
}

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24537;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Axiata Medium",Verdana;
    font-size:12px;
    font-weight:bold;
    padding:5px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #810e05;
}
.button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
    background-color:#c62d1f;
}

.select-right{
    padding:5px;
    margin: 0px 5px 0px 5px;
    float: right;
    font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 13px;    
}
.pagination a,.pagination strong{
    background: #EAEAEA;
    padding: 3px 5px;
    font-size: 11px;    
}

.pagination strong{
    background: #cccccc;
    padding: 3px 5px;
    font-weight: normal;
}

.pagination a:hover{
    background: #CCCCCC;
}

.loading
{
    background: url('images/small-loading.gif') no-repeat;
    height:15px;
    padding-left:25px;
    padding-top:1px;
    display: none;
    float: right;
}

label{
    font-weight: bold;
}

span.small-text{
    font-size: 10px;
    font-weight: bold;
    color: red;
}

.parent a, a.parent {
    background: none repeat scroll 0 0 #ED1C24;
    border: medium none;
    clear: both;
    color: #FFFFFF;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: auto;
    line-height: 25px;
    margin-bottom: 20px;
    margin-top: 5px;
    margin-left:auto;
    margin-right: auto;
    max-width: 450px;
    min-width: 400px;
    padding: 20px 10px;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
    width:auto;
    box-shadow: 0 0 3px red;
}

.parent a:hover{
    color:black;
}

/** menu **/
.box {
    background-color: #666666;
    box-shadow: 0 0 1px #666666;
    height: 55px;
    left: 0;
    margin-top: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    -moz-box-shadow:0px 0px 10px #aaa;
    -webkit-box-shadow:0px 0px 10px #aaa;
    box-shadow:0px 0px 10px #aaa;
    z-index: 1;
}

ul.ldd_menu{
    width: 1024px;
    margin:0px;
    padding:0;
    display:block;
    height:50px;
    background-color:#666666;
    list-style:none;
    font-family:"Trebuchet MS", sans-serif;	
    border-left:10px solid #666666;
    -moz-box-shadow:0px 3px 4px #666666;
    -webkit-box-shadow:0px 3px 4px #666666;
    box-shadow:0px 3px 4px #666666;
}
ul.ldd_menu a{
    text-decoration:none;
}
ul.ldd_menu > li{
    float:left;
    position:relative;
}
ul.ldd_menu > li > span{
    float:left;
    color:#fff;
    background-color:#666666;
    height:50px;
    line-height:50px;
    cursor:default;
    padding:0px 40px;
    text-shadow:0px 0px 1px #fff;	
    border-left:1px solid #cccccc;
}
ul.ldd_menu > li > span > a{	
	color:#fff;
}
ul.ldd_menu > li > span > a:hover{	
	color:#000;
}

ul.ldd_menu  li  span.selected{	
    background-color: #99BC99;
    color: #000000;
}

ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:50px;
    width:550px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;
    background: #666666;	
    z-index: 999;
    -moz-box-shadow:0px 3px 4px #666666;
    -webkit-box-shadow:0px 3px 4px #666666;
    box-shadow:0px 3px 4px #666666;
}
a.ldd_subfoot{
    background-color:#f0f0f0;
    color:#444;
    display:block;
    clear:both;
    padding:15px 20px;
    text-transform:uppercase;
    font-family: Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:0px 0px 2px #777 inset;
    -webkit-box-shadow:0px 0px 2px #777 inset;
    -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
    list-style:none;
    float:left;
    border-left:1px solid #666666;
    margin:20px 0px 10px 30px;
    padding:10px;
}
li.ldd_heading{
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color:#EAEAEA;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
    font-family: Arial, serif;
    font-size:10px;
    line-height:20px;
    color:#fff;
    padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
    -moz-box-shadow:0px 0px 2px #333;
    -webkit-box-shadow:0px 0px 2px #333;
    box-shadow:0px 0px 2px #333;
    background:#99BC99;
    color:#000000;
}
/** menu ends **/
#content{margin-top: -50px}

#content .tableborder td {
    background-color: #F3F3F3;
    font-size: 12px;
    font-weight: normal;
    padding: 6px;
}
.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
    
}

#content .tableborder td.tokenStyle{
    font-size:54px;
    text-align: center;
    /*font-family: Garamond, serif;
    line-height: 1em;*/
    color: /*#fa0f0f*/#000000;
    font-weight:bold;   
}

#content .tableborder td.tokenStyle.counterCode{border-right: 1px solid #ED1C24}

#content .tableborder tr.waiting td.waitingStyle{
    font-size:16px;font-weight:bold;
}

#content .tableborder tr.waiting td{
    font-size:54px;font-weight:bold;text-align: center
}

#content .tableborder tr.waiting td{
    font-size:54px;font-weight:bold;text-align: center
}

.bigbutton {
    background: none repeat scroll 0 0 #ED1C24;
    border: 1px solid #e13300;
    box-shadow: 0 0 3px red;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    height: auto;
    line-height: 38px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    text-shadow: 1px 1px 0 #FFFFFF;
    white-space: normal;
    width: 160px;
    vertical-align: middle;
}

a.bigbutton{
    line-height: 32px;
    vertical-align: middle;
}
.bigbutton:hover {
    background: repeat scroll 0 0 #9d261d;
    color:#fff;
}
.bigbutton:active {
    position: relative;
    top: 1px;
    color:#fff;
}
.bigbutton:visited{
    color:#fff;
}

.button-medium{
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24537;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    width: 160px;
    height: auto;
    line-height: 25px;
    font-family: arial;
    font-size:22px;
    font-style: normal;
    font-weight: bold;
    padding:5px 25px;
    text-decoration:none;
    text-shadow:0px 1px 0px #854629;
}

.button-medium:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
    background-color:#c62d1f;
}
.button-medium:active {
	position:relative;
	top:1px;
}

a.button-medium,a.button-medium:hover{
    text-decoration: none;
    color:white;
}
.text-scroller marquee{background-color:#ED1C24;border-bottom: none;font-weight: normal;font-family: "Axiata Medium",Verdana;font-size: 30px;color:white;margin:10px 0 0 0;padding:0 0 3px;line-height: 40px;text-shadow: 1px 2px #f24537;margin:2px 0 0 0;width:100%;bottom: 0}

#keypadrow{
    clear:both;
    width: 100%;
    display: block;
}

#keypadrow .keys {
 /*   background: none repeat scroll 0 0 #ED1C24;
    border: 1px solid #ED1C28;
    box-shadow: 0 0 3px #FF0000;
 */
    border: 1px solid #ED1C28;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 25px;
    margin: 20px;
    padding: 25px;

    background: #f85032; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4NTAzMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI5JSIgc3RvcC1jb2xvcj0iI2YwMmYxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxNmY1YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iI2Y2MjkwYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNzM4MjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f85032 0%, #f02f17 29%, #f16f5c 50%, #f6290c 76%, #e73827 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(29%,#f02f17), color-stop(50%,#f16f5c), color-stop(76%,#f6290c), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f85032 0%,#f02f17 29%,#f16f5c 50%,#f6290c 76%,#e73827 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f85032 0%,#f02f17 29%,#f16f5c 50%,#f6290c 76%,#e73827 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f85032 0%,#f02f17 29%,#f16f5c 50%,#f6290c 76%,#e73827 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f85032 0%,#f02f17 29%,#f16f5c 50%,#f6290c 76%,#e73827 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-8 */
}

#keypadrow .keys:hover {
    background: none repeat scroll 0 0 red;
    color:black;       
}

#keypadrow .keys.green{
    background: none repeat scroll 0 0 #51a351;
    border: 1px solid green;
    box-shadow: 0 0 3px green;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 25px;
    margin: 20px;
    padding: 25px;
}

.tokenInput{
    border: 1px solid #B3B4BD;
    color: #333333;
    font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
    font-size: 25px;
    height: 1.5em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    width: 235px;
}

a.button, a.button:hover,a.button:visited,a.button:active{
    color:#fff;
    line-height: 30px;
    height:auto;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px){
    #content{margin-top: 0px}
}

#content .tableborder td.tokenStyle.off,#content .tableborder td.tokenStyle.counterCode.off{opacity: 0.3}

#content .vduTableHeader{border: 1px solid #fff;background-color: #ED1C24;font-size: 20px;text-align: center;padding: 4px}
#vduContainerLeft{float:left;width: 80%;border: 0px solid black;}
#vduContainerRight{float:right;width: 18%;border: 0px solid black}
#counterColumnLeft{float: left;margin-right: 10px;}
#counterColumnRight{float: left;margin-left: 10px;}
.vduHeaderTitle{font-size: 35px;font-weight: bold;margin-bottom: 10px}

.badge {background:red;color:white;border-radius: 4px;padding:2px 4px;margin:2px 4px;font-weight: bold;font-size: 10px;display: inline-block}
.text-pull-right{text-align: right;}

.colorPanel {padding:5px;color:white;font-size: 10px;font-weight: bold;max-width: 80px;text-align: left;border-bottom: 1px dotted white}
.slideShowNextBtn,.slideShowPrevBtn{height:50px;background: blue;margin-top: 10px; margin-bottom: 10px;padding:5px;color:white;font-size: 10px;font-weight: bold;max-width: 80px;text-align: left;}

.one-third{width:32%;float:left;display:table;padding:5px}
.one-half{width:47%;float:left;display:table;padding:5px;height:360px}
.full-size{width:90%;float:left;display:table;padding:5px;height:700px}
.full-width{width:100%;float:left;display:table;padding:5px;}    

/** feedback **/
.feebackGrid{text-align: center}
a.feedbackOption{
    background-color: red;
    padding: 10px 15px;
    display: block; 
    max-width: 100%;
    word-wrap: break-word;
    margin:20px 5px;
    color:white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

.feedbackDiv{margin: 0 auto;width: 100%;display: table}

a.feedbackOption:hover, a.feedbackOption:active,a.feedbackOption:visited{background: #red}

a.feedbackSave, a.feedbackBack{
    background-color: #29BE29;
    padding: 10px;
    display: inline-block; 
    width: 100%;
    height: auto;
    word-wrap: break-word;
    /*margin: 20px 5px;*/
    color: white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

a.feedbackSave{float:left}
a.feedbackBack{float: left}

.tokenSelector{width: 100px;font-size: 20px;margin-bottom: 20px; padding:10px 5px;box-shadow: 0px 5px 5px #ccc; border: 1px solid #ccc}

a.feedbackSmiley{
    background-color: red;
    padding: 10px 5px 5px 5px;
    display: table; 
    width: 100%;
    height: auto;
    word-wrap: break-word;
    /*margin: 20px 5px;*/
    color:white;
    font-size: 25px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

a.feedbackSmiley:hover, a.feedbackSmiley:active,a.feedbackSmiley:visited{background: #red}

a.feedbackSmiley img{vertical-align: middle;width:64px}

.feedbackSmiley{
    background-color: red;
    padding: 10px 5px 5px 5px;
    display: table; 
    width: 100%;
    height: auto;
    word-wrap: break-word;
    margin: 20px 0px;
    color:white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
    cursor: pointer;
}
.feedbackSmiley .feedbacktext {min-width: 49%;float:left;text-align: right;margin-right: 10px}
.feedbackSmiley .feedbackimage {width: auto;float:left;text-align: left}
.feedbacktext span.text{float:right}

.message-box {
    display: none;
    width: 100%;
    background: /*rgba(22,52,68,0.7);*/red;
    height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    font-family: helvetica neue, arial;
    position: absolute;
    bottom: 0;
    left:0px;
    right: 0px;
    line-height: 50px;
    opacity: 0.9;
}

.containermodal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    opacity: 0.8;
    background: #000000 
                url('images/flyingdots.gif') 
                50% 50% 
                no-repeat;
}

.containermodal .processing {margin-top:20%;width: 100%;text-align: center;color:white;vertical-align: middle;font-size:25px}