/* TYPOGRAPHY
------------------------------- */
body, input, textarea, select
{font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;}

body {color: #999;}

h1, h2, h3, h4, h5, h6,
input, textarea, select, th {color: #666;}

small
{color: #999;
font-weight: normal;}


/* BODY (background styles)
------------------------------- */
body
{background: #B8DFDF url(../images/background-gradient.jpg) repeat-x;
padding: 15px 0 0 0;
margin: 0;}

html {overflow-y: scroll;} /* force FF to display scrollbar on short pages */


/* LINKS
------------------------------- */
a
{color: #66BBEE;
text-decoration: none;}

a:visited {color: #66BBEE;}

a:hover {text-decoration: underline;}


/* LAYOUT
------------------------------- */
#wrapper
{width: 910px;
margin: auto;
position: relative;}

/* HEADER */
#header
{overflow: hidden;
margin-bottom: 25px;}

	#header h1
	{float: left;
	margin: 0;}
	
		#header h1 a
		{background: url(../images/kachingle-logo.png) no-repeat;
		text-indent: -5000px;
		display: block;
		width: 233px;
		height: 56px;}

#nav
{font-size: 11px;
overflow: hidden;
float: right;}

	#nav li
	{font-weight: bold;
	text-align: center;
	display: block;
	padding-top: 3px;
	width: 68px;
	height: 22px;
	float: left;}
	
		#nav li a, #nav li a:visited {color: #00AEEF;}
	
	#nav li.current {background: url(../images/nav-current.png) no-repeat;}

/* MAIN-CONTENT ---- */
#main-content, #main-content .wrap1, #main-content .wrap2, #main-content .wrap3 {position: relative;}

#main-content
{background: #FFF;
border-left: 1px solid #BBD7D7;
border-right: 1px solid #BBD7D7;
clear: both;}

	#main-content .wrap1
	{background: url(../images/content-tl.png) no-repeat top left;
	margin: 0 -1px;}
	
	#main-content .wrap2 {background: url(../images/content-tr.png) no-repeat top right;}
	
	#main-content .wrap3 {background: url(../images/content-b.png) repeat-x bottom;}
	
	#main-content .content-body
	{background: url(../images/content-bl.png) no-repeat bottom left;
	padding: 20px;
	padding-right: 16px;
	overflow: hidden;}

/* columns */
.main-col
{width: 645px;
float: left;}
	
	.main-col h2
	{color: #81C441;
	font-weight: normal;
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 5px;}
	
		.main-col h2 em
		{color: #CCC;
		font-style: normal;}
	
	.main-col h3
	{font-size: 16px;
	margin-bottom: 5px;}
	
	.main-col p
	{margin-top: 0;
	margin-bottom: 2em;}
	
	/* data table */
	.main-col table {margin: 10px 0 10px 0;}
	
	.main-col th
	{border-top: 1px solid #EFEFEF;
	border-bottom: 1px solid #EFEFEF;
	font-size: 11px;
	padding: 5px 10px;}
	
	.main-col th.site-list {border-left: 1px solid #EFEFEF;}
	
	.main-col th.stats {border-right: 1px solid #EFEFEF;}
	
		.main-col th ul {overflow: hidden;}
		
		.main-col th li
		{border-right: 1px solid #CCC;
		font-size: 11px;
		line-height: 1;
		display: block;
		float: left;
		padding: 0 6px;}
		
		.main-col th li.current-view
		{font-weight: bold;
		font-size: 12px;}
		
		.main-col th li.first-child {padding-left: 0;}
		
		.main-col th li.last-child {border: none;}
		
		/* form */
		.main-col th label {padding-left: 10px;}
		
		.main-col th select {vertical-align: middle;}
		
		.main-col th form, .main-col th form p {display: inline;}
		
			.main-col th form * {margin: 0;}
		
	.main-col td
	{border-bottom: 1px dotted #CCC;
	padding: 10px;}
	
		.main-col td h3 {font-size: 16px;}
		
		.main-col td h3, .main-col td p
		{margin-top: 0;
		margin-bottom: 6px;}
		
		td.coins, td.site {vertical-align: top;}
		
		td.coins {width: 8px;}
		
		td.site {padding-left: 0 !important;}
		
		td.stats
		{width: 275px;
		padding-right: 0;}
		
			td.stats p
			{color: #666;
			font-size: 13px;}
			
			td.stats small {font-size: 11px;}

.supporting-col
{width: 206px;
padding-bottom: 50px;
float: right;}

/* FOOTER ---- */
#footer {padding: 7px 0;}

	#footer ul {overflow: hidden;}
	
	#footer li
	{background: url(../images/dot.png) no-repeat right;
	font-weight: bold;
	display: block;
	padding-left: 10px;
	padding-right: 14px;
	float: left;}
	
	#footer li.first-child {padding-left: 0;}
	
	#footer li.last-child
	{background: none;
	padding-right: 0;}

	#footer a, #footer a:visited {color: #659F9F;}
	
	#footer .general-info {float: left;}
	
	#footer .legal-info
	{float: right;
	margin-right: 95px;}


/* PAGE ELEMENTS
------------------------------- */
.current, .current a, .current a:visited
{color: #81C441 !important;
font-weight: bold;}

.coins-decoration
{background: url(../images/coins.png) no-repeat;
width: 124px;
height: 116px;
position: absolute;
right: -35px;
bottom: -20px;}

/* avatar image and text sub-columns */
.col-wrapper {overflow: hidden;}

.image-col
{width: 60px;
float: left;}

.text-col {margin-left: 70px;}

/* FEEDBACK TAB ---- */
.feedback
{width: 32px;
height: 102px;
position: fixed;
z-index: 5;
top: 140px;
right: 0;}

	.feedback a
	{background: url(../images/feedback.png) no-repeat;
	outline: none;
	text-indent: -5000px;
	display: block;
	width: 32px;
	height: 102px;}

/* BOXES ---- */
.block {margin-bottom: 20px;}

.box, .box-wrap1, .box-wrap2, .boxbody {position: relative;}

.box {font-size: 11px;}

.box-heading, .box-body {overflow: hidden;}

.box-heading *
{line-height: 1;
margin: 0 !important;}

/* Main Column Boxes 
-------------------- */
.main-col .box-heading h3
{color: #888;
font-size: 20px;}

.main-col .box-body h4 {font-size: 14px;}

	.main-col .box-body h4 small
	{font-weight: bold;
	font-size: 11px;}

.main-col .box-body h4, .main-col .box-body p
{margin-top: 0;
margin-bottom: 8px;}

/* HOW-IT-WORKS and generic blue box ---- */
.how-it-works {margin-top: 15px;}

.how-it-works, .blue-box
{background: #F1F8F8 url(../images/blue-box-tl.png) no-repeat top left; /* 2 long sides */
margin-left: 0;}

	.how-it-works .box-wrap1, .blue-box .box-wrap1 {background: url(../images/blue-box-tr.png) no-repeat top right;}
	.how-it-works .box-wrap2, .blue-box .box-wrap2 {background: url(../images/blue-box-bl.png) no-repeat bottom left;}
	.how-it-works .box-wrap3, .blue-box .box-wrap3 {background: url(../images/blue-box-br.png) no-repeat bottom right;}
	
	.how-it-works .box-body, .blue-box .box-body {padding: 10px;}
	
	.how-it-works .box-heading
	{padding: 10px;
	padding-bottom: 0;}
	
		.how-it-works .box-heading h3
		{float: left;
		padding-top: 5px;}

.learn-more
{background: url(../images/learnmore-button.jpg) no-repeat;
outline: none;
font-size: 15px;
display: block;
padding-top: 8px;
padding-left: 31px;
width: 183px;
height: 26px;
margin-left: 8px !important;
float: right;}

.learn-more, .learn-more:visited, .learn-more:hover
{color: #659F9F;
text-decoration: none;}

.learn-more:hover {background-position: 0 -38px;}

.learn-more:active
{color: #FFF;
background-position: 0 -77px;}

/* NEWS-BOX ---- */
.news-box .box-heading
{border-bottom: 1px solid #DDD;
padding-bottom: 5px;
margin-bottom: 5px;}

	.news-box .box-heading h3 {float: left;}
	
	.news-box .box-heading a
	{display: block;
	padding-top: 5px;
	float: right;}

/* 3 columns */
.box-body .column
{width: 31%;
margin-right: 2%;
float: left;}

/* Supporting Column Boxes
---------------------------- */
.supporting-col .block {margin-left: 3px;}

.supporting-col .box
{background: url(../images/shadowborder-tl.png) no-repeat top left; /* 2 long sides */
margin-left: 0 !important;}

	.supporting-col .box-wrap1 {background: url(../images/shadowborder-tr.png) no-repeat top right;} /* long right side */
	.supporting-col .box-wrap2 {background: url(../images/shadowborder-bl.png) no-repeat bottom left;} /* long bottom side */
	.supporting-col .box-wrap3 {background: url(../images/shadowborder-br.png) no-repeat bottom right;}
	
	.supporting-col .box-body
	{padding: 15px;
	overflow: visible;}
	
		.supporting-col .box-body h2
		{font-size: 16px;
		margin-top: 0;
		margin-bottom: 4px;}
		
		.supporting-col .box-body p {margin: 0;}

/* FILTER-BOX ---- */
.filter-box form p {margin: 0;}

.filter-box input.text {width: 170px;}

.filter-box h2
{background: url(../images/pointer.png) no-repeat;
height: 21px;
padding-left: 20px;
position: relative;
margin-left: -21px;}

/* JOIN-BUTTON */
.join-button a
{background: url(../images/join-now-button.png) no-repeat;
text-indent: -5000px;
display: block;
width: 200px;
height: 51px;}

/* PROFILE-BOX ---- */
.profile-box {color: #999;}

	.profile-box .col-wrapper {margin-bottom: 8px;}
	
	.profile-box h3
	{font-size: 14px;
	margin: 0;}
	
	.profile-box .avatar
	{border: 1px solid #CECECE;}

/*  SUBNAV-BOX ---- */
.subnav-box .box-body
{padding-top: 5px;
padding-bottom: 5px;}

.subnav-box li
{border-bottom: 1px dotted #CCC;
display: block;
padding: 5px 0;}

.subnav-box li.last-child {border: none;}

/* TABS ---- */
.tabs
{position: relative;
margin-right: 15px;
margin-top: -25px;
clear: both;
overflow: hidden;
float: right;}

	.tabs li
	{background: url(../images/tabs.png) no-repeat;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	display: block;
	padding-top: 8px;
	width: 154px;
	height: 22px;
	float: left;}
	
	.tabs li a {display: block;}
	
	.tabs li, .tabs li a, .tabs li a:visited {color: #FFF;}
	
	.tabs li a:hover {text-decoration: none;}
	
	.tabs li.current {background-position: 0 -35px;}

/* PAGER ---- */
.pager span
{border: 1px solid #DDD;
border-left: none;
white-space: nowrap;
text-align: center;
display: block;
float: left;}
	
.pager .previous {border-left: 1px solid #DDD;}

.pager a
{color: #999;
display: block;}
	
.pager a:hover {text-decoration: none;}

.pager a, .pager .ellipsis, .pager .current, .pager .next, .pager .previous
{padding: 4px 7px;}

.pager .number, .pager .ellipsis {font-weight: bold;}

.pager .current
{background: url(../images/current-page.png) no-repeat;
border: none !important;
padding: 0;
padding-top: 7px;
width: 30px;
height: 25px;
position: relative;
top: -4px;
left: -1px;}

/* cursors */
.pager span {cursor: pointer;}
.pager .ellipsis, .pager .current {cursor: default;}

/* grey out inactive page links */
.pager .next, .pager .previous {color: #DDD;}

.pager .active
{color: #999;
padding: 0;}

/* WARNINGS, NOTICES ---- */
.success
{color: #89B94A;
font-weight: bold;}

.warning, .warning-note {color: #DB6D3C;}

.warning-note
{background: #FDEEE7 url(../images/widget/warning.png) no-repeat 5px 5px;
padding: 5px;
padding-left: 28px;
margin: 5px 0;}

	.warning-note p {margin: 0;}


/* DIALOG BOX (used on Login Page)
------------------------------- */
.dialog
{width: 444px;
margin: auto;}

	.dialog-heading h2
	{background: url(../images/dialog/dialog_header_final.png) no-repeat;
	text-indent: -5000px;
	width: 444px;
	height: 91px;
	margin: 0;}

.dialog-body
{background: url(../images/dialog/dialog-bottom.png) no-repeat bottom;
padding-bottom: 8px;}

.d-wrap-inner
{background: url(../images/dialog/dialog-bg.png) no-repeat top;
padding: 40px;}

.dialog-body, .dialog-body input {font-size: 15px;}

	/* form */
	.dialog label
	{display: block;
	width: 80px;
	padding-top: 5px;
	float: left;}
	
	.dialog rlabel
	{display: block;
	width: 32px;
	padding-top: 0px;
	float: left;}
	
	.dialog input.text
	{background: #F9FEFE url(../images/text-input-bg.png) no-repeat;
	border: 1px solid #CCC;
	width: 265px;
	padding: 5px;}
	
	.dialog-body form ol li p
	{font-size: 13px;
	padding-left: 80px;}
	
	.dialog-body form .controls
	{text-align: right;
	padding-right: 1px;}
	
		.dialog-body form .controls .login_button
		{background: url(../images/dialog/login-button.jpg) no-repeat;
		border: none;
		text-indent: -5000px;
		width: 165px;
		height: 54px;}

		.dialog-body form .controls .kachingle_button
		{background: url(../images/dialog/kachingle-button.jpg) no-repeat;
		border: none;
		text-indent: -5000px;
		width: 167px;
		height: 54px;}

		.dialog-body form .controls .cancel_button
		{background: url(../images/dialog/cancel-button.jpg) no-repeat;
		border: none;
		text-indent: -5000px;
		width: 166px;
		height: 54px;}


/* GENERAL TAGS
------------------------------- */
a img {border: none;}

/* FORMS ---- */
form
{margin: 0;
padding: 0;}

	form ol
	{list-style-type: none;
	margin: 0;
	padding: 0;}
	
		form ol li
		{margin-bottom: 10px;
		overflow: hidden;}
		
			form ol li p {margin: 5px 0 0 0;}

label {font-weight: bold;}

input.text {padding: 2px;}

input.checkbox, input.radio
{vertical-align: middle;
width: auto;
padding: 0;
margin: 0;}

/* LISTS ---- */
ul
{list-style-type: none;
margin: 0;
padding: 0;}

/* TABLES */
table
{border: none;
border-collapse: collapse;
width: 100%;}

th
{text-align: left;
font-weight: normal;
white-space: nowrap;}

	th * {line-height: 1;}

