Team:NCTU Formosa/css/style

From 2013.igem.org

(Difference between revisions)
 
(147 intermediate revisions not shown)
Line 2: Line 2:
---Calvin Hue
---Calvin Hue
*/
*/
-
#p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks {
+
#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 {
 +
          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 {
#content {
Line 14: Line 91:
#globalWrapper {
#globalWrapper {
font-size:100%!important;
font-size:100%!important;
 +
padding:0!important;
}
}
p {
p {
margin: 0px!important;
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;
}
}
* {
* {
Line 51: Line 263:
top:0px;
top:0px;
width:100%;
width:100%;
-
height:68px;
+
height:100px;
-
background:url(https://static.igem.org/mediawiki/2013/3/3a/Nctu-header-bg.png) transparent repeat-x;
+
background-color:rgba(255,255,255,0.95);
margin:0;
margin:0;
padding:0 0 0 0;
padding:0 0 0 0;
Line 63: Line 275:
width:100%;
width:100%;
max-width:1200px;
max-width:1200px;
-
height:68px;
+
height:56px;
margin:0 auto;
margin:0 auto;
overflow: visible;
overflow: visible;
 +
margin-top:11px;
}
}
#title {
#title {
-
width:156px;
+
width:850px;
-
height:57px;
+
height:47px;
text-indent:-9999px;
text-indent:-9999px;
-
padding-top: 12px;
+
    margin: 0 auto;
-
margin-left: 30px;
+
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:156px;
+
width:193px;
-
height:45px;
+
height:56px;
text-indent:-9999px;
text-indent:-9999px;
 +
-webkit-transition: .7s;
 +
-moz-transition: .7s;
 +
-o-transition: .7s;
 +
-ms-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: 73px;
}
}
#main-wrapper {
#main-wrapper {
Line 111: 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;
-
}
 
-
nav {
 
-
display:inline;
 
-
float:right;
 
-
width:800px;
 
-
padding:0;
 
-
overflow: visible;
 
-
height:68px;
 
-
margin-top:-47px;
 
-
}
 
-
.nav {
 
-
font-size: 0;
 
-
  text-align: center;
 
-
  width: 800px;
 
-
position: relative;
 
-
}
 
-
.nav > li{
 
-
display:inline-block;
 
-
width:12.5%;
 
-
}
 
-
.nav li, .nav li a {
 
-
text-transform:uppercase;
 
-
list-style: none;
 
-
font:16px Quicksand;
 
-
font-weight:700;
 
-
}
 
-
.nav > li a {
 
-
display: block;
 
-
position: relative;
 
-
width:100%;
 
-
float: left;
 
-
padding-bottom: 20px;
 
-
height:100%;
 
-
text-decoration: none;
 
-
color: #393939;
 
-
-webkit-transition: .7s;
 
-
-moz-transition: .7s;
 
-
-o-transition: .7s;
 
-
-ms-transition: .7s;
 
-
transition: .7s; }
 
-
.nav > li a:hover {
 
-
color: #38c04b;
 
-
}
 
-
.effect {
 
-
position: absolute;
 
-
  left: 6.25%;
 
-
  -webkit-transition: 0.7s ease-in-out;
 
-
  -moz-transition: 0.7s ease-in-out;
 
-
  -o-transition: 0.7s ease-in-out;
 
-
  -ms-transition: 0.7s ease-in-out;
 
-
  transition: 0.7s ease-in-out;
 
-
  width: 100px;
 
-
  height: 3px;
 
-
  top: -20px;
 
-
  background: #38c04b;
 
-
  margin-left:-50px;
 
-
}
 
-
.nav li:nth-child(1):hover ~ .effect {
 
-
  left: 6.25%; }
 
-
.nav li:nth-child(2):hover ~ .effect {
 
-
  left: 18.75%; }
 
-
.nav li:nth-child(3):hover ~ .effect {
 
-
  left: 31.25%; }
 
-
.nav li:nth-child(4):hover ~ .effect {
 
-
  left: 43.75%; }
 
-
.nav li:nth-child(5):hover ~ .effect {
 
-
  left: 56.25%; }
 
-
.nav li:nth-child(6):hover ~ .effect {
 
-
  left: 68.75%; }
 
-
.nav li:nth-child(7):hover ~ .effect {
 
-
  left: 81.25%; }
 
-
.nav li:nth-child(8):hover ~ .effect {
 
-
  left: 93.75%; }
 
-
.nav li:nth-child(6) a {
 
-
line-height:80%;
 
-
}
 
-
ul li {position:relative;}
 
-
ul li ul {
 
-
  padding: 0;
 
-
position: absolute; top: 100%;
 
-
  left: 0;
 
-
  width: 150px;
 
-
-moz-box-shadow: 1px 1px 3px #000;
 
-
-webkit-box-shadow: 1px 1px 3px #000;
 
-
box-shadow: 1px 1px 3px #000;
 
-
  display: none;
 
-
  visibility: hidden;
 
-
  -webkit-transiton: opacity 0.5s;
 
-
  -moz-transition: opacity 0.5s;
 
-
  -ms-transition: opacity 0.5s;
 
-
  -o-transition: opacity 0.5s;
 
-
  -transition: opacity 0.5s;
 
-
}
 
-
ul.nav li ul li a {
 
-
position:relative;
 
-
  background: #555;
 
-
  display: block;
 
-
  color: #fff;
 
-
  font-size:14px!important;
 
-
line-height:100%!important;
 
-
  padding-bottom:0px;
 
-
  text-shadow: 0 -1px 0 #000;
 
-
}
 
-
ul.nav li ul li a:hover { background: #666; color: #fff; }
 
-
ul.nav li:hover ul {
 
-
  display: block;
 
-
  visibility: visible;
 
}
}
.author {
.author {
Line 226: Line 369:
#cover {
#cover {
height: 100%;
height: 100%;
-
min-width: 800px;
+
//min-width: 800px;
-
height: 500px;
+
height: 400px;
-
background:url(design-by-calvin-hue) center no-repeat;
+
background-size: cover!important;
-
background-size: cover;
+
margin:auto 0;
margin:auto 0;
   -moz-box-shadow:    inset 0 0 10px #000000;
   -moz-box-shadow:    inset 0 0 10px #000000;
Line 242: Line 384:
margin-right:50px;
margin-right:50px;
}
}
-
#cover h2 {
+
#cover #ctitle {
color:white;
color:white;
font-family: Lobster Two;
font-family: Lobster Two;
font-size: 60px;
font-size: 60px;
font-weight: bold;
font-weight: bold;
 +
border-bottom: 1px solid lightgrey;
 +
padding-bottom: 10px;
}
}
#cover p {
#cover p {
Line 254: Line 398:
margin-top: 20px!important;
margin-top: 20px!important;
margin-bottom: 20px!important;
margin-bottom: 20px!important;
 +
padding-top: 10px;
}
}
#content-wrapper {
#content-wrapper {
Line 261: Line 406:
}
}
#realcontent {
#realcontent {
-
padding-left:50px;
 
-
padding-right:50px;
 
margin:auto 0;
margin:auto 0;
}
}
Line 268: Line 411:
float: left;
float: left;
width:100%;
width:100%;
 +
overflow-x: hidden;
}
}
Line 303: Line 447:
float: left;
float: left;
list-style: none;
list-style: none;
-
padding: 10px;
+
margin: 10px;
}
}
div.card {
div.card {
Line 309: 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 316: 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: 250px;
+
width: 10px;
}
}
div.card p {
div.card p {
Line 333: Line 486:
height: 30px;
height: 30px;
display: block;
display: block;
-
margin-bottom: -10px!important;
+
margin-bottom: -20px !important;
 +
margin-top: 20px;
 +
text-indent:0!important;
}
}
div.card span.url a {
div.card span.url a {
Line 339: Line 494:
text-decoration: none;
text-decoration: none;
top: 4px;
top: 4px;
-
width: 250px;
+
//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

  • /
  1. p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {

display: none; }

  1. footer-box {

width: auto; background:transparent; border:0; font-size:10px; }

  1. footer-box a {

color:black; }

  1. 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; }

  1. 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; }

  1. menubar li a, #menubar li {

backgound: none!important; color:black!important; font:10px Quicksand; font-weight:400; text-transform:uppercase; }

  1. 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; }

  1. cou {

width:1px; height:1px; float:left; opacity:0.01; overflow:hidden; }

  1. pt-login {

top: 4px; }

  1. content {

background: transparent; padding: 0; width: 100%; border: 0px; line-height:normal!important; }

  1. globalWrapper {

font-size:100%!important; padding:0!important; } p { margin: 0px!important; text-align: justify; } ul.side { display:none; } .part_link { color: #38c04b; }

  1. toc {

z-index:2; position: absolute; top: 0; left: -265px; border: 0!important; background: none!important; }

  1. toctitle {

display:none; } td>ul>li.active { background:#fff; }

  1. 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; }

  1. 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; }

  1. 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; }

  1. 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; }

  1. header{

width:100%; max-width:1200px; height:56px; margin:0 auto; overflow: visible; margin-top:11px; }

  1. title {

width:850px; height:47px; text-indent:-9999px; 

   margin: 0 auto;

margin-bottom:9px; background: #68c038; border-radius:3px; }

  1. title a {

display:block; background:url(Nctu-title.png) 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; }

  1. igemlogo a {

display:block; background:url(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: 73px; }

  1. 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); }

  1. main {

float:left; width: 100%; height:100%; padding: 0px; margin:0 auto; }

  1. footer-wrapper {

width:100%; margin:0 auto; }

  1. footer {

padding-right:50px; }

  1. footer-text {

margin-top: 10px; margin-bottom: 20px; text-align: right!important; font-size:9px; } .author { display:none; }

  1. 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; }

  1. coverbox {

position:absolute; bottom:0; margin-left:50px; margin-right:50px; }

  1. cover #ctitle {

color:white; font-family: Lobster Two; font-size: 60px; font-weight: bold; border-bottom: 1px solid lightgrey; padding-bottom: 10px; }

  1. cover p {

color:white; font-family: Open Sans; font-size: 20px; margin-top: 20px!important; margin-bottom: 20px!important; padding-top: 10px; }

  1. content-wrapper {

width: 100%; margin:0; padding:0; }

  1. realcontent {

margin:auto 0; }

  1. crw{

float: left; width:100%; overflow-x: hidden; }

  1. cr{

margin-left: 300px; min-width: 300px; }

  1. 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; }

  1. 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;

}

  1. 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; }

  1. back-top:hover {

bottom:-5px; left:-5px; transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); }

  1. back-top li, #back-top li a {

display:block; width:100px; height:100px; line-height:100px; text-align:center; }

  1. 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; }

  1. 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;

}

Retrieved from "http://2013.igem.org/Team:NCTU_Formosa/css/style"