Template:Team:BNU-China/CSS/main
From 2014.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<style> | <style> | ||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { | ||
+ | font-family:Verdana, Geneva, sans-serif; | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
Line 84: | Line 85: | ||
outline : none; | outline : none; | ||
} | } | ||
- | |||
body { | body { | ||
background: #1a1a1a; | background: #1a1a1a; | ||
Line 143: | Line 143: | ||
} | } | ||
ul li { | ul li { | ||
- | background: transparent url( | + | background: transparent url([[File:bullet.png]]) center left no-repeat; |
padding-left: 15px; | padding-left: 15px; | ||
} | } | ||
Line 170: | Line 170: | ||
line-height: 25px; | line-height: 25px; | ||
padding-left: 30px; | padding-left: 30px; | ||
- | background: transparent url( | + | background: transparent url([[File:quote.png]]) no-repeat left 7px; |
} | } | ||
.hr2 { | .hr2 { | ||
Line 211: | Line 211: | ||
} | } | ||
a.button { | a.button { | ||
- | background: #5499c3 url( | + | background: #5499c3 url([[File:button.png]]) repeat-x; |
border: none; | border: none; | ||
height: 15px; | height: 15px; | ||
Line 227: | Line 227: | ||
-moz-transition:all 200ms ease-in; | -moz-transition:all 200ms ease-in; | ||
} | } | ||
- | |||
@media screen and (-webkit-min-device-pixel-ratio:0) { | @media screen and (-webkit-min-device-pixel-ratio:0) { | ||
a.button {padding: 5px 15px 7px 15px;} | a.button {padding: 5px 15px 7px 15px;} | ||
} | } | ||
- | |||
- | |||
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { | ||
a.button {padding: 5px 15px 7px 15px;} | a.button {padding: 5px 15px 7px 15px;} | ||
- | |||
} | } | ||
- | |||
a.button.blue { | a.button.blue { | ||
background-color: #5499c3; | background-color: #5499c3; | ||
Line 245: | Line 240: | ||
background-color: #4dab96; | background-color: #4dab96; | ||
} | } | ||
- | |||
a.button.lime { | a.button.lime { | ||
background-color: #92ab4d; | background-color: #92ab4d; | ||
} | } | ||
- | |||
a.button.red { | a.button.red { | ||
background-color: #ab4d63; | background-color: #ab4d63; | ||
} | } | ||
- | |||
a.button.purple { | a.button.purple { | ||
background-color: #8d4dab; | background-color: #8d4dab; | ||
} | } | ||
- | |||
a.button.blue:hover { | a.button.blue:hover { | ||
color: #fff; | color: #fff; | ||
background-color: #ab4d63; | background-color: #ab4d63; | ||
} | } | ||
- | |||
a.button.green:hover { | a.button.green:hover { | ||
color: #fff; | color: #fff; | ||
Line 272: | Line 262: | ||
background-color: #ab4d63; | background-color: #ab4d63; | ||
} | } | ||
- | |||
a.button.red:hover { | a.button.red:hover { | ||
color: #fff; | color: #fff; | ||
background-color: #4d87ab; | background-color: #4d87ab; | ||
} | } | ||
- | |||
a.button.purple:hover { | a.button.purple:hover { | ||
color: #fff; | color: #fff; | ||
background-color: #4dab96; | background-color: #4dab96; | ||
} | } | ||
- | |||
.dropcap { | .dropcap { | ||
display:block; | display:block; | ||
Line 297: | Line 284: | ||
display: block; | display: block; | ||
clear: both; | clear: both; | ||
- | background: url( | + | background: url([[File:codebg.jpg]]) repeat; |
line-height: 20px; | line-height: 20px; | ||
font-size: 12px; | font-size: 12px; | ||
Line 329: | Line 316: | ||
color:#9e660d; | color:#9e660d; | ||
} | } | ||
- | |||
- | |||
#wrapper { | #wrapper { | ||
width: 960px; | width: 960px; | ||
Line 459: | Line 444: | ||
padding: 0; | padding: 0; | ||
} | } | ||
- | |||
.menu { | .menu { | ||
font-family: 'Museo500'; | font-family: 'Museo500'; | ||
Line 496: | Line 480: | ||
font-size: 14px; | font-size: 14px; | ||
} | } | ||
- | |||
/* Webkit Fix */ | /* Webkit Fix */ | ||
@media screen and (-webkit-min-device-pixel-ratio:0) { | @media screen and (-webkit-min-device-pixel-ratio:0) { | ||
.menu ul li a {padding: 21px 30px 19px;} | .menu ul li a {padding: 21px 30px 19px;} | ||
} | } | ||
- | |||
* html .menu ul li a { | * html .menu ul li a { | ||
display: inline-block; | display: inline-block; | ||
Line 524: | Line 506: | ||
display: none; | display: none; | ||
visibility: hidden; | visibility: hidden; | ||
- | width: | + | width: 170px; |
padding: 0; | padding: 0; | ||
+ | border-radius:0 0 0.5em 0.5em; | ||
+ | background-color: #fff; | ||
} | } | ||
.menu ul li ul li { | .menu ul li ul li { | ||
Line 531: | Line 515: | ||
float: none; | float: none; | ||
padding: 0 17px; | padding: 0 17px; | ||
- | |||
} | } | ||
.menu ul li ul li:first-child a { | .menu ul li ul li:first-child a { | ||
Line 556: | Line 539: | ||
} | } | ||
.quote blockquote { | .quote blockquote { | ||
- | background: #FFF url( | + | background: #FFF url([[File:quote.png]]) no-repeat 15px 15px; |
padding: 15px 15px 15px 40px; | padding: 15px 15px 15px 40px; | ||
-webkit-border-radius: 5px; | -webkit-border-radius: 5px; | ||
Line 580: | Line 563: | ||
height: 470px; /* Same as showcase javascript option */ | height: 470px; /* Same as showcase javascript option */ | ||
overflow: hidden; | overflow: hidden; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.showcase { | .showcase { | ||
Line 597: | Line 576: | ||
top: 50%; | top: 50%; | ||
margin-top: -9px; | margin-top: -9px; | ||
- | background: url(' | + | background: url('[[File:arrows.png]]'); |
width: 25px; | width: 25px; | ||
height: 25px; | height: 25px; | ||
Line 626: | Line 605: | ||
} | } | ||
.showcase-plus-anchor { | .showcase-plus-anchor { | ||
- | background-image: url(' | + | background-image: url('[[File:plus.png]]'); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
} | } | ||
Line 637: | Line 616: | ||
text-align: left; | text-align: left; | ||
padding: 5px 8px; | padding: 5px 8px; | ||
- | background-image: url( | + | background-image: url([[File:white-opacity-80.png]]); |
} | } | ||
.showcase-caption { | .showcase-caption { | ||
Line 648: | Line 627: | ||
display: none; | display: none; | ||
width: auto; | width: auto; | ||
- | background-image: url( | + | background-image: url([[File:white-opacity-80.png]]); |
} | } | ||
.showcase-onepage .showcase-content { | .showcase-onepage .showcase-content { | ||
Line 667: | Line 646: | ||
text-indent: -99999px; | text-indent: -99999px; | ||
display: inline-block; | display: inline-block; | ||
- | background: url(' | + | background: url('[[File:navs.png]]'); |
} | } | ||
.showcase-button-wrapper span:hover, .showcase-button-wrapper span.active { | .showcase-button-wrapper span:hover, .showcase-button-wrapper span.active { | ||
Line 697: | Line 676: | ||
} | } | ||
.showcase-thumbnail-cover { | .showcase-thumbnail-cover { | ||
- | background-image: url( | + | background-image: url([[File:black-opacity-40.png]]); |
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 738: | Line 717: | ||
} | } | ||
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { | .showcase-thumbnail-button-backward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-vertical, .showcase-thumbnail-button-forward .showcase-thumbnail-horizontal, .showcase-thumbnail-button-backward .showcase-thumbnail-horizontal { | ||
- | background-image: url( | + | background-image: url([[File:arrows-small.png]]); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
display: block; | display: block; | ||
Line 774: | Line 753: | ||
background-position: -17px 0; | background-position: -17px 0; | ||
} | } | ||
- | |||
.showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span { | .showcase-thumbnail-button-forward span span, .showcase-thumbnail-button-backward span span { | ||
display: none; | display: none; | ||
} | } | ||
- | |||
.one-half { | .one-half { | ||
width:48%; | width:48%; | ||
Line 890: | Line 867: | ||
background-position: bottom right; | background-position: bottom right; | ||
} | } | ||
+ | |||
.form-container { | .form-container { | ||
position: relative; | position: relative; | ||
Line 983: | Line 961: | ||
} | } | ||
.forms fieldset .btn-submit { | .forms fieldset .btn-submit { | ||
- | background: #5499c3 url( | + | background: #5499c3 url([[File:button.png]]) repeat-x; |
border: none; | border: none; | ||
height: 27px; | height: 27px; | ||
Line 1,042: | Line 1,020: | ||
} | } | ||
#footer .forms fieldset .btn-submit { | #footer .forms fieldset .btn-submit { | ||
- | background: #5499c3 url( | + | background: #5499c3 url([[File:button.png]]) repeat-x; |
border: none; | border: none; | ||
height: 27px; | height: 27px; | ||
Line 1,087: | Line 1,065: | ||
} | } | ||
- | |||
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { | ||
#footer .form-container .loading { | #footer .form-container .loading { | ||
Line 1,102: | Line 1,079: | ||
} | } | ||
- | |||
@media screen and (-webkit-min-device-pixel-ratio:0) { | @media screen and (-webkit-min-device-pixel-ratio:0) { | ||
#footer .forms label { | #footer .forms label { | ||
Line 1,108: | Line 1,084: | ||
} | } | ||
} | } | ||
- | |||
.items { | .items { | ||
Line 1,187: | Line 1,162: | ||
.play, .zoom, .details { | .play, .zoom, .details { | ||
position: absolute; | position: absolute; | ||
- | background: transparent url( | + | background: transparent url([[File:icon-play.png]]) no-repeat center center; |
} | } | ||
.zoom { | .zoom { | ||
- | background-image: url( | + | background-image: url([[File:icon-zoom.png]]); |
} | } | ||
.details { | .details { | ||
- | background-image: url( | + | background-image: url([[File:icon-more.png]]); |
} | } | ||
.box a span, .carousel ul li a span { | .box a span, .carousel ul li a span { | ||
Line 1,211: | Line 1,186: | ||
margin-top: 40px; | margin-top: 40px; | ||
} | } | ||
- | |||
.blog { | .blog { | ||
} | } | ||
Line 1,291: | Line 1,265: | ||
} | } | ||
.comments { | .comments { | ||
- | background: transparent url( | + | background: transparent url([[File:icon-comment.png]]) no-repeat left center; |
padding-left: 26px; | padding-left: 26px; | ||
margin-right: 10px; | margin-right: 10px; | ||
Line 1,297: | Line 1,271: | ||
} | } | ||
.categories { | .categories { | ||
- | background: transparent url( | + | background: transparent url([[File:icon-category.png]]) no-repeat left center; |
padding-left: 22px; | padding-left: 22px; | ||
} | } | ||
.tags { | .tags { | ||
- | background: transparent url( | + | background: transparent url([[File:icon-tag.png]]) no-repeat left center; |
padding-left: 30px; | padding-left: 30px; | ||
margin-top: 10px; | margin-top: 10px; | ||
Line 1,377: | Line 1,351: | ||
-moz-border-radius: 5px; | -moz-border-radius: 5px; | ||
border-radius: 5px; | border-radius: 5px; | ||
- | background: #FFF url( | + | background: #FFF url([[File:search.png]]) 240px center no-repeat; |
} | } | ||
.tag-list ul li { | .tag-list ul li { | ||
Line 1,455: | Line 1,429: | ||
} | } | ||
} | } | ||
- | |||
- | |||
.service { | .service { | ||
- | background: transparent url( | + | background: transparent url([[File:circle.png]]) no-repeat; |
width: 100px; | width: 100px; | ||
height: 100px; | height: 100px; | ||
Line 1,466: | Line 1,438: | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
- | |||
.toggle { | .toggle { | ||
width: 100%; | width: 100%; | ||
Line 1,527: | Line 1,498: | ||
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
- | |||
ul.tabs { | ul.tabs { | ||
margin: 0; | margin: 0; | ||
Line 1,595: | Line 1,565: | ||
padding: 15px 15px 15px 15px; | padding: 15px 15px 15px 15px; | ||
} | } | ||
- | |||
table { | table { | ||
Line 1,668: | Line 1,637: | ||
} | } | ||
.check-icon { | .check-icon { | ||
- | background: transparent url( | + | background: transparent url([[File:check-table.png]]) no-repeat center left; |
width: 12px; | width: 12px; | ||
height: 10px; | height: 10px; | ||
} | } | ||
.cross { | .cross { | ||
- | background: transparent url( | + | background: transparent url([[File:cross.png]]) no-repeat center left; |
width: 10px; | width: 10px; | ||
height: 10px; | height: 10px; | ||
Line 1,692: | Line 1,661: | ||
height: 100%; | height: 100%; | ||
z-index: 2; | z-index: 2; | ||
- | background: url(' | + | background: url('[[File:tile.png]]'); |
} | } | ||
+ | #comments { | ||
+ | width: 590px; | ||
+ | } | ||
+ | .full-width #comments { | ||
+ | width: 900px; | ||
+ | } | ||
+ | ol.commentlist .message p { | ||
+ | font-style: normal; | ||
+ | clear: both; | ||
+ | padding: 0; | ||
+ | } | ||
+ | ol.commentlist { | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | } | ||
+ | ol.commentlist li { | ||
+ | margin: 0; | ||
+ | list-style:none; | ||
+ | background: none; | ||
+ | padding: 25px 0 26px 0; | ||
+ | border-bottom: 1px solid #454545; | ||
+ | font-family: 'PTSansRegular'; | ||
+ | } | ||
+ | #comments .user { | ||
+ | float:left; | ||
+ | width:60px; | ||
+ | } | ||
+ | .avatar { | ||
+ | width: 60px; | ||
+ | height: 60px; | ||
+ | float:left; | ||
+ | display:block; | ||
+ | } | ||
+ | #comments .message .info .date { | ||
+ | float:left; | ||
+ | font-size: 11px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | #comments .info a { | ||
+ | font-size:11px; | ||
+ | float:left; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #comments a.reply-link { | ||
+ | display:block; | ||
+ | margin-left: 10px; | ||
+ | float:right; | ||
+ | text-decoration:none; | ||
+ | font-size:9px; | ||
+ | text-transform: uppercase; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | #comments .message { | ||
+ | background:none; | ||
+ | width:510px; | ||
+ | float:right; | ||
+ | font-size:13px; | ||
+ | line-height:20px; | ||
+ | position:relative; | ||
+ | padding:0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .full-width #comments .message { | ||
+ | width:820px; | ||
+ | } | ||
+ | #comments .info { | ||
+ | margin: 0 0 3px 0; | ||
+ | } | ||
+ | #comments ul.children { | ||
+ | margin:0; | ||
+ | padding:0 0 0 40px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children li { | ||
+ | padding:25px 0 0 0; | ||
+ | margin: 0; | ||
+ | margin-top: 25px; | ||
+ | border: none; | ||
+ | border-top: 1px solid #454545; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children li .message { | ||
+ | width:470px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children ul li .message { | ||
+ | width:430px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children ul ul li .message { | ||
+ | width:390px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children ul ul ul li .message { | ||
+ | width:350px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children ul ul ul ul li .message { | ||
+ | width:310px; | ||
+ | } | ||
+ | #comments ol.commentlist ul.children ul ul ul ul ul li .message { | ||
+ | width:270px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children li .message { | ||
+ | width:780px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children ul li .message { | ||
+ | width:740px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children ul ul li .message { | ||
+ | width:700px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children ul ul ul li .message { | ||
+ | width:660px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children ul ul ul ul li .message { | ||
+ | width:620px; | ||
+ | } | ||
+ | .full-width #comments ol.commentlist ul.children ul ul ul ul ul li .message { | ||
+ | width:580px; | ||
+ | } | ||
+ | #comments .info h3 { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | line-height: 18px; | ||
+ | display: inline; | ||
+ | } | ||
+ | #comments .info h3 a { | ||
+ | font-size: 15px; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | #comments .info h3 a:hover { | ||
+ | } | ||
+ | .comment-form { | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Revision as of 13:41, 16 July 2014