*{ -webkit-tap-highlight-color: rgba(0,0,0,0);}

body, div, ul, li, p {margin:0; border:0 none; padding:0;}

body { margin:0; background:url(../images/background.png); font-family: Helvetica; }
p {padding:10px; }


/* ---- HEADER ---- */
.header {position:relative; width:100%; height:44px; background:url(../images/header.png); text-shadow: 0px 1px 0px #000; }

.title {position: absolute; top:7px; left:0; font-weight:bold; color:#fff; line-height:30px; width:100%; text-align:center; display:block; z-index:1; }

.left-header { left:5px; position:absolute; z-index:2;}
.right-header { right:5px; position:absolute; z-index:2;}

.back-button { margin:0; background:url(../images/backButton.png); display:block; width:62px; height:30px; line-height:30px; font-weight:bold; color:#fff; text-decoration:none; padding-left:12px; padding-right:6px; top:7px; text-align:center; overflow:hidden;}
.next-button { margin:0; background:url(../images/nextButton.png); display:block; width:62px; height:30px; line-height:30px; font-weight:bold; color:#fff; text-decoration:none; padding-left:6px; padding-right:12px; top:7px; text-align:center; overflow:hidden;}
.action-button { margin:0; background:url(../images/actionButton.png); display:block; width:70px; height:30px; line-height:30px;font-weight:bold; color:#fff; text-decoration:none; padding-left:5px; padding-right:5px; top:7px; text-align:center; overflow:hidden;}


/* ---- BODY ---- */
.container { margin:15px; -webkit-border-radius: 10px; background-color:#fff; border: 1px solid #aaa; }

/* ---- List ---- */
li {border-top: 1px solid #ccc; color: #222222; display: block; padding:5px}
li:first-child {border-top: none;}
.line-link {display:block; background: url(../images/arrow.png) no-repeat right center; padding-right:10px; text-decoration: none; color:#222222; }


/* ---- INPUT TEXT ---- */
input[type="text"],input[type="password"]{font-size: 18px;}

/* ---- CHECKBOX ---- */
input[type="checkbox"] { width: 94px; height: 27px; background: url('../images/checkbox.png'); -webkit-appearance: none; border: 0; }
input[type="checkbox"]:checked {background-position: 0 -27px;}

/* ---- BUTTON ---- */
a.button {display:block; text-decoration:none; line-height:48px;}



input[type="button"], input[type="submit"], a.button { width: 160px; height: 48px; background: url('../images/buttons/button-160px-white.png'); -webkit-appearance: none; border: 0; font-size: 18px; font-weight:bold;  text-shadow: 0px 1px 0px #ccc; color:#000;}
input[type="button"].button-120px, input[type="submit"].button-120px, a.button-120px { width: 120px; background: url('../images/buttons/button-120px-white.png'); }
input[type="button"].button-200px, input[type="submit"].button-200px, a.button-200px { width: 200px; background: url('../images/buttons/button-200px-white.png'); }
input[type="button"].button-240px, input[type="submit"].button-240px, a.button-240px { width: 240px; background: url('../images/buttons/button-240px-white.png'); }

input[type="button"].red, input[type="submit"].red, a.button.red { width: 160px; height: 48px; background: url('../images/buttons/button-160px-red.png'); -webkit-appearance: none; border: 0; font-size: 18px; font-weight:bold;  text-shadow: 0px 1px 0px #333; color:#fff;}
input[type="button"].button-120px.red, input[type="submit"].button-120px.red, a.button-120px.red { width: 120px; background: url('../images/buttons/button-120px-red.png'); }
input[type="button"].button-200px.red, input[type="submit"].button-200px.red, a.button-200px.red { width: 200px; background: url('../images/buttons/button-200px-red.png'); }
input[type="button"].button-240px.red, input[type="submit"].button-240px.red, a.button-240px.red { width: 240px; background: url('../images/buttons/button-240px-red.png'); }

input[type="button"].blue, input[type="submit"].blue, a.button.blue { width: 160px; height: 48px; background: url('../images/buttons/button-160px-blue.png'); -webkit-appearance: none; border: 0; font-size: 18px; font-weight:bold;  text-shadow: 0px 1px 0px #333; color:#fff;}
input[type="button"].button-120px.blue, input[type="submit"].button-120px.blue, a.button-120px.blue { width: 120px; background: url('../images/buttons/button-120px-blue.png'); }
input[type="button"].button-200px.blue, input[type="submit"].button-200px.blue, a.button-200px.blue { width: 200px; background: url('../images/buttons/button-200px-blue.png'); }
input[type="button"].button-240px.blue, input[type="submit"].button-240px.blue, a.button-240px.blue { width: 240px; background: url('../images/buttons/button-240px-blue.png'); }

input[type="button"].grey, input[type="submit"].grey, a.button.grey { width: 160px; height: 48px; background: url('../images/buttons/button-160px-grey.png'); -webkit-appearance: none; border: 0; font-size: 18px; font-weight:bold;  text-shadow: 0px 1px 0px #333; color:#fff;}
input[type="button"].button-120px.grey, input[type="submit"].button-120px.grey, a.button-120px.grey { width: 120px; background: url('../images/buttons/button-120px-grey.png'); }
input[type="button"].button-200px.grey, input[type="submit"].button-200px.grey, a.button-200px.grey { width: 200px; background: url('../images/buttons/button-200px-grey.png'); }
input[type="button"].button-240px.grey, input[type="submit"].button-240px.grey, a.button-240px.grey { width: 240px; background: url('../images/buttons/button-240px-grey.png'); }


a.cancel{ display:block; text-decoration:none; line-height:48px; width: 240px; height: 48px; background: url('../images/buttons/button-240px-red.png'); color: #fff; font-size: 24px; font-weight: bold; text-shadow: 0px 1px 0px #000;}
a.confirm{ display:block; text-decoration:none; line-height:48px; width: 240px; height: 48px; background: url('../images/buttons/button-240px-blue.png'); color: #fff; font-size: 24px; font-weight: bold; text-shadow: 0px 1px 0px #000;}

a.cal-preview {position: relative; left:17px; top:5px; display: block; width:64px; height:64px; background:url('../images/icn-calendar.png'); text-decoration: none; text-align: center;}
a.cal-preview .month{color:#fff; font-size: 14px; }
a.cal-preview .day{ color: #000; font-size: 35px; font-weight: bold; text-shadow: 0px 1px 0px #fff;}

a.cal-preview2 {position: relative; left:17px; top:5px; display: block; width:64px; height:64px; background:url('../images/icn-calendar.png'); text-decoration: none; text-align: center;}
a.cal-preview2 .month{color:#fff; font-size: 14px; }
a.cal-preview2 .day{ color: #000; font-size: 35px; font-weight: bold; text-shadow: 0px 1px 0px #fff;}

table.calendar {border:1px solid #777; margin:10px 0;}
table.calendar a{text-decoration: none; padding: 0; margin: 0, none; font-weight: bold; }
table.calendar .navigate-month a{color:#fff; font-size: 20px; padding: 0 0 0 12px;}
table.calendar td.case {width:40px; height:40px;  text-align:center; background:url('../images/bg-calendar.png');}
table.calendar td.case a {width:40px; height:40px; line-height:40px; display:block; }
table.calendar td.case.selected {background:url('../images/bg-calendar.png'); background-position: 0 -80px; }
table.calendar td.case.selected a {color:#fff; text-shadow: 0px 1px 0px #000;}
table.calendar td.case.dayofmonth {background:url('../images/bg-calendar.png'); background-position: 0 -40px; }
table.calendar td.case.dayofmonth a {color:#000; text-shadow: 0px 1px 0px #fff;}
table.calendar th{color:#555; font-size: 11px; font-weight:normal; }

.header .month{font-size: 23px; color:#fff; text-shadow: 0px 1px 0px #000;}
.year{font-size: 13px; color:#fff; text-shadow: 0px 1px 0px #000; font-weight: bold;}