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

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

This file styles the basic structure of the CKEditor user interface - the box
that holds everything.

CKEditor offers two main editing modes. The main UI blocks that compose these
modes are:

	For "Theme UI" mode, the one most generally used:

	+-- .cke_chrome ----------------------+
	|+-- .cke_inner ---------------------+|
	|| +-- .cke_top -------------------+ ||
	|| |                               | ||
	|| +-------------------------------+ ||
	|| +-- .cke_contents --------------+ ||
	|| |                               | ||
	|| +-------------------------------+ ||
	|| +-- .cke_bottom ----------------+ ||
	|| |                               | ||
	|| +-------------------------------+ ||
	|+-----------------------------------+|
	+-------------------------------------+

	For "Inline Editing" mode:

	+-- .cke_chrome .cke_float------------+
	|+-- .cke_inner ---------------------+|
	|| +-- .cke_top -------------------+ ||
	|| |                               | ||
	|| +-------------------------------+ ||
	|+-----------------------------------+|
	+-------------------------------------+

Special outer level classes used in this file:

	.cke_hc: Available when the editor is rendered on "High Contrast".

*/

/* The outer boundary of the interface. */
.cke_chrome
{
	/* This is <span>, so transform it into a block.*/
	display: block;

	/* Rounded borders. */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 5px solid #eee;
}

.cke_hc.cke_chrome
{
	/* In HC, we don't have a visible inner border so we reduce the spacing a bit.*/
	padding: 2px;
}

/* The inner boundary of the interface. */
.cke_inner
{
	/* This is <span>, so transform it into a block.*/
	display: block;

	/* Rounded borders. */
	-webkit-touch-callout: none;

	/*border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;*/
	border: 1px solid #d6d6d6;

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

	/*background: #D4D2D0;*/
	background-color: #E6E6E6;
	overflow: hidden;
}

/* Added to the outer boundary of the UI when in inline editing,
   when the UI is floating. */
.cke_float
{
	/* Make white the space between the outer and the inner borders. */
	background: #fff;
}

.cke_float .cke_inner
{
	/* As we don't have blocks following top (toolbar) we suppress the padding
	   as the toolbar defines its own margin. */
	padding-bottom: 0;
}

/* The "contents" block of the UI. */
.cke_hc .cke_contents
{
	/* Show the editing area border in HC as we have no colors. */
	border: 1px solid black;
}

/* Make the main spaces enlarge to hold potentially floated content. */
.cke_top,
.cke_contents,
.cke_bottom
{
	/* These are <span>s, so transform them into blocks.*/
	display: block;

	/* Ideally this should be "auto", but it shows scrollbars in IE7. */
	overflow: hidden;
}

.cke_top
{
	background: url(images/custom/toolBg.png) repeat transparent;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: -1px;
	margin-left: -2px;
}

.cke_rtl .cke_top
{
	margin-left: 0px;
	margin-right: -2px;
}

.cke_bottom
{
	outline: 1px solid #e5e5e5;
	border-top: 1px solid #fff;
	background-color: #EBEBEB;
}

/* The resizer is the small UI element that is rendered at the bottom right
   part of the editor. It makes is possible to resize the editor UI. */
.cke_resizer
{
	/* To avoid using images for the resizer, we create a small triangle,
	   using some CSS magic. */
	width: 14px;
	height: 14px;
	overflow: hidden;
	margin: 10px 0 0;
	font-size: 0;

	float: right;
	vertical-align: bottom;

	background: url(images/custom/resizer.png) top left no-repeat;

	cursor: se-resize;
}

.cke_resizer_ltr
{
	margin-left: 5px;
}

/* This class is added in RTL mode. This is a special case for the resizer
   (usually the .cke_rtl class is used), because it may not necessarily be in
   RTL mode if the main UI is RTL. It depends instead on the context where the
   editor is inserted on. */
.cke_resizer_rtl
{
	float: left;
	border-color: transparent transparent transparent #EFEFEF;
	border-style: dashed dashed dashed solid;	/* dashed is for HC mode */
	margin-right: -12px;

	cursor: sw-resize;
}

/* For now, we avoid showing the resizer on HC becuase it can't be rendered
   properly. */
.cke_hc .cke_resizer
{
	width: 10px;
	height: 10px;
	border: 1px solid #fff;
	margin-left: 0;
}

.cke_hc .cke_resizer_rtl
{
	margin-right: 0;
}

/* The editing area (where users type) can be rendered as an editable <div>
   element (e.g. divarea plugin). In that case, this is the class applied to
   that element. */
.cke_wysiwyg_div
{
	display: block;
	height: 100%;
	overflow: auto;
	padding: 0 8px;
	outline-style: none;
}