Team:Uppsala/stylesheet.css
From 2014.igem.org
(796 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | .clear { | |
+ | |||
+ | clear: both; | ||
- | |||
- | |||
} | } | ||
- | # | + | #master { |
- | + | ||
width: 100%; | width: 100%; | ||
- | + | min-height: 500px; | |
- | + | min-width: 1100px; | |
- | + | ||
} | } | ||
#header { | #header { | ||
- | width: | + | background-color: #fff; |
+ | background-image: url('https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png'); | ||
+ | background-size: 100% 100%; | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | border-top: 2px solid #000; | ||
+ | border-left: 2px solid #000; | ||
+ | border-right: 2px solid #000; | ||
+ | |||
+ | width: 1050px; | ||
height: 300px; | height: 300px; | ||
- | |||
margin-right: auto; | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | padding: 20px; | ||
+ | border-top-left-radius: 25px; | ||
+ | border-top-right-radius: 25px; | ||
} | } | ||
- | + | .mainText{ | |
- | + | margin-top: 30px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #main_content { |
+ | |||
+ | border-bottom: 2px solid #000; | ||
+ | border-left: 2px solid #000; | ||
+ | border-right: 2px solid #000; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
background-color: #fff; | background-color: #fff; | ||
width: 1050px; | width: 1050px; | ||
Line 54: | Line 48: | ||
margin-right: auto; | margin-right: auto; | ||
margin-left: auto; | margin-left: auto; | ||
- | |||
margin-bottom:50px; | margin-bottom:50px; | ||
- | padding: 20px; | + | padding: 20px; |
- | border-radius: 25px; | + | border-bottom-right-radius: 25px; |
- | + | border-bottom-left-radius: 25px; | |
font-family: "Times New Roman", Times, serif; | font-family: "Times New Roman", Times, serif; | ||
font-size: 18px; | font-size: 18px; | ||
- | + | ||
} | } | ||
- | # | + | #main_content h1{ |
- | + | font-family: 'Black Ops One', cursive; | |
- | + | font-size: 44px; | |
- | + | margin-top:25px; | |
+ | font-weight: bold; | ||
+ | text-transform: uppercase; | ||
+ | color: #5d6a52; | ||
+ | -webkit-text-stroke: 1px black; | ||
+ | -moz-text-stroke: 1px black; | ||
} | } | ||
- | + | #main_content h2{ | |
- | # | + | font-family: 'Black Ops One', cursive; |
- | + | color: #d31906; | |
- | + | font-size: 22px; | |
- | + | text-decoration: none; | |
- | + | margin-top:15px; | |
- | + | ||
} | } | ||
- | # | + | #main_content h3{ |
- | + | font-family: "Times New Roman", Times, serif; | |
- | + | font-size: 18px; | |
- | + | font-weight: bold; | |
+ | margin-top:15px; | ||
} | } | ||
+ | /* ---- Figures ---- */ | ||
- | + | .schedule { | |
- | + | width: 600px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .scheduleSmall { | |
- | + | width: 300px; | |
- | + | ||
} | } | ||
- | + | .graph{ | |
- | + | width: 100% | |
} | } | ||
- | + | /* ---- Title and soicalmedia ---- */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | #title { | ||
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | |||
- | + | #social_media { | |
- | + | ||
- | + | float: right; | |
- | |||
} | } | ||
+ | #social_media li { | ||
- | + | display: inline-block; | |
- | + | margin-left: 10px; | |
- | + | ||
- | |||
} | } | ||
- | . | + | .sm_logo { |
- | + | height: 30px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | } | |
- | + | ||
- | + | ||
- | |||
- | + | /* ---- Tracking system ---- */ | |
- | + | #tracking_system { | |
+ | clear: both; | ||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | } | ||
+ | /* ----Project content---- */ | ||
- | + | .project_text { | |
- | -moz- | + | -moz-column-count: 2; |
- | + | -moz-column-gap: 30px; | |
- | + | -webkit-column-count: 2; | |
+ | -webkit-column-gap : 30px; | ||
+ | -moz-column-rule-color: #ccc; | ||
+ | -moz-column-rule-style: solid; | ||
+ | -moz-column-rule-width: 1px; | ||
+ | -webkit-column-rule-color: #ccc; | ||
+ | -webkit-column-rule-style: solid ; | ||
+ | -webkit-column-rule-width: 1px; | ||
+ | font-style: normal !important; | ||
+ | } | ||
+ | .project_header { | ||
+ | padding-top: 40px; | ||
} | } | ||
- | . | + | .reference { |
+ | border-top: 1px solid #ccc; | ||
+ | margin-top: 30px; | ||
+ | padding-top: 30px; | ||
+ | } | ||
- | + | .figure2 { | |
- | + | width: 800px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /* ----Calendar---- */ | |
- | + | ||
- | + | ||
- | |||
- | } | + | #calendar { |
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top: 50px; | ||
+ | margin-bottom: 20px; | ||
+ | font-size: 50px; | ||
+ | font-family: 'Black Ops One', cursive; | ||
+ | } | ||
- | + | #calendar_head { | |
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 5px; | ||
+ | font-size: 50px; | ||
+ | font-family: 'Black Ops One', cursive; | ||
+ | text-align: center; | ||
+ | color: #d31906; | ||
+ | } | ||
- | + | #calendar_days { | |
- | + | margin-left:auto; | |
- | + | margin-right:auto; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | #calendar_days td { | ||
+ | text-align: center; | ||
+ | width: 180px; | ||
+ | font-family: 'Black Ops One', cursive; | ||
} | } | ||
- | + | #calendar_days td a { | |
- | + | text-decoration: none; | |
- | + | color: #d31906; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #calendar a { | |
- | + | text-decoration: none; | |
- | + | color: black; | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #calendar tr #calendar_week { |
- | + | width: 300px; | |
- | + | text-align: center; | |
} | } | ||
- | # | + | #calendar_work table |
- | + | { | |
- | + | font-family: 'Black Ops One', cursive; | |
- | + | border-collapse:collapse; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #calendar_work td, th | |
- | + | { | |
- | + | font-size:0.8em; | |
- | + | border:1px solid #5d6a52; | |
- | + | padding:3px 7px 2px 7px; | |
- | + | ||
} | } | ||
- | + | #calendar_work th | |
- | # | + | { |
- | + | font-size:1.1em; | |
- | + | text-align:left; | |
- | + | padding-top:5px; | |
- | + | padding-bottom:4px; | |
- | + | background-color: #dee1dc; | |
- | + | color:#5d6a52; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
+ | #calendar_work td{ | ||
+ | font-family: "Times New Roman", Times, serif; | ||
} | } | ||
- | |||
- | |||
+ | #calendar_work tr:nth-of-type(odd) { | ||
+ | background-color:#dee1dc; | ||
} | } | ||
- | + | /* ----Back-to-top button---- */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .back-to-top { | ||
+ | width: 90px; | ||
+ | height: 105px; | ||
+ | position: fixed; | ||
+ | display: none; | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | background-color: rgba(0, 0, 0, 0.3); | ||
+ | cursor: default; | ||
+ | bottom: 100px; /* placement from bot */ | ||
+ | right: 100px; | ||
+ | z-index: 20; | ||
+ | padding: 1em; | ||
+ | |||
+ | /* rounded corners */ | ||
+ | -webkit-border-radius: 15px; | ||
+ | -moz-border-radius: 15px; | ||
+ | border-radius: 15px; | ||
} | } | ||
- | + | .back-to-top:hover { | |
- | + | background-color: rgba(0, 0, 0, 0.5); | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .back-to-top a { | ||
+ | position: relative; | ||
+ | left: 8px; | ||
+ | font: 11px/100% Arial, Helvetica, sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | color: #bbb; | ||
} | } | ||
- | + | .back-to-top img{ | |
+ | |||
+ | width: 90px; | ||
+ | height: 90px; | ||
+ | margin-bottom: 7px; | ||
+ | } | ||
- | + | /* ---- Intro ----- */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .view { | |
+ | width: 1090px; | ||
+ | height: 3105px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | cursor: default; | ||
+ | position: absolute; | ||
+ | top: 50px; | ||
+ | z-index: 950; | ||
- | + | border-bottom-right-radius: 25px; | |
- | + | border-bottom-left-radius: 25px; | |
- | + | border-top-left-radius: 25px; | |
+ | border-top-right-radius: 25px; | ||
- | + | margin-left:-20px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | opacity: 1; | ||
+ | -moz-transition-property: opacity; | ||
+ | -moz-transition-duration: 2s; | ||
+ | -webkit-transition-property: opacity; | ||
+ | -webkit-transition-duration: 2s; | ||
+ | transition-property: opacity; | ||
+ | transition-duration: 2s; | ||
} | } | ||
- | + | .view img { | |
- | + | margin-left: auto; | |
- | + | margin-right: auto; | |
- | + | display: block; | |
+ | } | ||
+ | .view ul { | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | padding: 10px; | ||
} | } | ||
- | + | .view .nav { | |
- | + | padding: 14px 10px; | |
- | + | font-size: 40px; | |
- | + | color: #5d6a52; | |
- | + | //font-family: 'Black Ops One', cursive; | |
- | + | font-family: 'Play', sans-serif; | |
- | + | font-weight: bold; | |
- | + | -webkit-text-stroke: 1px white; | |
+ | -moz-text-stroke: 1px white; | ||
} | } | ||
+ | /* ----- Sponsor div ----- */ | ||
- | # | + | #custom_footer { |
- | + | ||
- | + | width: 100%; | |
- | + | border-top: 30px solid #000; | |
- | + | ||
- | + | background-color: #fff; | |
- | + | bottom: 0; | |
- | + | min-width: 1100px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | .sponsorTable{ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | width: 100%; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
+ | #custom_footer .sponsors{ | ||
- | + | width: 150px; | |
- | + | max-height: 150px; | |
- | + | ||
} | } | ||
- | # | + | #custom_footer .centerThis{ |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | opacity:0.6; | ||
+ | text-align: center; | ||
+ | width:10%; | ||
+ | padding: 20px; | ||
} | } | ||
- | # | + | #custom_footer .centerThis:hover{ |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | opacity:1; | ||
} | } | ||
- | # | + | #secret { |
- | + | position: absolute; | |
- | + | top: 20%; | |
- | + | left: 50%; | |
- | + | width: 190px; | |
- | + | height: 190px; | |
- | + | margin:-60px 0 0 -60px; | |
- | + | -webkit-animation:spin 4s linear infinite; | |
- | + | -moz-animation:spin 4s linear infinite; | |
- | + | animation:spin 4s linear infinite; | |
- | + | ||
} | } | ||
- | + | @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } | |
+ | @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } | ||
+ | @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } | ||
- | |||
- | |||
- | |||
- | + | /* ---- Dynamic font size for navbar ---- */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | |||
+ | @media (max-width: 1490px) { | ||
+ | #menu ul li a { font-size: 75%; } | ||
} | } | ||
- | # | + | @media (min-width: 1500px) { |
- | + | #menu ul li a { font-size: 100%; } | |
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | @media (max-width: 1490px) { | ||
+ | #menu_right ul li a { font-size: 75%; } | ||
} | } | ||
- | #menu_right | + | @media (min-width: 1500px) { |
- | + | #menu_right ul li a { font-size: 100%; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #cover { |
- | + | position: absolute; | |
- | + | top: 0; | |
- | + | left: 0; | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | z-index: 100; | |
- | + | display: none; | |
- | + | background-color: #000000; | |
- | + | opacity: .7; | |
- | + | filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7); | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } |
Latest revision as of 22:17, 17 October 2014
.clear {
clear: both;
}
- master {
width: 100%; min-height: 500px;
min-width: 1100px;
}
- header {
background-color: #fff;
background-image: url('https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png'); background-size: 100% 100%; background-repeat: no-repeat;
border-top: 2px solid #000;
border-left: 2px solid #000; border-right: 2px solid #000;
width: 1050px;
height: 300px;
margin-right: auto; margin-left: auto;
padding: 20px; border-top-left-radius: 25px; border-top-right-radius: 25px;
}
.mainText{ margin-top: 30px; }
- main_content {
border-bottom: 2px solid #000;
border-left: 2px solid #000; border-right: 2px solid #000;
background-color: #fff;
width: 1050px; min-height: 400px; margin-right: auto; margin-left: auto;
margin-bottom:50px; padding: 20px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
- main_content h1{
font-family: 'Black Ops One', cursive;
font-size: 44px;
margin-top:25px; font-weight: bold;
text-transform: uppercase;
color: #5d6a52; -webkit-text-stroke: 1px black; -moz-text-stroke: 1px black;
}
- main_content h2{
font-family: 'Black Ops One', cursive;
color: #d31906;
font-size: 22px; text-decoration: none; margin-top:15px;
}
- main_content h3{
font-family: "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; margin-top:15px;
} /* ---- Figures ---- */
.schedule { width: 600px; }
.scheduleSmall { width: 300px; }
.graph{ width: 100% }
/* ---- Title and soicalmedia ---- */
- title {
float: left;
}
- social_media {
float: right;
}
- social_media li {
display: inline-block; margin-left: 10px;
}
.sm_logo {
height: 30px;
}
/* ---- Tracking system ---- */
- tracking_system {
clear: both; width: 100%; height: 30px;
}
/* ----Project content---- */
.project_text {
-moz-column-count: 2;
-moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap : 30px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px;
font-style: normal !important; }
.project_header { padding-top: 40px; }
.reference { border-top: 1px solid #ccc; margin-top: 30px; padding-top: 30px; }
.figure2 { width: 800px; }
/* ----Calendar---- */
- calendar {
margin-left:auto; margin-right:auto; margin-top: 50px; margin-bottom: 20px; font-size: 50px; font-family: 'Black Ops One', cursive;
}
- calendar_head {
margin-left:auto; margin-right:auto; margin-top: 30px; margin-bottom: 5px; font-size: 50px; font-family: 'Black Ops One', cursive; text-align: center; color: #d31906;
}
- calendar_days {
margin-left:auto; margin-right:auto;
}
- calendar_days td {
text-align: center; width: 180px; font-family: 'Black Ops One', cursive;
}
- calendar_days td a {
text-decoration: none; color: #d31906;
}
- calendar a {
text-decoration: none; color: black;
}
- calendar tr #calendar_week {
width: 300px; text-align: center;
}
- calendar_work table
{ font-family: 'Black Ops One', cursive; border-collapse:collapse; }
- calendar_work td, th
{ font-size:0.8em; border:1px solid #5d6a52; padding:3px 7px 2px 7px; }
- calendar_work th
{ font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color: #dee1dc; color:#5d6a52; }
- calendar_work td{
font-family: "Times New Roman", Times, serif; }
- calendar_work tr:nth-of-type(odd) {
background-color:#dee1dc; }
/* ----Back-to-top button---- */
.back-to-top {
width: 90px; height: 105px; position: fixed; display: none; text-decoration: none; color: #000000; background-color: rgba(0, 0, 0, 0.3); cursor: default; bottom: 100px; /* placement from bot */ right: 100px; z-index: 20; padding: 1em; /* rounded corners */
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
.back-to-top:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.back-to-top a { position: relative; left: 8px; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; color: #bbb;
}
.back-to-top img{
width: 90px; height: 90px;
margin-bottom: 7px;
}
/* ---- Intro ----- */
.view {
width: 1090px; height: 3105px; overflow: hidden; position: relative; text-align: center; cursor: default; position: absolute; top: 50px; z-index: 950;
border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; border-top-left-radius: 25px; border-top-right-radius: 25px;
margin-left:-20px;
background-color: rgba(0, 0, 0, 0.8); opacity: 1; -moz-transition-property: opacity; -moz-transition-duration: 2s; -webkit-transition-property: opacity; -webkit-transition-duration: 2s; transition-property: opacity; transition-duration: 2s;
}
.view img {
margin-left: auto; margin-right: auto; display: block;
} .view ul {
text-align: center; position: relative; padding: 10px;
}
.view .nav { padding: 14px 10px; font-size: 40px; color: #5d6a52; //font-family: 'Black Ops One', cursive; font-family: 'Play', sans-serif; font-weight: bold; -webkit-text-stroke: 1px white; -moz-text-stroke: 1px white; }
/* ----- Sponsor div ----- */
- custom_footer {
width: 100%; border-top: 30px solid #000;
background-color: #fff; bottom: 0; min-width: 1100px;
}
.sponsorTable{
width: 100%; }
- custom_footer .sponsors{
width: 150px; max-height: 150px;
}
- custom_footer .centerThis{
opacity:0.6; text-align: center; width:10%; padding: 20px; }
- custom_footer .centerThis:hover{
opacity:1;
}
- secret {
position: absolute; top: 20%; left: 50%; width: 190px; height: 190px; margin:-60px 0 0 -60px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* ---- Dynamic font size for navbar ---- */
@media (max-width: 1490px) {
#menu ul li a { font-size: 75%; }
}
@media (min-width: 1500px) {
#menu ul li a { font-size: 100%; }
}
@media (max-width: 1490px) {
#menu_right ul li a { font-size: 75%; }
}
@media (min-width: 1500px) {
#menu_right ul li a { font-size: 100%; }
}
- cover {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; background-color: #000000; opacity: .7; filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.7); }