Template:Team:NCTU Formosa/header-home

From 2012.igem.org

(Difference between revisions)
Line 5: Line 5:
*/
*/
-
#cover-wrapper, #abstract-wrapper, #news-wrapper {
+
#cover-wrapper, #abstract-wrapper, #news-wrapper, #sharing-warpper {
background:url(https://static.igem.org/mediawiki/2012/8/84/Px.png) transparent repeat;
background:url(https://static.igem.org/mediawiki/2012/8/84/Px.png) transparent repeat;
-moz-box-shadow:4px 4px 8px 2px rgba(20%,20%,40%,0.5);
-moz-box-shadow:4px 4px 8px 2px rgba(20%,20%,40%,0.5);
Line 15: Line 15:
-moz-border-radius: 3px;
-moz-border-radius: 3px;
padding:10px;
padding:10px;
 +
}
 +
#sharing-wrapper {
 +
height: 80px;
}
}
#cover-wrapper {
#cover-wrapper {
Line 50: Line 53:
}
}
#news-title span {
#news-title span {
 +
display: none;
 +
}
 +
#sharing-title {
 +
width: 307px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/d/db/Subtitle-sharing.png) transparent no-repeat;
 +
}
 +
#sharing-title span {
display: none;
display: none;
}
}
Line 226: Line 237:
margin: 5px 0;
margin: 5px 0;
}
}
-
 
#lbCaption, #lbNumber {
#lbCaption, #lbNumber {
z-index:2;
z-index:2;
margin-right: 71px;
margin-right: 71px;
}
}
-
 
#lbCaption {
#lbCaption {
z-index:2;
z-index:2;
font-weight: bold;
font-weight: bold;
 +
}
 +
.coolHandLuke {
 +
display: inline-block;
 +
margin: 0;
 +
width:160px;
 +
}
 +
.coolHandLuke li,
 +
.coolHandLuke li a,
 +
.coolHandLuke li span {
 +
height:23px;
 +
display: block;
 +
float: left;
 +
}
 +
.coolHandLuke li a {
 +
width: 110px;
 +
}
 +
.coolHandLuke li {
 +
font: 14px/145% helvetica, arial, Sans-serif;
 +
margin-bottom: 25px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
border-radius: 4px;
 +
box-shadow: 1px 7px 2px 0 rgba(0,0,0,0.3);
 +
cursor: pointer;
 +
margin-left: 0px;
 +
-webkit-transition: all 0.1s linear;
 +
-moz-transition: all 0.1s linear;
 +
transition: all 0.1s linear;
 +
}
 +
.coolHandLuke li:first-child {
 +
margin-left: 0;
 +
}
 +
.coolHandLuke li a {
 +
border-left-width: 0;
 +
-moz-border-radius: 0 4px 4px 0;
 +
-webkit-border-radius: 0 4px 4px 0;
 +
border-radius: 0 4px 4px 0;
 +
font-family: 'Helvetica Neue';
 +
font-weight: 500;
 +
color: #838383;
 +
text-shadow: 0 1px 0 #FFF;
 +
padding: 5px 15px;
 +
background: #e7e7f9;
 +
background: -moz-linear-gradient(top, #f7f7f7 0%, #e7e7f9 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e7e7f9));
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.5) inset, 0 5px 0 0 #c4c5d5, 0 1px 0 0 #FFF inset;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.5) inset, 0 5px 0 0 #c4c5d5, 0 1px 0 0 #FFF inset;
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.5) inset, 0 5px 0 0 #c4c5d5, 0 1px 0 0 #FFF inset;
 +
border-bottom-width: 0;
 +
-webkit-transition: all 0.1s linear;
 +
-moz-transition: all 0.1s linear;
 +
transition: all 0.1s linear;
 +
}
 +
.coolHandLuke li span {
 +
-moz-border-radius: 4px 0 0 4px;
 +
-webkit-border-radius: 4px 0 0 4px;
 +
border-radius: 4px 0 0 4px;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #447700;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #447700;
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #447700;
 +
background: #f7f7f7;
 +
background: -moz-linear-gradient(top, #98c100 0%, #659506 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98c100), color-stop(100%,#659506));
 +
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
 +
color: #FFF;
 +
font-weight: bold;
 +
padding: 5px 5px;
 +
-webkit-transition: all 0.1s linear;
 +
-moz-transition: all 0.1s linear;
 +
transition: all 0.1s linear;
 +
}
 +
.coolHandLuke li span.green {
 +
background: #98c100;
 +
background: -moz-linear-gradient(top, #98c100 0%, #659506 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#98c100), color-stop(100%,#659506));
 +
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
 +
}
 +
.coolHandLuke li span.red {
 +
background: #ee706b;
 +
background: -moz-linear-gradient(top, #ee706b 0%, #9c3107 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee706b), color-stop(100%,#9c3107));
 +
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #722300;
 +
 +
}
 +
.coolHandLuke li span.yellow {
 +
background: #ffd800;
 +
background: -moz-linear-gradient(top, #ffd800 0%, #ffb400 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd800), color-stop(100%,#ffb400));
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #c79700;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #c79700;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 5px 0 0 #c79700;
 +
}
 +
 +
 +
.coolHandLuke li:hover a {
 +
background: -moz-linear-gradient(top, #FFFFFF 0%, #e7e7f9 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e7e7f9));
 +
}
 +
.coolHandLuke li:hover span.green {
 +
background: -moz-linear-gradient(top, #abcc00 0%, #659506 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abcc00), color-stop(100%,#659506));
 +
}
 +
.coolHandLuke li:hover span.red {
 +
background: -moz-linear-gradient(top, #f0807c 0%, #9c3107 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0807c), color-stop(100%,#9c3107));
 +
}
 +
.coolHandLuke li:hover span.yellow {
 +
background: -moz-linear-gradient(top, #ffe300 0%, #ffb400 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe300), color-stop(100%,#ffb400));
 +
}
 +
 +
.coolHandLuke li:active {
 +
-webkit-transform: translateY(3px);
 +
-moz-transform: translateY(3px);
 +
transform: translateY(3px);
 +
}
 +
 +
.coolHandLuke li:active a {
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #cecfe0;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #cecfe0;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #cecfe0;
 +
}
 +
.coolHandLuke li:active span {
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #447700;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #447700;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #447700;
 +
}
 +
.coolHandLuke li:active {
 +
box-shadow: 1px 3px 2px 0 rgba(0,0,0,0.3);
 +
-moz-box-shadow: 1px 3px 2px 0 rgba(0,0,0,0.3);
 +
-webkit-box-shadow: 1px 3px 2px 0 rgba(0,0,0,0.3);
 +
}
 +
.coolHandLuke li:active span.red {
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #722300;
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #722300;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #722300;
 +
}
 +
.coolHandLuke li:active span.yellow {
 +
-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #c79700;
 +
-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #c79700;
 +
box-shadow: 0 -1px 0 0 rgba(255,255,255,0.2) inset, 0 2px 0 0 #c79700;
}
}
</style>
</style>

Revision as of 09:49, 15 September 2012

Retrieved from "http://2012.igem.org/Template:Team:NCTU_Formosa/header-home"