Difference between revisions of "Template:ITB INDONESIA/dev/css/style"
(54 intermediate revisions by the same user not shown) | |||
Line 73: | Line 73: | ||
#header h1 { | #header h1 { | ||
− | margin: 0.1em | + | margin: 0.1em 0; |
border-bottom: none; | border-bottom: none; | ||
color: #14464a; | color: #14464a; | ||
+ | padding: 0.5em 0; | ||
} | } | ||
Line 99: | Line 100: | ||
font-size: 5em; | font-size: 5em; | ||
line-height: 100%; | 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 132: | Line 169: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
+ | } | ||
+ | |||
+ | .main-nav > ul > li ul li { | ||
+ | display: block; | ||
} | } | ||
Line 146: | Line 187: | ||
padding: 0; | padding: 0; | ||
background-color:rgba(23, 188, 145, 1); | background-color:rgba(23, 188, 145, 1); | ||
− | width: | + | width: 220px; |
left: 0; | left: 0; | ||
z-index: 1; | z-index: 1; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 162: | Line 199: | ||
.main-nav > ul li:hover > ul { | .main-nav > ul li:hover > ul { | ||
display: block; | 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; | ||
} | } | ||
Line 169: | Line 216: | ||
#sponsors a { | #sponsors a { | ||
− | margin: | + | margin: 10px 30px 15px 30px; |
+ | display:inline-block; | ||
+ | height : auto; | ||
+ | border-bottom : 0; | ||
} | } | ||
#sponsors img { | #sponsors img { | ||
− | height: | + | height: 120px; |
} | } | ||
Line 213: | Line 263: | ||
} | } | ||
− | #safety | + | #safety ol ol { |
− | + | margin-left:2em; | |
+ | } | ||
+ | |||
+ | #safety ol ol li { | ||
+ | margin: 10px 0 20px 0; | ||
} | } | ||
#safety .question { | #safety .question { | ||
color: black; | color: black; | ||
− | font-weight: | + | font-weight: 700; |
display : block; | display : block; | ||
} | } | ||
Line 252: | Line 306: | ||
box-shadow: 0 0 10px black; | box-shadow: 0 0 10px black; | ||
width: 23%; | 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; | ||
} | } | ||
Line 270: | Line 336: | ||
p { | p { | ||
word-spacing: 0.1em; | word-spacing: 0.1em; | ||
− | margin: | + | margin: 1.5em 1em; |
} | } | ||
Line 277: | Line 343: | ||
color: #999; | color: #999; | ||
text-align: center; | text-align: center; | ||
+ | font-size:80% | ||
} | } | ||
section { | section { | ||
margin: 20px 0 60px 0; | margin: 20px 0 60px 0; | ||
+ | } | ||
+ | |||
+ | section a { | ||
+ | display: inline-block; | ||
+ | height : 22px; | ||
+ | border-bottom: 1px solid #14464a; | ||
+ | } | ||
+ | |||
+ | section a:hover { | ||
+ | text-decoration: none !important; | ||
} | } | ||
Line 286: | Line 363: | ||
.achievement ul { | .achievement ul { | ||
− | margin: | + | margin: 0 2em; |
list-style-type: none; | list-style-type: none; | ||
list-style-image: none; | list-style-image: none; |
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;
}