/** CSS Document: layout.css
 * common layout styles
 * @author: M.Paetzel
 * @version: 1.0 
 * @year: 2008
 */
div {position: relative;}

body {
  background-image: url(../images/layout/back.gif);
  margin: 0 0 0 0;
  background-color: #C4C0B0;
  color: #000000;
}

.cross {
  position: absolute;
  background-image: url(../images/icons/plus.gif);
  background-repeat: no-repeat;
  width: 10Px;
  height: 10Px;
  top: -10Px;
}
.cross_left {  left: -10Px;}
.cross_right {  left: 770Px;}

/* page --------------------------------------------------------------------- */
#page {
  top: 100Px;
  width: 770Px;
  height: 420Px;
  text-align: left;
}

/* top banner --------------------------------------------------------------- */
#page .banner {
  height: 71Px;
}

/* edges of banner */
.banner .titlebar {
  height: 17Px;
  background-image: url(../images/layout/tbar_r.gif);
  background-position: top right;
  background-repeat: no-repeat;
}

/* banner buttons */
.banner .button{
  position: absolute;
  background-repeat: no-repeat;
  width: 13Px;
  height: 13Px;
  top: 2Px;
}
.banner .min{ left: 738Px; background-image: url(../images/icons/btmin.gif);}
.banner .max{ left: 754Px; background-image: url(../images/icons/btmax.gif);}

/* banner logo */
.banner .logo {
  position: absolute;
  top: 17Px;
  left: 290Px;
  width: 235Px;
  height: 38Px;
}

/* rulers ------------------------------------------------------------------- */
#top_ruler{
  background-image: url(../images/layout/ruler_top.gif);  
  background-color: #FFFFFF;
  color: #000000;
  top: 38Px;
  height: 16Px;
  border-right: solid 2Px #000000;
}

#top_ruler .number{
  position: absolute;
  top: 2Px;
  height: 7Px;
  background-repeat: repeat-x;
  background-position: top left;
}
#top_ruler .no1{
  background-image: url(../images/layout/num_1.gif);  
  width: 300Px;
  left: 317Px;
}
#top_ruler .no2{
  background-image: url(../images/layout/num_2.gif); 
  width: 150Px;
  left: 617Px;
}
#top_ruler .no3, #top_ruler .no4, #top_ruler .no5{
  background-image: url(../images/layout/num_all.gif);  
  width: 450Px;
}
#top_ruler .no3{left: 17Px; width: 300Px;}
#top_ruler .no4{left: 323Px;}



/* content-frame ------------------------------------------------------------ */

#content {
  color: #000000;
  height: 300Px;
  
  border-right: solid 2Px #000000;
}
/* frame -------------------------------------------------------------------- */
/* right frame (text)*/
.right_frame {
  position: absolute;
  left: 285Px;
  width: 465Px;
  height: 246Px;
  top: 36Px;
  overflow: hidden;
  border: solid 1Px #999999;
  background-color: #FFFFFF;
}

/*tongue of content */
.left_frame {
  position: absolute;
  color: #000000;
  top: 0Px;
  left: 0Px;
  width: 280Px;
  border-bottom: solid 3Px #000000;
  z-index: 4;
}
.left_frame div.border_right {
  position: absolute;
  background-color: #000000;
  color: #333333;
  width: 3Px;
  height: 49Px;
  left: 280Px;
  top: 300Px;
}
/* left frame (image)*/
.left_image {
  position: absolute;
  left: 24Px;
  width: 247Px;
  top: 30Px;
  background-color: #FFFFFF;
  border: solid 1Px #999999;
  z-index: 6;
}

/* navibar ------------------------------------------------------------------ */
#navibar {
  margin-top: 15Px;
  margin-left: 295Px;
  color: #000000;
  height: 50Px;
  border-color: #000000;
  border-style: solid;
  border-left-width: 1Px;
  border-top-width: 1Px;
  border-bottom-width: 3Px;
  border-right-width: 2Px;
}
/* main navigation */
#navibar .topic {
  margin: 5Px;
  padding: 1Px;
  padding-left: 5Px;
  padding-bottom: 2Px;
}
/* sub navigation */
#navibar .subs {
  margin: 5Px;
  padding: 1Px;
  padding-left: 5Px;
  padding-bottom: 2Px;
}

#left_ruler{
  background-image: url(../images/layout/ruler_left.gif);  
  background-color: #FFFFFF;
  color: #000000;
  left: 0Px;
  top: 0Px;
  width: 16Px;
  height: 346Px;
}

#left_ruler .no1{
  background-image: url(../images/layout/num_all2.gif);  
  background-repeat: repeat-y;
  background-position: top left;
  width: 16Px;
  height: 320Px;
  left: 2Px;
  top: 2Px;
}

#left_back, #right_back, #navi_back{
  position: absolute;
  background-color: #FFFFFF;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}
#left_back {
  width: 280Px;
  height: 348Px;
  left: 0Px;
  top: 0Px;
}
#right_back, #right_border {
  width: 488Px;
  height: 300Px;
  left: 280Px;
  top: 0Px;
}
#navi_back {
  width: 472Px;
  height: 50Px;
  left: 0Px;
  top: 0Px;
}
#right_border {
  position: absolute;
  width: 490Px;
  border-bottom: solid 3Px #000000;
}