/**
 * Copyright (C) 2009 eXo Platform SAS.
 * 
 * This 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 2.1 of
 * the License, or (at your option) any later version.
 * 
 * This software 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 software; if not, write to the Free
 * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
 * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 */

.UIItemSelector {	
	margin: 2px 0px 2px 2px; /* orientation=lt */
	margin: 2px 2px 2px 0px; /* orientation=rt */
}

.UIItemSelector .ItemDetailList .TemplateContainer .PortalOfficeImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -614px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PortalDefaultImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PageDefaultImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PageDesktopImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -836px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .ClassicPortalImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -392px;
	margin-top: 9px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .WebOSPortalImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -170px;
	margin-top: 9px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .BasicPortalImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -1052px;
	margin-top: 9px;
}

.UIItemSelector .TemplateContainer .DefaultImage {
	height: 222px;
	background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .DesktopImage {
	background: url('background/TemplateContainer.jpg') no-repeat center -836px;
	height: 222px;
}

.UIItemSelector .ItemDetailList .LayoutHolder .DesktopImage {
	background: url('background/TemplateContainer.jpg') no-repeat top left;
	height: 170px;
	width: 270px;
	margin: auto;
}

.UIItemSelector .ItemDetailList .ItemDescription {
	height: 100px; 
	background: white;
	border: solid 1px #b7b7b7;
	padding: 2px;
}

.UIItemSelector .ItemDetailList .ItemDetail .ItemValueDescription {
	width: 50%; height: 53px; 
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
	margin-top: 12px; 
	overflow: auto;
	border: none;
}

/*=================Right Column Style======================*/

.UIItemSelector .RightColumnStyle {
	width: 99.5%;
	overflow: hidden;
}

.UIItemSelector .RightColumnStyle .ItemListContainer {
	float: right; /* orientation=lt */
	float: left; /* orientation=rt */
	width: 220px;
}

.UIItemSelector .ItemListContainer .ItemList {
	border: 1px #c7c7c7 solid;
	background: white url('background/ItemList.jpg') no-repeat right bottom;
	height: 240px;
	overflow: auto;
}

.UIItemSelector .RightColumnStyle .ItemListContainer .ItemListBackground {
	background: white url('background/ItemList.jpg') no-repeat right bottom;
	height: 258px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList {
	height: auto;
	margin-right: 225px; /* orientation=lt */
	margin-left: 225px; /* orientation=rt */
	padding: 1px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetail {
	height: 240px;
	background: white;
	border: 1px #C7C7C7 solid;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetailTitle{
	height: 23px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetailContainer{
 	background: #ffffff;
}

.UIItemSelector .RightColumnStyle .ItemListTitle {
	height: 23px;
}

.UIItemSelector .RightColumnStyle .ItemListTitle .ArrowS1Down16x16Icon {
	margin: 3px 0px 0px 4px; /* orientation=lt */
	margin: 3px 4px 0px 0px; /* orientation=rt */
	background: url('/eXoResources/skin/DefaultSkin/skinIcons/16x16/icons/MacSkin/GrayAquaDownArrow.png') no-repeat;
	width: 18px; height: 18px;
}

.UIItemSelector .RightColumnStyle .TitleIcon {
	float: left; /* orientation=lt */
	float: right; /* orientation=rt */
	margin: 0px 5px 0px 5px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .Title {
	width: 300px; overflow: hidden;
}	
	
.UIItemSelector .RightColumnStyle .ItemListContainer .Title {
	width: 143px; overflow: hidden;
}

.UIItemSelector .RightColumnStyle .Title {
	line-height: 22px; white-space: nowrap; 
	font-weight: bold; color: #5c5c5c; 
	float: left; /* orientation=lt */
	float: right; /* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -418px;

}

.UIItemSelector .RightColumnStyle .ViewListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -434px;
	margin-top: 3px;
}

/*##########################- Default Item	-#########################*/

.UIItemSelector .RightColumnStyle .ItemList .Item {
	height: 26px; 
	cursor: pointer;
	border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .RightColumnStyle .ItemList .Item .LeftItem {
	height: 26px;
	background: url('background/SelectedItem.gif') no-repeat left top; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right top; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemList .Item .RightItem {
	height: 26px; line-height: 26px;
}

.UIItemSelector .RightColumnStyle .ItemList .Item .ItemTitle {
	height: 26px; line-height: 26px;
	padding-left: 3px; /* orientation=lt */
	padding-right: 3px; /* orientation=rt */
}

/*###########################- Over Item (When mouse over on this item) -############################*/

.UIItemSelector .RightColumnStyle .ItemList .OverItem {
	height: 26px;
	cursor: pointer;
	background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .RightColumnStyle .ItemList .OverItem .LeftItem {
	background: url('background/SelectedItem.gif') no-repeat left -52px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -52px; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
}


.UIItemSelector .RightColumnStyle .ItemList .OverItem .RightItem {
	height: 26px; line-height: 26px; 
	background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .RightColumnStyle .ItemList .OverItem .ItemTitle {
	height: 26px; line-height: 26px; 
	color: #f67a02;
	padding-left: 3px; /* orientation=lt */
	padding-right: 3px; /* orientation=rt */
}

/*##########################- Selected Item	(When Item is selected)-#########################*/

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem {
	height: 26px;
	cursor: pointer;
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .LeftItem {
	background: url('background/SelectedItem.gif') no-repeat left -26px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -26px; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .RightItem {
	height: 26px; line-height: 26px;
	background: url('background/SelectedItem.gif') repeat-x left -78px;
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .ItemTitle {
	height: 26px; line-height: 26px; 
	color: #0575CA;; 
	padding-left: 3px; /* orientation=lt */
	padding-right: 3px; /* orientation=rt */
}

/*#######################################-----RightColumnBigItemStyle-----####################################*/


.UIItemSelector .RightColumnBigItemStyle {
	overflow: hidden;
	width: 99.5%;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer {
	float: right; /* orientation=lt */
	float: left; /* orientation=rt */
	width: 210px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer .ItemList {
	border: 1px #b7b7b7 solid;
	background: white url('background/ItemList.jpg') no-repeat right bottom;
	height: 290px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemDetailList {
	border: 1px #b7b7b7 solid;
	background: white;
	padding: 1px; 
	margin-right: 220px; /* orientation=lt */
	margin-left: 220px; /* orientation=rt */
	height: 290px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer .ItemListTitle {
	font-size: 12px; text-align: center;
	height: 19px; line-height: 19px;
	border: solid 1px #b7b7b7;
	font-weight: bold; 
	margin-bottom: 2px;
	background: url('/eXoResources/skin/DefaultSkin/background/TitleBG1x20.gif') repeat-x;
}

.UIItemSelector .RightColumnBigItemStyle .ImageDecorator {
	height: 230px;
	padding: 5px;
}

/*###########################- Item Default -#############################*/
.UIItemSelector .RightColumnBigItemStyle .ItemList .Item {
	margin: 13px 6px;
	height: 32px;
	cursor: pointer;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserAccountIcon { 
	height: 32px;
	background: url('background/BigStyleUserAccountItem.gif') no-repeat;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .MembershipIcon {	
	height: 32px;
	background: url('background/BigStyleMembershipItem.gif') no-repeat;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserProfileIcon {	
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -130px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -130px; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserHomeInfoIcon {		
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -162px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -162px; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserBusinessInfoIcon {
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -194px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -194px; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .ItemName {
	height: 32px; line-height: 32px;
	background: url('background/SelectedItem.gif') no-repeat right -322px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat left -322px; /* orientation=rt */
	padding-right: 15px; /* orientation=lt */
	padding-left: 15px; /* orientation=rt */
	color: #526791;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .ItemTitle {
	height: 32px; line-height: 32px; 
	background: url('background/SelectedItem.gif') repeat-x left -386px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') repeat-x right -386px; /* orientation=rt */
	color: gray;
	padding-left: 10px; /* orientation=lt */
	padding-right: 10px; /* orientation=rt */
}


/*###########################- Item Selected -#############################*/
.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem {
	margin: 13px 6px;
	height: 32px;
	cursor: pointer;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserAccountIcon {
	height: 32px;
	background: url('background/BigStyleUserAccountSelected.gif') no-repeat left; /* orientation=lt */
	background: url('background/BigStyleUserAccountSelected-rt.gif') no-repeat right; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .MembershipIcon {
	height: 32px;
	background: url('background/BigStyleMembershipSelected.gif') no-repeat left; /* orientation=lt */
	background: url('background/BigStyleMembershipSelected-rt.gif') no-repeat right; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserProfileIcon {
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -226px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -226px; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserHomeInfoIcon {
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -258px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -258px; /* orientation=rt */
	padding-left: 30px; /* orientation=lt */
	padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserBusinessInfoIcon {
	height: 32px;
	background: url('background/SelectedItem.gif') no-repeat left -290px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -290px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .ItemName {
	height: 32px; line-height: 32px;
	background: url('background/SelectedItem.gif') no-repeat right -354px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat left -354px; /* orientation=rt */
	padding-right: 15px; /* orientation=lt */
	padding-left: 15px; /* orientation=rt */
	color: black;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .ItemTitle {
	height: 32px; line-height: 32px; 
	background: #d3d3eb;
	font-weight: bold; color: black;
	padding-left: 10px; /* orientation=lt */
	padding-right: 10px; /* orientation=rt */
}

/*#####################- End Item Selected && END BIG STYLE -#########################*/

/*###########################- LeftColumnStyle (The Item List is on the left side) -#########################*/

.UIItemSelector .LeftColumnStyle {
	width: 99.5%;
	overflow: hidden;
}

.UIItemSelector .LeftColumnStyle .ItemListContainer {
	float: left; /* orientation=lt */
	float: right; /* orientation=rt */
	width: 175px;
}

.UIItemSelector .LeftColumnStyle .ItemListContainer .ItemList {
	border: 1px #a4a4a4 solid;
	background: white;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList {
	height: auto;
	margin-left: 180px; /* orientation=lt */
	margin-right: 180px; /* orientation=rt */
	padding: 1px;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList .ItemDetail {
	height: 240px;
	background: white;
	border: 1px #a4a4a4 solid;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList .ItemDetailTitle{
	height: 22px;

}

.UIItemSelector .LeftColumnStyle .ItemListContainer .ItemListTitle {
	height: 23px;
}

.UIItemSelector .LeftColumnStyle .TitleIcon {
	float: left; /* orientation=lt */
	float: right; /* orientation=rt */
	margin: 0px 5px 0px 5px;
}

.UIItemSelector .LeftColumnStyle .Title {
	line-height: 22px;
	font-weight: bold; color: #5c5c5c; 
	float: left; /* orientation=lt */
	float: right; /* orientation=rt */
}

.UIItemSelector .LeftColumnStyle .ItemListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -418px;
}

.UIItemSelector .LeftColumnStyle .ViewListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -434px;
	margin-top: 3px;
}

/*##########################- Default Item	-#########################*/

.UIItemSelector .LeftColumnStyle .ItemList .Item {
	height: 26px;
	cursor: pointer;
	border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .LeftItem {
	background: url('background/SelectedItem.gif') no-repeat left top; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right top; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
	height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .RightItem {
	height: 26px; line-height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .ItemTitle {
	height: 26px; line-height: 24px; 
	padding-left: 5px; /* orientation=lt */
	padding-right: 5px; /* orientation=rt */
	white-space: nowrap;
	overflow: hidden;
	width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .CenterItemTitle {
	width: 96%;
	overflow: hidden;
	white-space: nowrap;
}

/*###########################- Over Item (When mouse over on this item) -############################*/

.UIItemSelector .LeftColumnStyle .ItemList .OverItem {
	height: 26px;
	cursor: pointer;
	border-bottom: 1px solid #dfdfdf;
	background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .LeftItem {
	background: url('background/SelectedItem.gif') no-repeat left -52px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -52px; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .RightItem {
	height: 26px; line-height: 26px; 
	background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .ItemTitle {
	height: 26px; line-height: 24px;
	color: #f67a02;
	padding-left: 5px; /* orientation=lt */
	padding-right: 5px; /* orientation=rt */
	white-space: nowrap;
	overflow: hidden;
	width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .CenterItemTitle {
	width: 96%;
	overflow: hidden;
	white-space: nowrap;
}

/*##########################- Selected Item	(When Item is selected)-#########################*/

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem {
	height: 26px;
	cursor: pointer;
	border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .LeftItem {
	background: url('background/SelectedItem.gif') no-repeat left -26px; /* orientation=lt */
	background: url('background/SelectedItem-rt.gif') no-repeat right -26px; /* orientation=rt */
	padding-left: 15px; /* orientation=lt */
	padding-right: 15px; /* orientation=rt */
	height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .RightItem {
	height: 25px; line-height: 23px;
	background: url('background/SelectedItem.gif') repeat-x left -78px;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .ItemTitle {
	height: 26px; 
	line-height: 24px;
	color: #0575CA; 
	padding-left: 5px; /* orientation=lt */
	padding-right: 5px; /* orientation=rt */
	white-space: nowrap;
	overflow: hidden;
	width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .CenterItemTitle {
	width: 96%;
	overflow: hidden;
	white-space: nowrap;
}

/*###########################- End LeftColumnItemList -#########################*/
/*###########################- Layout Template -#########################*/

.UIItemSelector .EmptyLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat top left;
}

.UIItemSelector .DesktopLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/TemplateContainer.jpg') no-repeat top left;
}

.UIItemSelector .DashboardLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/DashboardLayout.jpg') no-repeat center;
}

.UIItemSelector .TwoColumnsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -170px;
}

.UIItemSelector .ThreeColumnsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -340px;
}

.UIItemSelector .TwoColumnsOneRowLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -510px;
}

.UIItemSelector .TwoColumnsTwoRowsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -680px;
}

.UIItemSelector .TwoRowsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -850px;
}

.UIItemSelector .ThreeRowsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -1020px;
}

.UIItemSelector .OneRowTwoColumnsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -1190px;
}

.UIItemSelector .TwoTabsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -1360px;
}

.UIItemSelector .ThreeTabsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -1530px;
}

.UIItemSelector .ThreeRowsTwoColumnsLayout {
	width: 270px; height: 170px;
	margin: auto;
	background: url('background/ItemSelector.gif') no-repeat left -1700px;
}
