/*
Theme Name: Illustrie
Description: Thema für Illustrie. Basiert auf Starkers 3.0
Version: 0.1
Author: Frank Tietgen
Author URI: http://www.franktietgen.de
*/

@import "css/layout.css";




@charset "UTF-8";

/* - - - allgemein - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

*
{
	margin:0;
	padding:0;
}

html
{
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	font-family:  'Trebuchet MS',Verdana,sans-serif ;
	color:#888;
}

.clear {
	clear: both;
	height: 1px;
}
a { color:#f1c100; }
a img { border:none; }
a:focus { outline-style:none; }

/* - - - struktur - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#links { float:left; width:273px; }

/* - - - header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#links #header { float:left; }


/* - - - nav - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#nav
{
	width: 273px;
	text-align:right;
	font-size: 14px;
	line-height: 20px;
	letter-spacing:1px;
	text-transform:uppercase;
	display:table-cell;
	vertical-align:top;
}
#nav a
{
	text-decoration:none;
	color:#555;
}
#nav a:hover { color:#f1c100;}
#nav .current-menu-item a
{
	color:#f1c100;
}
#nav .titel,
#nav .titel a
{
	font-weight:bold;
	font-size: 17px;
	line-height: 20px;
	color:#555;
}
#nav ul
{
	margin-bottom:24px;
	list-style: none;
}
#nav li
{
	list-style: none;
	position:relative;
}
#nav li .neu {
	display:inline-block;
	position:relative;
}
#nav li .neu span {
	display:block;
	width:50px;
	height:50px;
	background:url(i/illustrie-sprueh-neu.png) left top no-repeat;
	position:absolute;
	top:-31px;
	right:3px;
}
#nav li a[title="neu"]:before{
	content:'';
	display:inline-block;
	width:50px;
	height:50px;
	background:url(i/illustrie-sprueh-neu-gelb.png) left top no-repeat;
	position:absolute;
	left:150px;
	top:-15px;
}
.show-menu {
	padding:5px;
	border:1px solid #eee;
    text-decoration: none;
    text-align: center;
    margin-bottom:24px;
    display:none;
}
#show-menu{
	display: none;
	-webkit-appearance: none;
}
#show-menu:checked ~ .menubox{
    display: block;
}
/* - - - content - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#content
{
	width: 480px;
	padding:0 36px 120px 36px;
	display:table-cell;
	vertical-align:top;
}
#content h1 { font-size:28px; line-height:28px; margin-bottom: 20px; }
#content h2 { font-size:20px; margin-bottom: 15px; margin-top:20px; }
#content h3 { font-size:16px; margin-bottom: 15px; margin-top:20px; }
#content p { margin-bottom: 10px; margin-top:10px; }
#content .item { margin-bottom: 20px; }
#content .frage { font-weight:bold; font-style:italic; margin-bottom: 10px; }

#content h1:first-child,
#content h2:first-child,
#content h3:first-child,
#content p:first-child { margin-top:0; }
#content .newsitem { margin-bottom:80px; }
#content .newsitem.single { margin-bottom:30px; }
#content .newsitem .datum { margin-bottom:5px; margin-top:0; }
#content .newsitem h2 { margin-top:5px; }
#content .newsitem.sticky {
	margin-bottom:40px;
	/*border:2px solid #f1c100;*/
	/*background-color:#fffff9;
	padding:10px 20px;
	-webkit-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.3);
	-moz-transform:    rotate(1deg);
	-webkit-transform: rotate(1deg);
	-o-transform:      rotate(1deg);
	-ms-transform:     rotate(1deg);
	transform:         rotate(1deg);*/
}
#content .newsitem.sticky h2 { font-size:16px; line-height:18px; margin-bottom:10px; }
#content .newsitem.sticky p { font-size:12px; line-height:18px; }
#content .newsitem.sticky a { text-decoration:none; }
#content .newsitem blockquote { font-style:italic; color:#bbb; padding:0 20px; }

#content #gallery-1 img,
#content #gallery-2 img,
#content #gallery-3 img,
#content #gallery-4 img { border:none; }
.teaser
{
	text-align:center;
	padding-bottom:20px;
}
.action
{
	border-radius:5px;
	background-color: #F9EBB2;
	padding: 14px;
}
.action img
{
	padding-right:10px;
	vertical-align:top;
}
.thumbs {
margin-bottom:5px;
}

.thumbs a {
	margin-right:5px;
	font-size: 9px;
	font-family: Arial, Sans-serif;
	color:#666;
}
.thumbs  {
	font-size: 9px;
	font-family: Arial, Sans-serif;
	color:#666;
}
.smalltext{font-size:11px;line-height:14px;}
.space,
#content .space{margin:30px 0;}
.input-text
{
	width:100%;
	border:1px solid #ddd;
	padding:5px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
}
.input-number,
.input-shorttext
{
	width:4.5em;
	border:1px solid #ddd;
	padding:5px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	text-align:right;
}
.t { display:table; width:100%; }
.r { display:table-row; }
.c { display:table-cell; vertical-align:top; padding-bottom: 5px;}
.c label { padding-right:10px; }
form { padding:20px 0; }
.absenden { border-radius:5px; background:#000; color:#fff; padding:5px 10px; font-size:14px; border:0; float:right; }
.absenden:hover { background:#666; }
small.bu { font-size:11px; }
.agbbox{height:150px;overflow-y:scroll;margin:0 0 10px;border:1px solid #ddd;padding:15px;resize:vertical;font-size:12px;line-height:14px;}
#content .agbbox h1 {font-size:13px; line-height:13px;text-transform:uppercase;margin-bottom:10px;}
#content .agbbox h2 {font-size:18px; line-height:18px;margin:10px 0;}
.bestellform {border:1px solid #ddd;padding:20px;background:#f9f9f9;}
.bestellform .wpcf7-captchac{vertical-align:top;}
.bestellform .absenden{font-size:18px;padding:7px 14px;}
.produktinfo {border-collapse:collapse;}
.produktinfo td, .produktinfo th {border-bottom:1px solid #ddd;vertical-align:top;text-align:left;padding:3px 0;}
.produktinfo tr:last-child td, .produktinfo tr:last-child th {border:none;}
.produktinfo th {font-weight:bold;text-align:right;padding:3px 20px;}
#content.comics h1 { font-size:18px; margin-bottom:20px;}
#content.comics h2 { font-Size:28px; line-height:28px; margin: 3px 0 20px;}
#content.comics .datum { font-size:11px; margin:12px 0 3px; line-height:11px; }
.bestellform div.wpcf7-response-output {margin:2em 0 1em;padding:0.5em 1em;}

.comicnav { margin-bottom:20px; }
.comicnav .links,
.comicnav .mitte,
.comicnav .rechts { display:table-cell; font-size:11px; line-height:11px; vertical-align:middle; }
.comicnav .links  { width:120px; text-align:left; }
.comicnav .mitte  { width:240px; text-align:center; vertical-align:bottom;}
.comicnav .rechts { width:120px; text-align:right; }
.comicnav .set    { display: inline-block; text-align:center; }
.comicnav .links .set  { margin-right:10px; }
.comicnav .mitte .set  {  }
.comicnav .rechts .set { margin-left:10px; }
.comicnav .links a,
.comicnav .rechts a { text-decoration:none; color:#888; }
#content.comics .comicnav .datum { margin:0; }
.comicnav .postnr { font-size:18px; line-height:20px; font-weight:bold;}


.comicnav .pfeil         { background:url(i/pfeile-sprites-2.gif) 0 0 no-repeat; width:32px; height:32px; display:inline-block;}
.comicnav span.pfeil a   { width:32px; height:32px; display:inline-block;}
.comicnav .pfeil.e       { width:32px; height:32px; }
.comicnav span.pfeil.e a { width:32px; height:32px;}

.comicnav .pfeil.l         { background-position: 0 -32px; }
.comicnav .pfeil.r         { background-position: 0 -64px; }
.comicnav .pfeil.l.e       { background-position: 0     0; }
.comicnav .pfeil.r.e       { background-position: 0 -96px; }

.comicnav .pfeil.l.p       { background-position: -32px -32px; }
.comicnav .pfeil.r.p       { background-position: -32px -64px; }
.comicnav .pfeil.l.e.p     { background-position: -32px     0; }
.comicnav .pfeil.r.e.p     { background-position: -32px -96px; }

.comicnav .pfeil.l:hover   { background-position: -64px -32px; }
.comicnav .pfeil.r:hover   { background-position: -64px -64px; }
.comicnav .pfeil.l.e:hover { background-position: -64px     0; }
.comicnav .pfeil.r.e:hover { background-position: -64px -96px; }

.comicbody { margin-bottom:20px; }

.newsnav { height:12px;position:relative; }
.newsnav { margin-bottom:20px; }
.newsnav .alt {}
.newsnav .neu { float:right; }

.newsnav .pfeil { background:url(i/pfeile-sprites.gif) -2px 0 no-repeat; width:10px; height:12px; display:inline-block;}
.newsnav span.pfeil a {width:10px; height:12px; display:inline-block;}
.newsnav .pfeil.e { width:12px; height:12px; }
.newsnav span.pfeil.e a {width:12px; height:12px;}

.newsnav .pfeil.l         { background-position:  -2px 0; float:left; margin-right:10px; }
.newsnav .pfeil.r         { background-position: -12px 0; float:right; margin-left:10px;}
.newsnav .pfeil.l.e       { background-position:   0   0; }
.newsnav .pfeil.r.e       { background-position: -12px 0; }

.newsnav .pfeil.l.p       { background-position:  -2px -24px; }
.newsnav .pfeil.r.p       { background-position: -12px -24px; }
.newsnav .pfeil.l.e.p     { background-position:   0   -24px; }
.newsnav .pfeil.r.e.p     { background-position: -12px -24px; }

.newsnav .pfeil.l:hover   { background-position:  -2px -12px; }
.newsnav .pfeil.r:hover   { background-position: -12px -12px; }
.newsnav .pfeil.l.e:hover { background-position:   0   -12px; }
.newsnav .pfeil.r.e:hover { background-position: -12px -12px; }

table.wallpaper { width:100%; }
table.wallpaper td { text-align:center; padding: 5px 0 5px 0; width:25%}

#content ul { margin-left: 1em; }
.abschnitt { margin-bottom: 80px; }
.fyf .abschnitt { margin-bottom: 40px; }
.abschnitt.kurz { margin-bottom: 20px; }
#content .abschnitt h2 { margin-top: 0; }
.elchappicon { margin-left: 10px; }
.presse-elchappicon { margin: 0 10px 10px 0; vertical-align:middle; }
.kontaktinfo th { font-weight:bold; text-align:left; padding-right:10px; }
.adventsapp table.wallpaper { width:auto; }
.adventsapp table.wallpaper td { padding: 5px 0 5px 15px; width:auto;}
table.iconlist td{vertical-align: middle;}

.fyf .logo {margin-bottom:40px;}
.fyf .logo img {margin-bottom:5px;}
.fyf .logo h1 {display:inline; font-size: 14px; line-height: 20px;}
.fyf .logo p {display:inline; margin-top:0;}
.fyf h1, .fyf h2, .fyf h3 {color:#000;}
.fyf .schnoerk { height:23px; background:url(/a/fantasy-kalender/b/illustrie-snoerkel.gif) center center no-repeat; margin-bottom:40px;}

.stichworte { margin:10px 0 10px; }
.stichworte,
.stichworte a,
.fyf .tags {color:#ccc; font-size:10px;line-height:10px;text-transform:uppercase; text-decoration:none;}
.stichworte a:hover {  color:#f1c100; }
.stichworte b,
.fyf .tags b {color:#999;}

.comment-author img{float:left;padding:0 15px 15px 0;}
.comment-body{clear:both;}
#content #comments-title {margin-top:40px;}
.comment{margin:40px 0;}
#respond form label {
display: block;
line-height: 1.714285714;
}
#respond form input[type="text"], #respond form textarea {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;
line-height: 1.714285714;
padding: 5px;
width: 100%;
}
#respond form input[type="text"] {
width: 46.333333333%;
}

.sharebutton {
display:table-cell;
line-height:0;
font-size:1px;
padding:0 5px 10px 0;
vertical-align:middle;
}
/* - - - sidebar - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#sidebar {
	display:table-cell;
	vertical-align:top;
	width:200px;
	min-height:300px;
	list-style:none;
}
#sidebar li { list-style:none; }
.comicsidebar { padding-top:100px; }
.blogroll ul, .blogroll li { list-style: none; }
.blogroll h3 { margin-bottom:5px; }
.blogroll a { text-decoration:none; color:#bbb; }
 
/* - - - footer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer
{
	background: url(i/risskante.png) repeat-x;
	color: #fff;
	text-transform:uppercase;
	letter-spacing:1px;
	min-width: 729px;
	width:100%;
	position:fixed;
	bottom:0;
	font-size:11px;
}
#footermenu
{
	background:#000;
	padding: 5px 10px 5px 309px;
	margin-top:9px;
}
#footermenu li { display:inline; }
#footermenu li+li:before { content: ' | '; }
#footer a
{
	text-decoration:none;
	color:#fff;
}
#footer .current-menu-item a
{
	color:#f1c100;
}
/* - - - lightbox - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(i/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(i/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.textwidget,
.tagcloud,
.widget_tag_cloud{margin-bottom:20px}

.widget_tag_cloud a {text-decoration:none;color:#bbb;}
.widget_tag_cloud a:hover {text-decoration:none;color:#f1c100;}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width: 1023px)
{
html{-webkit-text-size-adjust:100%;}
#nav,#content,#sidebar{display:block;width:auto;}
#nav{text-align:left;padding: 0 20px 20px 20px;}
#content{padding: 0 20px 120px 20px;}
#sidebar{padding: 0 20px 20px 20px;}
img{width:auto;max-width:100%;height:auto;}
.menubox{display:none;}
.show-menu{display:block;}
#footer{position:static;padding: 0 20px 20px 20px;min-width:auto;background:#000;}
#footer:before{content:'';display:block;background:#fff url(i/risskante.png) repeat-x;height:9px;margin-left:-20px;}
#footer iframe{float:none !important;margin:12px 0 0 0 !important;}
#footermenu{padding:0;margin:0;}
}