@charset "utf-8";
body
{
	font-family: Bookman Old Style, Times New Roman, Times;
	font-size: 0.8em;
	text-align: justify;
	background-color: #003333;
	color: #669999;
 scrollbar-3dlight-color: yellow;
 scrollbar-arrow-color: red;
 scrollbar-darkshadow-color: yellow;
 scrollbar-face-color: lime;
 scrollbar-highlight-color: yellow;
 scrollbar-shadow-color: #CCCCCC;
 scrollbar-track-color: #004080;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
}

#table 
{
	margin: 2px auto;
	padding: 4px 4px;
	border:1px solid maroon;
	background: #669999;
	color: #FFFFFF;
	max-width: 900px;
}


a:link { 
	font-family:Helvetica, Arial, Verdana;
	font-size: 0.8em;
	font-weight: 700;
	color:#FFFFFF;
	text-decoration:overline;
} 

a:visited { 
	font-family:Helvetica, Arial, Verdana;
	font-size: 0.8em;
	font-weight: bold;
	color:#FFFFFF;
	text-decoration:overline;
} 

a:active { 
	font-family:Helvetica, Arial, Verdana;
	font-size: 0.8emt;
	font-weight: bold;
	color:#FFFFFF;
	text-decoration:overline;
} 

a:hover { 
	font-family:Courier New, Courier, Mono;
	font-size: 1.0em;
	font-weight:800;
	text-decoration:none;
	color:#E8E8E8;
	background-color:#003333;
} 

}
a.greenlink {
	color: #99FF33;	
}
a.redlink {
	color: #FF0033;
}



table
{
	table-border-color-light: #800000;
	table-border-color-dark: #ffff00; 
	table-border-wight: 1px;
}

/* Nach-oben-Link am Ende der Seite */
#pageup {
	clear:both;
	text-align:right;
	margin-bottom:10px;
}

h1, h2, h3, h4, h5, h6, h7
{
	font-family:  Arial, Helvetia;
}

h1
{
	font-family:  Arial, Helvetia;
	font-size: 0.8em;
	font-weight: lighter;
	text-align: justify;
	padding: 5px 5px;
	/*color: #330033;*/
	color: #E8E8E8;
	line-height: 1.5;
}

h2
{
	font-family: Bookman Old Style, Times New Roman, Times, Helvetia;
	font-size: 0.8em;
	text-align: justify;
	color: #000000;
}



h3
{
	font-size: 1.2em;
	margin: 5;
	text-align:right;
	color: #606060;
}

/**   http://www.w3.org/Style/Examples/007/text-shadow   **/
h3.b 
{
text-shadow: 1px 1px white, -1px -1px #444;
}

div.example 
{
border: #603 dotted; 
padding: 0.5em; 
margin: 1em 2em;
}


 div.example6 
 {
 background: #B6B6B6; 
 padding: 1em;
 }
 
  h3.example6a 
  {
  color: #D1D1D1; 
  text-shadow: -1px -1px white, 1px 1px #333;
 letter-spacing: 2px;
}

 
 h3.example6b 
 {
 color: #C8C8C8; 
 text-shadow: 1px 1px white, -1px -1px #444;
letter-spacing: 2p;
}

/**
<div class=example>
<div class=example6>
<h3 class=example6a>I, Augustus (you know who)</h3>
<h3 class=example6b>That's extra, of course</h3>
</div>
</div>

oder einfach nur

 <h3 class=example6b>That's extra, of course</h3>
**/

h4
{
	font-size: 1.0em;
	font-weight: bold;
	text-align: left;
	color: #B6B6B6;
	text-transform:uppercase;
}

h5
{
	font-size: 0.9em;
	font-weight: bold;
	text-align: justify;
	color: #ffffff;
}

h6
{
border: #603 outset; 
	-moz-border-radius-topleft    : 10px;
	-webkit-border-top-left-radius  : 10px;
	-moz-border-radius-bottomright  : 10px;
	-webkit-border-bottom-right-radius: 10px;
padding: 0.5em; 
margin: 1em 2em;
 background: #B6B6B6; 
	width: 360px;
 padding: 1em;
 color: #C8C8C8; 
 text-shadow: 1px 1px white, -1px -1px #444;
	font-size: 1.1em;
	text-align: justify;
letter-spacing: 2p;
}



/**
h6
{
	font-size: 0.7em;
	background-color: #C0C0C0;
	width: 360px;
	text-align: justify;
	color: #007575;
	padding: 30px;
	padding-bottom: 45px;
}
**/


/**   http://www.dynamicdrive.com/style/csslibrary/item/css3_box_shadows_box_shadow_property/   **/
.shadow2
{
box-shadow: 17px 17px 18px #000000;
-webkit-box-shadow: 7px 7px 8px #000000;
-moz-box-shadow: 7px 7px 8px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=17, offY=17, positive=true);
	width:430px; 
	padding:5px; 
	background:navy; 
	border: 1px solid black;
	font-size: 0.8em;
	text-align: justify;
	color: #e8e8e8;
border:2px solid navy;
padding:0.5em;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-opera-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
}
/**
<div class="shadow2">  ... </div>
**/

/**   START runde Ecken  **/
.roundedCorners {
  font: 14px/20px italic Times, serif;
	text-align: justify;
  padding-left: 30px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 18px;
  background-color: #56686D;
  margin: 35px;
	border: 2px solid #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
.roundedTopCorners {
	border: 2px solid #000;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
}
 
.roundedBottomCorners {
	border: 2px solid #000;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}
 
.roundedBottomLeftCorners {
	border: 2px solid #000;
	-moz-border-radius-bottomleft  : 10px;
	-webkit-border-bottom-left-radius: 10px;
}
 
.roundedBottomRightCorners {
	border: 2px solid #000;
	-moz-border-radius-bottomright  : 10px;
	-webkit-border-bottom-right-radius: 10px;
}
 
.roundedTopLeftCorners {
	border: 2px solid #000;
	-moz-border-radius-topleft    : 10px;
	-webkit-border-top-left-radius  : 10px;
}
 
.roundedTopRightCorners {
	border: 2px solid #000;
	-moz-border-radius-topright   : 10px;
	-webkit-border-top-right-radius : 10px;
}
/**  <div class="roundedCorners">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	</div>  **/
/**^END runde Ecken  **/


/* Erster Buchstabe des Absatz gross*/
first-word 
{ 
font-size:200%; 
color:#FFFF00; 
}
/*
  <p class="first-word">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/

/* weisse schrift */
p.weiss 
{
	font-family: Bookman Old Style, Times New Roman, Times;
	font-size: 0.8em;
	text-align: justify;
	color: #FFFFFF;
}

/*  <p class="weiss">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/

/* weisse schrift zentriert */
p.weisscenter
{
	font-family: Bookman Old Style, Times New Roman, Times;
	font-size: 0.8em;
	text-align: center;
	color: #FFFFFF;
}

/*  <p class="weisscenter">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/

/* weisse schrift zentriert */
p.weisskomment
{
	font-family: Bookman Old Style, Times New Roman, Times;
	font-size: 0.7em;
	text-align: center;
	color: #FFFFFF;
	max-width:110px;
}

/*  <p class="weisskomment">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/

p.gold 
{
	font-family: Bookman Old Style, Times New Roman, Times;
	font-size: 0.9em;
	text-align: justify;
	color: #FFCC66;
	text-indent:20px; /**  Die Eigenschaft text-indent rückt die erste Zeile eines Blockelements ein. Per Definition werden positive Werte nach rechts, negative nach links eingerückt.  **/
	margin-left: 8px;   /**  Rückt den Text die  angegebenen Pixel vom linken Rand weg.  **/
	margin-right: 8px;    /**  Rückt den Text die  angegebenen  Pixel vom rechten  Rand weg.  **/
}

/*  <p class="gold">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/



u {
 background-image: url(images/unterstrichen.png);
 line-height: 1.5;
 background-position: 100% 100%;
 background-repeat: repeat-x;
 padding-bottom: 3px;
 text-decoration: none;
 white-space: nowrap;
}

PRE {
    background: #E8E8E8;
	margin-left: 55px;
	width:400px;
	border-color: #003333;
	border: 2px solid ;
	padding: 5px;
	color: #000000;
}

/*  <pre>
&lt;
  Den Code nicht mit klammern, sondern mit &lt; und   &gt; angeben
  &gt;
</pre>
*/

/* Quote block */
p.quote 
{
	background: #ebebeb none 6px 8px no-repeat;
	border: 1px solid #dbdbdb;
	font-size: 0.8em;
	color: blue;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 5px;
}

/*  <p class="quote">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/


/* Copy */
p.copy 
{
	position: relative;
	left: 60%;
	width: 140px;
	padding: 3px;
	background-color: #003333;
	border: 1px solid #d8d8d8;
	font-size: 0.7em;
	color: #E8E8E8;
}

/*  <p class="copy">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/
ol
{
	list-style:decimal outside;
}

/* Die Titelzeile */
#title {
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #FCEA6D;
	text-transform:uppercase;
	text-shadow: 9px 6px 2px #000;
}


p.overline
{
	font-size: 1.0em;
	text-decoration:overline;
}

p.underline
{
	font-size: 1.0em;
	text-decoration:underline;
}

p.line-through
{
	font-size: 1.0em;
	text-decoration:line-through;
}

/*
<p class="underline">Ein Schrifttest unterstrichen</p>
*/

p.right
{
	font-size: 1.0em;
	margin: 5;
	text-align: justify;
	color: #FFFF00;
	padding: 130px;
	padding-bottom: 145px;
	border: 1px;
	line-height: 1.5em;
}

p.note {
	position: relative;
	left: 25%;
	width: 370px;
	padding: 20px;
	padding-bottom: 25px;
	border: 10px solid #008000;
	line-height: 1.5em;
	color: black;
	font-size: 0.9em;
	font-weight: bold;
	text-align: justify;
	background-color: #eeeeee
}

p.notebild {
	position: relative;
	left: 60%;
	width: 140px;
	padding: 30px;
	padding-bottom: 45px;
	border: 1px solid #008000;
	line-height: 1.5em;
	color: black;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	background-color: #FFFF99
}

/*  <p class="note">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...
</p>
*/


/* Copy */
p.notecopy 
{
	position: relative;
	left: 60%;
	width: 150px;
	padding: 3px;
	background-color: #003333;
	border: 1px solid #d8d8d8;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-size: 0.7em;
	color: #E8E8E8;
}

/**
p.notecopy
 {
	position: relative;
	left: 370px;
	width: 150px;
	padding: 10px;
	padding-bottom: 5px;
	border: 1px solid red;
	line-height: 1.5em;
	font-size: 0.7em;
	color: #ffffff;
	font-weight: underline;
	text-align: right;
	background-color: #000080
}
**/

/*  
	 <p class="notecopy">
© by Chainat.ch
	 </p>
*/

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

li
 {
	font-size: 0.8em;
	color: #800000;
	text-align: justify;
	line-height: 1.8;
	margin: 15px 40px 15px 40px; 
	list-style-image: url(../images/xext.gif);
}

li.innen {
   float: left;
   width: 250px;
   font-weight: normal;
   margin: 0 20px 10px 0; 
}
      
li.aussen {
   float: left;
   width: 250px; 
   padding: 0;
   margin: 0 0 10px 0;
}

li.clr {
	clear: left;
	width: 190px;
	height: 1px; 
	margin: 0;
	color: #008000;
	font-weight: bold;
}

li.clr {
	display: inline;
	margin: 0;
	padding: 0;
	width: 190px;
	color: #008000;
	font-weight: bold;
 }

br.clr {
	clear: left;
	width: 190px;
	color: #800000;
	font-size:1px;
	margin: 0;
	padding: 0;
	overflow:hidden;
 }

   
.td {
	margin: 5px auto;
	padding: 14px 14px;
	border:1px solid #800080;
	background-color: #FFA34F;
	width:630px;
}

/*  http://css-tricks.com/examples/Blockquotes/ */

blockquote.style1 {
	font: 0.8em;
	font-family:  Times;
	color: blue;	
	font-weight: italic;
	text-align: justify;
	padding: 12px;
	background-color: #faebbc;
	position: relative;
	left: 60px;
	width: 470px;
	border-top: 1px solid #e1cc89;
	border-bottom: 1px solid #e1cc89;
	margin: 5px;
	background-image: url(../tests/css/openquote1.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: 23px;
}
blockquote.style1 span {
    display: block;
    background-image: url(../tests/css/closequote1.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
   }
   
blockquote.style2 {
	font: 0.8em;
	font-family:  Times;
	color: #E8E8E8;	
	font-weight: italic;
	text-align: justify;
	position: relative;
	left: 60px;
	width: 400px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	padding-left: 6px;
	border-left: 3px solid #ccc;
} 

blockquote.style3 {
  font: 14px/20px italic Times, serif;
	text-align: justify;
  padding-left: 30px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-right: 18px;
  background-color: #56686D;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 35px;
} 

blockquote.style4 {
  font: 12px/18px normal Courier New, sans-serif;
	text-align: justify;
  padding-left: 70px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #000;
  color: white;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 5px;
  background-image: url(../tests/css/openquote5.gif);
  background-position: middle left;
  background-repeat: no-repeat;
  text-indent: 43px;
  }
  
blockquote.style4 div {
    padding-right: 50px;
    display: block;
    background-image: url(../tests/css/closequote5.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
} 

/* Tooltip

<a class="tooltip" href="#">Hilfe<span><b>Hilfe</b> <br /> Und hier steht die Erklärung zur Hilfe drin. </span></a>

*/

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: normal;
border-bottom:0px dotted #4dbcf3;
cursor: help;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 0px;
left: 50px;
width: 250px;
z-index: 100;
color: #FFFF00;
border: 2px solid;
border-color: #800080 #800080 #800080 #800080;
border-left: 8px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #000080;
font-family: Verdana, Arial, Helvetica, Sans-serif;
	font-size: 0.9em;
	text-align: justify;
}

/*  lightbox2.04  */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.chainat.ch/js/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.chainat.ch/js/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #CCFFFF; margin: 0 auto; line-height: 2.0em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666;  }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000080; }



#tickertape{
position:relative;
layer-background-color:#0FF30A;
width:550px;
height:20px;
}

#subtickertape{
background-color:#0FF30A;
position:left;
border: 1px solid #003333;
width:550px;
height:20px;
color:#E8E8E8;
padding-left:20px;
text-decoration:cursive;

}

.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color:#800080;
}

.subtickertapefont a{
color:#E8E8E8;
text-decoration:cursive;
}

/** Dictionary **/

/* CSS Document */

body,html{
padding: 0;
margin: 0;
background-color: #003333;
}

a{
color:#000000;
text-decoration:none;
font-weight:bold;
}

a:HOVER{
text-decoration:underline;

}

div.wrapper{
margin: 0 auto;
margin-top:5px;
border:solid;
width: 633px;
background-color:#669999;
}

div.header{
width: 100%;
height:100px;
background-color:#11CCCC;
border-bottom:solid;
border-width:1px;
}

h2.headertxt{
font-size:25px;
padding-top: 20px;
padding-left: 20px;
margin-top:0px;

}

table.words{
width:100%;
padding-left: 5px;
padding-bottom: 5px;
}

tr.odd{
background-color:#BDD2D2;
}

tr.hover{
background-color:#03e931;
}

div.loading{
margin-top: 20px;
margin-left: 20px;
}

a.navigation{

}

span.navigation{

}

span.hilite{
color:#000;
background-color:#FF7575
}