You are here

Home » API reference » Media crop 7

media_crop.base.css in Media crop 7 

.media-crop-invisible {
  display: none; }

#media-format-form .media-item {
  width: 350px;
  height: 350px; }

.rotated-images .rotated {
  display: none; }

.rotated {
  width: auto;
  height: 100%;
  display: inline-block; }

.rotated.rotated-180 {
  width: 100%;
  height: auto; }

@-webkit-keyframes rotate-0-90 {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(90deg); } }

.image-rotate-0-90 {
  -webkit-animation: rotate-0-90 0.25s linear;
  -webkit-transform: rotate(90deg); }

@-moz-keyframes rotate-0-90 {
  from {
    -moz-transform: rotate(0deg); }

  to {
    -moz-transform: rotate(90deg); } }

.image-rotate-0-90 {
  -moz-animation: rotate-0-90 0.25s linear;
  -moz-transform: rotate(90deg); }

@-o-keyframes rotate-0-90 {
  from {
    -o-transform: rotate(0deg); }

  to {
    -o-transform: rotate(90deg); } }

.image-rotate-0-90 {
  -o-animation: rotate-0-90 0.25s linear;
  -o-transform: rotate(90deg); }

@-ms-keyframes rotate-0-90 {
  from {
    -ms-transform: rotate(0deg); }

  to {
    -ms-transform: rotate(90deg); } }

.image-rotate-0-90 {
  -ms-animation: rotate-0-90 0.25s linear;
  -ms-transform: rotate(90deg); }

@-webkit-keyframes rotate-0-180 {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(180deg); } }

.image-rotate-0-180 {
  -webkit-animation: rotate-0-180 0.25s linear;
  -webkit-transform: rotate(180deg); }

@-moz-keyframes rotate-0-180 {
  from {
    -moz-transform: rotate(0deg); }

  to {
    -moz-transform: rotate(180deg); } }

.image-rotate-0-180 {
  -moz-animation: rotate-0-180 0.25s linear;
  -moz-transform: rotate(180deg); }

@-o-keyframes rotate-0-180 {
  from {
    -o-transform: rotate(0deg); }

  to {
    -o-transform: rotate(180deg); } }

.image-rotate-0-180 {
  -o-animation: rotate-0-180 0.25s linear;
  -o-transform: rotate(180deg); }

@-ms-keyframes rotate-0-180 {
  from {
    -ms-transform: rotate(0deg); }

  to {
    -ms-transform: rotate(180deg); } }

.image-rotate-0-180 {
  -ms-animation: rotate-0-180 0.25s linear;
  -ms-transform: rotate(180deg); }

@-webkit-keyframes rotate-0-270 {
  from {
    -webkit-transform: rotate(359deg); }

  to {
    -webkit-transform: rotate(270deg); } }

.image-rotate-0-270 {
  -webkit-animation: rotate-0-270 0.25s linear;
  -webkit-transform: rotate(270deg); }

@-moz-keyframes rotate-0-270 {
  from {
    -moz-transform: rotate(359deg); }

  to {
    -moz-transform: rotate(270deg); } }

.image-rotate-0-270 {
  -moz-animation: rotate-0-270 0.25s linear;
  -moz-transform: rotate(270deg); }

@-o-keyframes rotate-0-270 {
  from {
    -o-transform: rotate(359deg); }

  to {
    -o-transform: rotate(270deg); } }

.image-rotate-0-270 {
  -o-animation: rotate-0-270 0.25s linear;
  -o-transform: rotate(270deg); }

@-ms-keyframes rotate-0-270 {
  from {
    -ms-transform: rotate(359deg); }

  to {
    -ms-transform: rotate(270deg); } }

.image-rotate-0-270 {
  -ms-animation: rotate-0-270 0.25s linear;
  -ms-transform: rotate(270deg); }

@-webkit-keyframes rotate-90-0 {
  from {
    -webkit-transform: rotate(90deg); }

  to {
    -webkit-transform: rotate(0deg); } }

.image-rotate-90-0 {
  -webkit-animation: rotate-90-0 0.25s linear;
  -webkit-transform: rotate(0deg); }

@-moz-keyframes rotate-90-0 {
  from {
    -moz-transform: rotate(90deg); }

  to {
    -moz-transform: rotate(0deg); } }

.image-rotate-90-0 {
  -moz-animation: rotate-90-0 0.25s linear;
  -moz-transform: rotate(0deg); }

@-o-keyframes rotate-90-0 {
  from {
    -o-transform: rotate(90deg); }

  to {
    -o-transform: rotate(0deg); } }

.image-rotate-90-0 {
  -o-animation: rotate-90-0 0.25s linear;
  -o-transform: rotate(0deg); }

@-ms-keyframes rotate-90-0 {
  from {
    -ms-transform: rotate(90deg); }

  to {
    -ms-transform: rotate(0deg); } }

.image-rotate-90-0 {
  -ms-animation: rotate-90-0 0.25s linear;
  -ms-transform: rotate(0deg); }

@-webkit-keyframes rotate-90-180 {
  from {
    -webkit-transform: rotate(90deg); }

  to {
    -webkit-transform: rotate(180deg); } }

.image-rotate-90-180 {
  -webkit-animation: rotate-90-180 0.25s linear;
  -webkit-transform: rotate(180deg); }

@-moz-keyframes rotate-90-180 {
  from {
    -moz-transform: rotate(90deg); }

  to {
    -moz-transform: rotate(180deg); } }

.image-rotate-90-180 {
  -moz-animation: rotate-90-180 0.25s linear;
  -moz-transform: rotate(180deg); }

@-o-keyframes rotate-90-180 {
  from {
    -o-transform: rotate(90deg); }

  to {
    -o-transform: rotate(180deg); } }

.image-rotate-90-180 {
  -o-animation: rotate-90-180 0.25s linear;
  -o-transform: rotate(180deg); }

@-ms-keyframes rotate-90-180 {
  from {
    -ms-transform: rotate(90deg); }

  to {
    -ms-transform: rotate(180deg); } }

.image-rotate-90-180 {
  -ms-animation: rotate-90-180 0.25s linear;
  -ms-transform: rotate(180deg); }

@-webkit-keyframes rotate-90-270 {
  from {
    -webkit-transform: rotate(90deg); }

  to {
    -webkit-transform: rotate(270deg); } }

.image-rotate-90-270 {
  -webkit-animation: rotate-90-270 0.25s linear;
  -webkit-transform: rotate(270deg); }

@-moz-keyframes rotate-90-270 {
  from {
    -moz-transform: rotate(90deg); }

  to {
    -moz-transform: rotate(270deg); } }

.image-rotate-90-270 {
  -moz-animation: rotate-90-270 0.25s linear;
  -moz-transform: rotate(270deg); }

@-o-keyframes rotate-90-270 {
  from {
    -o-transform: rotate(90deg); }

  to {
    -o-transform: rotate(270deg); } }

.image-rotate-90-270 {
  -o-animation: rotate-90-270 0.25s linear;
  -o-transform: rotate(270deg); }

@-ms-keyframes rotate-90-270 {
  from {
    -ms-transform: rotate(90deg); }

  to {
    -ms-transform: rotate(270deg); } }

.image-rotate-90-270 {
  -ms-animation: rotate-90-270 0.25s linear;
  -ms-transform: rotate(270deg); }

@-webkit-keyframes rotate-180-0 {
  from {
    -webkit-transform: rotate(180deg); }

  to {
    -webkit-transform: rotate(0deg); } }

.image-rotate-180-0 {
  -webkit-animation: rotate-180-0 0.25s linear;
  -webkit-transform: rotate(0deg); }

@-moz-keyframes rotate-180-0 {
  from {
    -moz-transform: rotate(180deg); }

  to {
    -moz-transform: rotate(0deg); } }

.image-rotate-180-0 {
  -moz-animation: rotate-180-0 0.25s linear;
  -moz-transform: rotate(0deg); }

@-o-keyframes rotate-180-0 {
  from {
    -o-transform: rotate(180deg); }

  to {
    -o-transform: rotate(0deg); } }

.image-rotate-180-0 {
  -o-animation: rotate-180-0 0.25s linear;
  -o-transform: rotate(0deg); }

@-ms-keyframes rotate-180-0 {
  from {
    -ms-transform: rotate(180deg); }

  to {
    -ms-transform: rotate(0deg); } }

.image-rotate-180-0 {
  -ms-animation: rotate-180-0 0.25s linear;
  -ms-transform: rotate(0deg); }

@-webkit-keyframes rotate-180-90 {
  from {
    -webkit-transform: rotate(180deg); }

  to {
    -webkit-transform: rotate(90deg); } }

.image-rotate-180-90 {
  -webkit-animation: rotate-180-90 0.25s linear;
  -webkit-transform: rotate(90deg); }

@-moz-keyframes rotate-180-90 {
  from {
    -moz-transform: rotate(180deg); }

  to {
    -moz-transform: rotate(90deg); } }

.image-rotate-180-90 {
  -moz-animation: rotate-180-90 0.25s linear;
  -moz-transform: rotate(90deg); }

@-o-keyframes rotate-180-90 {
  from {
    -o-transform: rotate(180deg); }

  to {
    -o-transform: rotate(90deg); } }

.image-rotate-180-90 {
  -o-animation: rotate-180-90 0.25s linear;
  -o-transform: rotate(90deg); }

@-ms-keyframes rotate-180-90 {
  from {
    -ms-transform: rotate(180deg); }

  to {
    -ms-transform: rotate(90deg); } }

.image-rotate-180-90 {
  -ms-animation: rotate-180-90 0.25s linear;
  -ms-transform: rotate(90deg); }

@-webkit-keyframes rotate-180-270 {
  from {
    -webkit-transform: rotate(180deg); }

  to {
    -webkit-transform: rotate(270deg); } }

.image-rotate-180-270 {
  -webkit-animation: rotate-180-270 0.25s linear;
  -webkit-transform: rotate(270deg); }

@-moz-keyframes rotate-180-270 {
  from {
    -moz-transform: rotate(180deg); }

  to {
    -moz-transform: rotate(270deg); } }

.image-rotate-180-270 {
  -moz-animation: rotate-180-270 0.25s linear;
  -moz-transform: rotate(270deg); }

@-o-keyframes rotate-180-270 {
  from {
    -o-transform: rotate(180deg); }

  to {
    -o-transform: rotate(270deg); } }

.image-rotate-180-270 {
  -o-animation: rotate-180-270 0.25s linear;
  -o-transform: rotate(270deg); }

@-ms-keyframes rotate-180-270 {
  from {
    -ms-transform: rotate(180deg); }

  to {
    -ms-transform: rotate(270deg); } }

.image-rotate-180-270 {
  -ms-animation: rotate-180-270 0.25s linear;
  -ms-transform: rotate(270deg); }

@-webkit-keyframes rotate-270-0 {
  from {
    -webkit-transform: rotate(270deg); }

  to {
    -webkit-transform: rotate(359deg); } }

.image-rotate-270-0 {
  -webkit-animation: rotate-270-0 0.25s linear;
  -webkit-transform: rotate(0deg); }

@-moz-keyframes rotate-270-0 {
  from {
    -moz-transform: rotate(270deg); }

  to {
    -moz-transform: rotate(359deg); } }

.image-rotate-270-0 {
  -moz-animation: rotate-270-0 0.25s linear;
  -moz-transform: rotate(0deg); }

@-o-keyframes rotate-270-0 {
  from {
    -o-transform: rotate(270deg); }

  to {
    -o-transform: rotate(359deg); } }

.image-rotate-270-0 {
  -o-animation: rotate-270-0 0.25s linear;
  -o-transform: rotate(0deg); }

@-ms-keyframes rotate-270-0 {
  from {
    -ms-transform: rotate(270deg); }

  to {
    -ms-transform: rotate(359deg); } }

.image-rotate-270-0 {
  -ms-animation: rotate-270-0 0.25s linear;
  -ms-transform: rotate(0deg); }

@-webkit-keyframes rotate-270-90 {
  from {
    -webkit-transform: rotate(270deg); }

  to {
    -webkit-transform: rotate(90deg); } }

.image-rotate-270-90 {
  -webkit-animation: rotate-270-90 0.25s linear;
  -webkit-transform: rotate(90deg); }

@-moz-keyframes rotate-270-90 {
  from {
    -moz-transform: rotate(270deg); }

  to {
    -moz-transform: rotate(90deg); } }

.image-rotate-270-90 {
  -moz-animation: rotate-270-90 0.25s linear;
  -moz-transform: rotate(90deg); }

@-o-keyframes rotate-270-90 {
  from {
    -o-transform: rotate(270deg); }

  to {
    -o-transform: rotate(90deg); } }

.image-rotate-270-90 {
  -o-animation: rotate-270-90 0.25s linear;
  -o-transform: rotate(90deg); }

@-ms-keyframes rotate-270-90 {
  from {
    -ms-transform: rotate(270deg); }

  to {
    -ms-transform: rotate(90deg); } }

.image-rotate-270-90 {
  -ms-animation: rotate-270-90 0.25s linear;
  -ms-transform: rotate(90deg); }

@-webkit-keyframes rotate-270-180 {
  from {
    -webkit-transform: rotate(270deg); }

  to {
    -webkit-transform: rotate(180deg); } }

.image-rotate-270-180 {
  -webkit-animation: rotate-270-180 0.25s linear;
  -webkit-transform: rotate(180deg); }

@-moz-keyframes rotate-270-180 {
  from {
    -moz-transform: rotate(270deg); }

  to {
    -moz-transform: rotate(180deg); } }

.image-rotate-270-180 {
  -moz-animation: rotate-270-180 0.25s linear;
  -moz-transform: rotate(180deg); }

@-o-keyframes rotate-270-180 {
  from {
    -o-transform: rotate(270deg); }

  to {
    -o-transform: rotate(180deg); } }

.image-rotate-270-180 {
  -o-animation: rotate-270-180 0.25s linear;
  -o-transform: rotate(180deg); }

@-ms-keyframes rotate-270-180 {
  from {
    -ms-transform: rotate(270deg); }

  to {
    -ms-transform: rotate(180deg); } }

.image-rotate-270-180 {
  -ms-animation: rotate-270-180 0.25s linear;
  -ms-transform: rotate(180deg); }

.format-and-crop-container-top,
.format-and-crop-container-bottom {
  width: 350px; }

.format-and-crop-container-top .image-style-description {
  display: none;
  padding-left: 26px;
  background: transparent url(../images/warning.png) no-repeat left center; }

.format-and-crop-container-bottom {
  position: relative;
  display: none; }
  .format-and-crop-container-bottom .crop-warning,
  .format-and-crop-container-bottom .scale-warning {
    display: none; }
  .format-and-crop-container-bottom .crop-dimensions-container .crop-aspect-ratio-lock {
    cursor: pointer; }
  .format-and-crop-container-bottom .crop-dimensions-container .crop-aspect-ratio-unlock {
    display: none;
    cursor: pointer; }
  .format-and-crop-container-bottom .rotate-image-container .rotate-right-button,
  .format-and-crop-container-bottom .rotate-image-container .rotate-left-button {
    display: block;
    line-height: 15px;
    height: 15px;
    padding-left: 15px; }
    .format-and-crop-container-bottom .rotate-image-container .rotate-right-button span,
    .format-and-crop-container-bottom .rotate-image-container .rotate-left-button span {
      display: block;
      padding-left: 3px; }
  .format-and-crop-container-bottom .rotate-image-container .rotate-right-button {
    background: transparent url(../images/rotate.png) no-repeat 0px 0px; }
  .format-and-crop-container-bottom .rotate-image-container .rotate-left-button {
    background: transparent url(../images/rotate.png) no-repeat 0px -21px; }

.enable-interface,
.disable-interface {
  cursor: pointer; }

File

css/media_crop.base.css
View source 
  1. .media-crop-invisible {

  2.   display: none; }

  3. 

  4. #media-format-form .media-item {

  5.   width: 350px;

  6.   height: 350px; }

  7. 

  8. .rotated-images .rotated {

  9.   display: none; }

  10. 

  11. .rotated {

  12.   width: auto;

  13.   height: 100%;

  14.   display: inline-block; }

  15. 

  16. .rotated.rotated-180 {

  17.   width: 100%;

  18.   height: auto; }

  19. 

  20. @-webkit-keyframes rotate-0-90 {

  21.   from {

  22.     -webkit-transform: rotate(0deg); }

  23. 

  24.   to {

  25.     -webkit-transform: rotate(90deg); } }

  26. 

  27. .image-rotate-0-90 {

  28.   -webkit-animation: rotate-0-90 0.25s linear;

  29.   -webkit-transform: rotate(90deg); }

  30. 

  31. @-moz-keyframes rotate-0-90 {

  32.   from {

  33.     -moz-transform: rotate(0deg); }

  34. 

  35.   to {

  36.     -moz-transform: rotate(90deg); } }

  37. 

  38. .image-rotate-0-90 {

  39.   -moz-animation: rotate-0-90 0.25s linear;

  40.   -moz-transform: rotate(90deg); }

  41. 

  42. @-o-keyframes rotate-0-90 {

  43.   from {

  44.     -o-transform: rotate(0deg); }

  45. 

  46.   to {

  47.     -o-transform: rotate(90deg); } }

  48. 

  49. .image-rotate-0-90 {

  50.   -o-animation: rotate-0-90 0.25s linear;

  51.   -o-transform: rotate(90deg); }

  52. 

  53. @-ms-keyframes rotate-0-90 {

  54.   from {

  55.     -ms-transform: rotate(0deg); }

  56. 

  57.   to {

  58.     -ms-transform: rotate(90deg); } }

  59. 

  60. .image-rotate-0-90 {

  61.   -ms-animation: rotate-0-90 0.25s linear;

  62.   -ms-transform: rotate(90deg); }

  63. 

  64. @-webkit-keyframes rotate-0-180 {

  65.   from {

  66.     -webkit-transform: rotate(0deg); }

  67. 

  68.   to {

  69.     -webkit-transform: rotate(180deg); } }

  70. 

  71. .image-rotate-0-180 {

  72.   -webkit-animation: rotate-0-180 0.25s linear;

  73.   -webkit-transform: rotate(180deg); }

  74. 

  75. @-moz-keyframes rotate-0-180 {

  76.   from {

  77.     -moz-transform: rotate(0deg); }

  78. 

  79.   to {

  80.     -moz-transform: rotate(180deg); } }

  81. 

  82. .image-rotate-0-180 {

  83.   -moz-animation: rotate-0-180 0.25s linear;

  84.   -moz-transform: rotate(180deg); }

  85. 

  86. @-o-keyframes rotate-0-180 {

  87.   from {

  88.     -o-transform: rotate(0deg); }

  89. 

  90.   to {

  91.     -o-transform: rotate(180deg); } }

  92. 

  93. .image-rotate-0-180 {

  94.   -o-animation: rotate-0-180 0.25s linear;

  95.   -o-transform: rotate(180deg); }

  96. 

  97. @-ms-keyframes rotate-0-180 {

  98.   from {

  99.     -ms-transform: rotate(0deg); }

  100. 

  101.   to {

  102.     -ms-transform: rotate(180deg); } }

  103. 

  104. .image-rotate-0-180 {

  105.   -ms-animation: rotate-0-180 0.25s linear;

  106.   -ms-transform: rotate(180deg); }

  107. 

  108. @-webkit-keyframes rotate-0-270 {

  109.   from {

  110.     -webkit-transform: rotate(359deg); }

  111. 

  112.   to {

  113.     -webkit-transform: rotate(270deg); } }

  114. 

  115. .image-rotate-0-270 {

  116.   -webkit-animation: rotate-0-270 0.25s linear;

  117.   -webkit-transform: rotate(270deg); }

  118. 

  119. @-moz-keyframes rotate-0-270 {

  120.   from {

  121.     -moz-transform: rotate(359deg); }

  122. 

  123.   to {

  124.     -moz-transform: rotate(270deg); } }

  125. 

  126. .image-rotate-0-270 {

  127.   -moz-animation: rotate-0-270 0.25s linear;

  128.   -moz-transform: rotate(270deg); }

  129. 

  130. @-o-keyframes rotate-0-270 {

  131.   from {

  132.     -o-transform: rotate(359deg); }

  133. 

  134.   to {

  135.     -o-transform: rotate(270deg); } }

  136. 

  137. .image-rotate-0-270 {

  138.   -o-animation: rotate-0-270 0.25s linear;

  139.   -o-transform: rotate(270deg); }

  140. 

  141. @-ms-keyframes rotate-0-270 {

  142.   from {

  143.     -ms-transform: rotate(359deg); }

  144. 

  145.   to {

  146.     -ms-transform: rotate(270deg); } }

  147. 

  148. .image-rotate-0-270 {

  149.   -ms-animation: rotate-0-270 0.25s linear;

  150.   -ms-transform: rotate(270deg); }

  151. 

  152. @-webkit-keyframes rotate-90-0 {

  153.   from {

  154.     -webkit-transform: rotate(90deg); }

  155. 

  156.   to {

  157.     -webkit-transform: rotate(0deg); } }

  158. 

  159. .image-rotate-90-0 {

  160.   -webkit-animation: rotate-90-0 0.25s linear;

  161.   -webkit-transform: rotate(0deg); }

  162. 

  163. @-moz-keyframes rotate-90-0 {

  164.   from {

  165.     -moz-transform: rotate(90deg); }

  166. 

  167.   to {

  168.     -moz-transform: rotate(0deg); } }

  169. 

  170. .image-rotate-90-0 {

  171.   -moz-animation: rotate-90-0 0.25s linear;

  172.   -moz-transform: rotate(0deg); }

  173. 

  174. @-o-keyframes rotate-90-0 {

  175.   from {

  176.     -o-transform: rotate(90deg); }

  177. 

  178.   to {

  179.     -o-transform: rotate(0deg); } }

  180. 

  181. .image-rotate-90-0 {

  182.   -o-animation: rotate-90-0 0.25s linear;

  183.   -o-transform: rotate(0deg); }

  184. 

  185. @-ms-keyframes rotate-90-0 {

  186.   from {

  187.     -ms-transform: rotate(90deg); }

  188. 

  189.   to {

  190.     -ms-transform: rotate(0deg); } }

  191. 

  192. .image-rotate-90-0 {

  193.   -ms-animation: rotate-90-0 0.25s linear;

  194.   -ms-transform: rotate(0deg); }

  195. 

  196. @-webkit-keyframes rotate-90-180 {

  197.   from {

  198.     -webkit-transform: rotate(90deg); }

  199. 

  200.   to {

  201.     -webkit-transform: rotate(180deg); } }

  202. 

  203. .image-rotate-90-180 {

  204.   -webkit-animation: rotate-90-180 0.25s linear;

  205.   -webkit-transform: rotate(180deg); }

  206. 

  207. @-moz-keyframes rotate-90-180 {

  208.   from {

  209.     -moz-transform: rotate(90deg); }

  210. 

  211.   to {

  212.     -moz-transform: rotate(180deg); } }

  213. 

  214. .image-rotate-90-180 {

  215.   -moz-animation: rotate-90-180 0.25s linear;

  216.   -moz-transform: rotate(180deg); }

  217. 

  218. @-o-keyframes rotate-90-180 {

  219.   from {

  220.     -o-transform: rotate(90deg); }

  221. 

  222.   to {

  223.     -o-transform: rotate(180deg); } }

  224. 

  225. .image-rotate-90-180 {

  226.   -o-animation: rotate-90-180 0.25s linear;

  227.   -o-transform: rotate(180deg); }

  228. 

  229. @-ms-keyframes rotate-90-180 {

  230.   from {

  231.     -ms-transform: rotate(90deg); }

  232. 

  233.   to {

  234.     -ms-transform: rotate(180deg); } }

  235. 

  236. .image-rotate-90-180 {

  237.   -ms-animation: rotate-90-180 0.25s linear;

  238.   -ms-transform: rotate(180deg); }

  239. 

  240. @-webkit-keyframes rotate-90-270 {

  241.   from {

  242.     -webkit-transform: rotate(90deg); }

  243. 

  244.   to {

  245.     -webkit-transform: rotate(270deg); } }

  246. 

  247. .image-rotate-90-270 {

  248.   -webkit-animation: rotate-90-270 0.25s linear;

  249.   -webkit-transform: rotate(270deg); }

  250. 

  251. @-moz-keyframes rotate-90-270 {

  252.   from {

  253.     -moz-transform: rotate(90deg); }

  254. 

  255.   to {

  256.     -moz-transform: rotate(270deg); } }

  257. 

  258. .image-rotate-90-270 {

  259.   -moz-animation: rotate-90-270 0.25s linear;

  260.   -moz-transform: rotate(270deg); }

  261. 

  262. @-o-keyframes rotate-90-270 {

  263.   from {

  264.     -o-transform: rotate(90deg); }

  265. 

  266.   to {

  267.     -o-transform: rotate(270deg); } }

  268. 

  269. .image-rotate-90-270 {

  270.   -o-animation: rotate-90-270 0.25s linear;

  271.   -o-transform: rotate(270deg); }

  272. 

  273. @-ms-keyframes rotate-90-270 {

  274.   from {

  275.     -ms-transform: rotate(90deg); }

  276. 

  277.   to {

  278.     -ms-transform: rotate(270deg); } }

  279. 

  280. .image-rotate-90-270 {

  281.   -ms-animation: rotate-90-270 0.25s linear;

  282.   -ms-transform: rotate(270deg); }

  283. 

  284. @-webkit-keyframes rotate-180-0 {

  285.   from {

  286.     -webkit-transform: rotate(180deg); }

  287. 

  288.   to {

  289.     -webkit-transform: rotate(0deg); } }

  290. 

  291. .image-rotate-180-0 {

  292.   -webkit-animation: rotate-180-0 0.25s linear;

  293.   -webkit-transform: rotate(0deg); }

  294. 

  295. @-moz-keyframes rotate-180-0 {

  296.   from {

  297.     -moz-transform: rotate(180deg); }

  298. 

  299.   to {

  300.     -moz-transform: rotate(0deg); } }

  301. 

  302. .image-rotate-180-0 {

  303.   -moz-animation: rotate-180-0 0.25s linear;

  304.   -moz-transform: rotate(0deg); }

  305. 

  306. @-o-keyframes rotate-180-0 {

  307.   from {

  308.     -o-transform: rotate(180deg); }

  309. 

  310.   to {

  311.     -o-transform: rotate(0deg); } }

  312. 

  313. .image-rotate-180-0 {

  314.   -o-animation: rotate-180-0 0.25s linear;

  315.   -o-transform: rotate(0deg); }

  316. 

  317. @-ms-keyframes rotate-180-0 {

  318.   from {

  319.     -ms-transform: rotate(180deg); }

  320. 

  321.   to {

  322.     -ms-transform: rotate(0deg); } }

  323. 

  324. .image-rotate-180-0 {

  325.   -ms-animation: rotate-180-0 0.25s linear;

  326.   -ms-transform: rotate(0deg); }

  327. 

  328. @-webkit-keyframes rotate-180-90 {

  329.   from {

  330.     -webkit-transform: rotate(180deg); }

  331. 

  332.   to {

  333.     -webkit-transform: rotate(90deg); } }

  334. 

  335. .image-rotate-180-90 {

  336.   -webkit-animation: rotate-180-90 0.25s linear;

  337.   -webkit-transform: rotate(90deg); }

  338. 

  339. @-moz-keyframes rotate-180-90 {

  340.   from {

  341.     -moz-transform: rotate(180deg); }

  342. 

  343.   to {

  344.     -moz-transform: rotate(90deg); } }

  345. 

  346. .image-rotate-180-90 {

  347.   -moz-animation: rotate-180-90 0.25s linear;

  348.   -moz-transform: rotate(90deg); }

  349. 

  350. @-o-keyframes rotate-180-90 {

  351.   from {

  352.     -o-transform: rotate(180deg); }

  353. 

  354.   to {

  355.     -o-transform: rotate(90deg); } }

  356. 

  357. .image-rotate-180-90 {

  358.   -o-animation: rotate-180-90 0.25s linear;

  359.   -o-transform: rotate(90deg); }

  360. 

  361. @-ms-keyframes rotate-180-90 {

  362.   from {

  363.     -ms-transform: rotate(180deg); }

  364. 

  365.   to {

  366.     -ms-transform: rotate(90deg); } }

  367. 

  368. .image-rotate-180-90 {

  369.   -ms-animation: rotate-180-90 0.25s linear;

  370.   -ms-transform: rotate(90deg); }

  371. 

  372. @-webkit-keyframes rotate-180-270 {

  373.   from {

  374.     -webkit-transform: rotate(180deg); }

  375. 

  376.   to {

  377.     -webkit-transform: rotate(270deg); } }

  378. 

  379. .image-rotate-180-270 {

  380.   -webkit-animation: rotate-180-270 0.25s linear;

  381.   -webkit-transform: rotate(270deg); }

  382. 

  383. @-moz-keyframes rotate-180-270 {

  384.   from {

  385.     -moz-transform: rotate(180deg); }

  386. 

  387.   to {

  388.     -moz-transform: rotate(270deg); } }

  389. 

  390. .image-rotate-180-270 {

  391.   -moz-animation: rotate-180-270 0.25s linear;

  392.   -moz-transform: rotate(270deg); }

  393. 

  394. @-o-keyframes rotate-180-270 {

  395.   from {

  396.     -o-transform: rotate(180deg); }

  397. 

  398.   to {

  399.     -o-transform: rotate(270deg); } }

  400. 

  401. .image-rotate-180-270 {

  402.   -o-animation: rotate-180-270 0.25s linear;

  403.   -o-transform: rotate(270deg); }

  404. 

  405. @-ms-keyframes rotate-180-270 {

  406.   from {

  407.     -ms-transform: rotate(180deg); }

  408. 

  409.   to {

  410.     -ms-transform: rotate(270deg); } }

  411. 

  412. .image-rotate-180-270 {

  413.   -ms-animation: rotate-180-270 0.25s linear;

  414.   -ms-transform: rotate(270deg); }

  415. 

  416. @-webkit-keyframes rotate-270-0 {

  417.   from {

  418.     -webkit-transform: rotate(270deg); }

  419. 

  420.   to {

  421.     -webkit-transform: rotate(359deg); } }

  422. 

  423. .image-rotate-270-0 {

  424.   -webkit-animation: rotate-270-0 0.25s linear;

  425.   -webkit-transform: rotate(0deg); }

  426. 

  427. @-moz-keyframes rotate-270-0 {

  428.   from {

  429.     -moz-transform: rotate(270deg); }

  430. 

  431.   to {

  432.     -moz-transform: rotate(359deg); } }

  433. 

  434. .image-rotate-270-0 {

  435.   -moz-animation: rotate-270-0 0.25s linear;

  436.   -moz-transform: rotate(0deg); }

  437. 

  438. @-o-keyframes rotate-270-0 {

  439.   from {

  440.     -o-transform: rotate(270deg); }

  441. 

  442.   to {

  443.     -o-transform: rotate(359deg); } }

  444. 

  445. .image-rotate-270-0 {

  446.   -o-animation: rotate-270-0 0.25s linear;

  447.   -o-transform: rotate(0deg); }

  448. 

  449. @-ms-keyframes rotate-270-0 {

  450.   from {

  451.     -ms-transform: rotate(270deg); }

  452. 

  453.   to {

  454.     -ms-transform: rotate(359deg); } }

  455. 

  456. .image-rotate-270-0 {

  457.   -ms-animation: rotate-270-0 0.25s linear;

  458.   -ms-transform: rotate(0deg); }

  459. 

  460. @-webkit-keyframes rotate-270-90 {

  461.   from {

  462.     -webkit-transform: rotate(270deg); }

  463. 

  464.   to {

  465.     -webkit-transform: rotate(90deg); } }

  466. 

  467. .image-rotate-270-90 {

  468.   -webkit-animation: rotate-270-90 0.25s linear;

  469.   -webkit-transform: rotate(90deg); }

  470. 

  471. @-moz-keyframes rotate-270-90 {

  472.   from {

  473.     -moz-transform: rotate(270deg); }

  474. 

  475.   to {

  476.     -moz-transform: rotate(90deg); } }

  477. 

  478. .image-rotate-270-90 {

  479.   -moz-animation: rotate-270-90 0.25s linear;

  480.   -moz-transform: rotate(90deg); }

  481. 

  482. @-o-keyframes rotate-270-90 {

  483.   from {

  484.     -o-transform: rotate(270deg); }

  485. 

  486.   to {

  487.     -o-transform: rotate(90deg); } }

  488. 

  489. .image-rotate-270-90 {

  490.   -o-animation: rotate-270-90 0.25s linear;

  491.   -o-transform: rotate(90deg); }

  492. 

  493. @-ms-keyframes rotate-270-90 {

  494.   from {

  495.     -ms-transform: rotate(270deg); }

  496. 

  497.   to {

  498.     -ms-transform: rotate(90deg); } }

  499. 

  500. .image-rotate-270-90 {

  501.   -ms-animation: rotate-270-90 0.25s linear;

  502.   -ms-transform: rotate(90deg); }

  503. 

  504. @-webkit-keyframes rotate-270-180 {

  505.   from {

  506.     -webkit-transform: rotate(270deg); }

  507. 

  508.   to {

  509.     -webkit-transform: rotate(180deg); } }

  510. 

  511. .image-rotate-270-180 {

  512.   -webkit-animation: rotate-270-180 0.25s linear;

  513.   -webkit-transform: rotate(180deg); }

  514. 

  515. @-moz-keyframes rotate-270-180 {

  516.   from {

  517.     -moz-transform: rotate(270deg); }

  518. 

  519.   to {

  520.     -moz-transform: rotate(180deg); } }

  521. 

  522. .image-rotate-270-180 {

  523.   -moz-animation: rotate-270-180 0.25s linear;

  524.   -moz-transform: rotate(180deg); }

  525. 

  526. @-o-keyframes rotate-270-180 {

  527.   from {

  528.     -o-transform: rotate(270deg); }

  529. 

  530.   to {

  531.     -o-transform: rotate(180deg); } }

  532. 

  533. .image-rotate-270-180 {

  534.   -o-animation: rotate-270-180 0.25s linear;

  535.   -o-transform: rotate(180deg); }

  536. 

  537. @-ms-keyframes rotate-270-180 {

  538.   from {

  539.     -ms-transform: rotate(270deg); }

  540. 

  541.   to {

  542.     -ms-transform: rotate(180deg); } }

  543. 

  544. .image-rotate-270-180 {

  545.   -ms-animation: rotate-270-180 0.25s linear;

  546.   -ms-transform: rotate(180deg); }

  547. 

  548. .format-and-crop-container-top,

  549. .format-and-crop-container-bottom {

  550.   width: 350px; }

  551. 

  552. .format-and-crop-container-top .image-style-description {

  553.   display: none;

  554.   padding-left: 26px;

  555.   background: transparent url(../images/warning.png) no-repeat left center; }

  556. 

  557. .format-and-crop-container-bottom {

  558.   position: relative;

  559.   display: none; }

  560.   .format-and-crop-container-bottom .crop-warning,

  561.   .format-and-crop-container-bottom .scale-warning {

  562.     display: none; }

  563.   .format-and-crop-container-bottom .crop-dimensions-container .crop-aspect-ratio-lock {

  564.     cursor: pointer; }

  565.   .format-and-crop-container-bottom .crop-dimensions-container .crop-aspect-ratio-unlock {

  566.     display: none;

  567.     cursor: pointer; }

  568.   .format-and-crop-container-bottom .rotate-image-container .rotate-right-button,

  569.   .format-and-crop-container-bottom .rotate-image-container .rotate-left-button {

  570.     display: block;

  571.     line-height: 15px;

  572.     height: 15px;

  573.     padding-left: 15px; }

  574.     .format-and-crop-container-bottom .rotate-image-container .rotate-right-button span,

  575.     .format-and-crop-container-bottom .rotate-image-container .rotate-left-button span {

  576.       display: block;

  577.       padding-left: 3px; }

  578.   .format-and-crop-container-bottom .rotate-image-container .rotate-right-button {

  579.     background: transparent url(../images/rotate.png) no-repeat 0px 0px; }

  580.   .format-and-crop-container-bottom .rotate-image-container .rotate-left-button {

  581.     background: transparent url(../images/rotate.png) no-repeat 0px -21px; }

  582. 

  583. .enable-interface,

  584. .disable-interface {

  585.   cursor: pointer; }