Team:NCTU Formosa/css/style

From 2013.igem.org

(Difference between revisions)
Line 120: Line 120:
text-align: right;
text-align: right;
font-size:9px;
font-size:9px;
-
}
 
-
nav {
 
-
display:inline;
 
-
float:right;
 
-
width:600px;
 
-
padding:0;
 
-
overflow: visible;
 
-
height:68px;
 
-
margin-top:-47px;
 
-
}
 
-
.nav {
 
-
font-size: 0;
 
-
  text-align: center;
 
-
  width: 600px;
 
-
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: 75px;
 
-
  height: 3px;
 
-
  top: -20px;
 
-
  background: #38c04b;
 
-
  margin-left:-39px;
 
-
}
 
-
.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 li ul:before {
 
-
content:'';
 
-
    display:block;
 
-
    width:0;
 
-
    height:0;
 
-
    position:absolute;
 
-
   
 
-
    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;
 
-
  background: #555;
 
-
  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 a:hover { background: #666; color: #fff; }
 
-
ul.nav li:hover ul {
 
-
  display: block;
 
-
  visibility: visible;
 
}
}
.author {
.author {

Revision as of 08:40, 28 August 2013

/* ---Calvin Hue

  • /
  1. p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks {

display: none; }

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

  1. toc {

display: none; }

  • {

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:68px; background:url(Nctu-header-bg.png) transparent repeat-x; 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:68px; margin:0 auto; overflow: visible; }

  1. title {

width:193px; height:57px; text-indent:-9999px; padding-top: 12px; margin-left: 30px; }

  1. title a {

display:block; background:url(Nctu-title.png) transparent top left no-repeat; width:193px; height:45px; text-indent:-9999px; } h3 span.mw-headline { padding-top: 70px; }

  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; font-size:9px; } .author { display:none; }

  1. cover {

height: 100%; min-width: 800px; height: 500px; background:url(design-by-calvin-hue) center no-repeat; background-size: cover; 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 h2 {

color:white; font-family: Lobster Two; font-size: 60px; font-weight: bold; }

  1. cover p {

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

  1. content-wrapper {

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

  1. realcontent {

padding-left:50px; padding-right:50px; margin:auto 0; }

  1. crw{

float: left; width:100%; }

  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; padding: 10px; } div.card { background: #fff; position: relative; padding: 15px; 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; } 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: -10px!important; } div.card span.url a { color: #38c04b; text-decoration: none; top: 4px; width: 250px; display: block; position: relative; } div.card img { width: 100%; }

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