@charset "UTF-8";

/*
Hier liegt das "minimale" bahn.css für die alten Bestandteile auf neuen Seiten.

TODO afm-1042 Mechanismus überarbeiten
Dazu muss dann aber der Mechanismus zum Laden der CSSe und des Holens der base im JspBase
            cssBase = WebClientConfiguration.getInstance().getCssPath(contentsrv);
            jsBase = WebClientConfiguration.getInstance().getJavascriptPath(contentsrv);
überarbeitet werden. Z.B. in dem die Page nach ihrem Prefix gefragt wird?

*/

/* html, body, main document element */
html, body {
    background-color: #cecece;
    color: #282D37;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

/** Das hier ergänzt Einträge in main.css zu body Definition f. vergrößerbare Schriften */
body.font-large {
    font-size: 19px;
}

body.font-xl {
    font-size: 22px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

li {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

legend {
    color: #000;
}

/***************/
/*   Header    */
/***************/

#header {
    /*min-height: 72px;*/
    height: 71px;
    background-color: #fff;
    position: relative;
    width: 100%;
    /* TODO afm-1032 zu hoch f. neues Layout wg. Overlays etc. */
    /*z-index: 10002;*/
    z-index: 1000;
}

#header select,
#header input,
#language-selector-layer span,
#language-selector-layer ul {
    border: 1px solid #768086;
    color: #282D37;
    padding: 0 4px;
}

#header label {
    position: absolute;
    left: -9999em;
}

#header-elements {
    float: right;
    margin-top: 24px;
    width: 825px;
}

#boplogo {
    float: left;
    margin-left: 10px;
    height: 62px;
    margin-top: -20px;
    display: block;
    text-align: center;
    vertical-align: middle;
}

#boplogo * {
    vertical-align: middle;
}

#boplogo img {
    margin: 2px 0;
}

#boplogo span {
    display: inline-block;
    height: 100%;
    width: 1px;
}

/* rechtsbündiges Info-Icon in Überschrift */
div.header .info-right {
    float: right;
    font-size: 0.7em;
    padding-top: 8px;
    cursor: pointer;
}

/* Mouseover wie Link */
div.header .info-right:hover, div.header .info-right:focus {
    text-decoration: underline;
    color: #f00;
}

/* Icon "Schließen" */
div.header .info-right.close {
    background: url(../img/schliessen_outline_16x16.png) left bottom no-repeat;
    padding-left: 20px;
}

/* Skiplinks */
#skiplinks {
    margin: 0;
    position: absolute;
}

#skiplinks li {
    width: 400px;
}

#skiplinks a {
    font-size: 1.2em;
    left: -9999px;
    position: absolute;
    top: 0;
}

#skiplinks a:focus {
    left: 295px;
}

/* Logo */
div#logo {
    font-size: 1em;
    left: 16px;
    line-height: 100%;
    margin-bottom: 0;
    position: absolute;
    top: 16px;
    width: 126px;
}

#logo a {
    color: #282D37 !important;
    cursor: text;
    text-decoration: none !important;
}

#logo a:link, #logo a:visited {
    cursor: pointer;
}

#logo img {
    margin-bottom: 0;
}

/* service-navigation */
#service-nav {
    float: right;
    margin-right: 10px;
}

#service-nav li {
    display: block;
    float: left;
}

#language-selector-layer span,
#service-nav li a {
    border-left: 1px solid #696969;
    display: block;
    float: left;
    line-height: 1;
    margin: 6px 0 5px;
    padding: 0 12px;
}

#service-nav li a {
    border-left: none;
    border-right: 1px solid #333;
    color: #282D37;
    padding-top: 2px;
}

#service-nav li a:hover {
    color: #F00;
}

#service-nav li a.first,
#service-nav li a.font-normal,
#service-nav li a.font-large,
#service-nav li a.font-xl {
    border-left: 0 none;
}

#font-sizer,
#service-nav #font-sizer {
    display: none;
}

/* language selection */
#language-selector {
    float: right;
    margin-top: 2px;
    margin-right: 16px;
    width: 158px;
}

#language-selector select {
    padding: 0;
}

#language-selector option,
#language-selector p {
    background: url(../img/flags.gif) 0 0 no-repeat;
    padding-left: 24px;
}

/* positioniert das Hintergrundbild vor der Select-Box, um die richtige Sprache anzuzeigen */
#language-selector p.de {
    background-position: 0 0
}

#language-selector p.en {
    background-position: 0 -40px
}

#language-selector p.es {
    background-position: 0 -80px
}

#language-selector p.it {
    background-position: 0 -120px
}

#language-selector p.nl {
    background-position: 0 -160px
}

#language-selector p.da {
    background-position: 0 -200px
}

#language-selector p.pl {
    background-position: 0 -240px
}

#language-selector p.tr {
    background-position: 0 -280px
}

#language-selector p.fr {
    background-position: 0 -320px
}

#language-selector p select,
#language-selector p option {
    background-image: none !important;
}

#language-select-button {
    display: block;
    margin-left: 8px;
}

#language-selector select, #language-selector button {
    float: left
}

/*********************/
/* Language selector */
/*********************/

#header .selectbox {
    margin: -1px 0 10px 0;
    padding: 1px 2px 1px 0 !important;
    height: 1.3em;
    width: 9.5em;
    display: block;
    text-align: left;
    background: url('../img/arrow.gif') right no-repeat;
    cursor: pointer;
    border: 1px solid #768087;
    color: #282D37;
}

#header .noBottomBorder {
    border-bottom: none !important;
    background: url(../img/arrow-top.gif) right -2px no-repeat;
}

/********************/
/*     Main Nav     */
/********************/

#main-nav {
    background-color: #D7DCE1;
    /*min-height: 32px;*/
    /*min-height: 2em;*/
    position: relative;
    width: 100%;
    z-index: 800;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3);
}

/* main-navigation */
#main-nav h2 {
    color: #f00;
    left: -9000px; /* ID 1107: Navigation in den nicht-sichtbaren Bereich verschoben */
    margin: 0;
    max-width: 800px;
    padding: 0;
    position: absolute;
    top: 0;
}

div#doc h2.mainNaviHeadingCorrection {
    text-indent: -9000px;
    color: #000;
}

#main-nav ul {
    margin: 0;
    padding: 0;
}

#main-nav li {
    display: block;
    float: left;
    position: relative;
}

#main-nav h3 span, #main-nav a span {
    /*left: -9999em;*/
    /*position: relative;*/
    left: auto;
    position: relative;
}

#main-nav h3 span {
    top: -2px;
    white-space: nowrap;
}

#main-nav li a {
    border-left: 1px solid #fff;
    color: #282D37;
    display: block;
    float: left;
    font-size: 1.6em;
    /*height: 18px;*/
    line-height: 1;
    margin: 9px 0 0;
    overflow: hidden;
    padding: 0 10px;
}

#main-nav li h3 a {
    border: 0 none;
    color: #878c96;
    display: inline;
    float: none;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

#main-nav li a:hover {
    text-decoration: underline;
}

#main-nav li h3 a:hover, #main-nav li.active a:hover {
    color: #878c96;
    text-decoration: none;
}

#main-nav li.active a:hover {
    color: #282D37;
}

#main-nav #mn-bahn a,
#main-nav #mn-meinebahn a,
#main-nav li a.jhover {
    text-decoration: none;
}

#main-nav li li a {
    height: 18px;
}

#main-nav li a.active {
    font-weight: bold;
}

#main-nav li a.first {
    border-left: 0 none;
}

#main-nav li a.jhover, #main-nav li h3 {
    height: 19px;
}

#main-nav ul li.active a {
    background-color: #d5d5d5 !important;
}

#main-nav #main-nav-left {
    float: left;
    padding-bottom: 5px;
    width: 758px;
}

#main-nav #main-nav-left a.first {
    padding-left: 24px;
}

#main-nav #login-form {
    float: right;
    width: 210px;
}

#main-nav #main-nav-right {
    float: right;
    /*position: absolute;
    right: 0;
    top: 0;*/
}

#main-nav #main-nav-right a {
    padding-right: 16px;
}

#main-nav #main-nav-right a.first {
    padding-right: 10px;
    padding-left: 0;
}

/* Rollover Navigation (2nd Level) */
#main-nav ul ul, #main-nav ul h3 {
    border: 1px solid #9fa3ab;
    display: none;
    left: -9999em;
    margin: 0;
    padding: 9px 10px 5px;
    position: absolute;
}

#main-nav ul h3 {
    background-color: #fff;
    border-bottom: 0 none;
    color: #878c96;
    font-size: 1.6em;
    /*overflow: visible;*/
    padding: 9px 10px 5px;
    top: -2px;
    z-index: 9990;
}

body.font-large #main-nav h3, body.font-large #main-nav a.jhover, body.font-large #main-nav #mn-meinebahn a {
    font-size: 1.344em;
}

body.font-xl #main-nav h3, body.font-xl #main-nav a.jhover, body.font-xl #main-nav #mn-meinebahn a {
    font-size: 1.152em;
}

#main-nav li#mn-login #mn-login-username-label {
    padding-top: 12px;
}

#main-nav li#mn-login label {
    display: block;
    font-size: 1em;
    margin: 0 16px;
    padding: 6px 0 2px;
}

#main-nav li#mn-login input {
    border: 1px solid #768086;
    color: #282D37;
    font-size: 1em;
    line-height: 1.2;
    margin: 0 8px;
    padding: 1px 4px 0;
    width: 162px;
}

#main-nav li#mn-login select {
    border: 1px solid #768086;
    color: #282D37;
    font-size: 1em;
    line-height: 1.2;
    margin: 0 8px;
    width: 172px;
}

/* Rollover Navigation (2nd Level), Breite des Rollover Layers */
#main-nav li#mn-angebotsberatung ul {
    width: 220px
}

#main-nav li#mn-fahrplan ul {
    width: 232px
}

#main-nav li#mn-services ul {
    width: 192px
}

#main-nav li#mn-bahncard ul {
    width: 228px
}

#main-nav li#mn-urlaub ul {
    width: 184px
}

#main-nav li#mn-login ul {
    width: 190px
}

#main-nav li#mn-login.rollover h3 {
    left: -6px
}

#main-nav li#mn-login.rollover ul {
    left: auto;
    right: 6px
}

#main-nav-left li.rollover h3, #main-nav-left li.rollover ul {
    left: 50%;
    margin-left: -54%
}

/* Hauptnavigation */
#main-nav #main-nav-left,
#main-nav #main-nav-right {
    padding-bottom: 0;
}

#main-nav #main-nav-left {
    margin-left: 8px;
}

#main-nav #main-nav-left a.first,
#main-nav #main-nav-right a.first {
    padding-left: 10px;
}

#main-nav a.fhover:hover {
    text-decoration: none;
}

#main-nav-left > li > a,
#main-nav-right > li > a {
    border-left: none;
    margin-top: 0;
    height: 54px;
    line-height: 44px;
}

#main-nav-left > li > a > span,
#main-nav-right > li > a > span {
    font-family: "DBScreenSansBold", "DBSansBold", "Arial", "Helvetica", sans-serif;
    font-size: 16px;
}

#main_nav_footer {
    background-color: #F00;
    left: 0;
    height: 13px;
    width: 980px;
    top: 0;
    z-index: 8000;
    position: absolute;
}

#main-nav ul li.active {
    background: #F0F3F5;
}

#main-nav ul li.active a {
    background-color: transparent !important;
}

#main-nav ul li.active a:hover {
    color: #282D37;
}

/********************/
/* Flyout           */
/********************/

/** ID 1425 aus portal.css */
#main-nav .flyout-content {
    display: none;
}
#main-nav-flyout-container {
    height: 0;
    overflow: visible;
    position: relative;
    width: 0;
    z-index: 11000;
}
#main-nav-flyout {
    display: none;
    height: 156px;
    left: 3px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 4px;
}
#main-nav-flyout-content {
    height: auto;
    padding: 0 0 5px 5px;
}
#main-nav-flyout-content.softlogin{
    height: auto;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding-bottom: 10px;
}

#main-nav-flyout-content .softlogin-flyout {
    float:right;
    font-size: 0.875em;
    line-height: 1.4;
}
.softlogin-flyout .arrowlink{
    margin-left: 6px;
    font-size: inherit;
}
.softlogin-border-top {
    border-top: solid 1px #e7e7e7;
    clear: left;
    padding-top: 10px;
}
.flyout-content-block {
    display: block;
    float: left;
    height: 130px;
    margin-left: 8px;
    width: 205px;
}
#main-nav-flyout .shadow-right {
    background: url("../img/home/home_sprite.png") no-repeat scroll right bottom rgba(0, 0, 0, 0);
    float: right;
    height: 156px;
    width: 9px;
}
#main-nav-flyout-content {
    float: left;
    padding: 0 0 5px 5px;
    -webkit-box-shadow: 0 3px 4px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 3px 4px 2px rgba(0,0,0,0.3);
    box-shadow: 0 3px 4px 2px rgba(0,0,0,0.3);
    background-color: white;
}
#main-nav-flyout-content .flyout-content-container {
    background-color: #fff;
    padding: 8px 8px 0 0;
    height: auto;
    word-wrap: break-word;
}
ul.flyout-content-block {
    height: auto;
    margin-bottom: 0;
    overflow: hidden;
    padding: 0 0 20px 0;
}
ul.flyout-content-block.first {
    margin-left: 12px;
}
ul.flyout-content-block li {
    width: 204px;
}
ul.flyout-content-block a {
    background: rgba(0, 0, 0, 0) url("../img/icon_arrow.png") no-repeat scroll left 19px;
    display: block;
    line-height: 24px;
    padding: 12px 0 0 17px;
    text-decoration: none;
    font-family: DBSansRegular;
    font-size: 14px;
}
ul.flyout-content-block a:hover {
    text-decoration: underline;
}
a.flyout-teaser {
    height: 130px;
    position: relative;
    width: 204px;
}
a.flyout-teaser.grey {
    background-color: #eaeaea;
}
a.flyout-teaser img {
    display: block;
    height: 102px;
    width: 204px;
}
a.flyout-teaser span {
    background: url("../img/icons.gif") no-repeat scroll 0 -997px rgba(0, 0, 0, 0);
    bottom: 8px;
    font-size: 11px;
    left: 10px;
    padding: 0 0 0 12px;
    position: absolute;
}
a.flyout-teaser:hover span {
    text-decoration: underline;
}
a.flyout-teaser.right {
    float: right;
}
#main-nav-flyout-tab {
    background-color: #ffffff;
    color: #333333;
    left: 4px;
    line-height: 63px;
    padding: 0 10px 64px;
    position: absolute;
    text-decoration: none;
    top: -64px;
    z-index: 10;
}
#main-nav-flyout-tab span {
    font-family: "DBScreenSansBold", "DBSansBold", "Arial", "Helvetica", sans-serif;
    font-size: 16px;
    white-space: nowrap;
}
#main-nav-flyout-tabsafe-left {
    height: 30px;
    position: absolute;
    top: -30px;
    width: 10px;
}
#main-nav-flyout-tabsafe-right {
    height: 30px;
    position: absolute;
    top: -30px;
    width: 10px;
    z-index: 20;
}
#main-nav-flyout-tabsafe-bottom {
    height: 12px;
    left: 5px;
    position: absolute;
    top: -12px;
}

#main-nav-flyout-tab.twolines {
    line-height: normal;
    top: -38px;
    background-color: transparent;
}

#main-nav-right li.softlogin .aufklapper {
    position: absolute;
    top: 13px;
    left: 186px;
}

#main-nav-flyout-tab.twolines .aufklapper {
    position: absolute;
    top: 5px;
    left: 186px;
}

#main-nav-right li.softlogin .aufklapper .icon {
    background-image: url(../img/arrow_down_white.png);
}

#main-nav-flyout-tab.twolines .aufklapper .icon {
    background-image: url(../img/icon-se530d055c2.png);
    background-position: 0 -143px;
}
#main-nav-flyout-tab.twolines .aufklapper .icon,
#main-nav-right li.softlogin .aufklapper .icon {
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    text-indent: 9999em;
    overflow: hidden;
    width: 24px;
    height: 24px;
}

#main-nav-flyout .flyout-login {
    border: 1px solid #ccc;
    height: 93px;
    margin: 27px 8px 8px 8px;
    *margin-top: 33px;
    padding: 4px;
    width: 417px;
}
#main-nav-flyout form {
    background-color: #f3f3f3;
    display: none;
    font-size: 11px;
    height: 88px;
    padding: 2px 10px 3px 10px;
    position: relative;
}
#main-nav-flyout form.active {
    display: block;
}
#main-nav-flyout .flyout-login-form-row {
    *height: 40px;
    margin-bottom: 8px;
}
#main-nav-flyout .flyout-login-form-col {
    float: left;
    width: 194px;
}
#main-nav-flyout .flyout-login-form-row .flyout-login-form-col:first-child {
    margin-right: 8px;
}
#main-nav-flyout .flyout-login-form-col .button-inside {
    float: right;
    padding-bottom: 0;
}
#main-nav-flyout .flyout-login-form-bottom-row {
    bottom: 0;
    left: 10px;
    position: absolute;
}
#main-nav-flyout label {
    display: block;
    padding: 4px 0 4px;
}
#main-nav-flyout input[type="text"],
#main-nav-flyout input[type="password"] {
    border: 1px solid #768086;
    height: 14px;
    line-height: 14px;
    padding: 0 5px;
    width: 182px;
}
#main-nav-flyout .flyout-login-form-row a,
#main-nav-flyout .flyout-login-form-bottom-row a {
    background: url("../img/icons.gif") no-repeat scroll 0 -997px rgba(0, 0, 0, 0);
    line-height: 24px;
    padding: 0 0 0 12px;
}
ul.flyout-login-tabs {
    left: -5px;
    list-style-type: none;
    position: absolute;
    top: -32px;
}
ul.flyout-login-tabs li {
    background-image: url("../img/login_tab_sprite.png");
    background-repeat: no-repeat;
    float: left;
    font-size: 11px;
    height: 32px;
    line-height: 28px;
    text-align: center;
}
ul.flyout-login-tabs li a {
    color: #282D37;
    text-decoration: none;
}
ul.flyout-login-tabs li.first {
    background-position: 0 0;
    padding-left: 15px;
}
ul.flyout-login-tabs li.tab-spacer {
    background-position: -34px -128px;
    width: 34px;
}
ul.flyout-login-tabs li.last {
    background-position: right -96px;
    font-weight: bold;
    padding-right: 15px;
}
ul.flyout-login-tabs.active-first li.first {
    background-position: 0 -32px;
    font-weight: bold;
}
ul.flyout-login-tabs.active-first li.tab-spacer {
    background-position: 0 -128px;
}
ul.flyout-login-tabs.active-first li.last {
    background-position: right -64px;
    font-weight: normal;
}

/** Zusätzliches DIV, dass richtige Positionierung von relative-Elementen
 unterhalb z.B. der Flyouts gewährleistet.
 */
div.content-positioner {
    position: relative;
    height: 0;
    max-height: 0;
}

/* Softlogin */
#softlogin-wrapper {
    background-color: #f5f5f5;
    border-bottom: 1px solid #878c96;
    height: 36px;
    color: #282D37;
    font-family: "DBScreenSansRegular", "DBSansRegular", "Arial", sans-serif;
}

.softlogin-list {
    float:right;
    margin-right: 16px;
}

.softlogin-list-item {
    float:left;
    margin: 8px 0 4px 0;
    font-size: 14px;
    line-height: 20px;
}

#softlogin-greeting {
    border-left: none;
    border-right: 1px solid #646973;
    padding-right: 16px;
}

/********************/
/*    Key Visual    */
/********************/

#key-visual {
    position: relative;
    z-index: 99;
}

#verteilerseite #key-visual {
    height: 248px;
}

#key-visual div.bar {
    height: 16px;
    background-color: #f00;
    left: 0;
    position: absolute;
    top: 0;
    width: 752px;
    z-index: 100;
}

#key-visual img {
    margin-bottom: 0;
}

#key-visual #tarifberater span.button-border {
    left: 540px;
    position: absolute;
    top: 105px;
}

/**********
 * Footer *
 **********/

#footer {
    position: relative;
}

#footer-nav {
    background-color: #f00;
    margin: 0;
    width: 100%;
    height: 32px;
    text-align: right;
    z-index: 99;
}

#footer-nav ul {
    display: inline-block;
    margin: 0;
    padding: 11px 0;
    zoom: 1;
}

#footer li {
    display: block;
    float: left;
}

#footer li span,
#footer li a {
    border-left: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font-size: 0.9em;
    line-height: 1;
    margin: 0;
    padding: 0 10px;
}

#footer li a:hover, #footer li a:focus, #footer li a:active {
    color: #fff;
}

#footer li a.active {
    font-weight: bold;
}

#footer li span {
    border-left: 0 none;
}

#footer-logo {
    bottom: 1.8em;
    /*height: 28px;*/
    overflow: hidden;
    margin: 0 16px 8px 0;
    padding: 0;
    position: absolute;
    right: 0;
    /*width: 87px;*/
}

#footer-logo img {
    margin: 0;
}

#footer div.bar {
    background-color: #f00;
    bottom: 0;
    height: 22px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 9;
}

#print-footer {
    display: none;
}

/** Container fuer Code, der nur OHNE JS angezeigt werden soll.
	Wird im Falle JS aktiv in bahn-dyn.css ueberschrieben */
.show-non-js {
    display: inline;
}

/** Das gleiche für Block-Elemente */
.show-non-js-block {
    display: block;
}

/** Container fuer Code, der nur MIT JS angezeigt werden soll.
	Wird im Falle JS aktiv in bahn-dyn.css ueberschrieben */
.show-with-js,
.show-with-js-block {
    display: none;
}

/*---------------------------------------------------------------------
 * Modaler Layer
 *---------------------------------------------------------------------*/
div.modallayer-layer {
    position: absolute;
    left: -9999px;
    z-index: 22000;
    width: 100%;
    top: 0;
}

div.modallayer-layer.active {
    left: 0;
}

div.modallayer-content {
    border: 2px solid #CCCCCC;
    padding-left: 10px;
    margin: 0 auto;
}

div.modallayer-fadeout {
    background-color: #000000;
    left: -9999px;
    top: 0;
    width: 100%;
    z-index: 10004;
    position: absolute;
    opacity: 0.3;
}

div.modallayer-fadeout.active {
    left: 0;
}

div.modallayer-layer div.header {
    padding: 0 8px 8px 8px;
}

div.modallayer-layer div.header h2 {
    padding-top: 4px;
}

div.modallayer-content {
    padding: 20px;
}

div.modallayer-body.loading {
    background: url(../img/icon-loading-circle.gif) 50% 40% no-repeat;
    height: 200px;
}

/*
 * hidden defaultbutton which works for
 * IE6, IE7, Firefox and Safari too.
 * background wegen Safari
 * (von bahn.css übernommen)
 */
.hiddenSubmit {
    position: absolute;
    left: -9999px;
    background: none;
}

/*********************
 * Type-ahead / fSuggest
 *********************/
#suggestion {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.4);
    font-family: DBSansRegular;
    left: -1px;
    margin-top: 11px;
    padding: 10px 0;
    border:none !important;
}

#suggestion::before {
    background: #fff none repeat scroll 0 0;
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.12);
    content: "";
    display: block;
    height: 10px;
    width:10px;
    left: 10px;
    position: absolute;
    top: -4px;
    transform: skew(0deg) rotate(135deg);
    -ms-transform: skew(0deg) rotate(135deg);
    -webkit-transform:skew(0deg) rotate(135deg);
}

#suggestion #suggestionCon {
    overflow-x: hidden;
    overflow-y: auto;
    margin:0;
    padding:0;
}

#suggestion #suggestionCon div {
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    padding: 0 7px;
    margin:0;
    font-size:0.875em;
    white-space: nowrap;
}

#suggestion .selected,
#suggestion .selected span,
#suggestion #suggestionCon div:hover {
    background-color: #e7e7e7 !important;
}

#suggestion hr {
    background-color: #000;
    margin:0;
}
