body {
margin: 0; /* sets all to 0 */
margin-top: 0px;
padding: 0; /* think Opera sets padding on body */

} 



/*Elemente, die keine Boxen sind*/
/*Überschriften*/
h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;

}
h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	padding-top: 0px;
	padding-bottom: 0px;
}

h3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-style: italic; 
	font-weight:normal;
	padding-top: 0px;
	padding-bottom: 0px;
}

h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
}


/*Links*/
a:link{
  color:#000099;
}

a:visited{
  color:#7B82B0;
}

a:hover{
  color:#f00;
}

a:active{
  color:#F9A20E;
}


/*Tabellen*/
td.padded-top {
  padding-top:15px;
}


td.height100pc {
  height:100%
}


/*Trennlinien*/
hr.orangeline-lefttoright{
  position:absolute;
  left:0%;
  top:68px;
  color:orange;
  height:1px;
  width: 100%;
  border-top: 0px; /*ansonsten wird die Linie 2 px dick*/
}  


/*Listen*/
ul {
	/* list-style-type: square;*/
	list-style-image: url(http://www.hantrainerpro.de/images/htpBullet.png);
	/*list-style-position: inside;*/
	/* color:orange; */
}



/*Schriftarten*/

.htpheadline {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:bold;
}
.htpnormal {
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:normal;
}
.htpsmall {
  font-size:10px;
  font-family:Arial, Helvetica, sans-serif;
}
.htplist {
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:normal;
}
.htpsecure {
  color:#006633;
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
}
.minorText {
  font-family:Arial, Helvetica, sans-serif;
  color:#000066;
  font-size:smaller; 
}
.principalTextBold {
  font-family:Arial, Helvetica, sans-serif;
  color:#000066;
  font-size:12pt; font-weight: bold;
}
.principalText {
  font-family:Arial, Helvetica, sans-serif;
  color:#000066;
  font-size:12pt;
  font-weight:normal; 
}
.redhot {
  font-family:Arial, Helvetica, sans-serif;
  color:red;
  font-size:10pt;
  font-weight:bold; 
}

.redtext{
  color: #FF0000;
}



/*Boxen und strukturiedende Elemente*/


.clearLeft {
  clear:left;
}

.frame_main{
  padding:15px;
  width:784px;
  height:540px;
  background-color:transparent;
  background-image:url(images/rahmen1.png);
  background-repeat:no-repeat;
  border-width:0px;
  border-style:solid;
  float:left;
  background-color:#F5F8CC;
  overflow:auto; 
  font-family:Arial, Helvetica, sans-serif;  
}

.center-page-container{
  position:absolute;
  left:50%;
  top:0px;
  width:970px;
  height: 100%;
  margin-left:-485px;
  background-color:grey;
  /* vertikale Zentrierung ist nicht möglich, weil dann die Position der Linien aus prozentualen und absoluten Werten berechnet werden müsste. */
}



/*top navigation language menu*/
.top_nav
{
  position:absolute;
  top:110px;
  right:0px;
  width:150px;
  border:0px;
  background-color:#FFFFFF;
  margin-left:700px; /*force top navigation to maintain minimum distance to the left side of the screen. For some strange reason, the px value does not count here*/
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}

.top_nav_shop
{
  position:relative;
  top:20px;
  right:0px;
  width:150px;
  border:0px;
  background-color:#FFFFFF;
  margin-left:700px; /*force top navigation to maintain minimum distance to the left side of the screen. For some strange reason, the px value does not count here*/
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}


.frame_nav
{
  width:274px;
  height:380px;
  padding:0px;
  background-color:transparent;
  background-image:url(images/chinesisch_nav.png);
  border-width:0px;
  border-style:solid;
  float:left;

}



#menu{
  padding:0px;
  margin:0px;
  list-style:none;
  width:100%;
  overflow:hidden;
}
#menu li{
  float:left;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
  color:#fff;
  padding:0px 2px 0px 2px; /* indent between menu items */
}
#menu li a{
  float:left;
  display:block;
  color:#F9A20E;
  background:url(http://www.hantrainerpro.de/images/bgr_menu_a.gif) repeat-x;
  text-decoration:none;
}
#menu li a .menu_left{
  float:left;
  display:block;
  background:url(http://www.hantrainerpro.de/images/bgr_menu_left.gif) no-repeat;
}
#menu li a .menu_right{
  float:left;
  display:block;
  cursor:pointer; /* for IE6 */
  text-align:center;
  padding:5px 25px 0 15px; 
  height:25px; /*wichtig für Kompatibilität zum ie ( zu niedrig --> abgeschnitten)*/
  background:url(http://www.hantrainerpro.de/images/bgr_menu_right.gif) no-repeat right top;
}
#menu li a:hover{
  /* font-weight: bold;*/ /*kann man, muss man aber nicht */
  background:url(http://www.hantrainerpro.de/images/bgr_menu_a_hover.gif) repeat-x;
	
}
#menu li a:hover .menu_left{
  background:url(http://www.hantrainerpro.de/images/bgr_menu_left_hover.gif) no-repeat;
}

#menu li a:hover .menu_right{
  background:url(http://www.hantrainerpro.de/images/bgr_menu_right_hover.gif) no-repeat right top;
}


.frame_nav_main{
  padding-top:0px;
  margin-top:7px;
  margin-bottom:0px;
  margin-left:63px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}


.frame_nav_features{
  margin-top:7px;
  margin-bottom:0px;
  margin-left:43px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}

.frame_nav_download{
  margin-top:14px;
  margin-bottom:0px;
  margin-left:14px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}

.frame_nav_vollversion{
  margin-top:4px;
  margin-bottom:0px;
  margin-left:44px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/

}

.frame_nav_links{
  margin-top:18px;
  margin-bottom:0px;
  margin-left:19px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}

.frame_nav_team{
  margin-top:19px;
  margin-bottom:0px;
  margin-left:67px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}

.frame_nav_kontakt{
  margin-top:2px;
  margin-bottom:0px;
  margin-left:0px;
  clear: both; /* float-Kontrolle: verhindern, dass 2 Boxen auf dieselbe Ebene rutschen*/
}


.frame_structure{ 
  padding:0px;
  width:100%;
  height: 100%;
  background-color:#ffffff;
  background-image:url(images/chinesisch_2xorange.png);
  background-repeat:repeat-y;
  background-position: left;
  border-width:0px;
  border-style:solid;
  float:left;
}

.height173px {
  height:173px;
}

.width545px {
  width:545px;
}


.frame_outermain{
  padding:15px;
  width:515px;
  height:343px;
  background-color:none;
  background-image:url(images/rahmen1.png);
  background-repeat:no-repeat;
  border-width:0px;
  border-style:solid;
  float:left;
}

.frame_innermain{
  padding:0px;
  font-family:Arial, Helvetica, sans-serif;
  position: relative; /*erforderlich, damit die position: absolute-Ausrichtung der darin befindlichen Elemente funktioniert*/
  font-size:13px;
  width:515px;
  height:343px;
  background-color:none;
  border-width:0px;
  border-style:solid;
  overflow:auto;   
}


.frame_sidepics{
  width:151px;
  height:373px;
  padding:0px;
  background-color:transparent;
  background-image:url(images/rahmen2.png);
  background-repeat:no-repeat;
  border-width:0px;
  border-style:solid;
  float:left;
}

.frame_sidepic_top{
  width:151px;
  margin-top:45px;
  height:85px;
  padding:0px;
  background-color:transparent;
  border-width:0px;
  border-style:solid;
}

.frame_sidepic_middle_bottom{
  width:151px;
  margin-top:20px;
  height:85px;
  padding:0px;
  background-color:transparent;
  border-width:0px;
  border-style:solid;
}


.frame_footer_placeholder{
  width:274px;
  height:30px;
  margin-top:0px;
  background-color:transparent;
  float:left;
}

.frame_footer{
  width:680px;
  height:30px;
  margin-top:0px;
  padding-top:0px;
  background-color:transparent;
  text-align: center;
  border-width:0px;
  border-style:solid;
  overflow:auto;
}


.frame_scrolledcontent{
  width:98%;
  background-color:transparent;
  padding-right:2%; /*Abstand zum rechten Scrollbalken*/
}


/* Elemente, die immer gleich weit vom unteren Fensterrand entfernt sein sollen*/
/* Geteilte Fußzeile */
.frame_bottom_left{
  padding-top:15px;
  position:absolute;
  bottom: 4px;
  left: 0;
  text-align:left;
  background-color:transparent;
  width:66%;
  float:left;
}

.frame_bottom_right{
  padding-top:15px;
  position:absolute;
  bottom: 4px;
  left: 66%;
  text-align:right;
  background-color:transparent;
  width:34%;
  float:left;
}

/* Durchgehende Fußzeile */
.frame_bottom_nosplit{
  padding-top:15px;
  position:absolute;
  bottom: 4px;
  left: 0;
  text-align:center;
  background-color:transparent;
  width:100%;
  float:left;
}


.pocketframe_topbottom{
  width:96%;
  height:100px;
  padding:2%;
  background-color:transparent;
  background-image:none;
  border-width:0px;
  border-style:solid;
  border-color:blue;
  vertical-align:bottom;
}


.pocketframe_middle{
  width:96%;
  height:450px;
  padding:2%;
  background-color:white;
  background-image:none;
  border-width:0px;
  border-style:solid;
  border-color:green;
  overflow:auto; 
}

.pocketframe_fullscreen{
  width:500px;
  height:700px;
  padding:2%;
  background-color:transparent;
  background-image:none;
  border-width:0px;
  border-style:solid;
  border-color:green;
  overflow:auto; 
}