Difference between revisions of "Team:Oxford/Assets/stylesheet.css"
Line 806: | Line 806: | ||
right:25%; | right:25%; | ||
bottom: 50px; | bottom: 50px; | ||
+ | margin-right: 11px; | ||
+ | margin-bottom: 5px; | ||
} | } | ||
Revision as of 10:12, 20 August 2015
- 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: #2b00f7;
}
.navbar-nav > li > a {
padding-left: 5px; padding-right: 5px;
} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
background-color: #fff; color:#2b00f7;
}
.navbar-default .navbar-nav > .active {
background-color: #fff;
}
.navbar-default .navbar-brand {
font-weight: bold; color: #2b00f7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); -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%, #2b00f7)); -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:scroll; 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;
}
.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: #2b00f7;
}
.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: #2b00f7; text-decoration: none; background-color: transparent; border-left: 2px solid #2b00f7; 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 {
background-color: white;
}
- title {
width: 100%; background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); background: -moz-linear-gradient(left, #fa1e64,#2b00f7); background: -webkit-linear-gradient(left, #fa1e64,#2b00f7); background: linear-gradient(to right, #fa1e64,#2b00f7); border-radius: 0; margin-top: -10px;
}
- title div {
width: 100%;
}
- solution {
padding-top: 4em; padding-bottom: 4em;
}
- solution-byline {
margin: auto;
}
- solution-byline h3 {
vertical-align: bottom;
}
- title img {
width:80%; display: block; margin: auto auto; max-width: 800px;
}
- title p {
margin: 0;
}
- logo img {
margin:auto; width: 6em;
}
- 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;
}
- title a {
color: #fff; padding: 0.2em; border: 3px solid white;
}
- title a:hover {
background-color: white; color: #8E54E9; text-decoration: none;
}
.page-content {
background-color: #fff; z-index: 10;
}
.quote {
font-family: "Avenir", sans-serif; color: #2b00f7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); -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: #2b00f7;
}
.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;
}
- foot {
background-color: #2b00f7; color: white; font-family: "Avenir",sans-serif; text-align: center; padding-top: 1em; z-index: -10; text-transform: uppercase; vertical-align: middle; background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); background: -moz-linear-gradient(left, #fa1e64,#2b00f7); background: -webkit-linear-gradient(left, #fa1e64,#2b00f7); background: linear-gradient(to right, #fa1e64,#2b00f7);
}
h2 {
font-size: 3em; font-family: "Avenir", sans-serif; text-transform: uppercase; color: #2b00f7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ border: none; clear: both; margin-bottom: 0em;
}
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;
}
h2, h3 {
padding-top: 80px; margin-top: -50px;
}
h4, h5 {
padding-top: 70px; margin-top: -50px;
}
h5 {
font-family: "Avenir", sans-serif; font-weight: 900; font-size: 2em; color: #777;
}
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; vertical-align: middle; /* color: #777; */
}
ol li::before {
content: counter(step-counter) "."; font-size: 1em; font-family: "Avenir",sans-serif; font-weight: lighter; margin-right: 15px; color: #2b00f7; float: left;
}
ol li p{
overflow: hidden;
}
.slim ul li {
/* margin-bottom: 20px; */ font-family: "Avenir", sans-serif; /* vertical-align: middle; */
}
.slim ul li:before {
content: "•"; font-size: 1.2em; color: #2b00f7; margin-right: 15px;
}
.slim ul {
list-style:none;
}
.slim {
max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;
}
.section {
clear: both;
}
.section h2 {
margin-bottom: 0;
}
.image-full img {
margin-left: -15px; margin-right: -15px; width: 100%;
}
.image p {
color: #777; text-align: center; font-weight: lighter; font-family: "Avenir",sans-serif; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); -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: 100%;
}
.image-left {
width:40%; float: left; padding-right: 15px; padding-left: 0; margin-left: 0;
}
.image-left img {
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: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); background: -moz-linear-gradient(left, #fa1e64,#2b00f7); background: -webkit-linear-gradient(left, #fa1e64,#2b00f7); background: linear-gradient(to right, #fa1e64,#2b00f7); text-align: center; margin-top: -10px; text-transform: uppercase;
}
.page-heading h3 {
color: white; font-size: 10vw; font-weight: bolder; font-family: "Avenir",sans-serif; margin: 0; padding-top: 50px; padding-bottom: 50px;
}
.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;
}
.team-member h2{
font-size: 1em; margin-bottom: 0; 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;
}
.team-member h3 {
font-size: 0.8em; margin-top: 0; padding-top: 0px; font-weight: 200;
}
- bodyContent h2 {
margin-bottom: 0;
}
- 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 {
width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; display: block; height: 15px; background-color: #2b00f7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); background: -moz-linear-gradient(left, #fa1e64,#2b00f7); background: -webkit-linear-gradient(left, #fa1e64,#2b00f7); background: linear-gradient(to right, #fa1e64,#2b00f7);*/ margin-top: 80px; clear: both;
}
- references {
border-top: 1px solid #cccccc; font-size: 0.8em;
}
.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: 2em; }
}
.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: #2b00f7; 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: #2b00f7; /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7)); background: -moz-linear-gradient(left, #fa1e64,#2b00f7); background: -webkit-linear-gradient(left, #fa1e64,#2b00f7); background: linear-gradient(to right, #fa1e64,#2b00f7);*/ 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 {
background-image: url(); background-size: 3px 21px; background-repeat: repeat; border-radius: 0; margin: 0; padding: 0;
}
.popover-title {
background-color: #00B9E7; border-radius: 0; color: white; padding-bottom: 30px; width: 100%; font-size: 2em;
}
.popover-content {
background-color: white; margin-left: 10px; margin-right: 10px; margin-top: -30px; font-family: "Avenir", sans-serif; font-size: 1em;
}
.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: #14006C; margin-bottom: 15px; border-radius: 7.5px; height: 35px; margin-right: 15px;
}
- notebook-key-button.affix-bottom {
position: absolute; right:0; bottom:0; margin-right: 0;
}
- notebook-key-button:hover {
background-color: #6488FF;
}
- 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 {
color: white; background-color: #2b00f7; position: fixed; width:500px; height: 70vh; z-index: 1000000; right:25%; bottom: 50px; margin-right: 11px; margin-bottom: 5px;
}
- notebook-key h2 {
color: white;
}
@media (max-width: 992px) {
.contents-sidebar { display: none; }
#notebook-key-button { right: 15px; bottom: 0px; }
#notebook-key-button.affix-bottom { right:15px; }
}
@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; }
}