/*
 Theme Name: gentoo-sunrise.org
*/

body {
	padding: 0;
	margin: 0;
	font: normal normal normal 80%/170% Arial, sans-serif;
	color: #333;
	background-color: #ccc;
}

/* Positionierung */
.alignleft { float: left; }
img.alignleft, .wp-caption.alignleft  { margin: 5px 10px 5px 0; text-align: left; }
.alignright { float: right; }
img.alignright, .wp-caption.alignright { margin: 5px 0 5px 10px; text-align: right; }
.aligncenter, .center { margin: auto; text-align: center; }
.clear { clear: both; }

/* Hyperlinks */
a { color: #0b6286; }
a img { border: none; }
a:hover { text-decoration: none; color: #3399ff; }
.more-link { display: block; }

/* Listen, Absätze */
ul { padding: 0 0 0 15px; list-style-type: square; }
ul, ol { margin: 0 0 15px; }
hr { margin: 5px 0 15px; height: 1px; background: transparent; border: none; border-top: 1px solid #f0f0f0; clear: both; }

/* Formatierung */
.b, .bold { font-weight: bold; }
.pointer:hover { cursor: pointer; }
.screen-reader-text { display: none; visibility: hidden; }

/* Headings */
h1, h2, h3, h4, h5, h6, .title { display: block; font: normal normal normal 20px/150% Arial, sans-serif; margin: 0 0 10px; }
.title.small { font-size: 16px; margin: 0 0 5px; }
article.entry h2.hl, aside .box .title { padding: 5px 10px; background: #777; color: #fff; font-weight: bold; text-transform: uppercase; }

/* Suche */
input#s, input#searchsubmit { border: 1px solid #0b6286; margin: 0 2px; }
input#s { width: 230px; float: left; padding: 3px 1px; font-family: "Courier New", serif; }
input#searchsubmit { float: left; padding: 4px 5px 2px; font: bold 12px/150% Arial; text-transform: uppercase; }
input#s:focus, input#s:hover, input#searchsubmit:focus, input#searchsubmit:hover { border-color: #3399ff; }
input#searchsubmit:hover { cursor: pointer; background-color: #3399ff; color: #fff; }

/* Pagination */
.pagination, .postnavi, .pagenavi { margin: 10px auto 20px; }
.pagination .title, .postnavi .title, .pagenavi .title { margin: 0 0 5px; font-size: 14px; font-weight: bold; }
.pagelink { font-weight: bold; margin: 0 2px 0 0; padding: 3px 5px; border: 1px solid #ccc; }
a:hover .pagelink { border-color: #0b6286; } 
.navi a { text-decoration: none; }
.navi .previous { float: left; }
.navi .next { float: right; }

/* Beitragsbild */
.postimg { float: right; margin: 0 0 10px 10px; text-align: center; font-size: 11px; }
.postimg img { width: 100%; height: auto; }

/* Aufbau */
#wrap { width: 90%;	margin: 0 auto; padding: 20px; background-color: #fff; }

header { padding: 0 0 20px; }

/* Logo & Headline */
header h1#logo { margin: 0 0 20px; font: bold 48px/52px Arial; text-transform: uppercase; }
header h1#logo a { text-decoration: none; }

/* Header Navigation */
header nav.mainmenu ul { list-style: none; padding: 0; margin: 20px 0; }
header nav.mainmenu ul li { float: left; margin-right: 5px; font-weight: bold; }
header nav.mainmenu ul li a { padding: 5px 10px; background-color: #0b6286; color: #fff; text-decoration: none; }
header nav.mainmenu ul li a:hover { cursor: pointer; background-color: #3399ff; }

/* Content */
#main.sidebar #content { width: 70%; float: left; }
article.entry { margin-bottom: 20px; font: normal 14px/24px Arial, sans-serif; }
#startseite article.entry { width: 49%; float: left; height: 200px; overflow: hidden; }
#startseite article.entry.alt { float: right; }

/* Tabelle */
table#vergleich { width: 100%; margin: 5px auto 25px; border-collapse: collapse; }
table#vergleich th, table#vergleich td { padding: 5px 10px; text-align: left; }
table#vergleich thead th { background-color: #0b6286; color: #fff; }
table#vergleich tbody td { background-color: #f0f0f0; border-bottom: 1px solid #fff; text-shadow: 1px 1px 0 #fff;}
table#vergleich tbody tr:hover td { background-color: #e0e0e0; cursor: pointer; }

/* Anbieterdetails */
.titlerow { padding: 5px 10px; background-color: #0b6286; color: #fff; }
.titlerow .title { margin: 0; }

table#details { width: 50%; float: right; margin: 10px 0 10px 10px; border-collapse: collapse; }
table#details th, table#details td { padding: 5px 10px; text-align: left; }
table#details tbody td { background-color: #f0f0f0; border-bottom: 1px solid #fff; text-shadow: 1px 1px 0 #fff;}
table#details tbody tr.alt td { background-color: #e0e0e0; }

/* Sidebar */
#main.sidebar aside { width: 28%; float: right; }
aside .box { margin: 0 auto 20px; }
aside .box .title { margin: 0 0 5px; }

/* Footer */
footer { padding: 20px 0 0; text-align: right; }

/* Sitemap & 404 */
#sitemap { margin-top: 20px; }
#sitemap .title { margin-bottom: 5px; }
#sitemap ul li { font-size: 90%; line-height: 130%; }

/* Responsive */
@media all and (max-width: 340px) {
	header h1#logo { font: bold 20px/30px Arial, sans-serif; }
	#wrap { width: 80%; }
	.postimg, .screenshot { width: 90%; margin: auto; float: none; }
	input#s { width: 60%; }
	#main.sidebar #content, #main.sidebar aside { width: auto; float: none; }
	table#details { width: 100%; float: none; margin: 5px 0 10px; }
	table#vergleich th.c4, table#vergleich td.c4 { display: none; visibility: hidden; }
}
@media all and (max-width: 1200px) {
	#startseite article.entry { height: 300px; font-size: 14px; }
}
@media all and (max-width: 465px) {
	table#vergleich th.c2, table#vergleich th.c3, table#vergleich td.c2, table#vergleich td.c3 { display: none; visibility: hidden; }
	#startseite article.entry { height: 300px; font-size: 12px; }
}
@media all and (min-width: 341px) and (max-width: 899px) {
	header h1#logo { font: bold 30px/40px Arial, sans-serif; }
	#wrap { width: 80%; }	
	.postimg, .screenshot { width: 100%; margin: auto; float: none; }
	input#s { width: 60%; }
	#main.sidebar #content, #main.sidebar aside { width: auto; float: none; }
	table#details { width: 100%; float: none; margin: 5px 0 10px; }
	table#vergleich th.c3, table#vergleich td.c3 { display: none; visibility: hidden; }
}
@media all and (min-width: 600px) and (max-width: 899px) { 
	.postimg, .screenshot { width: 350px; margin: auto; float: none; } 
}
@media all and (min-width: 900px) and (max-width: 1039px; ){ 
	#wrap { width: 100%; }
	input#s { width: 50%; }
	#main.sidebar #content { width: 60%; }
}
@media all and (min-width: 1040px) and (max-width: 1279px){ 
	#wrap { width: 90%; }
}
@media all and (min-width: 1280px){ 
	#wrap { width: 80%; }
}
@media all and (max-width: 700px) {
	#startseite article.entry { width: 100%; float: none; height: auto; }
}