Difference between revisions of "Template:ITB INDONESIA/dev/css/style"

 
(89 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
#globalWrapper {
 
#globalWrapper {
   overflow-x: hidden;
+
   overflow: hidden;
 
}
 
}
  
Line 10: Line 10:
 
   width: 100%;
 
   width: 100%;
 
   font: Helvetica, Arial, sans-serif;
 
   font: Helvetica, Arial, sans-serif;
   font-size : 16px;
+
   font-size: 16px;
   background-color: #9CDCB8;
+
   color: #14464a;
  color: #333;
+
 
   line-height: 1.3em;
 
   line-height: 1.3em;
 
   padding: 0;
 
   padding: 0;
   overflow: hidden;
+
   background-color: rgba(20, 70, 74, 0.2);
 +
  background-position: 200px 300px;
 +
  padding: 2% 0;
 
}
 
}
  
Line 24: Line 25:
  
 
#bodyContent {
 
#bodyContent {
   width: 1080px;
+
   width: 90%;
 
   margin: 0 auto;
 
   margin: 0 auto;
  background-color: white;
+
   padding: 2%;
   padding: 2% 2% 0 2%;
+
 
   position: relative;
 
   position: relative;
 
   margin-bottom: -6px;
 
   margin-bottom: -6px;
 +
  background-color: rgba(255,255,255,0.9);
 +
  /*background-color: rgba(20, 70, 74, 0.01);*/
 +
  border-radius: 20px;
 +
  background-image: url("img/rl.png");
 
}
 
}
  
 
#background-left, #background-right {
 
#background-left, #background-right {
 
   position: absolute;
 
   position: absolute;
   background-image: url(https://static.igem.org/mediawiki/2015/9/97/ITB_INDONESIA_IGEM2015_bgside.gif);
+
   background-image: url(../img/bg-side.gif);
  background-repeat : repeat-y;
+
 
   width: 823px;
 
   width: 823px;
   height: 120%;
+
   height: 2224px;
 
   top: -2%;
 
   top: -2%;
 
}
 
}
Line 49: Line 52:
 
}
 
}
  
#header {
+
#background-top {
   height: 333px;
+
   position: absolute;
   background-image: url(https://static.igem.org/mediawiki/2015/5/55/ITB_INDONESIA_IGEM2015_header.png);
+
   background-image: url(https://static.igem.org/mediawiki/2015/2/2b/ITB_INDONESIA_IGEM2015_bgtop.png);
   position: relative;
+
   background-image: url(../img/bg-top.png);
 +
  width: 200px;
 +
  height: 263px;
 +
  left: 100%;
 +
  top: -2%;
 
}
 
}
  
#header .socmed {
+
#background-bottom {
 
   position: absolute;
 
   position: absolute;
   top : 42%;
+
   background-image: url(https://static.igem.org/mediawiki/2015/9/96/ITB_INDONESIA_IGEM2015_bgbottom.png);
   left : 82%;
+
  background-image: url(../img/bg-bottom.png);
 +
  width: 320px;
 +
  height: 269px;
 +
  bottom: 0;
 +
  right: 100%;
 +
}
 +
 
 +
#header h1 {
 +
   margin: 0.1em 0;
 +
  border-bottom: none;
 +
  color: #14464a;
 +
  padding: 0.5em 0;
 +
}
 +
 
 +
 
 +
#header > div {
 +
  display: inline-block;
 +
  float: left;
 +
  font-size: 2em;
 +
}
 +
 
 +
#header > div > span {
 +
  border-top: 3px solid #14464a;
 +
  padding-top: 14px;
 +
}
 +
 
 +
#header #logo {
 +
  width: 25%;
 +
  display: inline-block;
 +
  float: right;
 +
}
 +
 
 +
#header #project-name {
 +
  font-size: 5em;
 +
  line-height: 100%;
 +
}
 +
 
 +
table {
 +
  margin : 0 auto;
 +
}
 +
 
 +
table td, table th {
 +
  padding : 5px 10px;
 +
  border: 1px solid #14464a;
 +
  background-color : #FEFEFE;
 +
}
 +
 
 +
.img-caption {
 +
margin : 40px auto;
 +
}
 +
 
 +
.img-caption img {
 +
display:block;
 +
margin: 0 auto;
 +
}
 +
 
 +
.img-caption span {
 +
display:block;
 +
padding : 10px 20px;
 +
font-size:14px;
 +
text-align:center;
 +
}
 +
 
 +
.quote {
 +
  padding : 30px;
 +
  background-color : #fff;
 
}
 
}
  
#header .socmed img {
+
.quote span {
  width: 8%;
+
  display: block;
  margin : -6px 6px 0 0;
+
  margin: 20px 0 0 20px;
 
}
 
}
  
Line 77: Line 149:
 
.main-nav {
 
.main-nav {
 
   float: left;
 
   float: left;
   border-bottom: 1px solid #14464a;
+
   background-color: #14464a;
 
   width: 100%;
 
   width: 100%;
 +
  margin: 40px -10% 20px -10%;
 +
  padding: 15px 10%;
 +
  box-shadow: 0 0 5px #14464a;
 
}
 
}
  
 
.main-nav a {
 
.main-nav a {
   color: #14464a;
+
   color: #e0f2eb;
 
   text-decoration: none;
 
   text-decoration: none;
 
   display: inline-block;
 
   display: inline-block;
 
   padding: 10px 1em;
 
   padding: 10px 1em;
 +
  font-weight: 500;
 
}
 
}
  
Line 91: Line 167:
 
   font-size: 1.2em;
 
   font-size: 1.2em;
 
   font-weight: 100;
 
   font-weight: 100;
   margin: 1% 0 1% 0;
+
   margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
.main-nav > ul > li ul li {
 +
  display: block;
 
}
 
}
  
Line 105: Line 186:
 
   margin: 0 0 10px 0;
 
   margin: 0 0 10px 0;
 
   padding: 0;
 
   padding: 0;
   background-color: #e0f2eb;
+
   background-color:rgba(23, 188, 145, 1);
   width: 120%;
+
   width: 220px;
 
   left: 0;
 
   left: 0;
   z-index : 1;
+
   z-index: 1;
 
}
 
}
  
.main-nav > ul > li ul li {
+
.main-nav > ul li:hover {
 +
  background-color:rgba(23, 188, 145, 1);
 +
  cursor: pointer;
 +
}
 +
 
 +
.main-nav > ul li:hover > ul {
 
   display: block;
 
   display: block;
 
}
 
}
  
.main-nav > ul li:hover {
+
.main-nav > ul li > ul li:hover {
   background-color: #e0f2eb;
+
   background-color:rgba(0, 0, 0, 0.2);
 
   cursor: pointer;
 
   cursor: pointer;
 
}
 
}
  
.main-nav > ul li:hover > ul {
+
.main-nav > ul li > ul li:hover > ul {
 
   display: block;
 
   display: block;
 +
  padding-left:20px;
 
}
 
}
  
h2 {
+
#sponsors {
   border-bottom: 1px solid #14464a;
+
  text-align: center;
 +
}
 +
 
 +
#sponsors a {
 +
  margin: 10px 30px 15px 30px;
 +
  display:inline-block;
 +
  height : auto;
 +
   border-bottom : 0;
 +
}
 +
 
 +
#sponsors img {
 +
  height: 120px;
 +
}
 +
 
 +
.team-pic {
 +
  margin: 10px 0;
 
   padding: 10px;
 
   padding: 10px;
   font-weight: 300;
+
  float: left;
   background-color: #eee;
+
  width: 18%;
 +
  display: inline-block;
 +
  text-align: center;
 +
  height:320px;
 +
}
 +
 
 +
.team-pic h3 {
 +
  margin-bottom: 2px;
 +
}
 +
 
 +
.team-pic .position {
 +
  color: #888;
 +
}
 +
 
 +
.team-pic.dosen {
 +
  width: 18%;
 +
}
 +
 
 +
.team-pic.leader {
 +
  width: 100%;
 +
}
 +
 
 +
.team-pic:hover {
 +
  cursor: pointer;
 +
}
 +
 
 +
.team-pic img {
 +
  width: 180px;
 +
  box-shadow: 0 0 10px darkgray;
 +
  margin: 0 20px 0 10px;;
 +
  vertical-align: top;
 +
}
 +
 
 +
#safety ol ol {
 +
  margin-left:2em;
 +
}
 +
 
 +
#safety ol ol li {
 +
  margin: 10px 0 20px 0;
 +
}
 +
 
 +
#safety .question {
 +
  color: black;
 +
   font-weight: 700;
 +
  display : block;
 +
}
 +
 
 +
#safety .list-header {
 +
  font-weight:700;
 +
  color : black;
 +
  border-bottom: 2px solid #ccc;
 +
  display: inline-block;
 +
  padding-bottom : 4px;
 +
  margin-bottom : 4px;
 +
  font-size : 18px;
 +
}
 +
 
 +
.biodata {
 +
  display: none;
 +
  padding: 10px;
 +
   background-color: lightgrey;
 +
  box-shadow: inset 0 0 10px grey;
 +
  margin: 10px 0;
 +
  width: 100%;
 +
  clear: both;
 +
}
 +
 
 +
.biodata p {
 +
  margin: 1em;
 +
  text-align: left;
 +
}
 +
 
 +
.humprac {
 +
  margin: 20px 10px;
 +
  box-shadow: 0 0 10px black;
 +
  width: 23%;
 +
}
 +
 
 +
#humprac-overview ul {
 +
  list-style-type : disc;
 +
  margin-left: 50px;
 +
  font-weight : 700;
 +
}
 +
 
 +
#humprac-overview ul ul {
 +
  margin-left: 20px;
 +
  list-style-type : none;
 +
  font-weight: 500;
 +
}
 +
 
 +
h2 {
 +
  border-bottom: 2px solid #ccc;
 +
  padding: 18px;
 +
  font-weight: 700;
 +
  color: #14464a;
 +
  text-align: center;
 +
}
 +
 
 +
h3 {
 +
  font-weight: 700;
 +
  padding-bottom: 5px;
 +
  color: #14464a;
 
}
 
}
  
 
p {
 
p {
 
   word-spacing: 0.1em;
 
   word-spacing: 0.1em;
 +
  margin: 1.5em 1em;
 
}
 
}
 +
 +
.small {
 +
  display: block;
 +
  color: #999;
 +
  text-align: center;
 +
  font-size:80%
 +
}
 +
 +
section {
 +
  margin: 20px 0 60px 0;
 +
}
 +
 +
section a {
 +
  display: inline-block;
 +
  height : 22px;
 +
  border-bottom: 1px solid #14464a;
 +
}
 +
 +
section a:hover {
 +
  text-decoration: none !important;
 +
}
 +
 +
#idea { float: right; }
  
 
.achievement ul {
 
.achievement ul {
   margin: 0 0 0 2em;
+
   margin: 0 2em;
 
   list-style-type: none;
 
   list-style-type: none;
 
   list-style-image: none;
 
   list-style-image: none;
Line 158: Line 385:
  
 
.achievement ul li.done::before {
 
.achievement ul li.done::before {
   background-image: url(https://static.igem.org/mediawiki/2015/6/6f/ITB_INDONESIA_check_mark.png);
+
   background-image: url("https://static.igem.org/mediawiki/2015/6/6f/ITB_INDONESIA_check_mark.png");
 
}
 
}
  
 
.achievement ul li.not-done::before {
 
.achievement ul li.not-done::before {
   background-image: url(https://static.igem.org/mediawiki/2015/2/20/ITB_INDONESIA_cross_mark.png);
+
   background-image: url("https://static.igem.org/mediawiki/2015/2/20/ITB_INDONESIA_cross_mark.png");
}
+
 
+
footer {
+
  border-top: 1px solid #14464a;
+
  background-color: #eee;
+
  text-align: center;
+
  padding: 20px 0;
+
  margin-top: 20px;
+
 
}
 
}
  
Line 178: Line 397:
  
 
.bg-silver {
 
.bg-silver {
   background-color: #efefef;
+
   background-color: white;
 
}
 
}
  
 
.bg-gold {
 
.bg-gold {
 
   background-color: #dfcd78;
 
   background-color: #dfcd78;
 +
}
 +
 +
footer {
 +
  border-top: 1px solid #14464a;
 +
  background-color:rgba(23, 188, 145, 0.05);
 +
  text-align: center;
 +
  padding: 20px 0;
 +
  margin-top: 20px;
 +
  margin-bottom: -2em;
 +
}
 +
 +
#rhamno {
 +
  position: absolute;
 
}
 
}
  

Latest revision as of 08:56, 18 September 2015

  1. globalWrapper {
 overflow: hidden;

}

.firstHeading {

 display: none;

}

  1. content {
 width: 100%;
 font: Helvetica, Arial, sans-serif;
 font-size: 16px;
 color: #14464a;
 line-height: 1.3em;
 padding: 0;
 background-color: rgba(20, 70, 74, 0.2);
 background-position: 200px 300px;
 padding: 2% 0;

}

a, a:visited {

 color: #14464a;
 text-decoration: none;

}

  1. bodyContent {
 width: 90%;
 margin: 0 auto;
 padding: 2%;
 position: relative;
 margin-bottom: -6px;
 background-color: rgba(255,255,255,0.9);
 /*background-color: rgba(20, 70, 74, 0.01);*/
 border-radius: 20px;
 background-image: url("img/rl.png");

}

  1. background-left, #background-right {
 position: absolute;
 background-image: url(../img/bg-side.gif);
 width: 823px;
 height: 2224px;
 top: -2%;

}

  1. background-left {
 right : 100%;

}

  1. background-right {
 left: 100%;

}

  1. background-top {
 position: absolute;
 background-image: url(ITB_INDONESIA_IGEM2015_bgtop.png);
 background-image: url(../img/bg-top.png);
 width: 200px;
 height: 263px;
 left: 100%;
 top: -2%;

}

  1. background-bottom {
 position: absolute;
 background-image: url(ITB_INDONESIA_IGEM2015_bgbottom.png);
 background-image: url(../img/bg-bottom.png);
 width: 320px;
 height: 269px;
 bottom: 0;
 right: 100%;

}

  1. header h1 {
 margin: 0.1em 0;
 border-bottom: none;
 color: #14464a;
 padding: 0.5em 0;

}


  1. header > div {
 display: inline-block;
 float: left;
 font-size: 2em;

}

  1. header > div > span {
 border-top: 3px solid #14464a;
 padding-top: 14px;

}

  1. header #logo {
 width: 25%;
 display: inline-block;
 float: right;

}

  1. header #project-name {
  font-size: 5em;
  line-height: 100%;

}

table {

  margin : 0 auto;

}

table td, table th {

 padding : 5px 10px;
 border: 1px solid #14464a;
 background-color : #FEFEFE;

}

.img-caption { margin : 40px auto; }

.img-caption img { display:block; margin: 0 auto; }

.img-caption span { display:block; padding : 10px 20px; font-size:14px; text-align:center; }

.quote {

  padding : 30px;
  background-color : #fff;

}

.quote span {

  display: block;
  margin: 20px 0 0 20px;

}

nav {

 margin-bottom: 20px;

}

.logo {

 width: 20%;
 float: left;

}

.main-nav {

 float: left;
 background-color: #14464a;
 width: 100%;
 margin: 40px -10% 20px -10%;
 padding: 15px 10%;
 box-shadow: 0 0 5px #14464a;

}

.main-nav a {

 color: #e0f2eb;
 text-decoration: none;
 display: inline-block;
 padding: 10px 1em;
 font-weight: 500;

}

.main-nav > ul {

 font-size: 1.2em;
 font-weight: 100;
 margin: 0;
 padding: 0;

}

.main-nav > ul > li ul li {

 display: block;

}

.main-nav > ul > li {

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

}

.main-nav > ul > li ul {

 position: absolute;
 display: none;
 margin: 0 0 10px 0;
 padding: 0;
 background-color:rgba(23, 188, 145, 1);
 width: 220px;
 left: 0;
 z-index: 1;

}

.main-nav > ul li:hover {

 background-color:rgba(23, 188, 145, 1);
 cursor: pointer;

}

.main-nav > ul li:hover > ul {

 display: block;

}

.main-nav > ul li > ul li:hover {

 background-color:rgba(0, 0, 0, 0.2);
 cursor: pointer;

}

.main-nav > ul li > ul li:hover > ul {

 display: block;
 padding-left:20px;

}

  1. sponsors {
 text-align: center;

}

  1. sponsors a {
 margin: 10px 30px 15px 30px;
 display:inline-block;
 height : auto;
 border-bottom : 0;

}

  1. sponsors img {
 height: 120px;

}

.team-pic {

 margin: 10px 0;
 padding: 10px;
 float: left;
 width: 18%;
 display: inline-block;
 text-align: center;
 height:320px;

}

.team-pic h3 {

 margin-bottom: 2px;

}

.team-pic .position {

 color: #888;

}

.team-pic.dosen {

 width: 18%;

}

.team-pic.leader {

 width: 100%;

}

.team-pic:hover {

 cursor: pointer;

}

.team-pic img {

 width: 180px;
 box-shadow: 0 0 10px darkgray;
 margin: 0 20px 0 10px;;
 vertical-align: top;

}

  1. safety ol ol {
 margin-left:2em;

}

  1. safety ol ol li {
 margin: 10px 0 20px 0;

}

  1. safety .question {
 color: black;
 font-weight: 700;
 display : block;

}

  1. safety .list-header {
 font-weight:700;
 color : black;
 border-bottom: 2px solid #ccc;
 display: inline-block;
 padding-bottom : 4px;
 margin-bottom : 4px;
 font-size : 18px;

}

.biodata {

 display: none;
 padding: 10px;
 background-color: lightgrey;
 box-shadow: inset 0 0 10px grey;
 margin: 10px 0;
 width: 100%;
 clear: both;

}

.biodata p {

 margin: 1em;
 text-align: left;

}

.humprac {

 margin: 20px 10px;
 box-shadow: 0 0 10px black;
 width: 23%;

}

  1. humprac-overview ul {
  list-style-type : disc;
  margin-left: 50px;
  font-weight : 700;

}

  1. humprac-overview ul ul {
  margin-left: 20px;
  list-style-type : none;
  font-weight: 500;

}

h2 {

 border-bottom: 2px solid #ccc;
 padding: 18px;
 font-weight: 700;
 color: #14464a;
 text-align: center;

}

h3 {

 font-weight: 700;
 padding-bottom: 5px;
 color: #14464a;

}

p {

 word-spacing: 0.1em;
  margin: 1.5em 1em;

}

.small {

 display: block;
 color: #999;
 text-align: center;
 font-size:80%

}

section {

 margin: 20px 0 60px 0;

}

section a {

 display: inline-block;
 height : 22px;
 border-bottom: 1px solid #14464a;

}

section a:hover {

 text-decoration: none !important;

}

  1. idea { float: right; }

.achievement ul {

 margin: 0 2em;
 list-style-type: none;
 list-style-image: none;

}

.achievement ul li {

 margin: 10px 0;
 position: relative;

}

.achievement ul li.done::before, .achievement ul li.not-done::before {

 background-size: 1.2em;
 width: 1.5em;
 height: 1.5em;
 content: " ";
 display: inline-block;
 background-repeat: no-repeat;
 position: absolute;
 left: -1.7em;

}

.achievement ul li.done::before {

 background-image: url("ITB_INDONESIA_check_mark.png");

}

.achievement ul li.not-done::before {

 background-image: url("ITB_INDONESIA_cross_mark.png");

}

.bg-bronze {

 background-color: #daab85;

}

.bg-silver {

 background-color: white;

}

.bg-gold {

 background-color: #dfcd78;

}

footer {

 border-top: 1px solid #14464a;
 background-color:rgba(23, 188, 145, 0.05);
 text-align: center;
 padding: 20px 0;
 margin-top: 20px;
 margin-bottom: -2em;

}

  1. rhamno {
 position: absolute;

}

.clearfix {

 clear: both;

}