Team:NCTU Formosa/css/style
From 2013.igem.org
(109 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
---Calvin Hue | ---Calvin Hue | ||
*/ | */ | ||
- | #p-logo, #search-controls, #contentSub | + | #p-logo, #search-controls, #contentSub, .firstHeading, #catlinks { |
display: none; | display: none; | ||
+ | } | ||
+ | #footer-box { | ||
+ | width: auto; | ||
+ | background:transparent; | ||
+ | border:0; | ||
+ | font-size:10px; | ||
+ | } | ||
+ | #footer-box a { | ||
+ | color:black; | ||
+ | } | ||
+ | #f-copyrightico { | ||
+ | margin-left:50px; | ||
} | } | ||
body:before { | body:before { | ||
Line 31: | Line 43: | ||
#top-section { | #top-section { | ||
width:100%!important; | width:100%!important; | ||
- | height: | + | height:11px!important; |
overflow:hidden; | overflow:hidden; | ||
- | border:none!important; | + | border-top:none!important; |
- | position:fixed!important; | + | position:fixed; |
+ | z-index: 5!important; | ||
top:0; | top:0; | ||
+ | background-color: lightgrey !important; | ||
+ | -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); | ||
+ | -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); | ||
+ | box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); | ||
+ | opacity:0.7; | ||
} | } | ||
#menubar li a, #menubar li { | #menubar li a, #menubar li { | ||
Line 50: | Line 68: | ||
background-color:transparent!important; | background-color:transparent!important; | ||
} | } | ||
- | .left-menu | + | .left-menu { |
margin-top:4px; | margin-top:4px; | ||
+ | padding-left: 10px; | ||
} | } | ||
- | + | #cou { | |
- | + | width:1px; | |
+ | height:1px; | ||
+ | float:left; | ||
+ | opacity:0.01; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #pt-login { | ||
+ | top: 4px; | ||
} | } | ||
#content { | #content { | ||
Line 69: | Line 95: | ||
p { | p { | ||
margin: 0px!important; | margin: 0px!important; | ||
+ | text-align: justify; | ||
} | } | ||
ul.side { | ul.side { | ||
display:none; | display:none; | ||
+ | } | ||
+ | .part_link { | ||
+ | color: #38c04b; | ||
} | } | ||
#toc { | #toc { | ||
z-index:2; | z-index:2; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 0; |
- | left:- | + | left: -265px; |
border: 0!important; | border: 0!important; | ||
background: none!important; | background: none!important; | ||
Line 130: | Line 160: | ||
margin-right:10px; | margin-right:10px; | ||
} | } | ||
+ | .toc ul ul li a { | ||
+ | line-height:25px; | ||
+ | height:25px; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | /*ul ul .tocnumber { | ||
+ | background:#666; | ||
+ | border-radius:5px; | ||
+ | color: white; | ||
+ | height:19px; | ||
+ | line-height:19px; | ||
+ | margin-top:3px; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | display:block; | ||
+ | float:left; | ||
+ | }*/ | ||
td ul li a:hover { | td ul li a:hover { | ||
background:#efefef; | background:#efefef; | ||
Line 151: | Line 198: | ||
} | } | ||
td ul li:nth-child(4n+1) ul li a { | td ul li:nth-child(4n+1) ul li a { | ||
- | border-left: | + | border-left:5px solid #008747; |
} | } | ||
td ul li:nth-child(4n+2) ul li a { | td ul li:nth-child(4n+2) ul li a { | ||
- | border-left: | + | border-left:5px solid #fecf54; |
} | } | ||
td ul li:nth-child(4n+3) ul li a { | td ul li:nth-child(4n+3) ul li a { | ||
- | border-left: | + | border-left:5px solid #cf2130; |
} | } | ||
td ul li:nth-child(4n) ul li a { | td ul li:nth-child(4n) ul li a { | ||
- | border-left: | + | border-left:5px solid #dde2d5; |
} | } | ||
td ul li.active a { | td ul li.active a { | ||
background:#efefef; | background:#efefef; | ||
} | } | ||
+ | |||
+ | #toc td>ul>li>ul li { | ||
+ | height:0; | ||
+ | line-height:0; | ||
+ | -webkit-transition: .7s; | ||
+ | -moz-transition: .7s; | ||
+ | -o-transition: .7s; | ||
+ | -ms-transition: .7s; | ||
+ | transition: .7s; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | #toc td>ul>li:hover>ul li, #toc td>ul>li.active>ul li { | ||
+ | height:25px; | ||
+ | line-height:25px; | ||
+ | } | ||
* { | * { | ||
margin:0; | margin:0; | ||
Line 201: | Line 263: | ||
top:0px; | top:0px; | ||
width:100%; | width:100%; | ||
- | height: | + | height:100px; |
- | background: | + | background-color:rgba(255,255,255,0.95); |
margin:0; | margin:0; | ||
padding:0 0 0 0; | padding:0 0 0 0; | ||
Line 216: | Line 278: | ||
margin:0 auto; | margin:0 auto; | ||
overflow: visible; | overflow: visible; | ||
+ | margin-top:11px; | ||
} | } | ||
#title { | #title { | ||
- | width: | + | width:850px; |
- | height: | + | height:47px; |
text-indent:-9999px; | text-indent:-9999px; | ||
- | + | margin: 0 auto; | |
+ | margin-bottom:9px; | ||
+ | background: #68c038; | ||
+ | border-radius:3px; | ||
} | } | ||
#title a { | #title a { | ||
display:block; | display:block; | ||
background:url(https://static.igem.org/mediawiki/2013/c/c1/Nctu-title.png) transparent top left no-repeat; | background:url(https://static.igem.org/mediawiki/2013/c/c1/Nctu-title.png) transparent top left no-repeat; | ||
- | width: | + | width:193px; |
height:56px; | height:56px; | ||
text-indent:-9999px; | text-indent:-9999px; | ||
- | |||
-webkit-transition: .7s; | -webkit-transition: .7s; | ||
-moz-transition: .7s; | -moz-transition: .7s; | ||
Line 236: | Line 301: | ||
transition: .7s; | transition: .7s; | ||
} | } | ||
- | # | + | #igemlogo a { |
- | + | display:block; | |
+ | background:url(https://static.igem.org/mediawiki/2013/4/4a/Nctu-igemlogo.png); | ||
+ | background-size: 40px 40px; | ||
+ | background-repeat:no-repeat; | ||
+ | background-position: 8px 8px; | ||
+ | width:56px; | ||
+ | height:56px; | ||
+ | text-indent:-9999px; | ||
+ | -webkit-transition: .7s; | ||
+ | -moz-transition: .7s; | ||
+ | -o-transition: .7s; | ||
+ | -ms-transition: .7s; | ||
+ | transition: .7s; | ||
+ | } | ||
+ | h3 { | ||
+ | background-color: #f0f0f0; | ||
+ | border-bottom: 2px solid #bbb; | ||
+ | padding-left: 10px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | h4, h3, h5 { | ||
+ | clear: both; | ||
+ | } | ||
+ | h3 span.mw-headline { | ||
+ | padding-top: 103px; | ||
} | } | ||
- | + | h4 span.mw-headline, h5 span.mw-headline { | |
- | padding-top: | + | padding-top: 73px; |
} | } | ||
#main-wrapper { | #main-wrapper { | ||
Line 272: | Line 361: | ||
margin-top: 10px; | margin-top: 10px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
- | text-align: right; | + | text-align: right!important; |
font-size:9px; | font-size:9px; | ||
} | } | ||
Line 280: | Line 369: | ||
#cover { | #cover { | ||
height: 100%; | height: 100%; | ||
- | min-width: 800px; | + | //min-width: 800px; |
- | height: | + | height: 400px; |
background-size: cover!important; | background-size: cover!important; | ||
margin:auto 0; | margin:auto 0; | ||
Line 317: | Line 406: | ||
} | } | ||
#realcontent { | #realcontent { | ||
- | |||
- | |||
margin:auto 0; | margin:auto 0; | ||
} | } | ||
Line 324: | Line 411: | ||
float: left; | float: left; | ||
width:100%; | width:100%; | ||
+ | overflow-x: hidden; | ||
} | } | ||
Line 359: | Line 447: | ||
float: left; | float: left; | ||
list-style: none; | list-style: none; | ||
- | + | margin: 10px; | |
} | } | ||
div.card { | div.card { | ||
Line 365: | Line 453: | ||
position: relative; | position: relative; | ||
padding: 15px; | padding: 15px; | ||
+ | right:30px; | ||
box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); | box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); | ||
font-family: Open Sans; | font-family: Open Sans; | ||
Line 372: | Line 461: | ||
-webkit-border-radius: 2px; | -webkit-border-radius: 2px; | ||
border-radius: 2px; | border-radius: 2px; | ||
+ | } | ||
+ | .card p > b, .card li > b { | ||
+ | /*background-color: #FFFF66; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | border-radius:3px;*/ | ||
+ | color: #007FFF; | ||
+ | font-weight:700; | ||
} | } | ||
ul.side div.card { | ul.side div.card { | ||
- | width: | + | width: 10px; |
} | } | ||
div.card p { | div.card p { | ||
Line 389: | Line 486: | ||
height: 30px; | height: 30px; | ||
display: block; | display: block; | ||
- | margin-bottom: - | + | margin-bottom: -20px !important; |
+ | margin-top: 20px; | ||
+ | text-indent:0!important; | ||
} | } | ||
div.card span.url a { | div.card span.url a { | ||
Line 395: | Line 494: | ||
text-decoration: none; | text-decoration: none; | ||
top: 4px; | top: 4px; | ||
- | width: | + | //width: 1000px; |
display: block; | display: block; | ||
position: relative; | position: relative; | ||
} | } | ||
- | div.card img { | + | div.card > img, div.card p > img { |
- | width: 100%; | + | width:100%; |
+ | } | ||
+ | .floatnone img { | ||
+ | max-width:100%; | ||
+ | max-height:100%; | ||
+ | } | ||
+ | .card p { | ||
+ | text-indent:30px; | ||
+ | } | ||
+ | .card>p>a, .card>p>a:visited, .part_link:visited { | ||
+ | color:#38c04b!important; | ||
+ | } | ||
+ | .card ol, .card ul { | ||
+ | margin-left:30px; | ||
+ | } | ||
+ | .gallerytext p { | ||
+ | text-indent:0!important; | ||
+ | } | ||
+ | #changeFont { | ||
+ | z-index:3; | ||
+ | float:right; | ||
+ | position:absolute; | ||
+ | top:100px; | ||
+ | right:45px; | ||
+ | font:16px Quicksand; | ||
+ | font-weight:400; | ||
+ | } | ||
+ | .increaseFont, .decreaseFont, .resetFont { | ||
+ | display: inline-block; | ||
+ | font-size: 16px; | ||
+ | line-height: 18px; | ||
+ | padding: 12px 15px 13px; | ||
+ | background: #fff; | ||
+ | color: #777!important; | ||
+ | text-decoration: none!important; | ||
+ | text-shadow: none; | ||
+ | border-radius: 3px; | ||
+ | box-shadow: none; | ||
+ | transition: all 0.25s ease 0s; | ||
+ | vertical-align:text-top; | ||
+ | opacity:0.75; | ||
+ | } | ||
+ | .increaseFont:hover, .decreaseFont:hover, .resetFont:hover { | ||
+ | opacity:1; | ||
+ | } | ||
+ | .changeFontText { | ||
+ | text-transform: uppercase; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .changeFontArrow { | ||
+ | color: #fff; | ||
+ | padding-right:5px; | ||
+ | padding-left:5px; | ||
+ | } | ||
+ | .floatnone .image::after { | ||
+ | background:#74C365; | ||
+ | padding-left:10px; | ||
+ | padding-right:10px; | ||
+ | padding-top:5px; | ||
+ | padding-bottom:5px; | ||
+ | border-radius:2px; | ||
+ | color:white; | ||
+ | content: attr(title); | ||
+ | bottom: 0; | ||
+ | height: 25%; | ||
+ | font-size: 12px; | ||
+ | display:inline-block; | ||
+ | margin-bottom:20px; | ||
+ | text-decoration:none!important; | ||
+ | margin-left:100px; | ||
+ | margin-right:100px; | ||
+ | } | ||
+ | .floatnone { | ||
+ | border:1px solid white; | ||
+ | border-radius:5px; | ||
+ | -webkit-transition: .5s; | ||
+ | -moz-transition: .5s; | ||
+ | -o-transition: .5s; | ||
+ | -ms-transition: .5s; | ||
+ | transition: .5s; | ||
+ | text-decoration: none!important; | ||
+ | } | ||
+ | .floatnone:hover { | ||
+ | border:1px solid lightgrey; | ||
+ | } | ||
+ | .flotenone .image:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | .nobor, .nobor:hover { | ||
+ | border:0!important; | ||
+ | } | ||
+ | .image { | ||
+ | cursor:default; | ||
+ | } | ||
+ | .undetermined { | ||
+ | border-bottom: red solid 1px; | ||
+ | //display:none; | ||
+ | } | ||
+ | .undetermined:after { | ||
+ | content: "\5F85\66F4\6539"; | ||
+ | background:red; | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | font-size:11px; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | border: 2px red solid; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | } | ||
+ | .newc { | ||
+ | border-bottom: #99ccff solid 1px; | ||
+ | } | ||
+ | .newc:after { | ||
+ | content: "NEW"; | ||
+ | background:#99ccff; | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | font-size:11px; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | border: 2px #99ccff solid; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | } | ||
+ | .newd { | ||
+ | border-bottom: #6B8E23 solid 1px; | ||
+ | } | ||
+ | .newd:after { | ||
+ | content: "NEW DONE"; | ||
+ | background:#6B8E23; | ||
+ | color:white; | ||
+ | text-align:center; | ||
+ | font-size:11px; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | border: 2px #6B8E23 solid; | ||
+ | padding-left:5px; | ||
+ | padding-right:5px; | ||
+ | } | ||
+ | #back-top { | ||
+ | z-index:9; | ||
+ | display: block; | ||
+ | position:fixed; | ||
+ | bottom:-30px; | ||
+ | left:-30px; | ||
+ | background:#fff; | ||
+ | width:100px; | ||
+ | height:100px; | ||
+ | margin:auto; | ||
+ | padding:0; | ||
+ | list-style: none; | ||
+ | overflow:hidden; | ||
+ | -webkit-border-radius: 50px; | ||
+ | -moz-border-radius: 50px; | ||
+ | border-radius: 50px; | ||
+ | -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | ||
+ | -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | ||
+ | box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); | ||
+ | -webkit-transition:all 0.2s linear; | ||
+ | -moz-transition:all 0.2s linear; | ||
+ | -o-transition:all 0.2s linear; | ||
+ | transition:all 0.2s linear; | ||
+ | } | ||
+ | #back-top:hover { | ||
+ | bottom:-5px; | ||
+ | left:-5px; | ||
+ | transform: scale(1.5); | ||
+ | -ms-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | } | ||
+ | #back-top li, #back-top li a { | ||
+ | display:block; | ||
+ | width:100px; | ||
+ | height:100px; | ||
+ | line-height:100px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | #back-top a { | ||
+ | |||
+ | text-decoration:none; | ||
+ | text-transform:uppercase; | ||
+ | font-size:14px; | ||
+ | color:#686868!important; | ||
+ | font-family:Quicksand; | ||
+ | font-weight:700; | ||
+ | -webkit-transition:all 0.2s linear; | ||
+ | -moz-transition:all 0.2s linear; | ||
+ | -o-transition:all 0.2s linear; | ||
+ | transition:all 0.2s linear; | ||
+ | } | ||
+ | #back-top li a:hover { | ||
+ | background:#efefef; | ||
+ | color:red!important; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | h6 { | ||
+ | border-top: 1px solid #999; | ||
+ | } | ||
+ | .ref { | ||
+ | font-size: 10px; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | .toclevel-1 .active a { | ||
+ | color: red!important; | ||
+ | } | ||
+ | .tocnumber { | ||
+ | display: inline-block; | ||
+ | white-space: nowrap; | ||
+ | overflow:hidden; | ||
+ | text-overflow: ellipsis; | ||
+ | } | ||
+ | .toctext { | ||
+ | display: inline-block; | ||
+ | width:185px; | ||
+ | white-space: nowrap; | ||
+ | overflow:hidden; | ||
+ | text-overflow: ellipsis; | ||
+ | } | ||
+ | .nocap .image::after { | ||
+ | display: none!important; | ||
} | } |
Latest revision as of 06:17, 1 October 2014
/* ---Calvin Hue
- /
- p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {
display: none; }
- footer-box {
width: auto; background:transparent; border:0; font-size:10px; }
- footer-box a {
color:black; }
- f-copyrightico {
margin-left:50px; } body:before {
content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;
}
- selection {
background:#0BDA51; color:#fff; }
- -moz-selection {
background:#0BDA51; color:#fff; }
- -webkit-selection {
background:#0BDA51; color:#fff; }
- top-section {
width:100%!important; height:11px!important; overflow:hidden; border-top:none!important; position:fixed; z-index: 5!important; top:0; background-color: lightgrey !important; -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.5); opacity:0.7; }
- menubar li a, #menubar li {
backgound: none!important; color:black!important; font:10px Quicksand; font-weight:400; text-transform:uppercase; }
- menubar li a:hover {
text-decoration:none; } .right-menu li a, .left-menu:hover { background-color:transparent!important; } .left-menu { margin-top:4px; padding-left: 10px; }
- cou {
width:1px; height:1px; float:left; opacity:0.01; overflow:hidden; }
- pt-login {
top: 4px; }
- content {
background: transparent; padding: 0; width: 100%; border: 0px; line-height:normal!important; }
- globalWrapper {
font-size:100%!important; padding:0!important; } p { margin: 0px!important; text-align: justify; } ul.side { display:none; } .part_link { color: #38c04b; }
- toc {
z-index:2; position: absolute; top: 0; left: -265px; border: 0!important; background: none!important; }
- toctitle {
display:none; } td>ul>li.active { background:#fff; }
- toc ul, .toc ul {
margin: 0!important;
} td>ul { position:relative; background:#fff; width:250px; margin:auto; padding:0; list-style: none; overflow:hidden;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); }
td ul li a { width:225px; padding-left:20px; height:50px; line-height:50px; display:block; overflow:hidden; position:relative; text-decoration:none; text-transform:uppercase; font-size:14px; color:#686868!important; font-family:Quicksand; font-weight:700; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .tocnumber { margin-right:10px; } .toc ul ul li a { line-height:25px; height:25px; font-size:12px; } /*ul ul .tocnumber { background:#666; border-radius:5px; color: white; height:19px; line-height:19px; margin-top:3px; padding-left:5px; padding-right:5px; display:block; float:left; }*/ td ul li a:hover { background:#efefef; text-decoration:none; }
td ul li:nth-child(4n+1) a { border-left:5px solid #008747; }
td ul li:nth-child(4n+2) a { border-left:5px solid #fecf54; }
td ul li:nth-child(4n+3) a { border-left:5px solid #cf2130; }
td ul li:nth-child(4n) a { border-left:5px solid #dde2d5; } td ul li:nth-child(4n+1) ul li a { border-left:5px solid #008747; }
td ul li:nth-child(4n+2) ul li a { border-left:5px solid #fecf54; }
td ul li:nth-child(4n+3) ul li a { border-left:5px solid #cf2130; }
td ul li:nth-child(4n) ul li a { border-left:5px solid #dde2d5; } td ul li.active a { background:#efefef; }
- toc td>ul>li>ul li {
height:0; line-height:0; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; overflow:hidden; }
- toc td>ul>li:hover>ul li, #toc td>ul>li.active>ul li {
height:25px; line-height:25px; }
- {
margin:0; padding:0; } .clear { clear: both; } html, body { height:100%; margin:0; padding:0; } body { background:#f0f0f0; color:#3c3c3c; font:14px helvetica, arial, Sans-serif; overflow-x:hidden; } a { text-decoration:none; } a img { border: none; } ul, li { margin:0; padding:0; }
- header-wrapper {
position: fixed; z-index:9; top:0px; width:100%; height:100px; background-color:rgba(255,255,255,0.95); margin:0; padding:0 0 0 0; -moz-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); -webkit-box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7); overflow: visible; }
- header{
width:100%; max-width:1200px; height:56px; margin:0 auto; overflow: visible; margin-top:11px; }
- title {
width:850px; height:47px; text-indent:-9999px;
margin: 0 auto;
margin-bottom:9px; background: #68c038; border-radius:3px; }
- title a {
display:block; background:url() transparent top left no-repeat; width:193px; height:56px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; }
- igemlogo a {
display:block; background:url(); background-size: 40px 40px; background-repeat:no-repeat; background-position: 8px 8px; width:56px; height:56px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } h3 { background-color: #f0f0f0; border-bottom: 2px solid #bbb; padding-left: 10px; border-radius: 3px; } h4, h3, h5 { clear: both; } h3 span.mw-headline { padding-top: 103px; } h4 span.mw-headline, h5 span.mw-headline { padding-top: 73px; }
- main-wrapper {
float:left; width:100%; min-height:100%; margin:0 auto; margin-top: -12px; padding:0 0 0 0; background:#e4e4e4; border-bottom:1px solid #888888; -moz-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5); }
- main {
float:left; width: 100%; height:100%; padding: 0px; margin:0 auto; }
- footer-wrapper {
width:100%; margin:0 auto; }
- footer {
padding-right:50px; }
- footer-text {
margin-top: 10px; margin-bottom: 20px; text-align: right!important; font-size:9px; } .author { display:none; }
- cover {
height: 100%; //min-width: 800px; height: 400px; background-size: cover!important; margin:auto 0;
-moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;
position:relative; }
- coverbox {
position:absolute; bottom:0; margin-left:50px; margin-right:50px; }
- cover #ctitle {
color:white; font-family: Lobster Two; font-size: 60px; font-weight: bold; border-bottom: 1px solid lightgrey; padding-bottom: 10px; }
- cover p {
color:white; font-family: Open Sans; font-size: 20px; margin-top: 20px!important; margin-bottom: 20px!important; padding-top: 10px; }
- content-wrapper {
width: 100%; margin:0; padding:0; }
- realcontent {
margin:auto 0; }
- crw{
float: left; width:100%; overflow-x: hidden; }
- cr{
margin-left: 300px; min-width: 300px; }
- cl{
float: left; width: 300px; margin-left:-100%; } ul.side { width: 300px; height: 100%; float: left; padding: 0; } ul.side li { width: 280px; float: left; list-style: none; padding: 10px; } div.cont { z-index:2; width: 100%; height: 100%; float: right; padding: 0; } div.cont .li { width: 100%; float: left; list-style: none; margin: 10px; } div.card { background: #fff; position: relative; padding: 15px; right:30px; box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); font-family: Open Sans; color: #444; font-size: 14px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .card p > b, .card li > b { /*background-color: #FFFF66; padding-left:5px; padding-right:5px; border-radius:3px;*/ color: #007FFF; font-weight:700; } ul.side div.card { width: 10px; } div.card p { margin: 0 0 15px 0!important; } div.card h3 { font-size: 28px; } div.card span.url { border-top: 1px solid #e5e5e5; background-image: url('https://static.igem.org/mediawiki/2013/9/91/Nctu-url.png'); background-repeat: no-repeat; padding: 6px 0 0 30px; height: 30px; display: block; margin-bottom: -20px !important; margin-top: 20px; text-indent:0!important; } div.card span.url a { color: #38c04b; text-decoration: none; top: 4px; //width: 1000px; display: block; position: relative; } div.card > img, div.card p > img { width:100%; } .floatnone img { max-width:100%; max-height:100%; } .card p { text-indent:30px; } .card>p>a, .card>p>a:visited, .part_link:visited { color:#38c04b!important; } .card ol, .card ul { margin-left:30px; } .gallerytext p { text-indent:0!important; }
- changeFont {
z-index:3; float:right; position:absolute; top:100px; right:45px; font:16px Quicksand; font-weight:400; } .increaseFont, .decreaseFont, .resetFont { display: inline-block; font-size: 16px; line-height: 18px; padding: 12px 15px 13px; background: #fff; color: #777!important; text-decoration: none!important; text-shadow: none; border-radius: 3px; box-shadow: none; transition: all 0.25s ease 0s; vertical-align:text-top; opacity:0.75; } .increaseFont:hover, .decreaseFont:hover, .resetFont:hover { opacity:1; } .changeFontText { text-transform: uppercase; color: #fff; } .changeFontArrow { color: #fff; padding-right:5px; padding-left:5px; } .floatnone .image::after { background:#74C365; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; border-radius:2px; color:white; content: attr(title); bottom: 0; height: 25%; font-size: 12px; display:inline-block; margin-bottom:20px; text-decoration:none!important; margin-left:100px; margin-right:100px; } .floatnone { border:1px solid white; border-radius:5px; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; text-decoration: none!important; } .floatnone:hover { border:1px solid lightgrey; } .flotenone .image:hover { text-decoration:none; } .nobor, .nobor:hover { border:0!important; } .image { cursor:default; } .undetermined { border-bottom: red solid 1px; //display:none; } .undetermined:after {
content: "\5F85\66F4\6539"; background:red; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px red solid; padding-left:5px; padding-right:5px;
} .newc { border-bottom: #99ccff solid 1px; } .newc:after {
content: "NEW"; background:#99ccff; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px #99ccff solid; padding-left:5px; padding-right:5px;
} .newd { border-bottom: #6B8E23 solid 1px; } .newd:after {
content: "NEW DONE"; background:#6B8E23; color:white; text-align:center; font-size:11px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px #6B8E23 solid; padding-left:5px; padding-right:5px;
}
- back-top {
z-index:9; display: block; position:fixed; bottom:-30px; left:-30px; background:#fff; width:100px; height:100px; margin:auto; padding:0; list-style: none; overflow:hidden; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- back-top:hover {
bottom:-5px; left:-5px; transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); }
- back-top li, #back-top li a {
display:block; width:100px; height:100px; line-height:100px; text-align:center; }
- back-top a {
text-decoration:none; text-transform:uppercase; font-size:14px; color:#686868!important; font-family:Quicksand; font-weight:700; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
- back-top li a:hover {
background:#efefef; color:red!important; text-decoration:none; } h6 { border-top: 1px solid #999; } .ref { font-size: 10px; font-style: italic; } .toclevel-1 .active a { color: red!important; } .tocnumber { display: inline-block; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .toctext { display: inline-block; width:185px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .nocap .image::after {
display: none!important;
}