// Variables
@echrHoverColor:									#ffffd0;
@echrSelectColor:									#d0ffd0;

// Mixins
.leftRightGradient (@startColor: #555, @endColor: #333) {
	background-color: @endColor;
	background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
	background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
	background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
	background-image: linear-gradient(left, @startColor, @endColor); // Le standard
	background-repeat: repeat-x;
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.ellipsis(@backColor: #FF0000) {
	@startColor: rgba(red(@backColor), green(@backColor), blue(@backColor), 0);
	@endColor: rgba(red(@backColor), green(@backColor), blue(@backColor), 255);
	.leftRightGradient (@startColor, @endColor);
	background-color: transparent;
}

// Styles
.component {
	.componentContent {
		.componentHeading {
			/*Headings 1-3 have styles but can be left alone*/
			// h1 {
				// color :  #174f82;
				// background-color :  #edecec;
				// padding : 5px!important;
				// margin-top : 0!important
			// }
			// h2 {
				// color :  #174f82;
				// background-color :  #edecec;
				// padding : 5px!important;
				// margin-top : 0!important
			// }
			// h3 {
				// color :  #333;
				// border-bottom : 1px solid #d8d8d8!important;
				// padding : 0 0 2px 0!important
			// }
			/*End of headings*/
		}
	}
	&:hover {
		.feedTextEllipsis {
			.ellipsis(@echrHoverColor);
		}
	} 
	&.selectedComponent {
		.feedTextEllipsis {
			.ellipsis(@echrSelectColor);
		}
	}
}

/*Style of the Contents component*/
.componentContentsBlock {
	.componentContent {
		.componentHeading {
			h1,h2,h3,h4 {
				background-color :  #4b9afa!important;
				color :  #fff!important;
				padding-top : 4px!important;
				padding-bottom : 2px!important;
				padding-left : 5px!important;
				padding-right : 0!important;
				margin-top : 0!important;
				border-top : 0!important;
				font-size : 17px!important;
				font-weight : normal!important;
				line-height : 18px!important
			}			
		}
	}
}
/*End of the Style of the Contents component*/

/*Style of the Heading component*/
.componentHeadingBlock {
	.componentContent {
		.componentHeading {
			h1,h2,h3,h4 {
				margin-bottom : 0!important;
				border : 0!important;
			}			
		}
	}
}
/*End of the Style of the Heading component*/

/*Style of the Containers component*/
// .componentContainerBlock {
	// &.componentStyleDefault {
	// }
	// &.componentStyle01 {
		// background-image: none;
		// background-color: #f4f4f4;
		// padding-top: 5px;
		// padding-bottom: 5px;
	// }
	// &.componentStyle02 {
		// background-image: none;
		// background-color: #f4f4f4;
		// border: 1px #9a9c9e solid !important;
		// margin: -1px;
		// padding-top: 5px;
		// padding-bottom: 5px;
	// }
	// &.componentStyle03 {
		// background-image: none;
		// background-color: #e6e6e6;
		// padding-top: 5px;
		// padding-bottom: 5px;
	// }
	// &.componentStyle04 {
		// background-image: none;
		// background-color: #e6e6e6;
		// border: 1px #9a9c9e solid !important;
		// margin: -1px;
		// padding-top: 5px;
		// padding-bottom: 5px;
	// }
	// .componentStyle05 {
	// }
	// .componentStyle06 {
	// }
	// .componentStyle07 {
	// }
	// .componentStyle08 {
	// }
	// .componentStyle09 {
	// }
	// .componentStyle10 {
	// }
// }
/*End of the Style of the Containers component*/

/*Style of the Feed (News) component*/
.componentFeedBlock {
	.feedTextEllipsis {
		.ellipsis(#ffffff);
	}		
}
/*End of the Style of the Feed (News) component*/

/*Default Style*/
.componentStyleDefault {
	&.componentContainerBlock {
	}
	>.componentContent {
		background-color: transparent !important;
		border: 1px transparent solid !important;
		.feedTextEllipsis {
		}
		.componentHeading {
			background-color: transparent !important;
			h1 {
				color :  #174f82 !important;
				background-color :  #edecec !important;
				padding : 5px !important;
				margin-top : 0 !important;
			}
			h2 {
				color :  #174f82 !important;
				background-color :  #edecec !important;
				padding : 5px !important;
				margin-top : 0! !important;
			}
			h3 {
				color :  #333 !important;
				border-bottom : 1px solid #d8d8d8 !important;
				padding : 0 0 2px 0 !important;
			}
		}
		.componentBody {
		}
	}
}
/*End of Default Style*/

/* Style 1 - Red with grey background */
.componentStyle01 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #b5b9bd solid !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #b5b9bd solid !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			background-color: #a13838 !important; // Dark red
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 1*/
	
/* Style 2 - Dark Blue with grey background */
.componentStyle02 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #9a9c9e solid !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #9a9c9e solid !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			background-color: #2b3e73 !important; // Dark blue
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 2*/

/* Style 3 - Border Only */
.componentStyle03 {
	&.componentContainerBlock {
		border: 1px #9a9c9e solid !important;
	}
	>.componentContent {
		border: 1px #9a9c9e solid !important;
		.componentHeading {
			h1,h2,h3,h4 {
				background-color: transparent;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 3*/

/* Style 4 - Grey Background Only*/
.componentStyle04 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #f4f4f4 !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #f4f4f4 !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			h1,h2,h3,h4 {
				background-color: transparent;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 4*/

/* Style 5 - Orange */
.componentStyle05 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #9a9c9e solid !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #9a9c9e solid !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			background-color: #f78b00 !important;
			padding: 0px !important;
			h1,h2,h3,h4 {
				background-color: transparent;
				color: #ffffff !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 5*/

/* Style 6 - Light Blue with grey background */
.componentStyle06 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #b5b9bd solid !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #f4f4f4 !important;
		border: 1px #b5b9bd solid !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			background-color: #085cb1 !important;
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 6*/

/* Style 7 - Light Blue Only */
.componentStyle07 {
	&.componentContainerBlock {
		border: 1px #b5b9bd solid !important;
	}
	>.componentContent {
		border: 1px #b5b9bd solid !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			background-color: #085cb1 !important;
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 7*/

/* Style 8 - Red with no background */
.componentStyle08 {
	&.componentContainerBlock {
	}
	>.componentContent {
		.componentHeading {
			background-color: #a13838 !important;
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 8*/

/* Style 9 - Dark Blue no background */
.componentStyle09 {
	&.componentContainerBlock {
	}
	>.componentContent {
		.componentHeading {
			background-color: #2b3e73 !important;
			h1,h2,h3,h4 {
				background-color: transparent;
				color: white !important;
				padding: 5px !important;
				margin-top: 0px !important;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 9*/

/* Style 10 - Coming soon */
.componentStyle10 {
	&.componentContainerBlock {
		background-image: none;
		background-color: #d5e2f0 !important;
	}
	>.componentContent {
		background-image: none;
		background-color: #d5e2f0 !important;
		.feedTextEllipsis {
			.ellipsis(#f4f4f4);
		}
		.componentHeading {
			h1,h2,h3,h4 {
				background-color: transparent;
			}
		}
		.componentBody {
			padding: 0px 5px !important;
		}
	}
}
/*End of Style 10*/