/*
 * "VA" in style names indicates they are intended for Visual Aid.
 *
 * The following colors are used for highlighting.  They are derived from
 * (by changing luminence) a color found in the toolbar icon for inserting
 * a Convio component:
 *     #c0c0df;
 *     #dfdfee;
 *     #ebebf5;
 */

noscript {
	display: none;
}

var {
	font-style: inherit;
}

/* Tried to only use 'inherit' instead of 'normal' to cancel the italics so that
   higher-level elements could set a value that would show through.
   But IE8 didn't honor that so the following explicit rules are needed.
*/
var.mceEditable,
var.mceNonEditable {
	font-style: normal;
}

address var.mceEditable,
address var.mceNonEditable,
i var.mceEditable,
i var.mceNonEditable,
em var.mceEditable,
em var.mceNonEditable {
	font-style: italic;
}

/* For "S" tags. */
.mceConvioComponent,
.mceConvioPersonalization *,
.mceConvioPersonalization {
	background-color: #ebebf5;
	cursor: default;
	white-space: nowrap;
}

/* For "S" tags and conditionals with Visual Aid on. */
.mceConvioComponentVA,
.mceConvioPersonalizationVA,
.mceConvioConditionalVA
{
	border: 1px dashed #c0c0df;
	background-color: #ebebf5;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	background-size: 1em auto;
	padding: 2px 3px 1px 24px;
	margin: 0px 2px;
}

.mceConvioPersonalizationVA {
	background-image: url(../../personalization/img/add_p13n.png);
	cursor: default;
	white-space: nowrap;
}

.mceConvioComponentVA {
	background-image: url(../../convio_component/img/convio_component.png);
	white-space: nowrap;
}

.mceConvioConditionalVA {
	display: inline-block;
	background-image: url(../../convio_conditional/img/convio_cond.png);
	overflow: hidden; /* keeps tab list border from extending too far */
	padding: 3px 3px;
}

.mceConvioWhenVA {
	display: inline-block; /* makes white background fill the box for FF3 */
	min-height: 1em; /* so user can get focus within empty node */
	background-color: #fff;
}

/* Container of tabs for selecting each condition of a conditional tag. */
.mceConvioConditionalTabList {
	display: block;
	border-bottom: 1px solid #c0c0df;
	padding-left: 18px;
	color: #000;
	cursor: default;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	-moz-user-select: none;
	-moz-user-focus: ignore;
}

/* Tabs for selecting each condition of a conditional tag. */
.mceConvioConditionalTab,
.mceConvioConditionalSelectedTab {
	border: 1px solid #c0c0df;
	padding: 0px 3px;
	margin-top: 1px; /* needed so top border shows and bottom border of selected tab is hidden (in FF) */
	margin-left: 3px;
	cursor: pointer;
	color: inherit;
	font-style: normal;
	text-decoration: none;
}

.mceConvioConditionalTab:hover,
.mceConvioConditionalSelectedTab:hover {
	color: blue;
}

.mceConvioConditionalTab {
	background-color: #dfdfee;
}

.mceConvioConditionalSelectedTab {
	background-color: #fff;
	border-bottom-color: #fff;
}