@import "aui/variables";
@import "aui_variables";
@import "aui/mixins";
@import "compass";

/* ---------- Portlet wrapper and icons ---------- */

.freeform .portlet {
	margin-bottom: 0;
}

body.portlet {
	border-width: 0;
}

.portlet-topper {
	position: relative;

	.portlet-topper-toolbar {
		margin: 0;
		padding: 2px;
		position: absolute;
		right: 3px;
		text-align: right;
		top: 3px;
		z-index: 300;

		a {
			color: inherit;

			&, &:hover {
				text-decoration: none;
			}

			i {
				font-size: 19px;
			}
		}

		.nobr {
			display: block;
			float: left;
			padding: 1px;
		}

		.portlet-icon-back {
			background: url(../images/arrows/12_left.png) no-repeat 0 50%;
			color: #FFF;
			font-weight: bold;
			padding: 5px 5px 5px 18px;

			&:hover {
				color: #FFF;
			}
		}

		.portlet-options .lfr-icon-menu-text {
			color: transparent;
			font-size: 0;
		}
	}
}

.portlet-title {
	display: block;

	img {
		vertical-align: middle;
	}
}

.portlet-title-editable {
	cursor: pointer;
}

.portlet-title-text {
	display: inline-block;

	@include ellipsis;

	max-width: 95%;
	vertical-align: top;
}

.panel-page-content, .panel-page-body {
	.portlet-title-text {
		cursor: auto;
	}
}

.portlet-content, .portlet-minimized .portlet-content-container {
	padding: 12px 10px 10px;
}

.portlet-minimized .portlet-content {
	padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
	left: 0 !important;
	position: relative !important;
	top: 0 !important;
}

%portlet-action-bar {
	background: #333;
	color: #FFF;

	@include text-shadow(-1px -1px #000);

	a {
		color: #3AF;
	}
}

%portlet-action-bar-hover {
	@include opacity(1);
}

%portlet-action-bar-hover-text {
	display: inline-block;
}

.portlet-borderless-bar {
	@extend %portlet-action-bar;

	.portlet-options, .portlet-options.open {
		.dropdown-toggle {
			background-image: url(../images/portlet/options_borderless.png);
		}
	}
}

.portlet-content {
	.lfr-icon-actions {
		@extend %portlet-action-bar;
	}
}

.portlet-content {
	.lfr-icon-actions {
		float: left;
		margin: 1px 10px 1px 1px;

		@include opacity(0.5);

		padding: 2px 7px;

		.taglib-text {
			color: #FFF;
			display: none;
			font-weight: bold;
			margin-right: 1em;
			text-decoration: none;
			vertical-align: middle;
		}

		.lfr-icon-action a {
			background: url() no-repeat 0 50%;
			display: inline-block;
			margin-left: 5px;
			vertical-align: top;

			&:hover {
				text-decoration: none;

				span {
					text-decoration: underline;
				}
			}

			img {
				visibility: hidden;
			}
		}

		.lfr-icon-action-add a {
			background-image: url(../images/common/add_white.png);
		}

		.lfr-icon-action-edit a {
			background-image: url(../images/common/edit_white.png);
		}

		.lfr-icon-action-edit-template a {
			background-image: url(../images/common/edit_template_white.png);
		}

		.lfr-icon-action-configuration a {
			background-image: url(../images/common/configuration_white.png);
		}
	}

	.lfr-url-error {
		display: inline-block;
		white-space: normal;
	}
}

/* ---------- Borderless portlet ---------- */

.portlet-borderless-container {
	min-height: 2.5em;
	position: relative;
}

.portlet-borderless-bar {
	background-color: transparent;
	font-size: 10px;

	@include opacity(0.3);

	height: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;

	width: 100%;
	z-index: 200;

	a {
		background: url() no-repeat 0 50%;
		display: inline-block;
		height: 20px;
		margin-left: 5px;
		text-indent: -9999px;
		width: 16px;
	}

	.portlet-actions {
		float: right;
		overflow: hidden;
		padding: 0 5px;

		.portlet-action, .portlet-options {
			display: inline-block;
		}
	}

	.portlet-actions, .portlet-title-default {
		background-color: #333;
		min-height: 21px;
	}

	.portlet-action-separator {
		display: none;
	}

	.portlet-back a {
		height: auto;
		text-indent: 0;
		width: auto;
	}

	.portlet-close {
		display: inline-block;
		vertical-align: middle;

		a {
			background-image: url(../images/portlet/close_borderless.png);
		}
	}

	.portlet-options li.lfr-trigger strong a {
		background-image: url(../images/portlet/options_borderless.png);
	}
}

.lfr-configurator-visibility {
	.portlet-borderless-bar {
		@include opacity(0.6);
	}

	.portlet-content {
		.lfr-icon-actions {
			@include opacity(1);
		}
	}
}

.portlet-borderless-container:hover .portlet-borderless-bar {
	@extend %portlet-action-bar-hover;

	.portlet-actions {
		@extend %portlet-action-bar-hover-text;
	}
}

.portlet-content {
	&:hover {
		.lfr-icon-actions {
			@extend %portlet-action-bar-hover;

			.taglib-text {
				@extend %portlet-action-bar-hover-text;
			}
		}
	}

	.icons-container {
		clear: both;
		height: auto;
		margin-top: 1em;
		overflow: hidden;
		width: auto;
	}
}

.portlet-title-default {
	display: block;

	@include ellipsis;

	float: right;
	font-weight: bold;
	height: 0;
	line-height: 19px;
	max-width: 50%;
	padding: 0 10px;
	text-transform: uppercase;
}

.portlet-draggable {
	.portlet-topper {
		cursor: move;
	}

	.portlet-title-default {
		background: #333 url(../images/portlet/draggable_borderless.png) no-repeat 0 50%;
		cursor: move;
		padding-left: 20px;
	}
}

/* ---------- Panel page ---------- */

.lfr-panel-page {
	width: 100%;

	.portlet-title {
		font-size: 13px;
	}

	.lfr-add-content h2 span {
		background-color: #D3DADD;
	}
}

/* ---------- Standard styles defined in the JSR 168 ---------- */

/* ---------- Fonts ---------- */

/* ---------- Font attributes for the 'normal' fragment font ---------- */

.portlet-font {
}

/* ---------- Font attributes similar to the .portlet-font but the color is lighter ---------- */

.portlet-font-dim {
}

/* ---------- Messages ---------- */

.portlet-msg {
	background: #EEE none no-repeat 6px 50%;
	border: 1px solid #555;
	color: #34404F;
	font-weight: bold;
	margin: 2px auto 14px;
	padding: 6px 6px 6px 30px;
	text-align: left;
}

/* ---------- Status labels ---------- */

.lfr-status-alert-label, .lfr-status-error-label, .lfr-status-info-label, .lfr-status-progress-label, .lfr-status-success-label {
	background: none no-repeat 0 50%;
	padding: 3px 3px 3px 20px;
}

.lfr-status-alert-label {
	background-image: url(../images/messages/alert.png);
	color: #663;
}

.lfr-status-error-label {
	background-image: url(../images/messages/error.png);
	color: #900;
}

.lfr-status-help-label, .lfr-status-info-label, .lfr-status-progress-label {
	background-image: url(../images/messages/info.png);
	color: #34404F;
}

.lfr-status-help-label {
	background-image: url(../images/portlet/help.png);
}

.lfr-status-progress-label {
	background-image: url(../images/aui/loading_indicator.gif);
}

.lfr-status-success-label {
	background-image: url(../images/messages/success.png);
	color: #384F34;
}

/* ---------- Liferay messages ---------- */

.lfr-message {
	position: relative;

	.lfr-message-control {
		background-color: #333;
		display: inline-block;
	}

	.lfr-message-controls {
		display: none;
		left: 3px;
		margin: -8px 8px 0 3px;
		position: absolute;
		top: 50%;
		z-index: 10;
	}

	.lfr-message-close {
		background-image: url(../images/portlet/close_borderless.png);
		background-position: 0 0;
		background-repeat: no-repeat;
	}

	.lfr-message-close-all {
		color: #FFF;
		display: none;
		font-size: 0.8em;
		margin-left: 10px;
		padding: 1px 10px;
		text-shadow: 1px 1px 0 #000;
		vertical-align: top;

		a {
			color: #FFF;
		}
	}

	.lfr-message-controls-hover .lfr-message-close-all {
		display: inline-block;
	}

	&.pending {
		background-image: url(../images/common/time.png);
	}
}

.lfr-message-content.alert {
	margin-bottom: 0;
}

.lfr-message-close {
	cursor: pointer;
}

/* ---------- Sections ---------- */

/* ---------- Text in a selected cell range ---------- */

.portlet-section-selected {
	&, a {
		background: #727C81;
		color: #FFF;
		font-weight: bold;
		text-decoration: none;
	}

	a:hover, a:focus {
		background-color: #727C81;
	}
}

/* ---------- Text of a subheading ---------- */

.portlet-section-subheader {
}

/* ---------- Table or section footnote ---------- */

.portlet-section-footer {
}

/* ---------- Text that belongs to the table but does not fall in one of the other categories (e.g. explanatory or help text that is associated with the section) ---------- */

.portlet-section-text {
}

/* ---------- Forms ---------- */

.alert .form {
	margin: 0;
}

/* ---------- Text used for the descriptive label of the whole form (not the labels for fields) ---------- */

.portlet-form-label {
}

/* ---------- Text of the user-input in an input field ---------- */

.portlet-form-input-field {
}

/* ---------- Text on a button ---------- */

.portlet-form-button {
}

/* ---------- Text that appears beside a context dependent action icon ---------- */

.portlet-icon-label {
}

/* ---------- Text that appears beside a 'standard' icon (e.g. Ok, or cancel) ---------- */

.portlet-dlg-icon-label {
}

/* ---------- Text for a separator of fields (e.g. checkboxes, etc.) ---------- */

.portlet-form-field-label {
}

/* ---------- Text for a field (not input field, e.g. checkboxes, etc.) ---------- */

.portlet-form-field {
}

/* ---------- Menus ---------- */

/* ---------- General menu settings such as background color, margins, etc. ---------- */

.portlet-menu {
}

/* ---------- Normal, unselected menu item ---------- */

.portlet-menu-item {
}

/* ---------- Selected menu item ---------- */

.portlet-menu-item-selected {
}

/* ---------- Normal, unselected menu item when the mouse hovers over it ---------- */

.portlet-menu-item-hover {
}

/* ---------- Selected menu item when the mouse hovers over it ---------- */

.portlet-menu-item-hover-selected {
}

/* ---------- Normal, unselected menu item that has sub-menus ---------- */

.portlet-menu-cascade-item {
}

/* ---------- Selected sub-menu item that has sub-menus ---------- */

.portlet-menu-cascade-item-selected {
}

/* ---------- Descriptive text for the menu (e.g. in a help context below the menu) ---------- */

.portlet-menu-description {
}

/* ---------- Menu caption ---------- */

.portlet-menu-caption {
}

/* ---------- Miscellaneous portlet styles ---------- */

.restricted {
	&, & td {
		background: #FDD;
		border-width: 0;
	}

	* {
		color: #727C81;
	}
}

.alt.restricted td {
	background-color: #FFC0C0;
}

.hover.restricted td {
	background-color: #D3BDC0;
}

.alt.restricted, .restricted {
	td.first {
		background-image: url(../images/messages/error.png);
		background-position: 5px 50%;
		background-repeat: no-repeat;
		padding-left: 28px;
	}
}

/* ---------- Permissions ---------- */

.table-data tr {
	&.lfr-role .first {
		background-image: url();
		background-position: 5px 50%;
		background-repeat: no-repeat;
		padding-left: 30px;
		vertical-align: middle;
	}

	&.lfr-role-guest .first {
		background-image: url(../images/common/guest_icon.png);
	}

	&.lfr-role-regular .first {
		background-image: url(../images/common/user_icon.png);
	}

	&.lfr-role-site .first {
		background-image: url(../images/common/site_icon.png);
	}

	&.lfr-role-organization .first {
		background-image: url(../images/common/organization_icon.png);
	}

	&.lfr-role-team .first {
		background-image: url(../images/common/team_icon.png);
	}
}

/* ---------- Miscellaneous component styles ---------- */

.lfr-ddm-container {
	.control-group {
		&.error {
			@include formFieldState();
		}

		&.info {
			@include formFieldState();
		}

		&.success {
			@include formFieldState();
		}

		&.warning {
			@include formFieldState();
		}

		&.error > {
			@include formFieldState($errorText, $errorText, $errorBackground);
		}

		&.info > {
			@include formFieldState($infoText, $infoText, $infoBackground);
		}

		&.success > {
			@include formFieldState($successText, $successText, $successBackground);
		}

		&.warning > {
			@include formFieldState($warningText, $warningText, $warningBackground);
		}
	}
}

/* ---------- Dynamic data list display/Journal portlet ---------- */

.portlet-dynamic-data-list-display, .portlet-dynamic-data-lists, .portlet-journal .journal-article-container {
	.lfr-ddm-container .field-wrapper {
		&[data-repeatable="true"], .field-wrapper {
			border: 1px solid #D0D0D0;
			border-left-width: 10px;
			padding: 7px 10px 10px;

			&[data-repeatable="true"]:nth-of-type(even) {
				background-color: #F5F5F5;
			}

			&, .field-wrapper {
				margin: 15px 0 0;
			}
		}
	}
}

/* ---------- Add content dialog ---------- */

.lfr-portlet-item {
	&, & p a {
		font-size: 1em;
	}
}

/* ---------- Breadcrumb taglib ---------- */

.breadcrumb.breadcrumb-vertical {
	display: inline-block;
	text-align: center;

	li {
		display: block;

		&.last, &.only {
			background: none;
		}
	}

	.divider {
		background: url(@theme_image_path@/arrows/07_down.png) no-repeat 50% 100%;
		display: block;

		@include hide-text(right);

		height: 10px;
	}
}

/* ---------- Calendar taglib ---------- */

.taglib-calendar {
	tr {
		&.portlet-section-header th, & td {
			border-width: 0;
		}

		td {
			a {
				background-color: #F0F5F7;
				border: 1px solid #FFF;
				border-bottom-width: 0;
				border-left-width: 0;
				display: block;
				height: 15px;
				padding: 5px 0;

				&:hover {
					background-color: #727C81;
					color: #FFF;
				}
			}

			&.calendar-inactive {
				background-color: #FFF;
				color: #B5BFC4;
			}
		}

		th {
			border-bottom-color: #D7D7D7;
		}
	}

	table td {
		border-width: 0;
	}

	.calendar-current-day {
		&, & a {
			background-color: #FFF;
		}

		a {
			border: 1px solid #727C81;
			color: #369;
			text-decoration: underline;
		}
	}
}

/* ---------- navbar form search ---------- */

.navbar form {
	margin: 0;
}

.ie {
	.portlet-borderless-bar {
		@include opacity(0.5);
	}

	.portlet-content {
		.lfr-icon-actions {
			@include opacity(0.5);
		}
	}

	.portlet-borderless-container:hover .portlet-borderless-bar, .portlet-journal-content .lfr-icon-actions:hover {
		@include opacity(1);
	}

	.taglib-calendar tr td.first a {
		border-right-width: 0;
	}
}

.ie6, .ie7 {
	.portlet-content {
		.icons-container {
			overflow: visible;
		}

		.lfr-icon-actions .taglib-text {
			display: inline-block;
		}
	}

	.portlet-borderless-bar .portlet-actions {
		margin-left: 20px;
		margin-right: 0;
	}

	.portlet-title-default {
		float: left;
	}

	.lfr-message .lfr-message-close {
		float: left;
	}
}

.ie6 {
	.portlet-topper-toolbar .icon {
		height: 16px;
		width: 16px;
	}

	.portlet-borderless-container {
		height: 2.5em;
	}

	.portlet-borderless-bar {
		filter: alpha(opacity=90);

		.portlet-actions {
			display: inline;
			filter: alpha(opacity=90);
		}
	}

	.breadcrumbs {
		zoom: 1;
	}
}

.ie8 {
	.dockbar, .lfr-icon-action, .logo {
		img {
			max-width: none;
		}
	}
}