#main li li, #main h2 { /* hide songs and titles */
    display: none;
}
#main li:target, #main li:target h2, #main li:target li { /* show songs and/or titles if in selected target */
    display: block;
}
#main li li:target { /* hide bottom border if only one song is shown */
    border-bottom: 0 none;
}


/* === show/hide menu === */
nav ol {
    position: relative;
}
nav li ol {
    display: none;
    height: 100%;
    padding: 0 2% 0 0;
    position: absolute;
    right: 100%;
    text-align: right;
    top: 0;
}
nav a:link, nav a:visited, nav a:focus, nav a:hover, nav a:active {
    padding-left: 0.25em;
    white-space:nowrap;
}
nav li:hover ol, nav li:focus ol {
    display: block;
}
nav li:hover a.album, nav li:focus a.album {
    background-color: #333;
}
nav > ol > li {
    margin: 0;
    padding: 1em 0 0;
}
nav > ol > li:first-of-type {
    margin-top: 1em;
    padding: 0;
}

/* === menu effect === */
/* first */
nav li:nth-child(n+6) ol {
    border-top: 1px solid #666;
}
nav li:nth-child(n+6):hover a.album {
    border-bottom: 1px solid #666;
}
nav > ol > li:nth-child(n+6):hover {
    border-left: 1px solid #666;
    margin-left: -1px;
}
nav > ol > li:nth-child(n+6):hover ~ li {
    border-left: 1px solid #111;
    margin-left: -1px;
}
nav li:nth-child(n+6):hover ol {
    margin-right: 1px;
    margin-top: -1px;
    padding-top:0.25em;
}
nav > ol:hover {
    border-left: 1px solid #666;
}

/* second */
nav li:nth-child(-n+5) ol {
    border-bottom: 1px solid #666;
    border-right: 1px solid #111;
}
nav li:nth-child(-n+5):hover a.album {
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    position: relative;
    z-index: 10;
}
nav > ol > li:nth-child(-n+5):hover {
    margin-left: -1px;
}
nav > ol > li:nth-child(-n+5):hover ~ li {
    border-left: 1px solid #666;
    margin-left: -1px;
    position:relative;
    z-index:100;
}
nav li:nth-child(-n+5):hover ol { /* can't set height different than 100% */
    bottom: 0;
    display: table;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0.5em;
    top: auto;
    margin-bottom: -1px;
}
nav li:nth-child(-n+5):hover ol:before { /* element to push downward the list */
/*    background-color: green;*/
    content: "";
    display: block;
    height: 9999px;
    width: 100%;
}


/* === songs counter === */
nav li li {
    clear: both;  /* for webkit that shows the <LI> all of the same width */
    float: right; /* for webkit that shows the <LI> all of the same width */
    font-size: 0.8em;
    list-style: decimal outside none;
}
nav li li a {
    font-size: 1.1em;
}
nav li:last-of-type li { /* last one it's not an album, so no track number */
    list-style-type: circle;
}
/* use counter and content properties if list-style doesn't fit */
/*nav li li {
    counter-increment: song;
}
nav li li:before {
    content: counter(song)")";
    font-size: 0.8em;
    padding: 0 0.5em;
}*/


body {
    padding: 0 0 0 3.5em;
}
nav {
    position: fixed;
    right: 0;
}
#main {
    margin-top: 0;
}
header h1 {
    margin: 0;
}
header {
    -moz-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    -webkit-transform: rotate(-90deg);  
    transform: rotate(-90deg);  
    /*filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',  
          M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
          M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, 
          sizingMethod='auto expand')";*/
    zoom: 1;
    
    /* change origin to left-bottom */
    -moz-transform-origin:0 100%;
    -webkit-transform-origin:0 100%;
    -o-transform-origin:0 100%;
    transform-origin:0 100%;
    
    text-shadow: 1px 1px 1px #333;
    
    bottom: 5em;
    color: #222;
    left: 4em;
    position: fixed;
    text-align: left;
    white-space: nowrap;
}