/*
Theme Name: sparplan.de
Version: 0.1
Author: 3task.de
Author URI: http://www.3task.de
*/


@import "css/reset.css"; 
@import "css/tools.css"; 


/* base
------------------------------------------------------------------ */
html { background:#f8f8f8 url(images/bg_html.jpg) center 5px no-repeat; text-align:center; }
html, body { height:100%; }

/* container
------------------------------------------------------------------ */
#page { width:968px; min-height:100%; margin: 0 auto -100px auto; text-align:left; margin:0 auto; display: block; position: relative; }
#contentbox { padding:308px 0 0 0; }
#contentbox .inner { background:url(images/bg_sidebar.png) repeat-y; min-height:675px; }


/* div#breadcrumb
------------------------------------------------------------------ */
#breadcrumb { position: absolute; top: 196px; left:258px; font-size: 11px; }


/* div#content
------------------------------------------------------------------ */
#content { margin-top:-50px; padding: 0px 0px 40px 0px; width: 710px; float: right; text-align: justify; }

.entry { padding: 30px 0 10px 0; }

#content hr { background: url(images/bg_hr.png) center no-repeat; width: 710px; height: 5px; border: none; padding: 15px 0; }

#content ul, #content ol { padding-left:15px; margin: 10px 0 10px 15px; }
#content ol li,#content ul li { margin-bottom:5px; line-height: 1.3em; }
#content ul li { list-style: disc; }

#content .teaser { position: relative; text-shadow: 1px 1px 1px #343434; color: #fff; background: url(images/img_content_start.jpg) no-repeat; width: 680px; height: 150px; margin: 15px 0; display: block; overflow: hidden; padding: 15px; }
#content .teaser h3 { color: #fff; font-size: 18px; margin: 0; }
#content .teaser ul { margin:15px 0; font-size: 11px; }
#content .teaser a#teaserlink { display: block; width: 200px; height: 30px; position: absolute; left: 155px; top: 137px; text-decoration: none; }

form#rechner { border: 1px solid #c4c4c4; background: #fff url(images/sparschwein.png) top right no-repeat; margin: 0 0 20px 0; }
form#rechner legend { padding: 15px 5px 5px 5px; background: #2971b3; font-size: 18px;  font-family: Tahoma, Helvetica, Arial, Helvetica, sans-serif; line-height:1.1em; color: #fff; }
form#rechner fieldset { padding: 10px; }
form#rechner p { padding: 5px 5px; clear: both; }
form#rechner p strong { font-size: 13px; background: #2971b3; padding: 3px 10px 3px 15px; margin: 0 0 0 -15px; display: inline-block; color: #fff; }
form#rechner p a { float: right; text-decoration: none; }

form#rechner fieldset input, form#rechner fieldset select { background: url(images/bg_alt.png) top left repeat-x; padding: 2px 4px; width: 250px; border: 1px solid #C8C7C3; margin: 0 0 0 5px; }
form#rechner fieldset select  { width: 260px; }
form#rechner fieldset label { width: 185px; float: left; display: block; font-size: 11px; }
form#rechner fieldset input:focus,form#rechner select:focus { background:#fff }

input.error { border: 1px solid #ec1219!important; }
p.update { color: #d4484c; font-weight: 700; display: none; }

form#rechner fieldset hr { clear:both; background: none!important; border: none; border-bottom: 1px solid #dfdfdf!important; height:1px!important; width: 690px!important; padding: 0; }
form#rechner p.send input { cursor: pointer; width: auto; font-weight: 700; color: #547a09; font-size: 18px; margin: 0; }
form#rechner p.send input:focus,form#rechner p.send input:hover { color: #2971b3; }

div#results { border: 1px solid #c4c4c4; background: #fff url(images/sparschwein.png) top right no-repeat; margin: 0 0 20px 0; padding: 15px 0; }
div#results p { padding: 10px 15px 0 15px; clear: both; }
div#results h3 { font-size: 13px; background: #2971b3; padding: 3px 10px 3px 15px; color: #fff; font-weight: 700; display: inline;  }
div#results strong { display: block; width: 185px; float: left; display: block; font-size: 11px; }

div#results table { width: 675px; margin: 15px 15px 5px 15px;border-collapse: collapse; }
div#results table tr.alt td { background: #f4f4f4; }
div#results table tr th { background: url(images/bg_alt.png) top left repeat-x;  padding: 4px; border: 1px solid #dfdfdf; border-top: none; font-weight: 700; font-size: 11px; }
div#results table tr td { padding: 4px; border: 1px solid #dfdfdf }


/* div#header
------------------------------------------------------------------ */
#header a#logo { position:absolute; top:138px; right: 7px; }


/* div#sidebar
------------------------------------------------------------------ */
#sidebar { float: left; width: 210px; padding: 0 0 40px 4px; margin-top:-50px; }
#sidebar ul { border-bottom: 1px solid #c4c4c4; margin: 0 0 40px 0; }
#sidebar ul ul { border-bottom: none; border-top: 1px solid #c4c4c4; margin:0; display: none; }
#sidebar ul ul ul { border-top: none; }
#sidebar ul li a { white-space: nowrap; color:#343434; text-decoration: none; padding: 0 25px; background:url(images/bg_sidebar_ul_li_a.jpg) left bottom no-repeat; font-weight: 700; display: block; line-height: 34px; border-top: 1px solid #c4c4c4; }
#sidebar ul ul li a { font-weight: normal; font-size: 11px; background:url(images/bg_sidebar_ul_ul_li_a.png) left top no-repeat; display: block; line-height:22px; border-top: 1px solid #fff; border-bottom: 1px solid #e0e0e0; }
#sidebar ul ul ul li a { padding: 0 25px 0 35px;  }

#sidebar ul li.current_page_item ul, #sidebar ul li.current_page_ancestor ul, #sidebar ul li.current_page_parent ul { display: block; }
#sidebar ul li.current_page_item ul ul, #sidebar ul li.current_page_ancestor ul ul, #sidebar ul li.current_page_parent ul ul { display: none; }
#sidebar ul ul li.current_page_item ul, #sidebar ul ul li.current_page_ancestor ul, #sidebar ul ul li.current_page_parent ul { display: block; }

#sidebar ul li.current_page_item a, #sidebar ul li.current_page_ancestor a,#sidebar ul li.current_page_parent a { background-position: left top; color: #fff; }
#sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_ancestor ul li a, #sidebar ul li.current_page_parent ul li a { color:#343434; }

#sidebar ul ul li.current_page_item a { background-position: left bottom; color:#343434; }
#sidebar ul ul li.current_page_item ul li a { background-position: left top; }
#sidebar ul ul ul li.current_page_item a { background-position: left bottom; }


#sidebar div.box { background: #ebedf0; border-bottom: 1px solid #c4c4c4; margin: 0 0 20px 0; }
#sidebar div.box div.bg { padding: 5px; }
#sidebar div.box div.bg img { display: block; }
#sidebar div.box h3 { background: url(images/bg_sidebar_h3.png) repeat-x; line-height: 30px; font-size: 12px; color: #fff; padding: 0 25px; }

#sidebar div.box #searchform { background: url(images/bg_search.png) no-repeat; height: 48px; width: 184px; padding: 2px; margin: 5px 0 5px 5px; }
#sidebar div.box #searchform p { padding: 0; }
#sidebar div.box #searchform input#s { font-size: 11px; width: 176px; padding: 5px 4px; border: none; background: none; }
#sidebar div.box #searchform input.send { cursor: pointer; float: right; background: none; border: none; width: 98px; height: 15px; margin: 7px 0 0 0; }


/* div#footer
------------------------------------------------------------------ */
#footer { position:relative; width:100%; height: 100px; background: url(images/bg_footer_bg.png) center repeat-x; }
#footer div { font-size: 11px; text-align: right; padding: 40px 0 0 0; margin: 0 auto; width:968px; height: 60px; background: url(images/bg_footer.png) center no-repeat; }
/*#clearfooter { height:100px; clear: both; }*/


/* typography
------------------------------------------------------------------ */
body,input,select,th,td { font: 12px/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif; color:#343434; }
#content { color: #5b5b5b; }
h1,h2,h3,h4,h5,h6 { font-family: Tahoma, Helvetica, Arial, Helvetica, sans-serif; line-height:1.1em; color: #2971b3; font-weight: normal; }

h1 { font-size: 18px; padding: 0 0 7px 0; }
h2 { font-size: 18px; margin: 15px 0 0 0; }
h3 { font-size: 15px; margin: 15px 0 0 0; }

.small { font-size: 11px; }
p { padding: 7px 0; }




/* links
------------------------------------------------------------------ */
a:link,a:visited { color:#2971b3; }
a:hover { text-decoration:none; }

td.kopf {cellspacing: 2px; color:#000000; background-color:#7BA1D8; font-size: 12px; text-align: center; vertical-align: middle; font-weight: bold; }


.TableKopfZentriert { color:#000000; background-color:#7BA1D8; font-size: 12px; text-align: center; vertical-align: middle; font-weight: bold; }

.TableHaupt {background-color:#E9E0DB; font-size: 12px; color: #000000; text-align: center; vertical-align: top; horizontal-align: middle; }

.TableFettCenter {background-color:#DBDBD2; font-size: 12px; color: #000000; text-align: center; vertical-align: middle; font-weight: bold; }

.TableLinks{
	background-color:#DFBBA7; font-size: 12px; color: #000000; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 3px; }

.TableLinksDuenn{ background-color:#DFBBA7; font-size: 12px; color: #000000; text-align: left; vertical-align: top; font-weight: normal; padding: 3px 3px; }

.kopfzeile { color:#000000; background-color:#7BA1D8; font-size: 12px; text-align: center; vertical-align: middle; font-weight: bold; }
table.vergleich { border: outset 1pt; border-collapse: separate; border-spacing: 2pt; padding: 1pt; }



/* Rechner & Vergleich
------------------------------------------------------------------ */
#content .tagesgeldeingabemaske {  width: 678px; background: #eff0f2 url(images/bg_rechner.jpg) right top no-repeat; border: 1px solid #dbdbdb; padding: 15px; position: relative; margin: 20px 0; }
#content .rechner form label span { width: 120px; display: block; float: left; }
#content .rechner form input.submit { font-weight:700; color:#222; padding: 0px 8px }
#content .rechner #kombiprodukte, #content .rechner #einlagensicherung { width: 320px; }
#content .tagesgeldeingabemaske .nofloat label span { float: none; width: auto; font-weight: 700; }
#content .rechner img { border:1px solid #fff }
#content .rechner h3 { background: url(images/icons/calc.png) left top no-repeat; font-weight: 700; margin: 0 0 5px 0; padding: 0 0 5px 36px; border-bottom: 1px solid #dbd9d6; }
#content .rechner p { padding: 3px 0; }


div.rechnerkNav { position: absolute; bottom: 0; right: 0; background: url(images/icons/calc.png) right top no-repeat; clear: both; text-align: right; margin: 15px 0 0 0; padding: 0 39px 5px 0; }
div.rechnerkNav a { display: inline-block;  }
div.rechnerkNav a span { font-weight: 700; font-size: 12px; display: block; margin: 0 2px 0 0; padding: 0 4px 0 6px;  }


table#ultimate_calculator { clear: both; width: 100%; border-collapse: separate; border-left: 1px dotted #C4BEAE; font-family: Tahoma; }
table#ultimate_calculator thead th { text-align: center; line-height: 1.2em; font-family: Helvetica, Tahoma; font-size: 12px; background: #6999C7; border-top:1px solid #b7ac90; vertical-align: middle; color: #fff!important; padding:5px; font-weight: 700; border-right: 1px dotted #f4f4f4; border-bottom: 1px solid #fff; } 
table#ultimate_calculator td, #content #ultimate_calculator table th { padding:5px; text-align: left; font-size: 11px; vertical-align: middle; }
table#ultimate_calculator tbody td { border-right: 1px dotted #C4BEAE; border-bottom: 1px solid #C4BEAE; border-top:1px solid #f4f4f4; vertical-align: top;  }
table#ultimate_calculator td.i8,table#ultimate_calculator th.i8 { width: 40px; white-space: nowrap; text-align: center; }
table#ultimate_calculator td.i3,table#ultimate_calculator td.i4,table#ultimate_calculator td.i5,table#ultimate_calculator td.i6 { text-align: center; white-space: nowrap; font-size: 12px; }
table#ultimate_calculator td.i7,table#ultimate_calculator td.i16 { text-align: center; }
table#ultimate_calculator td.i3 { font-size: 13px; }
table#ultimate_calculator td.i5,table#ultimate_calculator td.i3 { font-weight: 700;}
table#ultimate_calculator td.i7 a { color: #4F00EE; font-size: 13px; font-weight: bold; text-decoration: underline!important; }
table#ultimate_calculator td.i7 a:hover { background: #4F00EE; color: #fff; text-decoration: none!important;  }
table#ultimate_calculator td.i1,table#ultimate_calculator td.i16 { width: 100px; }
table#ultimate_calculator td.i1, table#ultimate_calculator td.i100 { border-bottom: 2px solid #C4BEAE; }
table#ultimate_calculator tr.alt td { background: #f4f4f4 }