html {
	background-color: rgb(246, 246, 246);
}
body {
	background: url("../images/shared/bdy/bg_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") repeat-y center rgb(246, 246, 246); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px;
}
ul {
	list-style: none;
}
li {
	list-style: none; margin-left: 0px;
}

fieldset {
border:0;}

#page {
text-align:center;}

#header {
	height: 103px; padding-top: 0px; margin: 0; background-color: rgb(246, 246, 246); width:968px; margin:0 auto; text-align:left;
}

    #header .container_16 {
    width:auto;}

#bannerLogoLeft {
	background: url("../images/shared/hdr/kulula-logo_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") no-repeat; width: 255px; height: 85px; text-align: left; margin-left: 23px; margin-top:10px; vertical-align: top; float: left;
}
#bannerLogoRight {
    background: url("../images/shared/hdr/grn-bar-sh_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") no-repeat; width:591px; height:34px; margin-top:69px; float:right; margin-right:0;
}

#bannerLogoLeft div {
display:none;}

#main { 
	padding-top: 0px; position: relative; background: url("../images/shared/bdy/bg_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") repeat-y center rgb(246, 246, 246);
}
#mainContent {
	padding: 4px;
}
#mainTitle {
	height: 27px; color: rgb(102, 102, 102); text-transform: lowercase; padding-top: 10px; padding-bottom: 0px; padding-left: 0px; font-family: arial, verdana, helvetica, sans-serif; font-size: 22px; font-style: normal; font-weight: normal; vertical-align: top; background-image: none; background-color: rgb(255, 255, 255);
}
#innerMain {
    border:0; border-top:5px solid #00BCE4; margin:0 auto; width:962px;text-align:left;
}

#innerMainContainer {
	margin: 0; background-color: rgb(255, 255, 255);
}
#mainPanel {
	margin: 0px; text-align:left;
}
#mainContent p {
	margin-bottom: 7px;
}
.panelBox {
	margin: 2px 20px;
}
.ui-widget-header {
	border: currentColor; text-align: left; color: rgb(255, 255, 255); text-transform: lowercase; font-weight: normal;
}
.ui-datepicker-title {
	text-transform: lowercase; font-size: 12px; font-weight: bold;
}
.ui-dialog-title {
	text-transform: lowercase; font-size: 12px; font-weight: bold;
}
.ui-dialog {
	background: rgb(243, 243, 243); padding: 4px 1px 3px; border: 1px solid rgb(255, 255, 255); text-align: left; color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 11px;
}
#submit {
	background: url("../images/general/green-gradient_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") repeat-x center rgb(133, 189, 58); padding: 0.15em 0.8em; border-radius: 5px; border: 1px solid rgb(125, 177, 55); text-align: center; color: rgb(255, 255, 255); text-transform: lowercase; font-size: 18px; margin-top: 2px; margin-right: 5px; margin-bottom: 10px;
}
#submit:hover {
	background: rgb(125, 177, 55); text-decoration: none;
}
#searchBtn:hover {
	background: rgb(125, 177, 55); text-decoration: none;
}
#loginTitle {
	color: rgb(153, 153, 153); text-transform: lowercase; padding-bottom: 5px; padding-left: 3px; font-size: 17px; font-style: normal; font-weight: bold; border-bottom-color: rgb(224, 224, 224); border-bottom-width: 1px; border-bottom-style: solid; background-image: none; background-color: rgb(255, 255, 255);
}
#loginPanel {
	background: url("../images/general/gradient-back_F925755021553S0KFKA-_-F9648126378441JGRL4-_.jpg") repeat-x rgb(255, 255, 255); padding: 15px; border: 1px solid rgb(238, 238, 238); width: 168px; margin-top: 20px; margin-bottom: 20px;
}
.loginintro {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
#loginintro1 {
	color: rgb(0, 188, 228); text-transform: lowercase; line-height: 32px; font-size: 20px; font-style: normal; font-weight: bold; margin-bottom: 15px;
}
h2 {
	color: rgb(0, 188, 228); text-transform: lowercase; line-height: 32px; font-size: 20px; font-style: normal; font-weight: bold; margin-bottom: 15px;
}
#loginintro2 {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
#loginintro3 {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
#loginintro2 span span h3 {
	color: rgb(153, 153, 153); font-family: arial, verdana, helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold;
}
#loginintro3 a {
	color: rgb(140, 198, 63); text-transform: inherit; font-size: 12px; text-decoration: underline;
}
#loginintro3 a:hover {
	color: rgb(96, 136, 40); text-transform: capitalize; font-size: 12px; text-decoration: underline;
}
#loginContent {
	color: rgb(102, 102, 102); text-transform: lowercase; padding-left: 0px; font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold;
}
#navigation {
	margin-right: 0px; margin-left: 0px;
}
#linksTitle {
	text-align: left; color: rgb(153, 153, 153); text-transform: lowercase; padding-right: 8px; padding-bottom: 5px; font-size: 17px; font-weight: bold; border-bottom-color: rgb(224, 224, 224); border-bottom-width: 1px; border-bottom-style: solid; background-image: none; background-color: rgb(255, 255, 255);
}
#resourcesTitle {
	text-align: left; color: rgb(153, 153, 153); text-transform: lowercase; padding-right: 8px; padding-bottom: 5px; font-size: 17px; font-weight: bold; border-bottom-color: rgb(224, 224, 224); border-bottom-width: 1px; border-bottom-style: solid; background-image: none; background-color: rgb(255, 255, 255);
}
#welcomeTitle {
	text-align: left; color: rgb(153, 153, 153); text-transform: lowercase; padding-right: 8px; padding-bottom: 5px; font-size: 17px; font-weight: bold; border-bottom-color: rgb(224, 224, 224); border-bottom-width: 1px; border-bottom-style: solid; background-image: none; background-color: rgb(255, 255, 255);
}
#linksContent {
	padding-left: 0px;
}
#welcomeContent {
	padding-left: 0px;
}
#resourcesContent {
	padding-left: 0px;
}
#linksPanel {
	background: url("../images/general/gradient-back_F925755021553S0KFKA-_-F9648126378441JGRL4-_.jpg") repeat-x rgb(255, 255, 255); margin: 20px; padding: 15px; border: 1px solid rgb(238, 238, 238); width: 168px; color: rgb(238, 238, 238);
}
#resourcesPanel {
	background: url("../images/general/gradient-back_F925755021553S0KFKA-_-F9648126378441JGRL4-_.jpg") repeat-x rgb(255, 255, 255); margin: 20px; padding: 15px; border: 1px solid rgb(238, 238, 238); width: 168px; color: rgb(238, 238, 238);
}
#welcomePanel {
	background: url("../images/general/gradient-back_F925755021553S0KFKA-_-F9648126378441JGRL4-_.jpg") repeat-x rgb(255, 255, 255); margin: 20px; padding: 15px; border: 1px solid rgb(238, 238, 238); width: 168px; color: rgb(238, 238, 238);
}
#welcomeName {
	color: rgb(114, 203, 203); font-size: 16px; font-weight: bold;
}
#welcomeLink {
	text-transform: capitalize;
}
.welcomeText1 {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
.welcomeText3 {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
.welcomeText4 {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
#welcomeLink {
	color: rgb(140, 198, 63); text-transform: capitalize; font-size: 12px; text-decoration: underline;
}
#welcomeLink:hover {
	color: rgb(96, 136, 40); text-transform: capitalize; font-size: 12px; text-decoration: underline;
}
div.welcomeText.welcomeText1 {
	display: inline;
}
div.welcomeText.welcomeTextLink1 {
	display: inline;
}
div.welcomeText.welcomeText4 a {
	color: rgb(140, 198, 63); text-transform: inherit; font-size: 12px; text-decoration: underline;
}
div.welcomeText.welcomeText4 a:hover {
	color: rgb(96, 136, 40); text-transform: inherit; font-size: 12px;
}
#accountBalance {
	color: rgb(0, 185, 229); font-size: 12px; font-weight: bold;
}
#travelBalance {
	color: rgb(0, 185, 229); font-size: 12px; font-weight: bold;
}
#statementBalance {
	color: rgb(0, 185, 229); font-size: 12px; font-weight: bold;
}
#summaryContent {
	width: 61%; text-align: center;
}
.tableContentWrapper {
	height: 125px;
}
.dataTables_wrapper {
	clear: none;
}
#accountNameSection {
	background: url("../images/general/light-grey-gradient_F925755021553S0KFKA-_-F9648126378441JGRL4-_.gif") repeat-x center rgb(240, 240, 240); border: 1px solid rgb(234, 234, 234); height: 21px; color: rgb(102, 102, 102); padding-top: 2px; padding-bottom: 0px; font-size: 12px; font-style: normal; font-weight: bold; margin-top: 12px; display: block;
}
#accountName {
	padding: 0px 0px 0px 6px;
}
#accountNumberSection {
	padding: 4px 4px 0px 6px; line-height: 1.53em; font-weight: bold; margin-top: 2px; border-top-color: rgb(168, 222, 232); border-top-width: 1px; border-top-style: solid;
}
#accountBalanceSection {
	padding: 5px 4px 4px 6px; line-height: 1.53em; margin-bottom: 12px; border-bottom-color: rgb(168, 222, 232); border-bottom-width: 1px; border-bottom-style: solid;
}
.fullyUsed {
	font-weight: bold;
}
#periodTable_length {
	color: rgb(102, 102, 102);
}
.contentBackgroundDiv {
	background: rgb(240, 242, 242);
}
.contentDiv {
	color: rgb(0, 185, 229); font-size: 12px; font-weight: bold;
}
.contentBlock li {
	padding-bottom: 0px;
}
#searchBtn {
	padding: 2px 14px; border-radius: 4px; height: 29px; text-align: center; text-transform: lowercase; font-size: 18px;
}
#accountTransactionHistory {
	padding-bottom: 10px;
}
.dataTables_info {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal;
}
#textLinks a {
	color: rgb(140, 198, 63); text-transform: lowercase; font-size: 12px; text-decoration: none;
}
#navigation a {
	color: rgb(140, 198, 63); text-transform: lowercase; font-size: 12px; text-decoration: none;
}
#textLinks a:hover {
	color: rgb(96, 136, 40); text-transform: lowercase; font-size: 12px; text-decoration: underline;
}
#navigation a:hover {
	color: rgb(96, 136, 40); text-transform: lowercase; font-size: 12px; text-decoration: underline;
}
table.dataTable th {
	background: rgb(154, 206, 142); padding: 5px 8px 5px 10px; border: 1px solid rgb(255, 255, 255); text-align: center; color: rgb(255, 255, 255); text-transform: lowercase; font-size: 12px; font-style: normal; font-weight: bold;
}
table.dataTable td {
	padding: 4px 1px 3px; border: 1px solid rgb(255, 255, 255); text-align: center; font-family: arial, verdana, helvetica, sans-serif; font-size: 11px; font-style: normal;
}
.tableContent td {
	padding: 4px 1px 3px; border: 1px solid rgb(255, 255, 255); text-align: center; font-family: arial, verdana, helvetica, sans-serif; font-size: 11px; font-style: normal;
}
.tableContent th {
	text-transform: lowercase; font-size: 12px; font-weight: bold;
}
table.dataTable tfoot {
	color: rgb(102, 102, 102); font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold;
}
table.dataTable tfoot tr td {
	padding: 4px 1px 3px; text-align: right; color: rgb(102, 102, 102); text-transform: lowercase; font-family: arial, verdana, helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold;
}
tr.evenColored {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
table.dataTable tr.even {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
td.even {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
tr.oddColored {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
table.dataTable tr.odd {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
td.odd {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
tr.evenColored:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
table.dataTable tr.even:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
td.even:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(235, 235, 235);
}
tr.oddColored:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
table.dataTable tr.odd:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
td.odd:hover {
	padding: 0px; text-align: center; color: rgb(102, 102, 102); text-transform: lowercase; line-height: 15px; font-size: 11px; background-color: rgb(243, 243, 243);
}
.dataTables_processing {
	border: 1px solid rgb(208, 208, 208); background-color: rgb(240, 242, 242);
}
.svcCredit {
	color: rgb(1, 188, 229); text-transform: none;
}
#periodTable td.ticketNumber {
	font-size: 11px;
}
#periodTable td.ticketNumber a {
	font-size: 11px;
}
.passName {
	text-transform: uppercase;
}
#statementContent th.passName {
	width: 100px;
}
#statementContent th.dateCell {
	width: 24px;
}
.moneyCell {
	text-transform: uppercase;
}
.dateCell span {
	display: block;
}
#periodTable a {
	color: rgb(140, 198, 63); text-transform: lowercase; font-size: 12px; text-decoration: none;
}
#periodTable a:hover {
	color: rgb(96, 136, 40); text-transform: lowercase; font-size: 12px; text-decoration: underline;
}
#footer {
	bottom: 0px; vertical-align: bottom;
}
#footerContainer {
	margin: 0px; overflow: visible; width:960px; border:0;
}

#footerContent {
	background: none; padding:0 20px;
}
#footerCopyright {
	padding:15px 0; color: rgb(153, 153, 153); font-size: 12px; font-weight: normal; border-top-color: rgb(238, 238, 238); border-top-width: 1px; border-top-style: solid; text-align:center;
}
#footerCopyright a {
	color: rgb(140, 198, 63); text-transform: inherit; font-size: 12px; text-decoration: underline;
}
#footerCopyright a:hover {
	color: rgb(96, 136, 40); text-transform: inherit; font-size: 12px; text-decoration: underline;
}

/* NEW ADDITIONS FOR R8 RELEASE STYLING FIX - Chantel 30 July 2014 */

#loginContent a#resetPasswordDialog {
    display: block;
    font-weight: normal;
}
.ui-icon {
    display: inline-block;
    float: left;
    margin-right: 5px;
}
.additionalInfo ul {
    margin-bottom: 5px;
}
#svcTransaction {
    margin: 0;
    width: 100%;
}
#svcTransaction .tableContentWrapper {
    height: auto;
}
#ui-datepicker-div {
    border: 1px solid #ddd;
}
table.ui-datepicker-calendar a.ui-state-default {
    background: none;
    color: #8CC63F;
    font-size: 12px;
    text-align: center;
    border: 1px solid #ccc;
}
table.ui-datepicker-calendar a.ui-state-active {
    border: 1px solid #ccc;
    background: none;
    background-color: #EFEFEF;
    font-weight: bold;
    color: #8CC63F;
}
.ui-datepicker-next span, .ui-datepicker-prev span {
    position: inherit;
    top: 0;
    margin-top: -3px;
}
.ui-datepicker-next span {
    left: 3px;
}
.ui-datepicker-prev span {
    left: 5px;
}
.ui-datepicker-next span.ui-icon-circle-triangle-e {
    background: url("../images/general/button-sprite_F925755021553S0KFKA-_.png") no-repeat scroll -37px -142px transparent;
    width: 30px;
    height: 33px;
}
.ui-datepicker-prev span.ui-icon-circle-triangle-w {
    background: url("../images/general/button-sprite_F925755021553S0KFKA-_.png") no-repeat scroll left -142px transparent;
    width: 30px;
    height: 33px;
}
.ui-datepicker-header a.ui-state-hover {
    background: none;
    border: none;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-header {
    border-bottom: 1px solid #D8D8D1;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 1px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    background: url("../images/general/ui-bg-month_F925755021553S0KFKA-_.gif") repeat-x scroll 0 0 transparent;
    height: 23px;
    color: #666;
    padding-top: 5px;
}
.ui-datepicker select.ui-datepicker-year {
    width: 42%;
}
td.dataTables_empty {
    padding: 5px 10px;
}
.dataTables_info, .dataTables_paginate {
    margin-top: 10px;
}

.wordwrapServiceName {
    width:120px;
    word-wrap:break-word;      /* IE */
}