Team:Oxford/Assets/stylesheet
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;
}
- top-section {
border: none; height: 0px;
}
- content {
width:100%;
}
body {
position: relative;
}
.row {
background-color: #fff;
} .navbar {
margin-top: 16px; position: fixed; font-size: 13px; background-color: #fff; margin-bottom: 0;
}
.navbar-right li {
font-family: "Avenir",sans-serif; color: #2800D7;
}
.navbar-nav > li > a {
padding-left: 10px; padding-right: 10px;
} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
background-color: #fff; color:#2800D7;
}
.navbar-default .navbar-nav > .active {
background-color: #fff;
}
.navbar-default .navbar-brand {
font-weight: bold; color: #2800D7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/
}
.navbar-default .navbar-brand:hover {
font-weight: bold; color: #fa1e64; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/
}
- main-container {
top:0; left:0; right:0; margin:51.3px 0 0 0; padding:0; background-color:#fff; overflow:auto; position:absolute;
}
- sidebar.affix {
top: 80px;
}
.contents-sidebar {
padding-left: 20px; margin-top: 20px; margin-bottom: 20px; background-color: white;
}
.contents-sidebar .nav>li>a {
color: #999; padding: 4px 20px; font-size: 13px; font-weight: 400; line-height: 1.4em; margin-bottom: 10px;
}
.contents-sidebar .nav .nav>li>a {
padding-top: 1px; padding-bottom: 1px; padding-left: 20px; font-size: 12px;
}
.contents-sidebar .nav .nav .nav>li>a {
padding-top: 1px; padding-bottom: 1px; padding-left: 20px; font-size: 11px;
}
.contents-sidebar .nav>.active>a {
color: #2800D7;
}
.contents-sidebar .nav>li>a {
border-left: 2px solid transparent;
} .contents-sidebar .nav>.active>a, .contents-sidebar .nav>li>a:hover, .contents-sidebar .nav>li>a:focus {
color: #2800D7; text-decoration: none; background-color: transparent; border-left: 2px solid #2800D7; font-weight: 700;
}
.contents-sidebar .nav .nav>.active>a, .contents-sidebar .nav .nav>li>a:hover, .contents-sidebar .nav .nav>li>a:focus {
font-weight: 500;
}
.contents-sidebar .nav ul.nav {
display: none;
}
.contents-sidebar .nav>.active>ul.nav {
display: block;
}
- sidebar {
max-height: 85vh; overflow: auto;
}
- title {
width: 100%; background-image: url(); background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; border-radius: 0;
}
- title div {
width: 100%;
}
- solution-byline {
margin: auto;
}
- solution-byline h3 {
vertical-align: bottom;
}
- title img {
width:350px; display: block; margin: auto auto; max-width: 800px;
}
- title p {
margin: 0;
}
- logo img {
margin:auto; width: 6em; margin-top: 2em;
}
- title h3 {
color: #fff; text-align: center; font-family: "Avenir", sans-serif; font-weight: lighter; font-size: 1em; margin-bottom: 1em; margin-right: auto; margin-left: auto; text-transform: uppercase;
}
- title a {
color: #fff; padding: 0.2em; text-align: center; line-height: 1.1em;
}
- title a:hover, #title a:active, #title a:focus {
text-decoration: none;
}
.page-content {
background-color: #fff; z-index: 10;
}
.quote {
font-family: "Avenir", sans-serif; color: #2800D7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ margin: 1em;
}
.quote-right, .quote-left {
max-width: 350px;
}
.quote p {
text-align: justify; text-transform: uppercase; font-size: 1em; font-weight: lighter; margin-bottom: 0;
}
.quote h3 {
text-align: right; font-size: 1em; text-transform: uppercase; color: #2800D7; margin-top: 5px; padding-top: 0;
}
.quote-full {
width: 100%; margin-left: auto; margin-right: auto; clear: both; padding: 15px 0; max-width: 810px;
}
.quote-right {
width: 50%; font-size: 1em; float: right; padding-left: 15px; padding-right: 0;
}
.quote-left {
width:50%; font-size: 1em; float: left; padding-right: 15px; padding-left: 0;
}
.table>thead>tr>th {
color: #2800D7;
}
- foot {
background-color: #6C7A89; color: white; font-family: "Avenir",sans-serif; text-align: center; padding-top: 1em; z-index: -10; text-transform: uppercase; vertical-align: middle;
}
h2, h1 {
font-size: 3.5em; font-family: "Avenir", sans-serif; /*text-transform: uppercase;*/ font-weight: 900; color: #2800D7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ border: none; clear: both; margin-bottom: 0em;
}
h1 {
font-size: 2em; margin-top: -50px; padding-top: 80px;
}
p {
text-align: justify; font-family: "Avenir", sans-serif;
}
h3 {
clear: both; font-weight: 700; font-family: "Avenir", sans-serif; color: #2D2D35; font-size: 1.5em;
}
- main-container h2, #main-container h3 {
padding-top: 80px; margin-top: -50px;
}
- main-container h2 {
padding-top: 110px;
}
- main-container h4, #main-container h5 {
padding-top: 70px; margin-top: -50px; font-weight: bold;
}
- main-container h5 {
font-family: "Avenir", sans-serif; font-weight: 900; font-size: 2em; color: #777;
}
- main-container h6 {
font-size: 1em;
}
ol {
list-style-type: none; /*padding-top: 15px; margin-top: 30px; margin-bottom: 30px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding-left: 15px;*/
}
ol li {
counter-increment: step-counter; /* margin-bottom: 20px; */ font-family: "Avenir", sans-serif; text-align: left; padding-left: 25px; position: relative;
}
ol li::before {
content: counter(step-counter) "."; font-size: 1em; font-family: "Avenir",sans-serif; font-weight: lighter; margin-right: 15px; color: #2800D7; display: inline-block; position: absolute; left:0;
}
ol li p{
overflow: hidden;
}
.slim ul li {
/* margin-bottom: 20px; */ font-family: "Avenir", sans-serif; /* vertical-align: middle; */ text-align: left; padding-left: 25px; position: relative;
}
.slim ul li:before {
content: "•"; font-size: 1.2em; color: #2800D7; margin-right: 15px; display: block; position: absolute; left:0;
}
.slim ul {
list-style:none;
}
.slim {
max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;
}
- main-container .section {
clear: both; margin-bottom: 75px;
}
- main-container .section h2 {
margin-bottom: 0;
}
.image-full img {
margin-left: -15px; margin-right: -15px; width: 100%;
}
.image {
padding-bottom: 30px; padding-top: 30px; position: relative; z-index: 2;
}
.image p {
color: #777; text-align: center; font-weight: lighter; font-family: "Avenir",sans-serif; font-size: 0.8em; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase;*/
}
.image-right {
width: 40%; float: right; padding-left: 15px; padding-right: 0; margin-right:0;
}
.image-right img {
width: 92%;
}
.image-left {
width:40%; float: left; padding-right: 15px; padding-left: 0; margin-left: 0;
}
.image-left img {
width: 92%;
}
.video {
width:100%;
}
- foot {
margin-top: -10px;
}
- foot ul {
list-style-type: none; list-style-image: none; margin-left: 0;
}
- foot li {
display: inline; text-align: center;
}
- foot a {
color: white; font-size: 1em; padding-right: 0px;
}
- foot a[href ^="https://"] {
padding-right: 5px; padding-left: 5px;
}
- foot p {
font-size: 0.5em; text-align: center;
}
.page-heading {
width: 100%; background-image: url(); background-repeat: no-repeat; background-attachment:fixed; background-size: cover; text-align: center; text-transform: uppercase;
}
- main-container .page-heading h3 {
color: white; font-size: 10vw; font-weight: bolder; font-family: "Avenir",sans-serif; margin: 0; padding-top: 35vh; padding-bottom: 30vh;
}
- bodyContent .page-heading h3 {
margin: 30px;
}
/*.page-heading h3::before {
content: "["; font-size: 15vw;
}
.page-heading h3::after {
content: "]"; font-size: 15vw;
}*/
.team-member {
border-bottom: 1px solid #cccccc; margin-bottom: 15px; text-align: center; margin-top: 5px;
}
.team-member img {
width:100%; max-width: 250px; margin-left: auto; margin-right:auto; display: block;
}
- main-container .team-member h2{
font-size: 1em; margin: 0; padding-top: .5em; padding-bottom: .17em; text-transform: none; font-weight: 600;
}
- bodyContent .team-member h3 {
margin-bottom: 15px; padding-bottom: 0;
}
- bodyContent .advisor h2 {
margin-top: 0; padding-top: 0;
}
- main-container .team-member h3 {
font-size: 0.8em; margin-top: 0; padding-top: 0px; font-weight: 200;
}
- bodyContent h2 {
margin-bottom: 10px; padding-bottom: 15px; text-align: center;
}
- bodyContent h5 {
margin-bottom: -80px;
}
- support {
text-align: center;
}
.sponsor-logo img{
width: 100%; max-width: 200px; display: block; margin-left: auto; margin-right: auto; border-bottom: 1px solid #cccccc; padding: 0;
}
.sponsor-logo img:hover{
border-bottom: 1px solid #4776E6;
}
.section-spacer {
display: block; width: 150px; margin: auto; margin-top: 30px; border-bottom: 1px solid #cccccc; clear: both;
}
- references {
border-top: 1px solid #cccccc; font-size: 0.7em; margin-bottom: 30px;
}
- references h2 {
border: none;
} .references {
padding-left: 0px; border: none; margin-top: 15px;
}
@media (max-width: 768px) {
.quote-left, .quote-right { width: 100%; margin-left: auto; margin-right: auto; clear: both; padding: 15px 0; float: none; border: none; } .image-left, .image-right { margin-left: -15px; margin-right: -15px; width: 100%; width: calc(100% + 30px); float:none; }
h2 { font-size: 2.5em; }
}
.algorithm>ol {
border: none; padding-top: 15px; margin-top: 10px; margin-bottom: 15px; text-align: left; margin-left: 0;
}
.algorithm>ol>li {
text-align: left; padding-left: 50px; position: relative; margin-bottom: 40px;
}
.algorithm>h3 {
padding-top: 0px; margin-top: -31px; margin-left: 30px; margin-right:30px; background-color: white; display: inline-block; text-transform: none; padding-left: 30px; padding-right: 15px; color: #fa1e64; font-weight: 700; font-size: 2em;
}
.algorithm {
border: 15px solid #fa1e64; margin-top: 30px; margin-bottom: 30px; margin-left: -30px; margin-right: -30px; padding-left: 30px; padding-right: 30px; text-align: center;
}
.algorithm ol li::before {
content: counter(step-counter); font-size: 4em; font-family: "Avenir",sans-serif; font-weight: 700; color: #2800D7; display: block; position: absolute; left:0; top: 50%; transform: translateY(-50%);
}
.image.lightbox {
position: fixed; top: 66px; bottom: 0px; left: 0; width: 100%; height: 100%; background-color: #2800D7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7)); background: -moz-linear-gradient(left, #fa1e64,#2800D7); background: -webkit-linear-gradient(left, #fa1e64,#2800D7); background: linear-gradient(to right, #fa1e64,#2800D7);*/ z-index: 10000000; float: none;
}
.image.lightbox>img {
width: auto; max-height: 60%; max-width: 90%; opacity: 1; margin: auto; display: block; margin-top: 15px;
}
.image.lightbox>p {
color: white; background: none; -webkit-text-fill-color: white;
}
.interview-response {
color: #777; padding-left: 15px;
}
.definition {
text-decoration: none; border-bottom: 1px dotted #00B9E7; color: black;
}
.definition:hover, .definition:focus {
text-decoration: none; color: #00B9E7
}
.popover { }
- main-container .popover-title {
border-radius: 0; color: #00B9E7; width: 100%; font-size: 2em; text-align: center; padding-top: 8px; margin-top: 0;
}
- main-container .popover-content {
font-family: "Avenir", sans-serif; font-size: 1em; overflow: auto; max-height: 200px;
}
.popover.right>.arrow::after{
border-right-color: #00B9E7;
}
.popover.bottom>.arrow::after {
border-bottom-color: #00B9E7;
}
.popover.left>.arrow::after {
border-left-color: #00B9E7;
}
- notebook-key-button {
position: fixed; right: 25%; bottom: 0; background-color: #2800D7; margin-bottom: 15px; height: 35px;
}
- notebook-key-button.affix-bottom {
position: absolute; right:0; bottom:0; margin-right: 0;
}
- notebook-key-button.active {
background-color: #14006C;
}
- notebook-key-button h3 {
font-size: 15px; margin-top: 10px; margin-bottom: 10px; padding: 0; padding-right: 25px; padding-left: 25px; display: block; color: white; font-weight: 200;
}
- notebook-key {
position: fixed; width: 500px; z-index: 1000000; right: 25%; bottom: 50px; margin-bottom: 5px; overflow: auto; display: none; background-color: white; padding: 15px; border: 1px solid rgba(0,0,0,.2);
}
- notebook-key h2 {
background-color: #f7f7f7; margin-top: -15px; padding-top: 15px; margin-left: -15px; margin-right: -15px; padding-bottom: 5px; font-size: 2em; border-bottom: 1px solid #ebebeb; color: #00B9E7;
}
.notebook-key-content {
height: 65vh; overflow: auto; padding: 15px;
}
- notebook-key .list-of-parts {
margin-left: 30px;
}
- notebook-key strong {
color: #00B9E7;
}
- notebook-key.active {
display: block;
}
.next-section-btn {
position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 50px; background-color: white; border: 3px solid #000; display: none;
}
- project-description-btn {
font-family: "Avenir"; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; background-color: white; border: 3px solid #000; color: black; display: inline-block; padding-left: 5px; padding-right: 5px; text-align: center; margin-top: 30px; width: 275px;
}
- project-description-btn:hover {
color: white; background-color: black; text-decoration: none;
}
.next-section-btn:hover {
background-color: black; color: white;
}
.info-container {
position: relative;
}
.info-container img {
width: 100%; max-width: 850px; margin: auto; display: block;
} .image-massive {
margin-left:-15px; position: relative; z-index: 100; margin-top: 30px; margin-bottom: 30px;
}
video.image-massive {
width: 100vw; margin:auto; margin-left: -15px;
} .image-massive img {
width: 100vw;
} .image-massive p {
text-align: right; font-size: 0.8em;
}
.ios, #title.ios {
background-attachment: scroll;
}
- main-container a[href ^="https://"] {
padding: 0; background: none;
}
.team-member.advisor img {
padding: 15px; height: 280px; width: auto;
}
.team-member p {
margin-left: 15px; margin-right: 15px; font-size: 0.8em; height: 200px; overflow: auto;
}
- will img:hover {
content: url("");
}
.thank-you {
text-align: center; padding-top: 30px;
}
@media (max-width: 992px) {
.contents-sidebar { display: none; }
#notebook-key-button { right: 15px; bottom: 0px; }
#notebook-key-button.affix-bottom { right:15px; }
#notebook-key { right:0px; }
}
@media (min-width: 768px) {
.dropdown:hover .dropdown-menu { display: block; }
}
@media (max-width: 480px) {
#notebook-key { top: 67.3px; right: 0px; width: 90vw; border-radius: 0; bottom: 50px; height: auto; } #title img { width: 250px; }
}
@media (min-width: 1225px) {
.image-left, .quote-left { width: 33vw; margin-left: -50px; }
.image-right, .quote-right { width: 33vw; margin-right: -50px; }
.image.image-right.lightbox, .image.image-left.lightbox { margin: 0; }
.quote-left, .quote-right { max-width: 200px; }
}
@media (min-width: 1500px) {
.image-left, .quote-left { margin-left: -50px; } .image-right, .quote-right { margin-right: -50px; } .image.image-right.lightbox, .image.image-left.lightbox { margin: 0; } .quote-left, .quote-right { max-width: 200px; }
}