Team:NCTU Formosa/css/style

From 2013.igem.org

(Difference between revisions)
(Created page with "#p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks { display: none; } #content { background: transparent; padding: 0; width: 100%; b...")
Line 1: Line 1:
 +
/*
 +
---Calvin Hue
 +
*/
#p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks {
#p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks {
display: none;
display: none;
Line 7: Line 10:
width: 100%;
width: 100%;
border: 0px;
border: 0px;
 +
line-height:normal!important;
}
}
-
p {
+
#globalWrapper {
-
margin: 0px;
+
font-size:100%!important;
 +
}
 +
* {
 +
margin:0;
 +
padding:0;
 +
}
 +
.clear {
 +
clear: both;
 +
}
 +
html, body {
 +
height:100%;
 +
margin:0;
 +
padding:0;
}
}
body {
body {
-
background:
+
background:#f0f0f0;
-
radial-gradient(black 15%, transparent 16%) 0 0,
+
color:#3c3c3c;
-
radial-gradient(black 15%, transparent 16%) 8px 8px,
+
font:14px helvetica, arial, Sans-serif;
-
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
+
overflow-x:hidden;
-
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
+
}
-
background-color:#282828;
+
a {
-
background-size:16px 16px;
+
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:68px;
 +
background:url(https://static.igem.org/mediawiki/2013/3/3a/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;
 +
}
 +
#header{
 +
width:100%;
 +
max-width:1200px;
 +
height:68px;
 +
margin:0 auto;
 +
overflow: visible;
}
}
#title {
#title {
-
margin-top:150px;
+
width:156px;
-
text-align: center;
+
height:57px;
-
font-family: 'Lily Script One', cursive;
+
text-indent:-9999px;
-
font-size:70px;
+
padding-top: 12px;
-
color: #fff;
+
margin-left: 30px;
-
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
+
}
}
-
#content {
+
#title a {
-
text-align: center;
+
display:block;
-
font-family: 'Pathway Gothic One', sans-serif;
+
background:url(https://static.igem.org/mediawiki/2013/c/c1/Nctu-title.png) transparent top left no-repeat;
-
font-size:30px;
+
width:156px;
-
color: #f0f0f0;
+
height:45px;
 +
text-indent:-9999px;
}
}
-
#copyright {
+
#main-wrapper {
-
margin-top:200px;
+
float:left;
-
text-align: center;
+
width:100%;
-
font-family: 'Arial', sans-serif;
+
min-height:100%;
-
font-size:9px;
+
margin:0 auto;
-
color: #f0f0f0;
+
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);
}
}
-
a {
+
#main {
-
color:#f0f0f0;
+
float:left;
-
text-decoration:none;
+
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;
 +
}
 +
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 {
 +
list-style: none;
 +
font:20px Strait;
 +
}
 +
.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: 2px;
 +
  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 {
 +
font-size:16px;
 +
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:18px!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 {
 +
display:none;
 +
}
 +
#cover {
 +
height: 100%;
 +
min-width: 800px;
 +
height: 500px;
 +
background:url() 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;
 +
}
 +
#cover h1, #cover p {
 +
display: none;
 +
}
 +
#content-wrapper {
 +
width: 100%;
 +
margin:0;
 +
padding:0;
 +
}
 +
#realcontent {
 +
padding-left:50px;
 +
padding-right:50px;
 +
margin:auto 0;
 +
}
 +
#crw{
 +
float: left;
 +
width:100%;
 +
}
 +
 
 +
#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;
 +
}
 +
ul.cont {
 +
z-index:2;
 +
width: 100%;
 +
height: 100%;
 +
float: right;
 +
padding: 0;
 +
}
 +
ul.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;
 +
}
 +
div.card p.card-title {
 +
font-size: 28px;
 +
}
 +
div.card p.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;
 +
}
 +
div.card p.url a {
 +
color: #38c04b;
 +
text-decoration: none;
 +
top: 4px;
 +
width: 250px;
 +
display: block;
 +
position: relative;
}
}
-
a:hover {
+
div.card img.full {
-
text-decoration:underline;
+
width: 100%;
}
}

Revision as of 17:02, 26 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; }

  • {

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:156px; 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:156px; height:45px; text-indent:-9999px; }

  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; } 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 { list-style: none; font:20px Strait; } .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: 2px;
 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 { font-size:16px; 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:18px!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 { display:none; }

  1. cover {

height: 100%; min-width: 800px; height: 500px; background:url() 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;

}

  1. cover h1, #cover p {

display: none; }

  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; } ul.cont { z-index:2; width: 100%; height: 100%; float: right; padding: 0; } ul.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; } div.card p.card-title { font-size: 28px; } div.card p.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; } div.card p.url a { color: #38c04b; text-decoration: none; top: 4px; width: 250px; display: block; position: relative; } div.card img.full { width: 100%; }

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