/***** 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; } }