/* skribbels.de by iStation GbR 2009 */
/* orange: #ffaa3b */
/* h1 -h3 dunkles grau: #626262 */
/* Text helleres grau: #7f7f7f*/

/***************************/
/* RESET MARGINS & PADDING */
/***************************/

html, body, div, span,
p, blockquote, pre, code,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend, label, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
}

:focus {
        outline: none;
}

img {
        border: 0;
        margin: 0;
        padding: 0;
}

/**********/
/* LAYOUT */
/**********/

html {
        background-color: #000;
        /*color: #7f7f7f;*/
        color: #4f4f4f;
}

#header {
        background:#ddd url('bg-header.jpg') no-repeat top;
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 1000px;
        height: 126px;
}

#visual {
        background-repeat: no-repeat;
        background-position: top;
        background-color: #000;
        margin: 0 auto;
        padding: 0;
        width: 1000px;
        /*height: 387px;*/
         height: 348px;
}

#menubar {
        position: relative;
        margin: -40px auto 0;
        padding: 0;
        width: 1000px;
        height: 49px;
                z-index: 100;
}

#content {
        background-color: #fff;
        margin: -9px auto 0 auto;
        padding:0;
        width: 1000px;
        min-height: 300px;
}

#content-half-left {
                clear: left;
        float: left;
        width: 470px;
        margin: 0;
        padding:2.5em 35px 0 40px;
}

#submenue-wrapper {
        width: ;
        min-height: 1.5em;
        margin: 0;
z-index:101;
}

#content-half-right {
        float: left;
        width: 404px;
        margin: 0;
}

#footer {
        background-color: #fff;
        margin: 0 auto;
        padding: 2em 0 0 0;
        width: 1000px;
}

#footer-content {
        border-top: 2px dotted #999;
        width: 940px;
        margin:0 20px 1em 40px;
}


/**************/
/* TYPOGRAPHY */
/**************/

body {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 78%;         /* 11px */
        font-weight: normal;
        line-height: 150%;
}


p {
        font-size: 1em;
        font-weight: normal;
        line-height: 140%;
        margin: 1em 0 1.5em 0;
}

.small-caps {
        font-size: 1.2em;
        font-variant: small-caps;
}

strong {
        /*color: #7f7f7f; */
        color: #4f4f4f;
        font-size: 1.1em;
        font-weight: bold;
}


h1 {
        /*color: #626262;*/
        color: #4f4f4f;
        font-size: 1.5em;
        font-weight: normal;
        margin-bottom: 1em;
}

h2 {
         /*color: #626262;*/
        color: #4f4f4f;
        font-size: 1.2em;
        font-weight: bold;
        margin-top: 0.7em;
        margin-bottom: 0.5em;
}

h3 {
         /*color: #626262;*/
        color: #4f4f4f;
        font-size: 0.9em;
        font-weight: bold;
}

h4 {
        color: #000;
        font-size: 0.95em;
        font-weight: bold;
}

h5 {
        color: #000;
        font-size: 0.85em;
        font-weight: bold;
}

h6 {
        color: #000;
        font-size: 0.75em;
        font-weight: bold;
}

.orange {
        color: #ffaa3b;
}

#content ul {
        list-style-type: ;
        list-style-position: outside;
        margin-left: 2em;
}


/*****************/
/* DEFAULT LINKS */
/*****************/

a {
        color: #000;
        margin: 0;
        padding: 0;
        text-decoration: underline;
}

a:link {
        color: #000;
}

a:visited {
        /*color: #333;*/
        color: #4f4f4f;
}

a:hover,
a:active {
         /*color: #626262;*/
        color: #4f4f4f;
}

/********/
/* MISC */
/********/

hr {
        border-top: 1px solid #a4a4a4;
}

div.content img {
        border: 0;                         /* remove image borders where we don't want them */
}


/***********/
/* HEADER */
/**********/

#logo {
        background: transparent url('skribbels_logo.png') no-repeat top;
        position: absolute;
        float: left;
        margin: 50px 0 0 40px;
        padding: 0;
        width: 73px;
        height: 203px;
}

#claim {
        background: transparent url('claim.png') no-repeat top;
        position: absolute;
        float: left;
        margin: 50px 0 0 600px;
        padding: 0;
        width: 300px;
        height: 65px;
}

/************/
/* Mainmenu */
/***********/

#mainmenu {
        top: -10px;
        left: 0;
        float: left;
        position: absolute;
        z-index:10;
        list-style: none;
        margin-left: 40px;

        font-size: 135%;
        letter-spacing: 0.02em;
        line-height: 40px;
        font-variant: small-caps;
        color: #fff;
        font-weight: bold;
}

#mainmenu li{
        text-align: left;
        float: left;
        margin: 0 2.3em 0 0;
}

#mainmenu a {
        margin: 0;
        padding: 0;
        vertical-align: bottom;
        text-decoration: none;
}

#mainmenu li a:link,
#mainmenu li a:visited {
        color: #fff;
}

#mainmenu li a:hover,
#mainmenu li a:active  {
        color: #ffaa3b;
}

#mainmenu li a.fix {
        color: #ffaa3b;
}

/***************/
/* Servicemenu */
/***************/

#servicemenu {
        float: right;
        top: -27px;
        right: 0;
        position: absolute;
        list-style: none;
        margin-right: 0px;
        z-index: 100;
        font-size: 95%;
        font-variant: small-caps;
}

html > body #servicemenu li{
        text-align: center;
        float: left;
        margin: 0 18px 0 0;
}

#servicemenu li a:link,
#servicemenu li a:visited {

}

#servicemenu li a:hover,
#servicemenu li a:active  {

}


html > body #servicemenu li a:link.home,
html > body #servicemenu li a:visited.home {
        background-image: url('button_home.png');
        background-repeat:no-repeat;
        background-position:center top;
        min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        color: #fff;
}

html > body #servicemenu li a:hover.home,
html > body #servicemenu li a:active.home {
        background-image: url('button_home_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}

html > body #servicemenu li a.homefix {
        min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        background-image: url('button_home_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}




html > body #servicemenu li a:link.kontakt,
html > body #servicemenu li a:visited.kontakt {
        background-image: url('button_contact.png');
        background-repeat:no-repeat;
        background-position:center top;
        min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        color: #fff;
}

html > body #servicemenu li a:hover.kontakt,
html > body #servicemenu li a:active.kontakt {
        background-image: url('button_contact_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}

html > body #servicemenu li a.kontaktfix {
        min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        background-image: url('button_contact_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}



html > body #servicemenu li a:link.links,
html > body #servicemenu li a:visited.links {
        background-image: url('button_links.png');
        background-repeat:no-repeat;
        background-position:center top;
                min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        color: #fff;
}

html > body #servicemenu li a:hover.links,
html > body #servicemenu li a:active.links {
        background-image: url('button_links_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}

html > body #servicemenu li a.linksfix {
        min-width: 28px;
        height: 28px;
        padding-top: 32px;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        display: block;
        background-image: url('button_links_over.png');
        background-repeat:no-repeat;
        background-position:center top;
        color: #ffaa3b;
}


/***********/
/* Submenu */
/***********/

ul#submenu-leistungen {
		z-index: 110;
        margin-left: 40px;
        position: relative;
        list-style: none;

        font-size: 95%;
        line-height: 1.5em;
}

#submenu-leistungen li{
        text-align: left;
        float: left;
        margin: 0 0.7em 0 0;
}


#submenu-leistungen a {
        margin: 0;
        padding: 0;
        vertical-align: bottom;
        text-decoration: none;
}

#submenu-leistungen li a:link,
#submenu-leistungen li a:visited {
        /*color: #626262;*/
        color: #4f4f4f;
}

#submenu-leistungen li a:hover {
        color: #ffaa3b;
}


#submenu-leistungen li a:active  {
        color: #ffaa3b;
        font-weight: normal;
}

#submenu-leistungen li a.fix {
        color: #ffaa3b;
        font-weight: bold;
}

/**************/
/* Footermenu */
/**************/

#footermenu {
        top: -10px;
        left: 0.2em;
        position: relative;
        list-style: none;

        font-size: 90%;
        line-height: 50px;
}

#footermenu li{
        text-align: left;
        float: left;
        margin: 0 0.5em 0 0;
        color: #7f7F7F;
}

#footermenu a {
        margin: 0;
        padding: 0;
        vertical-align: bottom;
        text-decoration: none;
}

#footermenu li a:link,
#footermenu li a:visited {
        color: #7f7F7F;
}

#footermenu li a:hover,
#footermenu li a:active  {
        /*color: #ffaa3b;*/
        color: #7f7f7f;

}

#footermenu li a.fix,{
        /*color: #ffaa3b;  */
        color: #7f7f7f;

}

/****************/
/* CONTENT Links*/
/****************/

.projekt {
                clear: both;
        position: relative;
        color: #7f7F7F;
        font-size: 90%;
        line-height: 1.2em;
        margin-bottom: 1.5em;
}

.projektinfos {
        display: block;
        position: absolute;
        width: 135px;
        bottom: 3px;
        right: 0px;
        color:#4f4f4f;
}

.projekt img {
        float: left;
        position: relative;
        cursor: pointer ;
}

.projekt span.beschriftung {
        color: #ffaa3b;
        margin-right: 0.7em;
}

.projekt a.detaillink,
.projekt a:link.detaillink,
.projekt a:visited.detaillink {
        color: #4f4f4f;
}

.projekt a:hover.detaillink,
.projekt a:active.detaillink {
        color: #ffaa3b;
}

.projektdetails {
        display: none;
        color: #4f4f4f;
        font-size: 90%;
        line-height: 1.2em;

        padding-bottom: 1.5em;
}

.projektdetails .beschriftung {
        color: #ffaa3b;
        margin-right: 0.7em;
                float: left;
                width: 50px;
}

.projektdetails .infotext {
        margin-right: 0.7em;
}

.projektdetails .infotext a,
.projektdetails .infotext a:link,
.projektdetails .infotext a:visited {
        color: #4f4f4f;
}

.projektdetails .infotext a:hover,
.projektdetails .infotext a:active {
        color: #ffaa3b;
}


/* Highslide Gallery*/

.highslide-gallery {
        position: relative;
        width: 468px;
        left: -10px;
}

.highslide-gallery a {
        display: block;
        float: left;
        width: 150px;
        height: 150px;
        margin-right: 5px;
        background: transparent url('foto-bg.png') no-repeat left top;
}


.highslide-gallery a img{
        display: block;
        border: 0;
        margin: 15px;
}

.floating-caption .highslide-caption {
        font-weight: normal;
        font-family: Arial, Verdana, Helvetica, sans-serif;
}

/* Links Seite */

.links a,
.links a:link {
        color: #4f4f4f;
        text-decoration: underline;
        font-weight: normal;
}

.links a:visited {
        color: #ffaa3b;
        text-decoration: underline;
        font-weight: normal;
}

.links a:active,
.links a:hover {
        color: #ffaa3b;
        text-decoration: underline;
        font-weight: normal;
}

.linktext {
        margin-bottom: 0.5em;
        line-height: 1.2em;
}




/*****************/
/* CONTENT Rechts*/
/*****************/


/***** Sprechblase****/

#sprechblase {
        background-image: url('sprechblase.png');
        position: relative;

        margin-top: -95px;
        left: -10px;

        background-repeat: no-repeat;
        background-position:left top;
        width: 263px;
        height: 200px;

        color: #626262;
        line-height: 130%;
}

#sprechblasencontent {

                position: relative;
                left: 47px;
                top: 32px;
                width: 170px;
                height: 85px;
}

#sprechblasencontent img.startquote {
        margin: 0 5px 0 0;
}

#sprechblasencontent img.endquote {
                margin: 0 0 0 5px;
}

#sprechblasenlink {
                font-size: 80%;
                position: relative;
                left: 53px;
                top: 45px;
                width: 150px;
                height: 15px;
                text-align: center;
}

#sprechblasenlink a,
#sprechblasenlink a:link {
        color: #626262;
        text-decoration: none;
}

#sprechblasenlink a:hover,
#sprechblasenlink a:active {
        text-decoration: underline;
}

/***** Notizblock****/

#notizblock {
        position: relative;
        margin-top: -105px;
        left: 0px;
        width: 251px;
        height: 295px;
}

/***** Pfeil zum Ziel ****/

#pfeil-zum-ziel {
        position: relative;
        margin-top: -70px;
        left: 0px;
        width: 319px;
        height: 312px;
}

/***** Sprechblase Projekte ****/

#sprechblase-projekte {
        position: relative;
        margin-top: -100px;
        left: 0px;
        width: 237px;
        height: 220px;
}

/***** Diastreifen****/

#diastreifen {
        position: relative;
        margin-top: -110px;
        left: 0px;
        width: 394px;
        height: 256px;
}

/***** Team Polaroids****/

#team-polaroids {
        position: relative;
        margin-top: -85px;
        left: 0px;
        width: 408px;
        height: 507px;
}


/***** Top Ten ****/

#topten-wrapper {
        background-color: #f4f4f4;
        margin-top: 50px;
        float: right;
        width: 385px;
}

#topten-wrapper h2 {
        color: #fff;
        background-color: #b4b4b4;

        font-size: 105%;
        line-height: 25px;
        font-weight: bold;
        padding-left: 10px;
        margin: 0;
}

html > body #topten {
display: block;
        padding:1em 0 0em 30px;
        margin: 0 0 1em 0;
        font-size: 95%;
        line-height: 1.9em;
        list-style-image: url('list_arrow.gif');
        list-style-position: outside;
}
#topten div {
        margin: 3px 0 7px 0;
        width: 340px;
        line-height: 1.4em; /*damit der toggle nicht huepft...*/
}


#topten li {
        font-weight: normal;
}


#topten br {
        margin-bottom: 6px;
}

#topten li img.plus-icon {
        vertical-align: middle;
        position: relative;
                cursor: pointer ;
        width: 17px;
        height: 17px;
        margin-left: 5px;
}

#topten li a {
        color: #4f4f4f;
        text-decoration: none;
}

#topten li a:link {
        color: #4f4f4f;
}


#topten li a:visited {
        color: #626262;
}

#topten li a:hover,
#topten li a:active {
        color: #ffaa3b;
                text-decoration: underline;
}

#morelink {
        color: #fff;
        background-color: #dadada;
        font-size: 85%;
        line-height: 1.7em;
        font-weight: normal;
        padding-left: 10px;
}

#morelink a {
        color: #626262;
        text-decoration: none;
}

#morelink a:link,
#morelink a:visited {
        color: #626262;
}

#morelink a:hover,
#morelink a:active {
        color: #ffaa3b;
}


/***** Textbox ****/

#textbox-wrapper {
        background-color: #f4f4f4;
        margin-top: 50px;
        float: right;
        width: 385px;
}

#textbox-wrapper h2 {
        color: #fff;
        background-color: #b4b4b4;

        font-size: 105%;
        line-height: 25px;
        font-weight: bold;
        padding-left: 18px;
        margin: 0;
}

#textbox {
        padding:0 1.5em 1em 18px;
        margin: 0 0 0.5em 0;
        font-size: 95%;
}


#textbox h3 {
        font-size: 110%;
        font-weight: normal;
        margin: 1em 0 0.2em 0;
}

#textbox p {
        font-weight: normal;
        margin-top: 0.3em;
        color:#4c4c4c;
        line-height:125%;
        font-size: 95%;
}
#textbox div {
        font-weight: normal;
        margin-top: 1em;
        color:#4c4c4c;
        line-height:140%;
        font-size: 100%;
}

/***** Adressbox ****/

#adresse {
        border-top:2px dotted #999999;
        border-bottom:2px dotted #999999;
        padding: 20px 0;
        margin: 63px 0 25px 0;
}

#adresse-kurz {
        border-top:2px dotted #999999;
        padding: 10px 0;
        margin: 20px 0 0px 0;
}


/**********/
/* FOOTER */
/**********/


/******************/
/* HELPER CLASSES */
/******************/
.test {
        border: 1px solid #000;
}

.hide {
        display: none;
        visibility: hidden;
}

.preloader{
        position: absolute;
        top: -7000px;
        left: -7000px;
        height: 1px;
        width: 1px;
}

.left {
        float: left;
}

.right {
        float: right;
}

.clear {
        clear: both;
}

.clearfix:after {/* add .clearfix class to clear floats after an element */
        clear: both;        /* (IE version is in ie6-fixes.css) */
        content: ".";
        display: block;
        font-size: 0;
        height: 0;
        visibility: hidden;
}

.spacetop0 {
        margin-top: 0;
}

.spacetop05 {
        margin-top: 0.5em;
}

.spacetop075 {
        margin-top: 0.75em;
}

.spacetop1 {
        margin-top: 1em;
}

.spacetop15 {
        margin-top: 1.5em;
}

.spacetop2 {
        margin-top: 2em;
}

.spacetop3 {
        margin-top: 3em;
}

.spacetop4 {
        margin-top: 4em;
}

.spacebot0 {
        margin-bottom: 0;
}

.spacebot05 {
        margin-top: 0.5em;
}

.spacebot075 {
        margin-top: 0.75em;
}

.spacebot1 {
        margin-bottom: 1em;
}

.spacebot15 {
        margin-bottom: 1.5em;
}

.spacebot2 {
        margin-bottom: 2em;
}

.spacebot3 {
        margin-bottom: 3em;
}

/* ######################################### */
/* ####### spezielle Formatierungen ######## */
/* ######################################### */

fieldset {
        padding: 0;
        margin: 0;
        border: 0;
}

form#rex_formgen_from {
        border: none;
}

#rex_formgen_from legend {
        display: none;
}

#rex_formgen_from .formgen_block {
        clear: both;
}

#rex_formgen_from label {
        float: left;
        display: block;
        width: 80px;
        padding-top: 8px;
}

#rex_formgen_from .text-password-bgdiv {
        float: left;
        width: 381px;
        height: 38px;
        background: #fff url('input-bg.png') no-repeat left top;
        margin: 0;
        padding: 0;
}

#rex_formgen_from input {
        width: 357px;
        height: 1.3em;
        margin: 10px auto auto 10px;
        border: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
}

#rex_formgen_from .formgen_multiline {
        float: left;
        width: 381px;
        height: 200px;
        background: #fff url('textarea-bg.png') no-repeat left top;
        margin: 0;
        padding: 0;
}

#rex_formgen_from textarea {        border:1px solid #000;
        width: 357px;
        height: 178px;
        margin: 10px auto auto 10px;border: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
}

#rex_formgen_from input.formgen_submit {
        color: #626262;
        float: left;
        display: block;
        margin-left: 80px;
        padding: 0;
        width: 85px;
        height: 41px;
        background: transparent url('submitbutton-bg.png') no-repeat left 3px;
}

#rex_formgen_from input.formgen_submit:hover,
#rex_formgen_from input.formgen_submit:active {
        color: #ffaa3b;
        cursor: pointer;
}