@import "form.css";
@import "table.css";


body {
	font-family:Leelawadee,Tahoma, Helvetica, sans-serif;
	font-size:12px;
	background:#dadada url(/images/back.jpg) repeat-x;
}

div, span {
	padding:0;
	margin:0;
}
.clear
{
    clear: both;
	font-size:0;
	height:0;
}

img {
	border:0;
}

nav, header, footer, article, section {
	display:block;
}

.warningText {
	display:none;
	color:red;
}

h1, h3 {
	color:#808080;
}
h2 {
	color:#FF9128;
}

.page {
	position:relative;
	width:960px;
	border:1px solid #c0c0c0;
	background-color:#fff;
    margin: 45px auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	min-height:600px;
	padding-bottom:90px;
}

#footerWrapper {
	position:absolute;
	bottom:0;
}
	footer {
		width:920px;
		height:22px;
		background:url(/images/footer.gif);
		text-align:right;
		color:#fff;
		padding:20px;
		margin-top:60px;
	}

		footer a {
			color:#fff;
			text-decoration:underline;
		}

#title {
	margin:14px;
}


nav.top {
	background-image:url(/images/navback.png);
	height:53px;
	padding-left:10px;
	
}
	ul#menu {
		position:relative;
		list-style:none;
		margin:0;
		padding:0;
	}	
		#menu li {
			margin:0 2px;
			padding:0 10px;
			float:left;
			display:block;
			padding-top:11px;
			border:0px solid #000;
			height:49px;
			top:-3px;
			position:relative;
			cursor:pointer;
		
		}
			#menu li a {
				color:#fff;
				font-size:18px;
				clear:right;
				text-decoration:none;
				position:relative;
				z-index:10;
			}
			#menu li div {
				position:relative;
				z-index:10;
			}
				#menu li div a {
					color:#000;
					font-size:12px;
				}

			#menu li a:hover {
				color:#000;
			}
		#menu li.current { 
			margin:0;
			color:#b3ad00;
		}
			#menu li.current a {
				color:#000;
				font-size:18px;
			}

		#menu li#leftBack, #menu li#rightBack {
			margin:0;
			padding:0;
			background:transparent url(/images/selbackleft.png) no-repeat;
			width:6px;
			margin-left:15px;
			height:61px
		}
		#menu li#rightBack {
			background:transparent url(/images/selbackright.png) no-repeat;
			width:6px;
			margin-left:0;
			margin-right:15px;
		}


		      .lavaLampWithImage li.back {
                        background: url("/images/lava.png") no-repeat right -62px;
						height: 62px !important;
                        z-index: 8;
                        position: absolute !important;
						margin:0 !important;
						padding:0 !important;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("/images/lava.png") no-repeat top left;
                            height: 62px !important;
							margin:0 !important;
							padding:0 !important;
                            margin-right: 12px !important; /* 7px is the width of the rounded shape */
                        }


#main {
	clear:both;
	position:relative;
	top:-8px;
	padding:20px;
	margin-bottom:30px;
}
.sameline {
	white-space:nowrap;
}
#frontBanner {
	height:243px;
	background:url(/images/frontbannerback.png);
	text-align:left;
	position:relative;
	left:-20px;
	top:-19px;
	width:960px;
}

	#frontBanner div {
		border:0px solid #000;
	}

		#frontBannerLeft, #frontBannerMiddle, #frontBannerRight, #frontBannerCenter, #frontBannerCenter2 {
			float:left;
			height:243px;
			width:180px;
		}
			#frontBannerLeft h2, #frontBannerMiddle h2, #frontBannerRight h2 {
				font-size:20px;
				color:#fff;
			}
				#frontBannerLeft h2 a, #frontBannerMiddle h2 a, #frontBannerRight h2 a {
					color:#fff;
					text-decoration:none;
				}
			#frontBannerLeft p, #frontBannerMiddle p, #frontBannerRight p {
				font-size:14px;
				color:#fff;
			}
		#frontBannerLeft {
			padding-left:100px;
			background:url(/images/go.png) no-repeat -5% 40%;
		}
		#frontBanner div#frontBannerCenter, #frontBanner div#frontBannerCenter2 {
			float:left;
			width:3px;
			margin:0 0 0 5px;
			background:url(/images/frontbannercenter.png) no-repeat 0% 0%;
		}
		#frontBannerMiddle {
			padding-left:135px;
			background:url(/images/calc.png) no-repeat -20px 40%;
		}
		#frontBannerRight {
			padding-left:115px;
			background:url(/images/um.png) no-repeat 0% 40%;
		}

#frontpagecontent {
	margin-top:20px;
	position:relative;
	left:-10px;
}
	.loantbl, .sidebar {
		padding:10px;
		float:left;
		width:660px;
		border:0px solid #000;
	}
	.sidebar {
		width:220px;
	}
		section {
			padding:9px;
			margin-bottom:9px;
			width:218px;
			border:1px solid #c1c1c1;
			background-color:#f4f4f4;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
			section h3 {
				font-size:18px;
				font-weight:normal;
				margin:2px;
			}

			section ul {
				margin:0;
				padding:3px 20px;
			}

			section time {
				color:#929292;
			}
			section p {
				margin-bottom:6px;
				margin-top:2px;
			}


a {
	color:#b16d2d;
	text-decoration:none;
}
a:hover {
	color:#000;
	text-decoration:underline;
}

nav.history {
	margin-bottom:6px;
}
	
	nav.navbar {
		border-right:1px solid #cfcfcf;
		border-bottom:1px solid #cfcfcf;
		width:168px;
		display:block;
		background-color:#f4f4f4;
		float:left;
		padding-bottom:20px;
		position:relative;
		top:-19px;
		left:-20px;
	}

		.navbar ul {
			list-style:none;
			margin:0;
			padding:5px;;
		}

			.navbar ul li {
				border-bottom:1px solid #aeaeae;
				height:23px;
				width:150px;
				padding-top:15px;
				padding-left:8px;
			}
				.navbar ul li a {
					text-decoration:none;
					color:#808080;
				}
				.navbar ul li a:hover {
					text-decoration:underline;
				}

	.content {
		float:left;
		padding-left:0;
		padding-top:0;
		width:700px;
		margin-bottom:60px;
	}


#loading 
{
	display:none;
	padding:10px;
	background-color:Yellow;
	color:#000;
	font-size:14px;
	font-weight:bold;
	position:fixed;
	top:5px;
	left:5px;
	z-index:100;
}



/* Panel Tab/button */
.tab {
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
	list-style:none;
}


.tab ul.login li.left {
  	padding: 0;
	width:18px;
	background: url(/images/loginleft.png) no-repeat left 0;

}
.tab ul.login li.right {
  	padding: 0;
	background: url(/images/loginright.png) no-repeat left 0;
	width:18px;

}
.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 36px;
	background: url(/images/loginback.png);
	white-space:nowrap;
}

.tab ul.login li a {
	color: #000;
}

.tab ul.login li a:hover {
	color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	position: relative;
	top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left -19px;}


#toppanel {

    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
	width: 961px;
	background: url(/images/panelback.png);

	height: 171px;
	color: #000;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
	padding-left:10px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

}

#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
}

#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
}

#panel p {
	margin: 5px 0;
	padding: 0;
}

#panel a {
	//text-decoration: none;
	color: #000;
}

#panel a:hover {
	color: white;
}

#panel a-lost-pwd {
	display: block;
	float: left;
}

#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}

#panel .content .left {
	width: 150px;
	float: left;
	padding: 0 15px;
	height:180px;
}
#panel .content .left ul {
	margin:2px;;
	padding:2px;
}

#panel .content .right {
	border-right: 1px solid #333;
}

#panel .content form {
	margin: 0 0 10px 0;
}

#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}

#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}

#panel .content input:focus.field {
	background: #545454;
}

/* sliding panel */




div.nicEdit-panelContain {
	position:fixed;
	top:10px;
	left:20px;
	width:200px;
}
.nicEdit-pane {
	position:fixed;
	top:40px;
	left:350px;
	
}


/*
stuff
*/
#loanFieldset {
	width:480px;
	float:left;
}

#loanCalc {
	float:left;
	clear:right;
	padding-top:50px;
}
#loanCalculator {
	margin-left:40px;
}
#userInfo {
	width:495px;
	float:left;
}
#loanInfo {
	width:445px;
	float:left;
	display:block;
	margin-right:20px;
}
#userInfoLoan {
	width:405px;
	float:left;
}
 #userInfoSidebar {
	width:430px;
	float:left;
}
#loanTbl tr td h3 {
	margin:0;font-style:italic;font-family:Georgia,Palatino,Times New Roman;
}
	#loanTbl tr td a {
		color:#D52298;
	}

.loansTblInfo tr td {
	font-size:11px;
	padding:1px;
	margin:0;
}
.loansTblInfo tr td.header {
	font-weight:bold;
	padding-left:4px;
	text-align:right;
	padding-right:3px;
}
.commentTbl tr {
	border-bottom:1px dotted #000;
}
div.commentDatetime {
	font-size:11px;
}
	div.commentDatetime time {
		display:inline;
	}

#AmountSlider, #MaxInterestSlider, .uiSlider {
	width:250px;
	height:15px;
	min-height:0px !important;
	margin-left:191px;
}
.ui-slider-horizontal {
	min-height:0 !important;

}
.ui-slider .ui-slider-handle {
	height:20px !important;
	min-height:0 !important;
}

#tdTotalRepayment {
	font-weight:bold;
	text-decoration:line-through;
}


.accountHeader {
	font-weight:bold;
	margin-left:5px;
	margin-top:3px;
}
.infoHeader {
	padding:3px;
	padding-left:20px;
	height:18px;
	font-size:14px;
	border: solid 1px #c1c1c1;   
	cursor:pointer;
	background:url(/images/next.png) #f4f4f4 no-repeat 2px 4px;
}
	.infoHeader a {
		color:#000;
		text-decoration:none;
	}
a.button, input.skipStepBtn {
	padding:6px;
	display:inline-block;
	border:1px solid #c1c1c1;   
	text-decoration:none;
	background-color:#fff !important;
}
a:hover.button, .skipStepBtn:hover {
	background:#f4f4f4 !important;
}
.message {
    border: 1px solid #4cb24c;
    background-color: #f3faf3;
	padding:6px;
	margin-top:18px;
}

div.nextStep {
	padding:9px;
	margin-bottom:9px;
	width:350px;
	border:1px solid #c1c1c1;
	float:left;
	background-color:#f4f4f4;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	height:80px;
	margin-left:20px;
}
	div.nextStep:hover {
		background-color:#e5e5e5;
	}
	div.nextStep h3 {
		margin:2px;
	}

#howtoTransferMoney {
	display:none;
}

.skipStep {
	text-align:right;
	padding-right:30px;
}

	.skipStep input {
		background-color:#f4f4f4;
	}
#acceptLoan {
	margin-left:60px;
}
#acceptLoan, #declineLoan {
	margin-top:30px;
	font-size:24px;
	font-weight:bold;
	float:left;
	width:250px;
}

.infoBox {
	background-color:#d8e8ff;
	border:1px solid #aaaaaa;
	padding:10px;
	margin:8px;
}

	div#tooltip { 
		background-color:#000; 
		border:1px solid #fff; 
		padding:10px 15px; 
		min-width:200px; 
		max-width:350px;
		display:none; 
		color:#fff; 
		text-align:left; 
		font-size:12px; 
	 
		/* outline radius for mozilla/firefox only */ 
		-moz-box-shadow:0 0 10px #000; 
		-webkit-box-shadow:0 0 10px #000; 
		z-index:2000;
	}
	div#tooltip p 
	{
		margin:7px 0;
		padding:0;
	}
	div#tooltip ul, div#tooltip ol
	{
		margin:3px 25px;
		padding:0;
	}
	div#tooltip ul li
	{
		margin:3px;
		padding:0;
	}
	
	div#tooltip a
	{
		color:#1DA287;
		text-decoration:underline;
	}