/*
 * Copyright (c) 2013, webvariants GbR, http://www.webvariants.de
 *
 * This file is released under the terms of the MIT license. You can find the
 * complete text in the attached LICENSE file or online at:
 *
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Sally Mixin Library */
@import 'mixins.less';

.wym_skin_sallycms {
	.clearfix;
	background: white; /* for the fullscreen mode */

	p, h2, ul, li {
		margin: 0;
		padding: 0;
		border-width: 0;
		list-style: none;
	}

	h2, li {
		font-size: 12px;
	}

	/* rounded corners */

	.wym_html_val,
	.wym_iframe iframe,
	.wym_dropdown {
		border: 1px solid #B3B3B3;
		.border-radius(4px);
	}

	/* HTML editor (textarea) */

	.wym_html_val {
		height: 200px;
		font-family: monospace;
	}

	/* iframe */

	.wym_iframe iframe {
		height: 350px;
		background: white;
		margin-bottom: 0;
	}

	/* common defaults for all sections */

	.wym_section {
		margin-bottom: 5px;
		.clearfix;

		h2, h3 {
			padding: 1px 3px;
			margin: 0;
		}

		a {
			display: block;
			text-decoration: none;
			color: black;
		}

		li {
			padding: 2px;
			border: 1px solid transparent;
			cursor: pointer;
		}

		li:hover {
			background-color: #FAFAFA;
			border: 1px solid #B3B3B3;
			.border-radius(3px);
		}

		/* hide section titles by default */
		h2 {
			display: none;
		}
	}

	.wym_buttons {
		float: left;
	}

	/* dropdown menus */

	.wym_dropdown {
		padding: 0;
		width: 150px;
		float: right;
		margin-left: 5px;

		h2 {
			display: block;
		}

		ul {
			display: none;
			position: absolute;
			background: white;
			min-width: 144px;
			border: solid #B3B3B3;
			border-width: 0 1px 1px 1px;
			padding: 5px 3px 5px 3px;
			margin-left: -1px;

			.border-bottom-radius(3px);
		}

		&:hover, &.hover {
			border-bottom: 0 none;
			padding-bottom: 1px; /* smooth out missing border */
			background: white;
			.border-bottom-radius(0);

			ul   { display: block; }
			span { display: none;  }
		}
	}

	/* preview styles for known containers */

	.wym_containers_h1 { font-size: 20px; font-weight: bold; }
	.wym_containers_h2 { font-size: 18px; font-weight: bold; }
	.wym_containers_h3 { font-size: 16px; font-weight: bold; }
	.wym_containers_h4 { font-size: 16px; }
	.wym_containers_h5 { font-size: 14px; text-decoration: underline; }
	.wym_containers_h6 { font-size: 14px; font-style: italic; }

	/* option: add this class to a section to make its elements render buttons (icons are only available for the wym_tools section for now) */

	.wym_buttons {
		li {
			float: left;
		}

		a {
			width: 20px;
			height: 20px;
			overflow: hidden;
			background: url(icons.png) no-repeat;
			text-indent: -9999px;
		}

		/* image replacements */

		.wym_tools_strong a         { background-position: 0 -320px; }
		.wym_tools_emphasis a       { background-position: 0 -20px;  }
		.wym_tools_superscript a    { background-position: 0 -360px; }
		.wym_tools_subscript a      { background-position: 0 -380px; }
		.wym_tools_ordered_list a   { background-position: 0 -40px;  }
		.wym_tools_unordered_list a { background-position: 0 -60px;  }
		.wym_tools_indent a         { background-position: 0 -480px; }
		.wym_tools_outdent a        { background-position: 0 -500px; }
		.wym_tools_undo a           { background-position: 0 -420px; }
		.wym_tools_redo a           { background-position: 0 -440px; }
		.wym_tools_link a           { background-position: 0 -80px;  }
		.wym_tools_unlink a         { background-position: 0 -140px; }
		.wym_tools_image a          { background-position: 0 -100px; }
		.wym_tools_table a          { background-position: 0 -120px; }
		.wym_tools_paste a          { background-position: 0 -460px; }
		.wym_tools_html a           { background-position: 0 -160px; }
		.wym_tools_preview a        { background-position: 0 -340px; }
		.wym_tools_anchor a         { background-position: 0 -560px; }
		.wym_tools_email a          { background-position: 0 -520px; }
		.wym_tools_file a           { background-position: 0 -540px; }

		/* put some visual separators between icon groups */

		.separator, li.separator:hover {
			background: url(icons.png) no-repeat -8px -580px;
			width: 5px;
			height: 20px;
			padding: 3px 0;
			border: 0 none !important;
			border-radius: 0;
			cursor: default !important;
		}
	}

	.sly-form .wym_box&.wym-fullscreen {
		.wym_iframe, .wym_area_top, .wym_status, .wym_html {
			clear: left;
			margin: 0 auto;
			width: 95%;
			max-width: 1200px;
		}

		.wym_area_top {
			padding-top: 10px;
		}

		.wym_status {
			padding-top: 5px;
		}

		iframe, .wym_html_val {
			width: 100% !important;
		}
	}
}

/* dialogs */

.wym_dialog {
	font-family: Calibri, Verdana, Arial, sans-serif;
	color: #4D4646;
	font-size: 14px;
	line-height: 18px;
	background: #f2f2f2 url(../../../../../../../../backend/assets/body.png) 0 0 repeat-x;
	margin: 0;

	label, input {
		font-size: 14px;
		font-family: Calibri, Verdana, Arial, sans-serif;
	}

	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
	}

	form {
		margin: 10px;
	}

	legend {
		color: #fff;
		background-color: #4D4646;
		font-size: 1.1em;
		width: 530px;
		padding: 8px 0 8px 10px;
		.border-top-radius(4px);
	}

	.row {
		background: white;
		border-top: 1px dotted #aca9a9;
		padding: 7px;

		&.first, &:first-child {
			border-top: 0 none;
		}

		label {
			float: left;
			width: 115px;
			display: block;
			text-align: right;
			margin-right: 10px;
			line-height: 21px;
		}

		a {
			margin-left: 5px;
		}

		img {
			margin-bottom: -4px;
		}
	}

	img {
		border: 0;
	}

	.indented {
		padding-left: 132px;
	}

	input[type=text], input[type=email] {
		width: 304px;
		border: 1px solid #d9d9d9;
		padding: 1px 2px;
		height: 17px;
		margin: 0;
	}

	.sly-button, .wym_submit, .wym_cancel {
		background-image: url(../../../../../../../../backend/assets/button.png);
		background-repeat: repeat-x;
		padding: 1px 6px;
		height: 24px;
		color: #4d4646;
		border: 1px solid #d9d9d9;
		.border-radius(4px);
		font-size: 100%;
		font-family: inherit;
		width: auto;
		margin: 0 5px 0 0;

		&:active, &:focus {
			border: 1px solid #aca9a9;
		}
	}

	&_file input.wym_href, &_image input.wym_src, &_link input.wym_href {
		width: 280px;
	}

	&_image .image {
		text-align: center;

		img { max-width: 100% }
	}

	&_paste {
		legend {
			width: 530px;
		}

		.row {
			width: 525px;
			border-top: 0 none;
		}

		.row:last-child {
			border-top: 1px dotted #aca9a9;
		}

		textarea {
			height: 180px;
			width: 520px;
		}
	}
}

/*WYMEDITOR_LINK*/

a.wym_wymeditor_link {
	text-indent: -9999px;
	float: right;
	display: block;
	width: 50px;
	height: 15px;
	background: url(../wymeditor_icon.png);
	overflow: hidden;
	text-decoration: none;
}

/* SALLY-PATCH */

.sly-form .wym_box {
	width: 620px;
	float: left;

	.wym_html {
		width: 620px;

		textarea {
			width: 614px;
		}
	}

	.wym_iframe iframe {
		width: 618px;
	}
}

.wymeditor-row.full-width {
	label { display: none; }

	.wym_box {
		width: 777px;
		float: none;

		.wym_html {
			width: 777px;

			textarea {
				width: 771px;
			}
		}

		.wym_iframe iframe {
			width: 775px;
		}
	}
}
