Team:NCTU Formosa/css/style

From 2014.igem.org

(Difference between revisions)
 
(116 intermediate revisions not shown)
Line 2: Line 2:
---Calvin Hue
---Calvin Hue
*/
*/
 +
@font-face {
 +
    font-family: arial11;
 +
    src: url(https://googledrive.com/host/0B1ue2WCVGhzBN1pZUTBUSm51NWc/Arvo-Regular.woff);
 +
}
 +
 +
.card a{
 +
color:rgba(255, 153, 0, 1) !important;
 +
color:rgba(255, 153, 0, 1);
 +
text-decoration:underline;
 +
}
 +
 +
#bodyContent a[href^="https://"] {
 +
color:rgba(255, 153, 0, 1) !important;
 +
color:rgba(255, 153, 0, 1);
 +
text-decoration:underline;
 +
}
 +
 +
table {
 +
   
 +
    color: rgba(255, 255, 255, 1);
 +
}
 +
h6{
 +
color: rgba(249, 255, 0, 1);
 +
}
 +
h4 {
 +
font-size: 150%;
 +
text-align:center;
 +
font-family: arial;
 +
color: #FFFC00;
 +
}
 +
.navv{
 +
margin:0px auto;
 +
margin-top:170px;
 +
width:90%
 +
}
 +
 +
h5 {
 +
font-size: 130%;
 +
color: #FFF779;
 +
}
#p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {
#p-logo, #search-controls, #contentSub, .firstHeading, #catlinks {
display: none;
display: none;
Line 7: Line 47:
div.thumb {
div.thumb {
     margin-bottom: 0.5em;
     margin-bottom: 0.5em;
-
     border-color: #F3E8C6;
+
     border-color:rgba(240, 0, 119, 0);
     width: auto;
     width: auto;
 +
color:rgba(0, 0, 0, 1);
}
}
 +
div.thumb div {
 +
    border: 1px solid #CCC;
 +
    padding: 2px;
 +
    background-color: #5C5C5C;
 +
    font-size: 94%;
 +
    text-align: center;
 +
    overflow: hidden;
 +
color:white;
 +
}
 +
 +
#footer-box {  
#footer-box {  
width: auto;
width: auto;
Line 53: Line 105:
#menubar li a, #menubar li {
#menubar li a, #menubar li {
backgound: none!important;
backgound: none!important;
-
color:black!important;
+
color:rgba(0, 174, 243, 1) !important;
font:10px Quicksand;
font:10px Quicksand;
font-weight:400;
font-weight:400;
Line 91: Line 143:
p {
p {
margin: 0px!important;
margin: 0px!important;
-
text-align: justify;
+
//text-align: justify;
}
}
ul.side {
ul.side {
Line 139: Line 191:
}
}
#toc td > ul {
#toc td > ul {
-
background:url(https://static.igem.org/mediawiki/2014/f/f6/Nctu-show-arrow.png) transparent top center no-repeat;
+
    -webkit-border-radius: 10px;
-
background-color: white;
+
    -moz-border-radius: 10px;
 +
    border-radius: 14px;
 +
background: url('https://static.igem.org/mediawiki/2014/0/0f/NCTUarrows1.png') no-repeat scroll right top rgba(6, 0, 0, 1);
 +
}
}
}
td>ul {
td>ul {
Line 167: Line 222:
//border-right:5px solid #D49E88;
//border-right:5px solid #D49E88;
color:#76321B!important;
color:#76321B!important;
-
font-family:Quicksand;
+
font-family:arial;
font-weight:700;
font-weight:700;
-webkit-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
Line 257: Line 312:
top:0px;
top:0px;
width:100%;
width:100%;
-
height:183px;
+
height:292px;
margin:0;
margin:0;
padding:0 0 0 0;
padding:0 0 0 0;
Line 264: Line 319:
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;
 +
        background-image : url("https://static.igem.org/mediawiki/2014/e/e8/Header1.jpg");
 +
background-size: contain;
 +
background-repeat: no-repeat;
 +
background-position : top center ;
 +
}
-
Ultimate CSS Gradient Generator
+
#header-wrapper2 {
-
 
+
top:0px;
-
A powerful Photoshop-like CSS gradient editor from ColorZilla.
+
width:100%;
-
 
+
height:292px;
-
    For Firefox
+
margin:0;
-
    For Chrome
+
padding:0 0 0 0;
-
    Gradient Generator
+
-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);
-
Name:
+
box-shadow:0px 0px 15px 4px rgba(20%,20%,40%,0.7);
-
Stops
+
overflow: visible;
-
Opacity:
+
        background-image : url("https://static.igem.org/mediawiki/2014/3/33/HeaderINDEX.png.JPG");
-
Location: %
+
background-size: cover;
-
Color:
+
background-repeat: no-repeat;
-
Location: %
+
background-position : top center ;
-
Adjustments
+
-
Sponsor
+
-
Attend our 12-week immersive JavaScript Coding School.
+
-
Preview
+
-
Orientation: Size: x IE
+
-
CSS
+
-
switch to scss
+
-
background: -moz-linear-gradient(top, rgba(69,72,77,0.98) 0%, rgba(2,2,2,0.99) 28%, rgba(7,37,51,1) 79%, rgba(8,45,61,1) 90%, rgba(8,45,61,1) 100%); /* FF3.6+ */
+
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.98)), color-stop(28%,rgba(2,2,2,0.99)), color-stop(79%,rgba(7,37,51,1)), color-stop(90%,rgba(8,45,61,1)), color-stop(100%,rgba(8,45,61,1))); /* Chrome,Safari4+ */
+
-
background: -webkit-linear-gradient(top, rgba(69,72,77,0.98) 0%,rgba(2,2,2,0.99) 28%,rgba(7,37,51,1) 79%,rgba(8,45,61,1) 90%,rgba(8,45,61,1) 100%); /* Chrome10+,Safari5.1+ */
+
-
background: -o-linear-gradient(top, rgba(69,72,77,0.98) 0%,rgba(2,2,2,0.99) 28%,rgba(7,37,51,1) 79%,rgba(8,45,61,1) 90%,rgba(8,45,61,1) 100%); /* Opera 11.10+ */
+
-
background: -ms-linear-gradient(top, rgba(69,72,77,0.98) 0%,rgba(2,2,2,0.99) 28%,rgba(7,37,51,1) 79%,rgba(8,45,61,1) 90%,rgba(8,45,61,1) 100%); /* IE10+ */
+
-
background: linear-gradient(to bottom, rgba(69,72,77,0.98) 0%,rgba(2,2,2,0.99) 28%,rgba(7,37,51,1) 79%,rgba(8,45,61,1) 90%,rgba(8,45,61,1) 100%); /* W3C */
+
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa45484d', endColorstr='#082d3d',GradientType=0 ); /* IE6-9 */
+
-
 
+
-
 
+
}
}
#header{
#header{
width:100%;
width:100%;
-
max-width:1200px;
+
max-width:1480px;
height:56px;
height:56px;
margin:0 auto;
margin:0 auto;
Line 306: Line 350:
#title {
#title {
width:850px;
width:850px;
-
height:85px;
+
height:167px;
text-indent:-9999px;
text-indent:-9999px;
     margin: 0 auto;
     margin: 0 auto;
margin-bottom:9px;
margin-bottom:9px;
-
background:url(https://static.igem.org/mediawiki/2014/9/9d/NCTULOGO.jpg) transparent top center no-repeat;
 
-
border-radius:3px;
 
}
}
#title a {
#title a {
display:block;
display:block;
-
width:193px;
+
width:100%;
-
height:56px;
+
height:200px;
text-indent:-9999px;
text-indent:-9999px;
-webkit-transition: .7s;
-webkit-transition: .7s;
Line 326: Line 368:
}
}
-
#igemlogo a {
+
#igemlogo a,#igemlogo2 a,#igemlogo3 a{
display:block;
display:block;
background-size: 40px 40px;
background-size: 40px 40px;
background-repeat:no-repeat;
background-repeat:no-repeat;
background-position: 8px 8px;
background-position: 8px 8px;
-
width:56px;
+
width:40px;
-
height:56px;
+
height:46px;
text-indent:-9999px;
text-indent:-9999px;
-webkit-transition: .7s;
-webkit-transition: .7s;
Line 341: Line 383:
}
}
h3 {
h3 {
-
background-color: #F26929;
+
background-color: rgba(229, 255, 57, 1);
border-bottom: 2px solid #bbb;
border-bottom: 2px solid #bbb;
padding-left: 10px;
padding-left: 10px;
border-radius: 3px;
border-radius: 3px;
 +
font-size:200%;
 +
box-shadow: 0px 0px 12px 5px #FFF;
}
}
-
h4, h3, h5 {
+
h4, h3, h5,p {
clear: both;
clear: both;
 +
font-family: arial;
}
}
h3 span.mw-headline {
h3 span.mw-headline {
-
padding-top: 103px;
+
//padding-top: 103px;
}
}
h4 span.mw-headline, h5 span.mw-headline {
h4 span.mw-headline, h5 span.mw-headline {
-
padding-top: 73px;
+
//padding-top: 73px;
}
}
#main-wrapper {
#main-wrapper {
float:left;
float:left;
-
width:auto;
+
width:100%!important;
min-height:100%;
min-height:100%;
margin:0 auto;
margin:0 auto;
Line 366: Line 411:
-webkit-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);
box-shadow:0px 0px 12px 2px rgba(20%,20%,40%,0.5);
 +
    background-color:#888;
}
}
#main {
#main {
Line 409: Line 455:
#cover #ctitle {
#cover #ctitle {
color: #000000 ;
color: #000000 ;
-
font-family: Lobster Two;
+
font-family: arial;
font-size: 60px;
font-size: 60px;
font-weight: bold;
font-weight: bold;
Line 418: Line 464:
#cover p {
#cover p {
color:white;
color:white;
-
font-family: Open Sans;
+
font-family: arial;
font-size: 20px;
font-size: 20px;
margin-top: 20px!important;
margin-top: 20px!important;
Line 436: Line 482:
overflow-x: hidden;
overflow-x: hidden;
    
    
-
  background-color : #082D3D ;
+
  background-color : #D0D0D0 ;
}
}
Line 476: Line 522:
}
}
.cont > .li > .card {
.cont > .li > .card {
-
width:865px;
+
width:75%;
 +
}
 +
 
 +
.link{
 +
color:gray!important;
}
}
div.card {
div.card {
//width:865px;
//width:865px;
margin: 0 auto;
margin: 0 auto;
-
background: #F3E8C6;
+
background: #133453;
position: relative;
position: relative;
padding: 15px;
padding: 15px;
right:30px;
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: arial;
-
color: #5D0D0D;
+
color: #FFF;
-
font-size: 14px;
+
font-size: 120%;
-moz-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-radius: 2px;
 +
box-shadow: 0px 0px 12px 7px #FFF;
}
}
 +
.card p > b, .card li > b {
.card p > b, .card li > b {
/*background-color: #FFFF66;
/*background-color: #FFFF66;
Line 498: Line 550:
padding-right:5px;
padding-right:5px;
border-radius:3px;*/
border-radius:3px;*/
-
color: #007FFF;
+
color: #FFC700;
font-weight:700;
font-weight:700;
}
}
Line 506: Line 558:
div.card p {
div.card p {
margin: 0 0 15px 0!important;
margin: 0 0 15px 0!important;
 +
text-align:justify;
 +
text-justify:auto;
}
}
-
div.card h3 {
+
 
-
font-size: 28px;
+
}
}
 +
div.card span.url {
div.card span.url {
border-top: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
Line 535: Line 589:
max-width:100%;
max-width:100%;
max-height:100%;
max-height:100%;
 +
border: 1px solid rgba(255, 255, 255, 0);
}
}
.card p {
.card p {
Line 604: Line 659:
}
}
.floatnone {
.floatnone {
-
border:1px solid white;
+
border: 1px solid rgba(255, 255, 255, 0);
border-radius:5px;
border-radius:5px;
-webkit-transition: .5s;
-webkit-transition: .5s;
Line 613: Line 668:
text-decoration: none!important;
text-decoration: none!important;
}
}
-
.floatnone:hover {
+
 
-
border:1px solid lightgrey;
+
-
}
+
.flotenone .image:hover {
.flotenone .image:hover {
text-decoration:none;
text-decoration:none;
Line 680: Line 733:
bottom:-30px;
bottom:-30px;
left:-30px;
left:-30px;
-
background:#fff;
+
background:#000;
width:100px;
width:100px;
height:100px;
height:100px;
Line 711: Line 764:
line-height:100px;
line-height:100px;
text-align:center;
text-align:center;
 +
color:white!important;
}
}
#back-top a {
#back-top a {
Line 718: Line 772:
font-size:14px;
font-size:14px;
color:#686868!important;
color:#686868!important;
-
font-family:Quicksand;
+
font-family: arial;
font-weight:700;
font-weight:700;
-webkit-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
Line 726: Line 780:
}
}
#back-top li a:hover {
#back-top li a:hover {
-
background:#efefef;
+
background:#000;
-
color:red!important;
+
color: #FF9C08 !important;
text-decoration:none;
text-decoration:none;
}
}
Line 756: Line 810:
     display: none!important;
     display: none!important;
}
}
 +
 +
 +
 +
#abgne-block-20120327 {
 +
width: 640px;
 +
margin:0px auto
 +
}
 +
#abgne-block-20120327 ul, #abgne-block-20120327 li {
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#abgne-block-20120327 .tabs li {
 +
float: left;
 +
margin: 0 0 -1px 5px;
 +
border: 1px solid #ddd;
 +
background: #fafafa;
 +
height: 32px;
 +
cursor: pointer;
 +
border-radius: 5px 5px 0 0;
 +
}
 +
#abgne-block-20120327 .tabs li.active {
 +
background: #fff;
 +
padding-bottom: 1px;
 +
border-bottom: none;
 +
}
 +
#abgne-block-20120327 .tabs li.hover{
 +
background: #f5f5f5;
 +
}
 +
#abgne-block-20120327 .tabs span {
 +
display: block;
 +
float: left;
 +
overflow: hidden;
 +
padding: 7px 15px 5px 15px;
 +
}
 +
#abgne-block-20120327 .tab_container {
 +
clear: both;
 +
border: 1px solid #DDD;
 +
background: #fff;
 +
overflow: hidden;
 +
border-radius: 5px;
 +
}
 +
#abgne-block-20120327 .tab_container ul {
 +
position: relative;
 +
height: 320px;
 +
overflow: hidden;
 +
}
 +
#abgne-block-20120327 .tab_container .tab_content li {
 +
position: absolute;
 +
width: 610px;
 +
height: 100%;
 +
padding: 15px;
 +
margin-top: 10px;
 +
background: #fff;
 +
}
 +
#abgne-block-20120327 .tab_container .tab_content li img {
 +
display: block;
 +
float: left;
 +
margin-right: 15px;
 +
}
 +
#abgne-block-20120327 .tab_container .tab_content li .tab_title {
 +
font-size: 22px;
 +
line-height: 22px;
 +
margin: 5px 0 15px;
 +
}
 +
 +
<script>
 +
$(function(){
 +
// 預設顯示第一個頁籤
 +
// 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出
 +
// 同時也要取得 .tab_content 的寬
 +
var _default = 0,
 +
$block = $('#abgne-block-20120327'),
 +
$tabs = $block.find('.tabs'),
 +
$tabsLi = $tabs.find('li'),
 +
$tab_content = $block.find('.tab_content'),
 +
$tab_contentLi = $tab_content.find('li'),
 +
_width = $tab_content.width();
 +
 +
// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式
 +
// 移出時要移除 .hover 樣式
 +
$tabsLi.hover(function(){
 +
var $this = $(this);
 +
 +
// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
 +
if($this.hasClass('active')) return;
 +
 +
$this.toggleClass('hover');
 +
}).click(function(){ // 當滑鼠點擊 .tabs li 時
 +
// 先取出被點擊及目前顯示的頁籤與索引
 +
var $active = $tabsLi.filter('.active').removeClass('active'),
 +
_activeIndex = $active.index(), 
 +
$this = $(this).addClass('active').removeClass('hover'),
 +
_index = $this.index(),
 +
isNext = _index > _activeIndex;
 +
 +
// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
 +
if(_activeIndex == _index) return;
 +
 +
// 依索引大或小來決定移動的位置
 +
$tab_contentLi.eq(_activeIndex).stop().animate({
 +
left: isNext ? -_width : _width
 +
}).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
 +
left: 0
 +
});
 +
});
 +
 +
// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
 +
$tabsLi.eq(_default).addClass('active');
 +
$tab_contentLi.eq(_default).siblings().css({
 +
left: _width
 +
});
 +
});
 +
</script>
 +
 +
 +
 +
 +
 +
 +
@charset "UTF-8";
 +
/*
 +
CSS By Away
 +
http://www.dfuns.idv.tw
 +
*/

Latest revision as of 00:00, 18 October 2014

/* ---Calvin Hue

  • /

@font-face { 

   font-family: arial11;
   src: url(https://googledrive.com/host/0B1ue2WCVGhzBN1pZUTBUSm51NWc/Arvo-Regular.woff);

}

.card a{ color:rgba(255, 153, 0, 1) !important; color:rgba(255, 153, 0, 1); text-decoration:underline; }

  1. bodyContent a[href^="https://"] {

color:rgba(255, 153, 0, 1) !important; color:rgba(255, 153, 0, 1); text-decoration:underline; }

table { 

   color: rgba(255, 255, 255, 1);

} h6{ color: rgba(249, 255, 0, 1); } h4 { 

font-size: 150%;

text-align:center; 

font-family: arial;

color: #FFFC00; } .navv{ margin:0px auto; margin-top:170px; width:90% }

h5 { 

font-size: 130%;

color: #FFF779; }

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

display: none; } div.thumb { 

   margin-bottom: 0.5em;
   border-color:rgba(240, 0, 119, 0);
   width: auto;

color:rgba(0, 0, 0, 1); } div.thumb div { 

   border: 1px solid #CCC;
   padding: 2px;
   background-color: #5C5C5C;
   font-size: 94%;
   text-align: center;
   overflow: hidden;

color:white; }


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

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:rgba(0, 174, 243, 1) !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 {

background-color: transparent!important; z-index:22; position: absolute; left: -465px; top: 0px; border: 0!important; -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); }

  1. toc {

margin-left: 0px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }

  1. toc:hover {

margin-left: 251px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }

  1. toctitle {

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

}

  1. toc ul, .toc ul { 
   margin: 0!important;

width:300px; }

  1. toc td > ul { 
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 14px;

background: url('https://static.igem.org/mediawiki/2014/0/0f/NCTUarrows1.png') no-repeat scroll right top rgba(6, 0, 0, 1); } } td>ul { position:relative; background:#fff; width:250px; margin:auto; padding:0; list-style: none; overflow:hidden; }

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; //background : #D49E88 ; //hahaa //border-right:5px solid #D49E88; color:#76321B!important; font-family:arial; 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 { //color:#D49E88!important; // background:#76321B; //border-right:5px solid #76321B; text-decoration:none; }

td ul li.active a { //border-right:5px solid #76321B; color:#D49E88!important; //background:#76321B; text-decoration:none; }

  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 {

font:14px helvetica, arial, Sans-serif; overflow-x:hidden; 

   background-color: #FFFFFF;

}

} a { text-decoration:none; } a img { border: none; } ul, li { margin:0; padding:0; }

  1. top-section {

height: auto!important; }

  1. header-wrapper {

top:0px; width:100%; height:292px; 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; 

       background-image : url("Header1.jpg");

background-size: contain; background-repeat: no-repeat; background-position : top center ; }

  1. header-wrapper2 {

top:0px; width:100%; height:292px; 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; 

       background-image : url("HeaderINDEX.png.JPG");

background-size: cover; background-repeat: no-repeat; background-position : top center ; }

  1. header{

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

  1. title {

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

   margin: 0 auto;

margin-bottom:9px; }

  1. title a {

display:block;

width:100%; height:200px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; }

  1. igemlogo a,#igemlogo2 a,#igemlogo3 a{

display:block; background-size: 40px 40px; background-repeat:no-repeat; background-position: 8px 8px; width:40px; height:46px; text-indent:-9999px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } h3 { background-color: rgba(229, 255, 57, 1); border-bottom: 2px solid #bbb; padding-left: 10px; border-radius: 3px; font-size:200%; box-shadow: 0px 0px 12px 5px #FFF; } h4, h3, h5,p { clear: both; 

font-family: arial;

} 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%!important; min-height:100%; margin:0 auto; 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); 

   background-color:#888;

}

  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 {

display:none; height: 100%; //min-width: 800px; height: 130px; 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; margin-left:50px; margin-right:50px; }

  1. cover #ctitle {

color: #000000 ; font-family: arial; font-size: 60px; font-weight: bold; border-bottom: 1px solid lightgrey; padding-bottom: 10px; }

  1. cover p {

color:white; font-family: arial; 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{

width:100%; overflow-x: hidden; 

background-color : #D0D0D0 ;

}

  1. cr{

margin-left: 35px; 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; } .cont > .li > .card { width:75%; }

.link{ color:gray!important; } div.card { //width:865px; margin: 0 auto; background: #133453; position: relative; padding: 15px; right:30px; box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); font-family: arial; color: #FFF; font-size: 120%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; box-shadow: 0px 0px 12px 7px #FFF; }

.card p > b, .card li > b { /*background-color: #FFFF66; padding-left:5px; padding-right:5px; border-radius:3px;*/ color: #FFC700; font-weight:700; } ul.side div.card { width: 250px; } div.card p { margin: 0 0 15px 0!important; text-align:justify; text-justify:auto; }

}

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%; border: 1px solid rgba(255, 255, 255, 0); } .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 {

display:none; z-index:3; hight:10pt float:right; position:absolute; 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: black; } .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 rgba(255, 255, 255, 0); border-radius:5px; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; text-decoration: none!important; }

.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:#000; 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; color:white!important; }

  1. back-top a {

text-decoration:none; text-transform:uppercase; font-size:14px; color:#686868!important; font-family: arial; 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:#000; color: #FF9C08 !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;

}


  1. abgne-block-20120327 {

width: 640px; margin:0px auto }

  1. abgne-block-20120327 ul, #abgne-block-20120327 li {

list-style: none; margin: 0; padding: 0; }

  1. abgne-block-20120327 .tabs li {

float: left; margin: 0 0 -1px 5px; border: 1px solid #ddd; background: #fafafa; height: 32px; cursor: pointer; border-radius: 5px 5px 0 0; }

  1. abgne-block-20120327 .tabs li.active {

background: #fff; padding-bottom: 1px; border-bottom: none; }

  1. abgne-block-20120327 .tabs li.hover{

background: #f5f5f5; }

  1. abgne-block-20120327 .tabs span {

display: block; float: left; overflow: hidden; padding: 7px 15px 5px 15px; }

  1. abgne-block-20120327 .tab_container {

clear: both; border: 1px solid #DDD; background: #fff; overflow: hidden; border-radius: 5px; }

  1. abgne-block-20120327 .tab_container ul {

position: relative; height: 320px; overflow: hidden; }

  1. abgne-block-20120327 .tab_container .tab_content li {

position: absolute; width: 610px; height: 100%; padding: 15px; margin-top: 10px; background: #fff; }

  1. abgne-block-20120327 .tab_container .tab_content li img {

display: block; float: left; margin-right: 15px; }

  1. abgne-block-20120327 .tab_container .tab_content li .tab_title {

font-size: 22px; line-height: 22px; margin: 5px 0 15px; }

<script> $(function(){ // 預設顯示第一個頁籤 // 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出 // 同時也要取得 .tab_content 的寬 var _default = 0, $block = $('#abgne-block-20120327'), $tabs = $block.find('.tabs'), $tabsLi = $tabs.find('li'), $tab_content = $block.find('.tab_content'), $tab_contentLi = $tab_content.find('li'), _width = $tab_content.width();

// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式 // 移出時要移除 .hover 樣式 $tabsLi.hover(function(){ var $this = $(this);

// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作 if($this.hasClass('active')) return;

$this.toggleClass('hover'); }).click(function(){ // 當滑鼠點擊 .tabs li 時 // 先取出被點擊及目前顯示的頁籤與索引 var $active = $tabsLi.filter('.active').removeClass('active'), _activeIndex = $active.index(), $this = $(this).addClass('active').removeClass('hover'), _index = $this.index(), isNext = _index > _activeIndex;

// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作 if(_activeIndex == _index) return;

// 依索引大或小來決定移動的位置 $tab_contentLi.eq(_activeIndex).stop().animate({ left: isNext ? -_width : _width }).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({ left: 0 }); });

// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容 $tabsLi.eq(_default).addClass('active'); $tab_contentLi.eq(_default).siblings().css({ left: _width }); }); </script>




@charset "UTF-8"; /* CSS By Away http://www.dfuns.idv.tw 

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