Template:Team:Tsinghua/CSS/Common-Style

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <style type="text/css"> - ****************************************** BODY ******************************************: body { font-family: Verdana, Arial, Helvetica, s...")
 
(12 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
 
/*******************************************
/*******************************************
Line 13: Line 12:
padding: 0;
padding: 0;
color: #333;
color: #333;
 +
font-size: 14px;
}
}
/* ~~ Element/tag selectors ~~ */
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
ul, ol, dl {
-
padding: 0;
+
font-size: 14px;
-
margin: 0;
+
text-align: justify;
 +
margin-left: 30px;
}
}
-
 
+
h1, h2, h3 {
h1, h2, h3 {
font-weight: bold;
font-weight: bold;
Line 30: Line 31:
p{
p{
padding: 0 20px 0;
padding: 0 20px 0;
-
text-align: justify;
+
text-align: left;
font-size: 14px;
font-size: 14px;
}
}
Line 42: Line 43:
font-size: 20px;
font-size: 20px;
font-weight: bold;
font-weight: bold;
-
margin-bottom: 5px;
 
-
margin-top: 5px;
 
}
}
Line 52: Line 51:
img.center {
img.center {
-
display:block;
+
display: block;
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
 +
}
 +
p > img {
 +
vertical-align:middle;
 +
}
 +
p.center {
 +
    text-align:center;
 +
}
 +
span.center > p {
 +
    text-align:center;
 +
}
 +
div.indent {
 +
margin-left: 30px;
}
}
Line 63: Line 74:
a:link {
a:link {
color: #42413C;
color: #42413C;
-
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
+
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
}
a:visited {
a:visited {
Line 80: Line 91:
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
header {
-
background-color: #ffffff;
+
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.10, rgb(158,182,223)), color-stop(0.90, rgb(61,96,154)));
 +
padding-bottom: 8px; /* Standard syntax (must be last) */
 +
;
 +
}
 +
header img {
 +
display: block;
}
}
-
 
.sidebar1 {
.sidebar1 {
float: left;
float: left;
width: 176px;
width: 176px;
background-color: #959595;
background-color: #959595;
-
padding-bottom: 15px;
+
border-right: 2px solid #ffffff;
-
padding-top: 15px;
+
}
-
border-right: 4px solid #ffffff;
+
.sidebar1 aside {
 +
float: left;
 +
width: 176px;
 +
background-color: #c6c6c6;
 +
margin-bottom: 200px #c6c6c6;
}
}
.content {
.content {
Line 95: Line 114:
width: 780px;
width: 780px;
float: left;
float: left;
-
}
 
-
aside {
 
-
float: left;
 
-
width: 180px;
 
-
background-color: #EADCAE;
 
-
padding: 10px 0;
 
}
}
Line 116: Line 129:
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
}
 +
footer #logoContainer {
 +
display: block;
 +
margin: 0 auto 0 auto;
 +
text-align: center;
 +
width: 975px;
 +
}
 +
footer#logoContainer img{
 +
float: left;
 +
padding-right: 30px;
 +
}
 +
/* ~~ Miscellaneous float/clear classes ~~ */
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
Line 136: Line 160:
display: block;
display: block;
}
}
-
 
+
/* Preload images */
 +
div#preload { display: none; }
</style>
</style>
<html>
<html>

Latest revision as of 17:54, 16 October 2014