<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>{title} {versionXL} {my_peer_id}</title>
 <meta http-equiv="content-type" content="text/html; charset={charset}">
 <link rel="shortcut icon" href="theme_resource/favicon.ico" type="image/x-icon" />
 <meta http-equiv="refresh" content="90;">
 <style type="text/css">
## the styles are not finished yet. I need a hand from you or more time for learning the css stuff and behavior
## on different systems. Screenshots are very helpful by reporting any trouble at your side!

 .titlebig { font-weight: bold;
             color: #777777; 
             font-size: 24pt;
           }
 .body body, td { font-family: tahoma, arial, helvetica, sans-serif; }
 
 .bed { width: 100%;
        height: 100px;
        border: 2px ;
        background: black;
        color: white; 
        font-size: 8pt; 
        overflow: auto; 
      }

 .pbar { border-width: 1px;
	 border-style: solid;
	 border-color: #dee #d88 #555 #cbf;
	 margin: 0;
	 padding: 0;
	 spacing: 0; 
	}

 .pbar div{height: 1em;}
 .topbar { overflow: auto;
           font-family: monospace; 
           text-align: left; 
           margin:0px; 
           padding:0px ;
           letter-spacing:-0.5em; 
           font-size: 12pt; 
           font-weight: 700 ; 
           background-color: white; 
           color: blue; 
           line-height:10pt; 
           font-stretch:ultra-condensed; 
           text-indent: -0.25em;
         }
## REM: "width: 200pt;" add this to "topbar" when elements running out your window size  

 .pepbar { overflow: auto; 
           font-family: monospace; 
           text-align: left; 
           margin:0px; 
           padding:0px ;
           letter-spacing:-0.5em; 
           font-size: 12pt; 
           font-weight: 700 ; 
           background-color: white; 
           color: blue; 
           line-height:10pt; 
           font-stretch:ultra-condensed; 
           text-indent: -0.25em;
         }
## REM: "width: 400pt;" add this to "pepbar" when elements running out your window size  

 .toname{ overflow: auto; 
          background: #FFFFFF; 
          color: blue; 
          text-align: left;
        }
 .totoggle{background: #FFFFFF;}

 .themes { background: #FFFFFF; 
           font-size: 8pt;
         }

 .themes a:hover { color: blue; 
                   text-decoration:none ;
                 }
 .themes a { color:#000000; 
             text-decoration:none ;
           }

 .tlayer {}

 .totab { background: #AABBDD; 
          width: 100%;  
          padding: 0px;
          border: 0px; 
          table-layout: auto;
          white-space: nowrap; 
        }

 .totab th { background: #AAAACC; 
             font-size: 10pt; 
             text-align: center; 
             white-space: nowrap; 
             overflow: auto; 
           }
 .totab tbody td{ background: #AAAADD; 
                  padding: 0px;
                  border: 0px;
                  font-weight: bold; 
                  font-size: 8pt; 
                  text-align: center; 
                  white-space: nowrap; 
                  overflow: auto;
                }

 .totab tbody td div{overflow: auto; }

 .tul { background: #CCDACC; }
 .tdl { background: #CCCCDC; }
 

 .petab { background: #DFDFDF; 
          width: 100%; 
          padding: 0px;
          border: 0px; 
          table-layout: auto;
          white-space: nowrap; 
        }

 .petab th { background: #AAAACC; 
             font-size: 10pt; 
             text-align: center; 
             white-space: nowrap;  
           }

 .petab tbody td{ background: #CCCCEE;
                  padding: 0px;
                  border: 0px; 
                  font-size: 8pt; 
                  text-align: center; 
                  white-space: nowrap;
                }


 .chtrue {color: #AA0000;}
 .chfalse  {color: green;}
 .intrue {color: blue;}
 .infalse  {color: #AA0000;}

 .brtrue { color: #AA0000;
           text-decoration:none ;
         } 

 .brfalse { color: black;
            text-decoration:none ;
          }

 .brtrue a{ color: #AA0000;
            text-decoration:none ;
          } 
 .brfalse a{ color: black;
             text-decoration:none ;
           }

 .brtrue a:hover{ color: yellow;
                  text-decoration:none ;
                } 
 .brfalse a:hover{ color: yellow;
                   text-decoration:none ;
                 }

</style>
</head>
<body bgcolor="#EFEFEF" >
<div class="themes">
<b>Peers</b>
<a href="?themes={user_key_theme_name}&{link_ext_showpeers}&tp=1">toggle</a>
<b>Clients</b>
<a href="?themes={user_key_theme_name}&clients=all&c=0">show</a>
<b>Themes</b>
<a href="?themes=jama&{link_ext_showpeers}">jama</a>
<a href="?themes=minimalist&{link_ext_showpeers}">minimalist</a>
<a href="?themes=guru&{link_ext_showpeers}">guru</a>
<a style="text-decoration:underline ;" href="?themes={user_key_theme_name}&{link_ext_showpeers}">{user_key_theme_name}</a>
<a href="?themes=seedler&{link_ext_showpeers}">seedler</a>
<a href="?themes=drakensang&{link_ext_showpeers}">drakensang</a>
<a href="?{link_ext_showpeers}">classic</a>
</div>
<center>	
  	<div class="tlayer">{user_key_first_userkey_example}</div>
	<table width="100%" border="2" ><tr>
		<td ><p><div class="bed">{messages}</div></p>
		</td></tr>
	</table>
</center>

</body>
</html>

