@charset 'utf-8';

/****************************************** Core */
.accordion { text-align: left; }
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 { color: black; font-weight: bold; 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: 5px; }
.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; }


/****************************************** Dark */
.dark { border: 9px solid #FFF; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #CCC;}
.dark li > h2 { background: #CCC; font-size: 16px; line-height: 2.7em;}
.dark li > h2 span { background: #FFF; color: #333; }
.dark li > h2 b { background: #353535\9; color: #FFF; font-size: 20px;}
.dark h2.selected span, .dark h2.selected span:hover { background: #999; }
.dark h2.selected b { background: #434343\9; }
.dark li > div { background: #CCC; margin-left: 5px; }

.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

