Team:SYSU-China/common all.css
From 2013.igem.org
Line 1: | Line 1: | ||
- | + | #animat { | |
+ | margin: 0px auto; | ||
+ | height: 110px; | ||
+ | position: relative; | ||
+ | text-align:center; | ||
+ | } | ||
+ | #animat p { | ||
+ | visibility: hidden; | ||
+ | display: block; | ||
+ | height:29px; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | font: bold 20px broadway; | ||
+ | width:80px; | ||
+ | margin:0px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #animat span:hover p {visibility: visible;} | ||
+ | #animat span{ | ||
+ | z-index: 100; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | margin: 0 auto; | ||
+ | width: 80px; | ||
+ | height: 81px; | ||
+ | left: -100px ; | ||
+ | } | ||
+ | /*custom start*/ | ||
+ | #searchform {visibility:hidden;} | ||
- | + | div.content_body { | |
+ | display: block; | ||
+ | position: relative; | ||
+ | margin: 0 auto; | ||
+ | width: 1024px; | ||
+ | } | ||
- | + | div.navigater { | |
- | + | clear: both; | |
- | + | position: relative; | |
- | + | width: 1024px; | |
- | + | height: 46px; | |
- | + | padding-top: 0px; | |
- | + | } | |
- | + | .navigater ul { | |
- | + | position: absolute; | |
- | + | left: 0px; | |
- | + | z-index:100; | |
- | + | text-align: center; | |
- | + | display: inline; | |
- | + | list-style: none; | |
- | + | margin:0px; | |
- | + | padding-left:0px; | |
- | + | heigth:50px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .navigater ul li { | |
- | + | z-index:100; | |
- | + | font: bold 14px/20px helvetica; | |
- | + | display: inline-block; | |
- | + | margin: 0 2px; | |
+ | padding-bottom: 18px; | ||
+ | position: relative; | ||
+ | width: 110px; | ||
+ | height: 28px; | ||
+ | background-repeat:no-repeat; | ||
+ | text-align:center; | ||
+ | cursor: pointer; | ||
+ | -webkit-transition: background-image 0.2s; | ||
+ | -moz-transition: background-image 0.2s; | ||
+ | -ms-transition: background-image 0.2s; | ||
+ | -o-transition: background-image 0.2s; | ||
+ | transition: background-image 0.2s; | ||
+ | } | ||
+ | .navigater ul li a:link{ | ||
+ | color: rgb(252,241,206); | ||
+ | display: inline-block; | ||
+ | font-size:14px/20px; | ||
+ | width: 110px; | ||
+ | height: 14px; | ||
+ | padding-bottom:18px; | ||
+ | padding-top: 18px; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | .navigater ul li a:hover {text-decoration:none; background-color: transparent;} | ||
+ | .navigater ul li a:visited {text-decoration:none; background-color: transparent;} | ||
- | } | + | .navigater ul li:hover { |
- | + | z-index:100; | |
+ | color: #fff; | ||
+ | -webkit-transition: background-image 0.2s; | ||
+ | -moz-transition: background-image 0.2s; | ||
+ | -ms-transition: background-image 0.2s; | ||
+ | -o-transition: background-image 0.2s; | ||
+ | transition: background-image 0.2s; | ||
+ | } | ||
+ | .navigater ul li ul { | ||
+ | list-style: none; | ||
+ | z-index:100; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 104px; | ||
+ | top: 46px; | ||
+ | left: 3px; | ||
+ | opacity: 0; | ||
+ | visibility: hidden; | ||
+ | -webkit-transiton: opacity 0.2s; | ||
+ | -moz-transition: opacity 0.2s; | ||
+ | -ms-transition: opacity 0.2s; | ||
+ | -o-transition: opacity 0.2s; | ||
+ | -transition: opacity 0.2s; | ||
+ | } | ||
- | + | .navigater ul li ul li { | |
- | + | ||
- | + | display:block; | |
- | + | z-index:100; | |
+ | font: bold 12px/18px helvetica; | ||
+ | width: 104px; | ||
+ | margin: 0px; | ||
+ | padding: 9px 0px; | ||
+ | background-repeat:no-repeat; | ||
+ | text-align:center; | ||
+ | cursor: pointer; | ||
+ | } | ||
- | + | .navigater ul li ul li a:link{ | |
- | + | width: 104px; | |
- | + | padding: 9px 0px; | |
- | + | font-size:10px/16px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | / | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .navigater ul li ul li:hover { | |
- | + | background-image:url(https://static.igem.org/mediawiki/2013/0/05/WIKI-light.png); | |
- | + | background-repeat: no-repeat; | |
- | + | background-position: 50% 60%; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .navigater ul li:hover ul { | |
+ | z-index:200; | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | /* color separately */ | ||
- | }); | + | #HOME { background: url(https://static.igem.org/mediawiki/2013/a/ae/WIKI-05-BG.png);} |
+ | #HOME:hover { background-image: url(https://static.igem.org/mediawiki/2013/7/7f/WIKI-00-BG-HOVER.png);} | ||
+ | |||
+ | #PROJECT { background: url(https://static.igem.org/mediawiki/2013/1/12/WIKI-01-BG.png);} | ||
+ | #PROJECT:hover { background-image: url(https://static.igem.org/mediawiki/2013/f/ff/WIKI-01-BG-HOVER.png);} | ||
+ | #PROJECT ul{ background: #aeaf55;} | ||
+ | |||
+ | #JUDGING { background: url(https://static.igem.org/mediawiki/2013/3/38/WIKI-02-BG.png);} | ||
+ | #JUDGING:hover { background-image: url(https://static.igem.org/mediawiki/2013/b/ba/WIKI-02-BG-HOVER.png);} | ||
+ | #JUDGING ul{ background: #B65836;} | ||
+ | |||
+ | #SAFETY { background: url(https://static.igem.org/mediawiki/2013/6/66/WIKI-03-BG.png);} | ||
+ | #SAFETY:hover { background-image: url(https://static.igem.org/mediawiki/2013/9/9f/WIKI-03-BG-HOVER.png);} | ||
+ | #SAFETY ul{ background: #4AA984;} | ||
+ | |||
+ | #NOTEBOOK { background: url(https://static.igem.org/mediawiki/2013/0/0b/WIKI-04-BG.png);} | ||
+ | #NOTEBOOK:hover { background-image: url(https://static.igem.org/mediawiki/2013/d/d9/WIKI-04-BG-HOVER.png);} | ||
+ | #NOTEBOOK ul{ background: #B48662;} | ||
+ | |||
+ | #TEAM { background: url(https://static.igem.org/mediawiki/2013/a/ae/WIKI-05-BG.png);} | ||
+ | #TEAM:hover { background-image: url(https://static.igem.org/mediawiki/2013/b/b7/WIKI-05-BG-HOVER.png);} | ||
+ | #TEAM ul{ background: #D2783C;} | ||
+ | |||
+ | /* color separately end */ | ||
+ | |||
+ | #cont_column { | ||
+ | z-index: 200; | ||
+ | margin: 0px; | ||
+ | padding-bottom: 100px; | ||
+ | width: 900px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #cont_column div.chapter { | ||
+ | position: relative; | ||
+ | width: 900px; | ||
+ | border-style: solid; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/8/81/Side-cont-BG.png) top left repeat-y , url(https://static.igem.org/mediawiki/2013/0/0f/CONTENT-BG-PROJECT.png) repeat-y 50px 0px ; | ||
+ | box-shadow: 0px 0px 25px #888888; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #f7eed1; | ||
+ | margin-bottom: -5px; | ||
+ | padding: 60px 0; | ||
+ | } | ||
+ | |||
+ | #cont_column h1,h2,h3,h4,p{ | ||
+ | position: relative; | ||
+ | width: 760px; | ||
+ | margin-left: 90px; | ||
+ | margin-right: 50px; | ||
+ | } | ||
+ | #cont_column ol,#cont_column ul{ | ||
+ | position: relative; | ||
+ | width: 536px; | ||
+ | margin-left: 90px; | ||
+ | margin-right: 100px; | ||
+ | } | ||
+ | #cont_column li{ | ||
+ | margin-left: 30px; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | #cont_column span { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | font-weight: bold; | ||
+ | top: -40px; | ||
+ | right: 50px; | ||
+ | height: 30px; | ||
+ | font-family: "Comic Sans MS", cursive; | ||
+ | font-size: 20px; | ||
+ | text-align: right; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #cont_column h1 { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | #cont_column h2 { | ||
+ | color:#366; | ||
+ | } | ||
+ | #cont_column h3 { | ||
+ | padding-bottom:5px; | ||
+ | border-bottom: 2px solid #666; | ||
+ | margin-bottom: 0px; | ||
+ | color:#699; | ||
+ | } | ||
+ | |||
+ | #top_button { | ||
+ | float: right; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | left:728px; | ||
+ | top:0px; | ||
+ | display: block; | ||
+ | } | ||
+ | #top_button p { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | visibility: hidden; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/9/91/TALKFRAME.png); | ||
+ | background-repeat: no-repeat; | ||
+ | display: inline-block; | ||
+ | height:51px; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | font:10px helvetica; | ||
+ | } | ||
+ | |||
+ | |||
+ | #top_button span{ | ||
+ | z-index: 100; | ||
+ | position: fixed; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/4/46/WIKI-MASCOT-STAND-SHADOW.png); | ||
+ | margin: 0 0; | ||
+ | width: 100px; | ||
+ | height: 151px; | ||
+ | bottom: 50px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #top_button span:hover { | ||
+ | } | ||
+ | |||
+ | #top_button img { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | |||
+ | #side_bar { | ||
+ | position: absolute; | ||
+ | width: 190px; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | #side_bar div { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /* tag styles */ | ||
+ | .anchor-h2 { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | left: 0px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/6/6a/TAG_BLANK.png); | ||
+ | background-repeat: repeat; | ||
+ | float:right; | ||
+ | padding: 1px 20px 1px 1px; | ||
+ | margin-top: 5px; | ||
+ | border-color: #FFF; | ||
+ | } | ||
+ | .anchor-h2 p { | ||
+ | margin:0; | ||
+ | padding:6px 2px; | ||
+ | border:0; | ||
+ | width:190px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/4/40/TAG_H2.png); | ||
+ | background-repeat: repeat; | ||
+ | text-decoration: none; | ||
+ | text-align: right; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .anchor-h3 { | ||
+ | display: inline; | ||
+ | position: relative; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/6/6a/TAG_BLANK.png); | ||
+ | background-repeat: repeat; | ||
+ | float:right; | ||
- | }); | + | padding: 1px 10px 1px 1px; |
+ | margin-top: 1px; | ||
+ | } | ||
+ | .anchor-h3 p{ | ||
+ | margin:0; | ||
+ | padding:0px 2px; | ||
+ | border:0; | ||
+ | width:170px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/4/40/TAG_H3.png); | ||
+ | background-repeat: repeat; | ||
+ | text-decoration: none; | ||
+ | left: 0px; | ||
+ | text-align: right; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #side_bar p { | ||
+ | color: rgb(255, 255, 255); text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #side_bar a:visited { | ||
+ | color: rgb(255, 255, 255); | ||
+ | } | ||
+ | #side_bar a:active { | ||
+ | color: rgb(255, 255, 255); | ||
+ | } | ||
+ | #side_bar a:hover { | ||
+ | } | ||
+ | |||
+ | #side_bar #address { | ||
+ | clear:left; | ||
+ | } | ||
+ | |||
+ | #side_bar #address p { | ||
+ | font-family:"Cooper Black"; | ||
+ | color: #724c21; | ||
+ | font-size: 16px; | ||
+ | position: relative; | ||
+ | margin: 5px auto; | ||
+ | height:20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #references p { | ||
+ | width: 536px; | ||
+ | text-align:left; | ||
+ | font-size:10px; | ||
+ | } | ||
+ | a.quote { | ||
+ | vertical-align:super; | ||
+ | font-size:10px; | ||
+ | } | ||
+ | a.quote,a.references { | ||
+ | color:#696; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*--custom end */ |
Revision as of 06:27, 24 September 2013
- animat {
margin: 0px auto; height: 110px; position: relative; text-align:center; }
- animat p {
visibility: hidden; display: block; height:29px; position: relative; text-align: center; font: bold 20px broadway;
width:80px; margin:0px; padding: 0;
}
- animat span:hover p {visibility: visible;}
- animat span{
z-index: 100; display: block; text-align: center; position: absolute; margin: 0 auto; width: 80px; height: 81px;
left: -100px ;
} /*custom start*/
- searchform {visibility:hidden;}
div.content_body { display: block; position: relative; margin: 0 auto; width: 1024px; }
div.navigater { clear: both; position: relative; width: 1024px; height: 46px; padding-top: 0px; } .navigater ul { position: absolute; left: 0px;
z-index:100;
text-align: center; display: inline; list-style: none;
margin:0px; padding-left:0px; heigth:50px;
}
.navigater ul li {
z-index:100; font: bold 14px/20px helvetica; display: inline-block; margin: 0 2px; padding-bottom: 18px; position: relative; width: 110px; height: 28px; background-repeat:no-repeat; text-align:center; cursor: pointer; -webkit-transition: background-image 0.2s; -moz-transition: background-image 0.2s; -ms-transition: background-image 0.2s; -o-transition: background-image 0.2s; transition: background-image 0.2s;
} .navigater ul li a:link{ color: rgb(252,241,206); display: inline-block; font-size:14px/20px; width: 110px; height: 14px; padding-bottom:18px; padding-top: 18px; text-align:center; text-decoration:none; } .navigater ul li a:hover {text-decoration:none; background-color: transparent;} .navigater ul li a:visited {text-decoration:none; background-color: transparent;}
.navigater ul li:hover { z-index:100; color: #fff; -webkit-transition: background-image 0.2s; -moz-transition: background-image 0.2s; -ms-transition: background-image 0.2s; -o-transition: background-image 0.2s; transition: background-image 0.2s; } .navigater ul li ul { list-style: none; z-index:100; display: block; position: absolute; width: 104px; top: 46px; left: 3px; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; }
.navigater ul li ul li {
display:block; z-index:100;
font: bold 12px/18px helvetica;
width: 104px; margin: 0px; padding: 9px 0px; background-repeat:no-repeat; text-align:center; cursor: pointer; }
.navigater ul li ul li a:link{ width: 104px;
padding: 9px 0px;
font-size:10px/16px; }
.navigater ul li ul li:hover { background-image:url(); background-repeat: no-repeat; background-position: 50% 60%;
}
.navigater ul li:hover ul {
z-index:200; opacity: 1; visibility: visible;
} /* color separately */
- HOME { background: url(https://static.igem.org/mediawiki/2013/a/ae/WIKI-05-BG.png);}
- HOME:hover { background-image: url(https://static.igem.org/mediawiki/2013/7/7f/WIKI-00-BG-HOVER.png);}
- PROJECT { background: url(https://static.igem.org/mediawiki/2013/1/12/WIKI-01-BG.png);}
- PROJECT:hover { background-image: url(https://static.igem.org/mediawiki/2013/f/ff/WIKI-01-BG-HOVER.png);}
- PROJECT ul{ background: #aeaf55;}
- JUDGING { background: url(https://static.igem.org/mediawiki/2013/3/38/WIKI-02-BG.png);}
- JUDGING:hover { background-image: url(https://static.igem.org/mediawiki/2013/b/ba/WIKI-02-BG-HOVER.png);}
- JUDGING ul{ background: #B65836;}
- SAFETY { background: url(https://static.igem.org/mediawiki/2013/6/66/WIKI-03-BG.png);}
- SAFETY:hover { background-image: url(https://static.igem.org/mediawiki/2013/9/9f/WIKI-03-BG-HOVER.png);}
- SAFETY ul{ background: #4AA984;}
- NOTEBOOK { background: url(https://static.igem.org/mediawiki/2013/0/0b/WIKI-04-BG.png);}
- NOTEBOOK:hover { background-image: url(https://static.igem.org/mediawiki/2013/d/d9/WIKI-04-BG-HOVER.png);}
- NOTEBOOK ul{ background: #B48662;}
- TEAM { background: url(https://static.igem.org/mediawiki/2013/a/ae/WIKI-05-BG.png);}
- TEAM:hover { background-image: url(https://static.igem.org/mediawiki/2013/b/b7/WIKI-05-BG-HOVER.png);}
- TEAM ul{ background: #D2783C;}
/* color separately end */
- cont_column {
z-index: 200; margin: 0px; padding-bottom: 100px; width: 900px;
}
- cont_column div.chapter {
position: relative; width: 900px; border-style: solid; background: url() top left repeat-y , url() repeat-y 50px 0px ; box-shadow: 0px 0px 25px #888888; border-style: solid; border-width: 1px; border-color: #f7eed1; margin-bottom: -5px; padding: 60px 0; }
- cont_column h1,h2,h3,h4,p{
position: relative; width: 760px; margin-left: 90px; margin-right: 50px; }
- cont_column ol,#cont_column ul{
position: relative; width: 536px; margin-left: 90px; margin-right: 100px; }
- cont_column li{
margin-left: 30px; text-align:left;
}
- cont_column span {
display: block; position: relative; font-weight: bold; top: -40px; right: 50px; height: 30px; font-family: "Comic Sans MS", cursive; font-size: 20px; text-align: right; padding: 0px; margin: 0px; }
- cont_column h1 {
font-weight: bold; }
- cont_column h2 {
color:#366; }
- cont_column h3 {
padding-bottom:5px; border-bottom: 2px solid #666; margin-bottom: 0px; color:#699; }
- top_button {
float: right; width: 100px; height: 100px; position: absolute;
left:728px; top:0px;
display: block; }
- top_button p {
margin: 0; padding: 0; visibility: hidden; background-image: url(); background-repeat: no-repeat; display: inline-block; height:51px; position: relative; text-align: center; font:10px helvetica; }
- top_button span{
z-index: 100; position: fixed; display: block; background: url(); margin: 0 0; width: 100px; height: 151px; bottom: 50px; cursor: pointer; }
- top_button span:hover {
}
- top_button img {
clear: both; }
- side_bar {
position: absolute; width: 190px; top:0; left:0; }
- side_bar div {
position: relative; }
/* tag styles */ .anchor-h2 { display: block; position: relative; left: 0px; background-image: url(); background-repeat: repeat; float:right;
padding: 1px 20px 1px 1px; margin-top: 5px; border-color: #FFF; } .anchor-h2 p { margin:0; padding:6px 2px; border:0; width:190px; background-image: url(); background-repeat: repeat; text-decoration: none; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .anchor-h3 { display: inline; position: relative; background-image: url(); background-repeat: repeat; float:right;
padding: 1px 10px 1px 1px; margin-top: 1px; } .anchor-h3 p{ margin:0; padding:0px 2px; border:0; width:170px; background-image: url(); background-repeat: repeat; text-decoration: none; left: 0px; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
- side_bar p {
color: rgb(255, 255, 255); text-decoration: none; cursor: pointer; }
- side_bar a:visited {
color: rgb(255, 255, 255); }
- side_bar a:active {
color: rgb(255, 255, 255); }
- side_bar a:hover {
}
- side_bar #address {
clear:left; }
- side_bar #address p {
font-family:"Cooper Black"; color: #724c21; font-size: 16px; position: relative; margin: 5px auto; height:20px; text-align: center; }
- references p {
width: 536px; text-align:left; font-size:10px; } a.quote { vertical-align:super; font-size:10px; } a.quote,a.references {
color:#696;
}
/*--custom end */