@charset "utf-8";

/*
Theme Name: Gunnar Vogelsang
Theme URI: http://www.gunnarvogelsang.de
Description: Theme for Gunnar Vogelsang's portfolio
Version: 1.0
Author: Gunnar Vogelsang
Author URI: http://www.gunnarvogelsang.de
Date: September 2009
*/

/*
################# Colour Ref ####################
#e10075 Pink
#e6edf4 Light Blue
*/

/* 
################### CSS contents ###################
* 1 Common
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/
 
 
/*
################### Common ################### 
*/

*{
margin:0;
padding:0;
text-decoration:none;
}

.clear{
clear:both;
}

html {
/* overflow: -moz-scrollbars-vertical; */
}

#skipto{
display:none;
}

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

.nomargin {
margin:0;
}
/*
################### Layout ################### 
*/

body{
font:14px/1.6 Georgia, "Times New Roman", Times, serif;
background:#e6edf4;
color:#000;
}

#header{
height:120px;
}

.container{
width:980px;
margin:0 auto;
padding:0;
}

#header .container{
padding:10px;
}

.dhonishow-image li {
list-style:none;
}

.banner-welcome{
height:310px;
width:555px;
background:url(/banner_head_.png) no-repeat;
float:left;
text-align: center;
position:relative;
}

.banner-welcome div {
width:500px;
margin:0 auto 0;
color:#000;
padding-top:57px;
text-align:left;
}

.banner-welcome div h1{
font-family:Helvetica, Arial, Tahoma, Sans-serif;
font-size: 1.25em;
line-height:100%;
letter-spacing:-0.25px;
font-weight:normal;
color:#000 !important;
margin-bottom:1em;
}

.banner-welcome div p{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:14px;
line-height:1.6em;
}

.banner-welcome div p a {
color:#000;
text-decoration:underline;
}

#banner .container{
position:relative;
}

.banner-showcase{
width:390px;
height:310px;
background:url(/bg_banner-slides_.png) no-repeat top left;
position:absolute;
right:0;
top:-15px;
padding:20px 20px;
}

.slide {
margin-left: 0px;
position: absolute;
top: 20px;
width: 390px;
height: 290px;	
}

#main{
width:540px;
float:left;
margin-right:30px;
}

#main.portfolio{
width:760px;
}

#sidebar1{
width:190px;
float:left;
margin-right:30px;
}

#sidebar2{
width:190px;
float:left;
}

.col{
width:190px;
float:left;
margin:0 65px;
display:inline;
}

.post-info{
width:190px;
margin-right:20px;
float:left;
}

.post-content{
width:550px;
float:left;
}

#footer {
background:transparent url(/bg_footer.gif) repeat scroll center top;
color:#FFF;
}

#footer .container {
background:transparent url(/footer.gif) no-repeat scroll 0 0;
padding:110px 0 20px;
}

#footer p {
font-size:1.5em;
line-height:2.25em;
text-align:center;
}

#footer a:link,
#footer a:visited {
color:#FFF;
}

#footer a:hover {
text-decoration:underline;
}

#services{
margin:2em 0 1em 0;
}
/*
################### Nav ################### 
*/

#nav{
list-style:none;
float:left;
margin-top:14px;
margin-left:76px;
}

#nav li{
display:inline;
}

#nav li a {
display:block;
float:left;
height:47px;
padding-left:15px;
margin-right:20px;
}

#nav li.last a {
margin-right:0;
}

#nav li a:hover{
background:url(/bg_standanzeiger.gif) no-repeat left;
text-decoration:none;
}

#nav li a span {
padding:14px 15px 0 0;
height:33px;
color:#000;
font-size:1.3em;
line-height:1.1;
font-family:Helvetica, Verdana, Arial, Tahoma, Sans-serif;
letter-spacing:-0.25px;
display:block;
float:left;
}

#nav li a:hover span{
background:url(/bg_standanzeiger.gif) no-repeat right;
cursor:pointer;
text-decoration:none;
color:#3b3636 !important;
}

#nav li.current a {
color:#e10075;
background:url(/bg_standanzeiger.gif) no-repeat left;
}

#nav li.current a span {
color:#e10075;
background:url(/bg_standanzeiger.gif) no-repeat right;
}

#nav_legal{
width:185px;
height:15px;
float:right;
margin:0 20px 0 0;
}

#nav_legal p {
font-family:Verdana, Helvetica, Arial, Sans-serif;
text-align:left;
font-size:9px;
line-height:1em;
}

#nav_legal p a:link,
#nav_legal p a:visited,
#nav_legal p a:hover {
color:#000;
text-decoration:none;
}
/*
################### Headings ################### 
*/

#logo{
width:315px;
height:85px;
float:left;
background:url(/logo.png) no-repeat;
margin:10px 160px 0 0;
}

#logo span{
position:absolute;
left:-9999px;
top:-9999px;
}

#logo a{
display: block;
height:100%;
width:100%;
}

h1{
font-family:Helvetica, Verdana, Arial, Tahoma, Sans-serif;
font-weight:normal;
letter-spacing:-1px;
font-size:3em;
line-height:1;
margin:0 0 12px 0;
color:#e10075;
}


h2{
font-family:Helvetica, Verdana, Arial, Tahoma, Sans-serif;
font-weight:normal;
font-size:2em;
margin:0 0 0.35em 0;
color:#000;
letter-spacing:-1px;
}

h3{
font-family:Helvetica, Verdana, Arial, Tahoma, Sans-serif;
font-weight:normal;
letter-spacing:-1px;
font-size:2.5em;
line-height:1;
margin:0 0 18px 0;
color:#e10075;
}

h4 {
color:#e10075;
font-family:Helvetica, Sans-serif;
font-size:1.5em;
left:-2px;
letter-spacing:-0.05em;
line-height:100%;
font-weight:normal;
margin:18px 0 0 0;
}

.referenz-container h4,
.dreispaltig-container h4 {
margin:0;
}

h5, h6{
color:#000;
font-family: Georgia, Times, Serif;
font-size:1em;
margin-top:1em;
font-weight:bold;
}

#services h2{
font-size:1.4em;
}

.subhead {
color:#000;
font-family: Georgia, Times, Serif;
font-size:1.25em;
line-height:1.75em;
font-weight:normal;
}

/*
################### Lists ################### 
*/
#services ol{
list-style:none;
}

#services ol li{
float:left;
width:380px;
margin:10px 20px 10px 0;
padding-left:90px;
background:url(../icon_services.png) no-repeat;
}

#services ol li.webdesign{
background-position:0px -240px;
}

#services ol li.php{
background-position:0px 10px;
}

#services ol li.beratung{
background-position:0px -725px;
}

#services ol li.seo{
background-position:0px -505px;
}

/*
################### Images ################### 
*/

img{
border:none;
}

/*
################### Links ################### 
*/

a{
color:#e10075;
}

a:hover, a:visited:hover{
color:#000;
text-decoration:underline;
}

a:visited{
color:#e10075;
}

.linkbutton{
width:222px;
height:59px;
padding-top:27px;
background:url(../bg_linkbutton.png) no-repeat;
background-position:0 0;
text-align:center;
font-family: Helvetica, Verdana, Arial, Sans-serif;
font-size:1.25em;
color:#fff;
display:block;
margin:0 auto;
}

a.linkbutton:hover{
text-decoration:none;
background-position:-222px 0;
color:#3b3636 !important;
}

a.linkbutton:visited{
color:#fff;
}

/*
################### Forms ################### 
*/

#searchform{
margin-top:35px;
text-align: right;
}

.searchinput{
height:21px;
width:120px;
padding:5px 10px;
border:none;
margin-left:20px;
background:url(/bg_searchinput.gif) left no-repeat #4F4F4F;
color:#fff;
font-size:1.4em;
}

.searchbutton{
height:31px;
width:24px;
border:none;
background:url(/bg_searchsubmit.gif) no-repeat top right;
}

.searchbutton:hover, #searchform:hover .searchbutton{
background-position:0% -31px;
cursor: pointer;
}

/* --------- STANDARD FORM ---------- */

#std_form fieldset {
border:0;
margin:0;
padding:0 !important;
float:none;
display:block;
}

#std_form legend {
color:#000;
width:378px;
font-weight:bold; 
font-size:12px;
line-height:1.5em;
margin:0 0 0.5em 0;
padding:0;
}

#std_form legend.inactive {
border:0;
background-color:transparent;
font-weight:normal; 
}

#std_form div.container {
float:none;
clear:left;
margin: 1.25em 0 1.25em 0;
padding:0;
}

#std_form label,
#std_form div.label {
float:left;
text-align:left;
margin:0 6px 0 0;
padding:4px 0 0 0;
color:#000;
width:60px;
}

#std_form label.wide {
float:none;
width:378px;
margin:0.5em 0 1em 0;
}

#std_form input,
#std_form textarea,
#std_form select {
float:left;
width:220px;
margin:0;
padding:6px;
color:#000;
border:1px solid #e10075;
background-color:#fff;
font-family: Courier, Verdana, Arial, Sans-serif;
font-size:1.2em;
}

#std_form select {
width:226px !important;
}

#std_form .wide {
width:314px !important;
}

#std_form textarea.wide {
float:none;
width:314px;
margin:0.5em 0 0.5em 0;
}

#std_form select.wide {
width:314px !important;
}

#std_form div.input {
float:left;
width:220px;
margin:0;
padding:2px;
}

#std_form .readonly {
background-color:#E9E9E9;
color:#757575;
}

#std_form .inactive {
background-color:#E9E9E9;
color:#757575;
border:1px solid #989898;
}

#std_form .spacingTop {
margin:1.5em 0 0 0 !important;
}

#std_form .submit_button {
width:auto !important;
margin:0 0 0 54px;
}

#std_form .nomargin_submit_button {
width:auto !important;
margin:0;
}

#std_form .validation-failed {
float:left;
width:220px;
margin:0;
padding:6px;
border:0;
border:1px solid #ED1D32;
background-color:#FABBC1;
color:#000;
}
/*
DELETED - weil die Klasse trotz nicht validiertem Form input dem submit button zugewiesen wird...
#std_form .validation-passed {
float:left;
width:310px;
margin:0;
padding:2px;
border-bottom:1px solid #9BB4CC;
background:url(/cm21/media/upload/image/checksign.gif) top right no-repeat;
border:1px solid #00AA00;
background-color:#E1E8F0;
}
*/
#std_form .validation-advice {
clear:left;
float:left;
width:228px;
margin:0 0 0 66px;
padding:3px;
background-color:#ED1D32;
color:#FFF;
font-weight:bold;
}

.first-formfield {
margin-top:0 !important;
}
/*
################### Tables ################### 
*/
/*
################### Typography ################### 
*/

p{
margin-bottom:1.5em;
}

.aligncenter{
text-align: center;
}

.alignright{
text-align: right;
}

.alignleft{
text-align: left;
}

.post p{
text-align: justify;
}

li.nomargin p{
margin:0;
}

blockquote{
padding:10px 40px;
background:#3c3028;
font-style: italic;
border:dotted #4e4138;
border-width:1px 0;
font-size:1.2em;
}

.pullquote{
float:right;
margin:10px 0 10px 10px;
background:url(images/pull.gif) transparent top left no-repeat;
border-width: 0;
color:#fff;
font-size:2em;
width:200px;
}

blockquote .author{
font-style: normal;
color:#9c9c9c;
font-size: 0.6em;
}

#twitter{
padding:0;
background:none;
border:none;
font-size:1em;
}

code{
font-size:1.2em;
font-family: monospace;
}

pre code{
background:#3c3028;
display:block;
clear:both;
padding:10px;
border:dotted #4e4138;
border-width:1px 0;
overflow:auto;
white-space: pre;
width:520px;
}

del{
text-decoration: line-through;
}

/*
################### Other ################### 
*/

.bildlink {
border:0 !important;
}

.dreispaltig-container {
margin:3em 0 0 0;
padding:0;
}

.dreispaltig-links {
float:left;
padding-right:15px;
width:325px;
}

.dreispaltig-mitte {
float:left;
padding-right:15px;
width:280px;
}

.dreispaltig-rechts {
float:right;
width:284px;
}

.sidebox {
background:#FFF;
border: 1px solid #e10075;
margin-top:0;
padding:30px 40px 25px;
position:relative;
width:201px;
}

div.sidebox p {
color:#000;
margin:1em 0;
}

div.sidebox p a:link,
div.sidebox p a:active,
div.sidebox p a:visited {
color:#e10075;
}

.sidebox .top {
background-image:url(/sidebox-top.gif);
background-repeat:no-repeat;
height:7px;
left:0;
position:absolute;
top:0;
width:281px;
}

.sidebox .bottom {
background-image:url(/sidebox-bottom.gif);
background-repeat:no-repeat;
bottom:0;
height:7px;
left:0;
position:absolute;
width:281px;
}

.stoerer {
position:absolute;
right:-2px;
top:-2px;
}

#referenzen {
margin-left:-10px;
}

.referenz-container{
clear:both;
margin:0 0 2em 0;
}

.referenz-bild{
width:520px;
height:256px;
float:right;
}

.referenz-beschreibung{
background:transparent url(/bg_referenz-mid.png) repeat-y scroll 0 0;
margin:0;
min-height:202px;
padding:5px 25px 0 28px;
width:440px;
}

.referenz_top {
background:transparent url(/bg_referenz-top.png) no-repeat scroll 0 0;
height:24px;
margin:0;
padding:0;
width:485px;
}

.referenz_bot {
background:transparent url(/bg_referenz-bot.png) no-repeat scroll 0 0;
height:24px;
margin:0;
padding:0;
width:485px;
}

.referenz-ort {
color:#4d4d4d;
margin:0;
font-size:1em;
font-family: Helvetica, Verdana, Arial, Sans-serif;
}

.referenz-copy {
margin:15px 0 0 0;
}

.referenz-leistungen {
list-style-image: url(/icon_checkbox.png);
float:left;
margin:15px 0 0 0;
}

.referenz-leistungen li{
display:inline;
padding:0 0 0 17px;
margin:0 10px 0 0;
background:url(/icon_checkbox.png) no-repeat scroll 0 0;
}

.left{
float:left;
}

.right{
float:right;
}

hr{
border-top:1px solid #100c0a;
border-bottom:1px solid #5a3e0c;
border-width: 1px 0;
width:50%;
margin:40px auto;
}

.sep{
padding-top:2em;
border-top:solid 1px #363636;
clear:both;
}