/** *********************************************************************************************************
										Dropshadow.css
********************************************************************************************************** **/

.topRightShadow,
.topLeftShadow,
.bottomLeftShadow,
.bottomRightShadow,
.topCrop,
.rightCrop,
.bottomCrop,
.leftCrop{
	display: none;
}

.topCrop,
.rightCrop,
.bottomCrop,
.leftCrop{
	overflow: hidden;
	position: absolute;
}

.showTopArrow .topModifier,
.showBottomArrow .bottomModifier,
.showLeftArrow .leftModifier,
.showRightArrow .rightModifier{
	background: transparent url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_pointer.png) no-repeat ;
}

.top .topCrop,
.right .rightCrop,
.bottom .bottomCrop,
.left .leftCrop,
.top .topLeftShadow,
.left .topLeftShadow,
.top .topRightShadow,
.right .topRightShadow,
.bottom .bottomLeftShadow,
.left .bottomLeftShadow,
.bottom .bottomRightShadow,
.right .bottomRightShadow{
	display: block;
}

.topDropShadow,
.rightDropShadow,
.bottomDropShadow,
.leftDropShadow,
.topLeftShadow,
.topRightShadow,
.bottomLeftShadow,
.bottomRightShadow{
	position: absolute;
	overflow: hidden;
}

.topLeftShadow,
.topRightShadow,
.bottomLeftShadow,
.bottomRightShadow{
	width: 9px;
	height: 9px;
	background: url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_corner_sprite.png);
}

.topCrop,
.bottomCrop,
.topDropShadow,
.bottomDropShadow{
	width: 100%;
	height: 9px;
}

.rightCrop,
.leftCrop,
.rightDropShadow,
.leftDropShadow{
	height: 100%;
	width: 9px;
}

.topCrop{
	top: -9px;
}

.topDropShadow{
	background: url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_ver_sprite.png) scroll 0 0;
}

.rightCrop{
	right: -9px;
}

.rightDropShadow{
	background: url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_hor_sprite.png) scroll -8px 0;
}

.bottomCrop{
	bottom: -9px;
}

.bottomDropShadow{
	background: url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_ver_sprite.png) scroll 0 -8px;
}

.leftCrop{
	left: -9px;
}

.leftDropShadow{
	background: url(https://www.yanomo.com/assets/6.7/jst/components/layout/dropshadow_hor_sprite.png) scroll 0 0;
}

.topLeftShadow{
	background-position: 0 0;
	top: -9px;
	left: -9px;
}
.topRightShadow{
	background-position: -11px 20px;
	top: -9px;
	right: -9px;
}

.bottomLeftShadow{
	background-position: 20px 9px;
	left: -9px;
	bottom: -9px;
}

.bottomRightShadow{
	background-position: -11px -11px;
	bottom: -9px;
	right: -9px;
}

/** **************** thes single side shades **************** */
.right.noTop.noBottom .rightDropShadow{
	margin-top:9px;
}

.right.noTop.noBottom .rightCrop{
	top: -9px;
}

.bottom.noRight.noLeft .bottomDropShadow{
	left: -18px;
}

.bottom.noRight.noLeft .bottomCrop{
	right: -9px;
}

.left.noTop.noBottom .leftDropShadow{
	margin-top:9px;
}

.left.noTop.noBottom .leftCrop{
	bottom: 9px;
}

.top.noRight.noLeft .topDropShadow{
	margin-left:9px;
}

.top.noRight.noLeft .topCrop{
	right: 9px;
}


/** *********************** **/

.right.noTop .topRightShadow{
	top: 0;
}

.top.noRight .topRightShadow{
	right: 0;
}

.right.noBottom .bottomRightShadow{
	bottom: 0;
}

.bottom.noRight .bottomRightShadow{
	right: 0;
}

.bottom.noLeft .bottomLeftShadow{
	left: 0;
}

.left.noBottom .bottomLeftShadow{
	bottom: 0;
}

.left.noTop .topLeftShadow{
	top: 0;
}

.top.noLeft .topLeftShadow{
	left: 0;
}

.left.noTop .leftDropShadow{
	top: 9px;
}

.right.noTop .rightDropShadow{
	top: 9px;
}

.left.noBottom .leftDropShadow{
	bottom: 9px;
}

.right.noBottom .rightDropShadow{
	bottom: 9px;
}

.top.noRight .topDropShadow{
	right: 9px;
}

.bottom.noRight .bottomDropShadow{
	right: 9px;
}

.top.noLeft .topDropShadow{
	left: 9px;
}

.bottom.noLeft .bottomDropShadow{
	left: 9px;
}



.topModifier,
.rightModifier,
.bottomModifier,
.leftModifier{
	position: absolute;
	display: block;
}

.topModifier{
	top: 0;
	width: 100%;
}

.rightModifier{
	right: 0;
	height: 100%;
}

.bottomModifier{
	bottom: 0;
	width: 100%;
}

.leftModifier{
	left: 0;
	height: 100%;
}

.showTopArrow .topModifier,
.showBottomArrow .bottomModifier,
.showLeftArrow .leftModifier,
.showRightArrow .rightModifier{
	z-index: 20;
}

.showTopArrow .topModifier{
	top: -30px;
	width: 60px;
	height: 30px;
	left: 20px;
	background-position: -60px 0;
}

.showLeftArrow .leftModifier{
	left: -30px;
	width: 30px;
	height: 60px;
	top: 20px;
	background-position: -121px 0;
}

.showBottomArrow .bottomModifier{
	bottom: -30px;
	width: 60px;
	height: 30px;
	left: 20px;
}

.showRightArrow .rightModifier{
	right: -30px;
	width: 30px;
	height: 60px;
	top: 20px;
	background-position: -154px 0;
}

/** *********************************************************************************************************
										InpagePopupContainer.css
********************************************************************************************************** **/
.inpagePopupContainer{
	padding: 0;
	margin: 0;
	position: absolute;
	left: 50%;
	margin-left: -15em;
	background-color: #FFF;
	top: 50px;
	z-index: 101;
	max-width: 30em;
}

.inpagePopupLayer{
	padding: 0.5em;
	border: 0 none;
}

.inpagePopupUnderlay{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height:100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 100;
}

.inpagePopupWrapper.hideUnderlay .inpagePopupUnderlay{
	display: none;
}

/** *********************************************************************************************************
										PercentageBars.css
********************************************************************************************************** **/

.percentageBar,
.percentageFiller{
	display: block;
	height: 1.3em;
}

.percentageBar{
	position: relative;
	width: 10em;
	font-size: 80%;
	background-color: #DDD;
}

.barContainer{
	width: 100%;
	position: absolute;
	left:0;
	display: block;
}
.percentageFiller{
	position: absolute;
	left: 0;
	top: 0;
	height:100%;
	background-color: #0099FF;
}

.percentage{
	position: absolute;
	display: block;
	left:0;
	top:0;
	margin-left: -104%;
	text-align: right;
	width: 100%;
	z-index: 1;
	display: none;
}

.barContainer:hover{
	background-color: #CCC;
}

.barContainer:hover .percentageFiller{
	background-color: #00BBFF;
}

.barContainer:hover .percentage{
	display: block;
}



/** *********************************************************************************************************
										RoundedCornedrs.css
********************************************************************************************************** **/



.roundedCorners{
	width: 100%;
	height: 100%;
}

.topRight,
.topLeft,
.bottomRight,
.bottomLeft{
	position: absolute;
	z-index: 3;
	background-repeat: no-repeat;
	overflow: hidden;
}

.bottomLeft{
	bottom: 0;
	left: 0;
}

.bottomRight{
	bottom: 0;
	right: 0;
}

.topLeft{
	top: 0;
	left: 0;
}

.topRight{
	top: 0;
	right: 0;
}

/** the non image classes TODO: make work for anything else but 5px rounded corners */

.rtop, .rbottom{
	display:block;
	background:#fff;
}
 .rtop *, .rbottom *{
	display: block;
	height: 1px;
	overflow: hidden;
	background:#ccc;
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}


/** *********************************************************************************************************
										emptytextfieldexplenation.css
********************************************************************************************************** **/

.elementExplenation{
	display: block;
	position: absolute;
	overflow: hidden;
	color: #BBB;
	font-size: 90%;
	overflow: hidden;
}

.elementExplenation .elementExplenationTxtCont{
	width: 100%;
}

.elementExplenation.helpMessageHidden{
	display: none;
}

/** *********************************************************************************************************
										ForceAutocomplete.css
********************************************************************************************************** **/


.forceAutocompleteHandler {
	background-color: #DDD;
	cursor: pointer;
	margin-left: -22px;
	position: absolute;
	top: 10px;
}

.forceAutocompleteFieldContainer{
	position: relative;
}

.forceItemCreation input{
	border: 2px solid #00ff00;
}

#all div.t-autocomplete-menu ul li{
	padding: 4px 6px;
	font-size: 14px;
}

.forceItemCreation input{
	border: 2px solid #00BA99;
}

#all div.t-autocomplete-menu ul li.addItem{
	color: #349E18;
}

#all div.t-autocomplete-menu ul li.addItem{
	background-color: #349E18;
	color: #FFF;
}

#all div.t-autocomplete-menu ul li.addItem:hover,
#all div.t-autocomplete-menu ul li.selected.addItem{
	color: #FFF;
	background-color: #224d6f;
}