Team:CityU HK/lablog/project1.css

From 2014.igem.org

Revision as of 06:58, 7 September 2014

@import url('https://2014.igem.org/Team:CityU_HK/lablog/project1.css2');

/* General Demo Style */ body{ background:#f7f7f7 url(../images/pattern.png) repeat top left; color:#000; font-family: 'Arial Narrow', Arial, sans-serif; font-size:13px; min-height:2000px; } a{ color:#000; text-decoration:none; } .clr{ clear:both; } h1{ padding:20px; font-size:28px; color:#333; font-family: 'Josefin Slab',Georgia, serif; font-weight:400;

   text-align:center;
   text-shadow:1px 1px 1px #fff;

} h1 span{ font-size:18px; color:#1693eb; } .more{ font-family: 'Josefin Slab',Georgia, 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{ 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{

   height: 100px;
   border-bottom: 1px solid #c7deef;
   border-top:1px solid #fff;
   overflow: hidden;

} .st-accordion ul li:first-child{

   border-top:none;

} .st-accordion ul li > a{

   font-family: 'Josefin Slab',Georgia, serif;
   text-shadow: 1px 1px 1px #fff;
   font-size: 46px;
   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(../images/down.png) 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: #1693eb;

} .st-accordion ul li > a:hover span{ opacity:1; right: 10px; } .st-accordion ul li.st-open > a{

   color: #1693eb;

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