Team:CityU HK/lablog/project1.css
From 2014.igem.org
Line 11: | Line 11: | ||
} | } | ||
- | .more{ | + | /*.more{ |
font-family: 'Raleway',san-serif; | font-family: 'Raleway',san-serif; | ||
margin:0 auto; | margin:0 auto; | ||
Line 41: | Line 41: | ||
background-color:#1693eb; | background-color:#1693eb; | ||
color:#fff; | color:#fff; | ||
- | } | + | }*/ |
/* Header Style */ | /* Header Style */ | ||
.header{ | .header{ |
Revision as of 07:13, 21 September 2014
@import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2');
/* General Demo Style */
- title {
font-family: 'Raleway', sans-serif; text-align: center; font-size: 3.5em; font-weight: 500; text-shadow: 3px 3px 3px #dddddd;
}
/*.more{ font-family: 'Raleway',san-serif; margin:0 auto; text-align:center; color:#ddd; font-size:15px; color:#444; } .more p{ display:block; margin:10px; } .more a{ color:#666; white-space: nowrap; font-weight:bold; background:#fff; padding:1px 6px; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); box-shadow:1px 1px 2px rgba(0,0,0,0.2); } .more a.current, .more a.current:hover{ color:#fff; background:#000; } .more a:hover{ background-color:#1693eb; color:#fff; }*/ /* Header Style */ .header{ font-family: 'Raleway',san-serif; line-height:24px; font-size:11px; background:#000; opacity:0.9; text-transform:uppercase; z-index:4; -moz-box-shadow:1px 0px 2px #000; -webkit-box-shadow:1px 0px 2px #000; box-shadow:1px 0px 2px #000; } .header a{ padding:0px 10px; letter-spacing:1px; color:#ddd; display:block; float:left; } .header a:hover{ color:#fff; } .header span.right{ float:right; } .header span.right a{ float:none; display:inline; }
/* Flexible Slide-to-top Accordion Style*/
.wrapper{
width:90%;
max-width:800px;
margin:30px auto;
}
.st-accordion{
width:100%; min-width:270px; margin: 0 auto;
} .st-accordion ul li{
color: c0c0c0; height: 100px; border-bottom: 1px solid #e3e3e3; border-top:1px solid #fff; overflow: hidden;
} .st-accordion ul li:first-child{
border-top:none;
} .st-accordion ul li > a{
font-family: 'Raleway',san-serif; font-size: 30px; display: block;
position: relative;
line-height: 100px;
outline:none;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .st-accordion ul li > a span{ background: transparent url() no-repeat center center; text-indent:-9000px; width: 26px; height: 14px; position: absolute; top: 50%; right: -26px; margin-top: -7px; opacity:0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .st-accordion ul li > a:hover{
color: #40e0d0;
} .st-accordion ul li > a:hover span{ opacity:1; right: 10px; } .st-accordion ul li.st-open > a{
color: #40e0d0;
} .st-accordion ul li.st-open > a span{ -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);
transform:rotate(180deg);
right:10px; opacity:1; } .st-content{
padding: 5px 0px 30px 0px;
} .st-content p{
font-size: 16px; font-family: Georgia, serif; font-style: italic; line-height: 28px; padding: 0px 4px 15px 4px;
} .st-content img{
width:125px; border-right:1px solid #fff; border-bottom:1px solid #fff;
} @media screen and (max-width: 320px){ .st-accordion ul li > a{ font-size:36px; } }