@import "compass";

$defaultBorderColor: #C9C9C9;
$defaultTextColor: #202020;

@mixin menu-mix {
	background-color: #FFF;

	@include border-radius(4px);
	@include box-shadow(0 1px 3px rgba(0,0,0, 0.78));
}

.so-portlet-sites {
	ul.site-list {
		background: #E8EFF4;
		border: 1px solid #C8C9CA;
		list-style: none;
		margin: 1em 0;

		li {
			background: no-repeat 10px 50%;
			border: 1px solid #E8EFF4;
			margin: 4px;
			padding: 3px 10px 3px 30px;
			position: relative;

			&:before {
				-webkit-font-smoothing: antialiased;
				color: #DDD;
				content: "\f0ac";
				font-family: 'fontawesome-alloy';
				font-size: 18px;
				font-style: normal;
				font-variant: normal;
				font-weight: normal;
				left: 10px;
				line-height: 1;
				position: absolute;
				speak: none;
				text-transform: none;
				top: 7px;
			}

			span {
				display: block;
			}

			.action-not-allowed {
				float: right;
				height: 16px;
				margin: 0 5px;
				width: 16px;
			}

			.action a {
				float: right;
				font-size: 0px;
				height: 16px;
				margin: 0 5px;
				width: 16px;
			}

			.favorite a {
				background: url(../images/star_empty.png) no-repeat 0 50%;
				float: right;

				&.disabled {
					filter: alpha(opacity=20);
					height: 16px;
					margin: 10px 5px;
					opacity: 0.2;
					position: relative;
					width: 16px;
					z-index: 1;
				}
			}

			.unfavorite a {
				background: url(../images/star.png) no-repeat 0 50%;
				float: right;
			}

			.name {
				font-weight: bold;
			}

			.private-pages {
				font-size: 10px;
			}

			&:hover {
				background-color: #FFF;
				border: 1px solid #C8C9CA;
			}

			&.empty {
				background-image: url(@theme_image_path@/messages/alert.png);
				padding-left: 25px;

				&:hover {
					background-color: transparent;
					border: 1px solid #E8EFF4;
				}

				&:before {
					display: none;
				}
			}

			&.more {
				background-image: url(@theme_image_path@/common/view.png);

				a, a:hover {
					border-top: 1px solid #C8C9CA;
					color: #8F0920;
					display: block;
					padding: 0.5em 33px;
				}

				&:before {
					display: none;
				}
			}

			&.social-office-enabled {
				background-image: url(@portal_ctx@/html/icons/social_office.png);

				&:before {
					display: none;
				}
			}
		}

		&, li:hover {
			@include border-radius(4px);
		}
	}

	.site-list-container {
		clear: both;
	}

	.sites-tabs select {
		padding: 5px 1px;
	}

	.search {
		float: right;
		margin-bottom: 10px;

		.search-input {
			vertical-align: top;
			width: 150px;
		}
	}

	.hide-notice {
		float: right;
	}
}

.so-portlet-sites-dialog, .so-sites-directory {
	ul.directory-list {
		border: 1px solid #CCC;
		clear: both;
		font-size: 12px;
		list-style: none;
		margin: 1em 0;

		li {
			background: url(@portal_ctx@/html/icons/sites_admin.png) no-repeat 5px 5px;
			padding: 5px 10px 5px 25px;

			.action-not-allowed {
				float: right;
				height: 16px;
				margin: 0 5px;
				width: 16px;
			}

			.action a {
				float: right;
				font-size: 0px;
				height: 16px;
				margin: 0 5px;
				width: 16px;
			}

			.favorite a {
				background: url(../images/star_empty.png) no-repeat 0 50%;
				float: right;

				&.disabled {
					filter: alpha(opacity=20);
					height: 16px;
					margin: 0 5px;
					opacity: 0.2;
					width: 16px;
				}
			}

			.unfavorite a {
				background: url(../images/star.png) no-repeat 0 50%;
				float: right;
			}

			.join a, .request a {
				background: url(@theme_image_path@/common/join.png) no-repeat 0 50%;
			}

			.requested a {
				background: url(@theme_image_path@/common/checked.png) no-repeat 0 50%;
			}

			.leave a {
				background: url(@theme_image_path@/common/leave.png) no-repeat 0 50%;

				&.disabled {
					filter: alpha(opacity=20);
					height: 16px;
					margin: 0 5px;
					opacity: 0.2;
					width: 16px;
				}
			}

			.delete a {
				background: url(@theme_image_path@/common/delete.png) no-repeat 0 50%;

				&.disabled {
					filter: alpha(opacity=20);
					float: right;
					height: 16px;
					margin: 0 5px;
					opacity: 0.2;
					width: 16px;
				}
			}

			.description {
				color: #777;
				display: block;
				font-size: 11px;
				padding-right: 75px;
			}

			.private-pages {
				font-size: 10px;
			}

			&.alt {
				background-color: #F0F5F7;
			}

			&.empty {
				background-image: url(@theme_image_path@/messages/alert.png);
			}

			&.social-office-enabled {
				background-image: url(@portal_ctx@/html/icons/social_office.png);
			}
		}
	}

	.buttons-left {
		float: left;

		input {
			vertical-align: top;
		}

		.field-input-select {
			margin: 0;
		}
	}

	.buttons-right {
		float: right;
	}

	.page-indicator {
		display: block;
		font-weight: bold;
		padding: 0.5em;
	}

	.search {
		float: none;
		margin: 10px 0;

		.search-input {
			vertical-align: top;
			width: 150px;
		}

		.sites-tabs {
			margin-right: 5px;

			select {
				padding: 5px 1px;
			}
		}
	}

	.section {
		min-height: 220px;
	}

	.site-customization {
		.page {
			margin: 5px 0;
			width: 200px;

			input {
				margin-right: 5px;
			}
		}
	}

	.step {
		color: #AAA;
		display: inline-block;
		font-weight: bold;
		text-shadow: 1px 1px 1px #DDD;

		span {
			display: block;
			margin: 5px;
		}
	}

	.template-details {
		background: none;
		border-width: 0;
		padding: 0;

		ul.pages {
			margin-left: 2em;

			li {
				float: none;
				list-style: disc outside none;
				padding-right: 0;
			}
		}
	}

	.site-settings {
		padding: 10px 0 10px;

		.name {
			padding-top: 20px;
		}

		.included-pages, .permission {
			font-weight: bold;
		}

		.template-details .column-content {
			padding: 5px 10px 15px;
		}

		.field {
			margin: 0;
		}

		 .field-content, .field-label, .field-select {
			display: inline;
		}

		.field-content:after, .button-holder:after {
			clear: none;
			display: none;
		}

		.field-select {
			padding-right: 10px;
		}

		.page label {
			display: inline-block;
			padding-left: 2px;
		}
	}

	.dialog-footer {
		display: block;
		text-align: center;
	}
}

.portlet-dockbar {
	.so-portlet-sites {
		display: block;
		position: relative;
		right: 0;
		top: 0;
		vertical-align: middle;
		width: 100px;

		.portlet {
			background: transparent;

			&, .portlet-content {
				border-width: 0;
			}
		}

		.portlet-topper, .favorite-msg-info {
			display: none;
		}

		.portlet-body {
			margin: -1.125em 0 0;

			@include menu-mix;

			padding: 3.4em 0 0;
			position: absolute;
			right: 0;
			visibility: hidden;
			width: 100px;
			z-index: 1;

			a, a:hover, li.has-menu:hover a {
				background-color: transparent;

				@include border-radius(0);
				@include box-shadow(none);

				color: $defaultTextColor;
				font-weight: normal;
				text-shadow: none;
			}
		}

		.search {
			display: block;
			float: none;
			left: 0;
			margin-bottom: 0;
			padding: 0 0.75em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0.6em;
			visibility: visible;
			width: auto;

			.search-input {
				background: #FFF;
				border: 1px solid #1C2125;

				@include border-radius(20px);
				@include box-shadow(0 1px 2px rgba(0,0,0, 0.4) inset);

				color: #202020;
				cursor: pointer;
				display: block;
				float: right;
				text-align: left;
				text-indent: 0.5em;
				width: 75%;

				&:hover {
					border-color: #2571AD;
				}
			}

			input[type=image] {
				display: none;
			}
		}

		.sites-tabs, .sites-list-container, .control-container {
			display: none;
		}

		.sites-tabs {
			border-top: 1px solid rgba(0,0,0, 0.1);
			float: none;
			padding: 1em;

			.control-group, select {
				margin-bottom: 0;
			}

			select {
				display: block;
				width: 100%;
			}
		}

		.site-list-container {
			.name {
				border-top: 1px solid $defaultBorderColor;
				position: relative;

				&, a {
					padding: 0.55em 2.5em;
				}

				a {
					background-position: 8px center;
					background-repeat: no-repeat;
					display: block;
					margin: -0.55em -2.5em;

					&:hover {
						background-color: rgba(0,0,0, 0.1);
					}
				}

				.private-pages {
					background: #FFF;
					margin: 0;
					padding: 0.55em 0.5em;
					position: absolute;
					right: 2em;
					top: 0;
				}
			}

			span.action {
				position: relative;
				z-index: 1;

				a {
					font-size: 0;
					margin-top: 8px;
					text-indent: -9999em;
				}
			}

			ul.site-list {
				&, li {
					background-color: transparent;
					border-width: 0;
					color: $defaultTextColor;
					display: block;
					margin: 0;
					padding: 0
				}

				.empty, .empty:hover {
					border-width: 1px 0 0;
					padding: 0.5em 1em 0.5em 2em;
				}
			}
		}

		.control-container {
			.toolbar-content {
				display: block;
				margin-top: 0;
			}

			button {
				margin-top: 0;
			}

			.site-controls-double {
				width:50%
			}

			.site-controls-single {
				width: 100%;
			}
		}
	}

	.search-focus .so-portlet-sites {
		width: 350px;

		.portlet-body {
			position: absolute;
			visibility: visible;
			width: 100%;
			z-index: 3;

			.search {
				top: .7em;
				width: auto;

				.search-input {
					background: #FFF;
					border: 1px solid $defaultBorderColor;

					@include box-shadow(0 1px 2px rgba(0,0,0, 0) inset);

					color: $defaultTextColor;
					cursor: text;
					text-shadow: none;
					width: 97%;
				}
			}
		}

		.sites-tabs, .sites-list-container, .control-container {
			display: block;
		}
	}

	.go-to {
		display: block;
		height: 43px;
		width: auto;
	}
}

.ie7 .portlet-dockbar .so-portlet-sites {
	.site-list-container {
		.member {
			height: 32px;
			position: relative;
		}

		.favorite, .name {
			position: absolute;
			top: 0;
		}

		.name a {
			width: 280px;
		}
	}

	.toolbar-content button {
		display: inline;
		width: 49%;
	}
}

/* ---------- Extras ---------- */

.so-portlet-sites ul.site-list {
	&, li:hover {
		@include border-radius(4px);
	}
}