@import "../../../../variables.less"; 
@import "../../../../mixins.less";
// -------------------------
.uiSpaceNavigationPortlet {
	padding-bottom: 20px;
	.title {
		text-transform: uppercase;
		color: @plfNavigationTitleColor;
		#gradient > .vertical(@primaryBackgroundLight, @primaryBackgroundHover);
		height: 40px; line-height: 41px;
		padding: 0 15px;
		margin: 0;
		 .box-shadow(~"inset 0 1px 0 @baseBackground,0 1px 0 @baseBackground");
		 border-bottom: 1px solid @borderColor;
   		 border-top: 1px solid @borderColor;
		text-shadow: none;
		white-space: nowrap;
        a {
          color: @plfNavigationTitleColor;
        }
	}

	.searchInput input {
	    height: 28px;
	    margin: 18px auto 10px 25px;
	    width: 200px;
	    display: block;
	}


	.spaceNavigation {
		list-style: none;
        margin: 0;
        padding: 10px 0px;
        overflow: auto;
		.noSpace {
		color: @baseColorMedium;
	    padding: 10px 0;
	    text-align: center;
		}
		.spaceItem {
          	line-height: 28px;
			padding: 2px 22px;
            display: block;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
		}

		.spaceIcon {
			color: @plfNavigationColor;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: inherit;
		  	height: 30px;
			> img {
				margin-right: 5px;
				width: 20px;
				height: 20px;
			}

			&:hover {
				color: @plfNavigationColorHover;
			}
		}

		.spaceItemSelected {
            position: relative;
            background: @plfNavigationBgSelected;
            border-top: 1px solid @plfNavigationBorderSelected;
            border-bottom: 1px solid @plfNavigationBorderSelected;
            .box-shadow(0 0px 3px rgba(0, 0, 0, 0.11));
			&:after {
				background: @plfNavigationBgBorderLeft;
				border: 1px solid @plfNavigationBorderLeft;
				border-left: 0;
				.box-shadow(~"inset -1px 0px 2px rgba(255, 255, 255, 0.14)");
				content: "";
				height: 100%;
				left: 0;
				top: -1px;
				position: absolute;
				width: 5px;
		  	}
			> a {
				font-weight: bold;
              color: @plfNavigationColorSelected;
			}

		}
	}

	.moreSpace {
		padding: 6px 25px;
		text-align: center;
		margin: 0 0 10px 0;
		overflow: hidden;
		> a {
			#gradient > .vertical(@baseBackground, @primaryBackground);
			height: 24px;
			line-height: 24px;
			border: 1px solid @borderColor;
			color: @plfNavigationColor;
			display: inline-block;
			margin: auto;
			padding: 0 10px;
			.border-radius(3px);
			font-size: 12px;
			&:hover {
				background-color: @primaryBackgroundHover;
			}
		}
	}

	.joinSpace {
		border-bottom: 1px solid @borderColor;
        border-top: 1px solid @borderColor;
        .box-shadow(~"inset 0 1px 0 @baseBackground,0 1px 0 @baseBackground");
        line-height: 32px;
		white-space: nowrap;

    > a {
    	color: @plfNavigationColor;
    	 display: block;
    	 padding-left: 25px;
    	&:hover {
				color: @plfNavigationColorHover;
			}
    	> i {
    		margin-right: 5px;
    	}
    }
	}

}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }