| 1 | @charset 'utf-8';
|
|---|
| 2 | /*************************************************!
|
|---|
| 3 | *
|
|---|
| 4 | * project: liteAccordion - a horizontal accordion plugin for jQuery
|
|---|
| 5 | * author: Nicola Hibbert
|
|---|
| 6 | * url: http://nicolahibbert.com/liteaccordion-v2/
|
|---|
| 7 | * demo: http://www.nicolahibbert.com/demo/liteAccordion/
|
|---|
| 8 | *
|
|---|
| 9 | * Version: 2.2.0
|
|---|
| 10 | * Copyright: (c) 2010-2013 Nicola Hibbert
|
|---|
| 11 | * Licence: MIT
|
|---|
| 12 | *
|
|---|
| 13 | **************************************************/
|
|---|
| 14 | /****************************************** Core */
|
|---|
| 15 | .liteAccordion {
|
|---|
| 16 | text-align: left;
|
|---|
| 17 | font-size: 16px;
|
|---|
| 18 | line-height: 24px;
|
|---|
| 19 | font: 'Helvetica Neue', Verdana, Arial, sans-serif;
|
|---|
| 20 | -webkit-backface-visibility: hidden;
|
|---|
| 21 | -webkit-perspective: 1000;
|
|---|
| 22 | -webkit-tap-highlight-color: transparent;
|
|---|
| 23 | }
|
|---|
| 24 | .liteAccordion, .liteAccordion * { padding: 0; margin: 0; border: 0; box-sizing: content-box }
|
|---|
| 25 | .liteAccordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
|
|---|
| 26 | .liteAccordion > ol > li { list-style-type: none }
|
|---|
| 27 | .liteAccordion .slide > h2 {
|
|---|
| 28 | color: black;
|
|---|
| 29 | font-size: 16px;
|
|---|
| 30 | font-weight: normal;
|
|---|
| 31 | margin: 0;
|
|---|
| 32 | z-index: 100;
|
|---|
| 33 | position: absolute;
|
|---|
| 34 | top: 0;
|
|---|
| 35 | left: 0;
|
|---|
| 36 | -webkit-backface-visibility: hidden; /* fixes chrome bug */
|
|---|
| 37 | -webkit-transform: translateX(-100%) rotate(-90deg);
|
|---|
| 38 | -webkit-transform-origin: right top;
|
|---|
| 39 | -moz-transform: translateX(-100%) rotate(-90deg);
|
|---|
| 40 | -moz-transform-origin: right top;
|
|---|
| 41 | -o-transform: translateX(-100%) rotate(-90deg);
|
|---|
| 42 | -o-transform-origin: right top;
|
|---|
| 43 | transform: translateX(-100%) rotate(-90deg);
|
|---|
| 44 | transform-origin: right top;
|
|---|
| 45 | }
|
|---|
| 46 | .liteAccordion .slide > h2 span {
|
|---|
| 47 | display: block;
|
|---|
| 48 | padding-right: 8%;
|
|---|
| 49 | text-align: right;
|
|---|
| 50 | height: 90%;
|
|---|
| 51 | margin-top: 5px;
|
|---|
| 52 | -webkit-user-select: none;
|
|---|
| 53 | -khtml-user-select: none;
|
|---|
| 54 | -moz-user-select: none;
|
|---|
| 55 | -ms-user-select: none;
|
|---|
| 56 | user-select: none;
|
|---|
| 57 | }
|
|---|
| 58 | .liteAccordion .slide > h2 b {
|
|---|
| 59 | display: inline-block;
|
|---|
| 60 | position: absolute;
|
|---|
| 61 | top: 13%;
|
|---|
| 62 | left: 10%;
|
|---|
| 63 | text-align: center;
|
|---|
| 64 | -webkit-transform: rotate(90deg);
|
|---|
| 65 | -moz-transform: rotate(90deg);
|
|---|
| 66 | -o-transform: rotate(90deg);
|
|---|
| 67 | transform: rotate(90deg);
|
|---|
| 68 | }
|
|---|
| 69 |
|
|---|
| 70 | .liteAccordion .slide > h2:hover { cursor: pointer }
|
|---|
| 71 | .liteAccordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
|
|---|
| 72 | .liteAccordion .ap-caption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black;
|
|---|
| 73 | background: rgba(0,0,0,0.7); color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
|
|---|
| 74 | .liteAccordion noscript p { padding: 10px; margin: 0; background: white }
|
|---|
| 75 |
|
|---|
| 76 | /****************************************** Basic */
|
|---|
| 77 | .liteAccordion.basic .slide > h2 { background: #333; color: white; line-height: 225% }
|
|---|
| 78 |
|
|---|
| 79 | /****************************************** Dark */
|
|---|
| 80 | .liteAccordion.dark {
|
|---|
| 81 | border: 9px solid #353535;
|
|---|
| 82 | border-bottom-width: 8px;
|
|---|
| 83 | padding: 5px 5px 6px 0;
|
|---|
| 84 | background: #030303;
|
|---|
| 85 | -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 86 | -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 87 | -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 88 | -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 89 | box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 90 | }
|
|---|
| 91 | .liteAccordion.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
|
|---|
| 92 | .liteAccordion.dark .slide > h2 span { background: #353535; color: white }
|
|---|
| 93 | .liteAccordion.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
|
|---|
| 94 | .liteAccordion.dark .slide > h2.selected span, .liteAccordion.dark .slide > h2.selected span:hover {
|
|---|
| 95 | background: #353535;
|
|---|
| 96 | background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
|
|---|
| 97 | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
|
|---|
| 98 | background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
|
|---|
| 99 | background: -o-linear-gradient(left, #353535 0%,#555555 100%);
|
|---|
| 100 | background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
|
|---|
| 101 | background: linear-gradient(left, #353535 0%,#555555 100%);
|
|---|
| 102 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
|
|---|
| 103 | }
|
|---|
| 104 | .liteAccordion.dark .slide > h2.selected b {
|
|---|
| 105 | background: #383838;
|
|---|
| 106 | background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
|
|---|
| 107 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
|
|---|
| 108 | background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
|
|---|
| 109 | background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
|
|---|
| 110 | background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
|
|---|
| 111 | background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
|
|---|
| 112 | }
|
|---|
| 113 | .liteAccordion.dark .slide > div { background: #030303; margin-left: 5px }
|
|---|
| 114 |
|
|---|
| 115 | /***************************************** Light */
|
|---|
| 116 | .liteAccordion.light {
|
|---|
| 117 | border: 9px solid white;
|
|---|
| 118 | border-bottom-width: 8px;
|
|---|
| 119 | padding: 5px 5px 6px 0;
|
|---|
| 120 | background: #a0a0a0;
|
|---|
| 121 | -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 122 | -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 123 | -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 124 | -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 125 | box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 126 | }
|
|---|
| 127 | .liteAccordion.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
|
|---|
| 128 | .liteAccordion.light .slide > h2 span {
|
|---|
| 129 | background: #fcfcfc;
|
|---|
| 130 | background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
|
|---|
| 131 | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
|
|---|
| 132 | background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
|
|---|
| 133 | background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
|
|---|
| 134 | background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
|
|---|
| 135 | background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
|
|---|
| 136 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
|
|---|
| 137 | -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
|
|---|
| 138 | -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
|
|---|
| 139 | -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
|
|---|
| 140 | box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
|
|---|
| 141 | color: #909090;
|
|---|
| 142 | }
|
|---|
| 143 | .liteAccordion.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
|
|---|
| 144 | .liteAccordion.light .slide > h2.selected span, .liteAccordion.light .slide h2.selected span:hover, .liteAccordion.light .slide > h2.selected b { background: #ffffff }
|
|---|
| 145 | .liteAccordion.light .slide > div { background: #a0a0a0; margin-left: 5px }
|
|---|
| 146 |
|
|---|
| 147 | /**************************************** Stitch */
|
|---|
| 148 | .liteAccordion.stitch {
|
|---|
| 149 | position: relative;
|
|---|
| 150 | padding: 5px 0 5px 5px;
|
|---|
| 151 | border: 11px solid #353535;
|
|---|
| 152 | background: #353535;
|
|---|
| 153 | -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 154 | -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 155 | -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 156 | box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
|
|---|
| 157 | }
|
|---|
| 158 | .liteAccordion.stitch:before {
|
|---|
| 159 | content: '';
|
|---|
| 160 | width: 100%;
|
|---|
| 161 | height: 100%;
|
|---|
| 162 | position: absolute;
|
|---|
| 163 | top: -9px;
|
|---|
| 164 | left: -9px;
|
|---|
| 165 | background: #353535;
|
|---|
| 166 | border: 9px solid transparent;
|
|---|
| 167 | -webkit-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 168 | -moz-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 169 | -o-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 170 | border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 171 | }
|
|---|
| 172 | .liteAccordion.stitch .slide > h2 { background: #353535 }
|
|---|
| 173 | .liteAccordion.stitch .slide > h2 span {
|
|---|
| 174 | height: auto;
|
|---|
| 175 | padding-right: 5%;
|
|---|
| 176 | color: white;
|
|---|
| 177 | text-shadow: -1px 1px 0 #5b5b5b;
|
|---|
| 178 | border: 9px solid transparent;
|
|---|
| 179 | background-image: url('bg_noise.png');
|
|---|
| 180 | margin-top: 0;
|
|---|
| 181 | -webkit-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 182 | -moz-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 183 | -o-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 184 | border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 185 | }
|
|---|
| 186 | .liteAccordion.stitch .slide > h2.selected:after {
|
|---|
| 187 | content: '';
|
|---|
| 188 | display: block;
|
|---|
| 189 | height: 11px;
|
|---|
| 190 | width: 11px;
|
|---|
| 191 | position: absolute;
|
|---|
| 192 | bottom: -3px;
|
|---|
| 193 | right: 38px;
|
|---|
| 194 | -webkit-transform: rotate(45deg);
|
|---|
| 195 | -moz-transform: rotate(45deg);
|
|---|
| 196 | -o-transform: rotate(45deg);
|
|---|
| 197 | transform: rotate(45deg);
|
|---|
| 198 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
|
|---|
| 199 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
|---|
| 200 | border: 9px solid transparent;
|
|---|
| 201 | border-top: 0;
|
|---|
| 202 | border-left: 0;
|
|---|
| 203 | -webkit-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 204 | -moz-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 205 | -o-border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 206 | border-image: url('bg_stitch.png') 9 repeat;
|
|---|
| 207 | background-image: url('bg_noise.png');
|
|---|
| 208 | }
|
|---|
| 209 |
|
|---|
| 210 | .liteAccordion.stitch .slide:nth-child(1) > h2 span, .liteAccordion.stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
|
|---|
| 211 | .liteAccordion.stitch .slide:nth-child(2) > h2 span, .liteAccordion.stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
|
|---|
| 212 | .liteAccordion.stitch .slide:nth-child(3) > h2 span, .liteAccordion.stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
|
|---|
| 213 | .liteAccordion.stitch .slide:nth-child(4) > h2 span, .liteAccordion.stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
|
|---|
| 214 | .liteAccordion.stitch .slide:nth-child(5) > h2 span, .liteAccordion.stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
|
|---|
| 215 | .liteAccordion.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
|
|---|
| 216 | .liteAccordion.stitch .slide > div { margin-right: 6px }
|
|---|
| 217 | .liteAccordion.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }
|
|---|
| 218 |
|
|---|
| 219 | /*************************************** Rounded */
|
|---|
| 220 | .liteAccordion.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
|
|---|
| 221 | .liteAccordion.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
|
|---|
| 222 |
|
|---|
| 223 | /******************************************** IE */
|
|---|
| 224 | /* stitch */
|
|---|
| 225 | .liteAccordion.ie.stitch .slide > h2 { /*line-height: 265%*/ }
|
|---|
| 226 | .liteAccordion.ie.stitch .slide > h2 span { /*height: 89%; padding-right: 8%*/ }
|
|---|
| 227 | .liteAccordion.ie.stitch .slide > h2.selected:after { display: none }
|
|---|
| 228 | .liteAccordion.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
|
|---|
| 229 | .liteAccordion.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
|
|---|
| 230 | .liteAccordion.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
|
|---|
| 231 | .liteAccordion.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
|
|---|
| 232 | .liteAccordion.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
|
|---|
| 233 | .liteAccordion.ie.stitch .slide-5 > h2 span { background-color: #c25252 }
|
|---|
| 234 | .liteAccordion.ie.stitch .slide-6 > h2 span { background-color: #ca9859 }
|
|---|
| 235 | .liteAccordion.ie.stitch .slide-7 > h2 span { background-color: #96ba5f }
|
|---|
| 236 | .liteAccordion.ie.stitch .slide-8 > h2 span { background-color: #59abb7 }
|
|---|
| 237 | .liteAccordion.ie.stitch .slide-9 > h2 span { background-color: #bb6098 }
|
|---|
| 238 |
|
|---|
| 239 | /* transforms */
|
|---|
| 240 | .liteAccordion.ie .slide > h2,
|
|---|
| 241 | .liteAccordion.ie .slide > h2 span,
|
|---|
| 242 | .liteAccordion.ie .slide > h2 b { filter: none; -ms-filter: none; -ms-transform: none }
|
|---|
| 243 | .liteAccordion.ie7 .slide > h2 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) }
|
|---|
| 244 | .liteAccordion.ie7 .slide > h2 b { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) }
|
|---|
| 245 | .liteAccordion.ie8 .slide > h2 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" }
|
|---|
| 246 | .liteAccordion.ie8 .slide > h2 b { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)" }
|
|---|
| 247 | .liteAccordion.ie9 .slide > h2 { -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
|
|---|
| 248 | .liteAccordion.ie9 .slide > h2 b { -ms-transform: rotate(90deg) }
|
|---|
| 249 |
|
|---|
| 250 | /* misc */
|
|---|
| 251 | .liteAccordion.ie7 .slide > h2 b, .liteAccordion.ie8 .slide > h2 b { top: 44%; left: 5% }
|
|---|
| 252 | .liteAccordion.ie7.stitch .slide > h2 b, .liteAccordion.ie8.stitch .slide > h2 b { top: 36% }
|
|---|
| 253 | .liteAccordion.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) } |
|---|
