/* Style sheet xBasic */

#umgezogen {
	/* display: none; */
        position: absolute;
        z-index: 100;
        top: 140px;
        left: -30px;
}




html {
	height: 100%;
	margin-bottom: 1px;
}


body {
	/* margin:40px; */
	padding:0px;

	/* background-color: #333; */

}



/*
-----------------------------------------------------------------

TYPOGRAPHY

-------------------------------------------------------------------
*/


a, b, body, cite, div, i, label, li, ol, p, strong, td, th, u, ul {
	line-height: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
}


fieldset, form, input, optgroup, select, textarea {
	font-family:Arial, Helvetica, sans-serif;
}
body, div, fieldset, form, input, label, li, ol, optgroup, p, select, td, th, textarea, ul {
	font-size:11px;

}

/* reset Margins & Padding*/
td, th, tr, table {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type:none;
	padding: 0;
	margin: 0;
}

li {
	margin-bottom: 1em; 
}



/* colors */

a, body, div, fieldset, form, input, label, li, ol, optgroup, p, select, td, th, textarea, ul {
	color:#333333;
}

/* font sizes: medium */

h1, h2, h3 {

	font-size: 1.5em;
	line-height: 1.1em;
	/* letter-spacing: -0.5px; */
	font-weight: 600;

}

/* font weight*/
h3 {
	font-weight: normal;
        padding-top: 1em;
}



h3, h4 {
    margin: 0 0 0.5em 0;
	
}

img {
	border:0px;
}
p, pre, form {
	margin:0px 0px 12px 0px;
	padding:0px;
}
h1 {

}

.sp-left h1,
.sp-left h2 {
    margin-top: 0px;
}



/*
--------------------------------------------------------

TOPHEADER 

--------------------------------------------------------
*/
 
table.naviMeta div span {
    font-size: 6em;
    line-height: 95%;
    font-weight: bold;
    letter-spacing: -2px;

}


div.topheader {
    
    height: 400px;
    width: 700px;
    margin: 0px;
    padding: 0px;
    position: relative;

}

div.topheader table.naviMeta {
	display: block;
        position: absolute;
        z-index: 1;
        width: 705px;
        height: 399px;
        left: -2px;
        top: -2px;
	list-style-position:outside;
        background-color: #fff;



}



/* margins */

h1, h2 {
	margin:5px 0px 10px 0px;
	padding:0px;
}


optgroup {
	padding-top:3px;
	padding-bottom:3px;
	font-style:normal;
}


/* links */

a {
	text-decoration:none;
	color:#333333;
}
a:hover {
	border-bottom-style: solid;

}



#main a {
	border-bottom: 1px dotted #999;
}



/*

------------------------------------------------------------

NAVIGATION 

------------------------------------------------------------


*/



/**
 * Container
 */
.mod_navigation
{
	padding: 0;
	top: 398px;
	width: 240px;
        position: absolute;
		z-index: 9;
        /* border-top: 1px dashed #666; */
        padding-top: 2em;	

}


/**
 * First level
 */
.mod_navigation ul,
.footer_nav ul
{
	list-style-type:none;	
	padding: 0px;
        
}

.mod_navigation ul {
	padding: 0;
	margin: 0;




}


/*
---------------------------------------------

HEADER ROLLOVER BEHAVIOUR

----------------------------------------------


*/

table.naviMeta {
	display: block;
        position: absolute;
        width: 705px;
        height: 399px;
        left: 258px;
        top: -380px;
	list-style-position:outside;
        background-color: #fff;



}

.mod_navigation ul a:hover table.naviMeta{
    display: block;
}


table.naviMeta td {
        width: 700px;
        height: 380px;
        margin: 5px;
       
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
}


table.naviMeta div span{


}


.footer_nav ul
{
	margin: -10px 0px 1em 0px;
}



/*
-------------------------------------------------------

NAVIGATION List Elements

-------------------------------------------------------
*/


#container .mod_navigation li a,
#container li.active span.active {
    
        font-size: 1.5em;
        padding: 0.5em 0 0.01em 0; 

}

#container li.active span.active {
       /* font-family: "Times New Roman", Times, serif; 

        font-size: 2em; */
        font-weight: bold;
}


.mod_navigation li,
.footer_nav li {
	list-style-type:none;

        margin: 0px 0.5em 1em 0px;
	

}

.footer_nav li {
        display: inline;
}

.mod_navigation li {
    

}

.mod_navigation li a,
.mod_navigation li span {
	padding: 0 0 1px 0;
}


/* active class */
li.active span.active,
.mod_navigation a:hover{
	border-bottom: 2px solid #333;
	
}


.mod_navigation a:hover{
	border-bottom: 1px solid #333;
	
}




#container .mod_navigation ul.level_2 {
    display: none;
}




* html .mod_navigation ul,
* html .mod_navigation li
{
	height:1px;
}

*:first-child+html .mod_navigation .parent
{
	height:3px;
}

.mod_navigation p
{
	margin:0px;
	padding:0px;
}

.mod_navigation a,
.mod_navigation li,
.mod_navigation p
{
	border-bottom: none;
	

}




#left {
        position: absolute;
        z-index: 10;
		left: 0px;
}



#wrapper {
	width: 960px;
	position:relative;
	margin: 0px auto;

}


#main, #footer, #container {

	position: relative;
	margin: 0px auto ;
	
}

div.logo {
	position: absolute;
        margin-top: -8px;
        padding-top: 20px;
        /* border-top: 1px dashed #666; */

}

#main {
	padding: 20px;
	width: 700px;
	margin: 0 0 0 240px;
}



#container {
	width: 960px;

}

#header {

        height: 60px;

}





#breadcrumb {
	margin-left: 240px;
}


#footer {
    width: 740px;
    margin-left: 220px;
    margin-right: 0px;

}


#sus_footer {

	margin: 100px 0px 20px 40px;
	border-top: 1px solid #999;
	padding-top: 0;
	position: relative;
	clear: both;
}


#theCopyright {
    position: absolute;
    right: 0px;
    top: 108px;
}

#theCopyright small {
    color: #ccc;
}









/* Main Content areas Divs */

#main {

}


/* Overwrite typolight.ccs */

#wrapper .block {
	overflow:visible;
}

#main .inside {
	text-align: inherit;
}







/* added Classes by Sebald und Soehne */


/*

logos & Ornaments

*/

img.hr-ornament {
	position: absolute;
	top: -28px;
	left: -39px;


}

.abstandtop {
	padding-top: 5em;
        clear: both;
        position: relative;
}



/*
---------------------------------------------------------

PORTFOLIO

---------------------------------------------------------
*/

/* Portfolio Frontpage items */



#main .mod_newslist,
#main .mod_cataloglist {
    width: 720px;
}


/* First List item -> Highlighted*/

.layout_short.first {
    width: 700px;
    height: 380px;
    position: relative;
    margin-bottom: 15px;
    padding: 10px;
       
}


.layout_short.first div.innertext {
        position: absolute;
        top: 140px;
        left: 470px;
        width: 220px;
        height: 204px;
        background-color: #fff;
        padding: 16px 20px 0px 20px;

  
}

.layout_short.first:hover div.innertext {
		display:none;
}

.markeraktuell {
        position: absolute;
        top: 15px;
        left: 20px;
        color: #fff;
}

.layout_short:hover .markeraktuell {
		display: none;
		
}

.layout_short:hover .rolloverstate,
.layout_short .normalstate {
	display: block;
}

.layout_short .rolloverstate,
.layout_short:hover .normalstate {
	display: none;
}



ul.theMeta {


}

ul.theMeta em {

	color: #666;


}

.layout_short:hover ul.theMeta em {

	color: #cccccc;


}


.layout_short .clickimage {
    position: absolute;
    top: 55px;
    left: 90px;
    
    display: none; 
}

.layout_short:hover .clickimage {

    display: block;
}

.layout_short.first .clickimage {
    top: 180px;
    left: 330px;
}


.layout_short {
        position: relative;
	width: 220px;
	height: 340px;
	padding: 10px 10px 0 10px;
	float: left;
	margin: -10px 10px 20px -10px;
}

.layout_short:hover,
.layout_short:hover div.innertext {


	/* background-color: #333333;
	background-image:url(../sus-theme/img/bg_fade_dark.gif); */
	cursor: pointer;
}

.layout_short:hover,
.layout_short:hover p,
.layout_short:hover a,
.layout_short:hover h2,
.layout_short:hover small,
.layout_short:hover ul.theMeta li {
	color: #fff;
}
.layout_short  .pf-thumbnail {
	margin-bottom: 12px;
	width: 220px;
	height: 120px;
	overflow: hidden;
}




/* Portfolio Single Page*/


/* added Tag for Imagerotator */
.mod_imagerotator img {
	vertical-align:top;
}

.mod_imagerotator {
	/* width: 700px;
	height: 380px; */
	background-color: #f4f4f4;
	margin-bottom: 20px;
}

img.inlineImage {
	float: left;
	margin-right: 20px;
	padding-top: 0.5em;
	margin-bottom: 10px;
}


.mod_newsreader p.back {
    position: absolute;
    left: 0px;
    top: 530px;
    padding-top: 2em;
}

p.back {
	display: none;
}





small,ul.theMeta {

	font-size: 0.85em;
	color: #575757;
}



p.info {
	margin-bottom: 0px;
}








/* 
------------------------------------------------------------

FORMS 

--------------------------------------------------------------
*/




/**
 * Style sheet xForm
 * Copyright (C) 2005 Leo Feyer, licensed under LGPL
 */
 

/**
 * Fieldset
 */
fieldset
{
	width:600px;
	display:block;
	margin:12px 0px 24px 0px;
	padding:12px 12px 0px 12px;
}

* html fieldset
{
	margin-top:12px;
}

*:first-child+html fieldset
{
	margin-top:12px;
}

legend
{
	color:#0000e6;
}

* html legend
{
	margin-top:-24px;
	padding:12px 0px;
}

*:first-child+html legend
{
	margin-top:-24px;
	padding:12px 0px;
}


/**
 * Text fields
 */
input.text,
input.password
{
	/* width:200px; 
	margin:1px 0px 1px 0px; */
}

* html input.text,
* html input.password
{
	margin:0px;
}


*:first-child+html input.text,
*:first-child+html input.password
{
	margin:0px;
}


/**
 * Textarea
 */
textarea
{
	/* width:360px;
	height:140px; */
}

* html textarea
{
	width:358px;
}


/**
 * Drop-down menu

 */
select
{
	width:204px;
	margin:1px 0px 1px 0px;
}

* html select
{
	width:206px;
}



/**
 * Radio buttons
 */
div.radio_container
{
	margin:0px 0px 1px 0px;
}

* html div.radio_container
{
	margin:2px 0px -1px 0px;
}

*:first-child+html div.radio_container
{
	margin:2px 0px -1px 0px;
}

div.radio_container span
{
	padding-right:6px;
	display:block;
}

input.radio
{
	margin:1px 2px 0px 1px;
	padding:0px;
	position:relative;
	top:2px;
}

* html input.radio
{
	margin:-4px -1px 0px -3px;
	position:relative;
	top:1px;
}

*:first-child+html input.radio
{
	margin:-4px 0px 0px -3px;
	position:relative;

	top:1px;
}


/**
 * Checkboxes
 */
div.checkbox_container
{
	margin:0px 0px 1px 0px;
}

* html div.checkbox_container
{
	margin:2px 0px -1px 0px;
}

*:first-child+html div.checkbox_container
{
	margin:2px 0px -1px 0px;
}

div.checkbox_container span
{
	padding-right:6px;
	display:block;
}

input.checkbox
{
	margin:3px 3px 0px 1px;
	padding:0px;
}

* html input.checkbox
{
	margin:-4px 0px 0px -3px;
	position:relative;
	top:1px;
}

*:first-child+html input.checkbox
{
	margin:-4px 0px 0px -3px;
	position:relative;
	top:1px;
}


/**
 * File upload
 */
input.file
{
	margin:1px 0px 1px 0px;
}

* html input.file


{
	margin:0px;
}

*:first-child+html input.file
{
	margin:0px;
}


/**
 * Error message
 */
div.error
{
	color:#ff0000;
}


form {
    margin-left: 240px;
}

.sp-2col-right form {
	margin-left: 0px;
}

label {
	width: 450px;
	display: block;
	margin-top: 20px;


}
span.mandatory {
	color: #CC0000;
	position: absolute;
	margin-left: 5px;
}


textarea, 
input[type="text"], 
input[type="password"],
select {
	background-color: #f4f4f4;
	/* border: 1px solid #ccc; */
	border: 0;
	padding: 5px;
	width: 450px;

}




textarea:hover, 
input[type="text"]:hover, 
input[type="password"]:hover,
select:hover,

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus,
select:focus {
	background-color: #333333;
	background-image:url(../sus-theme/img/bg_fade_dark.gif);
	color: #f4f4f4;

}


input[type="submit"], input[type="reset"] {
	margin-top: 1em;
}
form td {
	padding-bottom: 1em;
}













/* debug display */

.debug {
	background-color: #EFF1E0;
	padding: 3px;
	font-size: 0.8em;
	color: #000000;
	position:absolute;
}

textarea.debug {
	background-color: #EFF1E0;
	border-color: #EFF1E0;
	border: 0px;
	width: 200px;
	height: 50px;

	position:absolute;
}


textarea.debug:hover {
	width: 500px;
	height: 450px;
}


.intro {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.6em;
	line-height: 1.3em;
}

.intro em, .layout_full p em {

	color: #000000;


}

.intro:after {
	font-size: 46px;
	content: "-";
	display: block;
	margin-left: -3px;

}

.back {
	clear: left;
}

/* Multicolumn Layout */

.sp-left, .sp-middle, .sp-right,
.sp-2col-left, .sp-2col-right, sp-3col {
	padding: 5px 0px 0px 5px;
	margin-left: -5px;
	margin-top: -5px;
}

.sp-left, .sp-middle, .sp-right {
	width: 220px;

}

.sp-left, .sp-middle {
	float: left;
	margin-right: 20px;
}
.sp-2col-right {
	width: 460px;
	float: left;
	clear: right;
	margin-right: -5px;
}

.sp-2col-left {
	width: 460px;
	float: left;
	margin-right: 20px;

}

.sp-right {
	float: left;
	clear: right;
	margin-right: -5px;
}
.sp-3col {
	float: left;
	clear: right;
	margin-right: -5px;

}




/* helper */

hr.theClearing {
	display: block;
	clear: right;
	margin: 0px 0px 0px 0px;
	content: ".";
	/* float: left; */
	height: 0px;
	line-height: 0px;
	visibility: hidden;
	padding-bottom: 0px;
	float: left;
	width: 100%;
}

hr.theClearingEnd {
	display: block;
	clear: both;
	margin: 0px 0px 60px 0px;
	content: ".";
	/* float: left; */
	height: 0px;
	line-height: 0px;
	visibility: hidden;
	padding-bottom: 90px;
	float: none;

}
#nav_level_1     ul.level_1  {
	margin-top: 2em;
	font-style: italic;
}



/*
-----------------------------------------

INDIVIDUAL CLASSES & ITEMS

-----------------------------------------
*/

.icon_overlay {
    position: absolute;
	top: 3px;
	right: -4px;
    z-index: 10;
}

#portfolio-uebersicht .rollOverText {
	position: absolute;

        top: 261px;
        left: 10px;

        padding: 5px 10px 0px 0px;
        width: 220px;

        color: #ffffff !important;
        line-height: 140%;
        display: none;
        z-index: 120;


        
}


#portfolio-uebersicht .rollOverText small {
    font-weight: normal;
font-size: 1em;
}

#portfolio-uebersicht .layout_short:hover .rollOverText {
    display: block;

}

#portfolio-uebersicht .rollOverText small {


}