Team:NCTU Formosa/css/style

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
---Calvin Hue
---Calvin Hue
*/
*/
-
#p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {
+
#navb, .dl-back {
-
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;
display:none;
}
}
-
.part_link {
+
nav {
-
color: #38c04b;
+
display:block;
-
}
+
width:800px;
-
#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;
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:67px;
 
-
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;
overflow: visible;
 +
height:68px;
 +
margin: 0 auto;
}
}
-
#header{
+
.nav {
-
width:100%;
+
font-size: 0;
-
max-width:1200px;
+
  text-align: center;
-
height:56px;
+
  width: 100%;
-
margin:0 auto;
+
position: relative;
-
overflow: visible;
+
-
margin-top:11px;
+
}
}
-
#title {
+
.nav > li{
-
width:192px;
+
-
height:56px;
+
-
text-indent:-9999px;
+
-
margin-left: 58px;
+
-
}
+
-
#title a {
+
display:block;
display:block;
-
background:url(https://static.igem.org/mediawiki/2013/c/c1/Nctu-title.png) transparent top left  
+
float:left;
-
 
+
width:12.5%;
-
no-repeat;
+
-
width:193px;
+
-
height:56px;
+
-
text-indent:-9999px;
+
-
opacity: 0.85;
+
-
-webkit-transition: .7s;
+
-
-moz-transition: .7s;
+
-
-o-transition: .7s;
+
-
-ms-transition: .7s;
+
-
transition: .7s;
+
}
}
-
#title a:hover {
+
.nav li, .nav li a {
-
opacity:1;
+
text-transform:uppercase;
 +
list-style: none;
 +
font:14px Quicksand;
 +
font-weight:700;
}
}
-
#igemlogo {
+
.nav > li a {
-
width:56px;
+
display: block;
-
height:56px;
+
position: relative;
-
text-indent:-9999px;
+
width:100%;
-
margin-top: -56px;
+
float: left;
-
float:left;
+
padding-bottom: 20px;
-
}
+
height:100%;
-
#igemlogo a {
+
text-decoration: none;
-
display:block;
+
color: #393939;
-
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;
+
-
opacity: 0.85;
+
-webkit-transition: .7s;
-webkit-transition: .7s;
-moz-transition: .7s;
-moz-transition: .7s;
Line 327: Line 45:
transition: .7s;
transition: .7s;
}
}
-
#igemlogo a:hover {
+
.nav > li a:hover {
-
opacity:1;
+
color: #38c04b;
}
}
-
h3 {
+
.effect {
-
background-color: #f0f0f0;
+
  position: absolute;
-
border-bottom: 2px solid #bbb;
+
  left: 6.25%;
-
padding-left: 10px;
+
  -webkit-transition: 0.7s ease-in-out;
-
border-radius: 3px;
+
  -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: 12.5%;
 +
  height: 3px;
 +
  top: 31px;
 +
  background: #38c04b;
 +
  margin-left:-50px;
}
}
-
h4, h3, h5 {
+
.nav li:nth-child(1):hover ~ .effect {
-
clear: both;
+
  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(5) a {
 +
line-height:80%;
}
}
-
h3 span.mw-headline {
+
ul.nav li:nth-child(5) ul {
-
padding-top: 70px;
+
margin-top:-3px;
}
}
-
h4 span.mw-headline, h5 span.mw-headline {
+
ul.nav li {position:relative;}
-
padding-top: 40px;
+
ul.nav li ul {
 +
  padding: 0;
 +
position: absolute; top: 100%;
 +
  left: 0;
 +
  width: 275px;
 +
-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;
}
}
-
#main-wrapper {
+
ul.nav li ul:before {
-
float:left;
+
content:'';
-
width:100%;
+
    display:block;
-
min-height:100%;
+
    width:0;
-
margin:0 auto;
+
    height:0;
-
margin-top: -12px;
+
    position:absolute;
-
padding:0 0 0 0;
+
    pointer-events: none;  
-
background:#e4e4e4;
+
    border-left: 8px solid transparent;
-
border-bottom:1px solid #888888;
+
    border-right: 8px solid transparent;  
-
-moz-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5);
+
    border-bottom:8px solid #555;
-
-webkit-box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5);
+
    left:30px;
-
box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5);
+
    top:-4px;
}
}
-
#main {
+
ul.nav li ul li a {  
-
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;
+
-
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;
position:relative;
 +
text-transform:none;
 +
  display: block;
 +
  color: #fff;
 +
  font-size:14px!important;
 +
line-height:200%!important;
 +
  padding-bottom:0px;
 +
  text-shadow: 0 -1px 0 #000;
}
}
-
#coverbox {
+
ul.nav li ul li:nth-child(2n) a {
-
position:absolute;
+
  background: #555;  
-
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;
+
-
}
+
-
ul.side div.card {
+
-
width: 250px;
+
-
}
+
-
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: 250px;
+
-
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:419px;
+
-
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: #999;
+
-
color: #fff!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 {
+
-
background: #777;
+
-
opacity:1;
+
-
}
+
-
.changeFontText {
+
-
text-transform: uppercase;
+
-
color: #aaa;
+
-
}
+
-
.changeFontArrow {
+
-
color: #aaa;
+
-
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 {
+
ul.nav li ul li:nth-child(2n+1) a {
-
display: inline-block;
+
  background: #5f5f5f;  
-
width:185px;
+
-
white-space: nowrap;
+
-
overflow:hidden;
+
-
text-overflow: ellipsis;
+
}
}
-
.nocap .image::after {
+
ul.nav li ul li a:hover { background: #888; color: #fff; }
-
    display: none!important;
+
ul.nav li:hover ul {
 +
  display: block;
 +
  visibility: visible;
}
}

Revision as of 13:07, 24 October 2013

/* ---Calvin Hue

  • /
  1. navb, .dl-back {

display:none; } nav { display:block; width:800px; padding:0; overflow: visible; height:68px; margin: 0 auto; } .nav { font-size: 0; 

 text-align: center;
 width: 100%;

position: relative; } .nav > li{ display:block; float:left; width:12.5%; } .nav li, .nav li a { text-transform:uppercase; list-style: none; font:14px 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: 12.5%;
 height: 3px;
 top: 31px;
 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(5) a { line-height:80%; } ul.nav li:nth-child(5) ul { margin-top:-3px; } ul.nav li {position:relative;} ul.nav li ul { 

 padding: 0;

position: absolute; top: 100%; 

 left: 0;
 width: 275px;

-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:before { content:; 

   display:block;
   width:0;
   height:0;
   position:absolute;
   pointer-events: none;    
   border-left: 8px solid transparent;
   border-right: 8px solid transparent; 
   border-bottom:8px solid #555;
   left:30px;
   top:-4px;

} ul.nav li ul li a { position:relative; text-transform:none; 

 display: block; 
 color: #fff;
 font-size:14px!important;

line-height:200%!important; 

 padding-bottom:0px;
 text-shadow: 0 -1px 0 #000;

} ul.nav li ul li:nth-child(2n) a { 

 background: #555;

} ul.nav li ul li:nth-child(2n+1) a { 

 background: #5f5f5f;

} ul.nav li ul li a:hover { background: #888; color: #fff; } ul.nav li:hover ul { 

 display: block;
 visibility: visible;

}

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