@charset "utf-8";

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

Name des Dokumentes: "screen.css"

Erstellt von: "Nico Gutmann"
Erstellt für: "tuts.nicogutmann.de"

Erstellungsdatum: "06.08.2009"
Letzte Änderung: "29.11.2009"

Farben:
----------------
blau: #054c98
lila: #8a24ac
rot: #bf2304
grün: #359721

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



/* Setzt alle vordefinierten Einstellungen des Browsers auf 0
-------------------------*/
* {
margin:				0;
padding:			0;
border:				0;
list-style:			none;
outline:			0;
font-style:			normal
}


/* /////////////////////////////// Allgemeine Informationen /////////////////////////////// */

html,body {
	height: 100%;
}

div,h1,ul,img { behavior: url(imgs/iepngfix.htc) }

body {
	background: url(imgs/bg-header.jpg) repeat-x;
	font: 100%/120% "Lucida Grande",Tahoma,Arial,sans-serif;
	color: #555
}

html {
	background: url(imgs/bg-grass.jpg) repeat
}

/* /////////////////////////////// Wrapper & Kopf /////////////////////////////// */


/* Umhuellendes Div
-------------------------*/
#seite {
	width: 100%;
	min-width: 800px;
	max-width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	position: relative;
	font-size: 80%
}

div#seite:after {
	content:".";
	height: 1px;
	visibility: hidden;
	display: block;
	clear: left
}

/* Das Logo
-------------------------*/
h1 {
	height: 100px;
	margin: 0 auto;
	padding: 30px 0 0
}
	
	h1 a {
		text-decoration: none
	}
		
	h1 strong,
	#jump {
		display: block;
		text-indent: -2000px
	}
	


/* /////////////////////////////// Navigation /////////////////////////////// */

ul#navi {
	background: url(imgs/header.png) no-repeat;
	margin: -50px 0 10px;
	padding: 145px 0 0 0;
	border-bottom: 1px solid #000;
	overflow: hidden;
	height: 36px;
	width: 100%;
}

	#navi li {
		float: left;
		width: 25%;
		height: 36px;
		line-height: 37px;
		text-align: center
	}
	
	.cat-item-1 {
		background: url(imgs/navi_bg-first.png) right top no-repeat
	}
	
	.cat-item-3 {
		background: url(imgs/navi_bg-sec.png) right top no-repeat
	}
	
	.cat-item-5 {
		background: url(imgs/navi_bg-mid.png) right top no-repeat
	}
	
	.cat-item-4 {
		background: url(imgs/navi_bg-over.png) repeat-x;
		margin-right: 0
	}
	
		#navi a {
			color: #555;
			display: block;
			width: 100%;
			text-decoration: none
		}

		#navi a:hover {
			text-decoration: underline
		}

		div .category-css-tutorials,
		div .category-css-tutorials a,
		.cat-item-1 a:hover {
			color: #054c98 !important
		}

		div .category-html-tutorials,
		div .category-html-tutorials a,
		.cat-item-3 a:hover {
			color: #8a24ac !important
		}

		div .category-webdesign,
		div .category-webdesign a,
		.cat-item-5 a:hover {
			color: #359721 !important
		}

		div .category-webentwicklung,
		div .category-webentwicklung a,
		.cat-item-4 a:hover {
			color: #bf2304 !important
		}

		.current-cat {
			text-decoration: underline
		}

	#nav-skip {
		display: none
	}
	
		#nav-kontakt {
			position: absolute;
			top: 0;
			right: 10px;
			width: auto !important;
			height: 22px !important;
			background: white;
			padding: 0 8px;
			border: 1px solid #DDD;
			border-top: none;
			line-height: 22px !important
		}

		#nav-kontakt a {
			display: inline;
			background: white url(imgs/icon_kontakt.png) 0 -19px no-repeat;
			padding: 0 0 0 17px;
			color: #666;
			font-size: 90%;
			text-decoration: none
		}

		#nav-kontakt a:hover {
			color: black;
			background: white url(imgs/icon_kontakt.png) 0 2px no-repeat
		}

		#nav-vorschlag {
			position: absolute;
			top: 0px;
			right: 90px;
			width: auto !important;
			border-top: none;
			line-height: 22px !important
		}

		#nav-vorschlag a {
			display: inline;
			background: white;
			border: 1px solid #DDD;
			padding: 3px 10px;
			color: #666;
			font-size: 90%;
			text-decoration: none
		}

		#nav-vorschlag a:hover {
			color: black
		}

			
/* /////////////////////////////// Inhalt /////////////////////////////// */
	
/* Startseite
-------------------------*/
.links {
	width: 48%;
	float: left;
	height: 280px;
	position: relative;
	margin: 0 .98% 20px;
	display: inline
}
		
		
	/* Content
	-------------------------*/
	.textbox {
		background: white;
		padding: 20px
	}

		.home .textbox p,
		.archive .textbox p {
			text-align: justify
		}
	
			/* Paragrafen im Content
			-------------------------*/
			.textbox p {
				padding-top: 10px
			}

				/* Verlinkung im Content
				-------------------------*/
				.textbox p a {
					color: #000;
					text-decoration: underline
				}

				.textbox p a:hover {
					color: #FFF;
					text-decoration: none;
					background: #000
				}
		
	.home h2:before {
		display: block;
		height: 15x;
		width: 200px;
		color: #E9E9E9;
		position: absolute;
		top: 13px;
		left: 20px
	}
	
	.home h2.category-css-tutorials:before {
		content:"CSS:"
	}
	.home h2.category-html-tutorials:before {
		content:"HTML:"
	}
	.home h2.category-webentwicklung:before {
		content:"ENTWICKLUNG:"
	}
	.home h2.category-webdesign:before {
		content:"DESIGN:"
	}
	
	
	/* Hauptüberschrift der Artikel
	-------------------------*/
	#inhalt h2,
	.post {
		text-transform: uppercase;
		font-size: 130%;
		font-weight: bold;
		font-family: Arial,sans-serif;
		margin: 10px 0 15px 0
	}

	/* Hauptüberschrift der Seiten
	-------------------------*/
	.page h2 {
		text-transform: uppercase;
		font-size: 130%;
		font-weight: bold;
		font-family: Arial,sans-serif;
		color: black;
		margin: 10px 0 15px 0
	}
	
		#inhalt .post a,
		#inhalt h2 a {
			text-decoration: none
		}

		#inhalt .post a:hover,
		#inhalt h2 a:hover {
			background: #EEE
		}
	
	/* Datum und Kategorie
	-------------------------*/
	.datum {
		font-size: 80%;
		color: #777;
		margin: -30px 0 0;
		font-weight: normal
	}
	
	/* Überschriften der Absätze
	-------------------------*/
	h3 {
		color: #000;
		text-transform: uppercase;
		font-size: 110%;
		font-family: Arial,sans-serif;
		font-weight: bold;
		padding: 35px 0 0
	}
	.info h3 {
		font-size: 100%;
		padding: 25px 0 15px
	}
	
		h3.post {
			padding: 0;
		}
		
	.artikel h4 {
		font-size: 100%;
	}

	p+h4 {
 	  margin-top: 15px
	}
	
	
	/* weiterlesen & Kommentare
	----------------------------*/
	
	.weitere-infos {
		margin: 1px 0 0 0;
		height: 70px;
		line-height: 33px;
		background: url(imgs/beitrag_fusszeile-links.png) no-repeat;
		font-size: 90%;
		padding-right: 20px;
		text-align: right;
		position: relative
	}
	
		.weitere-infos span {
			background: url(imgs/icon_kommentar.png) left center no-repeat;
			padding: 0 0 0 18px
		}
		
		.null {
			background: none !important;
			padding: 0 0 0 0 !important
		}

	.more-link {
		display: block;
		position: absolute;
		left: 20px;
		bottom: 32px;
		padding: 0 0 0 13px;
		background: url(imgs/icon_weiterlesen.png) left center no-repeat !important
	}

		.more-link a,
		.weitere-infos a {
			text-transform: uppercase;
			color: #054c98 !important;
			text-decoration: none !important
		}

		.more-link a:hover,
		.weitere-infos a:hover {
			color: #000 !important;
			text-decoration: underline !important;
			background: transparent !important;
		}
		
		.weitere-infos span {
			color: #000
		}
		
	/* Paginierung - Seitenanzahl
	-----------------------------*/
	
	.blaettern {
		clear: left;
		margin: 5px 0 15px 20px
	}
	
		.blaettern li {
			display: inline
		}

		.aktuelle-seite {
			background: black;
			color: white;
			border: 1px solid #222;
			padding: 2px 5px
		}

		.blaettern a {
			background: white;
			border: 1px solid #999;
			color: #333;
			padding: 2px 5px;
			text-decoration: none
		}

		.blaettern a:hover {
			background: black;
			color: white
		}
		

	/* Such-Feld
	----------------------------*/
	#searchform {
		position: absolute;
		top: 50px;
		right: 10px
	}
	
		#searchform label {
			display: none
		}

		#s {
			width: 150px;
			font: 80%/120% Arial,sans-serif;
			padding: 4px 5px 3px 20px;
			background: white url(imgs/search.jpg) left center no-repeat;
			border: 1px solid #DDD
		}

		#s:focus {
			border: 1px solid black
		}

		#searchsubmit {
			width: 50px;
			font: 80%/120% Arial,sans-serif;
			padding: 2px 5px;
			background: black;
			color: white;
			border: 1px solid black
		}

		#searchsubmit:hover {
			background: #444
		}
	
	/* Fehlerliste bei der Suche
	----------------------------*/
	#fehlerliste li {
		margin: 5px 0 0 15px;
		padding: 0 0 0 17px;
		background: url(imgs/icon_rechtschr.png) left center no-repeat
	}
	
		

/* /////////////////////////////// Artikel /////////////////////////////// */


/* Linke Spalte
-------------------------*/
div.artikel {
	float: left;
	width: 73%;
	margin: 0 1%;
	max-width: 716px;
	display: inline /* IE-HACK */
}

.single .artikel,
.page .artikel {
		margin-bottom: 30px;
		padding-bottom: 70px;
		background: url(imgs/beitrag_fusszeile-links.png) left bottom no-repeat;
}

	#breadcrumbs a {
		color: white;
		text-decoration: underline
	}

	#breadcrumbs a:hover {
		text-decoration: none
	}

	.nrcomments {
		margin: 20px 0 0 0;
		position: relative
	}

		.nrcomments a {
			color: black;
			text-decoration: none
		}

		.nrcomments a:hover {
			text-decoration: underline
		}

		.nrcomments h2 {
			text-transform: uppercase;
			font-size: 130%;
			font-weight: bold;
			font-family: Arial,sans-serif;
			padding: 20px 0 20px 0;
			border-top: 1px solid #bbb;
			border-bottom: 1px solid #ddd
			}

		.verfassen {
			position: absolute;
			right: 30px;
			top: 7px
		}

	/* Wort-Hervorhebung
	-------------------------*/
	.textbox em {
		font-style: italic;
		color: black
	}

	/* Definitionslisten
	-------------------------*/
	.artikel dl {
		margin: 10px 0
	}

		.artikel dt {
			line-height: 25px;
			color: #222;
			border-bottom: 1px solid #dedede
		}

		.artikel dd {
			padding: 3px 15px 12px
		}

		.artikel dd em {
			text-decoration: underline
		}

	/* HTML- und CSS-Code
	-------------------------*/
	q,code {
		display: block;
		width: 90%;
		font: 100%/130% Courier,sans-serif;
		background: #EEE;
		border: 1px solid #CCC;
		margin: 25px auto 0;
		padding: 20px 10px 10px;
		position: relative
	}
	
	q:before {
		display: block;
		height: 15px;
		color: #777;
		position: absolute;
		margin: -30px 0 20px;
		left: 0px;
		background: white;
		padding: 2px 3px;
		border: 1px solid #CCC;
		content: "Zitat:"
	}

	code:before {
		display: block;
		height: 15px;
		color: white;
		position: absolute;
		margin: -30px 0 20px;
		left: 0px;
		background: black url(imgs/bg-code.gif) 3px center no-repeat;
		padding: 2px 5px 2px 20px
	}

	code.css {
		color: #054c98
	}

	code.css:before {
		background: #054c98 url(imgs/bg-code-css.gif) 3px center no-repeat;
		content: "CSS-Code:"
	}

	code.html {
		color: #8a24ac
	}

	code.html:before {
		background: #8a24ac url(imgs/bg-code-html.gif) 3px center no-repeat;
		content: "HTML-Code:"
	}
	
	
		code span {
			margin-top: 10px;
			display: block

		}

		code b {
			font-style: normal;
			font-weight: normal;
			color: black
		}
	
	.nachteile {
		margin: 10px 0 10px 20px
	}
	
	.nachteile li {
		padding: 5px 0 5px 16px;
		background: url(imgs/icon_nachteile.png) 0 11px no-repeat;
		border-bottom: 1px solid #eee;
	}

	.nachteile li:hover {
		background: white url(imgs/icon_nachteile.png) 0 11px no-repeat;
	}
	
	.liste {
		margin: 10px 0 10px 20px
	}
	
	.bilder {
		position:relative;
		padding-left: 260px;
		margin: 10px 0
	}

	.bilder li {
		height: 160px;
		margin: 5px 0 10px;
		border-bottom: 1px solid #ddd
	}

	.bilder img {
		display: block;
		width: 250px;
		position: absolute;
		left: 0
	}

	
/* Rechte Spalte
-------------------------*/
div.info {
	position: absolute;
	right: 1%;
	top: 291px;
	width: 24%;
	max-width: 224px
}
	
	.info-box {
		background: url(imgs/bg-box-rechts.png) left bottom repeat-x;
		margin: 0 0 15px 0
	}

		.info-box li {
			margin: 0 0 0 10px
		}

		.info-box:after {
			content:'';
			display:block;
			width:224;
			height: 45px;
			background: url(imgs/beitrag_fusszeile-rechts.png)
		}

		.info h3,
		.info ul {
			margin:0 0 0 20px;
		}

		.info-box a {
			text-transform: uppercase;
			color: #999;
			font-size: 105%;
			text-decoration: none
		}

		.info-box a:hover {
			color: #000
		}

		.quicklinks a {
			padding: 0 0 0 18px
		}

		.bspiel {
			background: url(imgs/icon_bsp.png) 0 4px no-repeat
		}

		.dload {
			background: url(imgs/icon_dload.png) 0 4px no-repeat
		}

		a[href$=".pdf"] {
			background: url(imgs/icon_pdf.png) 0 3px no-repeat
		}

			.followlinks li a {
				background: url(imgs/externer-link.png) left center no-repeat;
				padding: 0 0 0 13px
			}

			.followlinks li a:hover {
				color: #000
		}

		.tags li {
			display: inline
		}
			.tags li a {
				text-decoration: underline
			}

		.impressum p {
			padding: 0 20px 10px
		}
	
	
	/* Kommentare
	-------------------------*/
	.kommentare {
		margin: 20px 0 0
	}

	.kommentare li {
		position: relative;
		margin: 5px 0 0;
		width: 92%;
		color: #555;
		line-height: 110%;
		padding: 15px 15px 10px 20px;
		border: none
	}

	.kommentare li.even {
		background: #f1f1f1 url(imgs/icon_comment.png) left center no-repeat
	}

	.kommentare li.odd {
		background: #e2e2e2 url(imgs/icon_comment.png) left center no-repeat
	}
	
		.comment-author {
			line-height: 50%;
			margin: 0 0 5px 0
		}
	
			.kommentare .fn {
				background: #fff;
				text-decoration: none;
				font-style: normal;
				text-transform: uppercase;
				padding: 2px 4px
			}
	
				.fn a {
					color: black !important
				}

				.kommentare a {
					color: black;
					text-decoration: none;
				}

				.says {display: none}
	
		.comment-meta {
			position: absolute;
			right: 20px;
			top: 12px;
			text-align right
		}
	
			.comment-meta a {
				font-size: 85%;
				color: #555;
				padding: 0 4px 2px
			}
	
	/* Kommentar verfassen
	-------------------------*/
	.komm-verfassen {
		margin: 30px 0 0
	}
	
		.komm-verfassen h4 {
			color: #000;
			background: #FFF;
			padding: 0 0 0 20px;
			margin: -20px 0 10px 0;
			border-top: 1px solid black
		}

		.komm-verfassen p {
			margin: 3px 0;
			position:relative
		}

		.komm-verfassen label {
			background: black;
			color: white;
			padding: 0 3px
		}

		.komm-verfassen input[type=text],
		.komm-verfassen textarea {
			width: 250px;
			font: 100%/110% Arial,sans-serif;
			padding: 4px 4px;
			background: #ddd;
			color: #333;

		}

		.komm-verfassen input[type=text]:focus,
		.komm-verfassen textarea:focus {
			background: url(imgs/bg-kommentare.png) repeat;
			color: white;
			border: 1px solid #FFF
		}

		label[for="submit"] {
			display: none
		}

		input[type=submit] {
			width: 90px;
			background: white;
			border: 1px solid #666;
			padding: 1px 2px
		}
	
	
	/* ARCHIV
----------------------------------*/

#breadcrumbs,
h2.such-titel,
h2.archiv-titel {
	color: white;
	background: rgba(0, 0, 0, 0.6);
	margin: -9px 0 2px !important;
	line-height: 25px;
	padding: 0 0 0 25px;
	font-size: 90% !important;
	border-bottom: 1px solid #000
}
/*	.category-css-tutorials .archiv-titel {
		background: #054c98;
	}
	
	.category-html-tutorials .archiv-titel {
		background: #8a24ac;
	}
	
	.category-webentwicklung .archiv-titel {
		background: #bf2304;
	}
	
	.category-webdesign .archiv-titel {
		background: #359721;
	}*/	
	
	/* KONTAKTFORMULAR
----------------------------------*/
	
	.wpcf7-form {
		overflow: hidden;
		padding: 20px 0
	}
	
		.wpcf7-form label {
			clear: left;
			float: left;
			width: 100px;
			text-align: right;
			margin: 5px 5px
		}

		.wpcf7-form input,
		.wpcf7-form select,
		.wpcf7-form textarea {
			width: 300px;
			float: left;
			background: white;
			border: 1px solid #CCC;
			padding: 3px 5px;
			margin: 5px 0;
			font: 100%/120% Arial,sans-serif
		}

		.wpcf7-form input:focus,
		.wpcf7-form textarea:focus {
			background: #F5F5F5;
			border: 1px solid #666;
		}

		.wpcf7-form span {
			float: right;
			color: #d52127;
			margin: 5px 3px 0 0
		}

		.wpcf7-form .submit-p {
			clear: left;
			float: none
		}

			.wpcf7-form input[type="submit"] {
				width: 100px;
				margin: 0 0 0 322px;
			}


	/* Artikel: Layoutbasiert
	-------------------------*/
	ol li {
		border: 1px solid #000;
		margin: 2px 0;
		padding: 0 0 0 5px;
		color: white;
		width: 70%
	}
	
	#layout-logo {
		background: #042a53
	}
	#layout-suche {
		background: #7595b8
	}
	#layout-content {
		background: #054c98
	}
	#layout-subcont {
		background: #2373c9
	}
	#layout-top {
		background: #454b51
	}
	#layout-navi {
		background: #000
	}


/* /////////////////////////////// Footer /////////////////////////////// */
	
#site-info {
	width: 100%;
	height: 160px;
	font-size: 70%;
	position: relative;
	background: black url(imgs/bg-footer.jpg) repeat-x
	}

		/* Tag-Cloud
		-------------------------*/
		#tagcloud {
			position: absolute;
			width: 500px;
			top: 50px;
			left: 100px;
			font-family: arial,sans-serif
		}

		#tagcloud:before {
			display: block;
			position: absolute;
			height: 20px;
			width: 500px;
			top: -30px;
			left: 0px;
			content:"Tag-Cloud";
			color: white;
			background: black;
			padding: 5px 10px;
		}

		#site-info li {
			float: right;
			padding: 10px 20px 0 0
		}
	
			/* Links unten
			-------------------------*/
			#site-info a {
				color: #666;
				text-decoration: none
			}

			#site-info a:hover {
				color: #FFF
			}