Difference between revisions of "Team:Oxford/Assets/stylesheet.css"
Line 635: | Line 635: | ||
.image.image-right.lightbox, .image.image-left.lightbox { | .image.image-right.lightbox, .image.image-left.lightbox { | ||
margin: 0; | margin: 0; | ||
+ | } | ||
+ | .quote-left, .quote-right { | ||
+ | max-width: 200px; | ||
} | } | ||
} | } |
Revision as of 13:24, 15 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: 85%; 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: #777; font-size: 1.5em;
}
h2, h3 {
padding-top: 80px; margin-top: -50px;
}
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: 1.5em; margin-bottom: 0;
}
- bodyContent .team-member h2 , #bodyContent .advisor:nth-child(1) {
margin-bottom: 0; padding-bottom: 0;
}
- bodyContent .advisor h2 {
margin-top: 0; padding-top: 0;
}
.team-member h3 {
font-size: 1em; margin-top: 0; padding-top: 5px;
}
- bodyContent h2 {
margin-bottom: 0;
}
- 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;
}
- 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: 85%; 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; }
}
@media (max-width: 992px) {
.contents-sidebar { display: none; }
}
@media (min-width: 1225px) {
.quote-full { width: 920px; max-width:none; margin-left: -100px; margin-right: -100px; }
.image-left, .quote-left { width: 33vw; margin-left: -100px; }
.image-right, .quote-right { width: 33vw; margin-right: -100px; }
.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: -200px; } .image-right, .quote-right { margin-right: -200px; } .image.image-right.lightbox, .image.image-left.lightbox { margin: 0; } .quote-left, .quote-right { max-width: 200px; }
}
.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: #fa1e64; 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;
}