body {background-image:url(pics/Webbackblack.jpg); color:#FFFFFF}
body.ws {background-image:url(pics/Webback2a.png); color:#ffff99}

a:link { color:#FF0000; }
a:visited { color:#FF00FF; }
a:active { color:#FFFFFF; }

a.navigation:link{color:#FFCC00;font-weight:bold}
a.navigation:visited {color:#FFCC00;font-weight:bold}
a.navigation:hover {color:#9F0000;background-color:#BFBFBF;font-weight:bold}

a.home:link { color:#FF0000; }
a.home:visited { color:#9F0000; }
a.home:active { color:#FFFFFF; }
a.home:hover {color:#FFFF00; }


input{
    
    background-color:#FFCC00
}


/*------------------Style für Workshopangebote -----------*/

#workshp
{
    position:relative;
    background-color:#fefaba;
    opacity: 0.80;
    
    filter: alpha(opacity:80);
	KHTMLOpacity: 0.80;
	MozOpacity: 0.80;
    
    margin:4%;
    margin-right:4%;
    width:90%;
    padding: 1%;
    font-size:1.2em;
    font-weight:bold;
    color:#300080;
    
}

/*------------------Style für Methodenbeschreibungen und psychotherapeutische Themen -----------*/

#alternate
{
    background-image:url(pics/tbleback.png);
   /* border-style: inset;*/
    /*border-color: white;*/
    margin:4%;
    margin-right:4%;
    width:90%;
    padding: 1%;
    font-size:1.2em;
    color:#300080;
}
.alternate
{
    
   font-size:1.2em;
   font-weight:bold; 
   color:#000000;
}

.highlight1 /**/
{
    
    color:#ffdf00;
}

.highlight2
{
    
    color:#ff1f00;
}

.highlight3
{
    
    color:#00c0ff;
}

p.zit1
{
    text-align:left;
    margin-left:50px;
    margin-right:50px;
    font-size:0.6em;
    font-style:italic;
    color:#d3d3d3;
}

p.zit2
{
    text-align:left;
    margin-left:30px;
    margin-right:30px;
    color:#b3b3b3;
}

p.abs1
{
    text-align:left;
    margin-left:50px;
    margin-right:50px;
    color:#00c0ff;
    
}
p.abs2
{
    text-align:left;
    margin-left:50px;
    margin-right:50px;
    color:#ffdf00;
    
}
ol.abs1
{
    text-align:left;
    margin-left:50px;
    margin-right:50px;
    font-size:1.2em;
    color:#00c0ff;
    
}
ol.zit1
{
    text-align:left;
    margin-left:50px;
    margin-right:50px;
    font-size:0.6em;
    font-style:italic;
    color:#d3d3d3;
    
}

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


/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#ff0000;
	font-weight:bold;
    text-decoration:underline;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display: block;
    position: absolute;
    font-family: Verdana,Geneva,sans-serif;
    font-size:0.7em;
    text-decoration:none;
    top:0px; left:0;
	padding: 12% 0 0 0;
	width:400px;
	color: #000000;
    text-align: center;
	/*filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;*/
}
/*
a.tt:hover span.top{
	display: block;
        width:80%;
	padding: 30px 8px 0;
        background: url(pics/bubble.gif) no-repeat top;
}
*/

a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
        width:95%;
	padding: 0 8px; 
	/*background: url(pics/bubble_filler.gif) repeat bottom;*/
	background-color:#ffffbb;
        border-style: ridge
}

/*
a.tt:hover span.bottom{
	display: block;
        width:80%;
	padding:3px 8px 10px;
	color: #548912;
        background: url(pics/bubble.gif) no-repeat bottom;
}
*/

/*=======================SECTION IMAGEMAP=======================================*/

/* generelle Lage aller Tooltip - Elemente
- das ursprünglich angezeigte Bild, definiert in der html - Datei ist KEIN tooltip - Element !! */

#logo {position:absolute; left:48%; margin:0 0 0 0; width:650px; height:308px; }
#logo ul {padding:0; margin:0; list-style:none; position:absolute; top:0; left:0;}
#logo ul li {position:absolute;}

/* Sprungziele - mittels a href definiert ... */
#logo ul li a {text-decoration:none;} /*tooltip - link style*/
#logo ul li a.mainlogo {display:block; text-indent:-1000000px;/*blendet die Sprungziele der Liste aus */ background: url(../pics/trans.png);} /*background: transparent funktioniert in IExplorer und Opera nicht*/
#logo ul li a.mainlogo:hover, #logo ul li:hover {z-index:500;} /*Bringt die Sprungziele bei mouseover in den Vordergrund*/


/*Lage und Größe der Hot - Spots*/
#logo ul li#prae {width:92px; height:67px; top:218px; left:19px;}
#logo ul li#kind {width:131px; height:106px; top:178px; left:135px;}
#logo ul li#jugend {width:166px; height:188px; top:109px; left:292px;}
#logo ul li#prog {width:158px; height:288px; top:14px; left:466px;}
                

/* Verhalten der speziellen Tooltip - Elemente bei Mouseover*/

#logo ul li#prae a.mainlogo:hover, #logo ul li#prae:hover {background:url(../pics/prae.png);}
#logo ul li#kind a.mainlogo:hover, #logo ul li#kind:hover {background:url(../pics/kind.png);}
#logo ul li#jugend a.mainlogo:hover, #logo ul li#jugend:hover {background:url(../pics/jugend.png);}
#logo ul li#prog a.mainlogo:hover, #logo ul li#prog:hover {background:url(../pics/prog.png);}
 
/*Position (vom oberen Rand der Teilbilder gemessen) und Dimensionen der Tooltip - Boxen*/

#prae .tltips {left:-300px; top:30px; width:600px;} 
#kind .tltips {left:-415px; top:70px; width:600px;}
#jugend .tltips {left:-550px; top:160px; width:600px;}
#prog .tltips {left:-550px; top:250px; width:600px;}

/* Dimensionen des tooltip Box - Hintergrundes */
.tltips {display:block; position:absolute; height:auto;}

/*Textformatierung der tooltips - Liste*/
.tltips h1,.tltips h2,.tltips h3, .tltips p {margin:0 10px;} /*Abstand des Tooltipstextes vom Boxen - Rand*/ 
.tltips h1 {font-size:2.5em; color:#0000ff; font-family:georgia, "times new roman", serif; border-bottom:1px solid #fff;}
.tltips p {padding-bottom:0.5em; color:#000000; font-size:18px; font-weight:bold; text-align:left;}
.tltips {margin:1em;}
.tltips a:link {color:#0000FF; font-size:1.5em; text-decoration:none}

.tipboxinhalt_prae {display:block; background:url(../pics/Foetus.png)}
.tipboxinhalt_prae a, .tipboxinhalt_prae a:visited {display:block; color:#0000FF; font-weight:bold; font-size:1.5em; text-indent:0; padding:4px;}

.tipboxinhalt_kind {display:block; background:url(../pics/Baby.png) transparent;}
.tipboxinhalt_kind a, .tipboxinhalt_kind a:visited {display:block; color:#0000FF; font-weight:bold; font-size:1.5em; text-indent:0; padding:4px;}

.tipboxinhalt_jugend {display:block; background:url(../pics/Pubertaet.png) transparent;}
.tipboxinhalt_jugend a, .tipboxinhalt_jugend a:visited {display:block; color:#0000FF; font-weight:bold; font-size:1.5em; text-indent:0; padding:4px;}

.tipboxinhalt_prog {display:block; background:url(../pics/Progression.png) transparent;}
.tipboxinhalt_prog a, .tipboxinhalt_prog a:visited {display:block; color:#0000FF; font-weight:bold; font-size:1.5em; text-indent:0; padding:4px;}

#logo ul li a:hover .tltips .tipboxinhalt_prae .tipboxinhalt_kind .tipboxinhalt_jugend .tipboxinhalt_prog a:hover {color:#fff;}
#logo ul li:hover .tltips .tipboxinhalt_prae .tipboxinhalt_kind .tipboxinhalt_jugend .tipboxinhalt_prog a:hover {color:#fff;}



/*====================Sichtbar // Unsichtbar ===========*/

/* macht die Tooltips - Textboxen vorerst unsichtbar */ 
#logo ul li .tltips,
#logo ul li a .tltips
{visibility:hidden;}

/* Macht die Tooltips wieder sichtbar*/

#logo ul li:hover .tltips {visibility:visible;} 
                        
/* =================================END SECTION IMAGEMAP============================ */



/* =================================R O L L O V E R============================ */



a#Backbutton{
position:fixed;top:2% !important;right:1% !important;
width:80px;
height:80px;
display: block; /* Element wird als Block-Element dargestellt */
outline: none; /* unterdrueckt gestrichelten Rahmen */
background: url(pics/Backbutton.png) no-repeat; /* Hintergrundgrafik */
text-decoration:none
}

a#Backbutton:hover {
background: url(pics/Backbutton1.png) no-repeat; /* Hintergrundgrafik */
}

a#Backbutton:active {
background: url(pics/Backbuttonp.png) no-repeat; /* Hintergrundgrafik */
}




a#ghostmick{
position: absolute; bottom: 7%; left: 0%;
width: 870px; /* Breite */
height: 653px; /* Hoehe */
display: block; /* Element wird als Block-Element dargestellt */
outline: none; /* unterdrueckt gestrichelten Rahmen */
background: url(pics/MickPortrait_transparent870png24.png) no-repeat; /* Hintergrundgrafik */
text-decoration:none
}

a#ghostmick:hover {
background: url(pics/MickPortrait_transparent870png24shade.png) no-repeat; /* Hintergrundgrafik */
}

a#workbutton{
position: absolute; top: 4%; right: 1%;
width: 144px; /* Breite */
height: 144px; /* Hoehe */
display: block; /* Element wird als Block-Element dargestellt */
outline: none; /* unterdrueckt gestrichelten Rahmen */
background: url(pics/workbtn.png) no-repeat; /* Hintergrundgrafik */
text-decoration:none
}

a#workbutton:hover {
background: url(pics/workbtn1.png) no-repeat; /* Hintergrundgrafik */
}

a#workbutton:active {
background: url(pics/workbtnp.png) no-repeat; /* Hintergrundgrafik */
}

a#privatebutton{
position: fixed; bottom: 2%; right: 1%;
width: 144px; /* Breite */
height: 144px; /* Hoehe */
display: block; /* Element wird als Block-Element dargestellt */
outline: none; /* unterdrueckt gestrichelten Rahmen */
background: url(pics/Privatebtn.png) no-repeat; /* Hintergrundgrafik */
text-decoration:none
}

a#privatebutton:hover {
background: url(pics/Privatebtn1.png) no-repeat; /* Hintergrundgrafik */
}

a#privatebutton:active {
background: url(pics/Privatebtnp.png) no-repeat; /* Hintergrundgrafik */
}


/* ================================= E N D  R O L L O V E R============================ */