/**************************************************************************************
    saup.de
***************************************************************************************/
* {
   margin: 0px; padding: 0px;
}

body{

    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;

    XXXline-height: 1.2;

    background-color:#4f462e; /* bbb */
     overflow: auto;	/* hidden */

        scrollbar-face-color: #EFEFEF;
        scrollbar-3dlight-color: #DFDFDF;
        scrollbar-arrow-color: #000000;
        scrollbar-darkshadow-color: #000000;
        scrollbar-shadow-color: #7F7F7F;
        scrollbar-base-color: #BFBFBF;
        scrollbar-track-color: #FFFFFF;
        scrollbar-highlight-color: #FFFFFF;
}
body.blue {
    background: #101d26;
}
body.green {
    background: #112611;
}
body.purple {
    background: #261126;
}
body.white {
    background: #ffffff;
}

/**************************************************************************************
    this one wraps the whole layout
***************************************************************************************/
    div.rahmen
    {
	    position:absolute;
	    top:0px;left:0px;
	    width:742px;height:647px;
	    background-color:#ffffff;
    }

div.saupwrap
{
	position:absolute;

    background-color: #fff;
    z-index:0;

    width:742px;
    height:647px;

    top: 50%;
	left: 50%;
	margin-top: -323px;
	margin-left: -371px;

}



/**************************************************************************************
    this one wraps the whole layout
***************************************************************************************/

h1{
	color:#bbb;font-family:Verdana;font-size:13px;

}
h3{
	color:#bbb;font-family:Verdana;font-size:11px;
}
div.bg{

	position:absolute;top:0px;left:0px;z-index:0;
	filter:alpha(opacity=66);
	-moz-opacity:0.66;
	-khtml-opacity: 0.66;
	opacity: 0.66;
}
/*=============================================================================*/
a {color: #FF972F; font-weight:normal;}
a:active     { text-decoration: none }
a:link    { text-decoration: none }
a:visited    {  text-decoration: none  }
a:hover    {   color: #000000; text-decoration: none }

.partners a {color: #bbb; font-weight:normal;}
.partners a:hover {color: #FF972F; font-weight:normal;}
/*=============================================================================*/
p{
    margin-top:11px;
    margin-bottom:0px;
    padding:0px;
}

ul{
    margin-top:11px;
    margin-left:40px;
    margin-bottom:11px;
    padding:0px;
    list-style-type:square;
    list-style-position:outside;
}
ul.menu {
    margin:0px;
    padding:0px;
    width:150px;
    list-style-type:none;
    list-style-position:outside;
    text-align:left;
}

ul.menuright {
    margin:0px;
    padding:0px;
    width:150px;
    list-style-type:none;
    list-style-position:outside;
    text-align:right;
}

/**************************************************************************************
    images
***************************************************************************************/

div.linksleft
{
	position:absolute;top:100px;left:20px;
    color:#bbb;
    width:140px;
    z-index:100;
    border-width:0px;border-color:#f00; border-style:solid;
}

div.linksright
{
	position:absolute;top:20px;
    left:20px;
    color:#bbb;
    width:150px;
    border-width:0px;border-color:#f00; border-style:solid;
    z-index:100;
}


div.slides{
    position:absolute;top:10px;left:290px;
    width:444px;
    border-width:0px;border-color:#00f; border-style:solid;
}
#video, div.video {
	position:absolute;
	top:20px;
    left:210px;
	width:512px;
	height:404px;
	overflow:hidden;
}

div.text{
	position:absolute;
	top:433px;
	left:210px;
	width:512;
   height:194px;
	overflow:auto;
	text-align:left;
	text-align:justify;
}
div.textwrap{
    margin-right:10px;
}
.text img {
	margin: 0px;
    padding: 0px;
	/*width:19%;*/
}

.text .image100{
	width:100%;
}
.text p {
    /*padding-right: 10px;*/

}




div.rahmenweiss{
    background-color: white;
    position:absolute;
    margin:0px;padding:0px;
    top:0px; left:0px;
    width:1024px;height:647px;
    z-index:0;
}

/**************************************************************************************
    now come diverse dummies for the SELECTION
***************************************************************************************/
::selection {
    background: #ffbb00; /* Safari */
    }
::-moz-selection {
    background: #ffbb00; /* Firefox */
}

:focus {
    outline: 0;
}
/**************************************************************************************

***************************************************************************************/
div.textboxtop{
    position:absolute;
    left:300px;
    top:26px;      /* oben top:26px; */
    width:400px;    /* 400px auto */
    /*height:0px;    */    /* whatever is covered by height will not link */
    height:auto;
    margin:0px;
    padding:10px;
    background-position: center;
    text-align: center;

    filter:alpha(opacity=44);
    -moz-opacity:0.44;
    -khtml-opacity: 0.44;
    opacity: 0.44;

    /*background-color:black;*/
    color:white;    /* text will merge with background */
    z-index:222;
}

div.textbox{
    position:absolute;
    left:290px;     /* left:300px;      */
    top:500px;      /* oben top:26px; */
    width:400px;    /* 400px auto */
    /*height:0px;    */    /* whatever is covered by height will not link */
    height:auto;
    margin:0px;
    padding:10px;
    background-position: center;
    text-align: center;

    filter:alpha(opacity=44);
    -moz-opacity:0.44;
    -khtml-opacity: 0.44;
    opacity: 0.44;

    /*background-color:black;*/
    color:white;    /* text will merge with background */
    z-index:222;
}

div.darkbox{
    position:absolute;
    left:290px;        /* left:300px;      */
    top:500px;          /* oben top:26px; */
    width:400px;    /* 400px */
    /*height:0px;    */    /* whatever is covered by height will not link */
    height:auto;
    margin:0px;
    padding:10px;
    background-position: center;
    text-align: center;

    filter:alpha(opacity=6);
    -moz-opacity:0.06;
    -khtml-opacity: 0.06;
    opacity: 0.06;

    background-color:black;
    color:black;    /* text will merge with background */
    z-index:200;
}

div.textboxbottom{  /* to enclose normal textbox and position it down */
    position:absolute;
    top:0px;  /* top:525px; versatz */
    z-index:100;
}
div.textboxtopoffset{  /* to enclose normal textbox and position it down */
    position:absolute;
    top:-474px;  /* top:525px; versatz */
    z-index:100;
}

div.textbox512 {
    position:absolute;
    left:256px;
    top:26px;
    width:512px;
    /*height:0px;    */    /* whatever is covered by height will not link */
    height:auto;        /* whatever is covered by height will not link */
    z-index:1;
    background-position: center;
    text-align: center;


    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;

}

/* this puts  nauts flash on page */
div.shivaflash {
    position:absolute;
    left:300px;
    top:26px;
    width:400px;
    height:0px;        /* whatever is covered by height will not link */
    z-index:1;
    background-position: center;
    text-align: center;
}

div.shivawhisperflash {
    position:absolute;
    left:0px;
    top:26px;
    width:800px;
    height:0px;        /* whatever is covered by height will not link */
    z-index:1;
    background-position: center;
    text-align: center;


}

div.content_swap{
    position:absolute;
    left:300px;
    top:380px;    /* 378px */
    width:auto;
    height:auto;

    /*text-align:center;*/ /* messes up IE */


    filter:alpha(opacity=77);
    -moz-opacity:0.77;
    -khtml-opacity: 0.77;
    opacity: 0.77;

    /*background-color:red;*/
    z-index:777;
}

div.content_swap_contamination{
    position:absolute;
    left:44px;
    top:510px;    /* 378px */
    width:auto;
    height:auto;

    /*text-align:center;*/ /* messes up IE */


    filter:alpha(opacity=77);
    -moz-opacity:0.77;
    -khtml-opacity: 0.77;
    opacity: 0.77;

    /*background-color:red;*/
    z-index:777;

    font-size: 24px;
}


/*  hidden  visible */

div.pdf{
    position:absolute;
    left:898px;
    top:26px;
    visibility:hidden;
}

div.noco2_untenmitte{
    position:absolute;
    left:410px;
    top:567px;
    z-index:600;
    visibility:visible;


    filter:alpha(opacity=22);
    -moz-opacity:0.22;
    -khtml-opacity: 0.22;
    opacity: 0.2;
}
div.noco2{
    position:absolute;
    left:831px;
    top:567px;
    z-index:600;
    visibility:visible;


    filter:alpha(opacity=11);
    -moz-opacity:0.11;
    -khtml-opacity: 0.11;
    opacity: 0.11;
}

/**************************************************************************************
    now come diverse dummies for images
*****************************************************************************************/
/*
    the following must be id's so we can switch them on/off by javascript
*/
#Div01, #Div01b,
#Div02, #Div02b,
#Div03, #Div03b,
#Div04, #Div04b,
#Div05, #Div05b,
#Div06, #Div06b,
#Div07, #Div07b,
#Div08, #Div08b,
#Div09, #Div09b,
#Div10, #Div10b,
#Div11, #Div11b,
#Div12, #Div12b,
#Div13, #Div13b,
#Div14, #Div14b,
#Div15, #Div15b,
#Div16, #Div16b,
#Div17, #Div17b,
#Div18, #Div18b,
#Div19, #Div19b,
#Div20, #Div20b

{
    visibility:hidden;
}
#DivVersion
{
    visibility:visible;
}

.flashsound
{
    position:absolute;
    left:11px;
    top:11px;
    width:0px;
    height:0px;
    visibility:visible;
}
/*
    multiple verschachtelte transparenzen funktionieren nicht!!!

    WIE MACHE ICH VERSCHACHTELTE KLASSEN?
*/
.trans50 {
    filter:alpha(opacity=50);
    -moz-opacity:0.50;
    -khtml-opacity: 0.50;
    opacity: 0.50;
}
.trans75 {
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
}
.trans90{
    color:red;
    filter:alpha(opacity=90);
    -moz-opacity:0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;
}
.solid{
    color:green;
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
}
/**************************************************************************************
    now come diverse dummies for images
***************************************************************************************/
p.red::selection {
    background: #ffb7b7;
}
p.red::-moz-selection {
    background: #ffb7b7;
}
p.blue::selection {
    background: #a8d1ff;
}
p.blue::-moz-selection {
    background: #a8d1ff;
}
p.yellow::selection {
    background: #fff2a8;
}
p.yellow::-moz-selection {
    background: #fff2a8;
}

/**************************************************************************************
    soon 2 doom
***************************************************************************************/
div.apDiv1 {
    position:absolute;
    left:300px;
    top:26px;
    width:400px;
    height:0px;        /* whatever is covered by height will not link */
    z-index:1;
    background-position: center;
    text-align: center;

    background-color:black;


    filter:alpha(opacity=90);
    -moz-opacity:0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;

    background-color:black;
}


/* position big image */
div.apDiv1b {
    position:absolute;
    left:180px;
    top:0px;
    width:0px;
    height:0px;        /* whatever is covered by height will not link */
    z-index:2;
    background-position: center;
    text-align: center;


    filter:alpha(opacity=92);
    -moz-opacity:0.92;
    -khtml-opacity: 0.92;
    opacity: 0.92;
}

.apDiv1XXX {
    position:absolute;
    left:300px;
    top:44px;
    width:400px;
    height:195px;
    z-index:1;
    background-position: center;
    text-align: center;
}