@charset 'utf-8'; /************************************************* * * project: liteAccordion - horizontal accordion plugin for jQuery * author: Amir anoosheh * url: http://jDesign.ir * demo: http://jdesign.ir/admin-up/demo-free-cods/jDesign_slider_7/index.html * /*************************************************/ @font-face { font-family: 'amir'; src: url('fonts/amir.eot?#') format('eot'), /* IE6–8 */ url('fonts/amir.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/amir.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */ } body { background: url(bg.jpg) 0 0 repeat; } /****************************************** Core */ .jDesign_info { text-align:right; font-size:small; direction:rtl; font-family: Tahoma; padding:6px; margin-right: 200px; margin-left: 200px; border: 5px solid #006CD9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #ac987e; -moz-box-shadow: 0px 0px 5px #ac987e; box-shadow: 0px 0px 5px #ac987e; } .jDesign_info a {color: #006CD9;text-decoration: none;} .jDesign_info a:hover {color:#fff;background:#006CD9;text-shadow:2px 1px 3px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:2px;-webkit-transition-property:background;-webkit-transition-duration:.3s;-webkit-transition-timing-function:linear, ease-in;-moz-transition:background .3s ease-in;-o-transition:background .3s ease-in;} jDesign { display: block; width: 100%; height: 100%; margin: 0 } jDesign_slider { font-family:tahoma;direction:rtl;padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px } .accordion { text-align: left; font: amir; } .accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; } .accordion li > h2 { font-family:amir;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: 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; } /****************************************** 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: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); } .dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; } .dark li > h2 span { background: #353535; color: white; font-family:amir;font-size: 25px;} .dark li > h2 b { background: #353535\9; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; } .dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); } .dark h2.selected b { background: #434343\9; } .dark li > div { background: #030303; margin-left: 5px; } /*************************************** Rounded */ .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; }