An Anonymous Pen on CodePen

HTML

            
              <!DOCTYPE html>
<html lang="pl-PL">
<html>

		</div>
	<head>
<script src="jawa.js"></script>;
	<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<title>Poradnia psychiczna</title>
		<div id="header">
		</div>

	</head>
	<body id="glowka" class="tlo"><div id="tlo">
<div id="caly">
<div class="left">
<div id="acdnmenu">
<ul>
	<li>Strona Glówna
	<ul>
		<li>Psychoterapia
		<ul>
			<li><a href="?0">Komu Pomagamy?</a></li>
			<li><a href="accordion-menu">Jak pracujemy?</a></li>
			<li><a href="?1">Konsultacja i sesja psychoterapi</a></li>
            <li><a href="?1">Grupa Terapeutyczna</a></li>
            <li><a href="?1">Regulamin</a></li>
            <li><a href="?1">Cennik</a></li>
		</ul>
		</li>
		
	</ul>
	</li>
	<li>Zespól Orodka
	<ul style="background: transparent url('2.jpg') no-repeat 160px bottom;">
		<li><a href="?3">dr Monika Nosowskat</a></li>
        <li><a href="?3">mgr Adam Solek</a></li>
        <li><a href="?3">mgr Monika Semczuk-Solek</a></li>
        <li><a href="?3">mgr Janusz Moczydlowski</a></li>
        <li><a href="?3">mgr Joanna Dutkowska</a></li>
        <li><a href="?3">mgr Tomasz Kloc</a></a></li>
		<ul>
			<li><a href="?4">How-To Resources</a></li>
			<li><a href="?5">Product Support</a></li>
		</ul>
		</li>
		<li><a href="?6">Opening Time</a></li>
	</ul>
	</li>
	<li id="li3">Technical Solutions
	<ul>
		<li><a href="?b">Javascript Code</a></li>
		<li><a href="?c">CSS Code</a></li>
		<li><img alt="" src="3.jpg" style="width: 190px; height: 84px;" /></li>
	</ul>
	</li>
</ul>
</div>
</div>

<div class="right">
  <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
		<div class="slide">
			<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>
</div>

<div id="footer">
<form name="a">
<p align="center"><input name="b" type="text" /></p>
</form>
<script type="text/javascript">// <![CDATA[
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				if(godz < 10)
				{
				godz = "0" + godz
				}
				if(min < 10)
				{
				min = "0" + min
				}
				if(sek < 10)
				{
				sek = "0" + sek
				}
				
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
			}
				
				
				
// ]]></script></div>
</div>
</div>
</body>
</html>

CSS

            
              .tlo{
background-image:url("http://strony-www-za-darmo.pl/swzd/uploads/images/abstrakcyjnla.jpg");
background-repeat:repeat;
}
#glowka{
padding-left:0px;
padding-right:0px;
min-width:1000px;
}
.tlo{
background-image:url("drzewo.jpeg");
background-repeat:repeat;
}
#glowka{
padding-left:0px;
padding-right:0px;
min-width:1000px;
}

#caly{
padding-left:200px;
padding-right:200px;
}

div {
	border-radius: 2px;
}

#header {
	z-index: 1;
	position: center;
	width: 90%;
	
	height: 200px;
	background-image:url("http://www.hotelbonifacio.pl/sites/default/files/imagecache/slideshow_img/tlo_drzewa_1920x550.jpg");
	background-position:center;
	background-repeat:no-repeat;
	width:90%;
	margin-bottom: 20px;
	margin-top: 50px;

}


.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 20%;
	height: 100%;
	background-color/transparent;
	margin-bottom: 20px;
  margin-left:-1%;
	
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 78%;
	height:100%;
	min-height: 450px;
	background-color/transparent;
	margin-bottom: 10px;
    margin-left:-2%;
}

#footer {
	position: relative;
	height: 50px;
	width: 1440!important;
	background-image: url("http://klikaj.wen.ru/tlo3.jpg");
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	<form name="a">
			<input type="text" name="b"/>
			</form>
		<script>
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
				}
				</script> >
}

#footer p {
	position: relative;
}

/* ##### Top level items #####*/
#acdnmenu 
{
    /* Note about height: 
    Set "height:auto;" if flexible height is required. 
    A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
    height: 300px;
    width: 100%; /*or pixel value*/
    font-size:0;
}


#acdnmenu ul.top
{
	padding-left:0;
    border:1px solid #0B4E78;
    background:none;
  background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
#acdnmenu div.heading, #acdnmenu a.link
{
    padding:8px; padding-left:32px;
    text-align:left;
    font:normal 12px Verdana;
    color:#BBB; 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) left top;
    text-decoration:none;
    outline:none; 
}
#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link
{
    color:#DDD;
    font-weight:normal;
    text-decoration:none;   
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover
{
    color:#FFF;
    text-decoration:underline;   
  
  
}

/* arrow image for the top headings */
#acdnmenu div.arrowImage {
    width:12px;
    height:12px;
    top:9px;
    right:6px; left:auto; /*Setting "left:8px;right:auto;" will position the arrow image to the left*/
    background-image:url(arrows.gif);
    background-position:0 0;
  
}

#acdnmenu div.current div.arrowImage {
    background-position:0 -12px;
  
}

#acdnmenu li.separator
{
    border-top:1px solid black;
    border-bottom:1px solid #0B4E78; 
  
  
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub
{
	padding-left:14px; /*This determines the hierarchical offset*/ 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% -30px;/**/
}
#acdnmenu ul.sub ul.sub
{
    background:none; 
  
  
}

#acdnmenu ul.sub div.heading
{
    text-align:left;
    font:normal 12px Arial;
    padding:5px; padding-left:20px;
    color:#BBB;
    background:none; 
}
#acdnmenu ul.sub div.heading a
{
    color:#BBB;
  
}

#acdnmenu ul.sub div.current
{
    color:#DDD;
    background:none; 
}

#acdnmenu ul.sub a.link
{
    font:normal 11px Arial;
    color:#BBB;
    padding:5px; padding-left:20px;
    text-decoration:none;
    background:none; 
}

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current
{
    color:#FFF;
    text-decoration:underline;
    background:none; 
}


#acdnmenu ul.sub div.arrowImage {
    width:12px;
    height:12px;
    top:6px;
    left:4px;
    background-image:url(arrows.gif);
    background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
    background-position:0 -36px;
  
}



/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,  #acdnmenu ul
{
    display:block;
    font-size:0px;
    line-height:0px;
  
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} 
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul
{
	position:relative;/*!*/
	overflow:hidden;
	padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
	position:relative;
    cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}
 

                                  /*slajder*/
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: -1%;
    height: 420px;
    display: block;;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 100px;
    height: 107%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}



#caly{
padding-left:200px;
padding-right:200px;
}

div {
	border-radius: 2px;
}

#header {
	z-index: 1;
	position: center;
	width: 100%;
	
	height: 1%;
	background-image:url("http://strony-www-za-darmo.pl/swzd/uploads/images/abstrakcyjne-tla.jpg");
	background-position:center;
	background-repeat:no-repeat;
	width:90%;
	margin-bottom: 20px;
	margin-top:

}


.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 20%;
	height: 100%;
	background-color/transparent;
	margin-bottom: 20px;
  margin-left:-1%;
	
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 78%;
	height:100%;
	min-height: 450px;
	background-color/transparent;
	margin-bottom: 10px;
    margin-left:-2%;
}

#footer {
	position: relative;
	height: 50px;
	width: 1440!important;
	background-image: url("http://klikaj.wen.ru/tlo3.jpg");
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	<form name="a">
			<input type="text" name="b"/>
			</form>
		<script>
			function zegar()
			{
				czas = new Date ();
				
				godz = czas.getHours();
				min = czas.getMinutes();
				sek = czas.getSeconds();
				
				document.a.b.value= godz + " : " + min + " : " + sek;
				setTimeout("zegar()", 900);
				}
				</script> >
}

#footer p {
	position: relative;
}

/* ##### Top level items #####*/
#acdnmenu 
{
    /* Note about height: 
    Set "height:auto;" if flexible height is required. 
    A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */
    height: 300px;
    width: 100%; /*or pixel value*/
    font-size:0;
}


#acdnmenu ul.top
{
	padding-left:0;
    border:1px solid #0B4E78;
    background:none;
  background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
#acdnmenu div.heading, #acdnmenu a.link
{
    padding:8px; padding-left:32px;
    text-align:left;
    font:normal 12px Verdana;
    color:#BBB; 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) left top;
    text-decoration:none;
    outline:none; 
}
#acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link
{
    color:#DDD;
    font-weight:normal;
    text-decoration:none;   
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% top;
}
/*Top level link without children*/
#acdnmenu a.current, #acdnmenu a.current:hover
{
    color:#FFF;
    text-decoration:underline;   
  
  
}

/* arrow image for the top headings */
#acdnmenu div.arrowImage {
    width:12px;
    height:12px;
    top:9px;
    right:6px; left:auto; /*Setting "left:8px;right:auto;" will position the arrow image to the left*/
    background-image:url(arrows.gif);
    background-position:0 0;
  
}

#acdnmenu div.current div.arrowImage {
    background-position:0 -12px;
  
}

#acdnmenu li.separator
{
    border-top:1px solid black;
    border-bottom:1px solid #0B4E78; 
  
  
}


/* ##### Sub level items #####*/
#acdnmenu ul.sub
{
	padding-left:14px; /*This determines the hierarchical offset*/ 
    background:#47A url(http://www.menucool.com/vertical/acdn/skins/image1/bg.jpg) 20% -30px;/**/
}
#acdnmenu ul.sub ul.sub
{
    background:none; 
  
  
}

#acdnmenu ul.sub div.heading
{
    text-align:left;
    font:normal 12px Arial;
    padding:5px; padding-left:20px;
    color:#BBB;
    background:none; 
}
#acdnmenu ul.sub div.heading a
{
    color:#BBB;
  
}

#acdnmenu ul.sub div.current
{
    color:#DDD;
    background:none; 
}

#acdnmenu ul.sub a.link
{
    font:normal 11px Arial;
    color:#BBB;
    padding:5px; padding-left:20px;
    text-decoration:none;
    background:none; 
}

#acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current
{
    color:#FFF;
    text-decoration:underline;
    background:none; 
}


#acdnmenu ul.sub div.arrowImage {
    width:12px;
    height:12px;
    top:6px;
    left:4px;
    background-image:url(arrows.gif);
    background-position:0 -24px;
}
#acdnmenu ul.sub div.current div.arrowImage {
    background-position:0 -36px;
  
}



/* ##### Followings usually don't need modification ###### */
/*Hack the font-size:0 bug for IE6 */
#acdnmenu,  #acdnmenu ul
{
    display:block;
    font-size:0px;
    line-height:0px;
  
}
#acdnmenu li {font-size:12px; line-height:16px;}
#acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} 
#acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;}
#acdnmenu li {*float:left;*width:100%;}

#acdnmenu ul
{
	position:relative;/*!*/
	overflow:hidden;
	padding:0;margin:0;list-style-type: none;padding-left:10px;
}
#acdnmenu>ul{visibility: hidden;}
#acdnmenu li {padding:0;margin:0;}

#acdnmenu div.heading, #acdnmenu div.current
{
	position:relative;
    cursor: pointer;
}
#acdnmenu div.arrowImage {position:absolute; overflow:hidden;}
 

                                  /*slajder*/
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("https://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: -1%;
    height: 420px;
    display: block;;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 100px;
    height: 107%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}

JS

            
              var amenuOptions =
{
    menuId: "acdnmenu",
    linkIdToMenuHtml: null,
    expand: "single",
    license: "2a8e9"
};

var amenu = new McAcdnMenu(amenuOptions);

/* Accordion Menu v2013.3.18. Copyright www.menucool.com */
function McAcdnMenu(s){var k=function(a,b){return a.getElementsByTagName(b)},h="className",N=0,v="firstChild",j=function(b,c){var a=c==0?b.nextSibling:b[v];while(a&&a.nodeType!=1)a=a.nextSibling;return a},a="length",u="attachEvent",y="addEventListener",n=function(e){var b=e.childNodes,d=[];if(b)for(var c=0,f=b[a];c<f;c++)b[c].nodeType==1&&d.push(b[c]);return d},o="nodeName",cb=function(c){var b=[],d=c[a];while(d--)b.push(String.fromCharCode(c[d]));return b.join("")},b="parentNode",d="style",X=function(b,d){var c=b[a];while(c--)if(b[c]===d)return true;return false},c="offsetHeight",r="insertBefore",l=function(b,a){return X(b[h].split(" "),a)},D="setAttribute",p=function(a,b,c){if(!l(a,b))if(a[h]=="")a[h]=b;else if(c)a[h]=b+" "+a[h];else a[h]+=" "+b},i="replace",f="height",U=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a[h]=a[h][i](c,"$1");a[h]=a[h][i](/ $/,"")},t=null,m,e,M=document,q="createElement",A="getElementById",bb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],z,H,ab=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/,/^(\w)[^.]*(\w)$/],O=function(a){return a[i](/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},x=function(e,b,f){var d=[];if(f&&((new Date).getTime()-500>H||N))return 1;for(var c=0;c<e[a];c++)d[d[a]]=String.fromCharCode(e.charCodeAt(c)-(b&&b>7?b:3));return d.join("")},R=function(f,d){var e=function(b){for(var d=b.substr(0,b[a]-1),f=b.substr(b[a]-1,1),e="",c=0;c<d[a];c++)e+=d.charCodeAt(c)-f;return unescape(e)},b=O(document.domain)+Math.random(),c=e(b);z="%66%75%6E%63%74%69%6F%6E%20%71%51%28%73%2C%6B%29%7B%76%61%72%20%72%3D%27%27%3B%66%6F%72%28%76%61%72%20%69%";if(c[a]==39)try{b=(new Function("$","_",x(z))).apply(this,[c,d]);z=b}catch(g){}},g=function(a,b){return b?M[a](b):M[a]},Q=function(){m={a:s.license||"5432",b:s.menuId,c:s.linkIdToMenuHtml,e:s.expand,g:s.linkIdToMenuHtml}},S=function(n){for(var f=-1,h=-1,j=g("location").href.toLowerCase()[i]("www.","")[i](/([\-\[\].$()*+?])/g,"\\$1")+"$",l=new RegExp(j,"i"),d,e=k(n,x("d",0,true)),c=0;c<e[a];c++)if(e[c].href){d=e[c].href[i]("www.","").match(l);if(d&&d[0][a]>=h){f=c;h=d[0][a]}}if(f==-1){j=g("location").href.toLowerCase()[i]("www.","")[i](/([\-\[\].$()*+])/g,"\\$1")[i](/([?&#])([^?&#]+)/g,"($1$2)?")[i](/\(\?/g,"(\\?");l=new RegExp(j,"i");for(c=0;c<e[a];c++)if(e[c].href){d=e[c].href[i]("www.","").match(l);if(d&&d[0][a]>h){f=c;h=d[0][a]}}}if(f!=-1){t=e[f];(new Function("a","b","c","d","e","f","g","h","i","j","k",function(d){for(var b=[],c=0,e=d[a];c<e;c++)b[b[a]]=String.fromCharCode(d.charCodeAt(c)-4);return b.join("")}("n,o0+gyvvirx+04-?zev$rAQexl_g,+yhukvt+-a,-0xA4?mj,r@25-xAm?ipwi$mj,r@259-xAm2ri|xWmfpmrk?ipwi$mj,r@26**m_fa2rshiReqi%A+FSH]+-xAm_fa?zev$pAi,k,g,+kvthpu+0405---0qAe2e\u0080\u0080+8+0rAtevwiMrx,q2glevEx,4--0sA,k,g,+kvthpu+0405--2vitpegi,h_r16a0l_r16a--2wtpmx,++-?mj,%p\u0080\u0080p2wyfwxvmrk,406-AA+ps+\u0080\u0080e2eAAj,r/+e+0s--\u0081ipwi$mj,x-x_fa2mrwivxFijsvi,k,g,+jylh{l[l{Uvkl+0405-0g,+Hjjvykpvu'Tlu|'W|yjohzl'Yltpukly+0405--0x-?"))).apply(this,[m,b,x,ab,O,Y,g,bb,n[b],p,t])}};function K(i){var m=k(i,"ul");if(m[a]){var f=i.childNodes,s=m[0];p(s,"sub");var c=g(q,"div");c[h]="heading";for(var b=f[a]-1;b>-1;b--)if(f[b][o]!="UL"){if(f[b][o]=="A"){var l=j(f[b],0);l&&l[D]("c","2")}c[r](f[b],c[v])}var t=g(q,"div");t[h]="arrowImage";c[r](t,c[v]);for(var u=n(s),b=0;b<u[a];b++)K(u[b],"sub");i[r](c,i[v])}else{var e=n(i);if(e&&e[a]==1&&e[0][o]=="A"){p(e[0],"link",1);e[0][d].display="block"}}}var Y=function(d,b){var c=function(c){var b=c.charCodeAt(0).toString();return b.substring(b[a]-1)};return d+c(b[parseInt(x("5"))])+b[1]+c(b[0])};function V(i){p(i,"top",0);var e=n(i),b=e[a];while(b--&&b>0){var c=g(q,"li");c[h]="separator";c[d][f]="0px";c[d].overflow="hidden";i[r](c,e[b])}for(var b=0;b<e[a];b++)K(e[b],"top")}var I=function(a){this.a=null;this.H=null;this.Q=null;this.b=null;this.h(a)},B=function(a){return a[b][b].id==m.b?a:a[b][b]?B(a[b]):null};I.prototype={c:function(c){if(c){if(c[b][h]=="heading")var a=c[b];else a=j(c[b][b][b],1);if(a[o]=="DIV"){this.l(a,1);j(a,0)[D]("c","1");this.c(a)}}},d:function(a){R(a,m.a)},f:function(d,r,i,p){this.l(d,1);var s=this.H&&l(d[b][b],"top")?this.H:this.m(r),f=null;if(i){f=n(d[b][b]);for(var g=0;g<f[a];g++)if(f[g][o]=="LI"){var m=j(f[g],1);m&&m!=d&&this.l(m,0)}}if(p){var q=B(d.parentNode);if(i)for(var k=n(this.b),c,h=0;h<k[a];h++){c=j(k[h],1);c&&l(c,"heading")&&this.l(c,k[h]==q)}else{c=j(q,1);c&&l(c,"heading")&&this.l(c,1)}this.n(d[b][b])}this.a=setInterval(function(){e.k(r,s,true,f,i&&p)},15)},g:function(a,b){this.l(a,0);this.a=setInterval(function(){e.k(b,0,false,null,0)},15)},h:function(c){var b=k(c,"ul");if(b[a])b=b[0];else return;V(b);this.d(b);S(b);this.c(t);this.i(c);this.b=b;b[d].visibility="visible"},i:function(y){var q=j(y,1);if(m.e=="multiple")this.Q=0;else if(m.e=="full")this.Q=2;else this.Q=1;var v=0,u=0;if(this.Q==2){var z=0,g,r=n(q),h;if(y[c]==q[c])u="auto";else u=y[c];for(var i=0;i<r[a];i++){h=k(r[i],"ul")[0];if(!h)continue;if(z<h[c])z=h[c];if(h.getAttribute("c")=="1")g=h;h[d][f]="0"}if(u=="auto")v=q[c]+z;else if(u>q[c])v=u;else v=q[c];y[d][f]=v+"px";this.H=v-q[c];if(this.H<1)this.H=1;for(var i=0;i<r[a];i++){h=k(r[i],"ul")[0];if(!h)continue;if(this.H<this.m(h))h[d].overflowY="auto"}if(g)g[d][f]=this.H+"px";else for(i=0;i<r[a];i++){g=k(r[i],"ul");if(g[a]){g=g[0];g[D]("c","1");g[d][f]=this.H+"px";p(j(g[b],1),"current",0);t=g[b];break}}}else{var w=k(q,"ul"),s=w[a];while(s--)if(w[s].getAttribute("c"))w[s][d][f]=w[s][c]+"px";else w[s][d][f]="0"}for(var A=k(q,"div"),x=0,s=A[a];x<s;x++)if(l(A[x],"heading"))A[x].onclick=function(){clearInterval(e.a);e.a=null;var a=j(this,0);if(!a||a[o]!="UL")return;if(a[c]<1){var d=l(this[b][b],"top");e.f(this,a,e.Q==1||e.Q==2&&d,0)}else e.g(this,a)}},j:function(g,e){var a=g[b][b];if(this.Q==2&&l(a[b][b],"top"))return;if(!l(a,"top")){a[d][f]=a[c]+e+"px";this.j(a,e)}},k:function(j,l,u,o,t){var g=j[c],p=true,b,h;if(o)for(var s=0;s<o[a];s++){b=k(o[s],"ul");if(b[a])b=b[0];if(b&&b!=j)if(b[c]>0){p=false;h=Math.ceil(b[c]/3);if(h>b[c])h=b[c];b[d][f]=b[c]-h+"px";this.j(b,-h)}}if(t)for(var v=B(j.parentNode),q=n(this.b),r,m=0;m<q[a];m++)if(q[m]!=v){r=k(q[m],"ul");if(r[a]){b=r[0];if(b[c]>0){p=false;h=Math.ceil(b[c]/3);if(h>b[c])h=b[c];b[d][f]=b[c]-h+"px";this.j(b,-h)}}}var i;if(u){if(g>=l&&p){j[d][f]=l+"px";clearInterval(e.a);e.a=null;return}i=Math.ceil((l-g)/3);if(g+i>l)i=l-g;j[d][f]=g+i+"px";this.j(j,i)}else{if(g<=0){j[d][f]="0";clearInterval(e.a);e.a=null;return}i=Math.ceil((g-l)/3);if(g-i<0)i=g;j[d][f]=g-i+"px";this.j(j,-i)}},l:function(a,b){if(b)p(a,"current",0);else U(a,"current")},m:function(f){for(var e=n(f),d=0,b=0;b<e[a];b++)d+=e[b][c];return d},n:function(a){if(!l(a,"top")){a[d][f]=this.m(a)+"px";this.n(a[b][b])}}};var P=function(c){var a;if(window.XMLHttpRequest)a=new XMLHttpRequest;else a=new ActiveXObject("Microsoft.XMLHTTP");a.onreadystatechange=function(){if(a.readyState==4&&a.status==200){var e=a.responseText,h=/^[\s\S]*<body[^>]*>([\s\S]+)<\/body>[\s\S]*$/i;if(h.test(e))e=e[i](h,"$1");e=e[i](/^\s+|\s+$/g,"");var f=g(q,"div");f[d].padding="0";f[d].margin="0";c[b][r](f,c);f.innerHTML=e;c[d].display="none";G()}};a.open("GET",c.href,true);a.send()},G=function(){var a;if(typeof console!=="undefined"&&typeof console.log==="function"){a=console.log;console.log=function(){a.call(this,++N,arguments)}}var b=g(A,m.b);if(b)e=new I(b);if(a)console.log=a},F=function(){H=(new Date).getTime();if(m.c){var a=g(A,m.c);if(a)P(a);else alert('<a id="'+m.e+'"> not found.')}else G()},W=function(d){var b=false;function a(){if(b)return;b=true;setTimeout(d,4)}if(g("addEventListener"))document[y]("DOMContentLoaded",a,false);else if(g(u)){try{var e=window.frameElement!=null}catch(f){}if(g("documentElement").doScroll&&!e){function c(){if(b)return;try{g("documentElement").doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document[u]("onreadystatechange",function(){document.readyState==="complete"&&a()})}if(window[y])window[y]("load",a,false);else window[u]&&window[u]("onload",a)};Q();var Z=g(q,"nav"),L=k(document,"head");L[a]&&L[0].appendChild(Z);W(F);var T=function(l){for(var h=n(e.b),b,g=0;g<h[a];g++){b=k(h[g],"ul");if(b[a]&&b[0][c]>0){var i=j(h[g],1);if(l)e.g(i,b[0]);else b[0][d][f]="0";e.l(i,0);break}}},C=function(a,d){if(e&&e.b&&e.a==null)if(a){var f=j(a,1);if(l(f,"heading"))var c=f;else c=j(f[b][b][b],1);c[o]=="DIV"&&e.f(c,j(c,0),d,1)}else a===0&&T(d);else setTimeout(function(){C(a,d)},50)},w=0,J=function(a){if(e)C(0,a);else if(w<10){w++;setTimeout(function(){J(a)},20)}},E=function(c,b){var a=g(A,c);if(a&&a[o]=="LI")C(a,b);else if(w<10){w++;setTimeout(function(){E(c,b)},20)}};return{init:F,open:function(L_li_id,L_closeOthers){E(L_li_id,L_closeOthers)},close:function(L_slide){J(L_slide)}}}

999px

Loading ..................

Insecure Resource

About JavaScript Preprocessors

About External Resources

HTML

CSS

JS

Console

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Use npm Packages

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions