/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Grundsätzliche Einstellungen
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
body {
  margin: 0px;
  }

body, blockquote, li, td, th, pre {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-family: Helvetica, Arial, sans-serif;
  }

* {
  font-family: Helvetica, Arial, sans-serif;
 }
body.independent {
  padding: 1em;
 }

/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Standard-Elemente
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

h1, h2, h3, strong {
  font-weight: normal;
  color: #1A314A;
  }
h1, h2, h3 {
  letter-spacing: 1px;
  }
h1 {
  font-size: 200%;
  }
h2 {
  font-size: 150%;
  }
strong  {
  font-weight: bolder;
  }
a, span.link {
  color: #005EC8;
  color: #0052A6;
  text-decoration: none;
  }
a:visited {
  color: #005EC8;
  color: #0052A6;
  }
a:hover {
  color: #419AFF;
  text-decoration: underline;
  }
a:focus {
  color: #91C5FF;
  }
a:active {
  }
table {
  border-collapse: separate;
  border-collapse: collapse;
  }
th, td {
  padding-left: 1ex;
  padding-right: 1ex;
  border-bottom: 1px solid white;
  border-right: 1px solid white;
  }
table.portal td {
  padding-left: 0ex;
/*
  Fuer die Importe aus dem Schulportal
*/
  }
tr.head, th.head, thead {
  background-color: #C4C8CC;
/*
  background: url("blue_table_head.png") repeat-x;
  background-position: bottom right;
*/
  }
tr.foot, th.foot, tfoot {
  background-color: #C4C8CC;
/*
  background: url("blue_table_head.png") repeat-x;
  background-position: bottom right;
*/
  }


/*
%%%%%%%%%%%%%%%%%%%%%%%%%
Formulare
%%%%%%%%%%%%%%%%%%%%%%%%%
*/
div.form {
  padding-left: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1ex;
  padding-bottom: 1ex;
  }
label {
  display: block;
  float: left;
  width: 15em;
  height: 3ex;
  margin-top: 4px;
  margin-bottom: 0px;
  margin-right: 1ex;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 0.5em;
  border: 1px solid #D9DCDF;
  background-color: #F4F5F6;
/*
  background: url("blue_navi.png") repeat-x;
  background-position: bottom right;
*/
  }
label.necessary {
  border: 1px solid #F05500;
  color: #F05500;
/*
  background: url("red_navi.png") repeat-x;
  background-position: top right;
*/
  }
div.form br{
  clear: both;
  }
input {
  margin-top: 4px;
  margin-bottom: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0.5em;
  }
input.button {
  width: 8em;
  }
textarea {
  width: 99%;
  padding-left: 0.5em;
  border: 1px solid #8888AA;
  }

span.checkboxes {
  line-height: 1.75;
  margin-top: 4px;
  margin-bottom: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0.0px;
}



/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Eigene Definitionen
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.mceVisualAid {					/*  für tinyMCE */
  border: 1px dashed #BBBBBB !important;
}
.monospace {
  font-family: monospace;
  font-size: 114%;
}
.small-caps {
  font-variant: small-caps;
}
.message {
  color: #F05500;
  }
.blocked {
  color: chocolate;
  }
.indicate-caps {
  font-variant: small-caps;
  color: #888888;
}
.indicate {
  color: #888888;
}
.status-0 {
  font-weight:bold;
  color: #008000;
}
.status-1 {
  font-weight:bold;
  color: #eecc00;
}
.status-2 {
  font-weight:bold;
  color: #F05500;
}


tr.odd {
  background-color: #EFF0F1;
/*
  background: url("blue_table_odd.png") repeat-x;
  background-position: bottom right;
*/
  }
tr.even {
  background-color: #E8F0F8;
/*
  background: url("blue_table_even.png") repeat-x;
  background-position: bottom right;
*/
  }
a img, img.imagelink {
  border-style: none;
  }
table.thumb-link {
  border-collapse: collapse;
  vertical-align: top;
  }
table.thumb-link tr, table.thumb-link td {
  padding: 0px;
  margin: 0px;
  vertical-align: top;
  }
div.thumb-wrap {
  float: none;
  padding: 4px;
  margin-right: 1em;
  margin-bottom: 0.0ex;
  border-left: 1px solid #D9DCDF;
  border-top: 1px solid #D9DCDF;
  border-right: 1px solid #C4C8CC;
  border-bottom: 1px solid #C4C8CC;
  background-color: white;
  }
div.thumb {
  float: none;
  position: relative; 
  overflow: hidden;
/*
clip:rect(0px 75px 75px 0px);
*/
  }
div.image {
  margin-left: 4em;
  margin-right: 4em;
  margin-bottom: 4ex;
}
div.image div {
  text-align: left;
  margin-top: 1ex;
  font-size: 90%;
}
table.tabbing {
  border-collapse:collapse;
  table-layout:auto;
/*
  line-height: 100%;
*/
}
table.tabbing th, table.tabbing td {
  padding: 0px;
  padding-right: 1em;
  border: none;
}

li {
  margin-top: 1ex;
  margin-bottom: 1ex;
  }
/*
li.collectionsimple {
  float: left;
  width: 100%;
  margin-bottom: 1ex;
  padding-left: 0px;
  margin-left: 0px;
  }
li.collectionoutline {
  float: left;
  width: 100%;
  margin-bottom: 1ex;
  padding-left: 0px;
  margin-left: 0px;
  }
li.collectionpicture {
  float: left;
  width: 100%;
  margin-bottom: 2ex;
  padding-bottom: 0ex;
  padding-left: 0px;
  margin-left: 0px;
  background-color: red;
  }
*/
ul {
  list-style-type: disc;
  }
ul.collection {
  margin: 0px;
  padding: 0;
  list-style-type: none;
  }
ul.col {
  margin: 0px;
  padding: 0;
  list-style-type: none;
  }
ul.bulletcol {
  list-style-type: disc;
/*
  list-style-image: url("img/arrow_right.png");
*/
  padding-left: 0em;
  padding-right: 0px;
  margin-left: 1.5em;
  }


/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Spezielle Layout-Elemente
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

/*
%%%%%%%%%%%%%%%%%%%%%%%%%
Titelseite
%%%%%%%%%%%%%%%%%%%%%%%%%
*/
div.contentcenter-wrap {
  float: left;
  overflow: hidden;
  width: 33%;
  border-left: 1px solid #D9DCDF;
  border-right: 1px solid #D9DCDF;
  }
div.contentleft-wrap {
  float: left;
  overflow: hidden;
  width: 33%;						/* IE mag keine 100% in der Summe */
  }
div.contentright-wrap {
  float: right;
  overflow: hidden;
  width: 33%;
  }
div.contentcenter-wrap-mid {
  margin-top: 2em;
  padding-right: 1em;
  padding-left: 1em;
  }
div.contentleft-wrap-mid {
  padding-right: 1em;
  padding-left: 1em;
  }
div.contentright-wrap-mid {
  padding-right: 1em;
  padding-left: 1em;
  }
div.contentcenter {
  width: 100%;
  text-align: center;
  }
div.contentleft {
  width: 100%;
  }
div.contentright {
  width: 100%;
  }
div.contentleft h2, div.contentright h2 {
  text-align: center;
  }

/*
%%%%%%%%%%%%%%%%%%%%%%%%%
Dreispaltige Listen
%%%%%%%%%%%%%%%%%%%%%%%%%
*/

div.col-outer {
  float: left;
  width: 100%;
}
div.col-wrap-no-no, div.col-wrap-no-line, div.col-wrap-line-line, div.col-wrap-line-no {
  float: left;
  overflow: hidden;
  }
div.col-wrap-no-no {
  }
div.col-wrap-no-line {
  border-right: 1px solid #D9DCDF;
  }
div.col-wrap-line-line {
  margin-left: -1px;
  border-left: 1px solid #D9DCDF;
  border-right: 1px solid #D9DCDF;
  }
div.col-wrap-line-no {
  margin-left: -1px;
  border-left: 1px solid #D9DCDF;
  }
div.col-no-no {
  width: 100%;
  }
div.col-no-line {
  width: 100%;
  padding-right: 1em;
  }
div.col-line-line {
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  }
div.col-line-no {
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  }
div.col-footer {
/*
  float: left;
*/
  clear: both;
  width: 100%;
  padding-top: 2em;
}

div.col-no-no, div.col-no-line, div.col-line-line, div.col-line-no {
  width: 90%;
  /*
  Tribut an IE 7, sonst sind die Spalten nicht in einer Reihe!
  */
  }


/*
%%%%%%%%%%%%%%%%%%%%%%%%%
Bildergalerien
%%%%%%%%%%%%%%%%%%%%%%%%%
*/
div.gallery-pic-wrap {
  float: left;
  width: 100%;
  }
div.gallery-pic {
  float: none;
  text-align: center;
  }
div.gallery-pic p {
  whitespace: nowrap;
  margin-bottom: 2ex;
  }
div.gallery-wrap {
  float: left;
  }
div.gallery {
  float: left;
  margin-right: 3px;
  }

/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Seitenaufbau
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

div.container-wrap {
  /*
  float: left;
  */
  width: 99%;
  max-width: 80em;
  min-width: 65em;
  /*
  Das versteht IE nicht, deshalb besser der hstrut-div
  */
  padding: 0px;
  margin: 0px;
  border-bottom: 1ex solid white;
  margin: 0px auto;
  }
div.container {
  float: left;
  /*
  width: 99%;
  Ohne diese width-Angabe kann Mozilla den Titel nicht zentrieren!
  Aber dann meckern die andern!
  */
  padding: 0px;
  margin: 5px;
  /*
  margin-bottom: 1ex;
  max-width: 80em;
  min-width: 65em;
  */
/*
  border-left: 1px solid #D9DCDF;
  border-right: 1px solid #D9DCDF;
  border-top: 1px solid #D9DCDF;
*/
  }
div.hstrut{
  float: left;
  width: 65em; /* So breit muss das Fenster stets mindestens sein! */
  width: 60em; /* So breit muss das Fenster stets mindestens sein! */
  width: 800px; /* So breit muss das Fenster stets mindestens sein! */
  height: 1px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  margin-top: -1px;
  }
div.vstrut{
  float: left;
  height: 60em; /* So hoch muss das Fenster stets mindestens sein! */
  height: 300px;
  width: 1px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  margin-left: -1px;
  }
div.header, div.noheader {
/*				KINK 08.03.2006
  float: left;
*/
  width: 100%;
  padding: 0px;
  margin: 0px;
/*
  border-bottom: 1px solid #D9DCDF;
  background: url("img/haeder.png") repeat-x;
  background-position: top left;
*/
  }
div.noheader {
  border-bottom: 0px solid #D9DCDF;
  }
div.title{
  float: left;
  padding-top: 1ex;
  padding-bottom: 1ex;
  padding-left: 1em;
/*
  clear: both;
  margin-top: 1.5ex;
  text-align: center;
  color: #1A314A;
  white-space: nowrap;  
  letter-spacing: 1px;
*/
  }
div.noheader div.title {
  display: none;
  }
div.roko {
  float: left;
  width: 10em;
  margin-top: 0.5em;
  margin-right: 2em;
  }
div.roko-top, div.roko-bottom {
  width: 100%;
  font-size: 160%;
  color: #0052A6;
  font-family: tahoma;
  font-weight: bold;
  }
div.roko-top {
  margin-bottom: -0.25em;
  text-align: left;
  }
div.roko-bottom {
  text-align: right;
  }
div.roko a, div.roko a:hover {
  white-space: nowrap;
  text-decoration: none;
  color: #0052A6;
  }
img.logo{
  float: left;
  height: 4.5em;
  margin-right: 2em;
  }
div.nagy{
  float: left;
  height: 2.5em;
  }
div.nagy-top, div.nagy-bottom {
  white-space: nowrap;
  font-family: tahoma;
  font-weight: bold;
  }
div.nagy-top{
  padding-top: 1em;
  padding-bottom: 0.25em;
  }
nagy-bottom{
  }
div.noheader img.logo {
  display: none;
  }
div.body-wrap{
  /* 
  Mozilla mag hier keinen float.
  */
  width: 100%;
  }
div.body, div.body-sub{
/*				KINK 08.03.2006
  float: left;
*/
  margin: 0px;
  padding: 0px;
  width: 100%;
  }
div.body-sub{
/*
  background-color: #F4F5F6;
  background: url("blue_left.png") repeat-y 20% 0;
*/
  }
div.left-wrap {
  float: left;
  width: 20%;				/* fehlende Prozente Von Mozilla verlangt */
  padding: 0;
  margin: 0;
  background: none;			/* Der Hintergund ist in div.body-sub, sonst geht er nicht ganz runter! */
  }
div.right-wrap, div.right-wrap-sub {
  float: left;
  width: 100%;
  }
div.right-wrap-sub {
  float: right;
  width: 80%;
  }
div.right, div.right-sub {
  float: none;
  margin-top: 4ex;
  /* 
  Mozilla und Opera mögen hier keinen float.
  */
  padding-left: 1em;
  padding-right: 1em;
/*
  background-color: white;
*/
  }
div.right-sub {
  float: none;
  /* 
  Mozilla und Opera mögen hier keinen float.
  */
  padding-left: 2em;
  border-left: 1px solid #D9DCDF;
  }
div.body-top {
  float: left;
  width: 100%;
  color: #1A314A;
  padding: 0;
  padding-top: 1.5ex;
  padding-bottom: 1.5ex;
/*
  border-bottom: 1px solid #D9DCDF;
  background-color: #F4F5F6;
  background: url("img/body-top.png") repeat-x;
  background-position: bottom left;
*/
  }
div.navigation-chain {
  float: left;
  vertical-align: middle;
  padding-left: 1em;
  color: #1A314A;
  white-space: nowrap;
  }
div.navigation-chain-small {
  font-size: small;
  color: #1A314A;
  border-bottom: 1px solid #D9DCDF;
  margin-bottom: 0px;
  padding-bottom: 0px;
  }
div.search {
  float: right;
/*
  position: relative;
  top: 0ex;
*/
  margin: 0px;
  padding: 0px;
  padding-right: 0.9em;
  color: #1A314A;
  white-space: nowrap;
  /* margin-bottom: ein Sicherheitsmaß, damit das überbordende Formular nicht nach unten ragt.
  margin-bottom: -5ex;
  */
  }
div.search form {
  margin: 0px;
  padding: 0px;
  }
div.search input {
  margin: 0px;
  padding: 0px;
  border-top: 1px solid #D9DCDF;
  border-left: 1px solid #D9DCDF;
  border-bottom: 1px solid #C4C8CC;
  border-right: 1px solid #C4C8CC;

  vertical-align: middle;

  }
div.search input.button {
  margin: 0px;
  padding: 0px;
  border-top: 1px solid #C4C8CC;
  border-left: 1px solid #C4C8CC;
  border-bottom: 1px solid #D9DCDF;
  border-right: 1px solid #D9DCDF;
  background-color: #F4F5F6;
/*
  background: url("blue_chain.png") repeat-x;
  background-position: middle left;
*/
  }
div.content-wrap {

  /*
  ohne float, sonst macht der Mozilla Ärger (bei meinen dreispaltigen Listen)
  float: left;
  ohne width, sonst macht der Mozilla Ärger
  width: 100%;
  */
  /*
  min-height: 300px;
  Das versteht IE nicht, deshalb besser der vstrut-div
  */
  /*
  margin-top: 0ex;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0ex;
  IE 5 braucht einen margin, kein padding!
  */
  }
div.content {
  width: 100%;
  padding: 0;
  }
div.footer {
  float: left;
  width: 100%;
  text-align: center;
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
  margin-top: 4ex;
  border-top: 1px solid #D9DCDF;
  border-bottom: 1px solid #D9DCDF;
/*
  background-color: #F4F5F6;
  background: url("img/footer.png") repeat-x;
  background-position: top left;
*/
  }
div.footer-left-wrap {
  float: left;
  width: 27%;
  text-align: left;
  overflow: hidden;
  }
div.footer-left {
  padding-left: 1em;
  white-space: nowrap;
  }
div.footer-center-wrap {
  float: left;
  width: 46%;
  text-align: left;
  overflow: hidden;
  }
div.footer-center {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  }
div.footer-right-wrap {
  float: right;
  width: 26%;
  text-align: right;
  overflow: hidden;
  }
div.footer-right {
  float: right;
  text-align: right;
  padding-right: 1em;
  white-space: nowrap;
  }
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Seitenmenue
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
div.subnavigation {
  padding-top: 6ex;
  padding-bottom: 2ex;
  padding-left: 1em;
  }
div.subnavigation ul {
  padding: 0;
  margin: 0;
  white-space: nowrap;
  left: 0.5em;
  list-style: none;
  }
div.subnavigation li {
  margin-bottom: 2ex;
  margin-top: 2ex;
  }
div.subnavigation li ul li {
  margin-left: 2em;
  margin-bottom: 1ex;
  margin-top: 1ex;
  }
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
BEGIN Hauptmenue
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/

div.navigation {
  position: relative;			/* Sonst darf z-index nicht gesetzt werden */
  z-index: 10;				/* Damit bleiben die Menüs stets sichtbar */
  float: left;
  width: 100%;				/* Damit ist bei Safari u. Konqueror der Login auch rechts */
  border-top: 1px solid #D9DCDF;
  border-bottom: 1px solid #D9DCDF;
/*
  border-top: 1px solid #D9DCDF;
  border-bottom: 2px solid #D9DCDF;
  background: url("img/navigation.png") repeat-x;
  background-position: top left;
*/
  }
div.navigation ul {
  z-index: 1;				/* Damit bleiben die Menüs stets sichtbar (Mozilla) */
  list-style: none;
  margin-left: 0px;			/* Wird vom IE Explorer verlangt */
  padding-left: 0px;			/* Wird von Mozilla verlangt */
  margin-top: 0px;			/* Wird von Mozilla verlangt */
  }
div.navigation ul li {
  position: relative; 			/* Dann darf das div darin absolute sein! */
  float: left;
  margin: 0px;
  padding-left: 1em;
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
  cursor: default;
  }
div.navigation ul li:hover, ul li.over {
  position: relative; 			/* Dann darf das div darin absolute sein! */
  display: block;			/* Wird von Safari verlangt */
  }
div.navigation ul li.login {
  float: right;
  padding-right: 1em;
  }
div.navigation ul li span, div.navigation ul li a {
  /* Behälter für Menüleisten-Text-Einträge */
  display: block;
  white-space: nowrap;
  color: #005EC8; 			/* Textfarbe der Menueleisten-Einträge */
  color: #0052A6; 			/* Textfarbe der Menueleisten-Einträge */
  font-weight: bold;
  }
div.navigation ul li.login a, div.navigation ul li ul li a {
  font-weight: normal;
  }
div.navigation ul li:hover span, div.navigation ul li.over span {
  color: #419AFF;			/* Textfarbe der ausgewählten Menueleisten-Einträge */
  }
/*					Der IE mag das nicht. Die Klappmenues werden dann nicht mehr hervorgehoben!
div.navigation ul li.login a:first-letter, div.navigation ul li span:first-letter {
  text-decoration: underline;
  }
*/
div.navigation ul li div {
  /* Behälter für nächstes ul */
  float: none;
  position: relative;
  }
div.navigation ul li:hover div, div.navigation ul li.over div{
  position: absolute;			/* so wird die Menueleiste nicht auseinandergeschoben */
  }
div.navigation ul li:hover div div, div.navigation ul li.over div div{
  position: relative;
  width: 24em;				/* Für Mozilla: Klappmenues haben sonst keine Breite! Opera nimmt diese Breite aber in Anspruch! */
  left: -0.5em;
  top: 0.5ex;
  }
div.navigation ul li ul {
  display: none;
  position: absolute;			/* Damit bleibt das darunterliegende an Ort und Stelle */
  margin-left: 0px;			/* Wird vom IE Explorer verlangt */
  padding-left: 0px;			/* Wird von Mozilla verlangt */
  padding-bottom: 0.5ex;
  background-color: #F9FAFB;		/* Hintergrund der Klappmenues, IE-Bug */
  background-color: white;		/* Hintergrund der Klappmenues, IE-Bug */
  border: 1px solid #D9DCDF;		/* Rahmen der Klappmenues */
  border-bottom: 1px solid #C4C8CC; 	/* Rahmen der Klappmenues */
  border-right: 1px solid #C4C8CC; 	/* Rahmen der Klappmenues */
  }
div.navigation ul li:hover ul, div.navigation ul li.over ul{
  /* machts sichtbar, außer beim IE */
  display: block;
  }
div.navigation ul li ul li{
  float: none;				/* Sonst setzt Opera die li's übereinander */
  padding: 0px;
  }
div.navigation ul li ul li span {
  display: block;
  }
div.navigation li ul a:hover {
  background-color: #F4F5F6;		/* Hintergrund der ausgewählten Klappmenueeinträge*/
  }
div.navigation ul li ul a{
  display: block;			/* Damit erstrecken sich die Links über die ganze Breite */
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
  text-decoration: none;
  }
div.navigation ul li ul a:hover{
  text-decoration: underline;
  }