Team:CityU HK/lablog/project1.css
From 2014.igem.org
(17 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
text-align: center; | text-align: center; | ||
font-size: 2em; | font-size: 2em; | ||
- | font-weight: | + | font-weight: 700; |
- | text-shadow: 3px | + | text-shadow: 0px 3px 2px rgba(0,0,0,0.2); |
+ | color: #676767; | ||
+ | background-color: #fff; | ||
+ | margin: 0; | ||
+ | width:100%; | ||
+ | padding-top: 70px; | ||
+ | padding-bottom: 30px; | ||
} | } | ||
Line 16: | Line 22: | ||
max-width:800px; | max-width:800px; | ||
margin:30px auto; | margin:30px auto; | ||
+ | margin-top:0px; | ||
+ | margin-bottom: 50px; | ||
+ | background-color:#F0EEEA; | ||
} | } | ||
.st-accordion{ | .st-accordion{ | ||
Line 21: | Line 30: | ||
min-width:270px; | min-width:270px; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | padding: 10px | + | padding: 10px 0 10px 0; |
- | + | border-radius: 2px; | |
} | } | ||
.st-accordion ul li{ | .st-accordion ul li{ | ||
Line 29: | Line 38: | ||
border-top:1px solid #fff; | border-top:1px solid #fff; | ||
overflow: hidden; | overflow: hidden; | ||
+ | padding: 0 50px 0 50px; | ||
} | } | ||
.st-accordion ul li:first-child{ | .st-accordion ul li:first-child{ |
Latest revision as of 15:18, 25 September 2014
@import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2');
/* Toggle slide box Style */
- title {
font-family: 'Raleway', sans-serif; text-align: center; font-size: 2em; font-weight: 700; text-shadow: 0px 3px 2px rgba(0,0,0,0.2); color: #676767; background-color: #fff; margin: 0; width:100%; padding-top: 70px; padding-bottom: 30px;
}
/* Flexible Slide-to-top Accordion Style*/ .wrapper{ width:90%; max-width:800px; margin:30px auto;
margin-top:0px; margin-bottom: 50px; background-color:#F0EEEA;
} .st-accordion{
width:100%; min-width:270px; margin: 0 auto; padding: 10px 0 10px 0; border-radius: 2px;
} .st-accordion ul li{
height: 100px; border-bottom: 1px solid #e3e3e3; border-top:1px solid #fff; overflow: hidden; padding: 0 50px 0 50px;
} .st-accordion ul li:first-child{
border-top:none;
} .st-accordion ul li > a{
color: #555555; font-family: 'Raleway',san-serif; font-weight: 300; font-size: 25px; 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; } }