"
Team:NCTU Formosa/css/style
From 2013.igem.org
| Line 281: | Line 281: | ||
padding: 0; | padding: 0; | ||
} | } | ||
| - | ul.cont li { | + | ul.cont .li { |
width: 100%; | width: 100%; | ||
float: left; | float: left; | ||
| Line 325: | Line 325: | ||
position: relative; | position: relative; | ||
} | } | ||
| - | div.card img | + | div.card img { |
width: 100%; | width: 100%; | ||
} | } | ||
Revision as of 18:06, 26 August 2013
/* ---Calvin Hue
- /
- p-logo, #search-controls, #top-section, #contentSub, #footer-box, .firstHeading, #catlinks {
display: none; }
- content {
background: transparent; padding: 0; width: 100%; border: 0px; line-height:normal!important; }
- globalWrapper {
font-size:100%!important; } p { margin: 0px!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; }
- header-wrapper {
position: fixed;
z-index:9;
top:0px;
width:100%;
height:68px;
background:url(
) 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 {
width:156px; height:57px; text-indent:-9999px; padding-top: 12px; margin-left: 30px; }
- title a {
display:block;
background:url(
) transparent top left no-repeat;
width:156px;
height:45px;
text-indent:-9999px;
}
- 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; 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(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;
}
- 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!important; } 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!important; } div.card p.url a { color: #38c04b; text-decoration: none; top: 4px; width: 250px; display: block; position: relative; } div.card img { width: 100%; }
