Team:Uppsala/stylesheet.css
From 2014.igem.org
(13 intermediate revisions not shown) | |||
Line 255: | Line 255: | ||
bottom: 100px; /* placement from bot */ | bottom: 100px; /* placement from bot */ | ||
right: 100px; | right: 100px; | ||
- | + | z-index: 20; | |
padding: 1em; | padding: 1em; | ||
Line 288: | Line 288: | ||
.view { | .view { | ||
width: 1090px; | width: 1090px; | ||
+ | height: 3105px; | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
Line 328: | Line 329: | ||
font-size: 40px; | font-size: 40px; | ||
color: #5d6a52; | color: #5d6a52; | ||
- | font- | + | //font-family: 'Black Ops One', cursive; |
- | font-family: ' | + | font-family: 'Play', sans-serif; |
font-weight: bold; | font-weight: bold; | ||
-webkit-text-stroke: 1px white; | -webkit-text-stroke: 1px white; | ||
Line 341: | Line 342: | ||
width: 100%; | width: 100%; | ||
border-top: 30px solid #000; | border-top: 30px solid #000; | ||
- | + | ||
background-color: #fff; | background-color: #fff; | ||
bottom: 0; | bottom: 0; | ||
Line 364: | Line 365: | ||
opacity:0.6; | opacity:0.6; | ||
text-align: center; | text-align: center; | ||
- | width: | + | width:10%; |
padding: 20px; | padding: 20px; | ||
} | } | ||
Line 394: | Line 395: | ||
- | @media (max-width: | + | @media (max-width: 1490px) { |
- | #menu ul li a { font-size: | + | #menu ul li a { font-size: 75%; } |
} | } | ||
- | @media (min-width: | + | @media (min-width: 1500px) { |
#menu ul li a { font-size: 100%; } | #menu ul li a { font-size: 100%; } | ||
} | } | ||
- | @media (max-width: | + | @media (max-width: 1490px) { |
- | #menu_right ul li a { font-size: | + | #menu_right ul li a { font-size: 75%; } |
} | } | ||
- | @media (min-width: | + | @media (min-width: 1500px) { |
#menu_right ul li a { font-size: 100%; } | #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); }