/**
 * Main stylesheet
 *
 * @package         NoNumber Framework
 * @version         15.4.5
 *
 * @author          Peter van Westen <peter@nonumber.nl>
 * @link            http://www.nonumber.nl
 * @copyright       Copyright © 2015 NoNumber All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */
@import "init.less";
@import "font.less";

.nn_tablelist {
	td {
		height: 22px;
		color: @gray;
	}
	td.has-context {
		height: 23px;
	}
}

fieldset.nn_plaintext {
	margin-top: 5px;
}

.nn_code {
	#font > #family > .monospace;
	color: @grayLight;
}

div.nn_well {
	padding-bottom: 0;
	h4 {
		margin-top: 6px;
	}
}

.nn_well.alert-success,
.nn_well.alert-error {
	color: @grayDark;
}

.alert-inline {
	margin: 14px 0 0;
}

.nn_btn-ignore.btn-danger.active {
	.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255, 255, 255, .75));
}

.nn_btn-exclude.btn-success.active {
	.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}

.nn_textarea {
	.box-sizing(border-box);
}

.header .icon-nonumber:before {
	font-size: 20px !important;
}

.header .status .icon-nonumber:before {
	font-size: 16px !important;
}

.icon-back:before {
	content: "\e008";
}

.icon-spin {
	-webkit-animation: spin .5s infinite linear;
	-moz-animation: spin .5s infinite linear;
	-ms-animation: spin .5s infinite linear;
	-o-animation: spin .5s infinite linear;
	animation: spin .5s infinite linear;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(359deg)
	}
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg)
	}
	100% {
		-moz-transform: rotate(359deg)
	}
}

@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg)
	}
	100% {
		-ms-transform: rotate(359deg)
	}
}

@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg)
	}
	100% {
		-o-transform: rotate(359deg)
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(359deg)
	}
}

.inlist .simplecolors-swatch span {
	position: relative;
}

/* Dropdown and dropup fixes */
.btn-toolbar .modal,
.btn-toolbar .dropdown-menu {
	font-size: 13px;
}

@media (min-width: 768px) {
	.dropdown {
		display: inline-block;
	}

	.dropdown-menu.dropup-menu {
		bottom: 100%;
		top: auto;
	}
}

/* popovers */
.popover {
	width: auto;
	min-width: 200px;
}

/* icons */
.icon-color {
	background: transparent url(../images/icon-color.png) no-repeat;
	width: 16px !important;
	height: 16px !important;
}

body:not(.tpl_nonumber) {
	.j-main-container {
		.chzn-container-single .chzn-single {
			padding: 2px 12px;
		}
	}
	.chzn-container-single .chzn-single div {
		width: 20px;
	}
	.chzn-container-single .chzn-single div b {
		background: none;
		display: inline-block;
		width: 0;
		height: 0;
		vertical-align: top;
		border-top: 4px solid @black;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
		content: "";
		margin-top: 12px;
	}
	.chzn-container-active.chzn-with-drop .chzn-single div b {
		border-top: none;
		border-bottom: 4px solid @black;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}
}

.chzn-small {
	width: 120px;
}

// hide chosen dropdown on color picker J3.2.3+
div.chzn-container[id^="color_"][id$="_chzn"],
div.chzn-container#advancedparams_color_chzn {
	display: none;
}

.clearfix {
	.clearfix();
}

.input-maximize {
	&:hover,
	&:focus,
	.chzn-container:hover,
	.chzn-with-drop {
		min-width: 100%;
	}
}

.btn-group-yesno-reverse {
	.active {
		&.btn-success {
			.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
		}
		&.btn-danger {
			.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
		}
	}
}

.thumbnail-small > .thumbnail > img {
	max-width: 40px;
}

input.nn_codefield,
input.nn_keyfield,
div.nn_keycode {
	#font > #family > .monospace;
	font-size: 1.4em !important;
}

input.nn_codefield,
input.nn_keyfield {
	font-size: 14px !important;
}

.nn_keycode {
	color: @grayLight;
	padding: 2px 0;
}

#key_button,
#jform_key_button {
	margin-left: 8px;
}

.ghosted {
	.opacity(60);
}

.nn_licence {
	margin-top: 30px;
	text-align: center;
}

.nn_footer {
	margin-top: 30px;

	div {
		margin-top: 30px;
		text-align: center;
	}

	.nn_footer_review {
		margin-top: 5px;

		a.stars {
			.icon-star {
				color: mix(@yellow, @orange);
				margin: 0;
				.transition-duration(500ms);
			}

			&:hover {
				text-decoration: none;
				.icon-star {
					.rotate(216deg);
				}
			}
		}
	}

	.nn_footer_logo {
		img {
			vertical-align: -40%;
		}
	}

	.nn_footer_copyright {
		margin-top: 3px;
		font-size: 0.7em;
		.opacity(60);
	}
}
