kaseta

In this example below you will see how to do a kaseta with some HTML / CSS and Javascript

bug// backup data

Thumbnail
This awesome code was written by skopp, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright skopp ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<html xmlns:fb="http://ogp.me/ns/fb#">
	<meta charset="utf-8">
	<title>Home - kaseta.co</title>
	<meta name="description" content="kaseta.co Home - kaseta.co: Create kasetes (cassettes) from your favorite YouTube videos. A new, old way, to playlist your videos!">

		<meta name="viewport" content="width=1024">
	
	<meta name="keywords" content="music,video,create kaseta,kaseta,kasseta,cassette,mixtape,youtube music,music video,cassetta,caseta,casseta,kasseta,music,youtube music,music video,free listening music,listen music online,video music,country music,house music,free music,video kaseta,video cassette,video music,online music playlist,online video playlist,playlist,music sharing,music publishing,best music,top music,music sharing,music technology,music school,music institute,academy of music" />
		
		<meta property="fb:app_id" content="107357382676262" />
	<meta property="og:title" content="Home - kaseta.co" />
	<meta property="og:description" content="Create kasetes (cassettes) from your favorite youtube videos. A new, old way, to playlist your videos!" /> 
	<meta property="og:image" content="http://kaseta.co/images/fb.png" />
	<meta property="og:url" content="http://kaseta.co" />

	<link rel="stylesheet" type="text/css" href="/cache/a23dbcfa18e31270103cc5fd1cf3e7d498032d9a.css?v=1350566564" media="all" />
<link rel="stylesheet" type="text/css" href="/cache/9c3b4f6751ef1616e3c9f8c4e924f2137ae685a3.css?v=1358786396" media="all" />

	<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/kasetaco/beejeneglcnjnccggaplaacafmfgapin">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<script type="text/javascript" src="/js/fancybox/jquery.fancybox.pack.js"></script>
	<script src="/js/storage/jquery.cookie.js"></script>
	<script src="/js/heartcode-canvasloader-min.js"></script>

	<script src="/js/tipsy/jquery.tipsy.js"></script>
	<script src="/js/lazy/jquery.lazyload.min.js" type="text/javascript"></script>
	
	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
	
	<style type="text/css">
		.user{

			background: url('https://graph.facebook.com/560641901/picture?type=large') no-repeat center center;
			width: 250px;
			height: 250px;
			background-repeat: no-repeat;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;


			margin: 97px 20px 0px 0px;

			-moz-box-shadow: 0px 1px 22px -1px #050505;
			-webkit-box-shadow: 0px 1px 22px -1px #050505;
			box-shadow: 0px 1px 22px -1px #050505;

			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://graph.facebook.com/560641901/picture?type=large', sizingMethod='scale'); 
			-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://graph.facebook.com/560641901/picture?type=large', sizingMethod='scale')"; 


		}

		.fancybox-title {
		    min-height: 30px;
		    color:#fff;
		}​

		.fbConnectWidgetTopmost{
			border: none !important;
		}


	</style>

		  <!--[if IE]>
	         <style type="text/css">
	             .fbtn,.ufbtn{
	                 border-radius:0px;
	             }
	         </style>
	     <![endif]-->

	  <script type="text/javascript">

	  var records=10;
	  function resizeScreen(){

	  	var screen_width = $(window).width();

		  		if((screen_width > 0)&&(screen_width < 950)){
		  			$("#page").css('width', 474);
		  		}else if((screen_width > 950)&&(screen_width < 1462)){
		  			$("#page").css('width',950);
		  		}else if((screen_width > 1462)&&(screen_width < 1885)){
		  			$("#page").css('width', 1423);
		  		}else{
		  			$("#page").css('width', 1910);
		  		}
	  }

	  $(window).resize(function () {
	  	resizeScreen();
	  });

	  $(document).ready(function() {
	  	resizeScreen();
	  });


	  </script>
	  
	  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33329623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>	  
	  <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
	  <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>

<header>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId: '107357382676262',
      channelUrl : '//kaseta.co/channel/channel.php', // Channel File
      status: true, // check login status
      cookie: true,
      xfbml: true,
      oauth: true
    });

 
  
  };


    (function() {
      var e = document.createElement('script'); e.async = true;
      e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
    }());


</script>		<div class="navigation">
		<div class="content_slider"></div>
		<ul class="menu lgray">
		<div id="canvasloader-container"></div>
		        <!-- This script creates a new CanvasLoader instance and places it in the wrapper div -->
		        <script type="text/javascript">
		        
		            var cl = new CanvasLoader('canvasloader-container');
		            cl.setColor('#FDFDFD'); // default is '#0099ff FDFDFD'
		            cl.setShape('oval'); // default is 'oval'
		            cl.setDiameter(19); // default is 40
		            cl.setDensity(40); // default is 40
		            cl.setRange(1.1); // default is 1.3
		            cl.setSpeed(3); // default is 2
		            cl.setFPS(24); // default is 24
		            cl.show(); // Hidden by default
		            
		            // This bit is only for positioning - not necessary
		            var loaderObj = document.getElementById("canvasLoader");
		            loaderObj.style.position = "absolute";
		            loaderObj.style["top"] = "12px";
		            loaderObj.style["left"] = "21px";

		            loaderObj.style["z-index"] = "538";

		            var is_in_page;
					
		        </script>
        		<li><i class="logo"></i></li>
		<!-- <i class="loader_bg"></i> -->
		<script type="text/javascript">
			$('.logo').click(function(){

				window.location = "/";

			});
		</script>

		<!-- home -->
				<li><a href="/"><i class="home_img_glow"></i></a></li>
		
				<li><a href="/create"><i class="create_img"></i>Create</a></li>
		
				<li><a class="notouch" href="/views"><i class="explore_img"></i>Explore</a>
		
		  	<!-- start level 2 -->
		  	<ul>

		  				  		<li><a href="/views"><i class="dot"></i>Most Viewed</a></li>
		  		
		  				  		<li><a href="/recommended"><i class="dot"></i>Recommended</a></li>
		  		
		  				  		<li><a href="/near"><i class="dot"></i>Near Me</a></li>
		  		
		  				  		<li><a href="/recent"><i class="dot"></i>Recent</a></li>
		  		
		  				  		<li><a href="/language"><i class="dot"></i>By Language</a></li>
		  		
		  				  		<li><a href="/design"><i class="dot"></i>Best Design</a></li>
		  		
		  				  		<li><a href="/top"><i class="dot"></i>Top Likes</a></li>
		  		
		  				  		<li><a href="/likeme/"><i class="dot"></i>Like Me</a></li>
		  		
		  		
		  				  		<!-- <li><a href="/users"><i class="users_img"></i>Users</a></li> -->
		  		
		  		
			  					  		<li><a href="/tags"><i class="tag_img"></i>Tags</a></li>
			  						
				
				
								  		<li><a href="https://apps.facebook.com/kaseta_app/?ref=invate_friends" target="_blank"><i class="users_img_2"></i>Invite Friends</a></li>

								  		
				<li><a href="/friends"><i class="users_img_3"></i>Find Your Friends</a></li>


						  		

		  	</ul>
		  	<!-- end level 2 -->

		  </li>

		  
		  

		  							<li class="floatr">
					
					<form class="apple" method="get" action="/search/" id="search">
					  <input name="q" type="text" size="40" placeholder="Search" x-webkit-speech/>
					</form>

									</li>
				  			
		

						<li  class="floatr"><a class="notouch" href="/mressop"><i class="user_img"></i>Rishie<span class="bubble">0</span></a>
			
			<!-- start level 2 -->


			<ul>

								<li><a href="/mressop"><i class="dot_user"></i><h1 class="logout_img"><img src="https://graph.facebook.com/560641901/picture?type=square" width="24" height="24" alt="" /></h1>Rishie Rish</a></li>
				
								<li><a href="/mressop"><i class="dot_user"></i>Kasetes<span class="bubble">0</span></a></li>
				
								<li><a href="/mressop/likes"><i class="dot_user"></i>Likes<span class="bubble">0</span></a></li>
				
								<li><a href="/mressop/liked"><i class="dot_user"></i>Liked<span class="bubble">0</span></a></li>
				
								<li><a href="/mressop/followers"><i class="dot_user"></i>Followers<span class="bubble">0</span></a></li>
				
								<li><a href="/mressop/following"><i class="dot_user"></i>Following<span class="bubble">0</span></a></li>
				
				
						  				<li><a id="notifi" href="#notifications"><i class="notifications"></i>Notifications<span class="bubble">0</span></a></li>
		  				<script type="text/javascript">

  $("#notifi").click(function() {
  cl.show();

          $('.content_slider').animate({height:"378px"}, 'slow');
          $('.navigation').css({'position' : 'relative'});
          $('.content_container').css({'margin-top' : '-113px'});

        if ($(".rls_up")){

          $('#optionsContainer_id').css({'margin-top' : '-174px'});
          //kasetaContainer_id
         $('#kasetaContainer_id').css({'position' : 'absolute'});
         $('#kasetaContainer_id').css({'margin-top' : '-154px'});
          $('.rls_up').css({'visibility' : 'hidden'});
          $('.rls_left').css({'visibility' : 'hidden'});
          //rls_up
        }

    $('.content_slider').load('/notifications/?num=0', function() {
      $('.navigation').css({'position' : 'relative'});
        $('.content_container').css({'margin-top' : '-113px'});
        $('html, body').animate({scrollTop:0}, 'slow');

        var doc_height=$('.notifContainer').height();
        $('.content_slider').animate({height:doc_height+"px"}, 'slow', function() {
                          // Animation complete.
                            
                          }); 

    cl.hide();
  });

  });
</script>		  				
		  				<li><a href="/friends"><i class="users_img_3"></i>Find Your Friends</a></li>


		  				

		  			
					  		<li><a href="https://apps.facebook.com/kaseta_app/?ref=invate_friends" target="_blank"><i class="users_img_2"></i>Invite Friends</a></li>

					  						<li><a href="/help/"><i class="help"></i>Help</a></li>
				
												<li><a id="sett" href="#settings"><i class="settings"></i>Settings</a></li>
				<script type="text/javascript">

  $("#sett").click(function() {
  cl.show();



          $('.content_slider').animate({height:"1200px"}, 'slow');
          $('.navigation').css({'position' : 'relative'});
          $('.content_container').css({'margin-top' : '-113px'});

         if ($(".rls_up")){

           $('#optionsContainer_id').css({'margin-top' : '-174px'});
           //kasetaContainer_id
          $('#kasetaContainer_id').css({'position' : 'absolute'});
          $('#kasetaContainer_id').css({'margin-top' : '-154px'});
           $('.rls_up').css({'visibility' : 'hidden'});
           $('.rls_left').css({'visibility' : 'hidden'});
           //rls_up
         }

    $('.content_slider').load('/4841/account', function() {
      $('.navigation').css({'position' : 'relative'});
        $('.content_container').css({'margin-top' : '-113px'});
        $('html, body').animate({scrollTop:0}, 'slow', function() {
                          // Animation complete.
                            
                          }); 

    cl.hide();
  });

  });
</script>
				<li><a href="/login/logout.php?path=http%3A%2F%2Fkaseta.co%2F" onclick="FB.logout();"><i class="logout"></i>Logout</a></li>
								

			</ul>
						<!-- end level 2 -->
		</li>
				
		</ul>

		<script type="text/javascript">

			

			$.findPosition = function(element){

			var elem = $(element);
			var position = elem.position();
			var new_position = (position.top-$(element).innerHeight())-(84);

			$('html, body').animate({scrollTop:new_position}, 'slow', function() {
			                  // Animation complete.

			              });
			}

			$.goPosition = function(element){


			var elem = $(element);
			var position = elem.position();
			var new_position = (position.top-$(element).innerHeight())-(84);

			$('html, body').scrollTop(new_position);


			}

		</script>

		
		
		<div class="header_shadow"></div>

	</div></header>

<div class="content_container">

		<div class="bg_image_container">
		<div class="self_container">

<div class="inside_content" id="page">
	<script type="text/javascript">

		resizeScreen();
		
	</script>
<ul class="listkasetes">

	<!-- soundcloud kaseta -->

			<!-- soundcloud kaseta end -->

	
					<script type="text/javascript">

						//$.pageslide({ direction: 'left', href: 'http://kaseta.co/friends/friends.php' })

						$(document).ready(function() {

							function callFriends(){

									$.fancybox({
										           type        : 'iframe',
										           href : '/friends/friends.php',
										           fitToView : false,
										           width   : 250,
										           height    : '90%',
										           autoSize	: false,
										           closeClick	: false,
										           openEffect  : 'none',
										           closeEffect : 'none',
										           padding     : '0',
										         
								
										});
						
									
							}

							$.fancybox({
								           type        : 'iframe',
								           href : '/welcome/welcome.php',
								           fitToView : true,
								           width   : 680,
								           height    : 700,
								           autoSize  : true,
								           closeClick  : false,
								           openEffect  : 'none',
								           closeEffect : 'none',
								           padding     : '0',
								         
							                  helpers : {
							                      title : {
							                          type: 'outside'
							                      },
							                      media : {}
							                      ,
							                      overlay : {
							                                  opacity: 0.7,
							                                  css : {
							                                      'background-color' : '#000'
							                                  }
							                              }
							                  },
							             afterClose : function() {
							                     callFriends();
							                     return;
							                 }

								});
						});

					</script>

					<script src="/js/imgloop/infinite-rotator.js"></script><li class="user_photo_img"><div class="item">
	<div class="details">
		<div class="welcome">
		<i class="kaseta_length_img"><div class="title_txt">W90</div></i>
		<div class="details_container">
						<div class="detail_by_user"><a href="/">Rishie Rish</a></div>
						<div class="detail_title">To view kasetes (cassettes) at your home page<br> you must create one or follow a friend.</div>
		</div>
		</div>
	</div>

	<div class="kaseta">
		<div class="ks_shadow"></div>

			<div class="fl">
			  <div class="fb-photo" id="fb_photo_id">   
				</div>
				<div id="kasetas_design"><a href="/create/">

					<div id="rotating-item-wrapper">
						<img src="/images/lebel/ks00.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks050.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks039.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks036.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks042.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks019.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks017.jpg" class="rotating-item" width="394" height="250" border="0"/>
						<img src="/images/shells/ks032.jpg" class="rotating-item" width="394" height="250" border="0"/>
					</div>

				</a></div>
			</div>
			<div class="ks_down"></div>

	</div>
	
		
	</div></li><li>
<div class="add_banner">
		<div class="other_container" id="other_container">
			<div class="banner_shadow">
				<div class="ks_down_banner"><img src="/images/ks_s_down.png" width="306" height="6"></div>
			</div>
			<div class="banner">
				<div class="bgBanner"></div>
			</div>

		</div>

</div>
</li>

		 			</li>
		</ul>
	</div>

</div>
</div>

<script type="text/javascript">

	resizeScreen();
	
	//$(".bg_image_container").css("background", "#444444 url('/images/patterns/"+bgs[Math.floor((Math.random()*15))]+"')");
</script>
<div class="colroWraper">
	<div class="footer_shadow1st"></div>
	
<div class="pagination_in">


</div>
	<div class="black_line_container">
	     <div class="black_line"></div>
	 </div>
			 
	<div class="footerIndex">

			<div class="footer_links">
	<div class="footer_links_container">
		<div class="footer_link"><a href="https://www.youtube.com" target="_blank" id="ytLogo_hover">powered by <img class="youtubeBlackLogo" src="/images/icons/fake_.png" width="44" height="18" border="0"/> api </a><a href="https://developers.soundcloud.com/" target="_blank" id="ytLogo_hover">&amp; <span style="position:relative; margin:5px 5px 5px 1px; top:7px"><img class="scBlackLogo" src="/images/sc_face.png" width="39" height="23" border="0" id="scLogo_hover"/></span>api</a></div>
		<div class="footer_link"><a href="https://www.facebook.com/pages/kasetaco-community-cassette-tapes/444395208925877" target="_blank">facebook page</a></div>
		<div class="footer_link"><a href="https://www.facebook.com/appcenter/kaseta_app" target="_blank">facebook app center page</a></div>
		<div class="footer_link"><a href="https://twitter.com/kaseta_co" target="_blank">twitter page</a></div>
		<div class="footer_link"><a href="http://nocmyk.com/" target="_blank">design / dev / <span class="nocmyk">nocmyk.com</span></a></div>
		<div class="footer_link"><a href="http://sixty8.co/" target="_blank">idea / <span class="sixty8">sixty8.co</span></a></div>
		<div class="footer_link"><a href="/terms/">terms &#38; privacy</a></div>
		<div class="footer_link"><a href="https://www.facebook.com/pages/kasetaco-community-cassette-tapes/444395208925877" target="_top">contact</a></div>
		<div class="footer_link"><a id="report" href="#report">report</a></div>
		<div class="footer_link"><a href="/press/">press material</a></div>
		<i class="black_dot"></i><div class="footer_link" id="top">top</div> 
		<div style="visibility:hidden"><img class="youtubeBlackLogo" src="/images/icons/yt_hover.png" width="44" height="18" border="0"/></div>
		<div class="footer_link"><a href="/">© 2013 kaseta.co</a></div>
		<a href="/"><div class="logo_blc"></div></a>
	</div>
</div>


<script type="text/javascript">

	 $("#report").click(function() {
	   		var f = confirm("report this page?");
			if (f) {
			
			              $.post("/report/report.php", { page: "http%3A%2F%2Fkaseta.co%2F",from: "4841" },
      	      function(data) {
      	      	alert("Page reported. Thank you.")
      	      });
      	    
			} else {}
		}
	);

  $("#top").click(function() {
 		
        $('html, body').animate({scrollTop:0}, 'fast');

  });

  $("#ytLogo_hover").mouseover(function() {
      $(".youtubeBlackLogo").css('background-image', 'url(/images/icons/yt_hover.png)');
  });

   $("#ytLogo_hover").mouseout(function() {
      $(".youtubeBlackLogo").css('background-image', 'url(/images/icons/yt.png)');
  });

   $("#scLogo_hover").mouseover(function() {
       $(".scBlackLogo").css('background-image', 'url(/images/soundcloud_small_over.png)');
   });

    $("#scLogo_hover").mouseout(function() {
       $(".scBlackLogo").css('background-image', 'url(/images/soundcloud_small.png)');
   });

    $(".scBlackLogo").css('background-image', 'url(/images/soundcloud_small.png)');

</script>		
	</div>

		<script>


		$('.liked_icon').tipsy({fallback: "kaseta.co",gravity: 'w',opacity: 0.7,offset: 4});
		$('.private_icon').tipsy({fallback: "kaseta.co",gravity: 'w',opacity: 0.7});
		$('.edit_icon').tipsy({fallback: "kaseta.co",gravity: 'e',opacity: 0.7,offset: 4});
		$('.user_img_tt').tipsy({fallback: "no image" ,gravity: 's',opacity: 1.0,offset: 4, html:true });
		$('.tags_kaseta_icon').tipsy({fallback: "no image" ,gravity: 'sw',opacity: 1.0,offset: 8, html:true });
		$('.titles_kaseta_icon').tipsy({fallback: "no image" ,gravity: 'sw',opacity: 1.0,offset: 8, html:true });
		$('.privete_link_icon').tipsy({fallback: "no image" ,gravity: 'sw',opacity: 1.0,offset: 8, html:true });

		
		records=0;
		resizeScreen();

							$('.ks_flash').click(function(){

					var link = $(this).attr("ref");
					window.location = "/play/"+link+"";

				});
									

		$(window).load(function() {

			
		});

		</script>

		<script type="text/javascript">

	$(window).load(function() {

		$("body").css("background", "#444444 url('/images/drawer-pattern.png')");
		cl.hide();

	});

</script>
	</div>
</div>
</body>
</html>


/*Downloaded from https://www.codeseek.co/skopp/kaseta-znJei */
    @font-face {
	font-family: "SuperstudioBold";
	src: url("assets/superstudio.eot");
	src: url("assets/superstudio.eot?#iefix") format("embedded-opentype"),
		url("assets/superstudio.woff") format("woff"),
		url("assets/superstudio.ttf") format("truetype"),
		url("assets/superstudio.svg#SuperstudioBold") format("svg");
	font-weight: normal;
	font-style: normal;
}

body {
	background: #fff;
	margin: 0;
	font-size: 13px;
	min-width: 964px;
}

select, input, textarea {
	font-size: 11px;
	margin: 0;
	color: #000;
}

a {
	text-decoration: none;
}

a:focus {
	outline: none
}

form {
	margin: 0;
}

img {
	border: 0;
}

div {
	line-height: 20px;
}

p {
	margin: 0 0 20px 0;
}

ol {
	padding: 0;
	margin: 0 0 20px 0;
}

/* Fonts */

h1, h2 {
	font-family: "SuperstudioBold";
	font-weight: normal;
	font-size: 27px;
	line-height: 32px;
	padding-top: 32px; /* Padding instead of margin, so anchor trick works here too */
	padding-bottom: 8px;
	border-bottom: 1px solid;
	margin: 0 0 20px 0;
}

body, select, input, textarea,
.tutorial h2,
.reference h2 {
	font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
}

.tutorial h2,
.reference h2 {
	font-size: 13px;
	line-height: 20px;
	padding: 0;
}

.tutorial h2 {
	font-weight: bold;
	border: 0;
	margin-top: 0;
	margin-bottom: 10px;
}

tt, pre {
	font-family: Menlo, Consolas, "Vera Mono", monospace;
	font-size: 12px;
}

/* Lists */

ul.list {
	padding: 0;
	list-style: none;
	margin: 0 0 20px 0;
}

ul.list li {
	background: url(assets/bullet.gif) no-repeat 0 10px;
	padding: 0 0 0 13px;
	margin: 0 0 10px 0;
}

/* Tables */

table {
	border-spacing: 0;
	margin: 0;
	border: 0;
}

td {
	padding: 0;
	vertical-align: top;
}

/* Checkboxes */

label {
	display: block;
	float: left;
	white-space: nowrap;
}

input[type=checkbox] {
	vertical-align: middle;
}

label span {
	padding-left: 4px;
	vertical-align: middle;
}

/* Column Layout */

#menu {
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	top: 0;
	left: 0;
	bottom: 0;
	width: 160px;
	/* 16px = room for scrollbar */
	padding: 0  16px 0 32px;
	background: #fff;
	z-index: 1;
}

#menu h1 {
	/* Required as we give space to scrollbar */
	width: 160px;
}

#main {
	/* We need relative position so scrollbars on document work */
	position: relative;
	float: left;
	overflow: hidden;
	padding-left: 224px; /* 160 + 2 * 32 */
}

#main,
#main h1, #content {
	width: 540px;
}

#content {
	padding: 0 0 32px 0;
}

.simple-content {
	padding-top: 92px;
}

#right,
#right .right,
#right .fixed {
	float: left;
	width: 200px;
}

#right .right {
	float: left;
	padding: 0 0 0 32px;
}

#right .fixed {
	top: 0;
	position: fixed;
	overflow: hidden;
}

/* Fullscreen */

body.fullscreen {
	overflow: hidden;
}

body.fullscreen #main {
	/* Clear relative position for fullscreen examples */
	position: absolute;
	width: auto;
	overflow: hidden;
}

body.fullscreen #main #content {
	width: auto;
	padding: 0;
}

/* Menu */

ul.menu {
	padding: 0;
	list-style: none;
	margin: 0 0 0 0;
}

ul.menu li.entry {
	padding: 0 0 0 0; /* 2 * 13px */
	margin: 0 0 0 13px;
	text-indent: -13px;
}

ul.menu li.entry.spacer {
	margin-bottom: 10px;
}

#menu > ul.menu > li.entry {
	/* Don't indent the first level of entries */
	padding: 0;
}

/* Colours and Links */

#menu, #menu a {
	color: #009dec;
	border-bottom-color: #009dec;
}

#menu ul.menu a:hover,
#menu ul.menu .active > a {
	background: #e3f4fc;
}

#main, .content a {
	color: #333;
	border-bottom-color: #000;
}

.content a:hover {
	background: #e5e5e5;
}

.right, .right a, .error {
	color: #e4141b;
	border-bottom-color: #e4141b;
}

.right a:hover,
.right li.entry.active > a,
.right .tutorial-index .active {
	background: #fce6e6;
}

/* Content Styles */

.content a {
	border-bottom: 1px solid;
}

.content .section {
	clear: both;
	margin-bottom: 20px;
}

/* Fix IE8 issue with empty named anchors having a huteight of 15px instead of 0 */
.content a.anchor {
	display: block;
	height: 0;
	padding: 0;
	border: 0;
}

/* Helpers */

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.hidden {
	display: none !important;
}

.popup-body {
	margin: 0px;
	/* Remove scrollbars on chrome */
	overflow: hidden;
}

.small-inline {
	font-size: 11px;
}

.small {
	font-size: 11px;
	line-height: 16px;
}

.line {
	height: 10px;
	background: url(assets/dotted.gif) repeat bottom;
	margin-bottom: 20px;
}

.donation {
	padding-bottom: 20px;
}

/* Text Content */

.text em {
	font-style: normal;
	padding: 0 1px 0 3px;
	background: #ebebeb;
}

.text .note {
	padding: 8px;
	margin: 0 40px 20px 10px;
	background: #f4f4f4;
	clear: both;
}

.text .note .resource {
	margin: 0;
}

.text p, .text ul, .text .resource-block p {
	margin-right: 30px;
	clear: both;
}

.block .text .resource-block {
	/* Compensate -10px for ligher scripts, -1px for dotted line */
	margin-right: 11px;
}

.text ol {
	/* Compensate -10px for ligher scripts */
	margin: 0 10px 20px 0;
	clear: both;
}

.text .column {
	width: 50%;
	float: left;
}

/* Blocks */

.block-interact {
	margin-bottom: 16px;
	border: 1px solid #999;
	border-left: 0;
	border-right: 0;
	background-image: url(assets/pattern.gif);
}

.block-padded {
	padding: 10px;
	vertical-align: top;
}

.block-white {
	border: 1px solid #999;
	background: #fff;
	margin-top: 0;
	margin-bottom: 16px;
}

.block-gray {
	border: 1px solid #999;
	border-left-width: 0;
	border-right-width: 0;
	background: #f4f4f4;
	margin-bottom: 16px;
	padding-left: 1px;
	padding-right: 1px;
}

.block .header {
	padding: 10px;
}

.block .title {
	float: left;
}

.block .content {
	clear: left;
	border-top: 1px dashed #999;
	padding: 10px;
	overflow: auto;
	max-height: 2000px;
}

.block .text {
	/* Compensate <p> margin and resource (right) */
	margin: 0 -10px 0 0;
}

.block .text .line,
.block .text .paperscript,
.block .text .CodeMirror {
	clear: left;
	/* Compensate line margin for -10px above */
	margin-right: 10px;
	margin-bottom: 20px;
	/* margin-top: -10px; /* Move half way up close to previous paragraph */
}

.block .text-end {
	/* In case the text does not end with a 20px margin objet, this will
	compensate the -20px */
	margin: -20px 0 20px 0;
	/* Clear in case there are resources */
	clear: left;
}

.block-white .content,
.block-none .content {
	overflow: inherit;
	max-height: none;
}

.block .post-count {
	font-size: 11px;
	border-top: 1px dashed #999;
	background-image: url(assets/pattern.gif);
	padding: 3px 10px 4px 10px;
}

.block .post-count a {
	padding-bottom: 0;
}

.block .resources {
	border-top: 1px dashed #999;
	padding: 10px 10px 0 10px;
}

.block .header,
.block .content,
.block .post-count,
.block .resources {
	width: 518px;
}

.block-none .content,
.block-none .header {
	padding: 0;
	border-top: none;
	width: 540px;
}

.block-none .text {
	margin-bottom: 0px;
}

.block-none .text .column {
	/* (540 - 10px distnace) / 2 = 265 */
	width: 265px;
	margin-right: 10px;
}

.block .end {
	height: 240px;
}

.block-edit {
	padding: 10px;
	display: none;
}

.block-gray a:hover,
.blocks-row-gray a:hover,
.block-interact a:hover,
.block .post-count a:hover,
.note a:hover {
	background: #fff;
}

/* Pagination */

.pagination {
	font-size: 11px;
	line-height: 15px;
	margin-top: -7px;
	padding: 0 10px 10px 10px;
}

.pagination-clear {
	clear: both;
	display: block;
}

* html .pagination-clear { /* PC IE fix, jumping :hover... */
	display: inline;
}

.pagination a {
	padding-bottom: 0;
}

/* Blocks Lists */

.blocks {
	width: 540px;
	border: 1px solid #999;
	empty-cells: show;
}

.blocks-row-white td,
.blocks-row-gray td {
	padding: 8px 10px 10px 10px;
	vertical-align: top;
}

td.blocks-seperator-white,
td.blocks-seperator-gray {
	border-top: 1px dashed #999;
}

.blocks-row-white td,
.blocks-seperator-white {
	background: #fff;
}

.blocks-row-gray td,
.blocks-seperator-gray {
	background: #f4f4f4;
}

.blocks-end {
	height: 16px;
}

.no-border {
	margin-top: -6px;
	border: 0;
}

.no-border .blocks-row-white td,
.no-border .blocks-row-gray td {
	padding: 8px 0 10px 0;
}

/* Edit Fields */

.edit-login td {
	padding: 0 6px 3px 0;
}

.edit-elements {
	float: right;
	text-align: right;
}

#menu > .edit-elements,
#content > .edit-elements,
body.fullscreen #main .edit-elements {
	position: relative;
	top: 32px;
	margin-bottom: -20px;
}

body.fullscreen #main .edit-elements {
	float: left;
	left: 24px;
	z-index: 1;
}

.edit-editor {
	border: 1px solid #999;
	width: 538px; /* Remove 1px border */
	margin-top: 32px;
}

/* Edit Forms */

#main #edit td,
#main #edit input,
#main #edit select,
#main #edit textarea,
#main #edit a.edit-button,
#main #edit .tab-pane .edit-title {
	font-size: 12px;
}

#main #edit td,
#main #edit .tab-pane .edit-title {
	font-size: 12px;
	line-height: 20px;
}

#main #edit .tab-pane .edit-content {
	margin: 6px 10px 6px 10px; /* 10px - 4px (.edit-label & .edit-item) = 6px */
}

#main #edit .edit-label,
#main #edit .edit-item {
	padding-top: 4px;
}

#main #edit .edit-help div {
	padding: 5px;
}

#main #edit .edit-help div,
#main #edit .edit-help td {
	font-size: 11px;
	line-height: 16px;
	white-space: normal;
}

#main #edit .edit-list-separator {
	height: 4px;
}

#main #edit .edit-list-header {
	/* Undo the 4px separator */
	margin-bottom: -4px;
}

#main #edit .edit-list-entry .edit-list-buttons {
	margin: 4px 0 -20px 0;
}

#main .edit-buttons-left .edit-button {
	margin-right: 4px;
}

#main .edit-buttons-right .edit-button,
.edit-button {
	margin-left: 4px;
}

/* Attachments */

.resource {
	float: left;
	margin-right: 20px;
}

.media {
	margin-right: -20px;
}

.text .resource {
	/* To space horizontaly and work against bottom <p> margin compensation */
	margin: 0 10px 20px 0;
}

.resource .caption {
	text-align: center;
}

/* Resource Blocks (Image / Text Columns) */

.resource-block {
	display: table;
	*display: block; /* <= ie7 */
	margin-bottom: 20px;
}

.resource-block + .resource-block {
	border-top: 1px dotted #000;
	padding-top: 20px;
}

.resource-text,
.text .resource-block .resource {
	float: none;
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	/* <= ie7 */
	*float: left;
	*display: block;
	*width: 50%;
}

.resource-text {
	vertical-align: top;
}

.resource-text p {
	margin-right: 0;
}

.text .resource-block .resource img {
	margin-right: 20px;
}

.text .resource-text .note {
	margin: 0 10px 0 0;
}

.text .resource-text .CodeMirror {
	/* Having height at 100% in resource-blocks breaks table layout */
	height: auto;
	margin-bottom: 20px;
}

.thumbnails {
	margin-right: -24px;
}

.thumbnail {
	float: left;
	width: 258px;
	margin: 0 24px 24px 0;
}

.thumbnail .resource {
	margin: 0;
}

.download {
	margin-bottom: 20px;
}

.download .image {
	float: left;
	margin-right: 8px;
}

.thumbnail .resource a,
.download .image a {
	border: 0 !important;
	background: none !important;
}

/* Documentation */

li.expandable-list ul {
	display: none;
}

li.expandable-list.expanded ul {
	display: block;
}

li.expandable-list a.arrow {
	width: 8px;
	height: 8px;
	display: inline-block;
	background: url(assets/arrow-close.gif) no-repeat;
	border-bottom: 0;
	padding-right: 4px;
}

li.expandable-list.expanded a.arrow {
	background: url(assets/arrow-open.gif) no-repeat;
}

/* Tutorials */

.tutorial-overview {
	margin: 10px 25px 10px 0;
}

ul.tutorial-index {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

ul.tutorial-index ul {
	padding-left: 13px;
}

#main ul.tutorial-index {
	margin-bottom: 29px;
}



/*Downloaded from https://www.codeseek.co/skopp/kaseta-znJei */
    var width, height, center;
var points = 10;
var smooth = true;
var path = new Path();
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
path.fillColor = 'black';
initializePath();

function initializePath() {
    center = view.center;
    width = view.size.width;
    height = view.size.height / 2;
    path.segments = [];
    path.add(view.bounds.bottomLeft);
    for (var i = 1; i < points; i++) {
        var point = new Point(width / points * i, center.y);
        path.add(point);
    }
    path.add(view.bounds.bottomRight);
    path.fullySelected = true;
}

function onFrame(event) {
    pathHeight += (center.y - mousePos.y - pathHeight) / 10;
    for (var i = 1; i < points; i++) {
        var sinSeed = event.count + (i + i % 10) * 100;
        var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
        var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
        path.segments[i].point.y = yPos;
    }
    if (smooth)
        path.smooth();
}

function onMouseMove(event) {
    mousePos = event.point;
}

function onMouseDown(event) {
    smooth = !smooth;
    if (!smooth) {
        // If smooth has been turned off, we need to reset
        // the handles of the path:
        for (var i = 0, l = path.segments.length; i < l; i++) {
            var segment = path.segments[i];
            segment.handleIn = segment.handleOut = null;
        }
    }
}

// Reposition the path whenever the window is resized:
function onResize(event) {
    initializePath();
}

Comments