* {  
   -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;
}

body {
    overflow-y: scroll;
    -webkit-transition-property: background, color;-moz-transition-property: background, color;-ms-transition-property: background, color;-o-transition-property: background, color;transition-property: background, color;
    -webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;-ms-transition-duration: 0.4s;-o-transition-duration: 0.4s;transition-duration: 0.4s;
}

h1 {
    margin-top: 0;
}

    h1 sup {
        font-size: 50%;
    }

del {text-decoration: line-through;}
add {font-weight: bold; text-decoration: underline;}

#wrap {
    padding-right: 30%;
    padding-bottom: 400px;
}

    #nav {
        position: fixed;
        top: 0px;
        right: 0px;
        width: 30%;
    }

        #nav p {
            margin-top: 0;
        }

        #nav ul.tags > li {
            margin-bottom: 0.2em;
            /* float: none; */
        }

            #nav h2 {
                margin-bottom: 0;
                font-size: inherit;
                clear: left;
                padding-top: 1em;
            }
                #nav li:nth-child(1) h2 {
                    padding: 0;
                }



#tags_by_name, #tags_by_group, #tags_by_count {display: none;}


#reset { margin-top: 1em; }


ul.groups, ul.groups ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    li.group {
        float: left;
    }


ul.sitemap,
ul.sitemap > li > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li.year {
    clear: left;
    padding-top: 1em;
    display: block;
}

    li.year.inactive {
        display: none;
    }

    span.year {
        display: block;
        float: left;
        width: 8ex;
    }

        ul.projects {
            float: left;
            max-width: 70%;
        }

            ul.projects > li {
                padding-bottom: 0.5em;
                clear: left;
                overflow: hidden;
            }

            ul.projects h1,
            ul.projects h2 {
                padding: 0;
                margin: 0;
                font-size: inherit;
            }

            ul.projects h2 {
                font-weight: normal;
            }

            ul.projects ul.tags {   
                font-size: 80%;
            }

li.project.inactive {
    height: 0;
    padding: 0;
}
    li.project.inactive > section{
        
    }

li.project {
    height: auto;
    overflow: hidden;
    /* -webkit-perspective: 500px;-moz-perspective: 500px;-ms-perspective: 500px;-o-perspective: 500px;perspective: 500px; */
    -webkit-transition-property: height;-moz-transition-property: height;-ms-transition-property: height;-o-transition-property: height;transition-property: height;
    -webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;-ms-transition-duration: 0.4s;-o-transition-duration: 0.4s;transition-duration: 0.4s; 
}
    li.project > section {
        -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-o-backface-visibility: hidden;backface-visibility: hidden;   
        -webkit-transition-property: padding height;-moz-transition-property: padding height;-ms-transition-property: padding height;-o-transition-property: padding height;transition-property: padding height;
        -webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;-ms-transition-duration: 0.4s;-o-transition-duration: 0.4s;transition-duration: 0.4s;   
    }