Detailarbeiten an meiner Musik-Webseite

Hallo zusammen!
Meine Musik-Webseite ist jetzt soweit fertig: flechtnermusik.de/
Ich würde aber gerne noch ein paar Kleinigkeiten ändern:
1. Wie bekomme ich die senkrechten Trennstriche zwischen den Links im Topmenü weg?
2. Kann man die Position 1 (also die Position des Topmenüs) mit einem Rahmen versehen?
3. Kann man den Titel der Sidebar links (Navigationsmenü) mit einem Rand links und rechts versehen, so dass der Titel einen gelben Rahmen wie das Bild darüber hat? flechtnermusik.de/gitarrenmusik
Vielen Dank für eure Hilfe!
Herzlichen Gruß
Günter Flechtner

Für die senkrechten Striche Die ganze Position 1 kannst du mit Wenn du nur das Menü ansprechen willst kannst du "#topmenu nav" nutzen als Selector.

Den Sidebartitel kannst du mit dem Selektor "#leftcol .moduleh3-sidebar" ansprechen. Dem könntest du dann einen Rahmen in der gewünschten Farbe und Breite geben.

Vielen Dank für die schnelle Antwort!
Die Lösung des Punktes 3 (Rahmen für den Modultitel) habe ich geschafft. Die anderen Punkte leider nicht.
Ich habe den Code für die senkrechten Striche eingegeben. Es hat sich aber nichts verändert.
Mein derzeitiger Code für die Erweiterten Template Optionen ist der Folgende. Wo muss ich deinen Code einfügen?

body {
    max-width: 1000px;
   margin: auto;
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 14px;
     line-height: 1.3em;
    color: #383838;
  }
 img {max-width: 100%;}
#maincontent {
   border: 0px;
   padding: 0px;
  margin-top: 0px;
  margin-right:10px;
  margin-left: 0px;
  min-height: 600px;
  }
#maincontent:before, #maincontent:after {
    display: none;
}
#leftcol .moduleh3-sidebar {
  border: 8px solid #f5ebcc;
}
.page-header h1 {
  text-align: left;
  margin: 0 0 5px 10;
  padding: 0 40px;
  font-size: 1.2em;
  color: #666666;
  font-variant: normal;
  border-bottom: 1px dotted;
  border-top: 1px dotted;
  padding: 6px
 }
#topmenu ul {
  text-align: left;
  font-weight: bold;
  font-size: 15px;
    padding-left: 0px;
  padding-right: 0px;
    }
.mod-menu li.nav-item {
    line-height: 2.0em
  }
.mod-menu li.nav-item li {
    line-height: 1.8em;
 }
.mod-menu li.nav-item a:hover {
    padding-left: 18px;
    transition-duration: 0.2s;
  background-color: #f5ebcc;
   text-decoration: none;
}
.module-outer > div .module-inner,
.module-outer_menu > div .module-inner {
    border: 5px;
    background-color: inherit;
}
#contact-form textarea {
    width: 600px !important;
  height: 100px !important;
}
#footer {
  min-height: 0px;
max-height: 0px;
  margin: 4px;
}

Es spielt keine Rolle wo du das machst. Einfach nicht innerhalb der geschweiften Klammer ({ ... }) einer anderen Regel. Dann passt das schon.

Ich habe das jetzt so gemacht, aber es tut sich nichts.

body {
    max-width: 1000px;
   margin: auto;
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 14px;
     line-height: 1.3em;
    color: #383838;
  }
 img {max-width: 100%;}
#maincontent {
   border: 0px;
   padding: 0px;
  margin-top: 0px;
  margin-right:10px;
  margin-left: 0px;
  min-height: 500px;
}
#maincontent:before, #maincontent:after {
    display: none;
}
#leftcol .moduleh3-sidebar {
  border: 8px solid #f5ebcc;
}
.page-header h1 {
  text-align: left;
  margin: 0 0 5px 10;
  padding: 0 40px;
  font-size: 1.2em;
  color: #666666;
  font-variant: normal;
  border-bottom: 1px dotted;
  border-top: 1px dotted;
  padding: 6px;
 }
#topmenu ul.nav > li a, #topmenu ul.nav > li span.separator, #topmenu ul.nav li {
border-left: 0;
border-right: 0;
}
#topmenu ul {
  text-align: left;
  font-weight: bold;
  font-size: 15px;
    padding-left: 0px;
  padding-right: 0px;
 }
.mod-menu li.nav-item {
    line-height: 2.0em
  }
.mod-menu li.nav-item li {
    line-height: 1.8em;
 }
.mod-menu li.nav-item a:hover {
    padding-left: 18px;
    transition-duration: 0.2s;
  background-color: #f5ebcc;
   text-decoration: none;
}
.module-outer > div .module-inner,
.module-outer_menu > div .module-inner {
    border: 5px;
    background-color: inherit;
}
#contact-form textarea {
    width: 600px !important;
  height: 100px !important;
}
#footer {
  min-height: 0px;
max-height: 0px;
  margin: 4px;
}

Ah, die ">" in der Regel gehen nicht in diesem Feld. Die werden escaped.
Du musst diese Regel also in die user.css tun.