Team:DTU-Denmark/test page css.css
From 2014.igem.org
Tbjohannesen (Talk | contribs) (Created page with "#content { background: transparent; margin: 0px auto; padding: 0px; width: 1280px; color: black; line-height: 1.5em; border-right...") |
Tbjohannesen (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | # | + | /*image preloader*/ |
- | + | #preloader { | |
- | + | width: 0px; | |
- | + | height: 0px; | |
- | + | display: inline; | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/f/ff/WIKI-01-BG-HOVER.png); | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/b/ba/WIKI-02-BG-HOVER.png); | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/9/9f/WIKI-03-BG-HOVER.png); | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/d/d9/WIKI-04-BG-HOVER.png); | |
- | + | background-image: url(https://static.igem.org/mediawiki/2013/b/b7/WIKI-05-BG-HOVER.png); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /*customer start*/ | |
- | + | body { | |
+ | background-image:url(https://static.igem.org/mediawiki/2013/f/f6/Logo-frame-2013-SYSU-CHINA.png); | ||
+ | background-position: 50% 60px; | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
- | + | #bodyContent {display:block;position:relative; top:100px;left:auto;} | |
- | + | #searchform {visibility:hidden;} | |
+ | #animat { | ||
+ | margin: 0px auto; | ||
+ | height: 110px; | ||
+ | position: relative; | ||
+ | text-align:center; | ||
} | } | ||
- | + | #animat p { | |
- | + | visibility: hidden; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | #p | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: block; | display: block; | ||
- | + | height:20px; | |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-align: center; | text-align: center; | ||
+ | font: bold 20px broadway; | ||
} | } | ||
- | + | #animat span:hover p {visibility: visible;} | |
+ | #animat span{ | ||
+ | z-index: 100; | ||
+ | display: block; | ||
text-align: center; | text-align: center; | ||
+ | position: relative; | ||
+ | margin: 0 auto; | ||
+ | width: 80px; | ||
+ | height: 81px; | ||
+ | left:-1px; | ||
} | } | ||
- | + | ||
- | + | div.navigater { | |
+ | border-top-style: solid; | ||
+ | border-top-width: 2px; | ||
+ | border-color: #000; | ||
} | } | ||
- | . | + | .navigater ul { |
+ | position: relative; | ||
+ | left: -10px; | ||
+ | z-index:100; | ||
text-align: center; | text-align: center; | ||
+ | display: inline; | ||
+ | list-style: none; | ||
} | } | ||
- | + | ||
- | + | .navigater ul li { | |
+ | z-index:100; | ||
+ | font: bold 14px/20PX helvetica; | ||
+ | display: inline-block; | ||
+ | margin: 0 20px; | ||
+ | padding-bottom: 18px; | ||
+ | position: relative; | ||
+ | width: 110px; | ||
+ | height: 32px; | ||
+ | background-repeat:no-repeat; | ||
+ | text-align:center; | ||
+ | -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 span{ |
- | + | color: rgb(252,241,206); | |
+ | display: block; | ||
+ | font-size:16px/20px; | ||
+ | width: 110px; | ||
+ | height: 14px; | ||
+ | padding-bottom:18px; | ||
+ | padding-top: 18px; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
} | } | ||
- | + | .navigater ul li span:hover{ | |
- | + | cursor:default; | |
} | } | ||
- | . | + | .navigater ul li a:link{ |
- | + | color: rgb(252,241,206); | |
+ | display: block; | ||
+ | font-size:16px/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 { |
- | + | z-index:100; | |
- | + | position: absolute; | |
- | + | top: 46px; | |
- | + | left: -18px; | |
- | + | width: 104px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: none; | display: none; | ||
+ | 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 { | |
+ | |||
+ | z-index:100; | ||
+ | width: 104px; | ||
+ | margin:0px 0px 10px 0px; | ||
+ | display: block; | ||
+ | padding: 0px; | ||
+ | |||
} | } | ||
- | + | ||
- | font- | + | .navigater ul li ul li a:link{ |
+ | width: 104px; | ||
+ | font-size:12px; | ||
+ | padding-bottom: 9px; | ||
+ | padding-top: 9px; | ||
+ | margin:0px; | ||
} | } | ||
- | + | ||
- | + | .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:100; | |
+ | display: block; | ||
+ | opacity: 0.95; | ||
+ | visibility: visible; | ||
} | } | ||
- | + | /* color separately */ | |
- | + | ||
+ | #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 */ | ||
+ | #contant { | ||
+ | } | ||
+ | #image { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | height: 300px; | ||
+ | margin-top: 60px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | width: 541px; | ||
+ | background-image:none; | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
- | + | #address { | |
- | + | position: fixed; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | # | + | |
- | + | ||
} | } | ||
+ | |||
+ | /*--customer end */ |
Revision as of 08:41, 14 May 2014
/*image preloader*/
- preloader {
width: 0px; height: 0px; display: inline; background-image: url(); background-image: url(); background-image: url(); background-image: url(); background-image: url();
}
/*customer start*/ body { background-image:url(); background-position: 50% 60px; background-repeat: no-repeat; }
- bodyContent {display:block;position:relative; top:100px;left:auto;}
- searchform {visibility:hidden;}
- animat {
margin: 0px auto; height: 110px; position: relative; text-align:center; }
- animat p {
visibility: hidden; display: block; height:20px; position: relative; text-align: center; font: bold 20px broadway; }
- animat span:hover p {visibility: visible;}
- animat span{
z-index: 100; display: block; text-align: center; position: relative; margin: 0 auto; width: 80px; height: 81px;
left:-1px;
}
div.navigater { border-top-style: solid; border-top-width: 2px; border-color: #000; } .navigater ul { position: relative; left: -10px;
z-index:100;
text-align: center; display: inline; list-style: none; }
.navigater ul li {
z-index:100; font: bold 14px/20PX helvetica; display: inline-block; margin: 0 20px; padding-bottom: 18px; position: relative; width: 110px; height: 32px; background-repeat:no-repeat; text-align:center; -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 span{ color: rgb(252,241,206); display: block; font-size:16px/20px; width: 110px; height: 14px; padding-bottom:18px; padding-top: 18px; text-align:center; text-decoration:none; } .navigater ul li span:hover{
cursor:default;
} .navigater ul li a:link{ color: rgb(252,241,206); display: block; font-size:16px/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 { z-index:100; position: absolute; top: 46px; left: -18px; width: 104px; display: none; 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 {
z-index:100; width: 104px; margin:0px 0px 10px 0px; display: block;
padding: 0px;
}
.navigater ul li ul li a:link{ width: 104px; font-size:12px;
padding-bottom: 9px; padding-top: 9px; margin:0px;
}
.navigater ul li ul li:hover { background-image:url(); background-repeat: no-repeat; background-position: 50% 60%;
} .navigater ul li:hover ul {
z-index:100; display: block; opacity: 0.95; visibility: visible;
} /* color separately */
- 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 */
- contant {
}
- image {
display: block; position: relative; height: 300px; margin-top: 60px; margin-left: auto; margin-right: auto; width: 541px; background-image:none; background-repeat: no-repeat; }
- address {
position: fixed; }
/*--customer end */