Team:UCL-London/static/globalstyles.css
From 2013.igem.org
(236 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
/*contents*/ | /*contents*/ | ||
/**********/ | /**********/ | ||
- | |||
- | |||
1) div styles | 1) div styles | ||
2) font styles | 2) font styles | ||
- | |||
- | |||
- | |||
/***************/ | /***************/ | ||
Line 17: | Line 12: | ||
#container | #container | ||
{ | { | ||
+ | position:absolute; | ||
width:975px; | width:975px; | ||
- | background: | + | left:50%; |
- | + | display:none; | |
- | + | } | |
- | font-family:Ubuntu; | + | |
+ | #testing | ||
+ | { | ||
+ | width:100px; | ||
+ | height:100px; | ||
+ | background:green; | ||
+ | } | ||
+ | |||
+ | #banner | ||
+ | { | ||
+ | width:100%; | ||
+ | height:160px; | ||
+ | background:#C14645; | ||
+ | font-family:Ubuntu, sans-serif; | ||
} | } | ||
Line 27: | Line 36: | ||
{ | { | ||
width:975px; | width:975px; | ||
- | height: | + | height:160px; |
- | background: | + | margin-left: auto; |
+ | margin-right: auto; | ||
+ | background:#C14645; | ||
} | } | ||
- | # | + | #headtext1 |
{ | { | ||
- | width: | + | width:100%; |
- | height: | + | height:45px; |
- | + | ||
- | + | ||
- | + | ||
padding-top:10px; | padding-top:10px; | ||
+ | float:left; | ||
+ | background:#C14645; | ||
+ | text-align:right; | ||
} | } | ||
- | # | + | #headtext2 |
{ | { | ||
- | width: | + | width:100%; |
- | height: | + | height:94px; |
- | + | padding-top:11px; | |
- | + | ||
float:left; | float:left; | ||
+ | background:#C14645; | ||
} | } | ||
- | # | + | #logo |
{ | { | ||
- | width: | + | width:86px; |
- | height: | + | height:86px; |
- | + | float:right; | |
- | + | ||
- | float: | + | |
- | + | ||
} | } | ||
- | # | + | #social_links |
{ | { | ||
- | height: | + | width:86px; |
- | background:# | + | height:26px; |
- | + | background:#C14645; | |
+ | float:right; | ||
+ | margin-top:6px; | ||
+ | text-decoration : none; | ||
} | } | ||
- | + | #social_links img1, | |
+ | #social_links img2 | ||
{ | { | ||
- | + | width:26px; | |
- | + | height:26px; | |
- | + | float:right; | |
- | float: | + | |
} | } | ||
- | + | #social_links img1 | |
{ | { | ||
- | + | background-image:url('https://static.igem.org/mediawiki/2013/0/07/Facebook_logo.png'); | |
- | background: | + | } |
- | + | ||
- | + | #social_links img2 | |
+ | { | ||
+ | background-image:url('https://static.igem.org/mediawiki/2013/1/1a/Twitter_logo.png'); | ||
+ | margin-left:5px; | ||
} | } | ||
Line 87: | Line 101: | ||
width:975px; | width:975px; | ||
height:600px; | height:600px; | ||
- | |||
} | } | ||
Line 94: | Line 107: | ||
width:975px; | width:975px; | ||
height:250px; | height:250px; | ||
- | background: | + | } |
+ | |||
+ | div.col_left, | ||
+ | div.col_right, | ||
+ | div.col_1, | ||
+ | div.col_2 | ||
+ | { | ||
+ | /*background:#E6E6E6;*/ | ||
+ | background:red; | ||
} | } | ||
div.col_left | div.col_left | ||
{ | { | ||
- | width: | + | width:606px; |
height:100%; | height:100%; | ||
- | |||
float:left; | float:left; | ||
+ | overflow:hidden; | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); /* For IE8 and earlier */ | ||
} | } | ||
div.col_right | div.col_right | ||
{ | { | ||
- | width: | + | width:360px; |
height:100%; | height:100%; | ||
- | margin-left: | + | margin-left:9px; |
- | + | ||
float:left; | float:left; | ||
+ | overflow:hidden; | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); /* For IE8 and earlier */ | ||
+ | } | ||
+ | |||
+ | div.col_1 | ||
+ | { | ||
+ | width:237px; | ||
+ | height:100%; | ||
+ | margin-right:9px; | ||
+ | float:left; | ||
+ | overflow:hidden; | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); /* For IE8 and earlier */ | ||
+ | } | ||
+ | |||
+ | div.col_2 | ||
+ | { | ||
+ | width:237px; | ||
+ | height:100%; | ||
+ | float:left; | ||
+ | overflow:hidden; | ||
+ | opacity:1; | ||
+ | filter:alpha(opacity=100); /* For IE8 and earlier */ | ||
} | } | ||
Line 117: | Line 163: | ||
{ | { | ||
width:100%; | width:100%; | ||
- | height: | + | height:9px; |
- | + | ||
} | } | ||
+ | |||
/****************/ | /****************/ | ||
- | /* | + | /*2) font styles*/ |
/****************/ | /****************/ | ||
- | + | page_title1, | |
- | + | page_title2, | |
+ | small_title1, | ||
+ | small_title2 | ||
{ | { | ||
- | font-weight : bold; | + | font-weight: bold; |
font-style : normal; | font-style : normal; | ||
- | |||
font-variant : normal; | font-variant : normal; | ||
- | line-height : | + | line-height : 1; |
text-align : justify; | text-align : justify; | ||
text-indent : 0px; | text-indent : 0px; | ||
margin : 0px; | margin : 0px; | ||
+ | letter-spacing:-2px; | ||
} | } | ||
- | + | page_title1 | |
{ | { | ||
- | color : # | + | color : #404040; |
+ | font-size : 4.8em; | ||
} | } | ||
- | + | page_title2 | |
{ | { | ||
color : white; | color : white; | ||
+ | font-size : 4.8em; | ||
} | } | ||
- | p. | + | small_title1 |
+ | { | ||
+ | color : #404040; | ||
+ | font-size : 2.25em; | ||
+ | } | ||
+ | |||
+ | small_title2 | ||
+ | { | ||
+ | color : white; | ||
+ | font-size : 2.25em; | ||
+ | } | ||
+ | |||
+ | p.major_title, | ||
+ | p.minor_title, | ||
+ | p.body_text, | ||
+ | p.citation_text | ||
{ | { | ||
- | |||
font-style : normal; | font-style : normal; | ||
- | |||
text-decoration : none; | text-decoration : none; | ||
font-variant : normal; | font-variant : normal; | ||
- | + | text-indent : 0px; | |
text-align : left; | text-align : left; | ||
+ | } | ||
+ | |||
+ | p.major_title, | ||
+ | p.minor_title | ||
+ | { | ||
+ | font-family : Ubuntu, sans-serif; | ||
+ | font-weight : bold; | ||
+ | } | ||
+ | |||
+ | p.body_text, | ||
+ | p.citation_text | ||
+ | { | ||
+ | font-family : "Myriad Pro", sans-serif; | ||
+ | font-weight : normal; | ||
+ | } | ||
+ | |||
+ | |||
+ | p.major_title | ||
+ | { | ||
+ | font-size : 2.5em; | ||
+ | line-height : 1.25; | ||
+ | color : #c14645; | ||
+ | margin : 0px; | ||
+ | } | ||
+ | |||
+ | p.minor_title | ||
+ | { | ||
+ | font-size : 1.6em; | ||
+ | line-height : 1.5; | ||
color : #404040; | color : #404040; | ||
- | |||
margin : 0px; | margin : 0px; | ||
+ | } | ||
+ | |||
+ | p.body_text { | ||
+ | font-size : 1.4em; | ||
+ | line-height : 1.33; | ||
+ | color : #404040; | ||
+ | margin : 0px 0px 9px 14px; | ||
+ | } | ||
+ | |||
+ | p.citation_text { | ||
+ | font-size : 1.2em; | ||
+ | line-height : 1.71; | ||
+ | color : #c14645; | ||
+ | margin : 0px 0px 0px 14px; | ||
} | } |
Latest revision as of 19:08, 11 August 2013
/**********/ /*contents*/ /**********/
1) div styles 2) font styles
/***************/ /*1) div styles*/ /***************/
- container
{ position:absolute; width:975px; left:50%; display:none; }
- testing
{ width:100px; height:100px; background:green; }
- banner
{ width:100%; height:160px; background:#C14645; font-family:Ubuntu, sans-serif; }
- header
{ width:975px; height:160px; margin-left: auto; margin-right: auto; background:#C14645; }
- headtext1
{ width:100%; height:45px; padding-top:10px; float:left; background:#C14645; text-align:right; }
- headtext2
{ width:100%; height:94px; padding-top:11px; float:left; background:#C14645; }
- logo
{ width:86px; height:86px; float:right; }
- social_links
{ width:86px; height:26px; background:#C14645; float:right; margin-top:6px; text-decoration : none; }
- social_links img1,
- social_links img2
{ width:26px; height:26px; float:right; }
- social_links img1
{ background-image:url('https://static.igem.org/mediawiki/2013/0/07/Facebook_logo.png'); }
- social_links img2
{ background-image:url('https://static.igem.org/mediawiki/2013/1/1a/Twitter_logo.png'); margin-left:5px; }
div.row_large { width:975px; height:600px; }
div.row_small { width:975px; height:250px; }
div.col_left, div.col_right, div.col_1, div.col_2 { /*background:#E6E6E6;*/ background:red; }
div.col_left { width:606px; height:100%; float:left; overflow:hidden; opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }
div.col_right { width:360px; height:100%; margin-left:9px; float:left; overflow:hidden; opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }
div.col_1 { width:237px; height:100%; margin-right:9px; float:left; overflow:hidden; opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }
div.col_2 { width:237px; height:100%; float:left; overflow:hidden; opacity:1; filter:alpha(opacity=100); /* For IE8 and earlier */ }
div.h_gap { width:100%; height:9px; }
/****************/
/*2) font styles*/
/****************/
page_title1, page_title2, small_title1, small_title2 { font-weight: bold; font-style : normal; font-variant : normal; line-height : 1; text-align : justify; text-indent : 0px; margin : 0px; letter-spacing:-2px; }
page_title1 { color : #404040; font-size : 4.8em; }
page_title2 { color : white; font-size : 4.8em; }
small_title1 { color : #404040; font-size : 2.25em; }
small_title2 { color : white; font-size : 2.25em; }
p.major_title, p.minor_title, p.body_text, p.citation_text { font-style : normal; text-decoration : none; font-variant : normal; text-indent : 0px; text-align : left; }
p.major_title, p.minor_title { font-family : Ubuntu, sans-serif; font-weight : bold; }
p.body_text, p.citation_text { font-family : "Myriad Pro", sans-serif; font-weight : normal; }
p.major_title
{
font-size : 2.5em;
line-height : 1.25;
color : #c14645;
margin : 0px;
}
p.minor_title { font-size : 1.6em; line-height : 1.5; color : #404040; margin : 0px; }
p.body_text { font-size : 1.4em; line-height : 1.33; color : #404040; margin : 0px 0px 9px 14px; }
p.citation_text { font-size : 1.2em; line-height : 1.71; color : #c14645; margin : 0px 0px 0px 14px; }