Team:Imperial/Resources/CSS:main
From 2014.igem.org
Line 151: | Line 151: | ||
#main_nav { | #main_nav { | ||
font-size: 12px; | font-size: 12px; | ||
- | |||
- | |||
} | } | ||
.banner-text { | .banner-text { |
Revision as of 10:32, 25 August 2014
/* timeline css*/
.cbp_tmtimeline {
margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;
} /* The line */
.cbp_tmtimeline:before {
content: ; position: absolute; top: 0; bottom: 0; width: 10px; background: #d7ab5e; left: 20%; margin-left: -10px;
} /* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
display: block; width: 25%; padding-right: 100px; position: absolute;
} .cbp_tmtimeline > li .cbp_tmtime span {
display: block; text-align: left;
} .cbp_tmtimeline > li .cbp_tmtime span {
font-size: 2em; color: #ffcb6f;
} /* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 15px 25%; background: #ffcb6f; padding: 2em; font-size: 1.2em; font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px;
} .cbp_tmtimeline > li .cbp_tmlabel {
background: #ffcb6f;
} .cbp_tmtimeline > li .cbp_tmlabel h2 {
margin-top: 0px; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4);
} /* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #ffcb6f; border-width: 10px; top: 10px;
} /* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
width: 40px; height: 40px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #fff; background: #ffcb6f; border-radius: 50%; box-shadow: 0 0 0 8px #d7ab5e; text-align: center; left: 20%; top: 0; margin: 0 0 0 -25px;
} /*End of timeline styles */
body {
width: 960px; margin: 0 auto; background-color: #f1e8df; font-family: 'Oxygen', sans-serif;
} .wrapper {
background-color: #f1e8df;
} h1, h2, h3, h4, h5 {
color: #625d71; font-weight: bold; text-transform: uppercase; margin: 5px 5px 5px 5px;
font-family: 'Oxygen', sans-serif;
} p {
color: #625d71; margin: 10px 5px 10px 5px; font-family: 'Oxygen', sans-serif;
}
a {
font-family: 'Oxygen', sans-serif; text-decoration: none;
} .header {
background-color: #fdcc70;
} .header-banner {
height: 100px;
} .banner {
position: relative;
} .content {
margin: 5px; background-color: beige; text-align: center; position: relative; overflow: hidden;
}
- sponsors {
height: 100px; background-color: #ffffff; margin: 20px 0px 20px 0px;
}
- main_nav {
font-size: 12px;
} .banner-text {
position: absolute; bottom: 0; z-index: 1;
} .left {
float: left;
} .right {
float: right; margin: 40px 30px 0px 0px;
} .social {
display: inline-block; height: 30px;
} .content-icon img {
height: 150px;
} .content-icon {
float: right; display: block;
}
- Logo {
font-size: 80px;
}
- side_nav {
font-size: 12px; margin: 70px 0 0 0;
} .content-image {
overflow: hidden; border-radius: 10px;
}
- team {
width: 960px; margin: 5px;
} .questions {
z-index: 13;
} .hidden {
display: none;
} .name {
margin: auto; text-align: center;
} .overlay {
height: 200px; width: 300px; margin: 10px; text-align: center; background-color: rgba(0, 0, 0, 0.6); border-radius: 5px; position: absolute; top: 0; left: 0; z-index: 10;
} .member {
position: relative;
} .expand {
margin: auto; margin-top: 65px; width: 30px; height: 30px; border: 2px solid #fdcc70; border-radius: 50%;
} .expand:hover {
cursor: hand; cursor: pointer; opacity: .9;
} .info-overlay {
height: 650px; width: 940px; margin: 10px; text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; position: absolute; z-index: 11;
} .min {
width: 30px; height: 30px;
} .min:hover {
cursor: hand; cursor: pointer; opacity: .9;
} .min h4 {
font-size: 26px;
} hr {
color: #ffffff;
} .questions, .log p {
color: #ffffff;
} .overlay-content {
margin-top: 20px;
} .sponsors {
margin: 2.5px; width: 125px;
} .log {
min-height: 650px; width: 940px; margin: auto; padding: 10px; text-align: center; background-color: #625d73; border-radius: 5px;
}
.log h3 {color: #fdcc70;} .arrow {
display: inline-block; width: 15px; height: 15px; line-height: 15px; border-top: 3px solid #6ABEDB; border-right: 3px solid #6ABEDB; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
} .arrow-left {
-ms-transform: rotate(225deg); -moz-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg);
}
- date {
display: inline-block; background: none; border: none; text-align: center; color: #fdcc70; font-size: 32px;
} .arrow:hover {
cursor: hand; cursor: pointer; opacity: .9;
}
- date:hover {
cursor: hand; cursor: pointer; opacity: .9;
} .info-overlay h2 {
color: #fdcc70;
} .info-overlay h3 {
color: #fdcc70;
} .info-overlay p {
color: #fff;
} .info-overlay h4 {
color: #fdcc70;
} .overlay-content h2 {
color: #fdcc70;
} .overlay-content h3 {
color: #fdcc70;
} .overlay-content h4 {
color: #fdcc70;
} .content-double {
height: 610px; width: 300px; overflow: auto;
} .content-single {
height: 300px; width: 300px;
} .member-image {
height: 200px; width: 300px; border-radius: 5px; margin: 10px
} .circle-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; border-radius: 50%; margin: auto; overflow: hidden;
} .overlay-red {
background-color: rgba(120, 74, 77, 0.7);
} .overlay-blue {
background-color: rgba(116, 131, 162, 0.7);
}
- tweets {
background-color: #8bcaeb;
}
- tweets-container {
margin: 10px;
}
- tweets h2 {
color: #fff;
} .more-box {
background-color: #625d71; text-transform: uppercase; text-decoration: none; margin: 5px; display: inline-block;
} .more-box a {
padding: 10px; font-size: 10px; color: #fff; text-transform: upper; text-decoration: none;
} .content-single .bg {
height: 100%; width: 100%;
} .circle-overlay .overlay-content {
margin-top: 100px;
} .overlay-green {
background-color: rgba(116, 200, 162, 0.7);
} .banner-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 75%; width: 75%; margin: auto; background-color: rgba(0, 0, 0, 0); overflow: hidden;
} .banner-overlay h1 {
color: #fdcc70; font-size: 100px;
} .banner-overlay h2 {
color: #fdcc70; font-size: 50px;
}
.centre-box {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align:center; margin: auto;
}