ECOMP-SDK-APP/src/main/webapp/static/fusion/sample/css/flexslider.css

   1 /*
   2  * jQuery FlexSlider v2.6.0
   3  * http://www.woothemes.com/flexslider/
   4  *
   5  * Copyright 2012 WooThemes
   6  * Free to use under the GPLv2 and later license.
   7  * http://www.gnu.org/licenses/gpl-2.0.html
   8  *
   9  * Contributing author: Tyler Smith (@mbmufffin)
  10  *
  11  */
  12 /* ====================================================================================================================
  13  * FONT-FACE
  14  * ====================================================================================================================*/
  15 @font-face {
  16   font-family: 'flexslider-icon';
  17   src: url('fonts/flexslider-icon.eot');
  18   src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  19   font-weight: normal;
  20   font-style: normal;
  21 }
  22 /* ====================================================================================================================
  23  * RESETS
  24  * ====================================================================================================================*/
  25 .flex-container a:hover,
  26 .flex-slider a:hover {
  27   outline: none;
  28 }
  29 .slides,
  30 .slides > li,
  31 .flex-control-nav,
  32 .flex-direction-nav {
  33   margin: 0;
  34   padding: 0;
  35   list-style: none;
  36 }
  37 .flex-pauseplay span {
  38   text-transform: capitalize;
  39 }
  40 /* ====================================================================================================================
  41  * BASE STYLES
  42  * ====================================================================================================================*/
  43 .flexslider {
  44   margin: 0;
  45   padding: 0;
  46 }
  47 .flexslider .slides > li {
  48   display: none;
  49   -webkit-backface-visibility: hidden;
  50 }
  51 .flexslider .slides img {
  52   width: 100%;
  53   display: block;
  54 }
  55 .flexslider .slides:after {
  56   content: "\0020";
  57   display: block;
  58   clear: both;
  59   visibility: hidden;
  60   line-height: 0;
  61   height: 0;
  62 }
  63 html[xmlns] .flexslider .slides {
  64   display: block;
  65 }
  66 * html .flexslider .slides {
  67   height: 1%;
  68 }
  69 .no-js .flexslider .slides > li:first-child {
  70   display: block;
  71 }
  72 /* ====================================================================================================================
  73  * DEFAULT THEME
  74  * ====================================================================================================================*/
  75 .flexslider {
  76   margin: 0 0 60px;
  77   background: #ffffff;
  78   border: 4px solid #ffffff;
  79   position: relative;
  80   zoom: 1;
  81   -webkit-border-radius: 4px;
  82   -moz-border-radius: 4px;
  83   border-radius: 4px;
  84   -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  85   -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  86   -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  87   box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  88 }
  89 .flexslider .slides {
  90   zoom: 1;
  91 }
  92 .flexslider .slides img {
  93   height: auto;
  94   -moz-user-select: none;
  95 }
  96 .flex-viewport {
  97   max-height: 2000px;
  98   -webkit-transition: all 1s ease;
  99   -moz-transition: all 1s ease;
 100   -ms-transition: all 1s ease;
 101   -o-transition: all 1s ease;
 102   transition: all 1s ease;
 103 }
 104 .loading .flex-viewport {
 105   max-height: 300px;
 106 }
 107 .carousel li {
 108   margin-right: 5px;
 109 }
 110 .flex-direction-nav {
 111   *height: 0;
 112 }
 113 .flex-direction-nav a {
 114   text-decoration: none;
 115   display: block;
 116   width: 40px;
 117   height: 40px;
 118   margin: -20px 0 0;
 119   position: absolute;
 120   top: 50%;
 121   z-index: 10;
 122   overflow: hidden;
 123   opacity: 0;
 124   cursor: pointer;
 125   color: rgba(0, 0, 0, 0.8);
 126   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
 127   -webkit-transition: all 0.3s ease-in-out;
 128   -moz-transition: all 0.3s ease-in-out;
 129   -ms-transition: all 0.3s ease-in-out;
 130   -o-transition: all 0.3s ease-in-out;
 131   transition: all 0.3s ease-in-out;
 132 }
 133 .flex-direction-nav a:before {
 134   font-family: "flexslider-icon";
 135   font-size: 40px;
 136   display: inline-block;
 137   content: '\f001';
 138   color: rgba(0, 0, 0, 0.8);
 139   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
 140 }
 141 .flex-direction-nav a.flex-next:before {
 142   content: '\f002';
 143 }
 144 .flex-direction-nav .flex-prev {
 145   left: -50px;
 146 }
 147 .flex-direction-nav .flex-next {
 148   right: -50px;
 149   text-align: right;
 150 }
 151 .flexslider:hover .flex-direction-nav .flex-prev {
 152   opacity: 0.7;
 153   left: 10px;
 154 }
 155 .flexslider:hover .flex-direction-nav .flex-prev:hover {
 156   opacity: 1;
 157 }
 158 .flexslider:hover .flex-direction-nav .flex-next {
 159   opacity: 0.7;
 160   right: 10px;
 161 }
 162 .flexslider:hover .flex-direction-nav .flex-next:hover {
 163   opacity: 1;
 164 }
 165 .flex-direction-nav .flex-disabled {
 166   opacity: 0!important;
 167   filter: alpha(opacity=0);
 168   cursor: default;
 169   z-index: -1;
 170 }
 171 .flex-pauseplay a {
 172   display: block;
 173   width: 20px;
 174   height: 20px;
 175   position: absolute;
 176   bottom: 5px;
 177   left: 10px;
 178   opacity: 0.8;
 179   z-index: 10;
 180   overflow: hidden;
 181   cursor: pointer;
 182   color: #000;
 183 }
 184 .flex-pauseplay a:before {
 185   font-family: "flexslider-icon";
 186   font-size: 20px;
 187   display: inline-block;
 188   content: '\f004';
 189 }
 190 .flex-pauseplay a:hover {
 191   opacity: 1;
 192 }
 193 .flex-pauseplay a.flex-play:before {
 194   content: '\f003';
 195 }
 196 .flex-control-nav {
 197   width: 100%;
 198   position: absolute;
 199   bottom: -40px;
 200   text-align: center;
 201 }
 202 .flex-control-nav li {
 203   margin: 0 6px;
 204   display: inline-block;
 205   zoom: 1;
 206   *display: inline;
 207 }
 208 .flex-control-paging li a {
 209   width: 11px;
 210   height: 11px;
 211   display: block;
 212   background: #666;
 213   background: rgba(0, 0, 0, 0.5);
 214   cursor: pointer;
 215   text-indent: -9999px;
 216   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 217   -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 218   -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 219   box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
 220   -webkit-border-radius: 20px;
 221   -moz-border-radius: 20px;
 222   border-radius: 20px;
 223 }
 224 .flex-control-paging li a:hover {
 225   background: #333;
 226   background: rgba(0, 0, 0, 0.7);
 227 }
 228 .flex-control-paging li a.flex-active {
 229   background: #000;
 230   background: rgba(0, 0, 0, 0.9);
 231   cursor: default;
 232 }
 233 .flex-control-thumbs {
 234   margin: 5px 0 0;
 235   position: static;
 236   overflow: hidden;
 237 }
 238 .flex-control-thumbs li {
 239   width: 25%;
 240   float: left;
 241   margin: 0;
 242 }
 243 .flex-control-thumbs img {
 244   width: 100%;
 245   height: auto;
 246   display: block;
 247   opacity: .7;
 248   cursor: pointer;
 249   -moz-user-select: none;
 250   -webkit-transition: all 1s ease;
 251   -moz-transition: all 1s ease;
 252   -ms-transition: all 1s ease;
 253   -o-transition: all 1s ease;
 254   transition: all 1s ease;
 255 }
 256 .flex-control-thumbs img:hover {
 257   opacity: 1;
 258 }
 259 .flex-control-thumbs .flex-active {
 260   opacity: 1;
 261   cursor: default;
 262 }
 263 /* ====================================================================================================================
 264  * RESPONSIVE
 265  * ====================================================================================================================*/
 266 @media screen and (max-width: 860px) {
 267   .flex-direction-nav .flex-prev {
 268     opacity: 1;
 269     left: 10px;
 270   }
 271   .flex-direction-nav .flex-next {
 272     opacity: 1;
 273     right: 10px;
 274   }
 275 }