/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

/*
richcombo.css (part of editor.css)
=================================

This file holds the style set of the "Rich Combo" widget which is commonly used
in the toolbar. It doesn't, however, styles the panel that is displayed when
clicking on the combo, which is instead styled by panel.css.

The visual representation of a rich combo widget looks as follows:

+-- .cke_combo----------------------------------------------------------------------+
| +-- .cke_combo_label --+ +-- .cke_combo_button ---------------------------------+ |
| |                      | | +-- .cke_combo_text --+ +-- .cke_combo_open -------+ | |
| |                      | | |                     | | +-- .cke_combo_arrow --+ | | |
| |                      | | |                     | | |                      | | | |
| |                      | | |                     | | +----------------------+ | | |
| |                      | | +---------------------+ +--------------------------+ | |
| +----------------------+ +------------------------------------------------------+ |
+-----------------------------------------------------------------------------------+
*/

/* The box that hold the entire combo widget */
.cke_combo
{
  display: inline-block;
  float: left;
}

.cke_rtl .cke_combo
{
  float: right;
}

/* The label of the combo widget. It is invisible by default, yet
it's important for semantics and accessibility. */
.cke_combo_label
{
  display: none;
  float: left;
  line-height: 26px;
  vertical-align: top;
  margin-right: 5px;
}

.cke_rtl .cke_combo_label
{
  float: right;
  margin-left: 5px;
  margin-right: 0;
}

/* The container for combo text and arrow. */
.cke_combo_button
{
  display: inline-block;
  float: left;
  margin: 0 6px 5px 0;

  border: 1px solid #070707;
  border-bottom-color: #060606;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;

  background: #404040;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#404040));
  background-image: -moz-linear-gradient(top, #595959, #404040);
  background-image: -webkit-linear-gradient(top, #595959, #404040);
  background-image: -o-linear-gradient(top, #595959, #404040);
  background-image: -ms-linear-gradient(top, #595959, #404040);
  background-image: linear-gradient(top, #595959, #404040);
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff595959', endColorstr='#ff404040');
}

/* Different states of the container. */
a.cke_combo_button:hover,
a.cke_combo_button:focus
{
  background: #4c4c4c;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#4c4c4c));
  background-image: -moz-linear-gradient(top, #666, #4c4c4c);
  background-image: -webkit-linear-gradient(top, #666, #4c4c4c);
  background-image: -o-linear-gradient(top, #666, #4c4c4c);
  background-image: -ms-linear-gradient(top, #666, #4c4c4c);
  background-image: linear-gradient(top, #666, #4c4c4c);
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff666666', endColorstr='#ff4c4c4c');
}

a.cke_combo_button:active,
.cke_combo.cke_on a.cke_combo_button
{
  -moz-box-shadow: 0 0 8px rgba(0,0,0,.75) inset;
  -webkit-box-shadow: 0 0 8px rgba(0,0,0,.75) inset;
  box-shadow: 0 0 8px rgba(0,0,0,.75) inset;

  background: #1a1a1a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#1a1a1a));
  background-image: -moz-linear-gradient(top, #262626, #1a1a1a);
  background-image: -webkit-linear-gradient(top, #262626, #1a1a1a);
  background-image: -o-linear-gradient(top, #262626, #1a1a1a);
  background-image: -ms-linear-gradient(top, #262626, #1a1a1a);
  background-image: linear-gradient(top, #262626, #1a1a1a);
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ff262626', endColorstr='#ff1a1a1a');
}

a.cke_combo_button:active .cke_combo_text,
.cke_combo.cke_on .cke_combo_text
{
}


.cke_rtl .cke_combo_button
{
  float: right;
  margin-left: 5px;
  margin-right: 0;
}

/* The label that shows the current value of the rich combo.
   By default, it holds the name of the property.
   See: .cke_combo_inlinelabel */
.cke_combo_text
{
  line-height: 26px;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  cursor: default;
  color: #e5e5e5;
  text-shadow: 0 1px 0 #000;
  font-size: 11px;
  /*font-weight: bold;*/
}

.cke_rtl .cke_combo_text
{
  float: right;
  text-align: right;
  padding-left: 0;
  padding-right: 10px;
}

/* The label of the combo whose value hasn't been changed (it's default).
   It displays the name of the property the combo is responsible for. */
.cke_combo_inlinelabel
{
}

/* The handler which opens the panel of rich combo properties.
   It holds an arrow as a visual indicator. */
.cke_combo_open
{
  cursor: default;
  display: inline-block;
  font-size: 0;
  height: 19px;
  line-height: 17px;
  margin: 1px 7px 1px;
  width: 5px;
}


/* The arrow which is displayed inside of the .cke_combo_open handler. */
.cke_combo_arrow
{
  margin: 11px 0 0;
  float: left;

  /* Pure CSS Arrow */
  height: 0;
  width: 0;
  font-size: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #e6e6e6;
}
