/*
Theme Name: OB
Theme URI: http://www.optimal-banking.de/
Description: Design für www.optimal-banking.de auf Basis von amerikakonto.com
Author: OB-Team
Author URI:
Version: 0.1
Tags: ob

License: All rights reserved.
License URI:
*//*
Standard Width: 980px;
*/

/* global */

	html {
	}
	body {
		background-color:#dff3f9;
		color:#333;
		font-family:Calibri,Carlito,sans-serif;
		font-size:1.1em;
		line-height:1.5;
		min-width:320px;
		max-width:980px;
		margin:1ex auto;
		position:relative;
	}


/* #head */

	#head {
		background-color:white;
		padding:10px;
	}
	#lang {
		font-size:small;
		margin-bottom:-10px;
		text-align:right;
		position:relative;
		z-index:11;
	}
	#lang a {
		color:#888;
		text-decoration:none;
		padding-left:.8em;
	}
	#lang span {
		color:#888;
		padding-left:.8em;
	}
	#lang a:hover {
		color:#000;
	}
	#brand {
		margin-top: 1px;
		min-height: 97px;
		padding-left:160px;
		position: relative;
	}
	#brand .logo {
		position:absolute;
		left:0;
		top:0;
		z-index:101;
	}
	#brand .name {
		font-size:3.05em;
		font-weight:bold;
		line-height:1;
		padding-top:5px;
	}
	#brand .name a {
		color:#00b0f0;
		text-decoration:none;
	}
	#brand .description {
	    color: #999999;
	    font-size: 1.2em;
	    line-height: 1.2;
	    padding-top: 1em;
	    padding-bottom: .4em;
	    text-align:center;
	}
	#brand .searchbox {
		color:#999999;
		font-size:smaller;
	    text-align:center;
	}
	#brand .searchbox > span {
		/*padding-left:2.5em;*/
	}
	#cse-search-box {
		color:#999999;
		display:inline-block;
	}
	
	/* menu */
	#menus {
		margin:10px -10px -10px -10px;
	}
	.menu-container {
		background-color:#eee;
		background:linear-gradient(#FAFAFA,#DDD);
		min-height:1.5em;
		padding:1px 9px;
		position:relative;
		z-index:20;
	}
	.menu {
		color:#00b0f0;
		display:inline;
		font-size:1em;
		line-height:1.2;
		list-style-type:none;
		margin-left:0;
		padding-left:0;
		position:relative;
	}
	.menu.search {
	}
	.menu li {
		position:relative;
		white-space:nowrap;
	}
	.menu > li {
		display:inline-block;
		margin:0;
		padding:4px 5px;
	}
	.menu > li > a {
		padding:0 0;
	}
	.menu > li:hover {
		background-color:#eee;
		background:linear-gradient(#fff,#eee);
	}
	.menu > li#searchbox {
		background:none;
		float:right;
		max-width:330px;
		padding-top:3px;
		padding-bottom:1px;
	}
	.menu input {
		border:1px solid #ccc !important;
		box-sizing:content-box;
		font-size:12px;
		line-height:100%;
		height:15px;
		margin:0 !important;
		vertical-align:baseline;
	}
	.menu input[type=text] {
		background:#fff !important;
		padding:1px 3px;
	}
	.menu input[type=submit] {
		background:#f6f6f6 !important;
		padding:1px 6px;
	}
	
	/* sub-menu */
	.menu > li > ul {
		background-color:#fff;
		border:1px solid #ccc;
		border-top:none;
		display:none;
		list-style-position:inside;
		list-style-type:none;
		margin:0;
		padding:0;
		position:absolute;
			left:0;
			top:100%;
		z-index:100;
	}
	.menu ul li {
		padding:3pt 1em;
	}
	.menu ul li:first-child {
		padding-top:6pt;
	}
	.menu ul li:last-child {
		padding-bottom:6pt;
	}
	.menu ul li:hover {
		background-color:#eee;
	}
	.menu li:hover > ul {
		display:block;
	}
	.menu a {
		color:#00b0f0;
		text-decoration:none;
	}
	
	/* sub-sub-menu */
	.menu > li > ul > li > ul {
		background-color:#fff;
		border:1px solid #ccc;
		display:none;
		list-style-position:inside;
		list-style-type:none;
		margin-top:-1px;
		padding:0;
		position:absolute;
			left:100%;
			top:0;
		z-index:100;
	}

	@media screen and (max-width: 640px) {
		#brand .name {
			font-size:1.6em;
			line-height:1;
		}
		#brand .description {
			color:#999999;
			font-size:1em;
			padding-top:3px;
			padding-left:0;
		}
	}

/* #body */

	#body {
		background-color:#fff;
		margin:10px 0;
		z-index:10;
	}
	#main, #widemain {
		border-bottom:10px solid #dff3f9;
	}
	#content {
		padding:1em 0 0 0;
	}
	#content > *, .teaser > * {
		margin-left:10px;
		margin-right:10px;
	}
	#content .teaser {
		margin-left:0;
		margin-right:0;
	}
	#content > hr.full {
		background-color:#dff3f9;
		border-style:none;
		color:#dff3f9;
		height:10px;
		margin:2em 0;
		width:100%;
	}
	.teaser {
		border-bottom:10px solid #dff3f9;
		border-top:10px solid #dff3f9;
		padding:1em 0;
	}
	.teaser + .teaser {
		border-top-style:none;
	}
	.teaser:first-child {
		border-top-style:none;
	}
	.teaser:last-child {
		border-bottom-style:none;
	}
	.teaser a.preview {
		display:block;
		float:left;
		margin-bottom:5px;
		margin-right:10px;
	}
	.teaser h2 {
		font-size:1.2em;
		margin-top:0;
	}
	.teaser h2 a {
		color:#000;
		text-decoration:none;
	}
	#side, #wideside {
		padding:0;
		text-align:center;
	}
	#side .widget, #wideside .widget {
		color:#777;
		display:inline-block;
		max-width:350px;
		margin-bottom:50px;
	}
	#wideside .widget {
		vertical-align:middle;
		margin:20px 5px 30px 5px;
	}
	#refs {
		border-top:10px solid #DFF3F9;
		padding:10px 5px;
		clear:both;
		text-align:center;
	}
	#refs .textwidget img {
		background-repeat:no-repeat !important;
		margin:2px 3px;
		vertical-align:middle;
	}
	@media screen and (max-width: 999px) {
		#side .widget {
			vertical-align:middle;
			margin:20px 5px 30px 5px;
		}
	}
	@media screen and (min-width: 1000px) {
		#main {
			width:620px;
			float:left;
			border-right:10px solid #dff3f9;
			border-bottom-style:none;
		}
		#side {
			border-left:10px solid #dff3f9;
			margin-left:-10px;
			width:350px;
			float:right;
			padding:1em 0;
		}
	}


/* #foot */

	#foot {
		background-color:#00b7ef;
		color:white;
		clear:both;
		font-size:small;
		position:relative;
	}
	#foot .blocks {
		float:left;
		padding:10px;
	}
	#foot .block {
		float:left;
		max-width:20em;
		padding:1ex 1em;
	}
	#foot a {
		color:white;
		text-decoration:none;
	}
	#foot a:hover {
		text-decoration:underline;
	}


/* sortable tables */

	body table td.sort, body table th.sort {
		background-repeat:no-repeat;
		background-image:url(./sort/oben.png);
		background-position:center bottom 5px;
		cursor:pointer;
		padding-bottom:16px;
		text-align:center;
		vertical-align:middle;
	}

	body table td.sort ~ *, body table th.sort ~ * {
		padding-bottom:16px;
	}

	thead .sort:hover {
		background-color:#fff;
		background-image:url(./sort/oben_schwarz.png);
	}

	thead .sort.descending {
		background-image:url(./sort/unten.png);
	}

	thead .sort.descending:hover {
		background-image:url(./sort/unten_schwarz.png);
	}

/* comments */

	#respond {
		background-color:rgb(248,248,248);
		margin:0;
		padding:10px;
	}
	#respond > *:first-child {
		margin-top:10px;
	}

	textarea#comment {
		max-width:100%;
	}

	.commentlist {
		list-style-type:none;
		padding:0;
	}
	.commentlist .children {
		list-style-type:none;
		padding:0;
	}
	.commentlist li.comment .comment-meta {
		color: #666;
		margin-left: 50px;
	}
	.commentlist li.comment .comment-author {
		color: #666;
		margin-left: 50px;
	}
	.commentlist li.comment {
		background-image:url(img/grey.png);
		border: 1px solid #DDD;
		border-radius: 5px;
		margin: 1em 0 0;
		padding: 1em;
		position:relative;
	}
	.commentlist .avatar {
		background: none;
		border-radius: 3px;
		left: 1em;
		padding: 0;
		position:absolute;
		top: 1em;
	}
	
	.rtexthumb {
		font-size:.9em;
		font-weight:bold;
		margin-left:30px;
		padding-top:2pt;		
	}

/* Comment-Form */

.form-submit #submit {font-size:13px}
.abo-form {position:relative;padding-left:2em}
.keinabo .abo-form {display:none}
#abo-subscribe {position:absolute;top:0;left:0}

/* general */

	header {
		margin-bottom:0;
		position:relative;
	}
	h1 {
		color:#C00;
		line-height:1.1em;
		margin-top:.3em;
	}
	b + h1 {
		margin-top:0.05em;
	}
	h2, h3, h4 {
		line-height:1.3em;
		margin-top:2.2em;
		margin-bottom:.5em;
	}
	h2:first-child {
		margin-top:1em;
	}
	header time {
		font-size:small;
		color:#aaa;
		position:absolute;
		right:0;
		top:-1.5em;
	}
	hr:not(.full) {
		background:none;
		border-top:1px solid #AAA;
		color:transparent;
		height:0;
		margin:1.5em auto !important;
		padding:0;
		width:50%;
	}
	#content blockquote {
		border-left: #00B0F0 solid 5px;
		background-color: #FFF4EA;
		font-size: 1.3em;
		line-height:1.3;
		margin: 28px 10px;
		overflow: hidden;
		padding: 15px;
		text-align: center;
	}
	#content blockquote p {
		margin:0;
	}
	.clear, footer, .ratingblock, #respond, #comments {
		clear:both;
	}
	#author-avatar {
		display:block;
		float:left;
		margin:0 10px 5px 0;
	}
	#author-avatar img {
		border-radius: 3px;
		box-shadow: 0 1px 2px #BBB;
	}
	
  /* images */

	img {
		border:none;
	}
	#content .wp-caption {
		background-color:#eee;
		margin-left:auto;
		margin-right:auto;
		max-width:100%;
		padding:5px 0 0 0;
	}
	#content img {
		display:inline-block;
		height:auto !important;
		max-width:100%;
	}
	#content .wp-caption img {
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	#content .alignright {
		float:right;
		margin-left:10px;
		margin-right:5px;
	}
	#content .alignleft {
		float:left;
		margin-left:5px;
		margin-right:10px;
	}
	#content .aligncenter {
		clear:both;
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	#content .alignnone {
		clear:both;
	}
	.wp-caption-text {
		font-size:smaller;
		padding:5px 10px;
		margin:0;
	}
	img.vgwort {
		background:none;
		border:none;
		height:1px !important;
		position:absolute;
			left:1px;
			top:1px;
		width:1px !important;	
	}
	
	.svg-frame {
		display:inline-block;
		padding-bottom:75%; /* = image height/width in percent */
		position:relative;
		width:100%;
		}
	.svg-frame svg {
		position:absolute;
		left:0;
		top:0;
		width:100%;
	}

/* Buttons */

	.link-button {
		padding:30px 10px;
		margin:0 !important;
		text-align:center;
	}
	#respond + .link-button {
		background-color:#F8F8F8;
	}
	.link-button a {
		background-color:#f7dd9f;
		background-image:linear-gradient(#f7dd9f,#f1c451);
		box-shadow:0 0 2px 2px #93762c;
		border-radius:3px;
		color:#1f497d;
		font-size:1.3em;
		line-height:100%;
		display:block;
		margin:0 auto;
		max-width:418px;
		padding:16px 26px;
		text-decoration:none;
	}


  /* iframes */

	/* http://avexdesigns.com/responsive-youtube-embed/ */
	.maps, .vimeo, .youtube {
		height: 0;
		overflow: hidden;
		position:relative;
	}
	.youtube {
		padding-bottom: 56.25%;
		padding-top: 30px;
	}
	.maps {
		padding-bottom: 61.83%;
		padding-top: 30px;
	}
	.vimeo {
		padding-bottom: 56.25%;
		padding-top: 30px;
	}
	.maps > *, .vimeo > *, .youtube > * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* tables */
	
	table.text-align-left td {text-align:left}
	table.col-1-center td:first-child {text-align:center}
	table.col-2-center td:nth-child(2) {text-align:center}
	table.col-3-center td:nth-child(3) {text-align:center}
	table.col-4-center td:nth-child(4) {text-align:center}
	table.col-5-center td:nth-child(5) {text-align:center}
	table.col-6-center td:nth-child(6) {text-align:center}
	
	/* inhaltsverzeichnis */
	
	.inhaltsverzeichnis {background:#F9F9F9;border:1px solid #AAA;display:table;float:left;font-size:95%;line-height:1.6;margin-bottom:1em;padding:0 7px}
	.inhaltsverzeichnis a {text-decoration:none}
	.inhaltsverzeichnis a:hover {text-decoration:underline}
	.inhaltsverzeichnis h2 {font-size:1em;margin:0;padding:7px 0;text-align:center}
	.inhaltsverzeichnis ol, .inhaltsverzeichnis ul {margin-left:0;margin-top:4px;padding-left:1.5em}
	.inhaltsverzeichnis.aus ol, .inhaltsverzeichnis.aus ul {display:none}
	.inhaltsverzeichnis.aus :not(h2) {display:none}
	.inhaltsverzeichnis.aus h2::after {content:' [anzeigen]'; font-weight:normal}
	.inhaltsverzeichnis.an h2::after {content:' [verbergen]'; font-weight:normal}
	
	/* formular */
	
	.formular .checkbox {padding-left:2em;position:relative}
	.formular .checkbox input {position:absolute;left:0;top:.2em}

	/* introbox */
	
	.introbox {border-collapse:collapse;float:right;font-size:95%;margin-left:5px !important;margin-bottom:5px}
	.introbox th, .introbox td {border:1px solid #AAA;font-weight:normal;padding:6px;text-align:left;}
	
	/* Währungsrechner */
	.currency-calculator {
		background-color:#EEE;
		max-width:600px;
		margin-left:auto !important;
		margin-right:auto !important;
		padding:5px;
		text-align:center;
	}
	.currency-calculator input {text-align:right}

	/* Ratings */
	.yasr-total-average-container, span.yasr-total-average-text {
		color:gray;
		display:block;
		font-size:small;
	}
	
.suchbox input {border:1px solid #CCC; font-family: Calibri,Carlito,sans-serif; font-size: 1em; padding: 4px 8px}
.suchbox input::-moz-focus-inner {border: 0; padding: 0}
#such {background-color: #eee; background: linear-gradient(#FAFAFA,#DDD); border-left: none; color: #00b0f0}
#suchbegriff {background: #FBFBFB; color:#222; min-width: 20%; padding-right:2em}

/* Infobox */

	#content div.infobox {
	margin:0px 10px 10px 5px;
	border:solid 1px #ffdcb9;
	float:left;
	width:270px;
	padding:10px;
	background-color:#fff4ea;
	}
	
	#content div.hinweis {
	margin-top:0px;
	margin-bottom:10px;
	border:solid 1px rgb(0,176,240);
	width:100%-20px;
	padding:10px;
	background-color:rgb(239,249,252);
	}
	
	#content div.hinweis_gelb {
	margin:0px 10px 5px 5px;
	border:solid 1px rgb(254,181,0);
	/*float:left;*/
	width:100%-15px;
	padding:10px;
	background-color:rgb(255,255,204);
	}
	
/* grünen Häkchen, roten Kreuze */

ul.haken, ul.ohnehaken, ul.kreuz {
	list-style-type: none;
	list-style-image: none;
	margin-left:0;
	padding-left:5px;
}
ul.haken > li,
ul.ohnehaken > li,
ul.kreuz > li {
	background-repeat: no-repeat;
	background-position: left top;
	margin-left:0;
	padding-left:25px;
	padding-bottom:8px;
}
ul.haken > li {background-image: url(icons/haken-gruen.png)}
ul.ohnehaken > li {background-image: url(icons/checkbox-t.png)}
ul.kreuz > li {background-image: url(icons/kreuz-t.png)}

/* SPAN-Schriftfarben */

	span.gelb, strong.gelb {background-color:rgb(243,251,160);}
	span.gruen, h2.gruen, h3.gruen, strong.gruen {color:green;}
	span.rot, h2.rot, h3.rot, strong.rot {color:#cc0000;}
	span.blau, h2.blau, h3.blau, strong.blau {color:rgb(0,88,144)}

/* Liste mit Minus-/Pluszeichen etc. */

	td > ul:last-child {
		margin-bottom:0;
	}

	.ausruf, .frage, .gleich, .info, .minus, .neutral, .okay, .plus, .x, .zeit {
	background-repeat: no-repeat;
	background-position: 2px 3px;
	padding-left: 22px;
	}
	li.ausruf, li.frage, li.gleich, li.info, li.minus, li.neutral, li.okay, li.plus, li.x, li.zeit {
	list-style-image: none;
	list-style-type: none;
	margin-left: -22px;
	}
	.ausruf {background-color: #EEE; background-image: url(icons/ausruf.png)}
	.frage {background-color: #EEE; background-image: url(icons/frage.png)}
	.gleich {background-color: #EEE; background-image: url(icons/gleich.png)}
	.info {background-color: #EEF; background-image: url(icons/info.png)}
	.minus {background-color:#FEE; background-image:url(icons/minus.png)}
	.neutral {background-color:#FFD; background-image:url(icons/pfeil.png)}
	.okay {background-color: #EEF; background-image: url(icons/okay.png)}
	.plus {background-color: #DFD; background-image: url(icons/plus.png)}
	.x {background-color: #FEE; background-image: url(icons/x.png)}
	.zeit {background-color:#EEE; background-image:url(icons/zeit.png)}
	
	tr.grau td, td.grau {background-color:#F8F8F8}
	tr.gruen td, td.gruen {background-color: #DFD}
	tr.rot td, td.rot {background-color:#FEE}

/* Vergleichstabelle */

	table.vergleich {
	border-collapse:collapse;
	text-align:center;
	}
	table.vergleich td,
	table.vergleich th {
	border:1px solid #aaa;
	padding:5px 5px;
	}
	table.vergleich ul {
	margin-left:22px;
	padding-left:0;
	}
	table.vergleich td {
	vertical-align:top;
	}
	table.vergleich ul:first-child {
	margin-top:0;
	}
	table.vergleich tr:hover td {
	background-color:#eee;
	}
	table.vergleich tr:hover th:only-of-type {
	background-color:#eee;
	}

/* Kopiervorlage */

.kopiervorlage {
border:1px solid #AAA;
cursor:text;
font-family:monospace,monospace;
margin:20px auto;
padding:5px 10px;
}
pre.kopiervorlage {
white-space:pre-wrap;
}	
	
	
/* Bilder*/

	img.bild_15 {
	margin:15px 0px 15px 0px;
	}