lynt-smitka/social.html

## social.html
<html>
  <head>
    <style>
      .social-sticky-container {
      z-index: 9999;
      padding: 0px;
      margin: 0px;
      position: fixed;
      left: -10px;
      top: 180px;
      width: 52px;
      }
      .social-sticky {
      padding: 0;
      }
      .social-sticky li {
      list-style-type: none;
      height: 43px;
      padding: 0px;
      margin: 0px 0px 1px 0px;
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
      background: #ccc url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAD4CAMAAACt64RNAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMAmSD48C3EecsFX3HdVk4OEQmqvEai6uQ8sIIqMhZqQCWRGtTRN7aMh9gz5FHaAAAFjUlEQVRo3u2a2ZqaMBSAA4nIriwiKMiiVCfv/4AlYTFmk1600371v/BrZ36DCTnn5OCAP4d5MeI4Nk67d+LugCfMN+bexmvVGK9Vz3i1uh0tZCVJUq25vh2B9yRUDcAKLKqW69XNt6htMoCoaicDB/2ALNZ69RdGPa1X3fVqrtnT+wF7tMg/nb/4bn3Uf079gQhn8OGXqPJ646wRQxq6yOjAQOTOQX0RxKjAEygFzTa7gxFXyCNOghfgEWN/rovDCN6resIvZGcnHT/1dfjfnZ3AHr2Y6B6j6bo+TaZMPXMxz+ll3yEvmtWWN7dg4oFHjt706Q+c6UrKKoyD/fADg9HYjc7/yi9aS6lGkY21dIv6Zbi+zoQOE3l6buwRQI/xVDuoV9kdsl05K3HN9fVzC3XXZ3F2VauSj86resRK+BC5KE3b4SOkUJiwV8eduFNFpPugAHI27JLpD3Eu4hd/J/Ui94Y5Yn7MfV/WwbZAwtw9IJBesYRYfngN+IBBhrrENNsfaL7wzQijd/m0TMM0Nx3w4TsIbWV0ZweTNT2sI2vWJ60fXEUR8eMBsulg9Ca9oTFciNu9UW/PQmF+i3pdoyJII6ekseGrVTsYZm5uM/KWAYjlKlPtq7lECapYeHZfKvVqkx2TMVkqJbfftjNB3YBoUFvA4NO7b0jUkq8mBcZHuVoPryFXzZBc7YdXjzsgZ3K1Gl4TNptCjC25Sg9R9VO9k5OQQvVI7Vt+GpB72yjU6EhWcpxZdBpviEIFPaQ76u55h4xGzF6pggC+FOIGqFXQM3U56YBOBZHnTzUrBECnUs6B66bDp1SqJRARVbqgRmNKqclaVIsaYj2IOTj4evXBlvejziycl5p8MVTcU/Dhj9J5sY8w9ItLpRfLH3gBGp1ajFpuR4Uqs7Jp1j6l53PuWXRgl1PY3Osv6SX3iZtL1YJE6Y7ZbVfyVkdiBsIhdDMetUXsKWzDxLow17FF0yRHRjr4MyNf2Kr9WuiDOcxaJjzJlcTW1ZyDd2qGa+5ZGZN4o7lBcJlRS+lz19184DCZI00j/az5dM0bk4OgI10BA4AIMb3wTb5YwKap3yHJuJ/fTWcoEtLhckynR3lIZrX8JqCzg9OgUP0INDQckCxL6Vj6J5AOpPWiBiC3x2qkJH85vWDL0T8AL5ajyEHXH5Ao9KIHIpMraqAjG5fHKdN+B7SYbOLXk9L9vYoLf3zRLgDarVNPbOHR4+Fsv1J1cQBWksZgLVEEPnwrvXcYebzpul2bLVktJ+sep2S5Sr1iAUXEFlhCJd196vZRTK5STNE09Sc8Wct7DOqUYMy9l6jOv+qZ3EX4UqsN9z0jUqt22XWm2Znecsgsz2de1WD1q1V8+C2q8Veqt7o5zzT1VaWKtXcjW4EWU7jsGjCjCj+E94s3c3lA2VeNO4jVoBSwxBq11YWBPhg9pSmWvFZhnmRFE8qmJC+j3cnnRH+rLHjp1mDxavDhO3D2Ezut1myTDC+pTiOaMU7aAg4aimPP0ZghQjl5g00f6OvI4bSLq+PghrrZ+EsLEHDfaPC4z87BeTNs/FRBqwiUZ2eRLRPUH8h9JozP7/96wWWyQjolPiMS1BNT/MrlgSYgnRVPB5+ZcIthzqlCw4V6mlcRTAGriu4wLmzDsIWIjrkLBoYJDK8d71YnO6MdSfiStJX347oU4cYfwJi81lKVa13JZ1VB7r9vrlJpI5vVb9V9H3iQuNDTqpvHFcOvpLDY79XKUty4VTycq0I6RIDGZ5QKNkcMwyVwfc0u3Psv9aEjX1ir+5wj1/9ChfrFHwCRspuDGCfc/f2hbh8hu4AOUvZIB27KAbYdhdpA4i7j5tmxUScs4qI2HYK2CmNom0DNJsELV9d59zd0B8u2rYO3AR/+J34CS1LScg2G+GYAAAAASUVORK5CYII=') right 4px no-repeat;
      }
      .social-sticky li.fb {
      background-color: #3B5998;
      background-position-y: 4px;
      }
      .social-sticky li.tw {
      background-color: #1ca1f2;
      background-position-y: -36px;
      }
      .social-sticky li.ins {
      background-color: #be3481;
      background-position-y: -77px;
      }
      .social-sticky li.pin {
      background-color: #b51809;
      background-position-y: -117px;
      }
      .social-sticky li.blg {
      background-color: #f9ae26;
      background-position-y: -158px;
      }
      .social-sticky li.gpl {
      background-color: #dd4b39;
      background-position-y: -198px;
      }
      .social-sticky li:hover {
      margin-right: -10px;
      }
      .social-sticky li a {
      display: block;
      line-height:42px;
      }
    </style>
  </head>
  <body>
    <h1>Social Icons Example</h1>
    <div class="social-sticky-container">
      <ul class="social-sticky">
        <li class="fb"><a href="#">&shy;</a></li>
        <li class="tw"><a href="#">&shy;</a></li>
        <li class="ins"><a href="#">&shy;</a></li>
        <li class="pin"><a href="#">&shy;</a></li>
        <li class="blg"><a href="#">&shy;</a></li>
        <li class="gpl"><a href="#">&shy;</a></li>
      </ul>
    </div>
  </body>
</html>
	<html>
	<head>
	<style>
	.social-sticky-container {
	z-index: 9999;
	padding: 0px;
	margin: 0px;
	position: fixed;
	left: -10px;
	top: 180px;
	width: 52px;
	}
	.social-sticky {
	padding: 0;
	}
	.social-sticky li {
	list-style-type: none;
	height: 43px;
	padding: 0px;
	margin: 0px 0px 1px 0px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	background: #ccc url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAD4CAMAAACt64RNAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMAmSD48C3EecsFX3HdVk4OEQmqvEai6uQ8sIIqMhZqQCWRGtTRN7aMh9gz5FHaAAAFjUlEQVRo3u2a2ZqaMBSAA4nIriwiKMiiVCfv/4AlYTFmk1600371v/BrZ36DCTnn5OCAP4d5MeI4Nk67d+LugCfMN+bexmvVGK9Vz3i1uh0tZCVJUq25vh2B9yRUDcAKLKqW69XNt6htMoCoaicDB/2ALNZ69RdGPa1X3fVqrtnT+wF7tMg/nb/4bn3Uf079gQhn8OGXqPJ646wRQxq6yOjAQOTOQX0RxKjAEygFzTa7gxFXyCNOghfgEWN/rovDCN6resIvZGcnHT/1dfjfnZ3AHr2Y6B6j6bo+TaZMPXMxz+ll3yEvmtWWN7dg4oFHjt706Q+c6UrKKoyD/fADg9HYjc7/yi9aS6lGkY21dIv6Zbi+zoQOE3l6buwRQI/xVDuoV9kdsl05K3HN9fVzC3XXZ3F2VauSj86resRK+BC5KE3b4SOkUJiwV8eduFNFpPugAHI27JLpD3Eu4hd/J/Ui94Y5Yn7MfV/WwbZAwtw9IJBesYRYfngN+IBBhrrENNsfaL7wzQijd/m0TMM0Nx3w4TsIbWV0ZweTNT2sI2vWJ60fXEUR8eMBsulg9Ca9oTFciNu9UW/PQmF+i3pdoyJII6ekseGrVTsYZm5uM/KWAYjlKlPtq7lECapYeHZfKvVqkx2TMVkqJbfftjNB3YBoUFvA4NO7b0jUkq8mBcZHuVoPryFXzZBc7YdXjzsgZ3K1Gl4TNptCjC25Sg9R9VO9k5OQQvVI7Vt+GpB72yjU6EhWcpxZdBpviEIFPaQ76u55h4xGzF6pggC+FOIGqFXQM3U56YBOBZHnTzUrBECnUs6B66bDp1SqJRARVbqgRmNKqclaVIsaYj2IOTj4evXBlvejziycl5p8MVTcU/Dhj9J5sY8w9ItLpRfLH3gBGp1ajFpuR4Uqs7Jp1j6l53PuWXRgl1PY3Osv6SX3iZtL1YJE6Y7ZbVfyVkdiBsIhdDMetUXsKWzDxLow17FF0yRHRjr4MyNf2Kr9WuiDOcxaJjzJlcTW1ZyDd2qGa+5ZGZN4o7lBcJlRS+lz19184DCZI00j/az5dM0bk4OgI10BA4AIMb3wTb5YwKap3yHJuJ/fTWcoEtLhckynR3lIZrX8JqCzg9OgUP0INDQckCxL6Vj6J5AOpPWiBiC3x2qkJH85vWDL0T8AL5ajyEHXH5Ao9KIHIpMraqAjG5fHKdN+B7SYbOLXk9L9vYoLf3zRLgDarVNPbOHR4+Fsv1J1cQBWksZgLVEEPnwrvXcYebzpul2bLVktJ+sep2S5Sr1iAUXEFlhCJd196vZRTK5STNE09Sc8Wct7DOqUYMy9l6jOv+qZ3EX4UqsN9z0jUqt22XWm2Znecsgsz2de1WD1q1V8+C2q8Veqt7o5zzT1VaWKtXcjW4EWU7jsGjCjCj+E94s3c3lA2VeNO4jVoBSwxBq11YWBPhg9pSmWvFZhnmRFE8qmJC+j3cnnRH+rLHjp1mDxavDhO3D2Ezut1myTDC+pTiOaMU7aAg4aimPP0ZghQjl5g00f6OvI4bSLq+PghrrZ+EsLEHDfaPC4z87BeTNs/FRBqwiUZ2eRLRPUH8h9JozP7/96wWWyQjolPiMS1BNT/MrlgSYgnRVPB5+ZcIthzqlCw4V6mlcRTAGriu4wLmzDsIWIjrkLBoYJDK8d71YnO6MdSfiStJX347oU4cYfwJi81lKVa13JZ1VB7r9vrlJpI5vVb9V9H3iQuNDTqpvHFcOvpLDY79XKUty4VTycq0I6RIDGZ5QKNkcMwyVwfc0u3Psv9aEjX1ir+5wj1/9ChfrFHwCRspuDGCfc/f2hbh8hu4AOUvZIB27KAbYdhdpA4i7j5tmxUScs4qI2HYK2CmNom0DNJsELV9d59zd0B8u2rYO3AR/+J34CS1LScg2G+GYAAAAASUVORK5CYII=') right 4px no-repeat;
	}
	.social-sticky li.fb {
	background-color: #3B5998;
	background-position-y: 4px;
	}
	.social-sticky li.tw {
	background-color: #1ca1f2;
	background-position-y: -36px;
	}
	.social-sticky li.ins {
	background-color: #be3481;
	background-position-y: -77px;
	}
	.social-sticky li.pin {
	background-color: #b51809;
	background-position-y: -117px;
	}
	.social-sticky li.blg {
	background-color: #f9ae26;
	background-position-y: -158px;
	}
	.social-sticky li.gpl {
	background-color: #dd4b39;
	background-position-y: -198px;
	}
	.social-sticky li:hover {
	margin-right: -10px;
	}
	.social-sticky li a {
	display: block;
	line-height:42px;
	}
	</style>
	</head>
	<body>
	<h1>Social Icons Example</h1>
	<div class="social-sticky-container">
	<ul class="social-sticky">
	<li class="fb"><a href="#"></a></li>
	<li class="tw"><a href="#"></a></li>
	<li class="ins"><a href="#"></a></li>
	<li class="pin"><a href="#"></a></li>
	<li class="blg"><a href="#"></a></li>
	<li class="gpl"><a href="#"></a></li>
	</ul>
	</div>
	</body>
	</html>