*{
	margin:0;
	padding:0;
	border:0;
	outline:none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


	
	

	a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
-ms-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
	text-decoration: none;
	color:#9b8f8f;
}

	
	
 a:link {
	color:#9b8f8f;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}



	html, body { 
height:100%;
background-color:#000;


	}
	
	
	
#componentWrapper .swiffy_menu{
	position: absolute;
	top:353px;
	margin-left:-177px;
	width: 260px;
	height: 148px;
	visibility: visible;
	font-family:Helvetica, Geneva, "Century Gothic";
	font-size:13px;
	color:#9b8f8f;
	z-index:100;
}

#componentWrapper .about{
	position: absolute;
	top:63px;
	left:99px;
	width:800px;
	height: 390px;
	visibility: visible;
	font-family:"Century Gothic", Tahoma, Arial;
	font-size:14px;
	color:#999;
	z-index:100;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	-ms-animation: fadein 1s; /* Internet Explorer */
	-o-animation: fadein 1s; /* Opera < 12.1 */
	animation: fadein 1s;
}

#swiffycontainer_title {
	width: 174px;
	height: 60px;
	position:absolute;
	top:317px;
	left:-198px;
	z-index:1000;
}
#contactHolder{
	width: 243px;
	height: 60px;
	position:absolute;
	top:158px;
	left:-2px;
	overflow:hidden;
	font-family:Helvetica, Geneva, "Century Gothic";
	font-size:14px;
	
	color:#9b8f8f;
	display:none;
	z-index:5000;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}
	

#bg {
	background-color:#000;

	
	overflow:none;
	
-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:fixed; 
	top:0px; 
	left:0px; 
	width:100%; 
	height:100%;
		
		
		
			-moz-transition:0.4s ease-out;
	-webkit-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
	-ms-transition: 0.4s ease-out;
	transition: 0.4s ease-out;
	
	
		
}
   @media only screen and (min-width: 768px) {

/* wrapper for component */
#componentWrapper{
	position:absolute;
	/* width includes playerHolder and playlistHolder */
	width:915px;
	height:100%;
	/* center component on page */
	top:0px;
	left:220px;
	
	

	
}
#componentWrapper .innerWrapper{
	position:absolute;
	max-width:900px;
	height:400px;
	top:0px;
	left:0px;
	overflow:hidden;
	
	
		
}

/* player holder */	
#componentWrapper .playerHolder{
	position:absolute;
	top:400px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#111;
}	
   }
   
   @media only screen and (max-width: 768px) {

/* wrapper for component */
#componentWrapper .swiffy_menu{
	position: absolute;
	top:-20px;
	margin-left:10px;
	width: 260px;
	height: 148px;
	visibility: visible;
	font-family:Helvetica, Geneva, "Century Gothic";
	font-size:13px;
	color:#9b8f8f;
	z-index:100;
}
#componentWrapper .innerWrapper{
	position:absolute;
	max-width:700px;
	height:400px;
	top:0px;
	left:0px;
	overflow:hidden;
	
	
		
}

/* player holder */	
#componentWrapper .playerHolder{
	position:absolute;
	top:400px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#111;
}	
   }


/* inner wrapper for hiding the player/playlist as they animate in/out */


/* media holders */	
#componentWrapper .mediaHolder, 
#componentWrapper .mediaPreview,
#componentWrapper .youtubeIframeMain{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
	
}	

/* flash main embed */
#componentWrapper #flashMain{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	outline:none;
	display:none;
}	

/* flash preview embed */
#componentWrapper #flashPreview{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	outline:none;
	display:none;
}











/* preloader for video */
#componentWrapper .preloader{
	position:absolute;
	width:26px;
	height:21px;
	top:50%;
	left:50%;
	margin-left:-13px;
	margin-top:-10px;
	background: #111 url('../data/loading.gif') no-repeat center center; 
    display: none;
}





/* player controls */
#componentWrapper .playerControls{
	position:absolute;
	bottom:10px;
	left:10px;
	width:680px;
	height:33px;
	background-image: url('../data/bg.png'); 
	background-repeat: repeat-x; 
	display:none;
}

/* pause,play */
#componentWrapper .player_playControl{
	position:absolute;
	top:2px;
	left:4px;
	width:33px;
	height:28px;
	/*background:red;*/
}

#componentWrapper .player_playControl img{
	position:relative;
	display:block;
	top:6px;
	left:10px;
	width:12px;
	height:14px;
}

/* player progress, serves as hit as well */
#componentWrapper .player_progress{
	position:absolute;
	top:2px;
	left:42px;
	/* for hit */
	width:400px;
	height:28px;
	/*background:green;*/
}

#componentWrapper .progress_bg{
	position:absolute;
	top:10px;
	left:10px;
	width:380px;
	height:5px;
	background:#333333;
}

#componentWrapper .load_level{
	position:absolute;
	top:10px;
	left:10px;
	width:0px;
	height:5px;
	background:#ffffff;
}

#componentWrapper .progress_level{
	position:absolute;
	top:10px;
	left:10px;
	width:0px;
	height:5px;
	background:#999;
}

/* progress tooltip */
#componentWrapper .player_progress_tooltip{
	position:absolute;
	top:-15px;
	/* left is set in code (centered)*/
	width:75px;
	height:18px;
	background:#333;
	display:none;
	text-align:center;
	
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

#componentWrapper .player_progress_tooltip p {
    font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	margin:0;
	line-height:18px;
}

/* media time */
#componentWrapper .player_mediaTime{
	position:absolute;
	top:8px;
	right:150px;
	
	color:#e5e5e5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* volume */
#componentWrapper .player_volume{
	position:absolute;
	top:2px;
	right:110px;
	width:28px;
	height:28px;
	/*background:red;*/
}

#componentWrapper .player_volume img{
	position:relative;
	display:block;
	width:13px;
	height:14px;
	top:6px;
	left:8px;
}

/* player volume, serves as hit as well */
#componentWrapper .volume_seekbar{
	position:absolute;
	top:2px;
	right:45px;
	/* for hit */
	width:60px;
	height:28px;
	/*background:green;*/
}

#componentWrapper .volume_bg{
	position:absolute;
	top:10px;
	left:5px;
	width:50px;
	height:5px;
	background:#ffffff;
}

#componentWrapper .volume_level{
	position:absolute;
	top:10px;
	left:5px;
	width:0px;
	height:5px;
	background:#999;
}

/* volume tooltip */
#componentWrapper .player_volume_tooltip{
	position:absolute;
	top:-15px;
	/* left is set in code (centered)*/
	width:35px;
	height:18px;
	background:#333;
	display:none;
	text-align:center;
	
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

#componentWrapper .player_volume_tooltip p {
    font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#ffffff;
	margin:0;
	line-height:18px;
}




/* fullscreen */
#componentWrapper .player_fullscreen{
	position:absolute;
	top:2px;
	right:0px;
	width:36px;
	height:28px;
	/*background:red;*/
}

#componentWrapper .player_fullscreen img{
	position:relative;
	display:block;
	width:12px;
	height:12px;
	top:7px;
	left:8px;
}



/* big play btn for video */
#componentWrapper .big_play{
	position:absolute;
	width:76px;
	height:76px;
	left:50%;
	top:50%;
	margin-left:-38px;
	margin-top:-38px;
	display:none;
}

#componentWrapper .big_play img{
	display:block;
	width:76px;
	height:76px;
}





#componentWrapper .player_addon{
	position:absolute;
	bottom:60px;
	left:10px;
	width:40px;
	/*background:red;*/
	display:none;
}

#componentWrapper .playlist_toggle{
	position:relative;
	bottom:0px;
	left:0px;
	width:40px;
	height:40px;
	background-image: url('../data/bg2.png'); 
	background-repeat: repeat; 
	margin-top:7px;
}

#componentWrapper .playlist_toggle_iphone{
	position:absolute;
	top:180px;
	left:-40px;
	width:40px;
	height:40px;
	background-image: url('../data/bg2.png'); 
	background-repeat: repeat; 
}

/* description btn */
#componentWrapper .info_toggle{
	position:relative;
	bottom:0px;
	left:0px;
	width:40px;
	height:40px;
	background-image: url('../data/bg2.png'); 
	background-repeat: repeat; 
	display:none;
}

/* media description */
#componentWrapper .infoHolder{
	position:absolute;
	width:100%;
	height:235px;
	top:0px;
	left:0px;
	overflow:hidden;
	display:none;
}

#componentWrapper .info_inner{
	color:#ccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	padding:20px;
	background:#111;
}

#componentWrapper .infoTitle{
	color:#c66;
	font-size:25px;
}

#componentWrapper .infoHolder a{
	color:#FF6;
}







/* playlist holder */	
#componentWrapper .playlistHolder{
	width:100%;
	height:100%;
	background-color:#fff;
	
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
	
	

	
}

#componentWrapper .componentPlaylist{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}


#componentWrapper .playlist_inner{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow-y:scroll;
	cursor:pointer;	
	
}

.playlist_inner::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	background-color: #333;
	
	
}

.playlist_inner::-webkit-scrollbar
{
	width: 15px;
	background-color: #333;
	cursor:pointer;
	
}

.playlist_inner::-webkit-scrollbar-thumb
{
	background-color: #999;
	-webkit-box-shadow:  0 0 6px rgba(0,0,0,0.5);
	cursor:pointer;
	
	
}

#componentWrapper .playlist_content{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
	


 



}









/* playlist data remains hidden! */
#componentWrapper .playlistData{
	display:none;
}




#componentWrapper .playlistNonSelected{
	position:relative;
	top:0px;
	left:0px;
	width:300px;
	height:225px;
		
	list-style:none;
	
	
	float:left;
	
	


	
	
	overflow:hidden;
	

}
#componentWrapper .playlistNonSelected:hover{
	position:relative;
	top:0px;
	left:0px;
width:300px;
	height:225px;
		
	list-style:none;
	
	
	float:left;
	
	overflow:hidden;
	
	
-webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   
  -webkit-filter: brightness(135%);
  filter: brightness(135%);
  
  

	

   
}

#componentWrapper .playlistSelected{
	position:relative;
	top:0px;
	left:0px;
	width:300px;
	height:225px;
	
	list-style:none;
	
	
	float:left;
	
	
	
	overflow:hidden;
		
	
	
}

/* div which will hold the preview video. Also holds thumb image and preview video preloader. */
#componentWrapper .playlistThumb {
	position:absolute;
	top:0px;
	left:0px;
	width:300px;
	height:225px;
	background:#111;
	overflow:hidden;
	

   
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
	
	
}


/* thumb image inside playlistThumb div. Needs to have class of thumb to distinguish between img preloader */
#componentWrapper .thumb{
	position:absolute;
	top:0px;
	left:0px;
	display:block;
	
	
	width:300px;
	height:225px;
	
	/* hide thumbs on beginning */
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0; 
}


#componentWrapper .playlistInfo {
	position:absolute;
	left:0px;
	top:205px;
	width:224px;
	height:20px;
	text-align:left;
	/*background:green;*/
	overflow:visible;
	color: #fff;
	font-family: Tahoma, Geneva, sans-serif;
	font-size:12px;
	display:block;

	
		z-index:10;
	display:none;
	
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
	
	
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



#componentWrapper .playlistTitleNonSelected {
	
	color: #fff;
	font-family: Tahoma, Geneva, sans-serif;
	font-size:12px;
	
	-webkit-font-smoothing: antialiased;
			opacity: 1; 
	filter: alpha(opacity=1); 
	-ms-filter: "alpha(opacity=1)"; 
	-khtml-opacity:1; 
	-moz-opacity:1;
	
	
	
}

#componentWrapper .playlistTitleSelected {
	
	color:#fff;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size:10px;

	-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   
	-webkit-font-smoothing: antialiased;
	 		opacity: 1; 
	filter: alpha(opacity=1); 
	-ms-filter: "alpha(opacity=1)"; 
	-khtml-opacity: 1; 
	-moz-opacity:1;
	
}



/* playlist description */
#componentWrapper .playlistContent {

	

}






/* thumb image inside playlistThumb div. Needs to have class of thumb to 

/* video preview holder */
#componentWrapper .thumb_vid{
	position:absolute;
	top:0px;
	left:0px;
	display:block;
	width:300px;
	height:169px;
}

/* youtube thumb inside playlistThumb div */
#componentWrapper .thumb_yt{
	position:relative;
	top:0px;
	left:0px;
	display:block;
	width:300px;
	height:169px;
	
	/* hide thumbs on beginning */
	opacity: 0; 
	filter: alpha(opacity=0); 
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: 0; 
	-moz-opacity: 0; 
}

/* youtube iframe preview holder */
#componentWrapper .youtubeIframePreview{
	position:absolute;
	top:0px;
	left:0px;
	/*size same as the playlist thumb!*/
	width:300px;
	height:169px;
	opacity:0.01;/*safari fix*/
	
}







/* blocks click on yt iframe! */
#componentWrapper .yt_overlay_blocker{
	position:absolute;
	top:0px;
	left:0px;
	/*size same as the playlist thumb!*/
	width:300px;
	height:169px;
	background:green;
	opacity:0;
}

#componentWrapper #flashPreviewHolder{
	position:absolute;
	top:0px;
	left:0px;
	/*size same as the playlist thumb!*/
	width:300px;
	height:169px;
}

#componentWrapper .thumbPreloader{
	position:absolute;
	width:16px;
	height:11px;
	top:50%;
	left:50%;
	margin-left:-8px;
	margin-top:-6px;
	display:none;
}





/* shadow beneath the component */
#componentWrapper .playerShadow{
	position:absolute;
	width:950px;
	height:60px;
	top:543px;
	left:-2px;

}







/* prettyphoto content */
#componentWrapper #inline-1,
#componentWrapper #inline-2{
	display:none;
		
}








/* 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{
	color:#fff;
}

#publicFunctions li a:hover, #publicFunctions li .current{
	text-decoration: underline;
}
/************ special settings for grid layout ***************/






#swiffycontainer {
	width: 950px;
	height: 50px;
	position:absolute;
	top:560px;
	left:501px;
	margin-left:-505px;
}

#swiffycontainer_stills {
	width: 950px;
	height: 50px;
	position:absolute;
	top:-150px;
	left:50%;
	margin-left:-505px;
}



#slideshow{
	position:absolute;
	width:900px;
	height:543px;
	top:241px;
	left:316px;
	margin-left:-315px;
	margin-top:-240px;
	background-color:#fff;
}

#slideshow ul{
	height:510px;
	left:16px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:16px;
	width:865px;
}




#slideshow li{
	
	position:absolute;
	display:none;
	z-index:10;

	
}


#slideshow li:first-child{

	display:block;
	
	z-index:1000;
	


}

#slideshow .slideActive{
	z-index:1000;
	


}

#slideshow canvas{
	
	display:none;
	position:absolute;
	
	
	
}

#slideshow .arrow{
	height:86px;
	width:60px;
	position:absolute;
	background:url('../img/arrows.png') no-repeat;
	top:260px;
	margin-top:-43px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{
	background-position:left bottom;
	left:-15px;
}
#slideshow .previous:hover{ background-position:left top;}

#slideshow .next{
	background-position:right bottom;
	right:-14px;
}
#slideshow .next:hover{ background-position:right top;}