Team:WITS-CSIR SA/css/liteaccordion.css

From 2011.igem.org

Revision as of 11:54, 3 September 2011 by Nkruger (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@charset 'utf-8'; /*************************************************

project: liteAccordion - horizontal accordion plugin for jQuery
author: Nicola Hibbert
url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
demo: http://www.nicolahibbert.com/demo/liteAccordion

/*************************************************/ /****************************************** Core */ .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; } .accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; } .accordion li > h2 { color: black; font-weight: normal; margin: 0; z-index: 2; position: absolute; top: 0; left: 0; -webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg); -o-transform-origin: right top; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 0px; } .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion li > h2:hover { cursor: pointer; } .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; } .accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */ .basic li > h2 { background: #333; color: white; line-height: 1.8em; } .basic li > div h3 { margin: 15px 10px; } .basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */ .dark { border-top: 1px solid #3C5792; padding: 0; background: transparent; } .dark li > h2 { background: #3C5792; font-size: 16px; line-height: 2.7em; font-weight: bold; } .dark li > h2 span { background: -webkit-gradient(linear, left top, right top, color-stop(0, #3C5792), color-stop(1, #627AAD)); background: -moz-linear-gradient(top left, #3C5792 0%, #627AAD 100%); color: white; } .dark li > h2 b { background: #353535\9; color: whitesmoke; font-size: 20px; font-weight: bold;} .dark h2.selected span, .dark h2.selected span:hover { background: #3C5792; background: -webkit-gradient(linear, left top, right top, color-stop(0, #3C5792), color-stop(1, #627AAD)); background: -moz-linear-gradient(top left, #3C5792 0%, #627AAD 100%); } .dark h2.selected b { background: #434343\9; color: whitesmoke; } .dark li > div { background: #3C5792; margin-left: 5px; }

figcaption {

   position: relative;
   top: -36px;
   background-color: transparent;
   padding:5px;
   width:719px;

}

figure {

   position: relative;
   top:-15px;

}