/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Effects definitions - query results page, jsp Effects page etc.
 transition: property duration timing-function delay, next...
 transform - not directly supported but specific forms are.
 
 See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
      https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.RoundedBorderBox
{
	padding: 				20px;

	-moz-border-radius:		20px; 
	-webkit-border-radius:	20px; 
	border-radius:			20px; 

	/* clipping/limmiting the background color/image/gradienet etc.: 
		biggest area - includes border: border-box 
		inside the border includes padding: padding-box
		just the content - inside the padding: content-box
	*/
	-moz-background-clip:	padding; 
	-webkit-background-clip:padding-box; 
	background-clip:		padding-box; 
}

.BackgroundGradient
{
	background-color:	#eeeeee;
	background-image:	-webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
	background-image:	-webkit-linear-gradient(top, #eeeeee, #999999); 
	background-image:	-moz-linear-gradient(top, #eeeeee, #999999); 
	background-image:	-ms-linear-gradient(top, #eeeeee, #999999); 
	background-image:	-o-linear-gradient(top, #eeeeee, #999999); 
}
/*
	looks better without the gradient in IE 8&9
filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr="#ffffff", endColorstr="#bbb"); 

background: url("../image/header_background.png") no-repeat 5px 5px, -moz-linear-gradient(right, black, white);
background: url("../image/header_background.png") no-repeat 5px 5px, -webkit-gradient(linear, right, left, from(black), to(white)); 
background: url("../image/header_background.png") no-repeat 5px 5px, -webkit-linear-gradient(right, black, white); 
background: url("../image/header_background.png") no-repeat 5px 5px, -o-linear-gradient(right, black, white);
background: url("../image/header_background.png") no-repeat 5px 5px, linear-gradient(to left, black, white); 
*/



.Transition,
.Transition .Container
{

	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
	     -o-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	        transition: all 0.3s ease;
}

.Fade,
.Fade .Container
{

	-webkit-transition: opacity 0.5s ease;
	   -moz-transition: opacity 0.5s ease;
	     -o-transition: opacity 0.5s ease;
	    -ms-transition: opacity 0.5s ease;
	        transition: opacity 0.5s ease;
}


/* trans and origin are messed */
.XXXXFoldout .Container
{
	/* Prevent some white flashing in Safari 5.1 */
	-webkit-backface-visibility: hidden;

	-webkit-transform:	scale(0) skew(50deg);
	-moz-transform:		scale(0) skew(50deg);
	-ms-transform:		scale(0) skew(50deg);
	-o-transform:		scale(0) skew(50deg);

	-webkit-transform-origin: 0px -30px;
	-moz-transform-origin:    0px -30px;
	-ms-transform-origin:     0px -30px;
	-o-transform-origin:      0px -30px;

	/* does transition on transform effects, then on opacity */
	-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
	-moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
	-ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
	-o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
}
.Foldout:hover
{
	opacity: 1;
	-webkit-transform: scale(1) skew(0deg);
	-moz-transform:    scale(1) skew(0deg);
	-ms-transform:     scale(1) skew(0deg);
	-o-transform:      scale(1) skew(0deg);
}

/* 
	Get the triangle effect because of the border size and the blank content.
	The height and width need to be forced to 0 as well.
*/
.TopCallOut:after
{
	content: "";
	position: absolute;
	bottom: 100%;	/* places this below the box */
	left: 30px;		/* moves it over  a little */
	width:  0;
	height: 0;

	border-bottom: 20px solid red;
	border-left:   14px solid transparent;
	border-right:  14px solid transparent;
}

/*============================ End of Style Sheet ============================*/