/*******************************************************
Definition of components styles
*******************************************************/

.topAngular{
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px; 
	-khtml-border-top-left-radius:5px; 
	-khtml-border-top-right-radius:5px; 
	border-top-left-radius:5px;
	border-top-right-radius:5px; 
}

.componentWhiteBorder{
	border: 2px solid #fff;
	background: #fff2be;
}

.component{
	border: 1px solid #cbcbcd;
	background: #fff2be;
	padding: 0;
	margin: 0;
}

/* only as div container for now */
.componentHeader{
	position:relative;
	border-bottom: 1px solid #cbcbcd;
}

.componentHeaderLine{
	min-height: 22px; /* force height: needed for empty header */
	padding: 4px 5px 4px 15px;	/* top right bottom left */
	
	text-shadow:1px 1px 0px #fff6af;

	background: #ffe681;
	background: -moz-linear-gradient(
		top,
		#fff6af 0%,
		#FFE680 50%,
		#ffe681);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#fff6af),
		color-stop(0.50, #FFE680),
		to(#ffe681));
}

.componentHeaderLineLight{
	min-height: 30px; /* force height: needed for empty header */
	padding: 4px 5px 4px 15px;	/* top right bottom left */
	background: #eee;
	/*
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#dedede);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#dedede));
	*/
}

.componentHeaderLineLight h2{
	font-family: 'Open Sans', sans-serif;
	/*
	font-weight: 400;
	font-size: 13pt;
	*/
	font-weight: 300;
	font-size: 16pt;
	text-transform: none;
	letter-spacing: 0.01em;
	color: #333;
}

.componentHeaderLineLight h2:first-letter{
	font-size: inherit;
}

.componentHeaderLineProfile{
	min-height: 53px; /* force height: needed for empty header */
	padding: 4px 25px 4px 35px;	/* top right bottom left */
	background: #fff;
}

.componentHeaderLineProfile h2{
	display: inline-block;
	/* font-family: 'Open Sans Condensed', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 20pt;
	text-transform: none;
	/* letter-spacing: 0.01em; */
	color: #333;
	margin-top: 12px;
	margin-bottom: 12px;
}

.componentHeaderLineProfile h2:first-letter{
	font-size: inherit;
}

.profileHeaderWhiteSpace{
	min-height: 30px; /* force minimal height: needed for empty white area */
	background: #eee;
	border-top: 1px solid #cbcbcd;
	padding-left: 35px;
	padding-right: 35px;
}

.componentHeaderWhiteSpace{
	min-height: 30px; /* force minimal height: needed for empty white area */
	background: #fff;
	border-top: 1px solid #cbcbcd;
	padding-left: 15px;
}

.componentHeaderWhiteArrow{
	position: absolute;
	top: 60px;
	left: 38px;
	width: 13px;
	height: 8px;
	background: url('../img/arrow.png') 0 0 no-repeat;
	z-index: 300000;
}

.componentContent{
	position: relative;
	padding: 15px 15px 10px 15px;	/* top right bottom left */
}

.oneRowComponent{
	/* min-height: 240px; */
	overflow-x: scroll;
}

.smallColComponent{
	width: 343px;
	float: left;
	display: block;
	/* margin-right: 10px; */
}

.smallContentRightMargin{
	margin-right: 10px;
}

.action-errors{
	color: red;
	padding-bottom: 20px;
}

/*
.mediumColComponent{
	width: 450px;
	float: left;
	display: block;
	margin: 0 auto;
}
*/

.bannerContent{
	position: relative;
	padding: 0;
	margin: 0;
	overflow: auto;
}

.bannerBGDefault{
	background-color:#ece7e3;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f8f5f4), color-stop(1, #d1ccc9) );
	background:-moz-linear-gradient( center top, #f8f5f4 5%, #d1ccc9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f5f4', endColorstr='#d1ccc9');
	color: #336699;
}

.bannerBGBlue{
	background-color: #849eb5;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #849eb5), color-stop(1, #59748d) );
	background:-moz-linear-gradient( center top, #849eb5 5%, #59748d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#849eb5', endColorstr='#59748d');
	color: white;
}

.bannerBGWhite{
	background-color: #white;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eff3f6), color-stop(1, #d5dfe9) );
	background:-moz-linear-gradient( center top, #eff3f6 5%, #d5dfe9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eff3f6', endColorstr='#d5dfe9');
	color: #336699;
}

.componentContentBgColorDefault{
	background: #f7f8fa;
}

.componentContentBgColorLight{
	background: #fff;
}

.componentContentWithUpperBorder{
	border-top: 3px double #cbcbcd;
}

/******  general content spacer component ******/
.componentSpacer{
	width: 100%;
	height: 11px;
}
.componentSpacerTall{
	width: 100%;
	height: 25px;
}
.componentSpacerTop{
	height: 5px;
}
.componentSpacerMiddle{
	height: 0px;
	/* border-bottom: 1px solid #9f9989; */
	border-bottom: 1px solid #aaa;
}
.componentBottom{
	height: 5px;
}

/********** compontent inner spacer **************/
.componentInnerSpacer{
	height: 14px;
}

.componentInnerSpacerLine{
	height: 5px;
	border-bottom: 1px solid #ccc;
}

.componentInnerSpacerLineBottom{
	height: 9px;
}