/****************************************************************************

tagesgeldrechner.de - main stylesheet 
v.1 - June 2009 - domenica lucifora - kontakt@deeluxe.de


TABLE OF CONTENTS
-----------------

	- reset styles
	- base
	- grid
	- global elements
		- logo
		- headlines
	- elements
		- compare
			- form
		- recommendation
		- results
			- table
		- detailinfo
		- faq
		- googleads
		- footer
	- fontsizes and lineheights
	- helpers
	
	
COLOR DEFINITION
----------------

	background										#fff;
	background (gradient)							#dadada to #fdfdfd;
	table headline (kind of vanilla)				#fefcf7;
	header (lightblue)								#edf1fa;
	links (middleblue)								#0e8bd1;
	links hover										#000;
	q&a links										#048fe5;
	base text color 								#666;
	secondary text color (lighter gray)				#a7a7a7;
	third text color (dark grey) 					#333;
	headlines (dark blue)							#0c2c4b;


*****************************************************************************/

/* --- RESET (from the blueprint-framework)--- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
a { outline: none; }
legend, caption { display: none; }


/* --- BASE --- */

body {
	background: #fff;
	color: #666;
	font: 11px "Lucida Grande", "Verdana", "Lucida Sans", Arial, Helvetica, sans-serif;
	text-align: center;
}
a {
	color: #0e8bd1;
	text-decoration: underline;
}
a:hover {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #0e8bd1;
	text-decoration: underline;
}


/* --- GRID --- */

div.grid-head-wrap {
	background: #edf1fa;
	padding: 8px 0;
	text-align: left;
}
		div.grid-head {
			margin: 0 auto;
			width: 940px;
		}
div.grid-wrap-content {
	background: url(../images/layout/bg_content.png) repeat-x #fdfdfd left bottom;
	padding: 30px 0;
	text-align: left;
}
		div.grid-content {
			margin: 0 auto;
			width: 940px;
		}
				div.box {
					width: 460px;
				}
div.grid-content-secondary {
	margin: 0 auto;
	padding: 40px 40px 0 45px;
	text-align: left;
	width: 940px;
}
div.grid-footer {
	background: url(../images/layout/bg_footer.gif) repeat-x top left;
	padding: 22px 0;
	text-align: left;
}


/* --- GLOBAL ELEMENTS --- */
/* - logo - */

.grid-head h1 {
	display: block;
	height: 74px;
	width: 685px;
}


/* - headlines - */

.box h2  {
	background: url(../images/layout/bg_box_headline.png) no-repeat left top;
	color: #0c2c4b;
	padding: 10px 25px 5px;
}


/* --- ELEMENTS --- */
/* - compare - */

div.compare {
	background: url(../images/layout/bg_box_white.png) no-repeat left bottom;
	float: left;
}
		.compare .intro {
			background: #f6f7f8;
			border-bottom: 1px solid #d0d0d0;
			padding: 13px 25px 8px;
		}


/* form */

.compare form {
	margin: 16px 37px;
}
.compare fieldset {
	float: left;
	width: 45%;
}
		fieldset.fieldset-last {
			float: right;
		}
.compare label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}
		.compare label.radio-label {
			float: left;
			margin: 4px 0;
			width: 150px;
		}
.compare input.text {
	background: #f6f6f6;
	color: #000;
	margin-bottom: 8px;
	padding: 2px 4px;
	width: 155px;
}
.compare .kreditnach2 {
	background: #f6f6f6;
	color: #000;
	padding: 2px 4px;
	width: 155px;
}
.compare input.radio {
	margin-bottom: 4px;
}
.compare select {
	width: 175px;
}
.compare input.submit {
	background: url(../images/layout/btn_compare_sprite.png) no-repeat left top;
	border: 0;
	cursor: pointer;
	height: 35px;
	margin-top: 24px;
	width: 163px;
}
		.compare input.submit:hover { 
			background: url(../images/layout/btn_compare_sprite.png) no-repeat left bottom;
		}


/* - recommendation - */

div.recommendation {
	background: url(../images/layout/bg_box_bluedotted.png) no-repeat left bottom;
	float: right;
	position: relative;
	z-index: 1;
}
		h3.attention {
			background: url(../images/layout/btn_attention.gif) no-repeat left top;
			height: 60px;
			right: 40px;
			position: absolute;
			text-indent: -8000px;
			top: 8px;
			width: 60px;
			z-index: 2;
		}
		.recommendation span.description {
			display: block;
			margin-top: 35px;
			width: 85%;
		}
		.recommendation ul {
			clear: both;
			list-style: none;
			margin: 25px 30px;
			text-align: center;
		}
				.recommendation li {
					background: url(../images/layout/bg_white_70transparent.png) repeat-x left top;
					float: left;
					margin-right: 4px;
					padding: 12px 33px;
				}
						li.percentage {
							padding: 8px 32px 7px;
						}
				.recommendation a:hover {
					color: #0e8bd1;
					text-decoration: underline;
				}


/* - results - */

div.results {
	background: #fff;
	float: left;
	margin-top: 29px;
	width: 939px; /* fixes a 1px overhanging of background */
}
	.results h2 {
		background: url(../images/layout/bg_box_headline_wide.png) no-repeat left top;
		color: #0c2c4b;
		margin-top: -4px;
		padding: 10px 25px 5px;
	}
			.results h2 span {
				color: #777;
				font-weight: 400;
				margin-left: 55px;
			}


/* table */

table {
	table-layout: fixed;
	margin: 20px;
	width: 898px;
}
		th {
			background: #fefcf7;
			border-bottom: 1px solid #d5d3ce;
			color: #999;
			padding: 4px 15px;
		}
		tr.even {
			background: #fff;
		}
		tr.odd {
			background: #f6f7f8;
		}
		tr:hover {
			background: #e5f1fa;
		}
		td {
			border-bottom: 1px solid #ccc;
			padding: 15px;
			vertical-align: middle;
		}
				td img {
					display: block;
				}
				td a {
					display: block;
					margin-left: -10px;
				}
						td a:hover {
							color: #000;
							text-decoration: none;
						}
				td a.link-image {
					margin:0;
				}
		td.account-name {
			font-weight: 700;
		}
				a.link-button {
					background: url(../images/layout/btn_gobank_sprite.png) no-repeat left top;
					display: block;
					height: 18px;
					text-indent: -8000px;
					width: 111px;
				}
						a:hover.link-button {
							background-position: left bottom;
						}
				td.account-name img {
					float: right;
					margin: -5px -10px;
				}
.bar {
   padding: 4px 0px;
   }
/* detailinfo */

div.details {
	background: url(../images/layout/bg_box_lightblue.png) no-repeat left bottom #edf1fa;
	float: left;
	padding-bottom: 70px;
	width: 940px;
}
		.details h2 {
			
			color: #0c2c4b;
			margin-bottom: 25px;
			padding: 10px 25px 5px;
		}
		div.vendor {
			display: inline;
			float: left;
			margin: 0 50px 0 25px;
		}
				.vendor img {
					display: block;
				}
				.vendor span {
					display: block;
					margin-top: 15px;
				}
		.details ul {
			float: left;
			list-style: none;
			margin-right: 15px;
			width: 385px;
		}
				.details li {
					background: url(../images/layout/el_bullet_check.gif) no-repeat left top;
					margin-bottom: 8px;
					padding-left: 18px;
				}
		.details img.award {
			float: left;
		}
		.details a.link-button {
			background: url(../images/layout/btn_application_sprite.png) no-repeat left top;
			display: block;
			float: right;
			height: 35px;
			margin: 25px 35px 0 0;
			text-indent: -8000px;
			width: 163px;
		}
				a:hover.link-button {
					background-position: left bottom;
					
				}
		.details hr {
			border: 0;
			border-bottom: 1px solid #b6cee6;
			clear: both;
			height: 0;
			margin-top: 9px;
			margin-bottom: 18px;
			padding-top: 9px;
			padding-bottom: 9px;
		}


/* - faq - */

.grid-content-secondary .headline-faq {
	background: url(../images/layout/bg_doubleheadline.gif) repeat-x left bottom;
	color: #000;
	padding-bottom: 11px;
}
.grid-content-secondary h2 { 
	float: left;
}
		.grid-content-secondary .headline-faq span {
			color: #999;
			display: block;
			float: right;
			font-weight: 400;
			margin-top: 10px;
		}
.grid-content-secondary h3 {
	border-top: 1px solid #f1f1f1;
	color: #333;
	font-weight: 700;
	margin: 14px 0 10px;
	padding-top: 9px;
}
		.grid-content-secondary h3.first {
			border-top: 0;
		}
		.grid-content-secondary h4.open {
			color: #000;
			font-weight: 700;
		}
				.grid-content-secondary h4.open:hover {
					text-decoration: none;
				}
		.grid-content-secondary h4 {
			color: #048fe5;
			cursor: pointer;
			font-weight: 400;
		}
				.grid-content-secondary h4:hover {
					text-decoration: underline;
				}
		.grid-content-secondary div.info {
			background: url(../images/layout/el_arrow_right.gif) no-repeat left top;
			color: #000;
			margin: 10px 0;
			padding-left: 30px; 
			width: 805px;
		}

/* - googleads - */

div.googleads {
	border-top: 1px solid #b7bbbe;
	margin-top: 30px;
	padding: 32px 0;
	width: 940px;
}


/* - footer - */

ul.social {
	float: left;
	list-style: none;
	margin: 0 25px 20px 90px;
}
		.social li {
			float: left;
			height: 14px;
			margin-right: 10px;
			text-indent: -8000px;
			width: 14px;
		}
				li.rss { background: url(../images/layout/ic_feed.gif) no-repeat left top; }
				li.delicious { background: url(../images/layout/ic_delicious.gif) no-repeat left top; }
				li.twitter { background: url(../images/layout/ic_twitter.gif) no-repeat left top; }
				.social a {
					display: block;
					height: 14px;
					width: 14px;
				}
ul.navigation-legal {
	color: #b1b1b1;
	list-style: none;
}
		.navigation-legal li {
			float: left;
			margin: 0 8px;
		}
				.navigation-legal a {
					color: #b1b1b1 !important;
					text-decoration: none !important;
				}
						.navigation-legal a:hover {
							text-decoration: underline !important;
						}
span.copyright {
	color: #b1b1b1;
	display: block;
	float: right;
	margin-right: 80px;
}

/* --- FONTSIZES AND LINE-HEIGHTS --- */

.grid-content-secondary h2					{ font-size: 1.82em; }
h2											{ font-size: 1.45em; }
.percentage									{ font-size: 1.7em; }
.grid-content-secondary h3					{ font-size: 1.24em; }
h2 span										{ font-size: .68em; }
.grid-content-secondary h2 span				{ font-size: .55em; }


/* --- HELPER ---  */

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.hidden {
	display: none;
}

/* --- ADMIN --- */
.admin
{ 
	margin: 15px 0px 15px 0px; 
	padding: 0; 
	font: normal 12px Verdana, Tahoma, Arial; 
	color: #999999; 
}
.admin input
{ 
	margin: 0px 0px 5px 0px; 
	padding: 2px; 
	border: 1px solid #666666; 
	width: 565px; 
	font: bold 16px Verdana, Tahoma, Arial; 
	color: #000000; 
}
.admin input:hover
{ 
	border: 1px solid #000000; 
}
.admin textarea	
{ 
	margin: 0px 0px 5px 0px; 
	padding: 2px; 
	border: 1px solid #666666; 
	width: 565px; 
	font: normal 14px Verdana, Tahoma, Arial; 
	color: #000000;
}
.admin	textarea:hover
{ 
	border: 1px solid #000000;
}