﻿/* ========================================================== */
/* ======( leadsheet.css )=================================== */
/* ========================================================== */
/* ======( newsign                 )========================= */
/* ======( Dario Orlando           )========================= */
/* ======( http://www.newsign.ch   )========================= */
/* ========================================================== */

/* Normalisierung aller Tags */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}q:before,q:after{content:''}h1,h2,h3,h4,h5,h6{font-size:100%}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}caption,th{text-align:left}




/* ======( html & body )===================================== */

html {
                height: 100%;
                }

body {
				height: 100%;
				position: relative;
				text-align: center;
				font: 11px/1.7 Verdana, Helvetica, Arial, sans-serif;
				background: #2a343e url(images/Bkgnd.jpg) repeat-x;
				color: #88898a;
				}


/* ======( Branding )======================================== */

div#branding {
				position: relative;
				overflow: hidden;
				width: 630px;
				height: 124px;
				margin: 0 auto;
				padding: 0px 148px 0px 148px;
				background: url(images/Logo.gif) no-repeat 623px 41px;
				color: #5b7186;}


/* ------( Branding Text verstecken )------------------------ */
div#branding h1 {
				text-indent: -9999px;}



/* ======( Navigation )====================================== */

div#navigation {
				position: relative;
				width: 630px;
				height: 25px;
				margin: 0 auto;
				padding: 0 148px 0 148px;
				}


/* ------( Navigation - List )------------------------------- */

div#navigation ul {
				padding-left: 31px;}

div#navigation ul li {
				float: left;
				height: 12px;
				padding-bottom: 13px;
				padding-right: 14px;
				line-height: 10px;
				text-indent: -9999px;}


/* ------( Navigation - Rollovers )-------------------------- */

div#navigation ul li a {
				height: 11px;
				border-bottom: 0 !important;
				}


/* Profil */
div#navigation ul li#profil a {
				display: block;
				width: 46px;
				text-decoration: none;
				background: url(images/Navigation.png) no-repeat 0px 0px;
				}

div#navigation ul li#profil a:focus, 
div#navigation ul li#profil a:hover, 
div#navigation ul li#profil a:active, 
div#navigation ul li#profil a.active {
				text-decoration: none;
				background-position: 0px -10px !important;
				}


/* Dienstleistungen */
div#navigation ul li#dienstleistungen a {
				display: block;
				width: 123px;
				text-decoration: none;
				background: url(images/Navigation.png) no-repeat -57px 0px;
				}

div#navigation ul li#dienstleistungen a:focus, 
div#navigation ul li#dienstleistungen a:hover, 
div#navigation ul li#dienstleistungen a:active, 
div#navigation ul li#dienstleistungen a.active {
				text-decoration: none;
				background-position: -57px -10px !important;
				}


/* Portfolio */
div#navigation ul li#portfolio a {
				display: block;
				width: 69px;
				text-decoration: none;
				background: url(images/Navigation.png) no-repeat -191px 0px;
				}

div#navigation ul li#portfolio a:focus, 
div#navigation ul li#portfolio a:hover, 
div#navigation ul li#portfolio a:active, 
div#navigation ul li#portfolio a.active {
				text-decoration: none;
				background-position: -191px -10px !important;
				}


/* Kontakt */
div#navigation ul li#kontakt a {
				display: block;
				width: 58px;
				text-decoration: none;
				background: url(images/Navigation.png) no-repeat -271px 0px;
				}

div#navigation ul li#kontakt a:focus, 
div#navigation ul li#kontakt a:hover, 
div#navigation ul li#kontakt a:active, 
div#navigation ul li#kontakt a.active {
				text-decoration: none;
				background-position: -271px -10px !important;
                }


/* ======( Content )========================================= */

div#content {
				position: relative;
				overflow: hidden;
				width: 630px;
				height: 403px;
				margin: 0 auto;
				padding: 0 148px 47px 148px;
				text-align: left;
				background: transparent url(images/Main-Bkgnd.jpg) no-repeat top center;
				color: #88898a;}


/* ------( Content - Text/Paragraphs/Spans )----------------- */

div#content p {
				position: relative;
				padding: 18px 247px 0 31px;
				}

div#content p.first {
                padding-top: 22px !important;
                }

span.titel-inline {
				font-weight: bold;
				color: #0768b2;}

span.sub-titel-inline {
				color: #0768b2;}



/* Navigation */

ul#portfolio_nav {
				width: 140px;
				padding: 14px 0 0 31px;
				font-weight: bold;}

ul#portfolio_nav li {
				padding-top: 8px;}

ul#portfolio_nav li.submenue {
				padding-top: 0;}

ul#portfolio_nav li.active a {
				color: #0768b2;}

ul#portfolio_nav li ul li {
				font-weight: normal;
				padding: 0 0 0 12px;}

ul#portfolio_nav li ul li.active {
				background: url(../images/interface/img_pfeil.gif) no-repeat 0 5px;}

ul#portfolio_nav a:link, 
ul#portfolio_nav a:visited {
				border-bottom: 0;}

ul#portfolio_nav a:focus, 
ul#portfolio_nav a:hover, 
ul#portfolio_nav a:active {
				border-bottom: 0;}


/* Bild */

img#portfolio-pict {
				position: absolute;
				top: 15px;
				right: 163px;
				width: 429px;
				height: 311px;}

/* Hauptbild */

div#content img.content-image {
                position: absolute;
                right: 148px;
                bottom: 47px;
                z-index: 0;
                }

/* Spiegelung */

div#content img.mirror-image {
                position: absolute;
                right: 148px;
                bottom: 0px;
                }

/* Text */

ul#portfolio-text {
				position: absolute;
				top: 341px;
				left: 334px;
				width: 340px;
				height: 48px;
				font-size: 9px;}

/* Seitenanzeige */

ul#portfolio-pages {
				position: absolute;
				top: 341px;
				right: 163px;
				width: 78px;
				height: 13px;}

ul#portfolio-pages li {
				float: right;
				width: 13px;
				padding-left: 4px;}

ul#portfolio-pages li a {
				display: block;
				width: 13px;
				height: 13px;
				border-bottom: 0;
				text-indent: -9999px;}


/* Seite 1 */
ul#portfolio-pages li#page-1 {
				background: url(../images/interface/img_quadrat1.gif) no-repeat 4px 0;}

ul#portfolio-pages li#page-1 a:link, 
ul#portfolio-pages li#page-1 a:visited {
				background: url(../images/interface/img_quadrat1.gif) no-repeat;}

ul#portfolio-pages li#page-1 a:focus, 
ul#portfolio-pages li#page-1 a:hover, 
ul#portfolio-pages li#page-1 a:active,
ul#portfolio-pages li#page-1 a.active {
				background: url(../images/interface/img_quadrat1_rollover.gif) no-repeat !important;}

/* Seite 2 */
ul#portfolio-pages li#page-2 {
				background: url(../images/interface/img_quadrat2.gif) no-repeat 4px 0;}


ul#portfolio-pages li#page-2 a:link, 
ul#portfolio-pages li#page-2 a:visited {
				background: url(../images/interface/img_quadrat2.gif) no-repeat;}

ul#portfolio-pages li#page-2 a:focus, 
ul#portfolio-pages li#page-2 a:hover, 
ul#portfolio-pages li#page-2 a:active, 
ul#portfolio-pages li#page-2 a.active {
				background: url(../images/interface/img_quadrat2_rollover.gif) no-repeat !important;}

/* Seite 3 */
ul#portfolio-pages li#page-3 {
				background: url(../images/interface/img_quadrat3.gif) no-repeat 4px 0;}


ul#portfolio-pages li#page-3 a:link, 
ul#portfolio-pages li#page-3 a:visited {
				background: url(../images/interface/img_quadrat3.gif) no-repeat;}

ul#portfolio-pages li#page-3 a:focus, 
ul#portfolio-pages li#page-3 a:hover, 
ul#portfolio-pages li#page-3 a:active, 
ul#portfolio-pages li#page-3 a.active {
				background: url(../images/interface/img_quadrat3_rollover.gif) no-repeat !important;}

/* Seite 4 */
ul#portfolio-pages li#page-4 {
				background: url(../images/interface/img_quadrat4.gif) no-repeat 4px 0;}


ul#portfolio-pages li#page-4 a:link, 
ul#portfolio-pages li#page-4 a:visited {
				background: url(../images/interface/img_quadrat4.gif) no-repeat;}

ul#portfolio-pages li#page-4 a:focus, 
ul#portfolio-pages li#page-4 a:hover, 
ul#portfolio-pages li#page-4 a:active, 
ul#portfolio-pages li#page-4 a.active {
				background: url(../images/interface/img_quadrat4_rollover.gif) no-repeat !important;}




/* ======( Footer )========================================== */

div#footer {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 31px;
				background: #191f25 url(images/Footer.png) repeat-x;
				}


/* ------( Footer - Text/Paragraphs/Spans )------------------ */

div#footer p.copyright {
				position: relative;
				margin: 0 auto;
				width: 599px;
				text-align: left;
				font-size: 10px;
				color: #FFFFFF;
				padding-left: 31px;
				padding-top: 8px;
				}

div#footer p.payoff {
				position: absolute;
				width: 300px;
				right: 0px;
				top: 0px;
				padding-right: 37px;
				padding-top: 8px;
				text-align: right;
				font-size: 10px;
				color: #FFFFFF;
				}


/* ======( Links )=========================================== */

/* ------( inaktiv )----------------------------------------- */
a:link, 
a:visited {
				text-decoration: none;
				color: #88898a;
				border-bottom: 1px solid #DDDDDD;
				outline: none;
				-moz-outline-style: none;
				}

/* ------( aktiv )------------------------------------------- */
a:focus, 
a:hover, 
a:active {
				text-decoration: none;
				color: #0768b2;
				border-bottom: 1px solid #0768b2;
				outline: none;
				-moz-outline-style: none;
				}


/* ------( Pfeil )------------------------------------------- */
a.arrow {
				background: url(../images/interface/img_pfeil.gif) no-repeat 0 2px;
				padding-left: 12px;
				color: #0768b2 !important;
				border: 0 !important;}


/* ------( Navigation Portfolio Links )---------------------- */
ul#portfolio_nav li.auswahl a {
				text-decoration: none;
				color: #88898a;
				border-bottom: 0;}

/* ------( Links ohne Linie )-------------------------------- */
a.noline {
				border-bottom: 0;}


/* ------( Footer Links )------------------------------------ */
div#footer p a:link, 
div#footer p a:visited {
				text-decoration: none;
				color: #fff;
				border-bottom: 0;}

div#footer p a:focus, 
div#footer p a:hover, 
div#footer p a:active {
				text-decoration: none;
				color: #fff;
				border-bottom: 1px solid #fff;}


/* ======( Headings )======================================== */

h1, h2, h3, h4, h5, h6 {
				color: #0768b2;}

h1 {
				padding-left: 31px;
				font: 11px/1.7 Verdana, Helvetica, Arial, sans-serif;
				font-weight: bold;}


/* ======( Kontakt )========================================= */

div#K-Form {
            position: absolute;
            top: 40px;
            left: 460px;
            width: 318px;
            height: 363px;
            }

div#K-Form p {
            padding: 18px 30px 0 0 !important;
            }

div#Kontakt {
            padding-top: 18px;
            }

form#Kontakt-Formular label {
            display: block;
            position: relative;
            width: 284px;
            padding-left: 4px;
            margin-bottom: 3px;
            background-color: #f0f0f0;
            }

form#Kontakt-Formular label.Last__Name {
            position: absolute;
            overflow: hidden;
            width: 1px;
            height: 1px;
            left: -9999px;  
            margin: 0 !important;
            background-color: transparent !important;
            }

form#Kontakt-Formular label .text {
            position: absolute;
            top: 0;
            left: 86px;
            width: 200px;
            height: 16px;
            padding: 0;
            background-color: #f0f0f0;
            border: 1px solid #f0f0f0;
            }

form#Kontakt-Formular label .text:focus {
            outline: none;
            background-color: #ddd;
            }

form#Kontakt-Formular label textarea {
            position: relative;
            width: 278px;
            max-width: 278px;
            height: 52px;
            max-height: 120px;
            padding: 0;
            background-color: #f0f0f0;
            border: 1px solid #f0f0f0;
            }

form#Kontakt-Formular label textarea:focus {
            outline: none;
            background-color: #ddd;
            }

form#Kontakt-Formular p.submit {
            position: relative;
            }

form#Kontakt-Formular span.submit {
            display: block;
            position: absolute;
            top: 18px;
            right: 30px;
            text-align: right;
            }

form#Kontakt-Formular input.button {
            width: 60px;
            height: 18px;
            line-height: 16px;
            color: #88898a;
            background-color: #f0f0f0;
            border: 1px solid #f0f0f0;
            cursor: pointer;
            }

form#Kontakt-Formular input.button:hover,
form#Kontakt-Formular input.button:focus {
            color: #fff !important;
            background-color: #88898a !important;
            border: 1px solid #ddd !important;
            }

form#Kontakt-Formular input.button:active {
            color: #fff !important;
            background-color: #666 !important;
            border: 1px solid #ddd !important;
            }

form#Kontakt-Formular label.check-errors {
            border: 1px solid #ff0000 !important;
            }




@media screen and (max-device-width: 480px) and (orientation:landscape) {
	
	div#footer { position: relative; }

}
