"
Team:SYSU-Software/style.css
From 2012.igem.org
Nie1234567 (Talk | contribs) |
Nie1234567 (Talk | contribs) |
||
| (8 intermediate revisions not shown) | |||
| Line 86: | Line 86: | ||
#header { | #header { | ||
| - | height: | + | height:570px; |
overflow:hidden; | overflow:hidden; | ||
| - | background:url(https://static.igem.org/mediawiki/ | + | background:url(https://static.igem.org/mediawiki/igem.org/a/aa/Header-bg.jpg) no-repeat 0 0; |
} | } | ||
#content2 { | #content2 { | ||
| Line 323: | Line 323: | ||
position:absolute; | position:absolute; | ||
left:59px; | left:59px; | ||
| - | top: | + | top:136px; |
width:268px; | width:268px; | ||
border-top:1px solid #4d4d4d; | border-top:1px solid #4d4d4d; | ||
| Line 357: | Line 357: | ||
background:url(https://static.igem.org/mediawiki/2012/b/b5/Nav-bg2.png); | background:url(https://static.igem.org/mediawiki/2012/b/b5/Nav-bg2.png); | ||
} | } | ||
| - | #logopic{top: | + | #logopic{top: 30px; ; position: absolute ; margin-left:70px;} |
/*--- faded slider ---*/ | /*--- faded slider ---*/ | ||
#faded { | #faded { | ||
| Line 364: | Line 364: | ||
position:absolute; | position:absolute; | ||
left:379px; | left:379px; | ||
| - | top: | + | top:80px; |
overflow:hidden; | overflow:hidden; | ||
} | } | ||
| Line 459: | Line 459: | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
| - | background:url(https://static.igem.org/mediawiki/ | + | background:url(https://static.igem.org/mediawiki/igem.org/6/65/%E6%9C%AA%E6%A0%87%E9%A2%98-2.png) no-repeat 0 0; |
| - | width: | + | width:90px; |
height:44px; | height:44px; | ||
line-height:44px; | line-height:44px; | ||
| Line 482: | Line 482: | ||
html ul.tabs li.active { | html ul.tabs li.active { | ||
| - | background:url(https://static.igem.org/mediawiki/ | + | background:url(https://static.igem.org/mediawiki/igem.org/6/6c/%E6%9C%AA%E6%A0%87%E9%A2%98-3.png) no-repeat 0 0; |
margin-top:0; | margin-top:0; | ||
height:48px; | height:48px; | ||
| Line 490: | Line 490: | ||
ul.tabs li:hover { | ul.tabs li:hover { | ||
| - | background:url(https://static.igem.org/mediawiki/ | + | background:url(https://static.igem.org/mediawiki/igem.org/6/6c/%E6%9C%AA%E6%A0%87%E9%A2%98-3.png) no-repeat 0 0; |
margin-top:0; | margin-top:0; | ||
height:48px; | height:48px; | ||
| Line 507: | Line 507: | ||
min-height:305px; | min-height:305px; | ||
height:auto !important; | height:auto !important; | ||
| - | height: | + | height:335px; |
} | } | ||
.tab_content { | .tab_content { | ||
| Line 564: | Line 564: | ||
.banners li { | .banners li { | ||
float:left; | float:left; | ||
| - | background:url( | + | background:url() no-repeat 100% 0; |
padding:0 22px 0 22px; | padding:0 22px 0 22px; | ||
} | } | ||
Latest revision as of 07:44, 26 October 2012
- {
margin:0; padding:0; } body { height:100%; } html { height:100%; } html { min-width:968px; }
- page1 {
background:url(
) no-repeat 50% 0 #0f0f0f;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.25em;
color:#4c4c4c;
}
img { border:0; vertical-align:top; text-align:left; } object { vertical-align:top; outline:none; } ol { list-style:none; }
ul { list-style:none; }
.fleft { float:left; } .fright { float:right; } .clear { clear:both; }
.col-3 { float:left; }
.col-2 { float:left; }
.col-1 { float:left; }
.alignright { text-align:right; } .aligncenter { text-align:center; }
.wrapper { width:100%; overflow:hidden; } .container { width:100%; }
/*==== GLOBAL =====*/
- main {
width:968px; margin:0 auto; font-size:.875em; position:relative; }
- header {
height:570px;
overflow:hidden;
background:url(
) no-repeat 0 0;
}
- content2 {
background:url(
) no-repeat 0 0 #010101;
padding:34px 57px 46px 59px;
}
- footer {
padding:10px 0 60px 75px; background:#010101; }
/*---- tailings ----*/ .tail-top { background:url(2012.igem.org/wiki/images/5/5b/Tail-top.gif) left top repeat-x; padding-top:25px; }
/*----- forms parameters -----*/
textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em; vertical-align:middle; font-weight:normal; }
select {
font-family:Arial, Helvetica, sans-serif; font-size:1em;
vertical-align:middle;
font-weight:normal;
}
input {
font-family:Arial, Helvetica, sans-serif; font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
.img-indent {
margin:0 42px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
}
.img-box img {
float:left;
margin:0 42px 0 0;
}
.extra-wrap { overflow:hidden; }
p {
margin-bottom:20px;
}
.p1 {
margin-bottom:10px;
}
.p2 {
margin-bottom:20px;
}
.p3 {
margin-bottom:30px;
}
/*----- txt, links, lines, titles -----*/ a { color:#4a4a4a; outline:none; } a:hover{ text-decoration:none; }
h1 { position:absolute; left:59px; top:16px; font-size:83px; line-height:1.2em; color:#fff; font-weight:normal; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-2px; } h1 a { color:#fff; text-decoration:none; } h2 { font-size:24px; line-height:1.2em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; color:#000; margin-bottom:14px; padding-top:6px; }
.link1 {
display:block;
float:left;
background:url(
) no-repeat left top #e2e2e2;
color:#000;
text-decoration:none;
font-size:10px;
text-transform:uppercase;
}
.link1 b {
display:block;
background:url(
) no-repeat right top;
padding:0 19px 0 11px;
font-weight:normal; font-style:normal;
line-height:28px;
}
.link1:hover { background:url(images/link1-left-bg.gif) no-repeat left -28px #474747; color:#fff; } .link1:hover b { background-position:100% -28px; }
.line-ver1 {
background-image:url(
);
background-repeat:repeat-y;
width:100%;
}
.line-ver {
background-image:url();
background-repeat:repeat-y;
width:100%;
}
/*==================boxes====================*/
.box {
background:#f7f7f7;
width:100%;
border-top:1px solid #e5e5e5;
font-size:13px;
line-height:18px;
color:#7e7e7e;
}
.box .left-bot-corner {
background:url(
) no-repeat left bottom;
width:100%;
}
.box .right-bot-corner {
background:url(
) no-repeat right bottom;
}
.box .inner {
padding:23px 28px 40px 35px;
}
.box p {
margin-bottom:18px;
}
.box strong {
color:#4a4a4a;
}
.box .link1 {
background:url(
) no-repeat left top #e2e2e2;
}
.box .link1 b {
background:url(
) no-repeat right top;
}
.box .link1:hover {
background:url(images/link1-left-alt.gif) no-repeat left -28px #474747;
}
.box .link1:hover b {
background-position:100% -28px;
}
.box1 {
background:url(
) 0 0 repeat-x #fff;
width:100%;
}
.box1 .left-top-corner {
background:url(
) no-repeat 0 0;
}
.box1 .right-top-corner {
background:url(
) no-repeat 100% 0;
width:100%;
}
.box1 .right-bot-corner {
background:url(
) no-repeat 100% 100%;
}
.box1 .left-bot-corner {
background:url(
) no-repeat 0 100%;
width:100%;
}
.box1 .inner {
padding:27px 28px 40px 35px;
}
.address { float:left; } .address dd { clear:both; text-align:right; } .address dd span { float:left; padding-right:20px; } .address dd a { color:#4a4a4a; }
/*===== header =====*/
- header .nav {
position:absolute;
left:59px;
top:136px;
width:268px;
border-top:1px solid #4d4d4d;
}
#header .nav li {
width:100%;
overflow:hidden;
vertical-align:top;
}
#header .nav li a {
display:block;
font-size:26px;
line-height:1.1em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
padding:9px 0 8px 18px;
border-bottom:1px solid #4d4d4d;
background:url(
) 0 0 no-repeat;
}
#header .nav li a span {
display:block;
color:#525252;
font-size:17px;
line-height:1.2em;
}
#header .nav li a.current {
background:url(
);
}
#header .nav li a:hover {
background:url();
}
- logopic{top: 30px; ; position: absolute ; margin-left:70px;}
/*--- faded slider ---*/
- faded {
width:566px; height:504px; position:absolute; left:379px; top:80px; overflow:hidden; }
- faded ul { list-style:none; padding:0; margin:0; }
#faded li strong {
display:block;
position:absolute;
left:218px;
top:349px;
background:url(
) no-repeat 0 0;
width:298px;
height:56px;
font-size:45px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
line-height:48px;
text-align:center;
font-weight:normal;
letter-spacing:-2px;
}
- faded ul.controls {
position:absolute;
right:34px;
top:153px;
width:46px;
height:68px;
}
#faded ul.controls li {
width:100%;
overflow:hidden;
vertical-align:top;
}
#faded ul.controls li a {
display:block;
width:46px;
height:34px;
overflow:hidden;
}
#faded ul.controls li a.prev {
background:url(
) no-repeat 0 0;
}
#faded ul.controls li a.prev:hover {
background-position:0 -68px;
}
#faded ul.controls li a.next {
background:url() no-repeat 0 -34px;
}
#faded ul.controls li a.next:hover {
background-position:0 -102px;
}
- faded .button-alt {
display:block;
background:url(
) no-repeat 0 0;
width:90px;
height:28px;
line-height:28px;
text-transform:uppercase;
color:#000;
text-align:center;
font-size:10px;
text-decoration:none;
text-indent:-7px;
position:absolute;
bottom:62px;
right:85px;
}
- faded .button-alt:hover {
text-decoration:underline; }
/*===== content =====*/
/*--- tabs ---*/
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 48px; /*--Set height of tabs--*/
padding:0 0 0 0;
position:relative;
float:right;
}
ul.tabs li {
float: left;
border-left: none;
overflow: hidden;
position: relative;
background:url(
) no-repeat 0 0;
width:90px;
height:44px;
line-height:44px;
font-size:14px;
color:#fff;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin:4px 0 0 4px;
}
ul.tabs li.first {
margin-left:0;
}
ul.tabs li a {
text-decoration: none;
color: #fff;
display: block;
}
html ul.tabs li.active a {
color:#000;
}
html ul.tabs li.active {
background:url(
) no-repeat 0 0;
margin-top:0;
height:48px;
color:#000;
line-height:48px;
}
ul.tabs li:hover {
background:url() no-repeat 0 0;
margin-top:0;
height:48px;
color:#000;
line-height:48px;
}
ul.tabs li:hover a {
color:#000;
}
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; min-height:305px; height:auto !important; height:335px; } .tab_content { padding: 35px 30px 32px 35px; } /*--- tabs ---*/
.list1 {
padding-bottom:20px;
}
.list1 li {
background:url(
) no-repeat 6px 12px;
padding:6px 0 5px 20px;
border-bottom:1px solid #dedede;
font-size:13px !important;
}
.list1 li.last {
border-bottom:none;
}
.list1 li a {
color:#4a4a4a;
text-decoration:none;
}
.list1 li a:hover {
color:#000;
text-decoration:underline;
}
.products-list li {
width:100%;
overflow:hidden;
border-bottom:1px solid #dcdcdc;
padding:12px 0 12px 0;
color:#4a4a4a;
}
.products-list li.last {
border-bottom:none;
margin-bottom:0;
}
.products-list li img {
float:left;
margin-right:30px;
}
.products-list li p {
margin-bottom:12px;
}
.banners {
width:100%;
overflow:hidden;
padding:44px 0 0 0;
}
.banners li {
float:left;
background:url() no-repeat 100% 0;
padding:0 22px 0 22px;
}
.banners li.last {
background:none;
padding-right:0;
}
.testimonials li {
text-align:right;
padding-bottom:18px;
}
.testimonials li blockquote {
text-align:left;
}
/*===== footer =====*/
- footer {
font-size:10px; text-transform:uppercase; color:#4a4a4a; } #footer a { color:#fff; text-decoration:none; } #footer a:hover { text-decoration:underline; }
/*----- forms -----*/
- search-form {
position:absolute;
width:190px;
height:25px;
right:57px;
top:-2px;
background:url(
) no-repeat 0 0;
}
#search-form fieldset {
border:none;
}
#search-form input.text {
width:135px;
border:none;
background:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
color:#7f7f7f;
padding:0 0 6px 21px;
font-style:italic;
line-height:16px;
}
#search-form input.submit {
border:none;
background:none;
width:33px;
height:25px;
cursor:pointer;
}
- contacts-form fieldset {
border:none; } #contacts-form label { display:block; height:32px; overflow:hidden; } #contacts-form input { background:#fff; width:210px; padding:2px 5px 2px 6px; border:none; border:1px solid #e1e1e1; color:#7e7e7e; border-color:#303030 #cecece #e1e1e1 #585858; } #contacts-form textarea { width:210px; padding:2px 5px 2px 6px; height:104px; background:#fff; overflow:auto; border:1px solid #e1e1e1; border-color:#303030 #cecece #e1e1e1 #585858; color:#7e7e7e; margin-bottom:17px; } #contacts-form .link1 { float:right; margin-left:10px; }
/*==========================================*/
