@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@font-face {
    font-family: 'function';
    src: url('../fonts/FunctionPro-Book-webfont.eot');
    src: url('../fonts/FunctionPro-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FunctionPro-Book-webfont.woff') format('woff'),
         url('../fonts/FunctionPro-Book-webfont.ttf') format('truetype'),
         url('../fonts/FunctionPro-Book-webfont.svg#function_probook') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
@font-face {
    font-family: 'function';
    src: url('../fonts/FunctionPro-BookOblique-webfont.eot');
    src: url('../fonts/FunctionPro-BookOblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FunctionPro-BookOblique-webfont.woff') format('woff'),
         url('../fonts/FunctionPro-BookOblique-webfont.ttf') format('truetype'),
         url('../fonts/FunctionPro-BookOblique-webfont.svg#function_probook_oblique') format('svg');
    font-weight: normal;
    font-style: italic;
}*/

@font-face {
    font-family: 'function';
    src: url('../fonts/FunctionPro-Bold-webfont.eot');
    src: url('../fonts/FunctionPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FunctionPro-Bold-webfont.woff') format('woff'),
         url('../fonts/FunctionPro-Bold-webfont.ttf') format('truetype'),
         url('../fonts/FunctionPro-Bold-webfont.svg#function_pro_bookbold') format('svg');
    font-weight: bold;
    font-style: normal;
}


a {
    text-decoration: none;
    color:yellow;
}

a:hover {
    //color:inherit;
    text-decoration: none;
}
a:link {
    //color:inherit;
    text-decoration: none;
}
a:visited {
    //color:inherit;
    text-decoration: none;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color:#FFFFFF;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.0 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/*** TEXT **/



.title-bold {
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:30px;
    color:#FFFFFF;
}

.title-book {
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:normal;
    font-size:26px;
    color:#FFFFFF;
    display:inline;
}

.title-block {
    display:inline;
}

.binomial {
    font-family:'Open Sans', Arial, sans-serif;
    font-weight:normal;
    font-style: italic;
}

.slash {
    display:inline;
}


/** ELEMENTS **/

p {
    margin-bottom:16px;
    display:block;
}

header {
   //max-width:640px;
}

footer {
    background:#101010;
}

.footer-container {
    margin:0 auto;
    position:relative;
    width:70%;
    max-width:1024px;
    min-width:768px;
    background: url(../img/drop-shadow.png) no-repeat center top;
    height:100px;

    padding-top:40px;
}

.footer-logo {
    position:relative;
    width:40%;
    min-width:300px;
    display:inline;
    box-sizing: border-box;
}

.footer-logo img {
    width:100%;
    max-width:300px;
}

.footer-links {
    right:0px;
    font-size:12px;
    display:inline;
    box-sizing: border-box;

    min-width:454px;
}

.footer-links ul {
    margin-top:20px;
    float:right;
    display:inline-block;
}


footer a {
    color:#ffffff;
}


nav { 
    height: 32px;
    margin-top:30px;
    margin-bottom:30px;
}

nav a {
    color:#FFFFFF;
}

.footer-nav-item {
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    color:#FFFFFF;
    text-align:center;
    display:inline-block;
    float:left;
    margin-right: 8px;
    padding:4px 12px;
    padding-right:24px;
    cursor:pointer;
    position:relative;
    box-sizing: border-box;
    background: no-repeat url(../img/nav-arrow.png) right 10px center;
}


.nav-item {
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:16px;
    color:#FFFFFF;
    text-align:center;
    display:inline-block;
    float:left;
    margin-right: 16px;
    padding:4px 12px;
    padding-right:24px;
    cursor:pointer;
    position:relative;
    box-sizing: border-box;
    background: no-repeat url(../img/nav-arrow.png) right 10px center;
}


/* section headings */
h1 { 
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:24px;
    color:#FFFFFF;
    padding:4px 32px;
    margin-bottom: 32px;
    display: inline-block;

    box-sizing: border-box;

}


/* subheadings over paragraphs */
h2 { 
    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:normal;
    font-size:24px;
    margin-bottom: 16px;

    margin-top:16px;
    display: inline-block;
    //max-width:640px;
}


/* student / faculty name */
h3 { 
    font-family:'Open Sans', Arial, sans-serif;
    font-weight:normal;
    font-size:20px;
    margin-bottom: 0px;
    display: inline-block;

}


/* subheadings over student bio items */
h4 { 
    font-family:'Open Sans', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    margin-bottom:0px;
    text-transform:uppercase;
    display:block;
}

/* Listing headers */
h5 { 
    font-family:'Open Sans', Arial, sans-serif;
    font-weight:normal;
    font-size:16px;
    margin-bottom: 0px;
    display: block;
}



.start { 
    position:relative; 

}


.list-block {
    padding:20px;
    margin:20px 0px;

    background-color: #36668e; 
    background: -webkit-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:    -moz-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:     -ms-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%);
    background:      -o-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:         linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%);
}

.list-block ul {
    padding-top:16px;
}


.list-block li {
    display:block;
    position:relative;
    min-height:32px;

    padding-left:16px;
    padding-top:12px;
    margin-bottom:4px;

    font-size:14px;

    background-color: #13b0ee;
    background: -webkit-linear-gradient(110deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 30%);
    background:    -moz-linear-gradient(110deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 30%);
    background:     -ms-linear-gradient(110deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 30%);
    background:      -o-linear-gradient(110deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 30%);
    background:         linear-gradient(150deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 30%);
}


.list-block ol {
    padding-top:16px;
    counter-reset: li;
    position:relative;
}

.list-block ol > li {
    padding-left:50px;
}

.list-block ol > li:before {
    content: counter(li);
    counter-increment:li;

    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-weight:bold;
    font-size:16px;

    position:absolute;
    left:8px;
    top:8px;

    background-color: #13b0ee;
    padding:5px 8px;

    opacity:0.7;
    box-sizing:border-box;
}









/**  IMAGES  **/
.eagle {
    
    background:url(../img/eagle-sun.png) no-repeat;
    position:absolute;
    top:-115px;
    right:-180px;
    z-index:-1;
    width:417px;
    height:393px;
    background-size:100%;
}

.intro {
    width:82%;
}


/** STRUCTURE **/

.content-main {
    width:100%;
    clear:both;
}


.content-container {
    margin:0 auto;
    position:relative;
    width:70%;
    max-width:1024px;
    min-width:768px;
    padding:24px;

    box-sizing:border-box;

    background-image: url(../img/content-bg.png);
    background-position: top left;
    background-repeat: no-repeat;

    z-index:1;
}



.header-container {
    margin:0 auto;
    display:relative;
    width:70%;
    max-width:1000px;
    padding:24px;
}



.left-column {
    width:17%;
    float:left;
}

.right-column {
    width:17%;
    float:left;
} 



/*** BG STRUCTURE ***/

.background { z-index:-1; position:absolute; width:100%; height:100%;}


.sky {

    position:static;
    padding-top:24px;
    padding-bottom:48px;
    background-color:#3f65b2;
    background: no-repeat url(../img/bg-sky.jpg), #3f65b2;

    background-position: bottom center;
    background-size: 100%;
}



.salmon {
    width:100%;
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    background: no-repeat url(../img/salmon.png) top right;
}

.sea-above-top {
    position:relative;

    min-height:600px;
    padding-top:72px;
    
    background: no-repeat url(../img/bg-sea-above-top.png), -webkit-linear-gradient(180deg, #7ea5d4, #3173af, #1f517d 80%);
    background: no-repeat url(../img/bg-sea-above-top.png), -moz-linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);
    background: no-repeat url(../img/bg-sea-above-top.png), -ms-linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);
    background: no-repeat url(../img/bg-sea-above-top.png), -o-linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);
    background: no-repeat url(../img/bg-sea-above-top.png), linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);

    background-position: top center;
    background-size: 100%;
}

.sea-above-bottom {
    position:relative;

    height:100%;

    background: no-repeat url(../img/bg-sea-above-bottom.jpg);
    background-size: 100%;
    background-position: bottom center;

    padding-bottom:14%;
}



.sea-below-top {
    min-height:600px;
    padding-top:48px;
   
    background: no-repeat url(../img/bg-sea-below-top.png), -webkit-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 80%);
    background: no-repeat url(../img/bg-sea-below-top.png), -moz-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 80%);
    background: no-repeat url(../img/bg-sea-below-top.png), -ms-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 80%);
    background: no-repeat url(../img/bg-sea-below-top.png), -o-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 80%);
    background: no-repeat url(../img/bg-sea-below-top.png), linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 80%);

    background-position: top center;
    background-size: 100%;
}


.sea-below-bottom {
    position:relative;

    height:100%;
    
    background: no-repeat url(../img/bg-sea-floor-top.jpg);

    background-position: bottom center;
    background-size: 100%;

    padding-bottom:12%;
}
.sea-below-deep {
    position:relative;

    min-height:600px;
    padding-top:64px;

    padding-bottom:48px;

    background: no-repeat url(../img/bg-sea-floor-bottom.jpg), #020508;
    
    background-position: top center;
    background-size: 100%;
}


.left-island {

    position:absolute;
    width:350px;
    height:100%;
    right:77%;
    top:-50px;

    background: no-repeat url(../img/left-island.png) top right;
    background-size:100%;
    z-index:1;
}



.arbutus {
    position:absolute;
    width:600px;
    height:100%;
    left:60%;
    right:0;
    top:340px;
    padding-top:0px;

    background: no-repeat url(../img/arbutus.png) top right;
    background-size:100%;
    z-index:1;
}







/*** UTIL  ***/

.left { float:left ;}
.right { float:right;}





/*** student bios   */

.media {margin:10px;}


.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}


.bios-container {
    margin-top:40px;
    margin-left:20px;
}

.student-bio {
    height:auto;
    padding:8px;
    
    display:block;
    position:relative;
   
    overflow:hidden;
    margin-top:10px;

    background-color: #1b7e87;
    background: -webkit-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
    background: -moz-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
    background: -ms-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
    background: -o-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
    background: linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);

}


.student-bio-expanded {
    background: -webkit-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
    background: -moz-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
    background: -ms-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
    background: -o-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
    background: linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
}

.student-info-left {
    float:left;
    position:relative;
    margin-right:10px;
    cursor:pointer;
}



.student-info-right {
    overflow:hidden;
    display:relative;
    height:auto;
   // background: no-repeat url(../img/student-bio-bg.png) top left;
}

.student-info-right .expanded {
    height:auto;
}


.student-photo {
    float:left;
    border: solid 4px #13a224;
    background-color: #202020; 
    box-sizing:border-box;
    height:80px;
    width:256px;
    overflow:hidden;

    background-image: url(../img/student-placeholder.jpg) no-repeat;

    -webkit-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -moz-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -ms-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -o-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    transition: all 0.3s cubic-bezier(.14,1,.95,1);
}

.student-photo-expanded {
    height:256px;
}

.student-photo > img {
    width:256px;
    height:256px;
    position:relative;
    bottom:0px;

    -webkit-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
    transform-origin : 50% 100%;

    -webkit-transform : translateZ(0.0) scaleY(80.0);
    -moz-transform : translateZ(0.0) scaleY(80.0);
    -ms-transform : translateZ(0.0) scaleY(80.0);
    -o-transform : translateZ(0.0) scaleY(80.0);
    transform : translateZ(0.0) scaleY(80.0);
}

.student-photo-expanded > img{
    height:256px;
    width:256px;
    position:relative;
    bottom:0px;

    -webkit-transform-origin : 50% 100%;
    -moz-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
    -o-transform-origin : 50% 100%;
    transform-origin : 50% 100%;

    -webkit-transform : translateZ(0.0) scaleY(1.0);
    -moz-transform : translateZ(0.0) scaleY(1.0);
    -ms-transform : translateZ(0.0) scaleY(1.0);
    -o-transform : translateZ(0.0) scaleY(1.0);
    transform : translateZ(0.0) scaleY(1.0);

    -webkit-transition: all 0.3s cubic-bezier(.25,1,.95,0.7);
    -moz-transition: all 0.3s cubic-bezier(.25,1,.95,0.7);
    -ms-transition: all 0.3s cubic-bezier(.25,1,.95,0.7);
    -o-transition: all 0.3s cubic-bezier(.25,1,.95,0.7);
    transition: all 0.3s cubic-bezier(.15,1,1,0.7);

}

.student-expanded-content {
    margin-top:10px;
}

.info-minimal {
    height:80px;
    margin:0px;
}

.info-expanded {
    display:none;
}

/** a header and div combo for student info */
.student-info-item {
    margin-top:16px;
    margin-bottom:12px;
    font-size:13px;
}

.student-info-item h4 {
    text-transform:uppercase;
}

.student-info-item p {
    margin-bottom:8px;
}

/** the more/less button beneath the info-minimal block **/
.info-expander {
    top:4px;
    left:4px !important;
    right:auto !important;

    position:absolute;
    display:block;
    width:75px;
    height:24px;
    padding:1px 10px;
    box-sizing:border-box;

    font-family:'function', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;

    overflow:hidden;
    background: #13a224 no-repeat 58px 10px;
    background-image: url(../img/nav-arrow-up.png) ;
    height:24px;

    -webkit-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -moz-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -ms-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    -o-transition: all 0.3s cubic-bezier(.14,1,.95,1);
    transition: all 0.3s cubic-bezier(.14,1,.95,1);

    z-index:1;
}


.info-less {


}

.info-more {
    background-image: url(../img/nav-arrow-down.png);
    height:24px;
}



.faculty {
    overflow:auto;
    margin-bottom:24px;
}

.adjuncts {
    overflow:auto;
    margin-bottom:24px;
    margin-top:20px;
}


.faculty-item {

    font-size:11px;
    float:left;
    margin-bottom:10px;
    padding:8px;
    padding-right:0px;
    height:80px;

    width:48%;

    background-color: #1b7e87;
    background: -webkit-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:    -moz-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:     -ms-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:      -o-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:         linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
}

.faculty-photo {
    position:relative;
    float:left;
    width:80px;
    height:80px;
    margin-right:8px;
    
    background-image:url(../img/faculty-placeholder.jpg);
    background-size: 100%;
    box-sizing:border-box;
    border: solid 4px #13b0ee;
}


.faculty-photo img {
    width:72px;
    height:72px;
}

.faculty-info {
    float:left;
    width:250px;
}


.career-list-block {
    padding:20px;
    margin:00px 0px;

    background-color: #36668e; 
    background: -webkit-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:    -moz-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:     -ms-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%);
    background:      -o-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
    background:         linear-gradient(160deg, rgba(145,122,192,0.1), rgba(145,122,192,0.0) 100%);
}
.career-items {
    margin-top:20px;
}

.career-item {
    margin-top:10px;
    padding:8px;
    padding-right:0px;
    min-height:80px;
    position:relative;
   
    background-color: #1b7e87;
    background: -webkit-linear-gradient(90deg, rgba(134,124,00,0.5), rgba(134,124,00,0.0) 100%);
    background:    -moz-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:     -ms-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:      -o-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    background:         linear-gradient(90deg, rgba(88,64,136,0.3), rgba(145,122,192,0.0) 100%);

    overflow:auto;
}

.career-percent {
    width:80px;
    height:80px;
    position:relative;

    text-align:center;
    line-height:64px;
    font-size:36px;
    font-family:'function','Open Sans', Arial, sans-serif;
    font-weight:bold;

    background-image:url(../img/percent-bg.jpg);
    float:left;

    margin-right:10px;
    box-sizing:border-box;
    border: solid 4px rgba(145,122,192,0.3);
}

.career-percent:after {
    
    content:"percent";
    font-size:12px;
    bottom:-12px;
    left:15px;
    position:absolute;
    opacity:0.5;
}

.career-description {
    float:left;
    font-size:13px;
    width:80%;
    height:100%;
}

    /** COLORING **/

.fill-debug { background-color: rgba(0,255,0,0.5); }

.fill-blue  { background-color: #13b0ee; }
.fill-green { background-color: #13a224; }
.fill-purple { background-color: #6846ac;}
.fill-red { background-color: #a92b33;}

/* colors */
.light-grey     { color:#AFAFAF; }
.sky-blue       { color:#9be6ff; }
.start-blue     { color:#72faff; }
.light-green    { color:#8eff96; }
.deep-blue      { color:#8eff96; }
.light-purple    { color: #b79fe8; }
.header-purple    { color: #c1a9f0; }



/* ==========================================================================
   Media Queries
   ========================================================================== */


/**
 1520px is derived from the .arbutus left percentage value.
*/
@media only screen and (min-width : 1520px) {

    .left-island {
        right:0px;
        left:0px;

    }


    .arbutus {
        left:auto;
        right:0px !important;
    }
}







/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/*************************************************************************************************************************************************************************/

/**
    MOBILE
*/
@media only screen and (max-width : 568px) {
    @-ms-viewport { width:device-width; }
    

    body {
        font-size: 13px;
        overflow-x: hidden;
    }

    /* section headings */
    h1 { 
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:bold;
        font-size:18px;
        color:#FFFFFF;
        padding:4px 16px;
        margin-bottom: 32px;
        display: inline-block;
        max-width:280px;
    }

    /* subheadings over paragraphs */
    h2 { 
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:normal;
        font-size:18px;
        margin-bottom: 16px;
        display: inline-block;
    }

    h3 {
        font-size : 16px;
    }

    /* Listing headers */
    h5 { 
        font-family:'Open Sans', Arial, sans-serif;
        font-weight:normal;
        font-size:13px;
        margin-bottom: 0px;
        display: block;
    }   

    nav { 
        position:relative;
        height:150px;
        margin-top:30px;
        margin-bottom:16px;
        display:block;
    }
/*
    footer {
                position:relative;
       // height:150px;
       // margin-top:30px;
        margin-bottom:16px;
        display:block;
        background:#101010;
    }*/


    .footer-container {
        margin:0 auto;
        position:relative;
        width:70%;
        max-width:1024px;
        min-width:768px;
        background: url(../img/drop-shadow.png) no-repeat center top;
        height:120px;

        padding-top:40px;
    }

    .footer-logo {
        margin-left:20px;
        position:relative;
        width:40%;
        min-width:300px;
        display:inline;
        box-sizing: border-box;
    }


    .footer-links {
       // right:0px;
       right:none;
       left:0px;
        font-size:12px;
        display:inline;
        box-sizing: border-box;

        min-width:454px;
    }

    .footer-links ul {
        margin-left:20px;
        margin-top:10px;
        float:right;
        display:inline-block;
    }

    .footer-container {
        margin:0 auto;
        position:relative;
        width:70%;
        min-width:320px;
        max-width:568px;
        background: url(../img/drop-shadow-small.png) no-repeat center top;
    }


    .footer-logo img {
        width:80%;
    }



    .content-main {
        width:100%;
        clear:both;
    }


    .title-bold {
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:bold;
        font-size:30px;
        color:#FFFFFF;
        display:inline-block;
    }

    .title-book {
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:normal;
        font-size:18px;
        color:#FFFFFF;
        display:inline-block;
    }

    .title-block {
        display:block;
    }

    .slash {
        display:none;
    }





    .nav-item {
        float:left;
        clear:both;
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:bold;
        font-size:16px;
        color:#FFFFFF;
        text-align:center;
        display:inline-block;
        margin-right: 16px;
        padding:4px 12px;
        padding-right:24px;
        cursor:pointer;
        position:relative;

        margin-bottom:8px;

        background: no-repeat url(../img/nav-arrow.png) right 10px center;
    }

    .footer-nav-item {
        //float:left;
        //clear:both;
        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:bold;
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        display:inline-block;
       

        padding:4px 12px;
        padding-right:24px;
        cursor:pointer;
        position:relative;

        margin-right: 10px;
        margin-bottom:10px;

        background: no-repeat url(../img/nav-arrow.png) right 10px center;
    }

    .list-block {
        padding:20px;
        margin:20px 0px;

        background-color: #36668e; 
        background: -webkit-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
        background:    -moz-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
        background:     -ms-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%);
        background:      -o-linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%); 
        background:         linear-gradient(160deg, rgba(0,62,86,0.2),rgba(0,62,86,0.0) 70%);
    }

    .list-block ul {
        padding-top:16px;
    }

    .list-block li {
        display:block;
        min-height: 20px;
        padding:10px;

        margin-bottom: 8px;
        margin-left:5px;

        font-size:12px;

        background-color: #13b0ee;
        background: -webkit-linear-gradient(170deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 60%);
        background: -moz-linear-gradient(170deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 60%);
        background: linear-gradient(90deg, rgba(19,176,238,0.5),rgba(19,176,238,0.0) 60%);
    }



    .list-block ol {
        padding-top:16px;
        counter-reset: li;
        position:relative;
    }

    .list-block ol > li {
        padding-left:50px;
    }

    .list-block ol > li:before {
        content: counter(li);
        counter-increment:li;

        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-weight:bold;
        font-size:14px;

        position:absolute;
        left:6px;
        top:6px;

        background-color: #13b0ee;
        padding:5px 8px;

        opacity:0.7;
        box-sizing:border-box;
    }

    .content-container {
        min-width:280px;
        padding:20px;
        background-image: url(../img/content-bg.png) top left no-repeat;
        background-size: 50%;
        overflow-x:hidden;
        box-sizing:content-box;
    }



    .left-island {
        position:absolute;
        width:96px;
        min-width:96px;
        height:100%;
        left:0;
        top:-75px;

        
        background: no-repeat url(../img/left-island-small.png) top left;
        background-size:90%;
    }


    .arbutus {

        padding-top:120px;
        position:absolute;
        width:180px;
        height:100%;
        left:auto;
        top:0px;

        background: no-repeat url(../img/arbutus-small.png) bottom right;
        background-size:100%;
        z-index:2;
    }


    .eagle {
        
        top:85px;
        right:-20px;

        width:150px;
        height:175px;
        background:url(../img/eagle-sun-small.png) no-repeat;
        background-size:100%;

    }

    .salmon {
        width:100%;
        height:100%;
        position:absolute;
        right:10px;
        top:-4px;
        background: no-repeat url(../img/salmon-small.png) top right;
    }


    .intro {
        width:100%;
    }


    .sky {
        position:relative;

        padding-top:0px;
        padding-bottom:48px;

        background: no-repeat url(../img/bg-sky-small.png), -webkit-linear-gradient(180deg, #3f65b2, #5283e6, #4e96fa, #79c7fd);
        background: no-repeat url(../img/bg-sky-small.png), -moz-linear-gradient(180deg, #3f65b2, #5283e6, #4e96fa, #79c7fd);
        background: no-repeat url(../img/bg-sky-small.png), linear-gradient(180deg, #3f65b2, #5283e6, #4e96fa, #79c7fd);

        background-position: bottom center;
        background-size: 100%;
    }


    .bios-container {
        margin-left:0px;
    }


    .sea-above-top {
        position:relative;

        min-height:600px;
        padding-top:72px;
        
        background: no-repeat url(../img/bg-sea-above-top-small.png), -webkit-linear-gradient(180deg, #7ea5d4, #3173af, #1f517d 80%);
        background: no-repeat url(../img/bg-sea-above-top-small.png), -moz-linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);
        background: no-repeat url(../img/bg-sea-above-top-small.png), linear-gradient(180deg,  #7ea5d4, #3173af, #1f517d 80%);

        background-position: top center;
        background-size: 100%;
    }

    .sea-above-bottom {
        padding-bottom:20%;
        background: no-repeat url(../img/bg-sea-above-bottom-small.jpg);
        background-size: 140%;
        background-position: bottom center;
    }


/*
.sea-below-top {
    min-height:600px;
    padding-top:48px;
   
    background: no-repeat url(../img/bg-sea-below-top.png), -webkit-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);
    background: no-repeat url(../img/bg-sea-below-top.png), -moz-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);
    background: no-repeat url(../img/bg-sea-below-top.png), linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);

    background-position: top center;
    background-size: 100%;
}
*/

    .sea-below-top {
        min-height:600px;
        padding-top:48px;
       
        background: no-repeat url(../img/bg-sea-below-top-small.png), -webkit-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);
        background: no-repeat url(../img/bg-sea-below-top-small.png), -moz-linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);
        background: no-repeat url(../img/bg-sea-below-top-small.png), linear-gradient(180deg, #1768a9, #12519e, #0a2b56, #061931 70%);

        background-position: top center;
        background-size: 140%;
    }


    .sea-below-bottom {
        background: no-repeat url(../img/bg-sea-floor-top-small.jpg);
        background-size: 100%;
        background-position: bottom center;
    }

    .sea-below-deep {
        padding-bottom:0px;
        background: no-repeat url(../img/bg-sea-floor-bottom-small.jpg), #020508;
    }


    .student-bio {
        background-color: #1b7e87;
        background: -webkit-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
        background: -moz-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
        background: -ms-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
        background: -o-linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
        background: linear-gradient(90deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 100%);
    }


    .student-bio-expanded {
        background: -webkit-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
        background: -moz-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
        background: -ms-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
        background: -o-linear-linear-gradient(160deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
        background: linear-gradient(110deg, rgba(19,162,36,0.2),rgba(19,162,36,0.0) 50%);
    }

    .student-info-item {
        margin-top:8px;
        margin-bottom:20px;

    }


    .student-photo {
        margin-right:8px;
        float:left;
        border: solid 4px #13a224;
        background-color: #202020;
        box-sizing:border-box;
        
        height:80px;
        width:100%;
        overflow:hidden;

        background-image: url(../img/student-placeholder.jpg) no-repeat;

        -webkit-transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
        -moz-transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
        -ms-transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
        -o-transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
        transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
    }


    .student-photo-expanded {
        width:256px;
        height:256px;
    }


    .student-photo > img {
        width:100%;
        height:10240px;
        position:relative;
        top:-9984px;
        -webkit-transition: all 0.0s
        
    }

    .student-photo-expanded > img{
        height:256px;
        width:100%;
        position:relative;
        top:0px;

        -webkit-transition: all 0.0s
    }



    .student-info-left {
        position:relative;
        float:left;
        width:256px;
        margin-right:10px;
    }

    .student-info-right {
        float:left;
        overflow:hidden;
        display:relative;
        width:100%;
        height:auto;
    }

    .student-info-right .expanded {
        height:auto;
    }

    .info-expander {
        position:absolute;
    }


    .info-less {
        background-image: url(../img/nav-arrow-up.png) ;
         height:24px;
         line-height:24px;
    }

    .info-more {
        background-image: url(../img/nav-arrow-down.png);
         height:24px;
         line-height: 24px
    }

/*

    .student-info {
        float:left;
        height:auto;
        overflow:hidden;
        display:relative;
        width:100%;
    }
*/

    .student-photo {
        display:inline-block;
    }

    .student-expanded-content {
        margin-top:0px;
    }


    .info-minimal {
        height:auto;
        margin-top:2px;
    }

    /** the more/less button beneath the info-minimal block **/
    .info-expander {
        clear:both;
        position:absolute;

        width:75px;
        height:24px;
        padding:4px 6px;
        
        box-sizing:border-box;

        top:4px;
        left:auto !important;
        right:4px !important;

        font-family:'function', 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        line-height:18px;
        font-weight: bold;

        overflow:hidden;
        background: #13a224 no-repeat right 10px center;

        -webkit-transition: all 0.3s cubic-bezier(.14,1,.95,1.01);
        z-index:1;
    }

    .info-less {
        background-image: url(../img/nav-arrow-up.png) ;
    }


    .info-more {
        background-image: url(../img/nav-arrow-down.png);
    }

    .faculty {
        overflow:hidden;
        margin-bottom:24px;
    }

    .faculty-item {

        font-size:9px;
        clear:both;
        margin-right:0px;
        margin-bottom:8px;
        height:auto;

        padding:8px;
        padding-right:0px;
        height:68px;
        width:100%;

        background-color: #1b7e87;
        background: -webkit-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
        background:    -moz-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
        background:     -ms-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
        background:      -o-linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
        background:         linear-gradient(90deg, rgba(19,176,238,0.5), rgba(19,176,238,0.0) 100%);
    }

    .faculty-photo {
        float:left;
        width:68px;
        height:68px;
        margin-right:8px;
        background-image:url(../img/faculty-placeholder.jpg);
        background-size: 100%;
        box-sizing:border-box;
        border: solid 4px #13b0ee;
    }


    .faculty-photo img {
        width:60px;
        height:60px;
    }

    .faculty-info {
        float:left;
        width:auto !important;
    }


    .career-percent {
        width:40px;
        height:40px;
        position:relative;

        text-align:center;
        line-height:32px;
        font-size:18px;
        font-family:'function','Open Sans', Arial, sans-serif;
        font-weight:bold;

        background-image:url(../img/percent-bg.jpg);
        float:left;

        margin-right:10px;
        box-sizing:border-box;
        border: solid 4px rgba(145,122,192,0.3);
    }

    .career-percent:after {
        
        content:"";
        position:relative;
        clear:both;
        left:auto !important;
        bottom:auto !important;
    }

    .career-description {
        float:left;
        font-size:10px;
        width:65%;
        height:100%;
    }


        /** COLORING **/

    .fill-debug { background-color: rgba(0,255,0,0.5); }

    .fill-blue  { background-color: #13b0ee; }
    .fill-green { background-color: #13a224; }
    .fill-purple { background-color: #6846ac;}
    .fill-red { background-color: #a92b33;}

    /* colors */
    .light-grey     { color:#AFAFAF; }
    .sky-blue       { color:#9be6ff; }
    .start-blue     { color:#72faff; }
    .light-green    { color:#8eff96; }
    .deep-blue      { color:#8eff96; }
    .light-purple    { color: #b79fe8; }
    .header-purple    { color: #c1a9f0; }



}