/*
Theme Name: Mattias Stiller
Theme URI: http://www.mattiasstiller.de
Description: Mattias Stiller - Webdesign & Webberatung
Version: 1.0
Author: Mattias Stiller
Author URI: http://www.mattiasstiller.de
*/
 
@import "cforms.css";

/*GLOBAL
-------------------------------------------------------------------------*/
 html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
 pre, form, fieldset, table, th, td { 
 margin: 0; padding: 0; 
} 
a:focus {
	outline: none;
}
html {
	margin-bottom: 30px;
}
body {
	font-size: 12px;
	font-family:  Arial, Verdana, Sans-Serif;
	color: #313131;
	text-align: center;
	background: url('images/bg_main.gif');
	background-position: 0 0;
	background-repeat: repeat-x;
}
#wrapper {
	margin: 0px auto;
	padding: 60px 0 0 0 !important;
	width: 985px;
	text-align: left;  
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
    font-size: 12px;
	font-family:  Arial, Verdana, Sans-Serif;  
}
h1  {
	color: #d6d6d6;
    font-size: 26px; 
}
.ohno {
	display: none;
}
.navigation  {
    padding: 1px 0 0 0;
    width: 57px;
    float: left;
    margin-left: 11px;
}
#tooltip {
	position: absolute;
	border: 1px solid #fff;
	background: #313131;
	padding: 10px 15px;
	color: #fff;
	display: none;
	text-align: left;
	line-height: 19px;
}


/*HEADER
-------------------------------------------------------------------------*/
#wrapper #header {
	margin: 0;
}
#wrapper #header .logo {
	width: 355px;
	float: left; 
}
#wrapper a img {
	border: none;
}

.buehne {
	margin: 10px 0 0 0;
	height: 354px;
}
* html .buehne {
    padding: 10px 0 0 0;
}
*+html .buehne {
    padding: 10px 0 0 0;
}
.buehne .buehne_leftside {
	float: left;
	width: 372px;
	height: 260px;
	margin: 45px 0 0 0; 
}
.buehne .buehne_leftside h1 {
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: normal;
	color: #fff; 
	line-height: 20px;
}
.buehne .buehne_leftside img {
	margin: 0 0 10px 0;
}
.buehne .buehne_leftside p {
	margin: 0 0 15px 0;
	padding: 0;
	color: #fff;
	font-weight: normal;
	font-size: 11px;
}
.buehne .buehne_leftside p a.alle_projekte {
	background: url('images/button_buehne.gif');
	background-position: 0 0;
	background-repeat: repeat-x;
	width: 106px;
	height: 24px;
	float: left;
}
.buehne .buehne_leftside p a.alle_projekte:hover {
	background-position: 0 -24px;
}
.buehne .buehne_leftside p a.kontakt {
	background: url('images/button_buehne.gif');
	background-position: -116px 0;
	background-repeat: repeat-x;
	width: 80px;
	height: 24px;
	float: left;
	margin: 0 0 0 10px;
}
.buehne .buehne_leftside p a.kontakt:hover {
	background-position: -116px -24px;
}
.buehne .buehne_leftside p a.about {
	background: url('images/button_buehne.gif');
	background-position: -205px 0;
	background-repeat: repeat-x;
	width: 79px;
	height: 24px;
	float: left;
	margin: 0 0 0 10px;
}
.buehne .buehne_leftside p a.about:hover {
	background-position: -205px -24px;
}
.buehne .buehne_rightside {
	float: left;
	width: 613px;
	height:345px;
	padding:5px 0 0;
 	background: url('images/bg_buehne.jpg') no-repeat 0 0;
}
.buehne .buehne_rightside a img {
margin:0 0 0 35px;
}
.buehne table {
    color: #fff;
    margin: 0 0 15px 0;
}
.buehne table tr td {
    vertical-align: top;
    font-size: 11px;
    height: 17px;
    line-height: 17px;
}
.buehne table tr td.first {
   width: 55px;
}
.buehne .main_pic {
   position: absolute;
   z-index: 40;
}
.buehne .star {
   position: absolute;
   z-index: 50;
margin:238px 0 0;
}


/*MENU
-------------------------------------------------------------------------*/
#header .menu {
	float: right;
	margin: 24px 6px 0 0;
}
#header .menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#header .menu li {
	display: inline;
}
#header .menu li a {
	float: right;
	float: left;
	margin-left: 10px;
	height: 34px;
	width: 136px;
    background-repeat: no-repeat;
}
#header .menu li a.startseite {
	background: url('images/bg_menu.gif');
	background-position: 0 0;
}
#header .menu li a.startseite:hover {
	background: url('images/bg_menu.gif');
	background-position: 0 -34px;
}
.page-id-2 #header .menu li a.startseite {
	background: url('images/bg_menu.gif');
	background-position: 0 -68px;
}
#header .menu li a.projekte {
	background: url('images/bg_menu.gif');
	background-position: -145px 0;
}
#header .menu li a.projekte:hover {
	background: url('images/bg_menu.gif');
	background-position: -145px -34px;
}
.page-id-11 #header .menu li a.projekte {
	background: url('images/bg_menu.gif');
	background-position: -145px -68px;
}
.page-id-449 #header .menu li a.projekte {
	background: url('images/bg_menu.gif');
	background-position: -145px -68px;
}
.archive #header .menu li a.projekte, 
.single #header .menu li a.projekte {
	background: url('images/bg_menu.gif');
	background-position: -145px -68px;
}
#header .menu li a.leistungen {
	background: url('images/bg_menu.gif');
	background-position: -290px 0;
}
#header .menu li a.leistungen:hover {
	background: url('images/bg_menu.gif');
	background-position: -290px -34px;
}
.page-id-13 #header .menu li a.leistungen {
	background: url('images/bg_menu.gif');
	background-position: -290px -68px;
}
#header .menu li a.kontakt {
	background: url('images/bg_menu.gif');
	background-position: -436px 0;
}
#header .menu li a.kontakt:hover {
	background: url('images/bg_menu.gif');
	background-position: -436px -34px;
}
.page-id-15 #header .menu li a.kontakt {
	background: url('images/bg_menu.gif');
	background-position: -436px -68px;
}


/*SIDEBAR
-------------------------------------------------------------------------*/
#wrapper #sidebar {
	width: 575px;
	float: right;
}
#wrapper #sidebar_extra {
	width: 270px;
	float: right;
}
#wrapper #sidebar h1 {
	margin: 0 0 10px 0;
}
#wrapper #sidebar_extra h1 {
	margin: 0 0 10px 0;
}
#wrapper #sidebar h2 {
	font-size: 16px;
}
#wrapper #sidebar .date {
	color: #adadad;
	margin: 0 0 10px 0;
}
#wrapper #sidebar .date a {
	color: #adadad;
	text-decoration: none;
}
#wrapper #sidebar .date a:hover {
	text-decoration: underline;
}
#wrapper #sidebar .maintext {
	margin: 0 0 20px 0;
}
#wrapper #sidebar .maintext p {
	margin: 0 0 10px 0;
	line-height: 17px;
}
#wrapper #sidebar p a.alle_projekte {
	background: url('images/button_sidebar.gif');
	background-position: 0 0;
	background-repeat: repeat-x;
	width: 107px;
	height: 24px;
	float: left;
}
#wrapper #sidebar p a.alle_projekte:hover {
	background-position: 0 -24px;
}
#wrapper #sidebar p a.webseite {
	background: url('images/button_sidebar.gif');
	background-position: 123px 0;
	background-repeat: repeat-x;
	width: 123px;
	height: 24px;
	float: left;
	margin: 0 0 0 10px;
}
#wrapper #sidebar p a.webseite:hover {
	background-position: 123px -24px;
}
 

/*CONTENT
-------------------------------------------------------------------------*/
#wrapper #content {
	width: 365px;
	float: left;
}
#wrapper #content h1 {
	margin: 0 0 10px 0;
}
#wrapper #content .maintext p {
	margin: 0 0 10px 0;
	line-height: 17px;
}
#wrapper p a {
	text-decoration: underline;
	color: #313131;
}
#wrapper p a:hover {
	text-decoration: none;
}


/*CONTENT STARTSEITE
-------------------------------------------------------------------------*/
#wrapper #content ul.startseite {
	list-style-type: none;
	background: url('images/bg_startseite_list.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}
#wrapper #content ul.startseite li {
    margin: 0 0 0 60px;
    height: 118px;
}


/*CONTENT PROJEKTE
-------------------------------------------------------------------------*/
.page-id-11 .projekte_klasse {
	margin: 0 0 30px 0;
	width: 980px;
}
.page-id-449 .projekte_klasse {
	margin: 0 12px 0 0;
	width: 180px;
	height: 118px;
    float: left; 
    border: solid 1px #fff;
}
.page-id-11 .projekte_klasse h1,
.page-id-449 .projekte_klasse h1 {
	margin: 0 0 10px 0;
}
.page-id-11 .projekte_klasse p,
.page-id-449 .projekte_klasse p {
	margin: 0 0 10px 0;
}
.page-id-11 .ansicht,
.page-id-449 .ansicht  {
	margin: 0 0 40px 0;
}
 
.page-id-11 .ansicht p,
.page-id-449 .ansicht p {
	display: inline;
	margin-right: 10px;
}
.page-id-11 a.listenansicht {
	background: url('images/listenansicht.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: underline !important;
	cursor: default;
}
.page-id-11 a.kurzfassung {
	background: url('images/kurzfassung.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: none !important;
}
.page-id-11 a.kurzfassung:hover {
	background: url('images/kurzfassung.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: underline !important;
}
.page-id-449 a.listenansicht {
	background: url('images/listenansicht.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: none !important;
}
.page-id-449 a.listenansicht:hover {
	background: url('images/listenansicht.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: underline !important;
}
.page-id-449 a.kurzfassung {
	background: url('images/kurzfassung.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 4px 0 4px 25px;
	text-decoration: underline !important;
	cursor: default;
}
.page-id-11 .projekte_klasse ul.list_projekte,
.page-id-449 .projekte_klasse ul.list_projekte {
	list-style-type: none;
}
.page-id-11 .projekte_klasse ul.list_projekte li,
.page-id-449 .projekte_klasse ul.list_projekte li {
	margin: 0 0 10px 0;
}
.page-id-11 .projekte_klasse ul.list_projekte .leftside_projekte{
	float: left;
	width: 410px;
}
 
.page-id-11 .projekte_klasse ul.list_projekte .image_footer {
	list-style-type: none;
	margin: 10px 0 5px 0;
	width: 350px;
}
.page-id-11 .projekte_klasse ul.list_projekte .image_footer li {
	margin: 0 0 0 0;
	line-height: 17px;
}
.page-id-11 .projekte_klasse ul.list_projekte .image_footer li a {
	text-decoration: none;
	color: #000; 
}
.page-id-11 .projekte_klasse ul.list_projekte .image_footer li a:hover {
	text-decoration: underline;
}
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte {
	float: left;
	width: 570px;
}
.page-id-449 .projekte_klasse ul.list_projekte .rightside_projekte {
	float: left;
	width: 690px;
}
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte h2 a  {
	font-size: 14px;
	color: #000;
	text-decoration: none;
}
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte h2 a:hover  {
	text-decoration: underline;
}
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte .date,
.page-id-449 .projekte_klasse ul.list_projekte .rightside_projekte .date   {
	color: #adadad;
}
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte .date a,
.page-id-449 .projekte_klasse ul.list_projekte .rightside_projekte .date a  {
	color: #adadad !important;
	text-decoration: none !important;
} 
.page-id-11 .projekte_klasse ul.list_projekte .rightside_projekte .date a:hover,
.page-id-449 .projekte_klasse ul.list_projekte .rightside_projekte .date a:hover  {
	text-decoration: underline !important;
}

ul#filter {
	float: right;
	font-size: 12px;
	list-style: none;
 
}
ul#filter li {
	float: left;
	line-height: 12px;
 
	padding-right: 10px;
}
ul#filter li:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0;
}
ul#filter a {
	color: #999;
	text-decoration: none;
}
ul#filter li.current a, ul#filter a:hover {
	text-decoration: underline;
}
ul#filter li.current a {
	color: #333;
	font-weight: bold;
}
ul#portfolio {
	float: left;
	list-style: none;
	margin-left: 0;
	width: 985px;
}
ul#portfolio li {
	border: none;
	float: left;
	margin: 0 17px 0 0;
}
ul#portfolio a {
	display: block;
	width: 100%;
}
ul#portfolio a:hover {
	text-decoration: none;
}
ul#portfolio img {
	border: none;
	display: block;
	padding-bottom: 5px;
}


/*CONTENT LEISTUNGEN
-------------------------------------------------------------------------*/
.page-id-2 #myController, .page-id-2 .jFlowPrev {
	position: absolute;
    margin: -5000px;
}
.page-id-2 .jFlowNext {
    background: url('images/pic_mehr_leistungen.gif');
	background-repeat: no-repeat;
    cursor:pointer;
    height: 23px;
    width: 123px;
    float: right;
}
.page-id-2 .jFlowNext:hover {
	background-position: 0 -23px;
}
.page-id-2 .leistungen_paginator {
	text-align: right; 
}
.page-id-13 .leistungen_list {
	list-style-type: none;
	height: 450px;
}
.page-id-2 .leistungen_list {
	list-style-type: none;
	height: 440px;
}
.page-id-13 .leistungen_list li, 
.page-id-2 .leistungen_list li {
    width: 250px;
    height: 110px;
    float: left;
    padding: 0 0 0 57px;
    background: url('images/bg_leistungen_list.gif');
	background-repeat: no-repeat;
 }
.page-id-13 .leistungen_list li.zwei, 
.page-id-13 .leistungen_list li.fuenf, 
.page-id-13 .leistungen_list li.acht,  
.page-id-13 .leistungen_list li.elf {
    margin: 0 30px;
}
.page-id-13 .leistungen_list li.eins, 
.page-id-2 .leistungen_list li.eins {
	background-position: 0 0;
}
.page-id-13 .leistungen_list li.zwei,
.page-id-2 .leistungen_list li.zwei {
	background-position: 0 -390px;
}
.page-id-13 .leistungen_list li.drei,
.page-id-2 .leistungen_list li.drei {
	background-position: 0 -780px;
}
.page-id-13 .leistungen_list li.vier,
.page-id-2 .leistungen_list li.vier {
	background-position: 0 -130px;
}
.page-id-13 .leistungen_list li.fuenf,
.page-id-2 .leistungen_list li.fuenf {
	background-position: 0 -520px;
}
.page-id-13 .leistungen_list li.sechs,
.page-id-2 .leistungen_list li.sechs {
	background-position: 0 -910px;
}
.page-id-13 .leistungen_list li.sieben,
.page-id-2 .leistungen_list li.sieben {
	background-position: 0 -260px;
}
.page-id-13 .leistungen_list li.acht,
.page-id-2 .leistungen_list li.acht {
	background-position: 0 -650px;
}
.page-id-13 .leistungen_list li.neun,
.page-id-2 .leistungen_list li.neun {
	background-position: 0 -1040px;
}
.page-id-13 .leistungen_list li.zehn,
.page-id-2 .leistungen_list li.zehn {
	background-position: 0 -1170px;
}
.page-id-13 .leistungen_list li.elf,
.page-id-2 .leistungen_list li.elf {
	background-position: 0 -1690px;
}
.page-id-13 .leistungen_list li.zwoelf,
.page-id-2 .leistungen_list li.zwoelf {
	background-position: 0 -1300px;
}
.page-id-13 .warum_ich {
	list-style-type: none;
	margin: 10px 0 0 0;
}
.page-id-13 .warum_ich h3 {
	text-transform: uppercase;
}
.page-id-13 .warum_ich li {
	width: 250px;
	height: 110px;
	float: left;
	padding: 0 0 0 57px;
	background: url('images/bg_warum_ich.gif');
	background-repeat: no-repeat;
}
.page-id-13 .warum_ich li.zwei, 
.page-id-13 .warum_ich li.fuenf   {
    margin: 0 30px;
}


/*CONTENT KONTAKT
-------------------------------------------------------------------------*/
.page-id-15 .kontakttext {
    font-weight: bold;
    margin: 0 0 5px 0;
}
.page-id-15 .kontakttext a {
    text-decoration: none !important;
}
.page-id-15 .kontakttext a:hover {
    text-decoration: underline !important;
}
.page-id-15 a.gmaps {
	background: url('images/pic_google_maps_hover.jpg');
	background-repeat: no-repeat;
	display: block;
	height: 357px;
	width: 597px;
}
.page-id-15 a.gmaps:hover {
	background: url('images/pic_google_maps_hover.jpg');
	background-repeat: no-repeat;
}


/*CONTENT ÜBER MICH
-------------------------------------------------------------------------*/
.about_leftside, .about_rightside {
	list-style-type: none;
}
.about_leftside a, .about_rightside a {
	color: #313131;
	line-height: 17px;
}
.about_leftside a:hover, .about_rightside a:hover {
	text-decoration: none;
}
.about_leftside {
	width: 180px;
	float: left;
}
.about_rightside {
	width: 170px;
	float: left;
}
.arbeitsmaterial_box {
	margin: 0 0 20px 0;
}
.arbeitsmaterial_box img {
	float: left;
	margin: 0 10px 0 0;
}


/*CONTENT ARCHIV
-------------------------------------------------------------------------*/
.archive .projekte_klasse   {
 	margin: 0 0 30px 0;
}
.archive .projekte_klasse h1 {
	margin: 0 0 10px 0;
}
.archive .projekte_klasse p {
	margin: 0 0 10px 0;
}
.archive .projekte_klasse ul.list_projekte {
	list-style-type: none;
}
.archive .projekte_klasse ul.list_projekte li {
	margin: 0 0 10px 0;
}
.archive .projekte_klasse ul.list_projekte .leftside_projekte {
	float: left;
	width: 410px;
}
.archive .projekte_klasse ul.list_projekte .image_footer {
	list-style-type: none;
	margin: 10px 0 5px 0;
	width: 350px;
}
.single .image_footer {
	list-style-type: none;
	margin: 10px 0 5px 0;
	width: 350px;
}
.archive .projekte_klasse ul.list_projekte .image_footer li {
	margin: 0 0 0 0;
	line-height: 17px;
}
.archive .projekte_klasse ul.list_projekte .image_footer li a {
	text-decoration: none;
	color: #000; 
}
.single .image_footer li {
	margin: 0 0 0 0;
	line-height: 17px;
}
.single .image_footer li a {
	text-decoration: none;
	color: #000; 
}
.archive .projekte_klasse ul.list_projekte .image_footer li a:hover {
	text-decoration: underline;
}
.single .image_footer li a:hover {
	text-decoration: underline;
}
.archive .projekte_klasse ul.list_projekte .rightside_projekte {
	float: left;
	width: 570px;
}
.archive .projekte_klasse ul.list_projekte .rightside_projekte h2 {
	font-size: 14px;
}
.archive .projekte_klasse ul.list_projekte .rightside_projekte .date   {
	color: #adadad;
}
.archive .projekte_klasse ul.list_projekte .rightside_projekte .date a  {
	color: #adadad !important;
	text-decoration: none !important;
} 
.archive .projekte_klasse ul.list_projekte .rightside_projekte .date a:hover  {
	text-decoration: underline !important;
}


/*CONTENT KONTAKT
-------------------------------------------------------------------------*/
.page-id-15 .list_leistungen {
    list-style-type: none;
    margin: 10px 0 0 0 ;
}
.page-id-15 .list_leistungen li {
	padding: 0 0 0 30px;
	margin: 0 0 10px 0;
	background: url('images/bg_list_leistungen.gif');
	background-repeat: no-repeat;
}


/*FOOTER
-------------------------------------------------------------------------*/
.footer_wrapper {
    background: url('images/bg_footer.gif');
	background-position: 0 0;
	background-repeat: repeat-x;
	width: 100%; 
    margin: 35px 0 20px 0; 
    height: 114px;
}
.footer_wrapper #footer {
	width: 985px;
    margin: 0 auto;
    color: #fff;  
}
.footer_wrapper #footer p a {
    color: #fff;
    text-decoration: none;  
}
.footer_wrapper #footer p a:hover {
    text-decoration: underline;  
}
.footer_wrapper #footer .footer_leftside {
	float: left;
	height: 150px;
    margin: 10px 0 0 0;
    background: url('images/pic_social.gif');
	background-position: 0 22px;
	background-repeat: no-repeat;
}
.footer_wrapper #footer .footer_leftside:hover {
	float: left;
    margin: 10px 0 0 0;
    background: url('images/pic_social_white.gif');
	background-position: 0 22px;
	background-repeat: no-repeat;  
}
.footer_wrapper #footer .footer_leftside .social {
 	float: left;
}
.footer_wrapper #footer .footer_leftside p a.rss {
	background: url('images/button_rss_xing.gif');
	background-position: 0 0;
	background-repeat: no-repeat;
	width: 25px;
	height: 27px;
	float: left;
    margin: 0 0 0 120px;
}
.footer_wrapper #footer .footer_leftside p a.rss:hover {
	background: url('images/button_rss_xing.gif');
	background-position: 0 -27px;
}
.footer_wrapper #footer .footer_leftside p a.twitter {
	background: url('images/button_rss_xing.gif');
	background-position: -33px 0;
	background-repeat: repeat-x;
	width: 21px;
	height: 27px;
	float: left;
    margin: 0 0 0 10px;
}
.footer_wrapper #footer .footer_leftside p a.twitter:hover {
	background: url('images/button_rss_xing.gif');
	background-position: -33px -27px;
}
.footer_wrapper #footer .footer_leftside p a.xing {
	background: url('images/button_rss_xing.gif');
	background-position: -59px 0;
	background-repeat: repeat-x;
	width: 24px;
	height: 27px;
	float: left;
	margin: 0 0 0 10px;
}
.footer_wrapper #footer .footer_leftside p a.xing:hover {
	background: url('images/button_rss_xing.gif');
	background-position: -59px -27px; 
}
.footer_wrapper #footer .footer_leftside p a.youtube {
	background: url('images/button_rss_xing.gif');
	background-position: -87px 0;
	background-repeat: repeat-x;
	width: 24px;
	height: 27px;
	float: left;
	margin: 0 0 0 10px;
}
.footer_wrapper #footer .footer_leftside p a.youtube:hover {
	background: url('images/button_rss_xing.gif');
	background-position: -87px -27px; 
}
.footer_wrapper #footer .footer_leftside p a.linkedid {
	background: url('images/button_rss_xing.gif');
	background-position: -114px 0;
	background-repeat: repeat-x;
	width: 24px;
	height: 27px;
	float: left;
	margin: 0 0 0 10px;
}
.footer_wrapper #footer .footer_leftside p a.linkedid:hover {
	background: url('images/button_rss_xing.gif');
	background-position: -114px -27px; 
}
.footer_wrapper #footer .footer_rightside {
	float: right;
    margin: 0 0 0 0;   
}
.footer_wrapper #footer .footer_rightside img {
	border: none;   
}