/ CSS For Side Bar Scroll Navigation /
ul.scroll-nav { padding: 0; margin: 0; display: block; position: fixed; right: 0; top: 50%; margin-top: -155px; list-style-type: none; width: 60px; z-index: 100; }

/* Adjustment For Minimum Head-Space Above Side Bar (Larger Displays Only) /
@media only screen and (min-width: 769px) and (max-height: 500px) { ul.scroll-nav { top: 250px; } }

/ Styles for List Items /
ul.scroll-nav li {display: block;
height: 60px;
width: 60px;
margin: 2px 0;}

/ Styles for Links within List Items /
ul.scroll-nav li a { display: block; width: 60px; height: 100%; color: white; text-decoration: none; position: relative; background-repeat: no-repeat; background-position: center; }

/ Styles for List Item Labels /
ul.scroll-nav li a em { font-family: 'League Gothic'; font-style: normal; display: block; position: absolute; }

/ Colors and Images Links /
ul.scroll-nav li a.apply { background-color: rgb(68, 68, 68); background-image: url(/academics/images/2015/dept/intro-50.png); }
    ul.scroll-nav li a.explore { background-color: rgb(115, 116, 117); background-image: url(/images/2015/explore-50.png); }
    ul.scroll-nav li a.connect { background-color: rgb(69,182,224); background-image: url(/images/2015/connect-50.png); }
    ul.scroll-nav li a.engage { background-color: rgb(56,108,145); background-image: url(/images/2015/engage-50.png); }
    ul.scroll-nav li a.visit { background-color: rgb(153,0,38); background-image: url(/images/2015/visit-50.png); }

ul.scroll-nav li a { background-color: rgb(68, 68, 68); }
    ul.scroll-nav li + li a { background-color: rgb(115, 116, 117); }
    ul.scroll-nav li + li + li a { background-color: rgb(69,182,224); }
    ul.scroll-nav li + li + li + li a { background-color: rgb(56,108,145); }
    ul.scroll-nav li + li + li + li + li a { background-color: rgb(153,0,38); }

/ Styles for Larger Displays /
@media only screen and (min-width: 769px) {
    
    / Style Popout /
    ul.scroll-nav li:hover, ul.scroll-nav li.preview  { width: 160px; }
    
    / Style Text for Popout /
    ul.scroll-nav li a em { display: block; text-transform: uppercase; top: 0; right: 100%; width: 0; height: 100%; height: 60px; font-size: 28px; padding: 16px 0; line-height: 1.0; overflow: hidden; text-align: center;
        / Transition w/ .1s delay /
        -moz-transition: width .15s .1s ease-out; -ms-transition: width .15s .1s ease-out; -o-transition: width .15s .1s ease-out; -webkit-transition: width .15s .1s ease-out; transition: width .15s .1s ease-out;  }
    
    ul.scroll-nav li:hover a em, ul.scroll-nav li.preview a em {  width: 100px;
        / Transition w/o delay /
        -moz-transition: width .15s ease-out; -ms-transition: width .15s ease-out; -o-transition: width .15s ease-out; -webkit-transition: width .15s ease-out; transition: width .15s ease-out; transition: width .15s ease-out; }
    
    / Background Colors for Popouts /
    ul.scroll-nav li a.apply em { background-color: rgba(68, 68, 68, 0.7); }
    ul.scroll-nav li a.explore em { background-color: rgba(115, 116, 117, 0.7); }
    ul.scroll-nav li a.connect em { background-color: rgba(69,182,224, 0.7); }
    ul.scroll-nav li a.engage em { background-color: rgba(56,108,145, 0.7); }
    ul.scroll-nav li a.visit em { background-color: rgba(153,0,38, 0.7); }

    ul.scroll-nav li a em { background-color: rgba(68, 68, 68, 0.7); }
    ul.scroll-nav li + li a em { background-color: rgba(115, 116, 117, 0.7); }
    ul.scroll-nav li + li + li a em { background-color: rgba(69,182,224, 0.7); }
    ul.scroll-nav li + li + li + li a em { background-color: rgba(56,108,145, 0.7); }
    ul.scroll-nav li + li + li + li + li a em { background-color: rgba(153,0,38, 0.7); }
     }
/ Styles for Small Displays / Mobile Devices /
@media only screen and (max-width: 768px) {
    
    / Reposition Scroll-Nav to Bottom /
    ul.scroll-nav { top: auto; right: auto; left: 0; bottom: -2px; height: 70px; width: 100%; overflow: hidden; margin-top: 0; }
    
    / Styles for LIs /
    ul.scroll-nav li { display: block; float: left; width: 20%; height: 100%; text-align: center; margin: 0; }
    
    / Styles for Links /
    ul.scroll-nav li a { background-position: top center; width: 100%; }
    
    / Styles for Text /
    ul.scroll-nav li a em { display: block; width: 100%; height: auto; left: 0; bottom: 0; font-size: medium; padding: 6px 3px; text-transform: uppercase;} }

/ Styles for Landscape Orientation /
@media only screen and (max-width: 768px) and (max-height: 420px) {
    
    / Reposition Scroll-Nav /
    ul.scroll-nav { width: 60px; top: 0; right: 0; bottom: auto; left: auto; height: 100%; overflow: auto; background-color: silver;}
    
    / Styles for LIs /
    ul.scroll-nav li { float: none; height: 20%; width: 100%; min-height: 64px; overflow: auto; }

    / Style for Text /
    ul.scroll-nav li a em { padding: 6px 3px; } }