/*
Theme Name: Struppi
Theme URI: http://jstruebig.de/
Description: Mein Wordpress Theme für javascript.jstruebig.de
Version: 1.4
Author: Struppi
Author URI: http://jstruebig.de/
*/

* {
	padding: 0;
	margin:0;
}

body {
	background-color: #fff;
	color: #000;
	font-family: 'DejaVu Sans Mono', 'Courier new', Courier, monospace;
}

/* Schriftarten für die Überschriften */
h2, h3, h4, th {font-family: 'Bookman Old Style', Georgia, Arial, sans-serif; }

/* kein Rahmen für verlinkte Bilder  */
img>a {
	padding-left: 0px;
	background-image: none;
}
/* Tabellen können etwas kleiner sein */
td {
   font-size: 90%;
}


/**********************************************************
	Navigation oben, mit den Links zu den statischen Seiten 
	und dem Suchformular
**********************************************************/
@media screen {

/* Der Seitentitel */
h1 {
	font-family: 'Cooper Black', 'Eras Bold ITC', serif;
	letter-spacing:0.2em;
	word-spacing:1em;
	font-size:40px; /* wegen Hintergrundbild in Pixel*/
	height:48px;
	overflow:hidden;
	background: url(logo_bg.gif) #eef;
    border-bottom:3px solid #666;
	margin-bottom:.7em;
}
h1 a{
	display:block;
	text-decoration:none;
	color: #66f;
	background: url(ich.jpg) no-repeat 0 0;
	padding-left:45px;
	/* Spielereien mit CSS :-) */
	text-shadow: #000 2px -2px 2px;
}

/* Kopfzeile, direkt am oberen Browserrand */
body {
	margin-top:2em; /* Platz im body für die #top Zeile schaffen */
}

div#top {
	position:absolute;
	top:0%;
	left:0;
	width:100%;
	height:1.5em;
	letter-spacing:0.1em;
	
	color: #000;
	background-color: #D4D0C8;
	border-bottom: 2px ridge #fff; 
	border-top: 2px ridge #fff; 
}

div#top[id] {
	position:fixed;
	z-index:4;
}
div#top ul {
	list-style-type:none;
}
div#top ul li {
	display:block;
	float:left;
	width:10em;
	font-size:small;
	font-weight:normal;
	margin-right:0.6em;
}
div#top ul li a {
	color: #000;
	display:block;
	text-align:center;
	font-weight:bold;
	text-decoration:none;
	border-top:2px solid black;
}
div#top ul li a:hover {
	background-color:#909090;
	color: #fff;
	border-bottom:2px solid black;
	border-top:none;

}
/* Das Suchformular */
#searchform {
	position:absolute;
	top:0.2em;
	right:1em;
	font-size:90%;
	position:fixed;
	z-index:4;
}
#searchform[id] {
}
#searchform input {
	font-size:12px;
	font-weight:bold;
}
#searchform #s {
	background-image: url(lupe_2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-left:16px;
	width:20em;
}

} /* @MEDIA SCREEN */


/**********************************************************
Das Hauptmenü
**********************************************************/
@media screen{
	/* Platz schaffen */
	#content {
		margin-right:30%;
	}
	#menu {
		position:absolute;
		top:6.5em;
		right:0;
		width: 25%;

	}
	#menu ul {
		list-style-type: none;
		
		margin-bottom:1.5em;
	}
	#menu h2 {
		/* Die Listenpunkte sind die Überschriften der Listen */
		text-align:right;
		font-size: medium;

		background-color:#eef;

		padding:0.1em 0.5em;
		margin-bottom:0.4em;
		border: 1px #66f solid;
        border-radius:1em;
	}
	#menu ul li {
		font-size:small;
		margin-bottom:0.2em;
		padding:.2em;
	}
	#menu ul li a{
		display:block !important;
		display:inline;
		
	}
	#archives ul li a , #categories ul li a{
		display:inline !important;
		display:inline;
	}

	#menu li.current-cat a,
	#menu ul li:hover,
	#menu ul li a:hover {
		background-color:#000;
		color: #fff;
		text-decoration:none;
		text-shadow:1px 1px 1px #fff;
	}

} /* @MEDIA SCREEN  - Menü */

.nav {
	font-weight: bold;
	height:1.2em;
	font-size:0.8em;
}
.nav span {float:right;}
.nav a {text-decoration:none;}


/**********************************************************
	Der Inhalt 
**********************************************************/

/* externe Links markieren */
#content a[href^="http"]:after {content: "\2197";}
/* lokale nicht */
#content a[href*="jstruebig.de"]:after, #content a[href*="localhost"]:after {content: "";}
/* PDF Links kennzeichnen */
#content a[href $=".pdf"]{ 
	padding-right: 18px;
   background: transparent url(pdficon_small.gif) no-repeat center right;
}
#content a.gb{
	padding-right: 25px;
   background: transparent url(https://javascript.jstruebig.de/wp-content/uploads/2019/08/gb-1.gif) no-repeat center right;
	
}
#content a.de{
	padding-right: 25px;
   background: transparent url(https://javascript.jstruebig.de/wp-content/uploads/2019/08/de-1.png) no-repeat center right;
	
}

#content {
	margin-left: 45px;
    padding:2px;
	border:5px dotted #e0e0e0;
	max-width:65em;
}

/* Artikel */
.post {
	margin-top:0.5em;
	padding:1em;
}
.post .datum {
	display:block;
	text-align:right;
	font-weight:bold;
	background-color: #66f; 
	color: #fff;
	padding:0.1em .5em;
	text-shadow: -1px -1px #000, 1px 1px #00f;
	border-radius:.2em .2em 0 0;
}
#comments h2, .post h2 {
	font-size:xx-large;
	text-align:left;
	padding:0.2em .1em;
    
	color: #229; 
	background-color: #ddf;
    font-family: 'Cooper Black', 'Eras Bold ITC', serif;
    border-radius:0 0 .2em .2em;
}
.post h2 a, .post h2 span {
	color: #33f; 
	padding:2px 8px;
	display:block;
}
.post h2 a{
	text-decoration:none; 
}

.post h2 a:hover {
	background-color: #ccf; 
	/*color: #eef;*/
}

.post h3 {
	font-size:x-large;
	font-weight:bold;
	color: #666;
	border-bottom:3px solid #606060;
	padding:2px;
    margin:1em 25% 1em 0;
}
.post h4 {
	font-size:large;
	padding:0.2em;
	margin: 0.5em 1.5em 1em 1em;
}
.post ul,
.post ol{
	margin:1em 2em;
}
.post li{
	padding:.25em;
}

.post .more-link{
	font-weight:bold;
}

.post .linkcat{
	font-size:90%;
}
.post .linkcat a{
	display:block;
	
}
/*  Die Artikel */
.post p	{
	line-height:1.3;
	color:#000;
	padding:1em;
}
.post p em {
 font-style:italic;
 color:#666;
}
.post blockquote p, .post p blockquote{
}
.post blockquote {
    margin:1em 0;
    background: url(quote.gif) no-repeat 0 0;
    padding-left:60px;
    min-height:49px;
    font-size:100%;
    font-style:italic;
    color:#303030;
}

.post dl	{
	margin:.5em 1.5em;
 }
.post dt	{
	margin-top: .5em;
	background-color:#dc9;
	padding: .2em;
    color:black;
    border-radius:5px;
}
.post dt a{
	font-weight:bold;
}
.post dd	{
    font-style:italic;
}


.post object {
	margin: 1em auto;
}
.post .info {
	margin:0;
	margin-top:1em;
	border-top:1px solid #9c9c9c;
	color:#9c9c9c;
}
/*
	Kategorie und weitere Angaben über das Posting.
*/
.post .cat {
	margin: 1.5em 2.5em;
	padding:1em;
	color:#999;
	font-size:small;
	background-color: #eef;
	border:1px solid #33f;
	border-radius:.5em;
}

.kontakt fieldset{
	padding:1em;
	border-top: 1em solid #eef;
	border-left: 1em solid #eef;
	border-bottom: none;
	border-right: none;
}
.kontakt fieldset legend{
	background-color: #eef;
	font-weight:bold;

}
.kontakt fieldset label{
	display:block;
	width:60%;
	text-align:right;

}
.kontakt fieldset input{
	width:60%;
}
.kontakt fieldset label input{
	width:20em;
}
.kontakt fieldset small{
	position:relative;
	top:-1.5em;
	left:60%;
}

div.post > pre {
	color: #00d;
    
	background-color: #FFd;
	
	margin: 1em;
	padding:5px;
	
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
    box-shadow: 5px 5px 5px #888888;
	
	overflow:auto;
}
#content code {
	font-weight: bold;
	color: blue;
}


/*
Tabellen 

*/
table.sortable th {
	text-decoration:underline;
}
table.sortable th.no_sort {
	color: #666;
	text-decoration:none;
}

table.sortable tfoot td {
	color: #666;
	background-color: #ccc;
}

#content table { 
	border-collapse:collapse; 
	width: 90%; 
	margin: 0 auto;
	border-right:1px solid black;
	border-top:1px solid black;
	border-bottom:1px solid black;
}

#content table tr th  {
	border-bottom:1px solid black; 
	border-left:1px solid black; 
	text-align:center;
	background-color: #E5F3FE;
}
#content table td {
	border-left:1px solid black;
}

/*
 * simple related posts
 * 
 * */
 
.srp_class{
    width:75%;
    margin:1em auto;
    font-size:90%;
    
}

#comments{
	font-size: .95em;
	line-height:1.2;
	padding:1em;
}
#comments h2{
}

#comments dl{ 
	margin:1em 0;
}

#comments dt span { /* Die Nummerierung der Postkommentare */
	font-family: Arial, serif;
	font-size:1.2em;
	font-weight:bold;
	text-align:right;

	background-color: #fff;
	color:#000;
	
	float:left;
	
	width:1.9em;
	padding:2px;
	margin: 10px;
	
	border-bottom:1px solid gray;
	border-right:1px solid gray;
}

#comments dt {
	background-color: #f0f0f0;
	color: #909090;
	border:none;
	font-size:0.8em;
	padding:0.1em;
	
	height:40px;
}

#comments dd {
	padding: 0.2em 0; 
	font-size:1em;
}
#comments dd p{
	padding: 0.2em 0 .2em 2em; 
}
#comments dd code{
	display:block;
    white-space: pre-wrap;
    color:#000;
    
}
#comments .struppi {
	background-color: #f0f090;
}
#comments p {
	margin-top:1em;
}
#comments .avatar { 
	float: right;
	border: 1px solid #000;
	padding: 2px;
	margin: 2px;
	background: #fff;
}

#credit {
	text-align:center;
	margin-top:4em;
	color:#c0c0c0;
	font-size:88%;
}

address{
    font-family:courier, monospace;
    font-style:normal;
}


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


.hinweis {
    background-color: yellow;
    color: black;
    font-weight: bold;

    padding:.2em 1em;
	margin: .1em;
    border:1px solid red;
	border-radius:.5em;
}
.markierung {
	background-color: #f0f0f0;
	font-size:small;
	font-weight:bold;

    padding:.5em;
	margin: 0.5em 2em;
    border:1px solid red;
	border-radius:.5em;
}

.odd {
    background-color: #f0f0f0;
}
.center { margin:auto; text-align:center;}

input[type=text] {
    /*width:15em;*/
}

textarea { width:95%; margin:0 auto;}
fieldset textarea {
   padding:1px;
   width:90%;
   
   
}

a:link {
    color:blue;
}
a:visited { }
a:hover {
    color:red;
}

/* 
	++++++++++++++++++++++++++++++++
	syntaxhighlighter  
	++++++++++++++++++++++++++++++++
*/
.even {background-color: #eee; }
div.code{
	overflow:auto;
	width:95%;
	max-height:30em;
	font-family:'Courier New', monospace;
	padding:2px;
	margin:1em;
}
.code table { 
	width:95%;
	margin:0 auto;
	border-collapse:collapse;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

.code  td
{
   border:none;
   padding:1px;
   white-space:nowrap;
   margin:0;
}
.code  pre
{
   border:none;
   padding:1px;

   margin:0;
}
.code small {
	color:#909090;
	font-size:88%;
}

/**/

.comment {
	font-style:italic;
	color: #808080;
}
.keyword {
	color: #0000FF;
	font-weight: bold;
}
.string {
	color: #800000;
}



.foto /* Fotocontainer*/ {
	overflow:auto;
}
.foto img /* Fotocontainer*/ {
}
.foto_left{ float:left; margin:2px;}
.foto_right{ float:right; margin:2px;}
.foto_center{ display:block; margin:0 auto;}


@media print {
#content {
	margin-right:0em;
}

#menu { display:none;}
	
body {
	margin-top:0em; /* Erstmal Platz im body schaffen */
}

div#top { display:none;}

#searchform { display:none;}

h1 { display:none;}

} /* @media print */
