Template:Team:Tsinghua-A/style.css
From 2013.igem.org
(Created page with "<html> <style type="text/css"> - →Reset: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins,...") |
|||
(5 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | { | |
- | + | margin:0; | |
+ | padding:0; | ||
+ | } | ||
- | + | ||
- | / | + | body { |
- | + | font-family: 'Oranienbaum', serif; | |
+ | font-size:100%; | ||
+ | background:#232323 url(../images/123.jpg) no-repeat fixed center top; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
- | + | color: #ffffff; | |
- | + | position:relative; | |
- | + | text-shadow:0 0px, 1px 1px #2c2c2c; | |
} | } | ||
- | + | h1 { | |
- | + | margin:50px 0; | |
} | } | ||
- | + | h1 a { | |
- | + | font-family: 'Amarante', cursive; | |
+ | font-size:1.5em; | ||
+ | text-decoration:none; | ||
+ | color:#9400D3; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | h1 a:hover { | |
- | + | text-decoration:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
h2 { | h2 { | ||
- | font-size: | + | font-family: 'Coda', cursive; |
+ | font-size:1.7em; | ||
+ | font-weight:inherit; | ||
+ | margin:0 0 10px 0; | ||
+ | color:#69b0ff; | ||
} | } | ||
- | + | a img { | |
- | + | border: none; | |
} | } | ||
- | + | a { | |
- | + | color: #6ab0ff; | |
+ | text-decoration: underline; | ||
} | } | ||
- | + | a:hover { | |
- | + | color: #1a86ff; | |
+ | text-decoration: none; | ||
} | } | ||
- | + | img { | |
- | + | max-width: 100%; | |
- | + | height: auto; | |
- | + | width: auto; | |
- | + | ||
} | } | ||
p { | p { | ||
- | + | line-height:140%; | |
} | } | ||
- | + | header { | |
- | + | background:#2c2c2c; | |
} | } | ||
- | + | .wrapper { | |
- | + | width:93.75%; /* 960px/1024px */ | |
- | + | margin:0 auto; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .contentBody { | |
- | background: rgba( | + | width:72.916666666666666666666666666667%; |
- | + | float:left; | |
- | + | background:none repeat scroll 0 0 rgba(44, 44, 44, 0.4); | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .post { | |
- | + | position:relative; | |
} | } | ||
- | + | .post img { | |
- | + | margin:20px 0 10px 0; | |
+ | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); | ||
} | } | ||
- | . | + | .post span { |
- | + | background:none repeat scroll 0 0 rgba(44, 44, 44, 0.4); | |
+ | padding:4px 10px; | ||
+ | position:absolute; | ||
+ | right:4%; | ||
+ | top:9%; | ||
+ | font-size:0.8em; | ||
+ | font-style:italic; | ||
} | } | ||
- | . | + | .post { |
- | + | padding:4%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .sidebar { |
- | + | width:22.916666666666666666666666666667%; | |
- | + | float:right; | |
- | + | background:none repeat scroll 0 0 rgba(44, 44, 44, 0.7); | |
- | + | ||
- | + | ||
} | } | ||
- | + | .sBlock { | |
- | + | padding:12%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .sBlock li { | |
- | + | list-style:none; | |
- | + | width:100%; | |
- | + | ||
- | + | ||
- | width: 100%; | + | |
} | } | ||
- | + | .sBlock li a { | |
- | + | display:block; | |
- | + | border-bottom:1px solid #6c6c6c; | |
- | + | color:#ffffff; | |
- | + | padding:10px 5px 10px 20px; | |
- | + | background:url(../images/p.png) no-repeat 6px 14px; | |
- | + | text-decoration:none; | |
- | - | + | |
- | + | ||
} | } | ||
- | + | .sBlock li a:hover { | |
- | background: rgba( | + | padding:10px 5px 10px 20px; |
+ | background:rgba(44, 44, 44, 0.6) url(../images/p.png) no-repeat 6px 14px; | ||
+ | color:#6ab0ff; | ||
} | } | ||
- | + | footer { | |
- | background: | + | background:#2c2c2c; |
+ | margin-top:30px; | ||
+ | text-align:center; | ||
+ | padding:20px 10px; | ||
} | } | ||
- | + | footer p { | |
- | + | font-size:0.8571428571428571em; /* 12px/14px */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .clearfloat { |
- | + | clear:both; | |
- | + | height:0; | |
+ | line-height: 0px; | ||
} | } | ||
- | + | ||
- | + | nav { | |
- | + | text-align: right; | |
- | + | padding:20px 0; | |
- | + | margin-bottom:20px; | |
- | - | + | margin-right:4%; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | nav li { | |
- | + | list-style:none; | |
- | + | display:inline; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | list-style: none; | + | |
- | + | ||
- | + | ||
} | } | ||
- | + | nav li a { | |
+ | font-family: 'Coda', cursive; | ||
+ | text-shadow: none; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | padding:20px 10px; | |
+ | font-weight:bold; | ||
+ | color:#696969; | ||
+ | text-transform:uppercase; | ||
} | } | ||
- | + | nav li a:hover { | |
- | + | color:#ffffff; | |
- | + | text-decoration:none; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | nav .active a { | |
- | + | color:#ffffff; | |
- | + | background:#696969; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | nav select {display: none;} | |
- | + | ||
- | width: | + | select { |
- | + | width:200px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | ||
- | + | @media screen and (max-width: 980px) { | |
- | + | .wrapper{ | |
- | + | width:93.75%; /* 960px/1024px */ | |
- | + | margin:0 auto; | |
- | + | } | |
} | } | ||
- | + | ||
- | + | @media screen and (max-width: 768px) { | |
- | + | .contentBody, .sidebar { | |
- | + | float:none; | |
- | + | width:auto; | |
- | + | } | |
- | + | .contentBody { | |
- | + | margin-bottom:30px; | |
- | + | padding-bottom:30px; | |
- | + | } | |
- | + | h1 { | |
- | + | margin:50px 0 50px 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | ||
- | + | @media screen and (max-width: 480px) { | |
- | + | nav ul { display: none; } | |
- | + | nav select { display: inline-block; } | |
- | + | .post span { position: inherit; margin:0 4%;} | |
- | + | h1 { text-align:center; margin:20px 0;} | |
- | + | nav { text-align:center;} | |
- | - | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- |
Latest revision as of 10:22, 17 September 2013
{ margin:0; padding:0; }
body {
font-family: 'Oranienbaum', serif;
font-size:100%;
background:#232323 url(../images/123.jpg) no-repeat fixed center top;
margin: 0;
padding: 0;
color: #ffffff;
position:relative;
text-shadow:0 0px, 1px 1px #2c2c2c;
}
h1 {
margin:50px 0;
}
h1 a {
font-family: 'Amarante', cursive;
font-size:1.5em;
text-decoration:none;
color:#9400D3;
font-weight: bold;
}
h1 a:hover {
text-decoration:none;
}
h2 {
font-family: 'Coda', cursive;
font-size:1.7em;
font-weight:inherit;
margin:0 0 10px 0;
color:#69b0ff;
}
a img {
border: none;
}
a {
color: #6ab0ff;
text-decoration: underline;
}
a:hover {
color: #1a86ff;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
p {
line-height:140%;
}
header {
background:#2c2c2c;
}
.wrapper {
width:93.75%; /* 960px/1024px */
margin:0 auto;
}
.contentBody {
width:72.916666666666666666666666666667%;
float:left;
background:none repeat scroll 0 0 rgba(44, 44, 44, 0.4);
}
.post {
position:relative;
}
.post img {
margin:20px 0 10px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.post span {
background:none repeat scroll 0 0 rgba(44, 44, 44, 0.4);
padding:4px 10px;
position:absolute;
right:4%;
top:9%;
font-size:0.8em;
font-style:italic;
}
.post {
padding:4%;
}
.sidebar {
width:22.916666666666666666666666666667%;
float:right;
background:none repeat scroll 0 0 rgba(44, 44, 44, 0.7);
}
.sBlock {
padding:12%;
}
.sBlock li {
list-style:none;
width:100%;
}
.sBlock li a {
display:block;
border-bottom:1px solid #6c6c6c;
color:#ffffff;
padding:10px 5px 10px 20px;
background:url(../images/p.png) no-repeat 6px 14px;
text-decoration:none;
}
.sBlock li a:hover {
padding:10px 5px 10px 20px;
background:rgba(44, 44, 44, 0.6) url(../images/p.png) no-repeat 6px 14px;
color:#6ab0ff;
}
footer {
background:#2c2c2c;
margin-top:30px;
text-align:center;
padding:20px 10px;
}
footer p {
font-size:0.8571428571428571em; /* 12px/14px */
}
.clearfloat {
clear:both;
height:0;
line-height: 0px;
}
nav { text-align: right; padding:20px 0; margin-bottom:20px; margin-right:4%; } nav li { list-style:none; display:inline; } nav li a { font-family: 'Coda', cursive; text-shadow: none; text-decoration: none; padding:20px 10px; font-weight:bold; color:#696969; text-transform:uppercase; } nav li a:hover { color:#ffffff; text-decoration:none; } nav .active a { color:#ffffff; background:#696969; }
nav select {display: none;}
select { width:200px; }
@media screen and (max-width: 980px) {
.wrapper{
width:93.75%; /* 960px/1024px */
margin:0 auto;
}
}
@media screen and (max-width: 768px) { .contentBody, .sidebar { float:none; width:auto; } .contentBody { margin-bottom:30px; padding-bottom:30px; } h1 { margin:50px 0 50px 0; } }
@media screen and (max-width: 480px) { nav ul { display: none; } nav select { display: inline-block; } .post span { position: inherit; margin:0 4%;} h1 { text-align:center; margin:20px 0;} nav { text-align:center;}
}