@charset "utf-8";

/* >>>>>>>>>>>>>> Colors <<<<<<<<<<<<<<<<<<<
body backgound: (bourdon to) dark pink
menu a:hover: dark pink
content text, a.form: black
content background, menu text (link), header&footer text: white
em: bold
strong: bourdon bold
link, .gal:hover, .gal:hover img border:  dark pink
link hover: light pink on dark pink
h1, h2: center
h3: none
h4: bold bourdon
imp: black on light pink
imp a: bourdon
imp border, quote: dark grey
popup background:
popup text and border: 

light pink  #FFCCFF  255,204,255
bourdon  #660033  96,0,51
dark pink  #990066  153,0,96
black  #000000  255,255,255
light grey  #C0C0C0  192,192,192
dark grey  #4B4B4B  75,75,75
*/


/* >>>>>>>>  main structure <<<<<<<<<<<<<<< */

body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
font-size: 100.01%;
font-family: Helvetica, Arial, sans-serif;
background: #990066  url(pics/bg.png) repeat-x; 
text-align: center;
line-height: 130%;
}

* html body { /*IE6 hack*/
padding: 40px 0 10px 0; /*Set value to (HeightOfHeaderDiv 0 HeightOfFooterDiv 0)  3/3  */
}

#header, #footer {
position: absolute; 
top: 0; 
left: 0; 
width: 100%;
height: 40px; /*Height of header div  1/3  */
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: #FFFFFF ;
/*background: url(pics/header-texture_bourdon_760x80.jpg) no-repeat top center ; */
}

#footer {
top: auto;
bottom: 0; 
height: 10px; /*Height of bottom frame div 1/3 */
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
color: #FFFFFF;
}

#content {
position: fixed; 
top: 40px; /*Set top value to HeightOfHeaderDiv  2/3  */
left: 0;
right: 0;
bottom: 10px; /*Set bottom value to HeightOfFooterDiv 2/3*/
overflow: auto; 
text-align: left;
margin: auto;
padding: 30px;
width: 700px;
background-color: #FFFFFF;  
color: #000000; 
}

* html #content { /*IE6 hack*/
height: 100%; 
width: 760px; /* width + 2 × padding */
}

/* >>>>>>>>>>> menu <<<<<<<<<<<<<<< */

#menu {
/*position: absolute;
top: 38px; 
left: 0;
right: 0;
width: 760px;
margin: auto;*/
padding: 0;
margin: 0;
font-weight: bold;
list-style-type: none;
font-size: 80%;
}

#menu li {
display: inline;
position: relative;
top: 0.5em;
padding: 0.5em 0;
}

#menu a {
text-decoration: none;
color:  #FFFFFF ;
padding: 0 10px;
font-style: normal;
}

#menu a:hover {
color:  #990066;
background: transparent;
border: none;
}

#menu #current {
position: relative;
top: 1em;
padding: 0.5em;
border-bottom-style: solid;
border-width: 0.5em;
}

/*  >>>>>>>>>> header picture <<<<<<<<<<<<<< */

img.header {
position:absolute; 
left: 5px; 
top: 5px; 
}

h1.header,  h2.header {
color: white; 
text-align: left; 
position:relative; 
z-index:5;
}

/*  >>>>>>>>>> inner formatting <<<<<<<<<<<<<< */

a {
text-decoration: none;
color: #990066; 
font-style: italic;
}

a:hover {
color: #FFCCFF;
background: #990066;
}

a.form,   a.form:hover {
color: #000000;
background: transparent;
}

a.pict,   a.pict:hover {
color: transparent;
background: transparent;
}

h1, h2 {
text-align: center;
}

h1, h2 , h3, h4 {
line-height: 160%;
}

strong  {
color: #660033;
font-weight: bold;
}

em {
font-style: normal;
font-weight: bold;
}

abbr, acronym {
border-bottom: 1px dotted; 
cursor: help;
}

ul {
list-style: url(pics/bullet.png);
}

.center {
text-align: center;
}

.right{
text-align: right;
}

p.quote {
font-size: 108%; 
font-style: italic;
color: #4B4B4B;
}

.bottom {
bottom: 0;
}

.block {
display: block;
}

.imp {
background: #FFCCFF;
padding: 1px 20px 1px 20px;
color: #000000;
border: solid #4B4B4B;
border-width: 1px 3px 4px 1px ;
}

.imp a {
color: #660033;
}

.imp a:hover {
color: #FFCCFF;
background: #990066;
}

div.col_left {
width: 48%; 
float: left;
}

div.col_right {
margin-left: 52%; /* col_left width + content paddig */
padding: 0;
}

div.center {
margin: 0px auto;
width: 400px;
}

img {
border: none;
}

img.right {
float: right;
border-left: 20px solid transparent;
}

img.left {
float: left;
border-right: 20px solid transparent;
}

img.top {
vertical-align: text-top;
}

/* >>>>>>>>>>>>> image gallery <<<<<<<<<<<<<<<<<< */

/*
.gal img.small {
height: 100px;
border: none;
}

* html .gal img.small { /*IE6 hack
height: 100px; 
}

.gal  img,  .gal:visited img {
border: none;
}

  */

.gal:hover {
color: #990066;
background: transparent;
border: none; 
}

.gal:hover img {
border: 2px solid #990066;
}
  
.gal span { /* large */
visibility: hidden;
position: absolute;
left: -1000px;
}

.gal:hover   span {
left: -70px; /* -padding */
top: -3px; /* avoiding space between link and hover pic. */
position: relative;
visibility: visible;
width: 720px;
z-index: 5;
}