Line 188: | Line 188: | ||
width: 1020px; | width: 1020px; | ||
} | } | ||
+ | html { | ||
+ | position: relative; | ||
+ | min-height:100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | margin:0 0 150px !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | .footer-container { | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | bottom: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .footer-content { | ||
+ | height: 150px; | ||
+ | background-color: #ececec; | ||
+ | margin-top: 50px; | ||
+ | padding-top: 20px; | ||
+ | padding-bottom: 20px; | ||
+ | color: #b5b5b5; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .footer-content a { | ||
+ | color: #333 !important; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .footer-link { | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | }ul.page-1 > li > a { | ||
+ | color: #ECF0F1; | ||
+ | } | ||
+ | ul.page-1 > li > a:hover { | ||
+ | border-bottom: 4px solid #ECF0F1!important; | ||
+ | } | ||
+ | ul.page-1 ul.menu li a { | ||
+ | color: #ECF0F1; | ||
+ | } | ||
+ | ul.page-1 ul.menu li a:hover { | ||
+ | color: #aaf; | ||
+ | } | ||
+ | ul.page-1 ul.menu { | ||
+ | background: #2980b8; | ||
+ | } | ||
+ | |||
+ | ul.page-2 > li > a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-2 > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c!important; | ||
+ | } | ||
+ | ul.page-2 ul.menu li a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-2 ul.menu li a:hover { | ||
+ | color: #ef4c3c; | ||
+ | } | ||
+ | ul.page-2 ul.menu { | ||
+ | background: #ECF0F1; | ||
+ | } | ||
+ | |||
+ | ul.page-3 > li > a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-3 > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c!important; | ||
+ | } | ||
+ | ul.page-3 ul.menu li a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-3 ul.menu li a:hover { | ||
+ | color: #ef4c3c; | ||
+ | } | ||
+ | ul.page-3 ul.menu { | ||
+ | background: #ECF0F1; | ||
+ | } | ||
+ | |||
+ | ul.page-4 > li > a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-4 > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c!important; | ||
+ | } | ||
+ | ul.page-4 ul.menu li a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-4 ul.menu li a:hover { | ||
+ | color: #ef4c3c; | ||
+ | } | ||
+ | ul.page-4 ul.menu { | ||
+ | background: #ECF0F1; | ||
+ | } | ||
+ | |||
+ | ul.page-5 > li > a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-5 > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c!important; | ||
+ | } | ||
+ | ul.page-5 ul.menu li a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.page-5 ul.menu li a:hover { | ||
+ | color: #ef4c3c; | ||
+ | } | ||
+ | ul.page-5 ul.menu { | ||
+ | background: #ECF0F1; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #menu { | ||
+ | position: fixed; | ||
+ | z-index: 3000; | ||
+ | left: 7%; | ||
+ | top:20%; | ||
+ | } | ||
+ | |||
+ | #menu ul li { | ||
+ | height: 30px; | ||
+ | line-height:30px; | ||
+ | padding-left:10px; | ||
+ | border-left: solid #c2c2c2 5px; | ||
+ | } | ||
+ | |||
+ | #menu ul li a{ | ||
+ | display: block; | ||
+ | font-size: 15px; | ||
+ | color: #c2c2c2; | ||
+ | width: 120px; | ||
+ | text-decoration: none; | ||
+ | outline:none; | ||
+ | } | ||
+ | |||
+ | #menu ul li:hover { | ||
+ | border-left: solid #ef4c3c 5px; | ||
+ | } | ||
+ | |||
+ | #menu .focused { | ||
+ | color: #ef4c3c; | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | |||
+ | /*.scroll-img{ | ||
+ | position: fixed; | ||
+ | z-index: 3000; | ||
+ | width: 120px; | ||
+ | left: 115px; | ||
+ | bottom: 5%; | ||
+ | }*/ | ||
+ | |||
+ | #content { | ||
+ | margin-left: 24%; | ||
+ | width: 900px; | ||
+ | margin-top: 100px; | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | #content .item { | ||
+ | margin-top: 100px; | ||
+ | padding: 20px; | ||
+ | font-size: 16px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #content .item h2 { | ||
+ | font-size: 36px; | ||
+ | color: #555; | ||
+ | } | ||
+ | |||
+ | .item ul li { | ||
+ | float:left; | ||
+ | margin-right:10px; | ||
+ | margin-bottom:10px; | ||
+ | display:inline; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .item ul li .photo { | ||
+ | width:200px; | ||
+ | height:200px; | ||
+ | overflow:hidden; | ||
+ | background-color: darkgray; | ||
+ | } | ||
+ | |||
+ | .item .rsp { | ||
+ | width:200px; | ||
+ | height:200px; | ||
+ | overflow:hidden; | ||
+ | position: absolute; | ||
+ | background:#000; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | .item .text { | ||
+ | position:absolute; | ||
+ | width:200px; | ||
+ | height:200px; | ||
+ | left:-200px; | ||
+ | top:0; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .item .text a { | ||
+ | text-decoration:none | ||
+ | } | ||
+ | |||
+ | .item .text p { | ||
+ | color:#FFFFFF; | ||
+ | font-size:18px; | ||
+ | } | ||
+ | |||
+ | .item .box { | ||
+ | padding:10px 0px 10px 0px; | ||
+ | border-top: solid; | ||
+ | border-left: solid; | ||
+ | border-width:1px; | ||
+ | border-color: #f1f1f1; | ||
+ | box-shadow: 2px 2px 1px #e1e1e1; | ||
+ | margin-left: 20px; | ||
+ | } | ||
+ | |||
+ | .item .img { | ||
+ | width: 160px; | ||
+ | height: 160px; | ||
+ | border-radius: 160px; | ||
+ | text-align: center; | ||
+ | border: solid; | ||
+ | border-width:1px;" | ||
+ | } | ||
+ | |||
+ | .item h3 { | ||
+ | text-align: center; | ||
+ | border-top: solid; | ||
+ | font-size:15px; | ||
+ | border-color: #e1e1e1; | ||
+ | border-width:1px; | ||
+ | padding:8px 0 8px; | ||
+ | margin: 0px 0 0px; | ||
+ | } | ||
+ | |||
+ | .item h5 { | ||
+ | height: 50px; | ||
+ | overflow: hidden; | ||
+ | text-align: center; | ||
+ | border-top: solid; | ||
+ | border-color: #e1e1e1; | ||
+ | border-width:1px; | ||
+ | padding:22px 0 5px; | ||
+ | margin: 0px 0 0px; | ||
+ | } | ||
+ | |||
+ | #theme-graph svg { | ||
+ | filter: brightness(90%); | ||
+ | } | ||
+ | |||
+ | section,body { | ||
+ | min-width: 1020px; | ||
+ | } | ||
+ | .navbar { | ||
+ | -webkit-transition: ease-in-out 0.5s; | ||
+ | -moz-transition: ease-in-out 0.5s; | ||
+ | -ms-transition: ease-in-out 0.5s; | ||
+ | -o-transition: ease-in-out 0.5s; | ||
+ | transition: ease-in-out 0.5s; | ||
+ | background: white; | ||
+ | border-radius: 0; | ||
+ | min-height:45px !important; | ||
+ | height: 48px; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .navbar-brand { | ||
+ | margin-left:2em; | ||
+ | padding-top: 14px; | ||
+ | padding-bottom: 10px; | ||
+ | color: #555 !important; | ||
+ | } | ||
+ | |||
+ | ul.nav { | ||
+ | margin-right:2em; | ||
+ | } | ||
+ | |||
+ | ul li { | ||
+ | position: relative; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.nav li:hover > ul { | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | ul.nav ul { | ||
+ | min-width: 120px; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 0; | ||
+ | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | margin-top: -30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.nav > li > a { | ||
+ | -webkit-transition: border-color ease-in-out 0.1s; | ||
+ | -moz-transition: border-color ease-in-out 0.1s; | ||
+ | -o-transition: border-color ease-in-out 0.1s; | ||
+ | transition: border-color ease-in-out 0.1s; | ||
+ | margin: 0px 12px 0px 12px; | ||
+ | padding: 15px 0px 8px 0px; | ||
+ | background: transparent !important; | ||
+ | border-bottom: 4px solid transparent!important; | ||
+ | color: #555 ; | ||
+ | } | ||
+ | |||
+ | ul.nav > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c; | ||
+ | } | ||
+ | |||
+ | |||
+ | ul.menu { | ||
+ | background: white; | ||
+ | width: auto; | ||
+ | padding-left: 20px; | ||
+ | padding-right:20px; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | ul.menu li a, ul.menu li { | ||
+ | padding-top: 4px !important; | ||
+ | padding-bottom: 7px !important; | ||
+ | color: #555; | ||
+ | font-size: 18px; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: color ease-in-out 0.2s; | ||
+ | -moz-transition: color ease-in-out 0.2s; | ||
+ | -ms-transition: color ease-in-out 0.2s; | ||
+ | -o-transition: color ease-in-out 0.2s; | ||
+ | transition: color ease-in-out 0.2s; | ||
+ | } | ||
+ | |||
+ | |||
+ | .brand { | ||
+ | margin-top: 5em; | ||
+ | } | ||
+ | ul.nav > li > a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.nav > li > a:hover { | ||
+ | border-bottom: 4px solid #ef4c3c!important; | ||
+ | } | ||
+ | ul.nav ul.menu li a { | ||
+ | color: #555; | ||
+ | } | ||
+ | ul.nav ul.menu li a:hover { | ||
+ | color: #ef4c3c; | ||
+ | } | ||
+ | ul.nav ul.menu { | ||
+ | background: #F3F7F2; | ||
+ | } | ||
+ | |||
+ | |||
+ | .fssopen, .fssopen body { /* class added to HTML element when full screen slider is open to hide potential body scrollbars */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .fullscreenslider { | ||
+ | position: fixed; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 2000; | ||
+ | font-size: 16px; /* base font size */ | ||
+ | visibility: visible; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slidewrapper { /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */ | ||
+ | -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */ | ||
+ | -webkit-transition: -webkit-transform 0.5s; | ||
+ | transition: transform 0.5s; | ||
+ | } | ||
+ | |||
+ | .fssnav { /* UL list dynamically added by script for Slider navigation */ | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | position: absolute; | ||
+ | top: 50%; /* vertically center menu */ | ||
+ | right: 80px; /* distance from right edge of screen */ | ||
+ | transform: translateY(-50%); /* vertically center menu */ | ||
+ | } | ||
+ | |||
+ | .fssnav li { | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .fssnav li a { | ||
+ | text-decoration: none; | ||
+ | border: 2.5px solid #225378; /* border color of nav links */ | ||
+ | opacity: 0.8; | ||
+ | border-radius: 50%; | ||
+ | width: 16px; /* dimensions of nav links */ | ||
+ | height: 16px; | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | text-indent: -500px; | ||
+ | outline: none; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .fssnav li a::after { /* create "fill" element inside A */ | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 100%; | ||
+ | left: 0; | ||
+ | background: #225378; /* color of "fill" element */ | ||
+ | opacity: 0.6; | ||
+ | transition: top 0.5s; /* transition for "fill up" effect */ | ||
+ | } | ||
+ | |||
+ | .fssnav .selected a::after { | ||
+ | top: 0; /* fill up selected A element from bottom to top */ | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .slide { /* CSS for each slide */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | font-family: 'Droid Sans', sans-serif; /* Use google font */ | ||
+ | font-size: 60px; | ||
+ | line-height: 2em; | ||
+ | color: #225378; | ||
+ | overflow: hidden; | ||
+ | -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */ | ||
+ | -moz-box-sizing: border-box; | ||
+ | z-index: 1000; | ||
+ | background: white; | ||
+ | -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */ | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .slide h2 { /* H2 Header inside each slide */ | ||
+ | font-size: 3em; | ||
+ | margin: 0; | ||
+ | line-height: 1.1em; | ||
+ | letter-spacing: 3px; | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .slide .scrollable { /* Assign this class to elements within a slide that should be scrollable */ | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .slide { | ||
+ | background: white; | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .closex { /* Large x close button inside Slider */ | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | position: fixed; | ||
+ | cursor: pointer; | ||
+ | text-indent: -1000px; | ||
+ | opacity: 0.8; | ||
+ | z-index: 1001; | ||
+ | top: 5px; | ||
+ | right: 3px; | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .closex::after { /* render large x inside close button */ | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 6px; | ||
+ | background: white; /* color of x button */ | ||
+ | top: 50%; | ||
+ | margin-top: -3px; | ||
+ | -ms-transform: rotate(-45deg); | ||
+ | -webkit-transform: rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | |||
+ | .fullscreenslider .closex::after { /* render large cross inside close button */ | ||
+ | -ms-transform: rotate(-135deg); | ||
+ | -webkit-transform: rotate(-135deg); | ||
+ | transform: rotate(-135deg); | ||
+ | } | ||
+ | |||
+ | .bio-text { | ||
+ | margin-top: 30%; | ||
+ | font-size:30px; | ||
+ | line-height: 40px; | ||
+ | } | ||
</style> | </style> | ||
<script> | <script> |
Revision as of 14:50, 22 October 2017
<!DOCTYPE html>