@charset "utf-8";
/* CSS Document */
#vertical { 
	position: fixed; /* absolute Positionierung des gesamten Codes */
	left: 1%; /*Abstand links*/
	z-index: 5; /*Höhe auf der Z-Ebene (in den Vordergrund)*/
}

/* Ungeordnete Liste */
#vertical ul{
	background: #153363; /* Hintergrundfarbe */
	width: 180px; /* Breite */
    list-style:none; /* kein Listen-stil, keine "Bullets"*/
    margin:0px; /*kein Rand aussen*/
    padding:0px; /* kein Rand innen */	
}

/*Listenpunkte */
#vertical ul li {
    position:relative; /*relative Positionierung der 
    					Listenpunkte, damit Unterpunkte 
    					absolut positioniert werden können.*/
}

/* Links */
#vertical a {
    color:#f9f9f9; /* Schriftfarbe */
    padding:12px 0px; /* Abstände innerhalb */
    display:block; /* Block-Anzeige, jedes Element neue Zeile */
    text-decoration:none; /*keine Unterstreichung*/
    transition:1s; /* Fliessende Bewegung */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    font-family:Playfair Display; /* Schriftart */
    font-weight: bold; /* Fett */
    font-size:16px; /* Schriftgrösse */
    padding-left:20px; /* Abstand links */
}

/* Links Hoverzustand */
#vertical a:hover {
    background: RGBA(255,255,255,0.05); /* Hintergrundfarbe */
    color:#fff; /* Schrifrfarbe */
    font-style: italic;  /* Kursiv */
}
/* DROPPING MAGIC
---------------------------------------*/
/*Verhalten der Unterlisten bei Hover */
#vertical ul li:hover ul {
display:block; /* Blockanzeige der Unterlisten */
}
/*Submenulisten*/
#vertical ul ul {
position:absolute; /* Absolute Positionierung */
left:180px; /*Abstand Links (breite des Hauptmenüs) */
top:0; /*Abstand oben */
border-top:1px solid #e9e9e9; /* oberer Rand */
display:none; /* Keine Anzeige, wenn li nicht gehovert */
}
/*Listenelemente Submenu */
#vertical ul ul li {
width:170px; /* Breite */
background:#DCE1E8; /*Hintergrundfarbe*/
border:1px solid #D5D7DB; /*Rand*/
border-top:0; /*Rand oben*/
}
/* Links Submenu */
#vertical ul ul li a {
color:#476EA8; /* Schriftfarbe */
font-size:15px; /* Schriftgrösse */
}
/* Links Submenu Hoverzustand */
#vertical ul ul li a:hover {
color:#153363; /*Schriftfarbe */
letter-spacing: 1px; /*Buchstabenabstand*/
background: #E86F00;
}

/* TRIANGLES
------------------------------*/
/*Span-Elemente*/
#vertical span {
border-color: transparent #aaa transparent transparent; /*Dreieckfarbe */
border-style:solid; /*Randstyle*/
border-width:7px; /*Dreiecksgrösse*/
width:0; /*Breite (muss 0 sein)*/
height:0; /* Höhe (muss 0 sein*/
display:inline-block; /* Anzeigeart */
float:right; /* rechtsbündig */
margin-right:7px; /* Rand rechts */
position:relative; /* Positionierung */
transition:all 0.5s; /* Transition */
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
/*Span im Hoverzustand */
#vertical a:hover span {
border-color: transparent #fff transparent transparent ; /* Dreieckfarbe */
transform:rotate(180deg); /* Rotation 180° */
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}