/* Copyright (C) 2007 - 2009 YOOtheme GmbH */

/*
 * This CSS file is for customization purpose only
 */ 

div.module div.yoo-gallery {
	margin: 15px auto 5px auto;
	width: 600px;
}
.calculator {width: 700px; margin: 0 auto;}


/* root element for tabs  */
ul.tabs { list-style:none; margin:0!important; padding:0; height:30px; display: none; }

/* single tab */
ul.tabs li { float:left; text-indent:0; padding:0; margin:0!important; list-style-image:none!important; }

/* link inside the tab. uses a background image */
ul.tabs a { font-size:20px; display:block; height:30px; line-height:30px; width:111px; text-align:center; text-decoration:none; color:#000; padding:0; margin:0;  background: #d5d5d5; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-top-left-radius: 7px;}
ul.tabs a:active { outline:none;  }

/* when mouse enters the tab move the background image */
ul.tabs a:hover { background-position:-652px -31px; color:#fff; }

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current,ul.tabs a.current:hover,ul.tabs li.current a { background: #2ea6e4; cursor:default!important; color:#fff !important; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-top-left-radius: 7px;}

ul.tabs a.w2 { background-position:-366px 0; width:200px; }
ul.tabs a.w2:hover { background-position:-366px -31px; }
ul.tabs a.w2.current { background-position:-366px -62px; }


/* initially all panes are hidden */
div.panes {background: #2ea6e4; margin-top: 0px;padding: 10px; width: 675px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-right-radius: 7px; -webkit-border-bottom-left-radius: 7px;}
div.panes div.pane { display:none;}
div.panes ul {list-style-type: none; padding: 0px; margin: 0px auto; width: 660px;}
div.panes ul li {float: left; width: 200px; padding: 130px 10px 0; }
div.panes ul li.debtli {background: transparent url(../images/debt.png) 50% 0 no-repeat;}
div.panes ul li.monthsli {background: transparent url(../images/date.png) 50% 0 no-repeat;}
div.panes ul li.minpli {background: transparent url(../images/wallet.png) 50% 0 no-repeat;}
div.panes ul li label {clear: both; float: none; width: 200px; display: block; font-size:15px;}
div.panes input[type=text], div.panes select {font-size: 20px; width: 190px; padding: 3px 5px;}
div.panes input.largebox {width: 20px; height: 20px; line-height: 20px; float: left; margin-top: 17px;}
div.panes h2 {color: #fff;}
.boxtext {line-height: 20px; padding-top: 15px; font-size: 13px; margin: 0;}
/*calculator typo*/
.titcapt {font-size: 75%;}

div.panes button {padding: 5px 10px; background: #c9eb87; font-size: 18px; border: 1px #86c212 solid; width: 140px; }
div.panes a.links {padding: 8px 10px; background: #c9eb87; font-size: 15px; border: 1px #86c212 solid; height: 40px; position: relative; bottom: 2px;}
div.panes button.next {margin-left: 500px; margin-top: 15px;}
div.panes button.prev {margin-left: 20px; margin-top: 15px; width: 180px; }
.disclaimer {text-align: justify; font-size: 90%; line-height: 100%;}
.calculator h2 {margin-top: 0; text-align: center;}
span.yellow {color: #faed19;}
.start-here {position: absolute; top: 40px; left: 10px;}
/*table */
div.panes table {width: 666px; font-size: 15px; border: 0 ;border-collapse: collapse;  }
div.panes table td, div.panes table th {width: 166px; padding: 3px 0px; border-collapse: collapse;}
div.panes table td {border-bottom: 2px solid #2ea6e4;  margin: 0px;  text-align: center;}
div.panes .rtable {background: #afddf5; padding: 15px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
div .rchart {width: 100%; margin: 0 auto; font-size: 15px; font-weight: bold; clear: both;}
div .chart1 .total1, div.chart2 .total2 {position: relative; top: 40%; width: 100%; text-align: center;}
div .chart1 {background: #afddf5 url(../images/chart1.png) 0 0 no-repeat; display: block; width: 80px; float: left; border-bottom: 3px #971717 solid; margin-left: 206px;}
div .chart2 {background: #afddf5 url(../images/chart2.png) 0 0 no-repeat; display: block; width: 80px; float: left; margin-left: 86px; border-bottom: 3px #659717 solid; margin-top: 100px;}
div .charrow {display: block; width: 80px; float: left; margin-left: 86px;}
.clr {clear: both;}

/*Custom Styling */
p {text-align: justify;}
.bold {font-weight: bold;}
.content-block {margin-bottom: 15px;}
.content-block p {text-align: justify;}
.content-block h3 {color: #2293C2; font-size: 120%;}
.article-block {text-align: justify;}
.article-block img {margin: 0 0 2px 15px;}
.article-block h4 {color: #077eb0}
.faq p {margin-left: 5%;}
.faq h4 {color: #2293C2;}

/* Contact Form */
form#contact input[type=text] {width: 95px;}
form#contact td, form#contact tr {padding: 0;}
form#contact label {font-size: 90%; width: 70px; display: block; text-align: left; padding-left: 10px;}
form#contact textarea {width: 166px; margin-left: 11px; margin-bottom: 10px;}