Team:Paris-Saclay/st-accordion.css

From 2012.igem.org

/* Flexible Slide-to-top Accordion Style*/

  1. accordeon .wrapper{

width:90%; max-width:800px; margin:30px auto; }

  1. accordeon .st-accordion{
   width:100%;
   min-width:270px;
   margin: 0 auto;

}

  1. accordeon .st-accordion > ul > li{
   border-bottom: 1px solid #c7deef;
   border-top:1px solid #fff;
   overflow: hidden;

}

  1. accordeon .st-accordion > ul li:first-child{
   border-top:none;

}

  1. accordeon .st-accordion > ul li > a{
   font-family: 'Josefin Slab',Georgia, serif;
   text-shadow: 1px 1px 1px #fff;
   font-size: 40px;
   display: block;

position: relative;

   line-height: 80px;

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

  1. accordeon .st-accordion ul li > a span{

background: transparent url(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; }

  1. accordeon .st-accordion ul li > a:hover{
   color: #1693eb;

}

  1. accordeon .st-accordion ul li > a:hover span{

opacity:1; right: 10px; }

  1. accordeon .st-accordion ul li.st-open > a{
   color: #1693eb;

}

  1. accordeon .st-accordion ul li.st-open > a span{

-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);

   transform:rotate(180deg);

right:10px; opacity:1; }

  1. accordeon .st-content{
   padding: 5px 0px 30px 0px;

}

  1. accordeon .st-content p{
   font-size:  12pt;
   font-family:  calibri;
   line-height:  28px;
   padding: 0px 4px 15px 4px; 

}

  1. accordeon .st-content ol{
   font-size:  12pt;
   font-family:  calibri;
   padding: 0px;
   list-style-image: none;
   margin: 0.3em 0px 0px 3.2em;
   line-height: 1.5em;
   list-style-type : circle;

}

  1. accordeon .st-content li{

border:0; }