Difference between revisions of "Team:ASIJ Tokyo/CSS"

Line 1: Line 1:
−
<html>
+
/* Structure ================================================== */
−
<style type="text/css">
+
−
 
+
−
 
+
−
/* Reset the wiki style by overriding with a reset stylesheet (written by Florian Albrecht)
+
−
  the relevant wiki css rules are reset by using rules with higher priority */
+
−
 
+
−
 
+
−
/* Start general reset ================================================== */
+
−
 
+
 
body {
 
body {
−
     background-color: #C7E0F3;
+
     background-color: transparent;
 
     background-image: url("https://static.igem.org/mediawiki/2018/b/b0/T--ASIJ_Tokyo--OfficialBackground.jpeg");
 
     background-image: url("https://static.igem.org/mediawiki/2018/b/b0/T--ASIJ_Tokyo--OfficialBackground.jpeg");
 
     background-repeat: repeat, repeat;
 
     background-repeat: repeat, repeat;
 
     background-size: 100%;
 
     background-size: 100%;
 
     font-family: "Avenir";
 
     font-family: "Avenir";
−
    padding: 0;
+
padding: 0;
 +
margin: 0;
 +
}
 +
.wrapper {
 +
  margin-left: 10%;
 +
  margin-right: 10%;
 +
}
 +
footer {
 +
border-top: 2px dotted #fff;
 +
margin-top: 10%;
 
}
 
}
  
−
div#globalWrapper {
+
#footer_logo {
−
    margin: 0;
+
height: 130px;
−
    padding: 0;
+
display: block;
−
    position: static;
+
margin: 25px;
−
    width: auto;
+
margin-left: auto;
−
    background-color: transparent;
+
margin-right: auto;
 
}
 
}
  
−
/* Start top-section reset ============================================== */
+
footer p{
 +
float: right;
 +
color: #88C1EF;
 +
}
  
−
div#top-section {
+
footer p a{
−
    border: 0;
+
color: #88C1EF;
−
    height: auto;
+
−
    margin: 0;
+
−
    position: static;
+
−
    width: auto;
+
 
}
 
}
  
 +
/* navigation bar====================================== */
  
−
div#p-logo a, div#p-logo a:hover {
+
.nav-box {
−
    text-decoration: none;
+
background-color: white;
 +
display: block;
 +
width: 100%;
 +
height: 60px;
 +
position: fixed;
 +
top: 0;
 +
border-bottom: 2px solid #2F5F8A;
 +
box-shadow: 0px 3px 10px rgba(19, 19, 19, 0.2);
 +
}
 +
nav {
 +
  position: fixed;
 +
  width: 80%;
 +
  height: 60px;
 +
  background-color: white;
 +
  top: 0;
 +
  margin: 0;
 +
  padding:0;
 +
  border-bottom: 2px solid #2F5F8A;
 
}
 
}
  
−
 
+
#ASIJ {
−
div#search-controls {
+
  height: 60px;
−
    background-color: transparent;
+
  float: left;
−
    height: auto;
+
  padding: 0 20px;
−
    position: static;
+
  margin: 0;
−
    right: 0;
+
−
    text-align: left;
+
−
    top: 0;
+
−
    width: auto;
+
−
    z-index: auto;
+
 
}
 
}
  
−
 
+
nav ul {
−
/* Start content reset ================================================== */
+
  float: left;
−
 
+
  margin: 0;
−
 
+
  padding: 0;
−
div#content {
+
−
background-color: transparent;
+
 
}
 
}
  
−
body li {
+
nav ul li {
−
    margin: 0;
+
  float: left;
 +
  list-style-type: none;
 +
  position: relative;
 
}
 
}
  
−
body h2 {
+
nav ul li .HP {
−
font-family: 40px Avenir;
+
  line-height: 30px;
 
}
 
}
  
−
body h1, body h3, body h4, body h5, body h6 {
 
  
 +
nav ul li a {
 +
  color: #2F5F8A;
 +
  font-size: 19px;
 +
  line-height: 60px;
 +
  padding: 0;
 +
  display: block;
 +
  text-decoration: none;
 +
  width: 140.3px;
 +
  text-align: center;
 +
 
 
}
 
}
  
−
body .firstHeading {
+
nav ul li ul {
−
    margin: 0;
+
  display: block;
 +
  position: absolute;
 +
  background-color: #FEEDB3;
 +
  visibility: hidden;
 +
  width: inherit;
 +
  transition: none;
 
}
 
}
  
−
div#contentSub {
+
nav ul li ul li a{
−
    color: #f2b1b1;
+
  padding: 0;
−
    font-size: inherit;
+
  line-height: 50px;
−
    line-height: inherit;
+
  text-align: center;
−
    margin: 0;
+
  font-size: 16px;
−
    width: auto;
+
  color: #4B7FAD;
 
}
 
}
  
−
div#catlinks {
+
nav ul li ul li:first-child {
−
    background-color: transparent;
+
  border-top: 2px solid #2F5F8A;
−
    border: 0;
+
−
    clear: both;
+
−
    margin: 0;
+
−
    padding: 0;
+
 
}
 
}
  
−
div.container
+
nav ul li:hover ul{
−
{
+
  display: block;
−
    font-family: Avenir;
+
  visibility: visible;
−
    font-weight: bold;
+
  box-shadow: 0px 5px 10px rgba(19, 19, 19, 0.2);
−
    position: relative;
+
  transition: none;
−
    margin: 0 auto;
+
−
    padding: 5em 3em;
+
−
    text-align: center;
+
 
}
 
}
  
−
div.container a
+
.active {
−
{
+
  color: #FCC81C;
−
    color: #1e50a2;
+
  text-transform: uppercase;
−
    text-decoration: none;
+
−
    font: 20px Avenir;
+
−
    margin: 0px 10px;
+
−
    padding: 10px 10px;
+
−
    position: relative;
+
−
    z-index: 0;
+
−
    cursor: pointer;
+
 
}
 
}
  
−
div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
+
nav ul li a:hover:not(.active){
−
{
+
  background-color: #E8E6E6;
−
    position: absolute;
+
−
    left: 0px;
+
−
    width: 100%;
+
−
    height: 2px;
+
−
    background: #1e50a2;
+
−
    content: "";
+
−
    opacity: 0;
+
−
    transition: all 0.3s;
+
 
}
 
}
−
div.topBotomBordersOut a:before
+
 
−
{
+
nav ul li ul li a:hover:not(.active) {
−
    top: 3px;
+
  background-color: #FDE38D;
−
    transform: translateY(10px);
+
−
}
+
−
div.topBotomBordersOut a:after
+
−
{
+
−
    bottom: 3px;
+
−
    transform: translateY(-10px);
+
−
}
+
−
div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
+
−
{
+
−
    opacity: 1;
+
−
    transform: translateY(0px);
+
 
}
 
}
  
  
 +
 
 +
/* home page ============================================== */
  
−
/* Start footer reset =================================================== */
 
  
−
div#footer-box {
+
#title p{
−
    position: relative;
+
font-size: 6em;
−
    padding: 1rem;
+
color: #071f4e;
−
    width: 100%;
+
text-align: right;
−
    border-color: #E8E6E6;
+
font-weight: bold;
−
    background-color: transparent;
+
text-shadow: 0px 0px 10px white;
 +
letter-spacing: 5px;
 +
padding-top: 12px;
 
}
 
}
  
−
div#footer {
+
table{
−
    left: 45%;
+
margin-top: 10%;
−
    top: -20%;
+
margin-bottom: 5%;
−
    padding: 20px;
+
−
    margin: 0 auto;
+
 
}
 
}
  
−
div#f-poweredbyico, div#f-copyrightico {
+
#subtitle h1{
−
    float: none;
+
text-align: right;
 +
color: #071f4e;
 +
font-size: 20px;
 +
}
 +
 
 +
#abstract {
 +
margin: auto;
 +
background-color: #88c1ef;
 +
padding: 50px;
 
}
 
}
  
−
#sideMenu{
+
#abstract p{
−
            width: 200px;
+
text-align: justify;
−
    position: absolute;
+
font-size: 18px;
−
    top: 20px;
+
−
    left: 1020px;
+
−
    z-index: 10;
+
−
    padding-top: 0px;
+
−
    padding-bottom: 15px;
+
−
    padding-left: 15px;
+
−
    padding-right: 15px;
+
−
    text-align: left;
+
−
display: none;
+
−
z-index: 9996;
+
 
}
 
}
−
#content{
+
 
−
width: 100%;
+
#abstract h3{
−
        padding: 0px;
+
text-align: center;
−
        margin-left: 0px;
+
color: white;
 +
font-size: 30px;
 +
letter-spacing: 2px;
 +
font-weight: 100;
 +
margin: 0%;
 
}
 
}
−
#top_title{
 
−
overflow: hidden;
 
−
display: none;
 
−
}
 
−
#top_menu_14{
 
−
height: 20px;
 
−
}
 
−
#top_menu_under{
 
−
height: 0px;
 
−
}
 
−
#globalWrapper{
 
−
      padding-bottom: 20px;
 
−
}
 
−
#HQ_page p {
 
−
    font-size: 16px;
 
−
}
 
−
 
−
#body {
 
−
background-color: #c7e0f3;
 
−
background-image: url("https://static.igem.org/mediawiki/2018/b/b0/T--ASIJ_Tokyo--OfficialBackground.jpeg");
 
−
background-repeat: no-repeat, repeat
 
−
background-size: cover;
 
−
}
 
−
 
−
#liver {
 
−
position: relative;
 
−
left: 150px;
 
−
top: 0px;
 
−
width: 530px;
 
−
}
 
−
 
−
#title p{
 
−
font-size: 85px;
 
−
color: #071f4e;
 
−
position: absolute;
 
−
top: 200px;
 
−
left: 650px;
 
−
font-weight: bold;
 
−
font-family: "Avenir";
 
−
text-shadow: 4px 4px 7px #5a544b;
 
−
letter-spacing: 10px;
 
−
}
 
−
 
−
#red {
 
−
color: #c53d43;
 
−
}
 
−
 
−
#subtitle h1{
 
−
color: #071f4e;
 
−
font-size: 20px;
 
−
font-family: "Avenir";
 
−
position: absolute;
 
−
line-height: 2;
 
−
top: 550px;
 
−
left: 650px;
 
−
}
 
−
 
−
#abstract {
 
−
position: relative;
 
−
left: 50%;
 
−
font-family: "Avenir";
 
−
background-color: #88c1ef;
 
−
top: 20px;
 
−
left: 240px;
 
−
width: 960px;
 
−
padding: 20px;
 
−
border-radius: 20px;
 
−
}
 
−
 
−
 
−
</style>
 

Revision as of 07:00, 12 October 2018

/* Structure ================================================== */ body { 

   background-color: transparent;
   background-image: url("T--ASIJ_Tokyo--OfficialBackground.jpeg");
   background-repeat: repeat, repeat;
   background-size: 100%;
   font-family: "Avenir";

padding: 0; margin: 0; } .wrapper { 

 margin-left: 10%;
 margin-right: 10%;

} footer { border-top: 2px dotted #fff; margin-top: 10%; }

  1. footer_logo {

height: 130px; display: block; margin: 25px; margin-left: auto; margin-right: auto; }

footer p{ float: right; color: #88C1EF; }

footer p a{ color: #88C1EF; }

/* navigation bar====================================== */

.nav-box { background-color: white; display: block; width: 100%; height: 60px; position: fixed; top: 0; border-bottom: 2px solid #2F5F8A; box-shadow: 0px 3px 10px rgba(19, 19, 19, 0.2); } nav { 

 position: fixed;
 width: 80%;
 height: 60px;
 background-color: white;
 top: 0;
 margin: 0;
 padding:0;
 border-bottom: 2px solid #2F5F8A;

}

  1. ASIJ {
 height: 60px;
 float: left;
 padding: 0 20px;
 margin: 0;

}

nav ul { 

 float: left;
 margin: 0;
 padding: 0;

}

nav ul li { 

 float: left;
 list-style-type: none;
 position: relative;

}

nav ul li .HP { 

 line-height: 30px;

}


nav ul li a { 

 color: #2F5F8A;
 font-size: 19px;
 line-height: 60px;
 padding: 0;
 display: block;
 text-decoration: none;
 width: 140.3px;
 text-align: center;

}

nav ul li ul { 

 display: block;
 position: absolute;
 background-color: #FEEDB3;
 visibility: hidden;
 width: inherit;
 transition: none;

}

nav ul li ul li a{ 

 padding: 0;
 line-height: 50px;
 text-align: center;
 font-size: 16px;
 color: #4B7FAD;

}

nav ul li ul li:first-child { 

 border-top: 2px solid #2F5F8A;

}

nav ul li:hover ul{ 

 display: block;
 visibility: visible;
 box-shadow: 0px 5px 10px rgba(19, 19, 19, 0.2);
 transition: none;

}

.active { 

 color: #FCC81C;
 text-transform: uppercase;

}

nav ul li a:hover:not(.active){ 

 background-color: #E8E6E6;

}

nav ul li ul li a:hover:not(.active) { 

 background-color: #FDE38D;

}


/* home page ============================================== */


  1. title p{

font-size: 6em; color: #071f4e; text-align: right; font-weight: bold; text-shadow: 0px 0px 10px white; letter-spacing: 5px; padding-top: 12px; }

table{ margin-top: 10%; margin-bottom: 5%; }

  1. subtitle h1{

text-align: right; color: #071f4e; font-size: 20px; }

  1. abstract {

margin: auto; background-color: #88c1ef; padding: 50px; }

  1. abstract p{

text-align: justify; font-size: 18px; }

  1. abstract h3{

text-align: center; color: white; font-size: 30px; letter-spacing: 2px; font-weight: 100; margin: 0%; }