/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// Porlet - Site Navigation Portlet
// --------------------------------------------------
.UIWindow .UIApplication {
	overflow: auto;
}

/*---------- DefaultTheme ----------*/
.DefaultTheme {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid @borderColor;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: @primaryBackground;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid @borderColor;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid @borderColor;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
				left: 4px;
    			top: 5px;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid @borderColor;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

.windowBar  .portletName {
    > i {
        display: inline-block;
        .square(16px);
        vertical-align: middle;
    }
}

/*---------- MacGray -----------*/

.MacGray {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #9b9b9b;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		#gradient > .vertical(@borderColor, #a8a8a8);
		.box-shadow(inset 0 1px 0 #e2e2e2);
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #676767;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-position: center 0px;
			}
			.maximizedIcon {
				background-position: center -48px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center -32px;
			}
			.uiIconArrowDown:hover {
				display: block;
				background-position: center -64px;
			}
			.maximizedIcon:hover {
				background-position: center -112px;
			}
			.restoreIcon:hover {
				background-position: center -80px;
			}
			.minimizedIcon:hover {
				background-position: center -96px;
			}
		}

	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #676767;
		#gradient > .vertical(@borderColor, #a8a8a8);
		padding: 0 10px;
		line-height: 22px;
		height: 22px;
	}
}


/*---------- MacTheme ----------*/

.MacTheme {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #b5b5b5;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		#gradient > .vertical(@primaryBackground, #d6d6d6);
		.box-shadow(inset 0 1px 0 @baseBackground);
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #adadad;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-position: center 0px;
			}
			.maximizedIcon {
				background-position: center -48px;
			}
			.restoreIcon {
				background-position: center -32px;
			}
			.minimizedIcon {
				background-position: center -16px;
			}
			.uiIconArrowDown:hover {
				display: block;
				background-position: center -64px;
			}
			.maximizedIcon:hover {
				background-position: center -112px;
			}
			.restoreIcon:hover {
				background-position: center -96px;
			}
			.minimizedIcon:hover {
				background-position: center -80px;
			}
		}

	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #adadad;
		#gradient > .vertical(@primaryBackground, #d6d6d6);
		padding: 0 10px;
		line-height: 22px;
		height: 22px;
	}
}

/*---------- MacBlueSteel ----------*/

.MacBlueSteel {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #617c99;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		#gradient > .vertical(#89a9c4, #6280a0);
		.box-shadow(inset 0 1px 0 #97c0e2);
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #445d76;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
				background-image: url('@{images-path}/PortletThemes/macTheme.png');
				background-position: center 0px;
			}
			.maximizedIcon {
				background-position: center -48px;
			}
			.restoreIcon {
				background-position: center -32px;
			}
			.minimizedIcon {
				background-position: center -16px;
			}
			.uiIconArrowDown:hover {
				display: block;
				background-position: center -64px;
			}
			.maximizedIcon:hover {
				background-position: center -112px;
			}
			.restoreIcon:hover {
				background-position: center -96px;
			}
			.minimizedIcon:hover {
				background-position: center -80px;
			}
		}

	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #536b84;
		#gradient > .vertical(#89a9c4, #6280a0);
		padding: 0 10px;
		line-height: 22px;
		height: 22px;
	}
}

/*---------- SimplePink ----------*/

.SimplePink {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #e3acdc;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #fed4f9;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #e3acdc;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #e3acdc;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #e3acdc;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- SimpleGreen ----------*/

.SimpleGreen {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #629535;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #8ac056;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #629535;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #629535;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #629535;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- SimpleOrange ----------*/

.SimpleOrange {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #dc9600;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #ffcb5b;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #dc9600;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #dc9600;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #dc9600;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- SimpleViolet ----------*/

.SimpleViolet {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #ba80ec;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #cdb1fb;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #ba80ec;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #ba80ec;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #ba80ec;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- SimpleBlue ----------*/

.SimpleBlue {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #87c4f3;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #c2e2ff;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #87c4f3;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #87c4f3;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #87c4f3;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- RoundConerPink ----------*/

.RoundConerPink {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background: @baseBackground;
	border: 1px solid #e3acdc;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #fed4f9;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #e3acdc;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #e3acdc;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #e3acdc;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- SimpleGreen ----------*/

.RoundConerGreen {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background: @baseBackground;
	border: 1px solid #629535;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #8ac056;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #629535;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #629535;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #629535;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- SimpleOrange ----------*/

.RoundConerOrange {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background: @baseBackground;
	border: 1px solid #dc9600;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #ffcb5b;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #dc9600;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #dc9600;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #dc9600;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- SimpleViolet ----------*/

.RoundConerViolet {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background: @baseBackground;
	border: 1px solid #ba80ec;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #cdb1fb;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #ba80ec;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #ba80ec;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #ba80ec;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- SimpleBlue ----------*/

.RoundConerBlue {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	background: @baseBackground;
	border: 1px solid #87c4f3;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #c2e2ff;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #87c4f3;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #87c4f3;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #87c4f3;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- ShadowPink ----------*/

.ShadowPink {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #e3acdc;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #fed4f9 url('@{images-path}/PortletThemes/white.png') no-repeat top center;
		background-size: 100% 15px;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #e3acdc;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #e3acdc;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #e3acdc;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- ShadowGreen ----------*/

.ShadowGreen {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #629535;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #8ac056 url('@{images-path}/PortletThemes/white.png') no-repeat top center;
		background-size: 100% 15px;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #629535;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #629535;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #629535;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- ShadowOrange ----------*/

.ShadowOrange {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #dc9600;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #ffcb5b url('@{images-path}/PortletThemes/white.png') no-repeat top center;
		background-size: 100% 15px;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #dc9600;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #dc9600;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #dc9600;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}


/*---------- ShadowViolet ----------*/

.ShadowViolet {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #ba80ec;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #cdb1fb url('@{images-path}/PortletThemes/white.png') no-repeat top center;
		background-size: 100% 15px;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #ba80ec;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #ba80ec;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #ba80ec;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- ShadowBlue ----------*/

.ShadowBlue {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #87c4f3;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #c2e2ff url('@{images-path}/PortletThemes/white.png') no-repeat top center;
		background-size: 100% 15px;
		.box-shadow(0 1px 0 rgba(13,13,13,0.05));
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #87c4f3;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
		}
		> [class*="pull-right"] {
			.square(16px);
			#gradient > .vertical(@baseBackground, @primaryBackground);
			border: 1px solid #87c4f3;
			.border-radius(3px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/defaultTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
			}
			.maximizedIcon {
				background-position: center -32px;
			}
			.restoreIcon {
				background-position: center -16px;
			}
			.minimizedIcon {
				background-position: center 0px;
			}
		}
		> [class*="pull-right"]:hover {
			background: @baseBackground;
		}
	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #87c4f3;
		padding: 0 10px;
		line-height: 28px;
		height: 28px;
	}
}

/*---------- VistaTheme ----------*/

.VistaTheme {
	.border-radius(3px);
	background: @baseBackground;
	border: 1px solid #676767;
	.box-shadow(1px 1px 4px rgba(0,0,0,0.25));
	margin: 0 0 25px;
	.windowBar {
		background: #757a86; /* Old browsers */
		background: -moz-linear-gradient(top, #757a86 0%, #595d63 50%, #3a3c3e 51%, #353839 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757a86), color-stop(50%,#595d63), color-stop(51%,#3a3c3e), color-stop(100%,#353839)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* IE10+ */
		background: linear-gradient(to bottom, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757a86', endColorstr='#353839',GradientType=0 ); /* IE6-9 */
		.box-shadow(inset 0 1px 0 #969cad);
		height: 30px; line-height: 30px;
		padding: 0 10px;
		border-bottom: 1px solid #676767;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		> h5.portletName {
			margin: 0 70px 0 0;
			display: block;
			line-height: 30px;
			.text-overflow();
			color: @baseBackground;
		}
		> [class*="pull-right"] {
			.square(16px);
			margin: 6px 0 0 4px;
			display: inline-block;
			> i[class$="Icon"] {
				.square(16px);
				display: block;
				background-image: url('@{images-path}/PortletThemes/vistaTheme.png');
				background-repeat: no-repeat;
			}
			.uiIconArrowDown {
				display: block;
				background-image: url('@{images-path}/PortletThemes/vistaTheme.png');
				background-position: center 0px;
			}
			.maximizedIcon {
				background-position: center -48px;
			}
			.restoreIcon {
				background-position: center -32px;
			}
			.minimizedIcon {
				background-position: center -16px;
			}
		}

	}
	.middleDecorator {
		height:100%;
		> .nameStyle {
			border: 1px solid #A4A4A4;
	    color: #454545;
	    line-height: 20px;
	    margin: 10px 20px;
	    text-align: center;
		}
	}
	.bottomDecorator {
		border-top: 1px solid #676767;
		background: #757a86; /* Old browsers */
		background: -moz-linear-gradient(top, #757a86 0%, #595d63 50%, #3a3c3e 51%, #353839 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757a86), color-stop(50%,#595d63), color-stop(51%,#3a3c3e), color-stop(100%,#353839)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* IE10+ */
		background: linear-gradient(to bottom, #757a86 0%,#595d63 50%,#3a3c3e 51%,#353839 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757a86', endColorstr='#353839',GradientType=0 ); /* IE6-9 */
		.box-shadow(inset 0 1px 0 #969cad);
		padding: 0 10px;
		line-height: 22px;
		height: 22px;
		color: @baseBackground;
	}
}

#Theme-tab,.PortletSetting-tab {
  .resizable {
    overflow: auto;
    max-height: 350px;
  }
}








