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 | + | 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; |
− | + | color: #14464a; | |
− | + | ||
line-height: 1.3em; | line-height: 1.3em; | ||
padding: 0; | padding: 0; | ||
− | + | background-color: rgba(20, 70, 74, 0.2); | |
+ | background-position: 200px 300px; | ||
+ | padding: 2% 0; | ||
} | } | ||
Line 24: | Line 25: | ||
#bodyContent { | #bodyContent { | ||
− | width: | + | width: 90%; |
margin: 0 auto; | margin: 0 auto; | ||
− | + | padding: 2%; | |
− | padding: | + | |
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( | + | background-image: url(../img/bg-side.gif); |
− | + | ||
width: 823px; | width: 823px; | ||
− | height: | + | height: 2224px; |
top: -2%; | top: -2%; | ||
} | } | ||
Line 49: | Line 52: | ||
} | } | ||
− | # | + | #background-top { |
− | + | position: absolute; | |
− | background-image: url(https://static.igem.org/mediawiki/2015/ | + | background-image: url(https://static.igem.org/mediawiki/2015/2/2b/ITB_INDONESIA_IGEM2015_bgtop.png); |
− | + | background-image: url(../img/bg-top.png); | |
+ | width: 200px; | ||
+ | height: 263px; | ||
+ | left: 100%; | ||
+ | top: -2%; | ||
} | } | ||
− | # | + | #background-bottom { |
position: absolute; | position: absolute; | ||
− | + | background-image: url(https://static.igem.org/mediawiki/2015/9/96/ITB_INDONESIA_IGEM2015_bgbottom.png); | |
− | left : | + | 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; | ||
} | } | ||
− | + | .quote span { | |
− | + | display: block; | |
− | + | margin: 20px 0 0 20px; | |
} | } | ||
Line 77: | Line 149: | ||
.main-nav { | .main-nav { | ||
float: left; | float: left; | ||
− | + | 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: # | + | 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: | + | 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: | + | background-color:rgba(23, 188, 145, 1); |
− | width: | + | width: 220px; |
left: 0; | left: 0; | ||
− | z-index : 1; | + | z-index: 1; |
} | } | ||
− | .main-nav > ul | + | .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: | + | 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; | ||
} | } | ||
− | + | #sponsors { | |
− | border-bottom: | + | 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: | + | float: left; |
− | background-color: # | + | 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: | + | 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"); |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 178: | Line 397: | ||
.bg-silver { | .bg-silver { | ||
− | background-color: | + | 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
- globalWrapper {
overflow: hidden;
}
.firstHeading {
display: none;
}
- 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;
}
- 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");
}
- background-left, #background-right {
position: absolute; background-image: url(../img/bg-side.gif); width: 823px; height: 2224px; top: -2%;
}
- background-left {
right : 100%;
}
- background-right {
left: 100%;
}
- background-top {
position: absolute; background-image: url(); background-image: url(../img/bg-top.png); width: 200px; height: 263px; left: 100%; top: -2%;
}
- background-bottom {
position: absolute; background-image: url(); 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;
}
.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;
}
- sponsors {
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; 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;
}
- 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 {
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 {
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("");
}
.achievement ul li.not-done::before {
background-image: url("");
}
.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;
}
- rhamno {
position: absolute;
}
.clearfix {
clear: both;
}