/*
Theme Name: Mattias Stiller
Theme URI: http://www.mattiasstiller.de
Description: Mattias Stiller - Webdesign & Webberatung
Version: 1.1
Author: Mattias Stiller
Author URI: http://www.mattiasstiller.de
*/  
/* ##########  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;
}
a img {
	border: none;
}
body {
	font-size: 12px;
	font-family: Arial, Sans-Serif;
	text-align: center;
	background-image: url('images/bg-head-foot.png');
}
.innen-wrapper {
	margin: 0px auto;
	padding: 0 0 0 0 !important;
	width: 980px;
	text-align: left;
}
ul.bildernachweis {
  list-style-type: square;
  margin: 0 0 0 15px;
}
ul.bildernachweis li {
  margin: 0 0 5px 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: Arial, Sans-Serif;
}
 
.buehnecta h3,
.buehnecta .subhead,
.buehnesmall .buehnecta h2 {
	font-weight: bold !important;
	font-style: italic;
	font-size: 35px;
	font-family: georgia, Arial, Sans-Serif;
	text-shadow: -1px 1px 0px #CBEDF7;
	margin: 15px 0 12px 0;
}
.buehnecta h3 span,
.buehnecta h2.subhead span,
.buehnesmall .buehnecta h2 span {
	font-weight: bold;
	font-style: italic;
	font-size: 22px;
	font-family: georgia, Arial, Sans-Serif;
	text-shadow: -1px 1px 0px #CBEDF7;
}
h2.calibri, 
.calibri {
	text-transform: uppercase;
	font-size: 18px;
	margin: 0;
	color: #BEBEBE;
}
#cformsform .calibri {
	font-size: 18px; 
}
.georgia {
	font-size: 26px;
	margin: 0 0 5px 0;
	color: #BEBEBE;
}
h3 a {
	line-height: 20px;
	font-weight: normal;
	padding: 0 0 6px 0;
}
p {
	line-height: 20px;
}
.both {
	clear: both;
	height: 0px;
}
.heads, 
.footer-leftside .pagebar
{display: none;}
.cta-up {
	width: 100%;
	background: url('images/bg-cta-up.jpg') repeat-x 0 0;
	height: 113px;
	font-weight: bold;
	font-style: italic;
	font-size: 22px;
	font-family: georgia, Arial, Sans-Serif;
	color: #6f6f6f;
}
.cta-up h3 {
	font-weight: normal;
	font-style: italic;
	font-size: 22px;
	font-family: georgia, Arial, Sans-Serif;
	color: #6f6f6f;
}
.cta-up-leftside {
	float: left;
	width: 314px;
}
.cta-up-leftside a.cta-angebot,
.cta-up-leftside span.cta-angebot {
	display: block;
	width: 298px;
	height: 51px;
	background: #ce2f2f;
	color: #fff;
	border: solid 3px #fff;
	text-decoration: none;
	margin: 22px 0 0 0;
	padding: 7px 5px;
	text-align: center;
	font-size: 23px;
	text-shadow: 0px -1px 0 #781c1c;
}
.cta-up-leftside a.cta-angebot span,
.cta-up-leftside span.cta-angebot span {
	font: normal 12px arial;
	color: #fff;
	text-decoration: none;
	line-height: 20px;
	text-shadow: 0 0 0 #1d1d1d;
	letter-spacing: 0px;
}
.cta-up-leftside a.cta-angebot:hover {
	background: #b12929;
}
.cta-up-rightside {
	float: right;
	width: 625px;
	line-height: 34px;
	padding: 23px 0 0 0;
	text-shadow: -1px 1px 0px #1d1d1d;
}
.cta-up-rightside h3 a {
	text-decoration: underline;
	color: #bebebe;
}
.cta-up-rightside h3 a:hover {
	text-decoration: none;
}
.cta-down {
	width: 100%;
	background: #292929;
	height: 113px;
	font-weight: bold;
	font-style: italic;
	font-size: 22px;
	font-family: georgia, Arial, Sans-Serif;
	color: #6f6f6f;
	margin: 0 0 20px 0;
}
.cta-down h3 {
	font-weight: normal;
	font-style: italic;
	font-size: 22px;
	font-family: georgia, Arial, Sans-Serif;
	color: #6f6f6f;
}
.cta-down-leftside h3 a {
	text-decoration: underline;
	color: #bebebe;
}
.cta-down-leftside h3 a:hover {
	text-decoration: none;
}
.cta-down-leftside {
	float: left;
	width: 625px;
	line-height: 34px;
	padding: 23px 0 0 0;
}
.cta-down-rightside a.cta-angebot {
	display: block;
	width: 298px;
	height: 51px;
	background: #ce2f2f;
	color: #fff;
	border: solid 3px #fff;
	text-decoration: none;
	margin: 22px 0 0 0;
	padding: 7px 5px;
	text-align: center;
	font-size: 23px;
	text-shadow: 0px -1px 0 #781c1c;
 
}
.cta-down-rightside a.cta-angebot span {
	font: normal 12px arial;
	color: #fff;
	text-decoration: none;
	line-height: 20px;
	text-shadow: 0 0 0 #1d1d1d;
	letter-spacing: 0px;
}
.cta-down-rightside a.cta-angebot:hover {
	background: #b12929;
}
.cta-down-rightside {
	float: right;
	width: 314px;
	line-height: 34px;
	text-shadow: -1px 1px 0px #1d1d1d;
}
.georgiatext {
   font-family: georgia,arial;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
    margin: 0 0 3px 0 ;
}
.page-id-1666 .georgiatext { 
    margin: 30px 0 3px 0 ;
    display: block;
}
.page-id-1666 #wrapper .green .innenleben { 
    padding: 20px 0 0 0 ; 
}

/* ##########  HEADER  ########## */  
.sprite01{background-image:url('images/sprite01.png');}
.sprite02{background-image:url('images/sprite02.png');}
.sprite03{background-image:url('images/sprite_03.png');}
.sprite04{background-image:url('images/sprite_04.png');}
.sprite05{background-image:url('images/sprite_05.gif');background-repeat:no-repeat;}
.sprite06{background-image:url('images/sprite_06.png');}
.sprite_head01{background-image:url('images/sprite_head01.png');}
.sprite_head02{background-image:url('images/sprite_head02.png');}
.sprite_head03{background-image:url('images/sprite_head03.png');}
.sprite_head04{background-image:url('images/sprite_head04.png');}
#wrapper #header {
	background: #292929;
	width: 100%;
	height: 95px;
}
#wrapper .header-wrapper {
	height: 100%;
 
}
#wrapper #header .logo {
	float: left;
	margin: 7px 0 0 0;
}
#wrapper #header .logo a {
	width: 263px;
	height: 69px;
	float: left;
	margin: 12px 0 0 0;
	background-position: 0 0;
}
#wrapper #header .logo a:hover {
	background-position: 0 -70px;
}
#wrapper #header .logostart a:hover {
	background-position: 0 0;
}
#wrapper #header .logo a img {
	border: none;
}
/* ##########  GRAY-WRAPPER  ########## */  

#wrapper .gray {
	background: url('images/bg-buehne-big.jpg') repeat-x 0 0;
	color: #353535;
	height: 340px;
}
#wrapper .buehnesmall {
 	height: 137px; 
}
#wrapper .gray .innenleben{padding:20px 0;}
#wrapper .gray .innenleben .new-project{background-color:#e4e4e4;display:block;height:340px;position:relative;}
#wrapper .gray .innenleben .new-project p.stoerer{background:url('images/stoerer.png') no-repeat 0 0;display:block;height:147px;width:148px;left:833px;position:absolute;}
#wrapper .gray .innenleben .new-project p.stoerer a{display:block;height:147px;width:148px;}
#wrapper .gray .innenleben .new-project p.project-image a{display:block;height:237px;width:470px; }
#wrapper .gray .innenleben .grayback h1{background:none repeat scroll 0 0 #e4e4e4;}
#wrapper .gray .innenleben .grayback h1{font-weight:normal;padding:5px 12px 10px;}
/* ##########  GREEN-WRAPPER  ########## */  
#wrapper .green {
	/*background: #151515 url('images/bg-content.png') repeat-x 0 top;*/
	width: 100%;
	color: #bebebe;
	padding: 0 0 20px 0 ;
}
#wrapper .green .innenleben{padding:0 0;}
#wrapper .green-wrapper {
	height: 100%;
}
#wrapper .green .innenleben .greenback img {
	border: none;
}
#wrapper .green .innenleben .greenback {
	background: #292929;
	margin: 0 0 20px 0;
	padding: 10px;
}
#wrapper .green .innenleben .greenback h1 {
	padding: 5px 12px 10px 12px;
	font-weight: normal;
	line-height: 20px;
	text-align: jusitfy;
}
#wrapper .green .innenleben .greenback h2 {
 
	font-weight: normal;
	line-height: 20px;
	text-align: jusitfy;
}
.boxes {
	float: left;
	width: 314px;
	margin: 0 18px 0 0;
}
.boxes h2, .boxes h3 {
	font-weight: normal;
	padding: 10px 0 0 0; 
	text-align: center;
}
.boxes a, .greenbox a {
	text-decoration: unerline;
	color: #bebebe;
}

.boxes a:hover, .greenbox a:hover {
	text-decoration: none;
}
.boxes .box-up {
	height: 129px;
 
}
.boxes .box-down {
	background: #292929;
 
}
.boxes .box-down p {
text-align: justify;
	width: 257px; 
	margin: 0 30px;
	padding: 7px 0 15px 0;
}
.usability,.css,.zeit,.zuverlaessigkeit,.support{margin:0;}
.wordpress .sprite04 {
	background-position: 0 -140px;
}
.design .sprite04 {
	background-position: 0 -5px;
}
.usability .sprite04 {
	background-position: 0 -275px;
}
.seo .sprite04 {
	background-position: 0 -410px;
}
.keyword .sprite04 {
	background-position: 0 -545px;
}
.css .sprite04 {
	background-position: 0 -680px;
}
.joomla .sprite04 {
	background-position: 0 -815px;
}
.psd .sprite04 {
	background-position: 0 -950px;
}
.support .sprite04 {
	background-position: 0 -1085px;
}
.frueh .sprite03 {
	background-position: 0 -5px;
}
.teufel .sprite03 {
	background-position: 0 -140px;
}
.zeit .sprite03 {
	background-position: 0 -275px;
}
.step .sprite03 {
	background-position: 0 -410px;
}
.nichts .sprite03 {
	background-position: 0 -545px;
}
.zuverlaessigkeit .sprite03 {
	background-position: 0 -680px;
}
.greenbox{background:#292929;padding:10px;}
.greenboxmiddle{margin:0 0 20px 0;}
.greenboxend{margin:20px 0 0 0;}
/* ##########  MENU  ########## */  
#header .menu{float:right;}
#header .menu ul{list-style-type:none;margin:0;padding:0;}
#header .menu li{display:inline;height:95px;float:left;}
#header .menu li a{float:left;height:53px;padding:42px 17px 0 17px;color:#dddddd;text-decoration:none;font-family:georgia,arial;font-style:italic;font-size:18px;}
#header .menu li a:hover{background:#151515;}
#header .menu li.current_page_item a{background:url('images/bg-menu.jpg') repeat-x 0 0;color:#292929;}
#header .menu li.page-item-1025 a{background:url('images/bg-menu-ueber-mich.jpg') repeat-x 0 0;}
#header .menu li.page-item-1178 a{background:url('images/bg-menu-kontakt.jpg') repeat-x 0 0;}
#header .menu li.page-item-1023 a{background:url('images/bg-menu-leistungen.jpg') repeat-x 0 0;}
/* ##########  FOOTER  ########## */  
#wrapper .dark-footer {
	background: #292929;
	width: 100%;
	color: #bebebe;
	padding: 0;
}
#wrapper .dark-footer-wrapper a {
	text-decoration: none;
	font-weight: bold;
	color: #bebebe;
}
#wrapper .dark-footer-wrapper a:hover {
	text-decoration: underline;
}

#wrapper .dark-footer .innenleben {
	padding: 10px 0 20px 0;
 
}
#wrapper .dark-footer-wrapper {
	height: 100%;
 background: #292929;
}
#wrapper .dark-footer-wrapper .footer-leftside {
	float: left;
	width: 640px;
	margin: 0 40px 0 0;
}
#wrapper .dark-footer-wrapper h3 {
	font-weight: normal;
	margin: 0 0 5px 0;
	color: #727272;
	text-transform: uppercase;
	font-size: 11px;
}  
#wrapper .dark-footer-wrapper h4,
#wrapper .dark-footer-wrapper h4 a {
	font-family: georgia, arial;
	font-style: italic;
	font-size: 26px;
	font-weight: normal;
	margin: 0 0 10px 0;
} 

#wrapper .dark-footer-wrapper a.kundenfeedbacklink, 
#wrapper .dark-footer-wrapper a.lastproject {
	color: #fff;
	text-decoration: none;
	line-height: 20px;
	text-shadow: 0 0 0 #1d1d1d;
	letter-spacing: 0px;
	display: block;
	height: 25px;
	width: 135px;
	border: solid 3px #fff;
	background: #ce2f2f;
	font-family: georgia, arial;
	font-style: italic;
	font-size: 16px;
	text-shadow: 0px -1px 0 #781c1c;
	text-align: center;
	padding: 3px 0 0 0;
	margin: 20px 0 0 0;
}
#wrapper .dark-footer-wrapper a.kundenfeedbacklink {
	width: 162px;
}
#wrapper .dark-footer-wrapper a.kundenfeedbacklink:hover, 
#wrapper .dark-footer-wrapper a.lastproject:hover {
	background: #b12929;
}
#wrapper .dark-footer-wrapper .footer-rightside {
	float: right;
	width: 300px;
	background: url('images/kundenfeedback_stiller.jpg') no-repeat 1px 28px;
	background-repeat: no-repeat;
}
#wrapper .dark-footer-wrapper .footer-rightside h5 {
	font-style: italic;
	font-weight: normal;
}
#wrapper .extreme-footer {
	background: #151515;
	width: 100%;
	padding: 10px 0 0 0;
}
#wrapper .extreme-footer .innenleben {
	height: 85px;
	margin: 0 auto 0 auto;
	width: 980px;
}
#wrapper .extreme-footer-leftside {
	float: left;
	text-align: left;
	color: #bebebe;
}
#wrapper .extreme-footer-leftside a {
	text-decoration: none;
	color: #bebebe;
}
#wrapper .extreme-footer-leftside a:hover {
	text-decoration: underline;
}
#wrapper .extreme-footer-rightside {
	float: right;
	width: 303px;
}
#wrapper .extreme-footer-rightside a {
	float: left;
	height: 35px;
	width: 35px;
	margin: 1px 0 0 15px;
}
#wrapper .extreme-footer-rightside a.youtube {
	background-position: 0 -188px;
}
#wrapper .extreme-footer-rightside a.youtube:hover {
	background-position: 0 -224px;
}
#wrapper .extreme-footer-rightside a.xing {
	background-position: -36px -188px;
}
#wrapper .extreme-footer-rightside a.xing:hover {
	background-position: -36px -224px;
}
#wrapper .extreme-footer-rightside a.twitter {
	background-position: -72px -188px;
}
#wrapper .extreme-footer-rightside a.twitter:hover {
	background-position: -72px -224px;
}
#wrapper .extreme-footer-rightside a.rss {
	background-position: -108px -188px;
}
#wrapper .extreme-footer-rightside a.rss:hover {
	background-position: -108px -224px;
}
#wrapper .extreme-footer-rightside a.linkedin {
	background-position: -144px -188px;
}
#wrapper .extreme-footer-rightside a.linkedin:hover {
	background-position: -144px -224px;
}
#wrapper .extreme-footer-rightside a.wordpress {
	background-position: -180px -188px;
}
#wrapper .extreme-footer-rightside a.wordpress:hover {
	background-position: -180px -224px;
}
#wrapper .extreme-footer span {
	color: #525252;
}
#wrapper .extreme-footer span {
	color: #525252;
} 


/* ##########  STARTSEITE  ########## */  
.home .frontcta{margin:20px 0 0 0 !important;}
.home .buehnecta{float:left;width:660px;margin:0;font-size:12px;}
.home .buehnecta .buehnecta-headline{background-position:0 -492px;height:26px;width:346px;display:block;}
.home .buehnecta p{margin:0 0 15px 0;width:559px;}
.home .buehnecta h1,.home .buehnecta h2.imtext{margin:0 0 18px 0;font-weight:normal;width:526px;line-height:18px;}
.home .buehnecta p a,.home .buehnecta h1 a{text-decoration:underline;color:#353535;}
.home .buehnecta p a:hover,.home .buehnecta h1 a:hover{text-decoration:none;}
.home .buehnecta a.buehnecta-button{height:63px;width:301px;display:block;background-position:0 -519px;}
.home .buehnecta a.buehnecta-button:hover{background-position:0 -583px;}
.boxes h4{font-weight:normal;padding:10px 0 0 0;line-height:17px;text-align:center;}
.home .gray .innenleben{background:url('images/superhero.jpg') no-repeat right 0;display:block;height:300px !important;width:980px;}
.buehnesmall .innenleben{background:url('images/superhero_small.jpg') no-repeat 467px 0px;display:block;height:300px !important;width:980px;}
.home .green .innenleben{padding:20px 0 !important;}
/* ##########  IMPRESSUM  ########## */  
.page-template-page_impressum-php .headline01-impressum{background-position:0 -58px;display:block;height:47px;width:980px;}
.page-template-page_impressum-php a.headline02-impressum{background-position:0 -198px;display:block;height:47px;width:980px;}
.page-template-page_impressum-php a.headline02-impressum:hover{background-position:0 -246px;}
.page-template-page_impressum-php a.headline03-impressum{background-position:0 0;display:block;height:47px;width:980px;}
.page-template-page_impressum-php a.headline03-impressum:hover{background-position:0 -48px;}
.page-template-page_impressum-php .green .innenleben{padding:20px 0 0 0 !important;}
/* ##########  AGB  ########## */
.page-template-page_agb-php p {
	margin: 0 0 10px 0;
}
/* ##########  LEISTUNGEN  ########## */  
.greenboxmiddle h1{font-weight:normal;float:left;line-height:18px;margin:0 4px 0 0;}
.page-template-page_leistungen-php .greenboxmiddlep{float:left;}
.page-template-page_leistungen-php div.huelle01{display:block;height:271px;}
.page-template-page_leistungen-php .green-wrapper .innenleben{padding:20px 0 0 0 !important;}
.page-template-page_leistungen-php #wrapper .green{padding-bottom:0;}
/* ##########  FEEDBACK  ########## */  
.page-template-page_feedback-php .green-wrapper .innenleben {padding:20px 0 0 0  !important;}
.page-template-page_feedback-php .feedback-kasten{background:#292929 url('images/bg-fuesse.gif') no-repeat 1px 4px;padding:10px 10px 10px 77px;line-height:20px;margin:0 0 20px 0;}
.page-template-page_feedback-php .green{padding-bottom:0 !important;}
/* ##########  FEEDBACK ABGEBEN  ########## */  
.page-template-page_feedback-abgeben-php .green-wrapper .innenleben{padding:20px 0 0 0  !important;}
.page-template-page_feedback-abgeben-php .kontaktform{background:#608244;display:block;padding:10px;width:960px;}
/* ##########  ERROR  ########## */   
.error404 .green{margin:20px 0 0 0;}
.error404 .greenbox{text-align:center;padding:0 0 30px 0;}
.error404 .greenbox .shadow{font-size:114px;line-height:114px;font-style:italic;font-weight:bold;font-family:georgia,arial;text-shadow:-3px 2px 4px #000;}
.error404 .gray-wrapper .innenleben img{margin:0 auto;}
.error404 .gray-wrapper .innenleben p{text-align:left;padding:20px 0 0 0;}
.error404 .gray-wrapper .innenleben p a{text-decoration:none;color:#a9c124;}
.error404 .gray-wrapper .innenleben p a:hover{padding:80px 0 0 0;color:#848484;}