﻿/* component wrapper */
#componentWrapper{
	width:920px; height:400px; left:50%; top:50%; margin-left:0px!IMPORTANT; margin-top: 0px!IMPORTANT; /*background:#ccc;*/
}

/* wrapper for scroll */
#componentWrapper .componentScrollWrapper{
	position:relative; top:0px; left:0px; width:100%; height:400px; 
	/* hide playlist on beginning, then animate in after slide setup */
	opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; 	-moz-opacity: 0; 
}

#componentWrapper .componentPlaylist{
	position:relative; top:0px; left:0px; height:400px; overflow:hidden; 
}

/* slide holder. */
#componentWrapper .slide{
	position:absolute; top:0px; left:0px; width:780px; height:400px; background:#f7f7f7;
}

/* image in slide */
#componentWrapper .slide .stack_img{
	position:absolute; top:0px; left:0px; width:370px; height:400px; display:block;
}
#componentWrapper .slide .ms-fillBoxFull{
	position:absolute; top:0px; left:0px; width:370px!important; height:400px!important; display:block;
}

/* controls */
#componentWrapper .componentControls		{position:relative; width:60px; height:33px; display:none; top: -30px; left: 0px;/*background:red;*/}

#componentWrapper .componentControls .controls_toggle{
	display: none;
}

#componentWrapper .componentControls .controls_previous{
	position:absolute; top:0px; left:0px; width:30px; height:30px;
}

#componentWrapper .componentControls .controls_previous img{
	position:absolute; display:block; top:0px; left:0px; width:30px; height:30px;
}

#componentWrapper .componentControls .controls_next{
	position:absolute; top:0px; left:31px; width:30px; height:30px;
}

#componentWrapper .componentControls .controls_next img{
	position:absolute; display:block; top:0px; left:0px; width:30px; height:30px;
}

#componentWrapper .slide_content {
	position: absolute; top:0px; left:370px; width:370px; padding:0px; font-family:Arial;}

.slidecategorie		{background: #82D1EE; float: left; width: 200px; padding: 20px 0 20px 20px; color: white; height: 18px;}
.slide_txt			{width: 320px; margin: 30px 0 0 50px; float: left;}

.slidecategorie h4	{
	line-height: 16px;
}

#componentWrapper .slide_content h3{
	font-size: 25px; color:#003750;
}

#componentWrapper .slide_content h4{
	color:white;
}

#componentWrapper .slide_content p{
	color:#003750;

}

#componentWrapper .slide_content a{
	color:#003750; text-decoration:underline; font-weight:bold;
}

#componentWrapper .slide_content a:hover, a:active{
    text-decoration:underline;
}

/* detail holder */
#componentWrapper .slide_detail{
	position:absolute; 
	width:30px; height:80px; right:20px; top:20px; /*background:red;*/
}

/* image details for lightbox */
#componentWrapper .pp_content{
	position:relative; 
	display:block; width:30px; height:30px; left:0px; top:0px; margin-bottom:10px;
}

/* image link */
#componentWrapper .pp_link{
	position:relative; 
	display:block; width:30px; height:30px; left:0px; top:0px;
}

/* preloader */
#componentWrapper .mediaPreloader{
	position:absolute; top:50%; left:50%; margin:-25px 0px 0px -25px; background:#000 url('../data/loader.gif') no-repeat center center; width:50px; height:50px; z-index:999; opacity:0.7;
}


/* font calculations */
#componentWrapper .fontMeasure{
	visibility:hidden;
}

/* public functions */	
#publicFunctions{
	position: absolute; padding: 10px 25px 20px 20px; background:#555; left:50px; top:50px; font-family:Arial, Helvetica, sans-serif; font-size: 16px; color:#fff; list-style:circle; 
	-moz-box-shadow: 2px 2px 5px #222; -webkit-box-shadow: 2px 2px 5px #222; box-shadow: 2px 2px 5px #222; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222'); 
	display:none;
}

#publicFunctions li a{
	font-family:Arial, Helvetica, sans-serif; font-size: 16px; color:#fff;
}

#publicFunctions li a:hover, #publicFunctions li .current{
	text-decoration: underline;
}

/* just for preview purposes */
#previewInfo {
	position: absolute; padding: 10px 20px 10px 30px; background:#777; left:0px; top:100px; font-family:Arial, Helvetica, sans-serif; font-size: 17px; color:#fff; list-style:circle; 
	-moz-box-shadow: 2px 2px 5px #400; -webkit-box-shadow: 2px 2px 5px #400; box-shadow: 2px 2px 5px #400; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#400400')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#400400');}


.tab-content .ms-rtestate-field .actueel	{width: 960px; height: 420px;}
}

@media (max-width: 1024px) {

.tab-content .ms-rtestate-field 			{width: 100%;}
.tab-content .ms-rtestate-field .actueel	{width: 960px; height: 420px;}
.tab-content .ms-rtestate-field .accordion	{width: 100%;}


}

@media (max-width: 960px) {
.tab-content .ms-rtestate-field .actueel	{width: 960px; height: 420px;}
}


@media (max-width: 800px) {
#componentWrapper		{width:760px; height:400px; left:0%; top:50%; margin-left:0px!IMPORTANT; margin-top: 0px!IMPORTANT; /*background:#ccc;*/}

.tab-content .ms-rtestate-field .actueel	{width: 780px; height: 420px;}

}

@media (max-width: 768px) {

#componentWrapper									{width:740px; height:400px; left:0%; top:50%; margin-left:0px!IMPORTANT; margin-top: 0px!IMPORTANT; /*background:#ccc;*/}
#componentWrapper .slide 							{background-color: white;}
#componentWrapper .slide .slide_photo				{width: 300px; height:400px; overflow: hidden; float: left; position:relative;}
#componentWrapper .slide .slide_photo .stack_img	{position:absolute; top:0px; left:0px; height:400px; display:block;}
.slide_content										{left: 300px!important; width: 350px!important;}
.slidecategorie										{width:200px!important;}
.slide_txt											{width:350px!important; margin: 10px!important;}
.accordion											{overflow-x:hidden;overflow-y:hidden;}
.tab-content .ms-rtestate-field .actueel			{width: 760px; height: 420px;}

}

@media (max-width: 640px) {

#componentWrapper									{width:600px; height:400px; left:0%; top:50%; margin-left:0px!IMPORTANT; margin-top: 0px!IMPORTANT; /*background:#ccc;*/}
#componentWrapper .slide 							{background-color: white;}
#componentWrapper .slide .slide_photo				{width: 200px; height:400px; overflow: hidden; float: left; position:relative;}
#componentWrapper .slide .slide_photo .stack_img	{position:absolute; top:0px; left:0px; height:400px; display:block;}
.slide_content										{left: 200px!important; width: 250px!important;}
.slidecategorie										{width:250px!important;}
.slide_txt											{width:250px!important; margin: 10px!important;}
.accordion											{overflow-x:hidden;overflow-y:hidden;}
.tab-content .ms-rtestate-field .actueel			{width: 640px; height: 420px;}

}

@media (max-width: 480px) {

#componentWrapper									{width:460px; height:400px; left:0%; top:50%; margin-left:0px!IMPORTANT; margin-top: 0px!IMPORTANT; /*background:#ccc;*/}
#componentWrapper .slide 							{background-color: white;}
#componentWrapper .slide .slide_photo				{width: 75px; height:400px; overflow: hidden; float: left; position:relative;}
#componentWrapper .slide .slide_photo .stack_img	{position:absolute; top:0px; left:0px; height:400px; display:block;}
.slide_content										{left: 75px!important; width: 250px!important;}
.slidecategorie										{width:150px!important;}
.slide_txt											{width:250px!important; margin: 10px!important;}
.accordion											{overflow-x:hidden;overflow-y:hidden;}
.tab-content .ms-rtestate-field .actueel			{width: 480px; height: 420px;}

}

