1 // Reset

     2 

     3 .@{prefix}-container, .@{prefix}-container *, .@{prefix}-widget, .@{prefix}-widget *, .@{prefix}-reset {

     4 	margin: 0; padding: 0; border: 0; outline: 0;

     5 	vertical-align: top; background: transparent;

     6 	text-decoration: none; color: @text;

     7 	font-family: @font-family;

     8 	font-size: @font-size; text-shadow: none; float: none;

     9 	position: static; width: auto; height: auto;

    10 	white-space: nowrap; cursor: inherit;

    11 	-webkit-tap-highlight-color: transparent;

    12 	line-height: normal; font-weight: normal;

    13 	text-align: left;

    14 	-moz-box-sizing: content-box;

    15 	-webkit-box-sizing: content-box;

    16 	box-sizing: content-box;

    17 	direction: ltr;

    18 	max-width: none;

    19 }

    20 

    21 .@{prefix}-widget button {

    22 	-moz-box-sizing: border-box;

    23 	-webkit-box-sizing: border-box;

    24 	box-sizing: border-box;

    25 }

    26 

    27 .@{prefix}-container *[unselectable] {

    28 	-moz-user-select: none;

    29 	-webkit-user-select: none;

    30 	-o-user-select: none;

    31 	user-select: none;

    32 }

    33 // Variables

    34 // Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);

    35 // Example: @btn-primary-bg-hover-hlight;

    36 

    37 @prefix:                         mce;

    38 

    39 // Default font

    40 @font-family:                    "Helvetica Neue", Helvetica, Arial, sans-serif;

    41 @font-size:                      14px;

    42 @line-height:                    20px;

    43 @has-gradients:                  true;

    44 @has-radius:                     true;

    45 @has-boxshadow:                  true;

    46 

    47 // Text colors

    48 @text:                           #333;

    49 @text-inverse:                   white;

    50 @text-disabled:                  #aaa;

    51 @text-shadow:                    0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);

    52 @text-error:                     #aa0000;

    53 

    54 // Button

    55 @btn-text:                       @text;

    56 @btn-text-shadow:                @text-inverse;

    57 @btn-border-top:                 rgba(0, 0, 0, .1);

    58 @btn-border-right:               rgba(0, 0, 0, .1);

    59 @btn-border-bottom:              fadein(rgba(0, 0, 0, .1), 15%);

    60 @btn-border-left:                fadein(rgba(0, 0, 0, .1), 15%);

    61 @btn-split-border:               #bdbdbd;

    62 @btn-caret-border:               @btn-text;

    63 @btn-text-disabled:              @text-disabled;

    64 @btn-box-shadow:                 inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);

    65 @btn-box-shadow-active:          inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);

    66 @btn-box-disabled-opacity:       0.4;

    67 @btn-bg:                         white;

    68 @btn-bg-hlight:                  #D9D9D9;

    69 @btn-bg-hover:                   darken(@btn-bg, 5%);

    70 @btn-bg-hlight-hover:            darken(@btn-bg-hlight, 5%);

    71 

    72 @btn-primary-bg:                 #0088cc;

    73 @btn-primary-bg-hlight:          #0044cc;

    74 @btn-primary-bg-hover:           darken(@btn-primary-bg, 5%);

    75 @btn-primary-bg-hover-hlight:    darken(@btn-primary-bg-hlight, 5%);

    76 @btn-primary-text:               #fff;

    77 @btn-primary-text-shadow:        #333;

    78 @btn-primary-border-top:         mix(@btn-border-top, @btn-primary-bg, 50%);

    79 @btn-primary-border-right:       mix(@btn-border-right, @btn-primary-bg, 50%);

    80 @btn-primary-border-bottom:      mix(@btn-border-bottom, @btn-primary-bg, 50%);

    81 @btn-primary-border-left:        mix(@btn-border-left, @btn-primary-bg, 50%);

    82 

    83 // Menu

    84 @menuitem-text:                  @text;

    85 @menu-bg:                        #fff;

    86 @menu-border:                    rgba(0, 0, 0, 0.2);

    87 @menubar-border:                 mix(@panel-border, @panel-bg, 60%);

    88 @menuitem-text-inverse:          @text-inverse;

    89 @menubar-bg-active:              darken(@btn-bg, 10%);

    90 @menuitem-bg-hover:              #0081C2;

    91 @menuitem-bg-selected:           #08C;

    92 @menuitem-bg-selected-hlight:    #0077B3;

    93 @menuitem-bg-disabled:           #CCC;

    94 @menuitem-caret:                 @menuitem-text;

    95 @menuitem-caret-selected:        @menuitem-text-inverse;

    96 @menuitem-separator-top:         #CBCBCB;

    97 @menuitem-separator-bottom:      @menu-bg;

    98 @menuitem-bg-active:             #C8DEF4;

    99 @menuitem-text-active:           @text;

   100 @menuitem-preview-border-active: #aaa;

   101 

   102 // Panel

   103 @panel-border:                   #9E9E9E;

   104 @panel-bg:                       #FDFDFD;

   105 @panel-bg-hlight:                #DDD;

   106 

   107 // Tabs

   108 @tab-border:                     #c5c5c5;

   109 @tab-bg:                         #e3e3e3;

   110 @tab-bg-hover:                   #FDFDFD;

   111 @tab-bg-active:                  #FDFDFD;

   112 

   113 // Tooltip

   114 @tooltip-bg:                     #000;

   115 @tooltip-text:                   white;

   116 @tooltip-font-size:              11px;

   117 

   118 // Window

   119 @window-border:                  #c5c5c5;

   120 @window-head-border:             @window-border;

   121 @window-head-close:              mix(@text, @window-bg, 60%);

   122 @window-head-close-hover:        mix(@text, @window-bg, 40%);

   123 @window-foot-border:             @window-border;

   124 @window-foot-bg:                 @window-bg;

   125 @window-fullscreen-bg:           #FFF;

   126 @window-modalblock-bg:           #000;

   127 @window-modalblock-opacity:      0.3;

   128 @window-box-shadow:              0 3px 7px rgba(0, 0, 0, 0.3);

   129 @window-bg:                      #FFF;

   130 @window-title-font-size:         20px;

   131 

   132 // Popover

   133 @popover-bg:                     @window-bg;

   134 @popover-arrow-width:            10px;

   135 @popover-arrow:                  @window-bg;

   136 @popover-arrow-outer-width:      @popover-arrow-width + 1;

   137 @popover-arrow-outer:            rgba(0, 0, 0, 0.25);

   138 

   139 // Floatpanel

   140 @floatpanel-box-shadow:          0 5px 10px rgba(0, 0, 0, .2);

   141 

   142 // Checkbox

   143 @checkbox-bg:                    @btn-bg;

   144 @checkbox-bg-hlight:             @btn-bg-hlight;

   145 @checkbox-box-shadow:            inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);

   146 @checkbox-border:                #c5c5c5;

   147 @checkbox-border-focus:          rgba(82, 168, 236, .8);

   148 

   149 // Path

   150 @path-text:                      @text;

   151 @path-bg-focus:                  #666;

   152 @path-text-focus:                #fff;

   153 

   154 // Textbox

   155 @textbox-text-placeholder:       #aaa;

   156 @textbox-box-shadow:             inset 0 1px 1px rgba(0, 0, 0, 0.075);

   157 @textbox-bg:                     #fff;

   158 @textbox-border:                 #c5c5c5;

   159 @textbox-border-focus:           rgba(82, 168, 236, .8);

   160 

   161 // Throbber

   162 @throbber-bg:                    #fff url('img/loader.gif') no-repeat center center;

   163 

   164 // Combobox

   165 @combobox-border:                @textbox-border;

   166 

   167 // Colorpicker

   168 @colorpicker-border:             @textbox-border;

   169 @colorpicker-hue-bg:             #fff;

   170 @colorpicker-hue-border:         #333;

   171 

   172 // Grid

   173 @grid-bg-active:                 @menuitem-bg-active;

   174 @grid-border-active:             #a1a1a1;

   175 @grid-border:                    #d6d6d6;

   176 

   177 // Misc

   178 @colorbtn-backcolor-bg:          #BBB;

   179 @iframe-border:                  @panel-border;

   180 // Mixins

   181 

   182 .opacity(@opacity) {

   183 	opacity: @opacity;

   184 	@opacityie: @opacity * 100;

   185 	filter: ~"alpha(opacity=@{opacityie})";

   186 	zoom: 1;

   187 }

   188 

   189 .vertical-gradient(@startColor, @endColor) when (@has-gradients = true) {

   190 	background-color: mix(@startColor, @endColor, 60%);

   191 	background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+

   192 	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+

   193 	background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+

   194 	background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10

   195 	background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

   196 	background-repeat: repeat-x;

   197 	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor)));

   198 	zoom: 1;

   199 }

   200 

   201 .vertical-gradient(@startColor, @endColor) when (@has-gradients = false) {

   202 	background-color: mix(@startColor, @endColor, 60%);

   203 }

   204 

   205 .border-radius(@radius) when (@has-radius = true) {

   206 	-webkit-border-radius: @radius;

   207 	-moz-border-radius: @radius;

   208 	border-radius: @radius;

   209 }

   210 

   211 .box-shadow(@shadowA, @shadowB:X, ...) when (@has-boxshadow = true) {

   212 	// Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/

   213 	@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

   214 	-webkit-box-shadow: @props;

   215 	-moz-box-shadow: @props;

   216 	box-shadow: @props;

   217 }

   218 

   219 .transition(@transition) {

   220 	-webkit-transition: @transition;

   221 	transition: @transition;

   222 }

   223 

   224 .inline-block() {

   225 	display: inline-block;

   226 	*display: inline;

   227 	*zoom: 1;

   228 }

   229 

   230 .reset-gradient() {

   231 	filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));

   232 	background: transparent;

   233 }

   234 // Animations

   235 

   236 .@{prefix}-fade {

   237 	opacity: 0;

   238 	.transition(opacity .15s linear);

   239 

   240 	&.@{prefix}-in {

   241 		opacity: 1;

   242 	}

   243 }

   244 .@{prefix}-tinymce {

   245 	// Avoid FOUC

   246 	visibility: inherit !important;

   247 	position: relative;

   248 }

   249 

   250 .@{prefix}-fullscreen {

   251 	border: 0; padding: 0; margin: 0;

   252 	overflow: hidden;

   253 	height: 100%;

   254 	z-index: 100;

   255 }

   256 

   257 div.@{prefix}-fullscreen {

   258 	position: fixed;

   259 	top: 0; left: 0;

   260 	width: 100%;

   261 	height: auto;

   262 }

   263 

   264 .@{prefix}-tinymce {

   265 	display: block;

   266 	.border-radius(2px);

   267 }

   268 

   269 .@{prefix}-wordcount {

   270 	position: absolute;

   271 	top: 0;

   272 	right: 0;

   273 	padding: 8px;

   274 }

   275 

   276 div.@{prefix}-edit-area {

   277 	background: #FFF;

   278 	filter: none;

   279 }

   280 

   281 .@{prefix}-statusbar {

   282 	position: relative;

   283 }

   284 

   285 .@{prefix}-statusbar .@{prefix}-container-body {

   286 	position: relative;

   287 }

   288 

   289 .@{prefix}-fullscreen .@{prefix}-resizehandle {

   290 	display: none;

   291 }

   292 

   293 // Charmap

   294 

   295 .@{prefix}-charmap {

   296 	border-collapse: collapse;

   297 }

   298 

   299 .@{prefix}-charmap td {

   300 	cursor: default;

   301 	border: 1px solid @panel-border;

   302 	width: 20px;

   303 	height: 20px;

   304 	line-height: 20px;

   305 	text-align: center;

   306 	vertical-align: middle;

   307 	padding: 2px;

   308 }

   309 

   310 .@{prefix}-charmap td div {

   311 	text-align: center;

   312 }

   313 

   314 .@{prefix}-charmap td:hover {

   315 	background: @btn-bg-hlight;

   316 }

   317 

   318 .@{prefix}-grid td.@{prefix}-grid-cell div {

   319 	border: 1px solid @grid-border;

   320 	width: 15px; height: 15px;

   321 	margin: 0px;

   322 	cursor: pointer;

   323 

   324 	&:focus {

   325 		border-color: @grid-border-active;

   326 	}

   327 

   328 	&[disabled] {

   329 		cursor: not-allowed;

   330 	}

   331 }

   332 

   333 .@{prefix}-grid {

   334 	border-spacing: 2px;

   335 	border-collapse: separate;

   336 

   337 	a {

   338 		display: block;

   339 		border: 1px solid transparent;

   340 

   341 		&:hover, &:focus {

   342 			border-color: @grid-border-active;

   343 		}

   344 	}

   345 }

   346 

   347 .@{prefix}-grid-border {

   348 	margin: 0 4px 0 4px;

   349 

   350 	a {

   351 		border-color: @grid-border;

   352 		width: 13px; height: 13px;

   353 	}

   354 

   355 	a:hover, a.@{prefix}-active {

   356 		border-color: @grid-border-active;

   357 		background: @grid-bg-active;

   358 	}

   359 }

   360 

   361 .@{prefix}-text-center {

   362 	text-align: center;

   363 }

   364 

   365 div.@{prefix}-tinymce-inline {

   366 	width: 100%;

   367 	.box-shadow(none);

   368 }

   369 

   370 .@{prefix}-colorbtn-trans div {

   371 	text-align: center;

   372 	vertical-align: middle;

   373 	font-weight: bold;

   374 	font-size: 20px;

   375 	line-height: 16px;

   376 	color: mix(@text, #fff, 70%);

   377 }

   378 

   379 // Reduce double margins between toolbar rows

   380 

   381 .@{prefix}-toolbar-grp {

   382 	padding-bottom: 2px;

   383 }

   384 

   385 .@{prefix}-toolbar-grp .@{prefix}-flow-layout-item {

   386 	margin-bottom: 0;

   387 }

   388 

   389 // RTL

   390 

   391 .@{prefix}-rtl .@{prefix}-wordcount {

   392 	left: 0;

   393 	right: auto;

   394 }

   395 // Container

   396 

   397 .@{prefix}-container, .@{prefix}-container-body {

   398 	display: block;

   399 }

   400 

   401 .@{prefix}-autoscroll {

   402 	overflow: hidden;

   403 }

   404 // Scrollbar

   405 

   406 .@{prefix}-scrollbar {

   407 	position: absolute;

   408 	width: 7px;

   409 	height: 100%;

   410 	top: 2px;

   411 	right: 2px;

   412 	.opacity(0.4);

   413 }

   414 

   415 .@{prefix}-scrollbar-h {

   416 	top: auto;

   417 	right: auto;

   418 	left: 2px;

   419 	bottom: 2px;

   420 	width: 100%;

   421 	height: 7px;

   422 }

   423 

   424 .@{prefix}-scrollbar-thumb {

   425 	position: absolute;

   426 	background-color: #000;

   427 	border: 1px solid #888;

   428 	border-color: rgba(85, 85, 85, .6);

   429 	width: 5px;

   430 	height: 100%;

   431 	.border-radius(7px);

   432 }

   433 

   434 .@{prefix}-scrollbar-h .@{prefix}-scrollbar-thumb {

   435 	width: 100%;

   436 	height: 5px;

   437 }

   438 

   439 .@{prefix}-scrollbar:hover, .@{prefix}-scrollbar.@{prefix}-active {

   440 	background-color: #AAA;

   441 	.opacity(0.6);

   442 	.border-radius(7px);

   443 }

   444 

   445 .@{prefix}-scroll {

   446 	position: relative;

   447 }

   448 // Panel

   449 

   450 .@{prefix}-panel {

   451 	border: 0 solid @panel-border;

   452 	.vertical-gradient(@panel-bg, @panel-bg-hlight);

   453 }

   454 // FloatPanel

   455 

   456 .@{prefix}-floatpanel {

   457 	position: absolute;

   458 	.box-shadow(@floatpanel-box-shadow);

   459 }

   460 

   461 .@{prefix}-floatpanel.@{prefix}-fixed {

   462 	position: fixed;

   463 }

   464 

   465 // Popover panel

   466 

   467 .@{prefix}-floatpanel .@{prefix}-arrow,

   468 .@{prefix}-floatpanel .@{prefix}-arrow:after {

   469 	position: absolute;

   470 	display: block;

   471 	width: 0;

   472 	height: 0;

   473 	border-color: transparent;

   474 	border-style: solid;

   475 }

   476 

   477 .@{prefix}-floatpanel .@{prefix}-arrow {

   478 	border-width: @popover-arrow-outer-width;

   479 }

   480 

   481 .@{prefix}-floatpanel .@{prefix}-arrow:after {

   482 	border-width: @popover-arrow-width;

   483 	content: "";

   484 }

   485 

   486 .@{prefix}-floatpanel.@{prefix}-popover {

   487 	.reset-gradient();

   488 	.border-radius(6px);

   489 	.box-shadow(@floatpanel-box-shadow);

   490 	top: 0;

   491 	left: 0;

   492 	background: @popover-bg;

   493 	border: 1px solid @panel-border;

   494 	border: 1px solid @popover-arrow-outer;

   495 

   496 	&.@{prefix}-bottom {

   497 		margin-top: @popover-arrow-width;

   498 		*margin-top: 0;

   499 

   500 		& > .@{prefix}-arrow {

   501 			left: 50%;

   502 			margin-left: -@popover-arrow-outer-width;

   503 			border-top-width: 0;

   504 			border-bottom-color: @panel-border;

   505 			border-bottom-color: @popover-arrow-outer;

   506 			top: -@popover-arrow-outer-width;

   507 

   508 			&:after {

   509 				top: 1px;

   510 				margin-left: -@popover-arrow-width;

   511 				border-top-width: 0;

   512 				border-bottom-color: @popover-arrow;

   513 			}

   514 		}

   515 

   516 		&.@{prefix}-start { margin-left: -22px; }

   517 		&.@{prefix}-start > .@{prefix}-arrow { left: 20px; }

   518 

   519 		&.@{prefix}-end { margin-left: 22px; }

   520 		&.@{prefix}-end > .@{prefix}-arrow { right: 10px; left: auto; }

   521 	}

   522 }// Window

   523 

   524 .@{prefix}-fullscreen {

   525 	border: 0; padding: 0; margin: 0;

   526 	overflow: hidden;

   527 	background: @window-fullscreen-bg;

   528 	height: 100%;

   529 }

   530 

   531 div.@{prefix}-fullscreen {

   532 	position: fixed;

   533 	top: 0; left: 0;

   534 }

   535 

   536 #@{prefix}-modal-block {

   537 	.opacity(0);

   538 	position: fixed;

   539 	left: 0; top: 0;

   540 	width: 100%; height: 100%;

   541 	background: @window-modalblock-bg;

   542 }

   543 

   544 #@{prefix}-modal-block.@{prefix}-in {

   545 	.opacity(@window-modalblock-opacity);

   546 }

   547 

   548 .@{prefix}-window-move {

   549 	cursor: move;

   550 }

   551 

   552 .@{prefix}-window {

   553 	.border-radius(6px);

   554 	.box-shadow(@window-box-shadow);

   555 	.reset-gradient();

   556 	background: @window-bg;

   557 	position: fixed;

   558 	top: 0; left: 0;

   559 	opacity: 0;

   560 	.transition(opacity 150ms ease-in);

   561 }

   562 

   563 .@{prefix}-window.@{prefix}-in {

   564 	opacity: 1;

   565 }

   566 

   567 .@{prefix}-window-head {

   568 	padding: 9px 15px;

   569 	border-bottom: 1px solid @window-head-border;

   570 	position: relative;

   571 }

   572 

   573 .@{prefix}-window-head .@{prefix}-close {

   574 	position: absolute;

   575 	right: 15px;

   576 	top: 9px;

   577 	font-size: 20px;

   578 	font-weight: bold;

   579 	line-height: 20px;

   580 	color: @window-head-close;

   581 	cursor: pointer;

   582 

   583 	// IE7

   584 	height: 20px;

   585 	overflow: hidden;

   586 }

   587 

   588 .@{prefix}-close:hover {

   589 	color: @window-head-close-hover;

   590 }

   591 

   592 .@{prefix}-window-head .@{prefix}-title {

   593 	line-height: 20px;

   594 	font-size: @window-title-font-size;

   595 	font-weight: bold;

   596 	text-rendering: optimizelegibility;

   597 	padding-right: 10px;

   598 }

   599 

   600 .@{prefix}-window .@{prefix}-container-body {

   601 	display: block;

   602 }

   603 

   604 .@{prefix}-foot {

   605 	display: block;

   606 	background-color: @window-foot-bg;

   607 	border-top: 1px solid @window-foot-border;

   608 	.border-radius(0 0 6px 6px);

   609 }

   610 

   611 .@{prefix}-window-head .@{prefix}-dragh {

   612 	position: absolute;

   613 	top: 0; left: 0;

   614 	cursor: move;

   615 	width: 90%;

   616 	height: 100%;

   617 }

   618 

   619 .@{prefix}-window iframe {

   620 	width: 100%;

   621 	height: 100%;

   622 }

   623 

   624 .@{prefix}-window.@{prefix}-fullscreen, .@{prefix}-window.@{prefix}-fullscreen .@{prefix}-foot {

   625 	.border-radius(0);

   626 }

   627 

   628 // RTL

   629 

   630 .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-close {

   631 	position: absolute;

   632 	right: auto;

   633 	left: 15px;

   634 }

   635 

   636 .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-dragh {

   637 	left: auto;

   638 	right: 0;

   639 }

   640 

   641 .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-title {

   642 	direction: rtl;

   643 	text-align: right;

   644 }

   645 // AbsoluteLayout

   646 

   647 .@{prefix}-abs-layout {

   648 	position: relative;

   649 }

   650 

   651 body .@{prefix}-abs-layout-item, .@{prefix}-abs-end {

   652 	position: absolute;

   653 }

   654 

   655 .@{prefix}-abs-end {

   656 	width: 1px; height: 1px;

   657 }

   658 

   659 .@{prefix}-container-body.@{prefix}-abs-layout {

   660 	overflow: hidden;

   661 }

   662 // Tooltip

   663 

   664 .@{prefix}-tooltip {

   665 	position: absolute;

   666 	padding: 5px;

   667 	.opacity(0.8);

   668 }

   669 

   670 .@{prefix}-tooltip-inner {

   671 	font-size: @tooltip-font-size;

   672 	background-color: @tooltip-bg;

   673 	color: @tooltip-text;

   674 	max-width: 200px;

   675 	padding: 5px 8px 4px 8px;

   676 	text-align: center;

   677 	white-space: normal;

   678 }

   679 

   680 .@{prefix}-tooltip-inner {

   681 	.border-radius(3px);

   682 }

   683 

   684 .@{prefix}-tooltip-inner {

   685 	.box-shadow(0 0 5px @tooltip-bg);

   686 }

   687 

   688 .@{prefix}-tooltip-arrow {

   689 	position: absolute;

   690 	width: 0;

   691 	height: 0;

   692 	line-height: 0;

   693 	border: 5px dashed @tooltip-bg;

   694 }

   695 

   696 .@{prefix}-tooltip-arrow-n {

   697 	border-bottom-color: @tooltip-bg;

   698 }

   699 

   700 .@{prefix}-tooltip-arrow-s {

   701 	border-top-color: @tooltip-bg;

   702 }

   703 

   704 .@{prefix}-tooltip-arrow-e {

   705 	border-left-color: @tooltip-bg;

   706 }

   707 

   708 .@{prefix}-tooltip-arrow-w {

   709 	border-right-color: @tooltip-bg;

   710 }

   711 

   712 .@{prefix}-tooltip-nw, .@{prefix}-tooltip-sw {

   713 	margin-left: -14px;

   714 }

   715 

   716 .@{prefix}-tooltip-n .@{prefix}-tooltip-arrow {

   717 	top: 0px;

   718 	left: 50%;

   719 	margin-left: -5px;

   720 	border-bottom-style: solid;

   721 	border-top: none;

   722 	border-left-color: transparent;

   723 	border-right-color: transparent;

   724 }

   725 

   726 .@{prefix}-tooltip-nw .@{prefix}-tooltip-arrow {

   727 	top: 0;

   728 	left: 10px;

   729 	border-bottom-style: solid;

   730 	border-top: none;

   731 	border-left-color: transparent;

   732 	border-right-color: transparent;

   733 }

   734 

   735 .@{prefix}-tooltip-ne .@{prefix}-tooltip-arrow {

   736 	top: 0;

   737 	right: 10px;

   738 	border-bottom-style: solid;

   739 	border-top: none;

   740 	border-left-color: transparent;

   741 	border-right-color: transparent;

   742 }

   743 

   744 .@{prefix}-tooltip-s .@{prefix}-tooltip-arrow {

   745 	bottom: 0;

   746 	left: 50%;

   747 	margin-left: -5px;

   748 	border-top-style: solid;

   749 	border-bottom: none;

   750 	border-left-color: transparent;

   751 	border-right-color: transparent;

   752 }

   753 

   754 .@{prefix}-tooltip-sw .@{prefix}-tooltip-arrow {

   755 	bottom: 0;

   756 	left: 10px;

   757 	border-top-style: solid;

   758 	border-bottom: none;

   759 	border-left-color: transparent;

   760 	border-right-color: transparent;

   761 }

   762 

   763 .@{prefix}-tooltip-se .@{prefix}-tooltip-arrow {

   764 	bottom: 0;

   765 	right: 10px;

   766 	border-top-style: solid;

   767 	border-bottom: none;

   768 	border-left-color: transparent;

   769 	border-right-color: transparent;

   770 }

   771 

   772 .@{prefix}-tooltip-e .@{prefix}-tooltip-arrow {

   773 	right: 0;

   774 	top: 50%;

   775 	margin-top: -5px;

   776 	border-left-style: solid;

   777 	border-right: none;

   778 	border-top-color: transparent;

   779 	border-bottom-color: transparent;

   780 }

   781 

   782 .@{prefix}-tooltip-w .@{prefix}-tooltip-arrow {

   783 	left: 0;

   784 	top: 50%;

   785 	margin-top: -5px;

   786 	border-right-style: solid;

   787 	border-left: none;

   788 	border-top-color: transparent;

   789 	border-bottom-color: transparent;

   790 }

   791 // Button

   792 

   793 .@{prefix}-btn {

   794 	border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);

   795 	border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;

   796 	position: relative;

   797 	text-shadow: @text-shadow;

   798 

   799 	.inline-block();

   800 	.border-radius(3px);

   801 	.box-shadow(@btn-box-shadow);

   802 	.vertical-gradient(@btn-bg, @btn-bg-hlight);

   803 

   804 	&:hover, &:focus {

   805 		color: @btn-text;

   806 		.vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));

   807 	}

   808 

   809 	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {

   810 		cursor: default;

   811 		.box-shadow(none);

   812 		.opacity(@btn-box-disabled-opacity);

   813 	}

   814 

   815 	&.@{prefix}-active, &.@{prefix}-active:hover {

   816 		.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));

   817 		.box-shadow(@btn-box-shadow-active);

   818 	}

   819 

   820 	&:active {

   821 		.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 10%));

   822 		.box-shadow(@btn-box-shadow-active);

   823 	}

   824 }

   825 

   826 .@{prefix}-btn button {

   827 	padding: 4px 10px;

   828 	font-size: @font-size;

   829 	line-height: @line-height;

   830 	*line-height: @line-height - 4px;

   831 	cursor: pointer;

   832 	color: @btn-text;

   833 	text-align: center;

   834 

   835 	// Fixes for default inner padding of button

   836 	overflow: visible; // IE7

   837 	-webkit-appearance: none; // WebKit

   838 	&::-moz-focus-inner { // Gecko

   839 		border: 0;

   840 		padding: 0;

   841 	}

   842 }

   843 

   844 .@{prefix}-btn i {

   845 	text-shadow: 1px 1px @btn-text-shadow;

   846 }

   847 

   848 .@{prefix}-primary {

   849 	min-width: 50px;

   850 	color: @btn-primary-text;

   851 	border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);

   852 	border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;

   853 	.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);

   854 

   855 	&:hover, &:focus {

   856 		.vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));

   857 	}

   858 

   859 	&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {

   860 		cursor: default;

   861 		.box-shadow(none);

   862 		.opacity(@btn-box-disabled-opacity);

   863 	}

   864 

   865 	&.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {

   866 		.vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));

   867 		.box-shadow(@btn-box-shadow-active);

   868 	}

   869 }

   870 

   871 .@{prefix}-primary button, .@{prefix}-primary button i {

   872 	color: @btn-primary-text;

   873 	text-shadow: 1px 1px @btn-primary-text-shadow;

   874 }

   875 

   876 .@{prefix}-btn-large button {

   877 	padding: 9px 14px;

   878 	font-size: @font-size + 2px;

   879 	line-height: normal;

   880 	.border-radius(5px);

   881 }

   882 

   883 .@{prefix}-btn-large i {

   884 	margin-top: 2px;

   885 }

   886 

   887 .@{prefix}-btn-small button {

   888 	padding: 1px 5px;

   889 	font-size: @font-size - 2px;

   890 	*padding-bottom: 2px;

   891 }

   892 

   893 .@{prefix}-btn-small i {

   894 	line-height: 20px;

   895 	vertical-align: top;

   896 	*line-height: 18px;

   897 }

   898 

   899 .@{prefix}-btn .@{prefix}-caret {

   900 	margin-top: 8px;

   901 	margin-left: 0;

   902 }

   903 

   904 .@{prefix}-btn-small .@{prefix}-caret {

   905 	margin-top: 8px;

   906 	margin-left: 0;

   907 }

   908 

   909 .@{prefix}-caret {

   910 	.inline-block();

   911 	width: 0; height: 0;

   912 	vertical-align: top;

   913 	border-top: 4px solid @btn-caret-border;

   914 	border-right: 4px solid transparent;

   915 	border-left: 4px solid transparent;

   916 	content: "";

   917 }

   918 

   919 .@{prefix}-disabled .@{prefix}-caret {

   920 	border-top-color: @text-disabled;

   921 }

   922 

   923 .@{prefix}-caret.@{prefix}-up {

   924 	border-bottom: 4px solid @btn-caret-border;

   925 	border-top: 0;

   926 }

   927 

   928 .@{prefix}-btn-flat {

   929 	border: 0;

   930 	background: transparent;

   931 	.border-radius(0);

   932 	.box-shadow(none);

   933 	filter: none;

   934 }

   935 

   936 .@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {

   937 	border: 0;

   938 	background: @menubar-bg-active;

   939 	filter: none;

   940 	.box-shadow(none);

   941 }

   942 

   943 // RTL

   944 

   945 .@{prefix}-rtl .@{prefix}-btn button {

   946 	direction: rtl;

   947 }

   948 // ButtonGroup

   949 

   950 .@{prefix}-btn-group .@{prefix}-btn {

   951 	border-width: 1px 0 1px 0;

   952 	margin: 0;

   953 	.border-radius(0);

   954 }

   955 

   956 .@{prefix}-btn-group .@{prefix}-first {

   957 	border-left: 1px solid mix(rgb(red(@btn-border-left), green(@btn-border-left), blue(@btn-border-left)), @panel-bg, 30%);

   958 	border-left: 1px solid @btn-border-left;

   959 	.border-radius(3px 0 0 3px);

   960 }

   961 

   962 .@{prefix}-btn-group .@{prefix}-last {

   963 	border-right: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);

   964 	border-right: 1px solid @btn-border-right;

   965 	.border-radius(0 3px 3px 0);

   966 }

   967 

   968 .@{prefix}-btn-group .@{prefix}-first.@{prefix}-last {

   969 	.border-radius(3px);

   970 }

   971 

   972 .@{prefix}-btn-group .@{prefix}-btn.@{prefix}-flow-layout-item {

   973 	margin: 0;

   974 }

   975 // Checkbox

   976 

   977 .@{prefix}-checkbox {

   978 	cursor: pointer;

   979 }

   980 

   981 i.@{prefix}-i-checkbox {

   982 	margin: 0 3px 0 0;

   983 	border: 1px solid @checkbox-border;

   984 	.border-radius(3px);

   985 	.box-shadow(@checkbox-box-shadow);

   986 	.vertical-gradient(@checkbox-bg, @checkbox-bg-hlight);

   987 	text-indent: -10em;

   988 	*font-size: 0;

   989 	*line-height: 0;

   990 	*text-indent: 0;

   991 	overflow: hidden;

   992 }

   993 

   994 .@{prefix}-checked i.@{prefix}-i-checkbox {

   995 	color: @btn-text;

   996 	font-size: 16px;

   997 	line-height: 16px;

   998 	text-indent: 0;

   999 }

  1000 

  1001 .@{prefix}-checkbox:focus i.@{prefix}-i-checkbox, .@{prefix}-checkbox.@{prefix}-focus i.@{prefix}-i-checkbox {

  1002 	border: 1px solid @checkbox-border-focus;

  1003 	.box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@checkbox-border-focus, 15%));

  1004 }

  1005 

  1006 .@{prefix}-checkbox.@{prefix}-disabled .@{prefix}-label, .@{prefix}-checkbox.@{prefix}-disabled i.@{prefix}-i-checkbox {

  1007 	color: mix(@text, @panel-bg, 40%);

  1008 }

  1009 

  1010 // RTL

  1011 

  1012 .@{prefix}-rtl .@{prefix}-checkbox {

  1013 	direction: rtl;

  1014 	text-align: right;

  1015 }

  1016 

  1017 .@{prefix}-rtl i.@{prefix}-i-checkbox {

  1018 	margin: 0 0 0 3px;

  1019 }

  1020 // ComboBox

  1021 

  1022 .@{prefix}-combobox {

  1023 	.inline-block();

  1024 	.border-radius(3px);

  1025 	.box-shadow(@textbox-box-shadow);

  1026 	*height: 32px;

  1027 }

  1028 

  1029 .@{prefix}-combobox input {

  1030 	border: 1px solid @textbox-border;

  1031 	border-right-color: @combobox-border;

  1032 	height: 28px;

  1033 }

  1034 

  1035 .@{prefix}-combobox.@{prefix}-disabled input {

  1036 	color: mix(@text, @textbox-bg, 40%);

  1037 }

  1038 

  1039 .@{prefix}-combobox.@{prefix}-has-open input {

  1040 	.border-radius(4px 0 0 4px);

  1041 }

  1042 

  1043 .@{prefix}-combobox .@{prefix}-btn {

  1044 	border-left: 0;

  1045 	.border-radius(0 4px 4px 0);

  1046 }

  1047 

  1048 .@{prefix}-combobox button {

  1049 	padding-right: 8px;

  1050 	padding-left: 8px;

  1051 }

  1052 

  1053 .@{prefix}-combobox.@{prefix}-disabled .@{prefix}-btn button {

  1054 	cursor: default;

  1055 	.box-shadow(none);

  1056 	.opacity(@btn-box-disabled-opacity);

  1057 }

  1058 // ColorBox

  1059 

  1060 .@{prefix}-colorbox i {

  1061 	border: 1px solid @textbox-border;

  1062 	width: 14px; height: 14px;

  1063 }

  1064 // ColorButton

  1065 

  1066 .@{prefix}-colorbutton .@{prefix}-ico {

  1067 	position: relative;

  1068 }

  1069 

  1070 .@{prefix}-colorbutton-grid {

  1071 	margin: 4px;	

  1072 }

  1073 

  1074 .@{prefix}-colorbutton button {

  1075 	padding-right: 4px;

  1076 }

  1077 

  1078 .@{prefix}-colorbutton .@{prefix}-preview {

  1079 	padding-right: 3px;

  1080 	display: block;

  1081 	position: absolute;

  1082 	left: 50%;

  1083 	top: 50%;

  1084 	margin-left: -14px;

  1085 	margin-top: 7px;

  1086 	background: gray;

  1087 	width: 13px;

  1088 	height: 2px;

  1089 	overflow: hidden;

  1090 }

  1091 

  1092 .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {

  1093 	margin-left: -16px;

  1094 	padding-right: 0;

  1095 	width: 16px;

  1096 }

  1097 

  1098 .@{prefix}-colorbutton .@{prefix}-open {

  1099 	padding-left: 4px;

  1100 	border-left: 1px solid transparent;

  1101 	border-right: 1px solid transparent;

  1102 }

  1103 

  1104 .@{prefix}-colorbutton:hover .@{prefix}-open {

  1105 	border-left-color: @btn-split-border;

  1106 	border-right-color: @btn-split-border;

  1107 }

  1108 

  1109 .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-open {

  1110 	padding: 0 3px 0 3px;

  1111 }

  1112 

  1113 // RTL

  1114 

  1115 .@{prefix}-rtl .@{prefix}-colorbutton {

  1116 	direction: rtl;

  1117 }

  1118 

  1119 .@{prefix}-rtl .@{prefix}-colorbutton .@{prefix}-preview {

  1120 	margin-left: 0;

  1121 	padding-right: 0;

  1122 	padding-left: 4px;

  1123 	margin-right: -14px;

  1124 }

  1125 

  1126 .@{prefix}-rtl .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {

  1127 	margin-left: 0;

  1128 	padding-right: 0;

  1129 	margin-right: -17px;

  1130 	padding-left: 0;

  1131 }

  1132 

  1133 .@{prefix}-rtl .@{prefix}-colorbutton button {

  1134 	padding-right: 10px;

  1135 	padding-left: 10px;