cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Untitled

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=yes">
		<title>Hubski - Post</title>
		<link rel="stylesheet" href="clean.css">
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic' rel='stylesheet' type='text/css'>
		<script src="misc-functions-tay.js"></script>

	</head>
			<style>
			.logged-out {
				display: none;
			}

		</style>
<body>


<!-- - - - - - - - - - - - - - - - -
 	  NAVIGATION | HEADER
- - - - - - - - - - - - - - - - - -->
<header>
	<div class="header-left logged-in">
<!--- HUBWHEEL LOGO class="logo" -->
		<a href="#">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="logo">
				<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/>
				<circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/>
				<circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/>
				<circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/>
				<circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/>
				<circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/>
				<circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/>
				<circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/>
				<circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
			</svg>
		</a>
		<a href="#"><h2 class="username">insomniasexxinsomnia</h2></a>

<!--- HUBWHEEL NOTIFICATION 	class="notif" 	class="notif read" (teal) 	class="notif unread" (orange)-->
		<a href="#">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="notif">
				<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/>
				<circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/>
				<circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/>
				<circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/>
				<circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/>
				<circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/>
				<circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/>
				<circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/>
				<circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
			</svg>
		</a>
		<a href="#">x 5</a>
	</div><!-- remove whitespace between divs on inline elements

 --><div class="header-left logged-out">
<!--- HUBWHEEL LOGO class="logo" -->
		<a href="#">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="logo">
				<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/>
				<circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/>
				<circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/>
				<circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/>
				<circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/>
				<circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/>
				<circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/>
				<circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/>
				<circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
			</svg>
		</a>
		<h2>Hubski: A Thoughtful Web</h2>
	</div><!-- remove whitespace between divs on inline elements

 --><div class="header-right">
<!--- .NAV-ICON    FEED -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
			<path fill="#8097A4" d="M123.837,112.245c-0.82,0.765-12.055,10.7-18.602,16.486V149.1h13.951v-16.259h11.626V149.1h13.951v-20.401
				c-6.806-6.034-18.602-16.453-18.602-16.453S125,111.161,123.837,112.245z M144.765,104.719c0-1.197-1.042-2.168-2.326-2.168h-4.65
				c-1.283,0-2.325,0.971-2.325,2.168v1.88c2.946,2.627,6.278,5.592,9.302,8.281V104.719L144.765,104.719z M149.483,121.82
				c0,0-19.833-17.789-22.159-19.957c-2.325-2.168-4.65,0-4.65,0s-20.995,18.873-22.158,19.957s0,2.168,0,2.168
				s1.163,1.084,2.325,2.167c1.162,1.084,2.325,0,2.325,0s17.508-15.62,18.67-16.704c1.163-1.084,2.326,0,2.326,0
				s17.507,15.621,18.67,16.704c1.162,1.084,2.324,0,2.324,0s0,0,2.326-2.167C150.646,122.904,149.483,121.82,149.483,121.82z"/>
			</svg>
			<span>feed</span>
		</a>
<!--- .NAV-ICON    GLOBAL -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
			<path fill="#8097A4" d="M121.948,144.77v-1.51c-6.436,0-11.937-2.284-16.504-6.852c-0.498-0.498-0.747-1.11-0.747-1.837
				s0.249-1.339,0.747-1.838c0.499-0.498,1.111-0.748,1.838-0.748c0.726,0,1.338,0.25,1.837,0.748c3.529,3.529,7.806,5.294,12.83,5.294
				c5.065,0,9.363-1.765,12.892-5.294c3.529-3.528,5.294-7.806,5.294-12.829c0-5.065-1.765-9.362-5.294-12.892l-1.869-1.806
				l4.521-4.459c0.498-0.498,1.11-0.747,1.837-0.747s1.34,0.249,1.838,0.747c0.498,0.499,0.736,1.101,0.716,1.806
				c-0.021,0.706-0.28,1.309-0.778,1.807l-0.909,0.971c3.404,4.235,5.106,9.092,5.106,14.573c0,6.436-2.283,11.937-6.851,16.504
				c-3.196,3.197-6.954,5.272-11.272,6.228v2.133h10.338c0.706,0,1.319,0.26,1.838,0.779c0.519,0.519,0.779,1.131,0.779,1.837
				c0,0.705-0.261,1.318-0.779,1.837c-0.519,0.52-1.131,0.778-1.838,0.778h-25.908c-0.706,0-1.318-0.259-1.837-0.778
				c-0.519-0.519-0.779-1.131-0.779-1.837s0.26-1.318,0.779-1.837c0.519-0.52,1.131-0.779,1.837-0.779L121.948,144.77L121.948,144.77z
				 M106.378,119.904c0-4.276,1.526-7.94,4.577-10.992c3.052-3.052,6.716-4.578,10.993-4.578s7.941,1.526,10.993,4.578
				c3.052,3.051,4.577,6.716,4.577,10.992c0,4.277-1.525,7.94-4.577,10.992c-3.052,3.053-6.716,4.578-10.993,4.578
				s-7.941-1.525-10.993-4.578C107.904,127.845,106.378,124.181,106.378,119.904z"/>
			</svg>
			<span>global</span>
		</a>
<!--- .NAV-ICON    CHATTER -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M116.146,123.457c0-1.663,1.629-3.61,3.638-3.61h15.065c0-0.019,0.004,0.564,0.004,0.545V105.54 c0-3.19-1.753-5.29-5.886-5.29h-23.083c-3.985,0-5.885,2.3-5.885,5.29v14.852c0,1.816,1.739,3.289,3.883,3.289h0.975l6.002,7.27 l1.943-7.27h3.344V123.457L116.146,123.457z"/>
				<path fill="#8097A4" d="M144.36,121.394h-21.374c-3.887,0-5.64,1.956-5.64,5.012v13.423c0,1.662,1.629,3.009,3.638,3.009h13.532 l5.623,6.912l3.459-6.912h2.762c2.01,0,3.639-1.347,3.639-3.009v-13.423C150,124.15,147.899,121.394,144.36,121.394z"/>
			</svg>
			<span>chatter</span>
		</a>
<!--- .NAV-ICON    COMMUNITY -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52.742px" height="50px" viewBox="-1.139 0 52.742 50" enable-background="new -1.139 0 52.742 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M36.856,14.86c0.88,0.504,1.886,0.815,2.973,0.815c3.294,0,5.973-2.653,5.973-5.913 c0-3.261-2.679-5.914-5.973-5.914c-3.293,0-5.973,2.653-5.973,5.914c0,0.231,0.043,0.451,0.067,0.676 C35.199,11.672,36.204,13.178,36.856,14.86z"/>
				<path fill="#8097A4" d="M51.604,23.188c0-4.156-1.741-6.495-5.63-7.516c-1.717,1.448-3.875,2.238-6.146,2.238 c-0.773,0-1.527-0.099-2.257-0.278c0.075,0.552,0.128,1.11,0.128,1.681c0,2.447-0.731,4.473-1.965,6.392 c2.779,0.728,5.03,2.071,6.764,3.145h9.106V23.188z"/>
				<path fill="#8097A4" d="M36.066,19.074c0-0.965-0.142-1.896-0.387-2.786c-1.227-4.467-5.312-7.763-10.162-7.763 c-4.491,0-8.325,2.823-9.845,6.785c-0.45,1.171-0.707,2.437-0.707,3.764c0,4.375,2.68,8.135,6.482,9.732 c1.252,0.524,2.627,0.814,4.067,0.814c1.012,0,1.988-0.15,2.916-0.419C32.832,27.936,36.066,23.879,36.066,19.074z"/>
				<path fill="#8097A4" d="M35.751,27.157c-2.749,2.45-6.396,3.793-10.104,3.793c-3.706,0-7.565-1.343-10.316-3.793 C8.405,28.878,4.831,33.113,4.831,40.441v7.557h41.338v-7.557C46.169,33.115,42.677,28.881,35.751,27.157z"/>
				<path fill="#8097A4" d="M16.541,10.435c0.024-0.225,0.067-0.444,0.067-0.676c0-3.261-2.68-5.914-5.973-5.914 c-3.294,0-5.973,2.653-5.973,5.914c0,3.259,2.679,5.913,5.973,5.913c1.087,0,2.093-0.311,2.973-0.815 C14.261,13.174,15.266,11.668,16.541,10.435z"/>
				<path fill="#8097A4" d="M-1.139,28.846h9.106c1.733-1.073,3.984-2.417,6.764-3.145c-1.233-1.919-1.965-3.945-1.965-6.393 c0-0.57,0.053-1.129,0.128-1.681c-0.729,0.179-1.483,0.278-2.257,0.278c-2.271,0-4.43-0.79-6.146-2.238 c-3.889,1.021-5.63,3.359-5.63,7.516V28.846z"/>
			</svg>
			<span>community</span>
		</a>
<!--- .NAV-ICON    BADGES -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
			<path fill="#8097A4" d="M125,99.777c-13.807,0-25,11.193-25,25s11.193,25,25,25c13.808,0,25-11.192,25-25S138.808,99.777,125,99.777
				z M137.667,108.931c1.78,0,3.225,1.443,3.225,3.224s-1.444,3.225-3.225,3.225s-3.225-1.443-3.225-3.225
				C134.442,110.374,135.887,108.931,137.667,108.931z M125.016,103.587c1.78,0,3.224,1.443,3.224,3.224s-1.443,3.225-3.224,3.225
				c-1.781,0-3.225-1.444-3.225-3.225S123.234,103.587,125.016,103.587z M106.99,128.031c-1.781,0-3.225-1.443-3.225-3.225
				c0-1.781,1.444-3.224,3.225-3.224s3.225,1.443,3.225,3.224C110.214,126.588,108.771,128.031,106.99,128.031z M112.333,140.714
				c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.225,3.225-3.225c1.781,0,3.224,1.444,3.224,3.225S114.114,140.714,112.333,140.714z
				 M112.333,115.379c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.781,0,3.224,1.443,3.224,3.224
				S114.114,115.379,112.333,115.379z M125.016,146.057c-1.781,0-3.225-1.443-3.225-3.225c0-1.78,1.443-3.224,3.225-3.224
				c1.78,0,3.224,1.443,3.224,3.224C128.239,144.613,126.796,146.057,125.016,146.057z M125,134.02c-5.088,0-9.212-4.125-9.212-9.213
				s4.125-9.212,9.212-9.212s9.213,4.125,9.213,9.212S130.088,134.02,125,134.02z M137.667,140.714c-1.78,0-3.225-1.444-3.225-3.225
				s1.444-3.225,3.225-3.225s3.225,1.444,3.225,3.225S139.447,140.714,137.667,140.714z M143.011,128.001
				c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.78,0,3.224,1.443,3.224,3.224S144.791,128.001,143.011,128.001z"/>
			</svg>
			<span>badges</span>
		</a>
<!--- .NAV-ICON    TAGS -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
			<path fill="#8097A4" d="M144.82,129.018h-7.912l0.828-8.634h6.683c2.584,0,4.68-1.769,4.68-3.868v-0.063c0-2.099-2.096-3.7-4.68-3.7
				h-5.95l0.824-8.598c0-2.585-1.829-4.655-4.087-4.655h-0.067c-2.257,0-4.086,2.07-4.086,4.655l-0.825,8.598h-9.008l0.787-8.196
				c0-2.584-1.83-4.655-4.086-4.655h-0.068c-2.257,0-4.086,2.07-4.086,4.655l-0.787,8.196h-8.799c-2.584,0-4.68,1.601-4.68,3.7v0.063
				c0,2.099,2.095,3.868,4.68,3.868h8.067l-0.829,8.634h-6.837c-2.584,0-4.68,1.568-4.68,3.667v0.063c0,2.099,2.096,3.9,4.68,3.9h6.106
				l-0.779,8.121c0,2.585,1.83,4.73,4.086,4.73h0.068c2.257,0,4.086-2.146,4.086-4.73l0.779-8.121h9.008l-0.74,7.72
				c0,2.584,1.829,4.73,4.087,4.73h0.067c2.257,0,4.086-2.146,4.086-4.73l0.741-7.72h8.644c2.585,0,4.68-1.802,4.68-3.9v-0.063
				C149.5,130.586,147.405,129.018,144.82,129.018z M119.66,129.018l0.829-8.634h9.008l-0.828,8.634H119.66z"/>
			</svg>
			<span>tags</span>
		</a>
<!--- .NAV-ICON    EXPLORE -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M122.367,120.425c0,0.969-0.785,1.754-1.754,1.754h-17.858c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.969,0.785-1.754,1.754-1.754h17.858c0.969,0,1.754,0.786,1.754,1.754V120.425z"/>
				<path fill="#8097A4" d="M149,120.425c0,0.969-0.785,1.754-1.754,1.754h-17.859c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.969,0.785-1.754,1.754-1.754h17.858c0.97,0,1.755,0.786,1.755,1.754V120.425L149,120.425z"/>
				<path fill="#8097A4" d="M122.367,147.245c0,0.969-0.785,1.754-1.754,1.754h-17.858c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.97,0.785-1.755,1.754-1.755h17.858c0.969,0,1.754,0.786,1.754,1.755V147.245z"/>
				<path fill="#8097A4" d="M149,147.245c0,0.969-0.785,1.754-1.754,1.754h-17.859c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.97,0.785-1.755,1.754-1.755h17.858c0.97,0,1.755,0.786,1.755,1.755V147.245L149,147.245z"/>
			</svg>
			<span>explore</span>
		</a>
<!--- .NAV-ICON    SEARCH -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M149.216,144.306l-9.868-9.868c2.728-3.634,4.14-7.741,4.14-12.634c0-12.009-9.734-21.744-21.744-21.744 S100,109.794,100,121.803c0,12.009,9.735,21.744,21.744,21.744c4.954,0,9.112-1.454,12.768-4.242l9.853,9.853 c1.171,1.172,3.477,0.969,4.648-0.203C150.185,147.783,150.388,145.477,149.216,144.306z M121.822,136.542 c-8.14,0-14.739-6.599-14.739-14.739c0-8.141,6.599-14.739,14.739-14.739s14.739,6.599,14.739,14.739 C136.562,129.943,129.962,136.542,121.822,136.542z"/>
				<path fill="#8097A4" d="M116.171,116.834"/>
			</svg>
			<span>search</span>
		</a>
<!--- .NAV-ICON    NEW POST -->
		<a href="#" class="nav-icon-a">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M145,120h-15v-15c0-2.761-2.238-5-5-5c-2.761,0-5,2.239-5,5v15h-15c-2.761,0-5,2.239-5,5 c0,2.762,2.239,5,5,5h15v15c0,2.762,2.239,5,5,5c2.762,0,5-2.238,5-5v-15h15c2.762,0,5-2.238,5-5C150,122.239,147.762,120,145,120z"/>
			</svg>
			<span>new post</span>
		</a>
<!--- .NAV-ICON    MORE -->
		<span class="nav-icon-a" onclick="toggleState('moreOverlay')">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="-7.5 0 50 50" enable-background="new -7.5 0 50 50" xml:space="preserve" class="nav-icon">
				<path fill="#8097A4" d="M26.733,43.398l13.854-13.854c2.55-2.55,2.463-5.682-0.089-8.233c-2.552-2.549-5.596-2.549-8.146,0 L17.5,36.165L2.647,21.312c-2.55-2.549-5.595-2.549-8.145,0c-2.549,2.551-2.639,5.684-0.09,8.233L8.263,43.398 c0,0,6.928,6.602,9.237,6.602C19.808,50,26.733,43.398,26.733,43.398z"/>
			</svg>
			<span>more</span>
			<div class="overlay-container more">
				<div class="overlay">
					<ul>
						<span style="margin: 0">
						<!--BADGES .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="overlay-icon">
							<path fill="#8097A4" d="M125,99.777c-13.807,0-25,11.193-25,25s11.193,25,25,25c13.808,0,25-11.192,25-25S138.808,99.777,125,99.777 z M137.667,108.931c1.78,0,3.225,1.443,3.225,3.224s-1.444,3.225-3.225,3.225s-3.225-1.443-3.225-3.225 C134.442,110.374,135.887,108.931,137.667,108.931z M125.016,103.587c1.78,0,3.224,1.443,3.224,3.224s-1.443,3.225-3.224,3.225 c-1.781,0-3.225-1.444-3.225-3.225S123.234,103.587,125.016,103.587z M106.99,128.031c-1.781,0-3.225-1.443-3.225-3.225 c0-1.781,1.444-3.224,3.225-3.224s3.225,1.443,3.225,3.224C110.214,126.588,108.771,128.031,106.99,128.031z M112.333,140.714 c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.225,3.225-3.225c1.781,0,3.224,1.444,3.224,3.225S114.114,140.714,112.333,140.714z M112.333,115.379c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.781,0,3.224,1.443,3.224,3.224 S114.114,115.379,112.333,115.379z M125.016,146.057c-1.781,0-3.225-1.443-3.225-3.225c0-1.78,1.443-3.224,3.225-3.224 c1.78,0,3.224,1.443,3.224,3.224C128.239,144.613,126.796,146.057,125.016,146.057z M125,134.02c-5.088,0-9.212-4.125-9.212-9.213 s4.125-9.212,9.212-9.212s9.213,4.125,9.213,9.212S130.088,134.02,125,134.02z M137.667,140.714c-1.78,0-3.225-1.444-3.225-3.225 s1.444-3.225,3.225-3.225s3.225,1.444,3.225,3.225S139.447,140.714,137.667,140.714z M143.011,128.001 c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.78,0,3.224,1.443,3.224,3.224S144.791,128.001,143.011,128.001z"/>
							</svg>
							badges
						</a></li>
						<!--TAGS .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="overlay-icon">
							<path fill="#8097A4" d="M144.82,129.018h-7.912l0.828-8.634h6.683c2.584,0,4.68-1.769,4.68-3.868v-0.063c0-2.099-2.096-3.7-4.68-3.7 h-5.95l0.824-8.598c0-2.585-1.829-4.655-4.087-4.655h-0.067c-2.257,0-4.086,2.07-4.086,4.655l-0.825,8.598h-9.008l0.787-8.196 c0-2.584-1.83-4.655-4.086-4.655h-0.068c-2.257,0-4.086,2.07-4.086,4.655l-0.787,8.196h-8.799c-2.584,0-4.68,1.601-4.68,3.7v0.063 c0,2.099,2.095,3.868,4.68,3.868h8.067l-0.829,8.634h-6.837c-2.584,0-4.68,1.568-4.68,3.667v0.063c0,2.099,2.096,3.9,4.68,3.9h6.106 l-0.779,8.121c0,2.585,1.83,4.73,4.086,4.73h0.068c2.257,0,4.086-2.146,4.086-4.73l0.779-8.121h9.008l-0.74,7.72 c0,2.584,1.829,4.73,4.087,4.73h0.067c2.257,0,4.086-2.146,4.086-4.73l0.741-7.72h8.644c2.585,0,4.68-1.802,4.68-3.9v-0.063 C149.5,130.586,147.405,129.018,144.82,129.018z M119.66,129.018l0.829-8.634h9.008l-0.828,8.634H119.66z"/></svg>
							tags
						</a></li>
						<!--EXPLORE .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="overlay-icon">
							<path fill="#8097A4" d="M122.367,120.425c0,0.969-0.785,1.754-1.754,1.754h-17.858c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.969,0.785-1.754,1.754-1.754h17.858c0.969,0,1.754,0.786,1.754,1.754V120.425z"/>
							<path fill="#8097A4" d="M149,120.425c0,0.969-0.785,1.754-1.754,1.754h-17.859c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.969,				0.785-1.754,1.754-1.754h17.858c0.97,0,1.755,0.786,1.755,1.754V120.425L149,120.425z"/>
							<path fill="#8097A4" d="M122.367,147.245c0,0.969-0.785,1.754-1.754,1.754h-17.858c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.97,0.785-1.755,1.754-1.755h17.858c0.969,0,1.754,0.786,1.754,1.755V147.245z"/>
							<path fill="#8097A4" d="M149,147.245c0,0.969-0.785,1.754-1.754,1.754h-17.859c-0.969,0-1.754-0.785-1.754-1.754v-17.671 c0-0.97,0.785-1.755,1.754-1.755h17.858c0.97,0,1.755,0.786,1.755,1.755V147.245L149,147.245z"/>
							</svg>
							explore
						</a></li>
						<!--SEARCH .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="overlay-icon">
							<path fill="#8097A4" d="M149.216,144.306l-9.868-9.868c2.728-3.634,4.14-7.741,4.14-12.634c0-12.009-9.734-21.744-21.744-21.744 S100,109.794,100,121.803c0,12.009,9.735,21.744,21.744,21.744c4.954,0,9.112-1.454,12.768-4.242l9.853,9.853 c1.171,1.172,3.477,0.969,4.648-0.203C150.185,147.783,150.388,145.477,149.216,144.306z M121.822,136.542 c-8.14,0-14.739-6.599-14.739-14.739c0-8.141,6.599-14.739,14.739-14.739s14.739,6.599,14.739,14.739 C136.562,129.943,129.962,136.542,121.822,136.542z"/>
							<path fill="#8097A4" d="M116.171,116.834"/>
							</svg>
							search
						</a></li>
						<!--NEW POST .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="overlay-icon"><path fill="#8097A4" d="M145,120h-15v-15c0-2.761-2.238-5-5-5c-2.761,0-5,2.239-5,5v15h-15c-2.761,0-5,2.239-5,5 c0,2.762,2.239,5,5,5h15v15c0,2.762,2.239,5,5,5c2.762,0,5-2.238,5-5v-15h15c2.762,0,5-2.238,5-5C150,122.239,147.762,120,145,120z"/></svg>
							new post
						</a></li>
						</span>
						<!--MAIL .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"  class="overlay-icon">
								<path fill="#8097A4" d="M43.698,4.263H4.302C1.374,4.263-1,6.599-1,9.479v29.04c0,2.881,2.374,5.218,5.302,5.218 h39.396C46.627,43.737,49,41.4,49,38.52V9.479C49,6.599,46.627,4.263,43.698,4.263z M41.994,9.526L23.969,26.572 c-0.29,0.288-0.483,0.435-0.594,0.507c-0.11-0.078-0.302-0.238-0.601-0.555L5.561,9.526H41.994z M4.263,38.474V13.866l15.646,15.45 c0.718,0.766,1.852,1.787,3.391,1.814c0.021,0.001,0.042,0.001,0.062,0.001c1.514,0,2.677-0.979,3.389-1.687l16.985-16.062v25.091 H4.263z"/>
							</svg>
							mail
						</a></li>
						<!--DRAFTS .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve" class="overlay-icon">
								<path fill="#8097A4" d="M22.097,35.961l3.612-3.611l-4.734-4.734l-3.611,3.611v1.746h2.989v2.988H22.097L22.097,35.961z  M35.799,13.539c-0.333-0.333-0.675-0.322-1.028,0.031L23.872,24.469c-0.354,0.354-0.364,0.696-0.031,1.028 c0.332,0.333,0.675,0.323,1.027-0.031l10.899-10.9C36.12,14.213,36.131,13.871,35.799,13.539z M38.29,32.037v5.918 c0,2.471-0.877,4.582-2.632,6.338c-1.754,1.756-3.866,2.631-6.337,2.631H8.969c-2.471,0-4.583-0.875-6.338-2.631 C0.877,42.537,0,40.426,0,37.955V12.043c0-2.47,0.877-4.583,2.631-6.337c1.755-1.754,3.867-2.631,6.338-2.631h20.353 c1.308,0,2.521,0.259,3.644,0.777c0.312,0.146,0.498,0.385,0.561,0.717c0.062,0.353-0.03,0.653-0.279,0.902L31.72,6.999 c-0.29,0.291-0.622,0.374-0.996,0.249c-0.479-0.125-0.944-0.188-1.4-0.188H8.971c-1.371,0-2.544,0.488-3.52,1.464 C4.475,9.5,3.987,10.672,3.987,12.042v25.911c0,1.371,0.487,2.543,1.464,3.52c0.976,0.977,2.147,1.465,3.52,1.465h20.353 c1.37,0,2.543-0.488,3.519-1.465c0.977-0.977,1.464-2.148,1.464-3.52v-3.924c0-0.27,0.095-0.498,0.28-0.686l1.993-1.992 c0.312-0.312,0.675-0.385,1.09-0.221C38.082,31.301,38.29,31.602,38.29,32.037L38.29,32.037z M35.3,9.053l8.97,8.97L23.342,38.951 h-8.969v-8.969L35.3,9.053z M49.128,13.166l-2.864,2.865l-8.97-8.97l2.864-2.864c0.582-0.582,1.288-0.872,2.118-0.872 s1.537,0.291,2.117,0.872l4.733,4.733C49.709,9.511,50,10.217,50,11.048C50.001,11.877,49.71,12.583,49.128,13.166L49.128,13.166z" />
							</svg>
							drafts
						</a></li>
						<!--SAVED .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"  class="overlay-icon">
							<path fill="#8097A4" d="M49.978,19.4c-0.196-1.347-1.741-1.65-3.181-1.861 c-4.644-0.681-8.854-1.297-13.239-1.86c-1.798-3.448-3.784-7.641-5.644-11.574c-0.579-1.225-1.387-3.017-2.668-3.1 c-1.905-0.123-2.385,1.819-3.079,3.307c-1.817,3.902-4.104,8.338-5.747,11.367c-3.037,0.405-5.742,0.771-9.031,1.24 C5.167,17.237-0.032,17.237,0,19.812c0.016,1.282,1.716,2.518,2.565,3.307c3.196,2.97,5.962,5.871,8.826,8.783 c-0.703,3.471-1.294,7.822-1.95,11.574c-0.402,2.3-1.295,4.977,0.923,5.477c1.223,0.275,2.776-0.908,3.797-1.446 c3.818-2.015,7.244-3.869,10.878-5.684c3.584,1.84,7.102,3.644,10.775,5.58c1.108,0.583,2.61,1.855,4.003,1.55 c2.042-0.45,1.265-3.256,0.924-5.27c-0.675-3.984-1.458-8.334-2.053-11.884c3.003-2.851,5.788-5.878,8.928-8.784 C48.58,22.125,50.21,20.991,49.978,19.4z"/>
							</svg>
							saved
						</a></li>
						<!--SETTINGS .OVERLAY-ICON-->
						<li><a href="#">
							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve" class="overlay-icon">
								<path fill="#8097A4" d="M21.545,0c-0.827,0-1.494,0.666-1.494,1.494v3.798c-1.933,0.48-3.793,1.252-5.542,2.304l-2.677-2.677 c-0.585-0.586-1.531-0.586-2.117,0L4.859,9.776c-0.585,0.585-0.585,1.531,0,2.116l2.678,2.678c-1.044,1.743-1.767,3.624-2.242,5.542 H1.496c-0.828,0-1.495,0.666-1.495,1.494v6.849c0,0.828,0.667,1.496,1.494,1.496h3.736c0.48,1.934,1.251,3.791,2.304,5.541 l-2.678,2.676c-0.585,0.586-0.585,1.533,0,2.119l4.856,4.855c0.586,0.586,1.532,0.586,2.117,0l2.677-2.678 c1.756,1.059,3.608,1.762,5.542,2.242v3.797c0,0.828,0.667,1.496,1.494,1.496h6.85c0.827,0,1.494-0.668,1.494-1.496v-3.797 c1.938-0.479,3.79-1.191,5.541-2.242l2.679,2.678c0.586,0.586,1.531,0.586,2.117,0l4.855-4.855c0.586-0.586,0.586-1.533,0-2.119 l-2.678-2.676c1.055-1.746,1.824-3.619,2.304-5.541h3.799c0.828,0,1.495-0.668,1.495-1.496v-6.849c0-0.829-0.667-1.494-1.495-1.494 h-3.799c-0.474-1.922-1.259-3.802-2.302-5.542l2.678-2.678c0.586-0.585,0.586-1.531,0-2.116l-4.855-4.857 c-0.586-0.586-1.531-0.586-2.117,0l-2.678,2.677c-1.749-1.05-3.616-1.828-5.542-2.304V1.495C29.889,0.667,29.223,0,28.395,0H21.545z  M24.721,15.566c2.421-0.064,4.89,0.754,6.786,2.554c3.794,3.596,3.971,9.592,0.374,13.387c-3.587,3.781-9.591,3.947-13.387,0.373 c-3.792-3.598-3.97-9.594-0.374-13.388C19.918,16.598,22.299,15.631,24.721,15.566z"/>
							</svg>
							settings
						</a></li>
					</ul>
				</div>
			</div>
		</span>
	</div>
</header>





















<!--- - - - - - - - - - - - - - - -
	 	SECONDARY NAV BAR
- - - - - - - - - - - - - - - - -->

<section class="info-bar important logged-out">
	<h2>Hubski is a community to find, share, and discuss great ideas. <a href="#">Login</a>, <a href="#">Join Us</a>, or <a href="#">Take a Tour!</a></h2>
</section>



<section class="main-container">


<!-- - - - - - - - - - - - - - - - -
 	 		INFO BAR
- - - - - - - - - - - - - - - - - -->

	<section class="info-bar">
		<h4 class="">
<h4 class="info-bar-full">
				<!--STICK-->
				<span class="post-action-icon">
					<div class="overlay-container bottom small"><div class="overlay">
					<p> stick </p>
					</div></div>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve" class="i-action-stick">
						<path fill="#8097A4" d="M18.883,0.015c0.846,1.095,1.185,7.422,1.185,7.422l13.492,13.615c1.76-0.494,10.408-1.687,12.014-0.676 l-9.813,9.781c0,0,12.051,12.022,12.562,12.522c1.271,1.251,1.609,7.335,1.609,7.335s-5.938-0.504-7.192-1.771 c-0.503-0.508-12.564-12.52-12.564-12.52l-9.814,9.781c-1.017-1.603-0.496-9.543,0.001-11.298L7.377,20.085 c0,0-6.346-0.337-7.446-1.182L18.883,0.015z"/>
					</svg>
				</span>
				<!--SAVE-->
				<span class="post-action-icon">
					<div class="overlay-container bottom small"><div class="overlay">
					<p> hide </p>
					</div></div>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"  class="i-action-hide">
						<path fill="#8097A4" d="M24.999,0C11.192,0,0,11.193,0,25c0,13.807,11.192,25,24.999,25S50,38.807,50,25 C50,11.193,38.806,0,24.999,0z M8.265,25c0-2.711,0.649-5.27,1.794-7.535L32.534,39.94c-2.265,1.145-4.823,1.793-7.535,1.793 C15.758,41.733,8.265,34.241,8.265,25z M39.653,33.08L16.919,10.346c2.396-1.325,5.15-2.081,8.08-2.081 c9.242,0,16.734,7.493,16.734,16.734C41.733,27.931,40.978,30.685,39.653,33.08z"/>
					</svg>
				</span>
				<span class="post-action-icon">
					<div class="overlay-container bottom small"><div class="overlay">
					<p> save </p>
					</div></div>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"  class="i-action-save">
						<path fill="#8097A4" d="M49.978,19.4c-0.196-1.347-1.741-1.65-3.181-1.861 c-4.644-0.681-8.854-1.297-13.239-1.86c-1.798-3.448-3.784-7.641-5.644-11.574c-0.579-1.225-1.387-3.017-2.668-3.1 c-1.905-0.123-2.385,1.819-3.079,3.307c-1.817,3.902-4.104,8.338-5.747,11.367c-3.037,0.405-5.742,0.771-9.031,1.24 C5.167,17.237-0.032,17.237,0,19.812c0.016,1.282,1.716,2.518,2.565,3.307c3.196,2.97,5.962,5.871,8.826,8.783 c-0.703,3.471-1.294,7.822-1.95,11.574c-0.402,2.3-1.295,4.977,0.923,5.477c1.223,0.275,2.776-0.908,3.797-1.446 c3.818-2.015,7.244-3.869,10.878-5.684c3.584,1.84,7.102,3.644,10.775,5.58c1.108,0.583,2.61,1.855,4.003,1.55 c2.042-0.45,1.265-3.256,0.924-5.27c-0.675-3.984-1.458-8.334-2.053-11.884c3.003-2.851,5.788-5.878,8.928-8.784 C48.58,22.125,50.21,20.991,49.978,19.4z"/>
					</svg>
				</span>
				<!--FOLLOW-->
				<span class="post-action-icon">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve" class="i-action-follow">
						<path fill="#8097A4" d="M37.979,37.73l-6.183-4.841l0.047-10.697l-0.029-3.628c-0.049-1.058-0.327-2.094-0.601-2.855 c-0.506-1.404-2.236-3.606-4.753-4.062c-3.355-0.607-5.91,1.858-6.813,4.17l5.615-1.584l0.104,0.388l-9.837,2.866l-5.068,10.336 l3.79,2.325l4.177-8.045l5.797-1.66l0.113,0.387l-4.882,1.426l-0.321,10.396l-6.908,13.711l5.719,3.605l6.948-13.699l7.076,5.688 L33.078,50l6.461-1.22L37.979,37.73z"/>
						<path fill="#8097A4" d="M32.24,22.014l1.202,0.987l6.014-4.866l-2.694-4.181l-4.068,3.298c-0.038,0.03-0.082,0.045-0.127,0.045 c-0.047,0-0.092-0.016-0.129-0.048l-0.399-0.309c0.178,0.679,0.216,1.571,0.216,2.271L32.24,22.014z"/>
						<circle fill="#8097A4" cx="27.414" cy="5.155" r="5.156"/>
					</svg>
					<div class="overlay-container bottom small feed-follow"><div class="overlay">
						<p>unfollow...
							<br/>
							<a href="#">BLOB_CASTLE</a>
						</p>
						<p>
							follow...
							<br />
							<a href="#">#design</a>
							<a href="#">#userexperience</a>
							<a href="#">fastcodesign.com </a>
						</p>
					</div></div>
				</span>
				<!--ADD TAG-->
				<span class="post-action-icon">
					<span>+</span>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="i-action-tag">
						<path fill="#8097A4" d="M144.82,129.018h-7.912l0.828-8.634h6.683c2.584,0,4.68-1.769,4.68-3.868v-0.063c0-2.099-2.096-3.7-4.68-3.7 h-5.95l0.824-8.598c0-2.585-1.829-4.655-4.087-4.655h-0.067c-2.257,0-4.086,2.07-4.086,4.655l-0.825,8.598h-9.008l0.787-8.196 c0-2.584-1.83-4.655-4.086-4.655h-0.068c-2.257,0-4.086,2.07-4.086,4.655l-0.787,8.196h-8.799c-2.584,0-4.68,1.601-4.68,3.7v0.063 c0,2.099,2.095,3.868,4.68,3.868h8.067l-0.829,8.634h-6.837c-2.584,0-4.68,1.568-4.68,3.667v0.063c0,2.099,2.096,3.9,4.68,3.9h6.106 l-0.779,8.121c0,2.585,1.83,4.73,4.086,4.73h0.068c2.257,0,4.086-2.146,4.086-4.73l0.779-8.121h9.008l-0.74,7.72 c0,2.584,1.829,4.73,4.087,4.73h0.067c2.257,0,4.086-2.146,4.086-4.73l0.741-7.72h8.644c2.585,0,4.68-1.802,4.68-3.9v-0.063 C149.5,130.586,147.405,129.018,144.82,129.018z M119.66,129.018l0.829-8.634h9.008l-0.828,8.634H119.66z"/>
					</svg>
					<div class="overlay-container bottom small"><div class="overlay">
						<p> add&nbsp;tag </p> 		<!---spaces as &nbsp; to prevent line breaks -->
					</div></div>
				</span>
				<!--CHANGE TAG-->
				<span class="post-action-icon">
					<span id="delta">&Delta;</span>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="i-action-tag">
						<path fill="#8097A4" d="M144.82,129.018h-7.912l0.828-8.634h6.683c2.584,0,4.68-1.769,4.68-3.868v-0.063c0-2.099-2.096-3.7-4.68-3.7 h-5.95l0.824-8.598c0-2.585-1.829-4.655-4.087-4.655h-0.067c-2.257,0-4.086,2.07-4.086,4.655l-0.825,8.598h-9.008l0.787-8.196 c0-2.584-1.83-4.655-4.086-4.655h-0.068c-2.257,0-4.086,2.07-4.086,4.655l-0.787,8.196h-8.799c-2.584,0-4.68,1.601-4.68,3.7v0.063 c0,2.099,2.095,3.868,4.68,3.868h8.067l-0.829,8.634h-6.837c-2.584,0-4.68,1.568-4.68,3.667v0.063c0,2.099,2.096,3.9,4.68,3.9h6.106 l-0.779,8.121c0,2.585,1.83,4.73,4.086,4.73h0.068c2.257,0,4.086-2.146,4.086-4.73l0.779-8.121h9.008l-0.74,7.72 c0,2.584,1.829,4.73,4.087,4.73h0.067c2.257,0,4.086-2.146,4.086-4.73l0.741-7.72h8.644c2.585,0,4.68-1.802,4.68-3.9v-0.063 C149.5,130.586,147.405,129.018,144.82,129.018z M119.66,129.018l0.829-8.634h9.008l-0.828,8.634H119.66z"/>
					</svg>
					<div class="overlay-container bottom small"><div class="overlay">
						<p> add&nbsp;tag </p> 		<!---spaces as &nbsp; to prevent line breaks -->
					</div></div>
				</span>


				<!--ADD BADGE-->
				<span class="post-action-icon">
					<span>+</span>
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="i-action-badge">
					<path fill="#8097A4" d="M125,99.777c-13.807,0-25,11.193-25,25s11.193,25,25,25c13.808,0,25-11.192,25-25S138.808,99.777,125,99.777
						z M137.667,108.931c1.78,0,3.225,1.443,3.225,3.224s-1.444,3.225-3.225,3.225s-3.225-1.443-3.225-3.225
						C134.442,110.374,135.887,108.931,137.667,108.931z M125.016,103.587c1.78,0,3.224,1.443,3.224,3.224s-1.443,3.225-3.224,3.225
						c-1.781,0-3.225-1.444-3.225-3.225S123.234,103.587,125.016,103.587z M106.99,128.031c-1.781,0-3.225-1.443-3.225-3.225
						c0-1.781,1.444-3.224,3.225-3.224s3.225,1.443,3.225,3.224C110.214,126.588,108.771,128.031,106.99,128.031z M112.333,140.714
						c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.225,3.225-3.225c1.781,0,3.224,1.444,3.224,3.225S114.114,140.714,112.333,140.714z
						 M112.333,115.379c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.781,0,3.224,1.443,3.224,3.224
						S114.114,115.379,112.333,115.379z M125.016,146.057c-1.781,0-3.225-1.443-3.225-3.225c0-1.78,1.443-3.224,3.225-3.224
						c1.78,0,3.224,1.443,3.224,3.224C128.239,144.613,126.796,146.057,125.016,146.057z M125,134.02c-5.088,0-9.212-4.125-9.212-9.213
						s4.125-9.212,9.212-9.212s9.213,4.125,9.213,9.212S130.088,134.02,125,134.02z M137.667,140.714c-1.78,0-3.225-1.444-3.225-3.225
						s1.444-3.225,3.225-3.225s3.225,1.444,3.225,3.225S139.447,140.714,137.667,140.714z M143.011,128.001
						c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.78,0,3.224,1.443,3.224,3.224S144.791,128.001,143.011,128.001z"/>
					</svg>
					<div class="overlay-container bottom small"><div class="overlay">
							<p> badge&nbsp;post </p> 		<!---spaces as &nbsp; to prevent line breaks -->
					</div></div>
				</span>
			</h4>
		</div
		</h4>
	</section>


<!-- - - - - - - - - - - - - - - - -
 	  POST CONTAINER
- - - - - - - - - - - - - - - - - -->

	<section class="post-item">
<!--- VOTE HUBWHEEL -->
		<a href="#">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-big">
				<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/>
				<circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/>
				<circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/>
				<circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/>
				<circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/>
				<circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/>
				<circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/>
				<circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/>
				<circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
			</svg>
		</a><!-- remove whitespace between inlines

	 --><div class="post-title-container">

<!--- POST TITLE -->
			<h1 class="post-title"><a href="#">Hubski, I learned how to drive a stick shift today. What are your fond memories of learning new skills? Hubski, I learned how to drive a stick shift today. What are your fond memories of learning new skills?</a></h1>

<!--- POST LINE 1: by user + time + shared by -->
			<h4 class="post-line1">
				by <a href="#" class="you">BLOB_CASTLE</a>
				· 10 hours ago · 
				shared by <a href="#" class="yf">camarillobrillo</a><a href="#">+1</a>

<!--- BADGE -->
				<a href="#" class="badge">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="100 100 50 50" enable-background="new 100 100 50 50" xml:space="preserve" class="i-badge">
					<path fill="#8097A4" d="M125,99.777c-13.807,0-25,11.193-25,25s11.193,25,25,25c13.808,0,25-11.192,25-25S138.808,99.777,125,99.777
						z M137.667,108.931c1.78,0,3.225,1.443,3.225,3.224s-1.444,3.225-3.225,3.225s-3.225-1.443-3.225-3.225
						C134.442,110.374,135.887,108.931,137.667,108.931z M125.016,103.587c1.78,0,3.224,1.443,3.224,3.224s-1.443,3.225-3.224,3.225
						c-1.781,0-3.225-1.444-3.225-3.225S123.234,103.587,125.016,103.587z M106.99,128.031c-1.781,0-3.225-1.443-3.225-3.225
						c0-1.781,1.444-3.224,3.225-3.224s3.225,1.443,3.225,3.224C110.214,126.588,108.771,128.031,106.99,128.031z M112.333,140.714
						c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.225,3.225-3.225c1.781,0,3.224,1.444,3.224,3.225S114.114,140.714,112.333,140.714z
						 M112.333,115.379c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.781,0,3.224,1.443,3.224,3.224
						S114.114,115.379,112.333,115.379z M125.016,146.057c-1.781,0-3.225-1.443-3.225-3.225c0-1.78,1.443-3.224,3.225-3.224
						c1.78,0,3.224,1.443,3.224,3.224C128.239,144.613,126.796,146.057,125.016,146.057z M125,134.02c-5.088,0-9.212-4.125-9.212-9.213
						s4.125-9.212,9.212-9.212s9.213,4.125,9.213,9.212S130.088,134.02,125,134.02z M137.667,140.714c-1.78,0-3.225-1.444-3.225-3.225
						s1.444-3.225,3.225-3.225s3.225,1.444,3.225,3.225S139.447,140.714,137.667,140.714z M143.011,128.001
						c-1.781,0-3.225-1.444-3.225-3.225s1.443-3.224,3.225-3.224c1.78,0,3.224,1.443,3.224,3.224S144.791,128.001,143.011,128.001z"/>
					</svg>
					<span>x 2</span>
				</a>

<!--- POST LINE 2: domain + tag + tag -->
			</h4><!-- remove whitespace between inlines
		 --><h4>
				<a href="#">fastcodesign.com</a>
				 · 
				<a href="#">#design</a>
				 · 
				<a href="#">#userexperience</a>
			</h4>
			</div>

<!--- POST TEXT -->
			<div class="post-text markup-enabled">
				<p>This blog is dedicated to <a href="#">humanodon</a>. We were having a <strong>strong tag</strong>chat in Boston <i>italics tag</i>about a major turn-around in his ESL classrooms.</p>
				<h1> This is an h1 tag</h1>
				<p>This blog is dedicated to <a href="#">humanodon</a>.  <span class="strikethru">this is struck thru</span> We were having a chat <b>bolded b tag</b>in Boston about a major turn-around in his ESL classrooms.</p>
				<h2> This is an h2 tag</h2>
				<p>This blog is dedicated to <a href="#">humanodon</a>. We were having a <em>emphasized</em>chat in Boston about a <span class="underline">this is underlined.</span></p>
				<h3> This is an h3 tag</h3>
				<p>This blog is dedicated to <a href="#">humanodon</a>. We were <span class="redacted">having a chat in Boston about a major</span> turn-around in his ESL classrooms.</p>
				<h4> This is an h4 tag</h4>
				<ol>
					<li>Ordered list item</li>
					<li>Ordered list item</li>
					<li>Ordered list item</li>
				</ol>
				<p>This blog is dedicated to <a href="#">humanodon</a>. We were having a chat in Boston about a major turn-around in his ESL classrooms. This blog is dedicated to <a href="#">humanodon</a>. We were having a chat in Boston about a major turn-around in his ESL classrooms.</p>
				<ul>
					<li>Unordered list item</li>
					<li>Unordered list item</li>
					<li>Unordered list item</li>
				</ul>
				<blockquote>This blog is dedicated to <a href="#">humanodon</a>. We were having a chat <b>bolded b tag</b>in Boston about a major turn-around in his ESL classrooms Boston about a major a major turn-around in his ESL classrooms Boston about a major turn-around in his ESL classrooms in his ESL classrooms Boston about a major turn-around in his ESL classrooms.</blockquote>
				<code>This blog is dedicated to <a href="#">humanodon</a>. We were having a chat <b>bolded b tag</b>in Boston about a major turn-around in his ESL classrooms Boston about a major turn-around Boston about a major turn-around in his ESL classrooms Boston about a major turn-around in his ESL classrooms in his ESL classrooms Boston about a major turn-around in his ESL classrooms.</code>

		<!--- VIDEO -->
				<div class="video-post">
					<div class="video-container">
						<iframe alt="https://www.youtube.com/watch?v=QNX_5e8lw3U#t=67?rel=0&showinfo=0&autohide=1" src="https://www.youtube.com/embed/QNX_5e8lw3U#t=67" frameborder="0" allowfullscreen=""></iframe>
					</div>
				</div>

		<!--- IMAGE -->
				<div class="image-post">
					<img src="http://placehold.it/500x500.png" />
				</div>
			</div>

<!--- POST REPLY AREA -->
			<div class="post-reply-area">
				<h4>
					mirrored on:
					<a href="#">lilblume.blogspot.com</a>
					<br />
					share:
					<a href="#">twitter</a> ·
					<a href="email?id=186350">email</a> ·
					<a href="#">html</a> ·
					<a href="#">print</a>

					<a href="#" class="post-markup">markup</a>
				</h4>
		<!--- TEXTAREA -->
				<textarea rows="5" cols="70"></textarea>
			</div>
		<!--- BUTTONS -->
			<section class="post-btn-container">

				<!-- IF MUTED -->
					<p class="muted"><br />sorry. you cannot comment because you are muted here.</p>

				<!-- IF NOT MUTED -->
				<div class="btn one">comment</div>
				<div class="btn two">save draft</div>
			</section>
	</section>





<!--- - - - - - - - - - - - - - - -
 	 	COMMENTS CONTAINER
- - - - - - - - - - - - - - - - -->

	<section class="comment-container">

	<!---comment block-->
		<section class="comment-block">
			<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/>
			</svg>
		<!---comment item-->
			<section class="comment-item">
				<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
					<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
				</svg></a>
				<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
				<div class="comment-content markup-enabled">
					<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
					<p>We are still friends to this day, and he is still an asshole.</p>
				</div>

					<a href="#">reply</a>
					<p class="muted">sorry. you cannot comment because you are muted here.</p>
				</div>
			</section>
		<!--end comment item-->

		<!---comment block-->
			<section class="comment-block">
				<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
				<!---comment item-->
					<section class="comment-item">
						<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
							<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
						</svg></a>
						<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
						<div class="comment-content markup-enabled">
							<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
							<p>We are still friends to this day, and he is still an asshole.</p>
						</div>

							<a href="#" class="reply">reply</a>

					</section>
				<!--end comment item-->

				<!---comment block-->
					<section class="comment-block">
						<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
					<!---comment item-->
						<section class="comment-item">
							<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
								<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
							</svg></a>
							<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
							<div class="comment-content markup-enabled">
								<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
								<p>We are still friends to this day, and he is still an asshole.</p>
							</div>

								<a href="#" class="reply">reply</a>

						</section>
					<!--end comment item-->

					<!---comment block-->
						<section class="comment-block">
							<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
						<!---comment item-->
							<section class="comment-item">
								<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
									<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
								</svg>
								<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
								<div class="comment-content markup-enabled">
									<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
									<p>We are still friends to this day, and he is still an asshole.</p>
								</div>

									<a href="#" class="reply">reply</a>

							</section>
						<!--end comment item-->

						<!---comment block-->
							<section class="comment-block">
								<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz" fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
							<!---comment item-->
								<section class="comment-item">
									<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
										<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
									</svg></a>
									<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
									<div class="comment-content markup-enabled">
									<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
									<p>We are still friends to this day, and he is still an asshole.</p>
									</div>

										<a href="#" class="reply">reply</a>

							</section>
						<!--end comment item-->

						</section>
					<!--end comment block-->

					</section>
				<!--end comment block-->

				</section>
			<!--end comment block-->

			</section>
		<!--end comment block-->

		<!---comment block-->
			<section class="comment-block">
				<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
				<!---comment item-->
					<section class="comment-item">
						<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
							<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
						</svg></a>
						<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
						<div class="comment-content markup-enabled">
							<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
							<p>We are still friends to this day, and he is still an asshole.</p>
						</div>

							<a href="#" class="reply">reply</a>

					</section>
				<!--end comment item-->
			</section>
		<!--end comment block-->

		</section>
	<!--end comment block-->

	<!---comment block-->
		<section class="comment-block">
			<svg onclick="showHide(this)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve" class="show-hide"> <rect fill="#808080" width="14" height="14"/> <path id="vert" fill="#FFFFFF" d="M8,10.2C8,10.642,7.552,11,7,11l0,0c-0.552,0-1-0.358-1-0.8V3.8C6,3.358,6.448,3,7,3l0,0 c0.552,0,1,0.358,1,0.8V10.2z"/> <path id="horz"fill="#FFFFFF" d="M3.8,8C3.358,8,3,7.552,3,7l0,0c0-0.552,0.358-1,0.8-1h6.4C10.642,6,11,6.448,11,7l0,0 c0,0.552-0.358,1-0.8,1H3.8z"/></svg>
			<!---comment item-->
				<section class="comment-item">
					<a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50" height="50" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve" class="circledots-sm">
						<circle id="hubwheel-center" fill="#8097A4" cx="300" cy="299.784" r="130.152"/><circle id="hubwheel-1" fill="#8097A4" cx="478.959" cy="121.042" r="45.553"/><circle id="hubwheel-2" fill="#8097A4" cx="554.446" cy="299.349" r="45.553"/><circle id="hubwheel-3" fill="#8097A4" cx="478.959" cy="478.959" r="45.553"/><circle id="hubwheel-4" fill="#8097A4" cx="300.217" cy="554.447" r="45.553"/><circle id="hubwheel-5" fill="#8097A4" cx="121.041" cy="478.959" r="45.553"/><circle id="hubwheel-6" fill="#8097A4" cx="45.553" cy="299.784" r="45.553"/><circle id="hubwheel-7" fill="#8097A4" cx="121.041" cy="121.041" r="45.553"/><circle id="hubwheel-8" fill="#8097A4" cx="300.217" cy="45.553" r="45.553"/>
					</svg></a>
					<h4 class="comment-info">by <a href="#">thenewgreen</a> 4 hours ago  ·  link  ·  save   ·  +!</h4>
					<div class="comment-content markup-enabled">
						<p>I remember as a kid a friend of mine took me aside at 5th grade camp, obviously distraught and asked me the question, "Steve, am I an asshole?" My response was "well, you can have a really bad attitude sometimes and well... yes, you can be a real asshole." I gave some specifics and I think he genuinely tried to be a nicer person.</p>
						<p>We are still friends to this day, and he is still an asshole.</p>
					</div>

						<a href="#" class="reply">reply</a>

				</section>
			<!--end comment item-->

		</section>
	<!--end comment block-->

	</section>
<!---end comment container-->

</section>



<!-- - - - - - - - - - - - - - - - -
 	 		FOOTER
- - - - - - - - - - - - - - - - - -->


<footer>
	<a href="#">about</a>
	<a href="#">tutorial</a>
	<a href="#">mobile</a>
	<a href="#">faq</a>
	<a href="#">rss</a>
	<a href="#">tmi</a>
	<a href="#">buttons & tools</a>
	<a href="#">arc</a>
	<a href="#">privacy & terms</a>
	<a href="#">swag</a>
	<a href="#">apply for dvh</a>
	<a href="#">logout</a>
</footer>

</body>

</html>

            
          
!
            
              *,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
a:hover {
  transition: all 0.1s ease-in-out;
  text-decoration: underline;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: middle;
}
focus {
  outline: #333;
}
form,
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
textarea,
select,
option,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  outline: 0;
  text-align: left;
  font-size: 1em;
  vertical-align: middle;
  line-height: normal;
  margin: 0.5em 0;
  padding: 0.3em;
  background-color: #fff;
  color: #404040;
  border: 1px solid #797979;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
textarea {
  overflow: auto;
}
b,
strong {
  font-weight: bold;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table textarea {
  resize: vertical;
}
td,
th {
  padding: 0;
}
.x-large-only,
.tablet-only,
.tablet-down,
.tablet-sm-only,
.tablet-sm-down,
.phone-only-block,
.phone-only {
  display: none;
}
.logo #hubwheel-1 {
  fill: #f37901;
}
.logo #hubwheel-2 {
  fill: #10bdbb;
}
.logo.big svg {
  width: 100%;
  padding: 5%;
}
.logo.animated #hubwheel-1,
.logo.animated #hubwheel-2,
.logo.animated #hubwheel-3,
.logo.animated #hubwheel-4,
.logo.animated #hubwheel-5,
.logo.animated #hubwheel-6,
.logo.animated #hubwheel-7,
.logo.animated #hubwheel-8 {
  opacity: 0;
}
.logo.animated #hubwheel-1 {
  -webkit-animation: fadeIn 100ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-2 {
  -webkit-animation: fadeIn 100ms 100ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 100ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-3 {
  -webkit-animation: fadeIn 100ms 200ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 200ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-4 {
  -webkit-animation: fadeIn 100ms 300ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 300ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-5 {
  -webkit-animation: fadeIn 100ms 400ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 400ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-6 {
  -webkit-animation: fadeIn 100ms 500ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 500ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-7,
.logo.animated -webkit-animation fadeIn 100ms 600ms ease {
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 600ms ease;
  animation-fill-mode: forwards;
}
.logo.animated #hubwheel-8 {
  -webkit-animation: fadeIn 100ms 700ms ease;
  -webkit-animation-fill-mode: forwards;
  animation: fadeIn 100ms 700ms ease;
  animation-fill-mode: forwards;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.notif circle {
  fill: #8097a4;
}
.notif.read circle {
  fill: #10bdbb;
}
.notif.unread circle {
  fill: #f37901;
}
.badge,
.badge-comment {
  color: #797979;
  margin-left: 0.3em;
}
.badge svg,
.badge-comment svg {
  vertical-align: middle;
  width: 1em;
  height: 1em;
}
.badge path,
.badge-comment path {
  fill: #ebc400;
}
.badge span,
.badge-comment span {
  vertical-align: middle;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  font-style: normal;
  line-height: 130%;
}
.badge:hover,
.badge-comment:hover {
  text-decoration: none;
  color: #808080;
}
.badge:hover path,
.badge-comment:hover path {
  fill: #f3cb00;
}
.badge-yellow path {
  fill: #ebc400;
}
.badge-yellow:hover path {
  fill: #f9cf00;
}
.post-action-icon {
  vertical-align: middle;
  margin-left: 0.5em;
  color: #b3b3b3;
  position: relative;
  cursor: pointer;
}
.post-action-icon svg {
  vertical-align: middle;
  width: 1em;
  height: 1em;
}
.post-action-icon path {
  fill: #b3b3b3;
}
.post-action-icon span {
  vertical-align: middle;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  line-height: 130%;
}
.post-action-icon .overlay-container {
  display: none;
}
.post-action-icon:hover {
  text-decoration: none;
  color: #8c8c8c;
}
.post-action-icon:hover .overlay-container {
  display: initial;
}
.post-action-icon:hover path {
  fill: #8c8c8c;
}
.post-action-icon #delta {
  font-size: 1.3em;
  vertical-align: sub;
  font-weight: 400;
}
@media only screen and (max-width: 480px) {
  .post-action-icon {
    font-size: 1.2em;
    margin: 0 0.4em;
  }
}
.navwheel {
  vertical-align: middle;
  height: 1.6em;
  width: 1.6em;
  margin: 0 0.3em 0 0;
}
.navwheel circle {
  fill: #8097a4;
}
.circledots-big {
  width: 1.6em;
  height: 1.6em;
  top: 0em;
  left: 0em;
  position: absolute;
}
.circledots-big circle {
  fill: #8097a4;
}
.circledots-sm {
  width: 1.4em;
  height: 1.4em;
  position: absolute;
  left: 0em;
  top: 0em;
}
.circledots-sm circle {
  fill: $commwheel;
}
.comment-bubble {
  width: 1.7em;
  position: absolute;
  top: 1em;
  right: 0.5em;
  text-align: center;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
  color: #8097a4 !important;
}
.comment-bubble svg {
  width: 1.4em;
  height: 1.4em;
}
.comment-bubble path {
  fill: #8097a4;
}
.comment-bubble:hover,
.comment-bubble:hover path {
  color: #8da1ad;
  fill: #8da1ad;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
}
.nav-icon {
  height: 1.5em;
  width: 1.5em;
}
.nav-icon path {
  fill: #797979;
}
.nav-icon:hover path {
  fill: #8097a4;
  transition: all 0.1s ease-in-out;
}
.active .nav-icon path,
a:hover .nav-icon path {
  fill: #8097a4;
  transition: all 0.1s ease-in-out;
}
.h-zero #hubwheel-1,
.h-zero #hubwheel-2,
.h-zero #hubwheel-3,
.h-zero #hubwheel-4,
.h-zero #hubwheel-5,
.h-zero #hubwheel-6,
.h-zero #hubwheel-7,
.h-zero #hubwheel-8 {
  display: none;
}
.h-one #hubwheel-2,
.h-one #hubwheel-3,
.h-one #hubwheel-4,
.h-one #hubwheel-5,
.h-one #hubwheel-6,
.h-one #hubwheel-7,
.h-one #hubwheel-8 {
  display: none;
}
.h-two #hubwheel-3,
.h-two #hubwheel-4,
.h-two #hubwheel-5,
.h-two #hubwheel-6,
.h-two #hubwheel-7,
.h-two #hubwheel-8 {
  display: none;
}
.h-three #hubwheel-4,
.h-three #hubwheel-5,
.h-three #hubwheel-6,
.h-three #hubwheel-7,
.h-three #hubwheel-8 {
  display: none;
}
.h-four #hubwheel-5,
.h-four #hubwheel-6,
.h-four #hubwheel-7,
.h-four #hubwheel-8 {
  display: none;
}
.h-five #hubwheel-6,
.h-five #hubwheel-7,
.h-five #hubwheel-8 {
  display: none;
}
.h-six #hubwheel-7,
.h-six #hubwheel-8 {
  display: none;
}
.h-seven #hubwheel-8 {
  display: none;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main-container {
  width: 100%;
  padding: 0 4%;
  min-height: 90%;
}
@media only screen and (max-width: 1024px) {
  .main-container {
    padding: 0 2%;
  }
}
@media only screen and (max-width: 768px) {
  .main-container {
    padding: 0 1%;
  }
}
.main-container.tags {
  height: 100%;
}
.feed-item {
  width: 100%;
  padding: 0.5em 2.5em 0.5em 0.5em;
  position: relative;
  border-bottom: 1px solid #d9d9d9;
}
.feed-item .post-icons {
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.feed-item:hover .post-icons {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 480px) {
  .feed-item:hover .post-icons {
    display: none;
  }
}
.post-item {
  width: 100%;
  padding: 0.5em;
  position: relative;
}
.post-title-container {
  width: 100%;
  padding: 0 0 0 2em;
  position: relative;
}
.comment-container {
  width: 100%;
  padding: 0.5em;
  position: relative;
}
.small-container {
  width: 60%;
  padding: 2em 0;
  margin: auto;
}
@media only screen and (max-width: 1024px) {
  .small-container {
    width: 80%;
  }
}
@media only screen and (max-width: 480px) {
  .small-container {
    padding: 1em 0;
    width: 95%;
  }
}
.list-container {
  margin: 1em 0 0 -3px;
  display: inline-block;
  vertical-align: top;
  padding: 1em 0;
  width: 50%;
}
.list-container p {
  margin-bottom: 0;
  line-height: 150%;
}
.list-container.right {
  height: 100%;
  overflow: auto;
  padding: 1em 1% 1em 4%;
  border-left: 1px solid #d9d9d9;
}
table {
  width: 100%;
  margin-bottom: 1.2em;
  word-break: break-word;
}
table th {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
  text-align: left;
  padding-left: 0.1em;
  position: relative;
  border-bottom: 1px solid #797979;
}
table td {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  padding: 0.2em 0.1em;
}
table tr:first-child td {
  border-top: 0px;
}
table tfoot td {
  padding: 1em 0;
}
table .separator {
  height: 0.2em;
}
table .separator-lg {
  height: 0.5em;
}
@media only screen and (max-width: 768px) {
  table {
    max-width: 100%;
  }
}
.css-col-3 {
  height: auto;
  column-count: 3;
}
.css-col-4 {
  height: auto;
  column-count: 4;
}
.css-col-5 {
  column-count: 5;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .css-col-5 {
    column-count: 3;
  }
}
.col-3 {
  width: 33.333333333333336%;
  display: inline-block;
  vertical-align: top;
  padding: 0 2%;
  margin-left: -3px;
}
.col-3:first-child {
  padding: 0 2% 0 0;
}
.col-3:last-child {
  padding: 0 0 0 2%;
}
@media only screen and (max-width: 768px) {
  .col-3 {
    width: 100%;
    margin-left: 0px;
  }
  .col-3:first-child,
  .col-3:last-child {
    padding: 0 2%;
  }
}
.col-2 {
  width: 50%;
  padding: 0 2%;
  display: inline-block;
  vertical-align: top;
  margin-left: -3px;
}
@media only screen and (max-width: 768px) {
  .col-2 {
    width: 100%;
    margin-left: 0px;
  }
  .col-2:first-child,
  .col-2:last-child {
    padding: 0 2%;
  }
}
html,
body {
  word-wrap: break-word;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #404040;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  font-size: 14px;
}
a:hover {
  transition: all 0.2s ease-in-out;
  text-decoration: underline;
}
h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
}
h1 a:hover {
  text-decoration: none;
}
h2 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  letter-spacing: 0.01em;
  margin: 0.3em auto;
}
h2 a:hover {
  text-decoration: none;
}
h3 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
}
h4 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
  color: #404040;
  margin: 0 0 0.1em 0;
}
h4 a,
h4 a:link,
h4 a:visited {
  color: #797979;
}
p {
  font-size: 1em;
  margin-bottom: 1em;
}
.btn {
  border: 1px solid 1px solid $btn-clr-one;
  padding: 0.4em 1.4em 0.5em 1.4em;
  display: inline-block;
  cursor: pointer;
  margin: 0.5em 0.5em 0.5em 0;
  text-align: center;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
}
.btn.one {
  background-color: #fff;
  color: #f37901;
  border: 1px solid #f37901;
}
.btn.one:hover {
  background-color: #f37901;
  color: #fff;
  transition: all 0.1s ease-in-out;
}
.btn.two {
  background-color: #fff;
  color: #8097a4;
  border: 1px solid #8097a4;
}
.btn.two:hover {
  background-color: #8097a4;
  color: #fff;
  transition: all 0.1s ease-in-out;
}
.btn.three {
  background-color: #fff;
  color: #10bdbb;
  border: 1px solid #10bdbb;
}
.btn.three:hover {
  background-color: #10bdbb;
  color: #fff;
  transition: all 0.1s ease-in-out;
}
.btn.four {
  background-color: #fff;
  color: #404040;
  border: 1px solid #404040;
}
.btn.four:hover {
  background-color: #404040;
  color: #fff;
  transition: all 0.1s ease-in-out;
}
.btn.center {
  position: absolute;
  transform-style: preserve-3d;
  left: 50%;
  transform: translateX(-50%);
}
.btn.small {
  padding: 0.2em 1.4em;
}
@media only screen and (max-width: 768px) {
  .btn.small {
    padding: 0.4em 1.4em;
  }
}
.yf,
a.yf {
  color: #1058a7 !important;
}
.yf:hover,
a.yf:hover {
  color: #1368c5 !important;
}
.fy,
a.fy {
  color: #239b32 !important;
}
.fy:hover,
a.fy:hover {
  color: #29b53a !important;
}
.ff,
a.ff {
  color: #10bdbb !important;
}
.ff:hover,
a.ff:hover {
  color: #12d9d7 !important;
}
.you,
a.you {
  color: #f37901 !important;
}
.you:hover,
a.you:hover {
  color: #fe8611 !important;
}
.center {
  text-align: center;
}
.active {
  text-decoration: underline;
}
.clr-sec {
  color: #797979;
}
.full-width {
  width: 100%;
}
.half-width {
  width: 50%;
}
.third-width {
  width: 33%;
}
.quarter-width {
  width: 25%;
}
.markup-enabled h1,
.markup-enabled h2,
.markup-enabled h3,
.markup-enabled h4,
.markup-enabled p,
.markup-enabled strong,
.markup-enabled b,
.markup-enabled em,
.markup-enabled i,
.markup-enabled cite,
.markup-enabled code,
.markup-enabled ul,
.markup-enabled ol,
.markup-enabled .redacted,
.markup-enabled span,
.markup-enabled blockquote,
.markup-enabled .underline {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
  margin: 0 0 0.8em 0;
  padding: 0;
  color: #404040;
}
.markup-enabled h1,
.markup-enabled h2,
.markup-enabled h3,
.markup-enabled h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  margin: 0 0 0.4em 0;
}
.markup-enabled p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
}
.markup-enabled a {
  color: #5c8499;
}
.markup-enabled a:hover {
  color: #6a91a5;
}
.markup-enabled .underline {
  text-decoration: underline;
}
.markup-enabled .stike-through,
.markup-enabled .strikethru {
  text-decoration: line-through;
}
.markup-enabled strong,
.markup-enabled b {
  font-weight: bold;
}
.markup-enabled em,
.markup-enabled i,
.markup-enabled cite {
  font-style: italic;
}
.markup-enabled code {
  font-family: monospace, monospace;
  padding: 0 3em;
  line-height: 170%;
  display: block;
}
.markup-enabled code p,
.markup-enabled code h1,
.markup-enabled code h2,
.markup-enabled code h3,
.markup-enabled code h4 {
  font-family: monospace, monospace;
  line-height: 170%;
}
.markup-enabled ul {
  padding: 0 3em;
  list-style-type: disc;
}
.markup-enabled ol {
  padding: 0 3em;
  list-style-type: decimal;
}
.markup-enabled li {
  margin-bottom: 0.5em;
}
.markup-enabled .redacted {
  color: #404040;
  background-color: #404040;
}
.markup-enabled blockquote {
  margin: 0 0 1em 2em;
  padding: 0 1em;
  border-left: 0.2em solid #8c8c8c;
  color: #666;
  line-height: 160%;
}
.markup-enabled blockquote p,
.markup-enabled blockquote h1,
.markup-enabled blockquote h2,
.markup-enabled blockquote h3,
.markup-enabled blockquote h4 {
  color: #666;
  line-height: 160%;
}
.image-post img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60%;
  margin-bottom: 1em;
}
@media only screen and (max-width: 480px) {
  .image-post img {
    max-width: 100%;
    max-height: 100%;
  }
}
.image-comment img {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 25%;
  margin-bottom: 1em;
}
@media only screen and (max-width: 480px) {
  .image-comment img {
    max-width: 100%;
    max-height: 100%;
  }
}
.video-post {
  width: auto;
  height: auto;
  max-width: 50%;
  margin-bottom: 1em;
}
@media only screen and (max-width: 480px) {
  .video-post {
    max-width: 100%;
  }
}
.video-comment {
  width: auto;
  height: auto;
  max-width: 40%;
  margin-bottom: 1em;
}
@media only screen and (max-width: 480px) {
  .video-comment {
    max-width: 100%;
  }
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  color: #404040;
  background-color: #fff;
  border-bottom: 1px solid #b3b3b3;
  padding: 0 2%;
  *zoom: 1;
}
header:before,
header:after {
  content: '';
  display: table;
}
header:after {
  clear: both;
}
header * {
  vertical-align: middle;
  display: inline-block;
}
header .logo {
  height: 2.2em;
  width: 2.2em;
  margin-right: 0.3em;
}
header .header-left {
  float: left;
  margin: 0.1em 0;
}
header .header-left a {
  padding: 0.5em 0.1em;
}
header .header-left .notif {
  height: 1.5em;
  width: 1.5em;
}
@media only screen and (max-width: 768px) {
  header .header-left {
    text-align: center;
    float: none;
    width: 100%;
  }
}
header .username {
  margin: 0 0.3em;
}
header .header-right {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  letter-spacing: 0.01em;
  text-align: right;
  color: #797979;
  float: right;
}
header .header-right .overlay-container {
  display: none;
}
header .header-right .nav-icon-a {
  text-align: center;
  min-width: 4em;
  padding: 0.5em;
  position: relative;
  cursor: pointer;
}
header .header-right .nav-icon-a span {
  display: block;
  line-height: 100%;
  margin-top: 0.6em;
}
header .header-right .nav-icon-a:hover {
  color: #8097a4;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
}
header .header-right .nav-icon-a:hover .overlay-container {
  display: block;
}
header .header-right .active {
  color: #8097a4;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
}
@media only screen and (max-width: 950px) {
  header .header-right .nav-icon-a:nth-child(n+7) {
    display: none;
  }
  header .header-right .overlay-container.more span li:nth-child(n+3) {
    display: block;
  }
  header .header-right .nav-icon-a:nth-last-child(-n+3) {
    display: inline-block;
  }
  header .header-right .overlay-container.more span li:nth-last-child(-n+2) {
    display: none;
  }
  header .header-right .nav-icon-a:last-child {
    display: inline-block;
  }
  header .header-right .nav-icon-a {
    padding: 0.5em 0.3em;
  }
}
@media only screen and (max-width: 874px) {
  header .header-right .nav-icon-a:nth-child(n+5) {
    display: none;
  }
  header .header-right .overlay-container.more span li:nth-child(n+1) {
    display: block;
  }
  header .header-right .nav-icon-a:nth-last-child(-n+3) {
    display: inline-block;
  }
  header .header-right .overlay-container.more span li:nth-last-child(-n+2) {
    display: none;
  }
  header .header-right .nav-icon-a:last-child {
    display: inline-block;
  }
}
@media only screen and (max-width: 768px) {
  header .header-right {
    text-align: center;
    float: none;
    width: 100%;
  }
}
@media only screen and (max-width: 480px) {
  header .header-right .nav-icon-a:nth-child(n+5) {
    display: none;
  }
  header .header-right .overlay-container.more span li:nth-child(n+1) {
    display: block;
  }
  header .header-right .nav-icon-a:last-child {
    display: inline-block;
  }
}
.info-bar {
  border-bottom: 1px solid #d9d9d9;
  *zoom: 1;
}
.info-bar:before,
.info-bar:after {
  content: '';
  display: table;
}
.info-bar:after {
  clear: both;
}
.info-bar.important {
  text-align: center;
  background-color: #5c8499;
  color: #fff;
}
.info-bar.important a {
  text-decoration: underline;
}
.info-bar.normal {
  color: #333;
  background-color: #fff;
  vertical-align: middle;
}
.info-bar-left {
  text-align: left;
}
.info-bar-right {
  text-align: right;
}
.info-bar-full {
  width: 100%;
  margin: 0.5em 0;
  text-align: right;
}
@media only screen and (max-width: 480px) {
  .info-bar-full {
    text-align: center;
  }
}
.info-bar-left,
.info-bar-right {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  margin: 0.5em 0;
}
@media only screen and (max-width: 480px) {
  .info-bar-left,
  .info-bar-right {
    width: 100%;
    text-align: center;
  }
}
footer {
  padding: 0.5em 0;
  background-color: #fff;
  text-align: center;
  width: 100%;
  margin-top: 5em;
}
footer a {
  margin: 0 1%;
}
.settings-help {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  position: relative;
  background-color: #a0a0a0;
  color: #fff;
  border-radius: 5em;
  padding: 0 0.5em;
}
.settings-help .overlay-container {
  display: none;
}
.settings-help:hover {
  text-decoration: none;
}
.settings-help:hover .overlay-container {
  display: initial;
}
.overlay {
  background-color: #fff;
  color: #404040;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 0px 0.6em rgba(137,137,137,0.4);
}
.overlay ol,
.overlay ul {
  list-style: none;
  text-align: left;
  padding: 0.1em 0.7em;
  width: 100%;
}
.overlay li {
  border-bottom: 1px solid #b3b3b3;
  display: block;
  width: 100%;
}
.overlay li:last-child {
  border-bottom: 0px;
}
.overlay span li:last-child {
  border-bottom: 1px solid #b3b3b3;
}
.overlay li a {
  padding: 0.6em 1.2em 0.6em 0.7em;
}
.overlay p {
  padding: 0.5em;
  width: 100%;
  margin: 0;
}
.overlay a {
  width: 100%;
}
.overlay span,
.overlay svg {
  display: inline;
}
.overlay-container {
  padding: 1.7em;
  position: absolute;
  z-index: 10;
}
.overlay-container.fixed-width-13 {
  width: 13em;
}
.overlay-container.small {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
}
.overlay-container.large {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
}
.overlay-container.large p,
.overlay-container.large li {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
}
.overlay-container.top {
  bottom: 0.3em;
  left: -1.5em;
}
.overlay-container.top:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: 0.6em solid #fff;
  position: absolute;
  bottom: 1.3em;
  left: 1.8em;
}
.overlay-container.top:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-top: 0.6em solid #b3b3b3;
  position: absolute;
  bottom: 1.2em;
  left: 1.8em;
}
.overlay-container.bottom {
  top: 0.9em;
  right: -1.6em;
}
.overlay-container.bottom:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-bottom: 0.6em solid #fff;
  position: absolute;
  top: 1.3em;
  right: 2em;
}
.overlay-container.bottom:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-bottom: 0.6em solid #b3b3b3;
  position: absolute;
  top: 1.2em;
  right: 2em;
}
.overlay-container.feed-follow {
  line-height: 150%;
}
.overlay-container.feed-follow a {
  padding-left: 0.4em;
}
.overlay-container.more {
  top: 2.5em;
  right: -0.7em;
}
.overlay-container.more .overlay {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
  color: #797979;
  width: 11em;
}
.overlay-container.more .overlay path {
  fill: #797979;
}
.overlay-container.more .overlay span {
  margin: 0;
}
.overlay-container.more .overlay span li {
  display: none;
}
.overlay-container.more .overlay a:hover {
  text-decoration: none;
  color: #8097a4;
}
.overlay-container.more .overlay a:hover path {
  fill: #8097a4;
  transition: all 0.1s ease-in-out;
}
.overlay-container.more .overlay-icon {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.7em;
}
.overlay-container.more:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-bottom: 0.6em solid #fff;
  position: absolute;
  top: 1.3em;
  right: 2em;
}
.overlay-container.more:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.6em solid transparent;
  border-right: 0.6em solid transparent;
  border-bottom: 0.6em solid #b3b3b3;
  position: absolute;
  top: 1.2em;
  right: 2em;
}
.popup-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0,0,0,0.5);
}
.popup {
  position: relative;
  width: 70%;
  max-height: 70%;
  margin: 8% auto;
  overflow: auto;
  background-color: #fff;
  color: #404040;
}
@media only screen and (max-width: 1024px) {
  .popup {
    width: 95%;
    max-height: 95%;
    margin: 1em auto;
  }
}
.popup .popup-title {
  padding: 1em 3% 0.5em 3%;
  border-bottom: 2px solid rgba(0,0,0,0.5);
}
.popup .popup-content {
  padding: 1em 3%;
}
.popup h3 {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  line-height: 110%;
}
.popup h3 a {
  color: #797979;
  margin: 0.2em;
}
.popup p {
  margin-bottom: 0;
  line-height: 150%;
}
.close {
  margin: 0 auto 1em auto;
  float: right;
}
@media only screen and (max-width: 480px) {
  .close {
    width: 100%;
    text-align: center;
    float: none;
  }
}
.live-preview {
  *zoom: 1;
  float: left;
  clear: none;
  text-align: inherit;
  width: 50%;
  margin-left: 0%;
  margin-right: 0%;
}
.live-preview:before,
.live-preview:after {
  content: '';
  display: table;
}
.live-preview:after {
  clear: both;
}
.submit-form {
  *zoom: 1;
  float: left;
  clear: none;
  text-align: inherit;
  width: 50%;
  margin-left: 0%;
  margin-right: 0%;
}
.submit-form:before,
.submit-form:after {
  content: '';
  display: table;
}
.submit-form:after {
  clear: both;
}
.main-container {
  width: 100%;
  padding: 0 4%;
  min-height: 90%;
}
@media only screen and (max-width: 1024px) {
  .main-container {
    padding: 0 2%;
  }
}
@media only screen and (max-width: 768px) {
  .main-container {
    padding: 0 1;
  }
}
.feed-item .circledots-big,
.post-item .circledots-big {
  top: 0.7em;
  left: 0.3em;
}
.post-line1 {
  margin-top: 0.2em;
}
.post-icons {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
}
.feed-item:last-child,
.post-item:last-child,
.comment-block-single:last-child {
  border-bottom: none;
}
.post-text,
.comment-text {
  margin: 1em 0 0 2em;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
}
@media only screen and (max-width: 480px) {
  .post-text,
  .comment-text {
    margin: 1em 0 0 0;
  }
}
.post-reply-area h4 {
  display: block;
  line-height: 145%;
}
.post-reply-area textarea {
  width: 100%;
  height: 7.5em;
  padding: 0.6em;
  display: block;
}
.post-markup {
  float: right;
}
.comment-block {
  position: relative;
  padding: 0.5em 0 0.1em 1.2em;
  border-left: 1px solid #d9d9d9;
  margin-left: -0.5em;
}
.comment-block .circledots-sm {
  left: 0.6em;
  top: 0.5em;
}
.comment-container > .comment-block {
  border-left: 2px solid #d9d9d9;
}
.show-hide {
  position: absolute;
  width: 9px;
  height: 13px;
  left: -5px;
  top: 11px;
  cursor: pointer;
}
.show-hide rect {
  fill: #d9d9d9;
}
.show-hide #vert {
  display: none;
}
.comment-hidden #vert {
  display: inherit;
}
.comment-hidden+.comment-item .comment-content,
.comment-hidden+.comment-item .btn-reply {
  display: none;
}
.comment-item {
  margin-bottom: 1em;
}
.comment-info {
  margin: 0 0 0.5em 1.5em;
}
.muted {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
  color: #797979;
  margin-left: 1.5em;
}
.reply {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
  color: #5c8499;
  margin-left: 1.5em;
}
.toggle {
  margin-right: 0.5em;
}
.profile-header {
  margin: 1em 0;
  *zoom: 1;
}
.profile-header:before,
.profile-header:after {
  content: '';
  display: table;
}
.profile-header:after {
  clear: both;
}
.profile-header * {
  vertical-align: middle;
  display: inline-block;
  margin: 5px;
}
.profile-header h1 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
}
.profile-header svg {
  height: 1.7em;
  margin: 5px 0;
}
.profile-header .btn {
  float: right;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .profile-header .btn {
    float: none;
    margin-right: 0.5em;
    margin-left: 0.5em;
  }
}
.profile-header a:hover {
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  .profile-header {
    text-align: center;
  }
}
.settings-header {
  margin: 1em 0;
}
.settings-header h1 {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  font-style: normal;
  line-height: 130%;
}
table.stats {
  max-width: 20em;
}
table.stats td {
  padding: 0.2em 0.5em 0 0.2em;
}
table.alerts {
  text-align: center;
}
table.alerts td:first-child {
  text-align: left;
}
.table-show-hide {
  margin-right: 0.3em;
}
.table-shown #vert {
  display: none;
}
.table-hidden #vert {
  display: inherit;
}
.table-hidden tbody {
  display: none;
}
.comment-block-single {
  position: relative;
  padding: 0.8em 0.8em 0.8em 2.5em;
  border-bottom: 1px solid #d9d9d9;
}
.comment-block-single .comment-content {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  font-style: normal;
  line-height: 130%;
}

.comment-content {
  margin-left: 1.5em;
}

.comment-block-single .circledots-big {
  top: 0.7em;
  left: 0.3em;
}
.comment-block-single .comment-content p {
  margin-bottom: 0.2em;
}
.prof-post td {
  border-left: 1px solid #f37901;
}
.prof-post .feed-item {
  border-bottom: 1px solid #f37901;
}
.prof-share td {
  border-left: 1px solid #10bdbb;
}
.prof-share .feed-item {
  border-bottom: 1px solid #10bdbb;
}
.form-table table {
  width: 100%;
}
.form-table td {
  padding: 0 0.5em;
}
select,
option,
textarea,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  width: 100%;
}
select.width-50,
option.width-50,
textarea.width-50,
input[type="date"].width-50,
input[type="datetime"].width-50,
input[type="datetime-local"].width-50,
input[type="email"].width-50,
input[type="month"].width-50,
input[type="number"].width-50,
input[type="password"].width-50,
input[type="search"].width-50,
input[type="tel"].width-50,
input[type="text"].width-50,
input[type="time"].width-50,
input[type="url"].width-50,
input[type="week"].width-50 {
  width: 50%;
}
@media only screen and (max-width: 480px) {
  select.width-50,
  option.width-50,
  textarea.width-50,
  input[type="date"].width-50,
  input[type="datetime"].width-50,
  input[type="datetime-local"].width-50,
  input[type="email"].width-50,
  input[type="month"].width-50,
  input[type="number"].width-50,
  input[type="password"].width-50,
  input[type="search"].width-50,
  input[type="tel"].width-50,
  input[type="text"].width-50,
  input[type="time"].width-50,
  input[type="url"].width-50,
  input[type="week"].width-50 {
    width: 100%;
  }
}
select.width-75,
option.width-75,
textarea.width-75,
input[type="date"].width-75,
input[type="datetime"].width-75,
input[type="datetime-local"].width-75,
input[type="email"].width-75,
input[type="month"].width-75,
input[type="number"].width-75,
input[type="password"].width-75,
input[type="search"].width-75,
input[type="tel"].width-75,
input[type="text"].width-75,
input[type="time"].width-75,
input[type="url"].width-75,
input[type="week"].width-75 {
  width: 75%;
}
@media only screen and (max-width: 480px) {
  select.width-75,
  option.width-75,
  textarea.width-75,
  input[type="date"].width-75,
  input[type="datetime"].width-75,
  input[type="datetime-local"].width-75,
  input[type="email"].width-75,
  input[type="month"].width-75,
  input[type="number"].width-75,
  input[type="password"].width-75,
  input[type="search"].width-75,
  input[type="tel"].width-75,
  input[type="text"].width-75,
  input[type="time"].width-75,
  input[type="url"].width-75,
  input[type="week"].width-75 {
    width: 100%;
  }
}
select.width-100,
option.width-100,
textarea.width-100,
input[type="date"].width-100,
input[type="datetime"].width-100,
input[type="datetime-local"].width-100,
input[type="email"].width-100,
input[type="month"].width-100,
input[type="number"].width-100,
input[type="password"].width-100,
input[type="search"].width-100,
input[type="tel"].width-100,
input[type="text"].width-100,
input[type="time"].width-100,
input[type="url"].width-100,
input[type="week"].width-100 {
  width: 100%;
}
.x-large-only,
.tablet-only,
.tablet-down,
.tablet-sm-only,
.tablet-sm-down,
.phone-only-block,
.phone-only {
  display: none;
}
@media only screen and (max-width: 1024px) {
  html,
  body {
    font-size: 15px;
  }
}
@media only screen and (max-width: 480px) {
  html,
  body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1400px) {
  html,
  body {
    font-size: 17px;
  }
}
@media only screen and (max-width: 1024px) {
  *:hover {
    transition: none;
  }
}
@media only screen and (max-width: 768px) {
  *:hover {
    transition: none;
  }
}
@media only screen and (max-width: 480px) {
  *:hover {
    transition: none;
  }
}
@media only screen and (min-width: 1400px) {
  .x-large-only,
  .tablet-up,
  .tablet-sm-up {
    display: inline-block;
  }
  .tablet-only,
  .tablet-down,
  .tablet-sm-only,
  .tablet-sm-down,
  .phone-only,
  .phone-only-block,
  .desk-only {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .tablet-only,
  .tablet-up,
  .tablet-sm-up,
  .tablet-down {
    display: inline-block;
  }
  .x-large-only,
  .tablet-sm-only,
  .tablet-sm-down,
  .phone-only,
  .phone-only-block,
  .desk-only {
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  .tablet-sm-only,
  .tablet-sm-up,
  .tablet-sm-down,
  .tablet-down {
    display: inline-block;
  }
  .x-large-only,
  .tablet-only,
  .tablet-up,
  .phone-only,
  .phone-only-block,
  .desk-only {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  .phone-only,
  .tablet-sm-down,
  .tablet-down {
    display: inline-block;
  }
  .phone-only-block {
    display: block;
  }
  .x-large-only,
  .tablet-up,
  .tablet-sm-only,
  .tablet-sm-up,
  .tablet-only,
  .desk-only {
    display: none;
  }
}

            
          
!
            
              
    function hasClass(el, cl) {
        return el.className && new RegExp('(\\s|^)' + cl + '(\\s|$)').test(el.className);
    }
    function addClass(el, cl) {
        if (!hasClass(el, cl)) { el.className += ' ' + cl; }
    }
    function removeClass(el, cl) {
        var reg = new RegExp('(\\s|^)' + cl + '(\\s|$)');
        el.className = el.className.replace(reg, ' ').replace(/(^\s*)|(\s*$)/g, '');
    }
    function toggleClass(el, cl) {
        if (hasClass(el, cl)) { removeClass(el, cl); } else { addClass(el, cl); }
    }

function hasSVGClass(el, cl) {
    return new RegExp('(\\s|^)' + cl + '(\\s|$)').test(el.getAttribute('class'));
}

function addSVGClass(el, cl) {
    !hasSVGClass(el, cl) && el.setAttribute('class', (!!el.getAttribute('class') ? el.getAttribute('class') + ' ' : '') + cl);
}

function removeSVGClass(el, cl) {
    var remove = el.getAttribute('class').replace(new RegExp('(\\s|^)' + cl + '(\\s|$)', 'g'), '$2');
    hasSVGClass(el, cl) && el.setAttribute('class', remove);
}

function toggleSVGClass(el, cl) {
    if (hasSVGClass(el, cl)) { removeSVGClass(el, cl); } else { addSVGClass(el, cl); }
}


var turnObjToArray = function(obj) {
  return [].map.call(obj, function(element) {
    return element;
  })
};

function showHide(el) {
    // all SVG elements in the parent of the button you just clicked
    var children = el.parentNode.getElementsByTagName('svg');

    if(!hasSVGClass(el, "comment-hidden")) {
        for (var i = 0; i < children.length; i++) {
            if(hasSVGClass(children[i],"show-hide")) {
                addSVGClass(children[i], 'comment-hidden')
            }
        }
    } else {
        for (var i = 0; i < children.length; i++) {
            if(hasSVGClass(children[i],"show-hide")) {
                removeSVGClass(children[i], 'comment-hidden')
            }
        }
    }
}

function showHideTable(el) {
    var parent = el.parentNode;
    toggleClass(parent, "table-shown");
    toggleClass(parent, "table-hidden");
}

// from feed.html
function toggleState(id) {
   var el = document.getElementById(id);
   if(el.style.display == 'block')
      el.style.display = 'none';
   else
      el.style.display = 'block';
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console