Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
		<nav class="c-drawer t-drawer" data-container="drawer">
			<ul class="c-drawer-nav t-drawer-nav">
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:exit-to-app" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Logout</span>
					</a>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Profile</span>
					</a>
				</li>
				<li class="c-drawer-divider t-drawer-divider"></li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link" data-toggle="drawer-menu">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:tune" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">User Panel</span>
					</a>
					<ul class="c-drawer-menu t-drawer-menu" data-container="drawer-menu">
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:gauge" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Forum Overview</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:format-list-checks" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Board Preferences</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:account-settings" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Profile Settings</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:account-multiple-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Groups</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:account-heart-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Friends &amp; Foes</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link" data-toggle="drawer-menu">
						<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
							<path fill-rule="evenodd" d="M12,1 L21,5 L21,11 C21,16.55 17.16,21.74 12,23 C6.84,21.74 3,16.55 3,11 L3,5 L12,1 Z M12,3.18 L5,6.3 L5,11.22 C5,15.54 8.25,20 12,21 C15.75,20 19,15.54 19,11.22 L19,6.3 L12,3.18 Z M12,5.5 L14,7.14707661 L13,13 L14.5,13 C14.7761424,13 15,13.2238576 15,13.5 L15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L13,15 L13,17.5 C13,17.7761424 12.7761424,18 12.5,18 L11.5,18 C11.2238576,18 11,17.7761424 11,17.5 L11,15 L9.5,15 C9.22385763,15 9,14.7761424 9,14.5 L9,13.5 C9,13.2238576 9.22385763,13 9.5,13 L11,13 L10,7.14707661 L12,5.5 Z" />
						</svg>
						<span class="c-drawer-link-text t-drawer-link-text">Moderation Panel</span>
					</a>
					<ul class="c-drawer-menu t-drawer-menu" data-container="drawer-menu">
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:chart-donut" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Queue</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:alert-circle-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Reports</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-ic o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="ic:outline-receipt" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Notes</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:alert-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Warnings</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:clipboard-text-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Logs</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:cancel" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Bans</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
							<path fill-rule="evenodd" d="M12,1 L21,5 L21,11 C21,16.55 17.16,21.74 12,23 C6.84,21.74 3,16.55 3,11 L3,5 L12,1 Z M12,3.18 L5,6.3 L5,11.22 C5,15.54 8.25,20 12,21 C15.75,20 19,15.54 19,11.22 L19,6.3 L12,3.18 Z M16,14 L16,15.5 L15.9932571,15.5869 C15.9576,15.8101 15.7829714,15.9629 15.5278857,15.9941 L15.4285714,16 L8.57142857,16 L8.47211429,15.9941 C8.21702857,15.9629 8.0424,15.8101 8.00674286,15.5869 L8,15.5 L8,14 L16,14 Z M17,8 L16,13 L8,13 L7,8 L7.013,8.01 L9.673,10.67 L12,8.343 L14.327,10.67 L16.987,8.01 L17,8 Z" />
						</svg>
						<span class="c-drawer-link-text t-drawer-link-text">Administrator Panel</span>
					</a>
				</li>
				<li class="c-drawer-divider t-drawer-divider"></li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link" data-toggle="drawer-menu">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:file-settings-outline" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Quick Links</span>
					</a>
					<ul class="c-drawer-menu t-drawer-menu" data-container="drawer-menu">
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
									<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zM12 11l-.934 2.066L9 14l2.066.934L12 17l.942-2.066L15 14l-2.058-.934L12 11z" />
								</svg>
								<span class="c-drawer-link-text t-drawer-link-text">Your Posts</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
									<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zM10 4h4v4h4v3h2v2h-2v3h2v2h-2l.001 2H15v2h-2v-2h-3v2H8v-2H6v-2H4v-2h2v-3H4v-2h2V8H4V6h2V4h2V2h2v2z" />
								</svg>
								<span class="c-drawer-link-text t-drawer-link-text">New Posts</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:file-document-outline" data-inline="false" aria-hidden="false"></span>
								<span class="c-drawer-link-text t-drawer-link-text">Unread Posts</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
									<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zM11 10v5h2v-5h-2zm1 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
								</svg>
								<span class="c-drawer-link-text t-drawer-link-text">Unanswered Topics</span>
							</a>
						</li>
						<li class="c-drawer-item t-drawer-item">
							<a class="c-drawer-link t-drawer-link">
								<svg class="o-icon c-drawer-link-icon t-drawer-link-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
									<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zm-4.695-4.811h2.944v-1.167h-2.223l-1.135-2.27-.931 2.793-1.635-4.25-1.397 3.727H7.75v1.167h1.988l.602-1.608L12.04 18l1.068-3.207.198.397z" />
								</svg>
								<span class="c-drawer-link-text t-drawer-link-text">Active Topics</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:help-outline" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Faqs</span>
					</a>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-ic o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="ic:outline-contacts" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Members</span>
					</a>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:account-group-outline" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">The Team</span>
					</a>
				</li>
				<li class="c-drawer-item t-drawer-item">
					<a class="c-drawer-link t-drawer-link">
						<span class="iconify o-icon o-icon-src-mdi o-icon c-drawer-link-icon t-drawer-link-icon" data-icon="mdi:email-outline" data-inline="false" aria-hidden="false"></span>
						<span class="c-drawer-link-text t-drawer-link-text">Contact Us</span>
					</a>
				</li>
			</ul>
		</nav>
		<div class="page" id="page-top" data-container="page">
			<header>
				<div class="c-hero-container t-hero-container">
					<div class="o-container c-hero t-hero">
						<svg viewBox="0 0 728 242" xmlns="http://www.w3.org/2000/svg" class="c-hero-logo t-hero-logo" aria-labelledby="site_title">
							<title id="site-title">phpBB</title>
							<path fill-rule="evenodd" d="M139.05,117.4938 C139.05,129.1958 137.603,139.9498 134.718,149.7578 C131.832,159.5708 127.634,168.0768 122.129,175.2728 C116.623,182.4748 109.764,188.0558 101.554,192.0128 C93.344,195.9698 83.915,197.9538 73.267,197.9538 C65.142,197.9538 57.877,195.9278 51.473,191.8788 C45.064,187.8288 40.057,182.6558 36.45,176.3528 L36.45,240.6138 L25.194,240.6138 C21.976,240.6138 18.85,240.0268 15.811,238.8578 C12.774,237.6858 10.091,236.0228 7.77,233.8638 C5.446,231.7038 3.569,229.0918 2.144,226.0338 C0.713,222.9698 0,219.4608 0,215.5038 L0,127.4828 C0,115.4258 1.393,104.3558 4.185,94.2728 C6.974,84.1948 11.34,75.5548 17.28,68.3538 C23.22,61.1558 30.78,55.5748 39.96,51.6128 C49.14,47.6558 60.117,45.6728 72.9,45.6728 C82.62,45.6728 91.53,47.6978 99.63,51.7488 C107.729,55.7978 114.703,61.1558 120.555,67.8138 C126.402,74.4748 130.95,82.1238 134.19,90.7628 C137.43,99.4038 139.05,108.3128 139.05,117.4938 Z M101.79,126.9438 C101.79,109.6638 98.942,97.1548 93.247,89.4138 C87.552,81.6758 78.831,77.8028 67.087,77.8028 C56.966,77.8028 49.241,81.7178 43.909,89.5478 C38.576,97.3788 35.91,107.5958 35.91,120.1938 C35.91,134.7728 39.205,146.0248 45.803,153.9438 C52.401,161.8658 61.121,165.8238 71.968,165.8238 C80.823,165.8238 88.007,162.2708 93.521,155.1588 C99.031,148.0488 101.79,138.6458 101.79,126.9438 Z M267.5684,194.7134 C260.0084,194.7134 254.0224,192.6464 249.6134,188.5034 C245.2014,184.3644 242.9994,178.3364 242.9994,170.4134 L242.9994,111.0134 C242.9994,105.0734 242.2264,99.9894 240.6914,95.7584 C239.1554,91.5304 237.0754,88.1094 234.4514,85.4984 C231.8274,82.8914 228.7524,80.9544 225.2244,79.6934 C221.6984,78.4364 217.9434,77.8034 213.9644,77.8034 C211.0714,77.8034 208.0844,78.3894 205.0124,79.5584 C201.9374,80.7314 199.0894,82.6634 196.4654,85.3634 C193.8414,88.0634 191.7194,91.5734 190.0904,95.8934 C188.4634,100.2134 187.6484,105.6134 187.6484,112.0934 L187.6484,194.7134 L175.8574,194.7134 C167.2764,194.7134 161.0244,192.5534 157.0914,188.2334 C153.1604,183.9134 151.1984,177.9734 151.1984,170.4134 L151.1984,0.3134 L162.4544,0.3134 C171.0314,0.3134 177.4184,2.4734 181.6204,6.7934 C185.8174,11.1134 187.9194,16.6944 187.9194,23.5334 L188.1884,65.1134 C189.4454,62.9534 191.2014,60.7514 193.4534,58.4984 C195.7024,56.2504 198.1784,54.1784 200.8794,52.2884 C203.5784,50.3984 206.5484,48.8244 209.7894,47.5634 C213.0284,46.3064 216.3574,45.6734 219.7784,45.6734 C238.6784,45.6734 253.3474,51.1194 263.7894,62.0084 C274.2254,72.9014 279.4484,88.6954 279.4484,109.3934 L279.4484,194.7134 L267.5684,194.7134 Z M436.0442,117.4938 C436.0442,129.1958 434.5982,139.9498 431.7122,149.7578 C428.8272,159.5708 424.6282,168.0768 419.1242,175.2728 C413.6182,182.4748 406.7582,188.0558 398.5482,192.0128 C390.3392,195.9698 380.9102,197.9538 370.2622,197.9538 C362.1372,197.9538 354.8722,195.9278 348.4682,191.8788 C342.0592,187.8288 337.0522,182.6558 333.4442,176.3528 L333.4442,240.6138 L322.1882,240.6138 C318.9702,240.6138 315.8442,240.0268 312.8062,238.8578 C309.7682,237.6858 307.0862,236.0228 304.7652,233.8638 C302.4412,231.7038 300.5632,229.0918 299.1382,226.0338 C297.7082,222.9698 296.9942,219.4608 296.9942,215.5038 L296.9942,127.4828 C296.9942,115.4258 298.3872,104.3558 301.1802,94.2728 C303.9682,84.1948 308.3352,75.5548 314.2742,68.3538 C320.2152,61.1558 327.7742,55.5748 336.9542,51.6128 C346.1352,47.6558 357.1112,45.6728 369.8942,45.6728 C379.6142,45.6728 388.5242,47.6978 396.6252,51.7488 C404.7242,55.7978 411.6982,61.1558 417.5502,67.8138 C423.3972,74.4748 427.9442,82.1238 431.1842,90.7628 C434.4252,99.4038 436.0442,108.3128 436.0442,117.4938 Z M398.7842,126.9438 C398.7842,109.6638 395.9362,97.1548 390.2412,89.4138 C384.5462,81.6758 375.8262,77.8028 364.0812,77.8028 C353.9602,77.8028 346.2352,81.7178 340.9032,89.5478 C335.5712,97.3788 332.9042,107.5958 332.9042,120.1938 C332.9042,134.7728 336.1992,146.0248 342.7982,153.9438 C349.3952,161.8658 358.1162,165.8238 368.9622,165.8238 C377.8172,165.8238 385.0022,162.2708 390.5152,155.1588 C396.0252,148.0488 398.7842,138.6458 398.7842,126.9438 Z M581.5745,137.4732 C581.5745,146.8342 579.8615,155.1152 576.4445,162.3132 C573.0225,169.5152 568.3855,175.5892 562.5395,180.5382 C556.6875,185.4912 549.9375,189.2252 542.2895,191.7432 C534.6355,194.2662 526.5835,195.5232 518.1245,195.5232 L498.1435,195.5232 C463.7605,195.5232 446.5745,180.8552 446.5745,151.5132 L446.5745,17.3232 C448.7345,16.6062 451.7925,15.7502 455.7535,14.7582 C459.7105,13.7712 463.9895,12.8262 468.5795,11.9232 C473.1685,11.0252 477.8475,10.3032 482.6195,9.7632 C487.3855,9.2232 491.6645,8.9532 495.4445,8.9532 L517.8535,8.9532 C526.6705,8.9532 534.7715,10.0792 542.1545,12.3282 C549.5325,14.5812 555.9235,17.8212 561.3245,22.0482 C566.7235,26.2802 570.9095,31.4092 573.8785,37.4382 C576.8485,43.4712 578.3345,50.2632 578.3345,57.8232 C578.3345,68.0832 575.7225,76.5002 570.5035,83.0692 C565.2815,89.6412 558.0845,94.2732 548.9045,96.9732 C553.5835,98.2352 557.9025,100.3062 561.8645,103.1832 C565.8215,106.0652 569.2895,109.3512 572.2585,113.0382 C575.2285,116.7302 577.5245,120.7332 579.1435,125.0532 C580.7635,129.3732 581.5745,133.5162 581.5745,137.4732 Z M544.3135,138.5532 C544.3135,128.4752 541.7495,121.5432 536.6195,117.7632 C531.4895,113.9832 523.5245,112.0932 512.7235,112.0932 L483.2935,112.0932 L483.2935,150.1632 C483.2935,153.4042 484.8215,156.1502 487.8835,158.3982 C490.9425,160.6512 494.8115,161.7732 499.4945,161.7732 L514.6145,161.7732 C524.6925,161.7732 532.1645,159.6592 537.0245,155.4282 C541.8835,151.2012 544.3135,145.5742 544.3135,138.5532 Z M541.3435,61.0632 C541.3435,57.1062 540.4875,53.7312 538.7795,50.9382 C537.0665,48.1502 534.8645,45.9432 532.1645,44.3232 C529.4635,42.7032 526.4015,41.5342 522.9845,40.8132 C519.5625,40.0962 516.1415,39.7332 512.7235,39.7332 L498.9545,39.7332 C496.6125,39.7332 494.0005,39.9612 491.1245,40.4082 C488.2425,40.8602 485.5425,41.2642 483.0245,41.6232 L483.0245,83.4732 L511.3745,83.4732 C519.6515,83.4732 526.7175,81.7182 532.5695,78.2082 C538.4165,74.6982 541.3435,68.9862 541.3435,61.0632 Z M727.3733,137.4732 C727.3733,146.8342 725.6603,155.1152 722.2433,162.3132 C718.8213,169.5152 714.1843,175.5892 708.3383,180.5382 C702.4863,185.4912 695.7363,189.2252 688.0883,191.7432 C680.4343,194.2662 672.3823,195.5232 663.9233,195.5232 L643.9423,195.5232 C609.5593,195.5232 592.3733,180.8552 592.3733,151.5132 L592.3733,17.3232 C594.5333,16.6062 597.5913,15.7502 601.5523,14.7582 C605.5093,13.7712 609.7883,12.8262 614.3783,11.9232 C618.9673,11.0252 623.6463,10.3032 628.4183,9.7632 C633.1843,9.2232 637.4633,8.9532 641.2433,8.9532 L663.6523,8.9532 C672.4693,8.9532 680.5703,10.0792 687.9533,12.3282 C695.3313,14.5812 701.7223,17.8212 707.1233,22.0482 C712.5223,26.2802 716.7083,31.4092 719.6773,37.4382 C722.6473,43.4712 724.1333,50.2632 724.1333,57.8232 C724.1333,68.0832 721.5213,76.5002 716.3023,83.0692 C711.0803,89.6412 703.8833,94.2732 694.7033,96.9732 C699.3823,98.2352 703.7013,100.3062 707.6633,103.1832 C711.6203,106.0652 715.0883,109.3512 718.0573,113.0382 C721.0273,116.7302 723.3233,120.7332 724.9423,125.0532 C726.5623,129.3732 727.3733,133.5162 727.3733,137.4732 Z M690.1123,138.5532 C690.1123,128.4752 687.5483,121.5432 682.4183,117.7632 C677.2883,113.9832 669.3233,112.0932 658.5223,112.0932 L629.0923,112.0932 L629.0923,150.1632 C629.0923,153.4042 630.6203,156.1502 633.6823,158.3982 C636.7413,160.6512 640.6103,161.7732 645.2933,161.7732 L660.4133,161.7732 C670.4913,161.7732 677.9633,159.6592 682.8233,155.4282 C687.6823,151.2012 690.1123,145.5742 690.1123,138.5532 Z M687.1423,61.0632 C687.1423,57.1062 686.2863,53.7312 684.5783,50.9382 C682.8653,48.1502 680.6633,45.9432 677.9633,44.3232 C675.2623,42.7032 672.2003,41.5342 668.7833,40.8132 C665.3613,40.0962 661.9403,39.7332 658.5223,39.7332 L644.7533,39.7332 C642.4113,39.7332 639.7993,39.9612 636.9233,40.4082 C634.0413,40.8602 631.3413,41.2642 628.8233,41.6232 L628.8233,83.4732 L657.1733,83.4732 C665.4503,83.4732 672.5163,81.7182 678.3683,78.2082 C684.2153,74.6982 687.1423,68.9862 687.1423,61.0632z" />
						</svg>
						<h1 class="c-hero-heading t-hero-heading" role="heading" aria-level="1">forum software</h1>
						<p class="c-hero-lead t-hero-lead">Helping to create communities around the world since 2000</p>
					</div>
				</div>
				<div class="o-bar o-bar-search t-bar-search" data-container="search">
					<form class="o-bar-search-form t-bar-search-form" action="./search.php" method="get" id="search" role="search">
						<a class="o-bar-search-toggle t-bar-search-toggle" href="#" data-tooltip="true" title="Search...">
							<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-search-toggle-icon t-bar-search-toggle-icon" data-icon="mdi:search" data-inline="false" aria-hidden="false"></span>
						</a>
						<input class="o-bar-search-field t-bar-search-field" name="keywords" id="keywords" type="search" maxlength="128" title="Search..." value="" placeholder="Search…">
						<a class="o-action o-bar-search-action t-bar-search-action" href="./search.php" data-tooltip="true" title="Search Advanced">
							<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-search-toggle-icon t-bar-search-toggle-icon" data-icon="mdi:settings-outline" data-inline="false" aria-hidden="false"></span>
							<span class="o-action-text t-bar-action-text u-sr-only">
								Search Advanced
							</span>
						</a>
					</form>
				</div>
				<div class="o-bar c-navbar t-navbar">
					<div class="o-bar-left c-navbar-left t-navbar-left"></div>
					<div class="o-bar-right c-navbar-right t-navbar-right">
						<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-toggle="search" data-tooltip="true" title="Search...">
							<span class="iconify o-icon o-icon-src-mdi o-icon c-navbar-action-icon t-navbar-action-icon" data-icon="mdi:search" data-inline="false" aria-hidden="false"></span>
						</a>
						<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="Private Messages">
							<span class="iconify o-icon o-icon-src-mdi o-icon c-navbar-action-icon t-navbar-action-icon" data-icon="mdi:inbox" data-inline="false" aria-hidden="false"></span>
							<span class="o-tag o-bar-badge c-navbar-badge t-navbar-badge">103</span>
							<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">Private Messages</span>
						</a>
						<span class="o-bar-item c-navbar-item t-navbar-item">
							<a class="o-action c-navbar-action t-navbar-action" href="#" data-toggle="notifications" data-tooltip="true" title="Notifications">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-navbar-action-icon t-navbar-action-icon" data-icon="mdi:bell-outline" data-inline="false" aria-hidden="false"></span>
								<span class="o-tag o-bar-badge c-navbar-badge t-navbar-badge">2</span>
								<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">Notifications</span>
							</a>
							<div class="c-notification-container t-notification-container" data-container="notifications">
								<div class="o-bar c-notification-header t-notification-header">
									<div class="o-bar-left c-notification-header-left t-notification-header-left">
										<h2 class="o-bar-title c-notification-bar-title t-notification-bar-title">Notifications</h2>
									</div>
									<div class="o-bar-right c-notification-header-left t-notification-header-left">
										<a class="o-bar-item o-action c-notification-header-action t-notification-header-action" href="" data-tooltip="true" title="Settings">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-header-action-icon t-notification-header-action-icon" data-icon="mdi:settings-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
								<ul class="c-notification-list t-notification-list">
									<li class="c-notification-item c-notification-unread t-notification-itemt-notification-unread">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Replied">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:reply-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item c-notification-unread t-notification-itemt-notification-unread">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Posted">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:plus" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item t-notification-item">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Quoted">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:format-quote-open-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item t-notification-item">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Messaged">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:comment-account-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item t-notification-item">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Reported">
											<span class="iconify o-icon o-icon-src-fa-regular o-icon c-notification-action-icon t-notification-action-icon" data-icon="fa-regular:flag" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item t-notification-item">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action c-notification-unapproved t-notification-action t-notification-unapproved" href="" data-tooltip="true" title="Dissapproved">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:alert-decagram-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item c-notification-unread t-notification-itemt-notification-unread">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action c-notification-approved t-notification-action t-notification-approved" href="" data-tooltip="true" title="Approved">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:decagram-check" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
									<li class="c-notification-item t-notification-item">
										<a class="c-notification-media t-notification-media" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815">
											<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
												<img class="o-avatar c-notification-avatar t-notification-avatar" src="https://avatars2.githubusercontent.com/u/71081?v=4&amp;amp;s=46" alt="User Avatar">
											</span>
										</a>
										<span class="c-notification-users t-notification-users">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-user-icon t-notification-user-icon" data-icon="mdi:account-circle-outline" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Joe</a>
											, <a class="c-notification-user t-notification-user" href="./memberlist.php?mode=viewprofile&amp;amp;u=61815" style="color: #009900;">Frank</a>
										</span>
										<span class="c-notification-title t-notification-title">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-title-icon t-notification-title-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
											<a class="c-notification-title-text t-notification-title-text" href="#"><strong>Your first pm msg title</strong></a>
										</span>
										<span class="c-notification-time t-notification-time">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-time-icon t-notification-time-icon" data-icon="mdi:clock-outline" data-inline="false" aria-hidden="false"></span>
											<time class="c-notification-time-text t-notification-time-text" datetime="2016-11-11T19:18:00Z" title="2016-11-11T19:18:00Z" data-short="2016-11-11T19:18:00Z">2016-11-11T19:18:00Z</time>
										</span>
										<a class="c-notification-action t-notification-action" href="" data-tooltip="true" title="Warned">
											<span class="iconify o-icon o-icon-src-mdi o-icon c-notification-action-icon t-notification-action-icon" data-icon="mdi:shield-alert-outline" data-inline="false" aria-hidden="false"></span>
										</a>
									</li>
								</ul>
								<div class="o-bar c-notification-footer t-notification-footer">
									<a class="o-bar-item o-action c-notification-footer-action t-notification-footer-action" href="">
										<span class="o-action-text c-notification-footer-action-text t-notification-footer-action-text">See All</span>
									</a>
								</div>
							</div>
						</span>
						<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-toggle="drawer" data-tooltip="true" title="Hanakin">
							<span class="o-avatar-wrap o-bar-avatar c-navbar-avatar t-navbar-avatar">
								<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/73081?v=4&amp;amp;s=46" alt="User Avatar">
								<span class="o-avatar-online"></span>
							</span>
						</a>
					</div>
				</div>
				<div class="c-crumbs-container t-crumbs-container" role="navigation">
					<ul class="c-crumbs t-crumbs" role="list">
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#" title="Board Index">
								<span class="iconify o-icon o-icon-src-ic o-icon c-crumbs-icon t-crumbs-icon" data-icon="ic:outline-home" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">Board Index</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#1">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[1] phpBB 3.x Discussion</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#2">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[2] phpBB 3.x Development</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#3">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[3] Merged RFCs</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#4">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[4] Merged Event Requests</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#5">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[5] Your first category</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#6">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[6] Your first category</span>
							</a>
						</li>
						<li class="c-crumbs-item t-crumbs-item" role="listitem">
							<a class="c-crumbs-link t-crumbs-link" href="#7">
								<span class="iconify o-icon o-icon-src-mdi o-icon c-crumbs-icon t-crumbs-icon" data-icon="mdi:chevron-right" data-inline="false" aria-hidden="false"></span>
								<span class="c-crumbs-text t-crumbs-text">[7] Your first category</span>
							</a>
						</li>
					</ul>
				</div>
			</header>
			<main role="main">
				<section class="o-container">
					<div class="c-forum-cat t-forum-cat" role="list">
						<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
							<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
								<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
									<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
										<a class="c-forum-cat-link t-forum-cat-link" href="#">Your first category</a>
									</h2>
								</span>
							</div>
							<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
								<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" data-toggle-tooltip="Expand" title="Collapse">
									<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon" data-icon="mdi:chevron-up" data-inline="false" aria-hidden="false"></span>
								</a>
							</div>
						</div>
						<div class="c-forum-deck t-forum-deck" data-container="collapse">
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon-read t-forum-media-icon-read" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Your first forum
										</h4>
										<p class="c-forum-text t-forum-text">
											Description of your first forum.
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">127</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">196</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Help Me, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="c-forum-cat t-forum-cat" role="list">
						<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
							<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
								<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
									<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
										<a class="c-forum-cat-link t-forum-cat-link" href="#">Announcements</a>
									</h2>
								</span>
							</div>
							<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
								<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" title="Collapse">
									<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon" data-icon="mdi:chevron-up" data-inline="false" aria-hidden="false"></span>
								</a>
							</div>
						</div>
						<div class="c-forum-deck t-forum-deck" data-container="collapse">
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											General Announcements
										</h4>
										<p class="c-forum-text t-forum-text">
											No specific focus, Just relevant news
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Oh No, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Site Announcements
										</h4>
										<p class="c-forum-text t-forum-text">
											Announcements related to the site
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Pinky winky, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon-read t-forum-media-icon-read" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12.198 19.998a7.997 7.997 0 0 0 2.156-.352 4.005 4.005 0 0 1 5.291-5.291 7.997 7.997 0 0 0 .001 0A4.006 4.006 0 0 1 22 18c0 2.206-1.794 4-4 4a4.005 4.005 0 0 1-3.646-2.354 7.96 7.96 0 0 1-2.156.352zM12 20v2a10 10 0 1 1 10-10h-2a8 8 0 1 0-8 8zM10.998 9h6v2h-6V9zm3.684 4a6.03 6.03 0 0 0-1.88 2h-1.804v-2h3.684zm-6.684-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM18 16c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											MOD specific announcements
										</h4>
										<p class="c-forum-text t-forum-text">
											Here you can find announcements related to specific MODs
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Dell sucks, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
										<span class="o-bar-item c-forum-footer-item">
											<a class="o-action c-forum-footer-action" href="" data-toggle="menu" data-tooltip="true" title="Sub Forums">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:more-vert" data-inline="false" aria-hidden="false"></span>
											</a>
											<div class="c-menu-container t-menu-container" data-container="menu">
												<ul class="c-menu t-menu">
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 1</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 2</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 3</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 4</span>
														</a>
													</li>
												</ul>
											</div>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="c-forum-cat t-forum-cat" role="list">
						<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
							<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
								<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
									<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
										<a class="c-forum-cat-link t-forum-cat-link" href="#">General</a>
									</h2>
								</span>
							</div>
							<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
								<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" title="Collapse">
									<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon" data-icon="mdi:chevron-up" data-inline="false" aria-hidden="false"></span>
								</a>
							</div>
						</div>
						<div class="c-forum-deck t-forum-deck" data-container="collapse">
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon-read t-forum-media-icon-read" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Chit Chat
										</h4>
										<p class="c-forum-text t-forum-text">
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">2</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">2</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Moved, by mod, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Cars
										</h4>
										<p class="c-forum-text t-forum-text">
											Discuss everything about cars and all other types of vehicles in this forum
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Mac Rules, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Photography
										</h4>
										<p class="c-forum-text t-forum-text">
											Everything you ever wanted to know about photography as well as everything that you did not want to know about photography can be discussed here
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Moved, by mod, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="c-forum-cat t-forum-cat" role="list">
						<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
							<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
								<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
									<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
										<a class="c-forum-cat-link t-forum-cat-link" href="#">Support</a>
									</h2>
								</span>
							</div>
							<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
								<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" title="Collapse">
									<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon" data-icon="mdi:chevron-up" data-inline="false" aria-hidden="false"></span>
								</a>
							</div>
						</div>
						<div class="c-forum-deck t-forum-deck" data-container="collapse">
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 8.999v2h6v-2h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Site Support
										</h4>
										<p class="c-forum-text t-forum-text">
											For all questions and issues related to the site please report here
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Forum Rules, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon-read t-forum-media-icon-read" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 18c4.411 0 8-3.589 8-8s-3.589-8-8-8-8 3.589-8 8 3.589 8 8 8zm0-13.001c2.758 0 5 2.243 5 5 0 2.758-2.242 5-5 5s-5-2.242-5-5 2.242-5 5-5zm0 1.667a3.335 3.335 0 0 0-3.332 3.332 3.3 3.3 0 0 0 .471 1.684l4.544-4.545A3.31 3.31 0 0 0 12 8.666zm0 6.666A3.337 3.337 0 0 0 15.333 12c0-.617-.178-1.187-.471-1.683l-4.544 4.544a3.294 3.294 0 0 0 1.682.471z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											Forum Support
										</h4>
										<p class="c-forum-text t-forum-text">
											For support relating to the forums please report here
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="[GUIDE] test post, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
									</div>
								</div>
							</div>
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon-read t-forum-media-icon-read" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12.198 19.998a7.997 7.997 0 0 0 2.156-.352 4.005 4.005 0 0 1 5.291-5.291 7.997 7.997 0 0 0 .001 0A4.006 4.006 0 0 1 22 18c0 2.206-1.794 4-4 4a4.005 4.005 0 0 1-3.646-2.354 7.96 7.96 0 0 1-2.156.352zM12 20v2a10 10 0 1 1 10-10h-2a8 8 0 1 0-8 8zM10.998 9h6v2h-6V9zm3.684 4a6.03 6.03 0 0 0-1.88 2h-1.804v-2h3.684zm-6.684-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM18 16c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											MOD Support
										</h4>
										<p class="c-forum-text t-forum-text">
											All support for individual MODs can be reported within the individual MOD sub-forum
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">1</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
										<a class="o-bar-item o-action c-forum-footer-action" href="" data-tooltip="true" title="Re: Nothing better than mac, by hanakin, <br>5 years ago">
											<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:page-last" data-inline="false" aria-hidden="false"></span>
										</a>
										<span class="o-bar-item c-forum-footer-item">
											<a class="o-action c-forum-footer-action" href="" data-toggle="menu" data-tooltip="true" title="Sub Forums">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-footer-action-icon" data-icon="mdi:more-vert" data-inline="false" aria-hidden="false"></span>
											</a>
											<div class="c-menu-container t-menu-container" data-container="menu">
												<ul class="c-menu t-menu">
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 1</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 2</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 3</span>
														</a>
													</li>
													<li class="c-menu-item t-menu-item">
														<a class="c-menu-link t-menu-item" href="#">
															<svg class="o-icon c-menu-link-icon t-menu-forum-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
																<path fill-rule="evenodd" d="M12,16 C9.794,16 8,14.206 8,12 C8,9.795 9.794,8 12,8 C14.206,8 16,9.795 16,12 C16,14.206 14.206,16 12,16 Z M12,10 C10.897,10 10,10.897 10,12 C10,13.103 10.897,14 12,14 C13.103,14 14,13.103 14,12 C14,10.897 13.103,10 12,10 Z" />
															</svg>
															<span class="c-menu-text t-forum-text">MOD 4</span>
														</a>
													</li>
												</ul>
											</div>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="c-forum-cat t-forum-cat" role="list">
						<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
							<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
								<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
									<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
										<a class="c-forum-cat-link t-forum-cat-link" href="#">Forum</a>
									</h2>
								</span>
							</div>
							<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
								<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" title="Collapse">
									<span class="iconify o-icon o-icon-src-mdi o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon" data-icon="mdi:chevron-up" data-inline="false" aria-hidden="false"></span>
								</a>
							</div>
						</div>
						<div class="c-forum-deck t-forum-deck" data-container="collapse">
							<div class="c-forum t-forum" role="listitem">
								<a class="c-forum-body t-forum-body" href="#">
									<span class="c-forum-media t-forum-media">
										<svg class="o-icon c-forum-media-icon t-forum-media-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
											<path fill-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 18c4.411 0 8-3.589 8-8s-3.589-8-8-8-8 3.589-8 8 3.589 8 8 8zm-.705-7.296a.487.487 0 0 1 0 .71.504.504 0 0 1-.71 0 2.502 2.502 0 0 1 0-3.535l1.77-1.77a2.502 2.502 0 0 1 3.535 0c.975.975.975 2.56 0 3.535l-.745.745c.005-.41-.06-.82-.2-1.21l.235-.24a1.49 1.49 0 0 0 0-2.12 1.49 1.49 0 0 0-2.12 0l-1.765 1.765a1.49 1.49 0 0 0 0 2.12zm1.41-2.12a.504.504 0 0 1 .71 0c.975.975.975 2.56 0 3.535l-1.77 1.77a2.502 2.502 0 0 1-3.535 0 2.502 2.502 0 0 1 0-3.535l.745-.745c-.005.41.06.82.2 1.215l-.235.235a1.49 1.49 0 0 0 0 2.12 1.49 1.49 0 0 0 2.12 0l1.765-1.765a1.49 1.49 0 0 0 0-2.12.487.487 0 0 1 0-.71z" />
										</svg>
									</span>
									<span class="c-forum-info t-forum-info">
										<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
											link
										</h4>
										<p class="c-forum-text t-forum-text">
										</p>
									</span>
								</a>
								<div class="o-bar c-forum-footer t-forum-footer">
									<div class="o-bar-left c-forum-footer-left">
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:file-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
										<span class="o-bar-item c-forum-footer-item">
											<span class="o-bar-info c-forum-footer-info">
												<span class="iconify o-icon o-icon-src-mdi o-icon o-bar-info-icon c-forum-footer-info-icon" data-icon="mdi:comment-text-outline" data-inline="false" aria-hidden="false"></span>
												<span class="o-bar-item-text c-forum-footer-text">0</span>
											</span>
										</span>
									</div>
									<div class="o-bar-right c-forum-footer-right">
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</main>
			<footer id="page-bottom">
				<div class="o-container">
					<div class="c-tab-card t-tab-card">
						<div class="c-tab-bar-frame t-tab-bar-frame">
							<nav class="c-tab-bar t-tab-bar" data-toggle="tabs">
								<a class="c-tab t-tab is-active" href="#statistics" role="tab" aria-controls="statistics" aria-selected="true">
									<span class="iconify o-icon o-icon-src-mdi o-icon c-tab-icon t-tab-icon" data-icon="mdi:chart-line" data-inline="false" aria-hidden="false"></span>
									<span class="c-tab-text t-tab-text">Statistics</span>
								</a>
								<a class="c-tab t-tab" href="#who-is-online" role="tab" aria-controls="who-is-online" aria-selected="false">
									<span class="iconify o-icon o-icon-src-mdi o-icon c-tab-icon t-tab-icon" data-icon="mdi:access-point" data-inline="false" aria-hidden="false"></span>
									<span class="c-tab-text t-tab-text">Who&#39;s Online</span>
								</a>
								<a class="c-tab t-tab" href="#birthdays" role="tab" aria-controls="birthdays" aria-selected="false">
									<span class="iconify o-icon o-icon-src-ic o-icon c-tab-icon t-tab-icon" data-icon="ic:outline-cake" data-inline="false" aria-hidden="false"></span>
									<span class="c-tab-text t-tab-text">Birthdays</span>
								</a>
							</nav>
						</div>
						<div class="c-tab-pane t-tab-pane is-active" id="statistics" role="tabpanel">
							<div class="c-tab-pane-row t-tab-pane-row">
								<ul class="c-stat-list c-tab-pane-stats t-tab-list t-tab-pane-stats">
									<li class="c-stat-item t-stat-item">Total Posts <span class="o-tag c-stat-badge t-stat-badge">161430</span></li>
									<li class="c-stat-item t-stat-item">Total Topics <span class="o-tag c-stat-badge t-stat-badge">20309</span></li>
									<li class="c-stat-item t-stat-item">Total Members <span class="o-tag c-stat-badge t-stat-badge">63056</span></li>
									<li class="c-stat-item t-stat-item">Most Online <span class="o-tag c-stat-badge t-stat-badge">3056</span></li>
									<li class="c-stat-item t-stat-item">Newest Member
										<a class="o-tag c-stat-badge c-stat-badge-link t-stat-badge t-stat-badge-link" href="./memberlist.php">bobMarley</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="c-tab-pane t-tab-pane" id="who-is-online" role="tabpanel">
							<div class="c-tab-pane-row t-tab-pane-row">
								<h4 class="c-tab-pane-title t-tab-pane-title">Registered users:</h4>
								<span class="c-tab-pane-text t-tab-text">
									<span style="color: #9e8da7;">Alexa [Bot]</span>
									,
									<span style="color: #9e8da7;">Yahoo Slurp [Bot]</span>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #4f6772;">I Manage</a>
									,
									<span style="color: #9e8da7;">Bing [Bot]</span>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #00bfa5;">devIsMe</a>
									,
									<span style="color: #9e8da7;">Google Feedfetcher [Bot]</span>
									,
									<span style="color: #9e8da7;">Baidu [Spider]</span>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">user1</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #3f54c0;">communAnyOne</a>
									,
									<span style="color: #9e8da7;">Google [Bot]</span>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #00bcd4;">siteMaintainer</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">user2</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">thisIsUser3</a>
									,
									<span style="color: #9e8da7;">Exabot [Bot]</span>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #ffab40;">helpUiCan</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #b84fdb;">orangeCounty</a>
								</span>
							</div>
							<div class="c-tab-pane-row t-tab-pane-row">
								<div class="c-stat-wrap s-stat-wrap">
									<ul class="c-stat-list c-tab-pane-stats t-stat-list t-tab-pane-stats">
										<li class="c-stat-item t-stat-item">Total Online <span class="o-tag c-stat-badge t-stat-badge">519</span></li>
										<li class="c-stat-item t-stat-item">Registered <span class="o-tag c-stat-badge t-stat-badge">16</span></li>
										<li class="c-stat-item t-stat-item">Hidden <span class="o-tag c-stat-badge t-stat-badge">1</span></li>
										<li class="c-stat-item t-stat-item">Guests <span class="o-tag c-stat-badge t-stat-badge">502</span></li>
									</ul>
									<span class="c-stat-info t-stat-info"></span>
								</div>
							</div>
							<div class="c-tab-pane-footer t-tab-pane-footer">
								<h4 class="c-tab-pane-title t-tab-pane-title">Legend:</h4>
								<span class="c-tab-pane-text t-tab-pane-text">
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#4f6772;" href="./memberlist.php?mode=group&amp;g=0">Management</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#00bfa5;" href="./memberlist.php?mode=group&amp;g=1">Development</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#b84fdb;" href="./memberlist.php?mode=group&amp;g=2">Customizations</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#ffab40;" href="./memberlist.php?mode=group&amp;g=3">Support</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#3f54c0;" href="./memberlist.php?mode=group&amp;g=4">Community</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#00bcd4;" href="./memberlist.php?mode=group&amp;g=5">Infrastructure</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#b0bec5;" href="./memberlist.php?mode=group&amp;g=6">Consultant</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#008dff;" href="./memberlist.php?mode=group&amp;g=7">Registered User</a>
									,
									<a class="c-tab-pane-link t-tab-pane-link" style="color:#9e8da7;" href="./memberlist.php?mode=group&amp;g=8">Bots</a>
								</span>
							</div>
						</div>
						<div class="c-tab-pane t-tab-pane" id="birthdays" role="tabpanel">
							<div class="c-tab-pane-row t-tab-pane-row">
								<h4 class="c-tab-pane-title t-tab-pane-title">Congratulations: </h4>
								<span class="c-tab-pane-text t-tab-pane-text">
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">user11</a> (53)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">myNameBart</a> (47)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #ffab40;">I help</a> (35)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">user32</a> (38)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">meInIrene</a> (15)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">Dave</a> (31)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">francony</a> (42)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">widgetFree</a> (26)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php" style="color: #4f6772;">I manage</a> (33)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">scubaSteve</a> (67)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">pickleRick</a> (22)
									,
									<a class="c-tab-pane-link t-tab-pane-link" href="./memberlist.php">Soba</a> (17)
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="c-footer t-footer">
					<nav class="c-footer-nav t-footer-nav">
						<a class="c-footer-nav-link t-footer-nav-link" href="">
							<span class="iconify o-icon o-icon-src-mdi o-icon c-footer-nav-link-icon t-footer-nav-link-icon" data-icon="mdi:email-outline" data-inline="false" aria-hidden="false"></span>
							<span class="c-footer-nav-link-text t-footer-nav-link-text">Contact Us</span>
						</a>
						<a class="c-footer-nav-link t-footer-nav-link" href="">
							<span class="iconify o-icon o-icon-src-mdi o-icon c-footer-nav-link-icon t-footer-nav-link-icon" data-icon="mdi:account-group-outline" data-inline="false" aria-hidden="false"></span>
							<span class="c-footer-nav-link-text t-footer-nav-link-text">The Team</span>
						</a>
						<a class="c-footer-nav-link t-footer-nav-link" href="">
							<span class="iconify o-icon o-icon-src-ic o-icon c-footer-nav-link-icon t-footer-nav-link-icon" data-icon="ic:outline-contacts" data-inline="false" aria-hidden="false"></span>
							<span class="c-footer-nav-link-text t-footer-nav-link-text">Members</span>
						</a>
						<a class="c-footer-nav-link t-footer-nav-link" href="">
							<span class="iconify o-icon o-icon-src-mdi o-icon c-footer-nav-link-icon t-footer-nav-link-icon" data-icon="mdi:delete-outline" data-inline="false" aria-hidden="false"></span>
							<span class="c-footer-nav-link-text t-footer-nav-link-text">Delete Cookies</span>
						</a>
					</nav>
					<p class="c-footer-copyright t-footer-copyright">Powered by <a href="">phpBB</a> Forum Software © phpBB Limited</p>
					<p class="c-footer-legal t-footer-legal">
						<a href="">Privacy</a> | <a href="">Terms</a>
					</p>
				</div>
			</footer>
		</div>
	</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                /* eslint-disable multiline-comment-style */

const $drawerToggle = '[data-toggle="drawer"]';
const $drawer = '[data-container="drawer"]';
const $drawerMenuToggle = '[data-toggle="drawer-menu"]';
const $drawerMenu = '[data-container="drawer-menu"]';
const $page = '[data-container="page"]';
const $notificationToggle = '[data-toggle="notifications"]';
const $notification = '[data-container="notifications"]';
const $menuToggle = '[data-toggle="menu"]';
const $menu = '[data-container="menu"]';
const $searchToggle = '[data-toggle="search"]';
const $search = '[data-container="search"]';
const $profileToggle = '[data-toggle="profile"]';
const $profile = '[data-container="profile"]';
const $tabs = '[data-toggle="tabs"]';
const $modalToggle = '[data-toggle="modal"]';
const $modal = '[data-container="modal"]';
const $toastToggle = '[data-toggle="toast"]';
const $toast = '[data-container="toast"]';
const $collapseToggle = '[data-toggle="collapse"]';
const $collapseToggleParent = '[data-toggle-parent="collapse"]';
const $collapse = '[data-container="collapse"]';
const $tooltip = '[data-tooltip="true"]';
const $tooltipContainer = '[data-tooltip-container="true"]';
const $toolbarToggle = '[data-toggle="toolbar"]';
const $toolbar = '[data-container="toolbar"]';
const $jumpToggle = '[data-toggle="jump"]';
const $jump = '[data-container="jump"]';
const $emojis = '[data-emoji-preview="emoji" ]';
const $emojiPreview = '[data-emoji-preview="container"]';
const $emojiFilter = '[data-emoji-filter="input"]';
const $closeToggle = '[data-close="true"]';

/**
 * Clears the active state of the provided elements
 *
 * @param     {object} event_       Event
 * @param     {object} $el     		The element with the state
 * @param     {object} $toggle 		The element that controls the state
 */
const clearToggle = function (event_, $element, $toggle) {
	const { target } = event_;

	if (
		!$(target).is($element) &&
		!$(target).parents().is($element) &&
		!$(target).is($toggle) &&
		!$(target).parents().is($toggle)
	) {
		$($element).each(function () {
			$(this).toggleClass('is-active', false);
		});
	}
};

/**
 * Returns clearance object for displaying content to avoid edges
 *
 * @param     {object} $target 	Element to test
 * @param     {number} x 		custom top offset
 * @param     {number} y 		custom left offset
 * @returns   {object} 			boolean for each edge of window and all dimensions and positions
 */
const edgeDetect = ($target, x, y) => {
	const $win = $(window);
	const tgt = {};

	if (!x) {
		x = $target.offset().left;
	}

	if (!y) {
		y = $target.offset().top;
	}

	tgt.left = x;
	tgt.top = y;
	tgt.width = $target.innerWidth();
	tgt.height = $target.innerHeight();
	tgt.bottom = (tgt.top + tgt.height);
	tgt.right = (tgt.left + tgt.width);

	tgt.currentTop = tgt.top - $win.scrollTop();
	tgt.currentLeft = tgt.left - $win.scrollLeft();
	tgt.currentRight = (tgt.currentLeft + tgt.width);
	tgt.currentBottom = (tgt.currentTop + tgt.height);

	tgt.isTop = (tgt.top - tgt.bottom) < 0;
	tgt.isLeft = (tgt.left - tgt.right) < 0;
	tgt.isRight = ($win.width - tgt.right) > tgt.width;
	tgt.isBottom = ($win.height - tgt.bottom) > tgt.height;

	return tgt;
};

/**
 * Clears the active state of the provided tabs
 *
 * @todo      Look at refactoring into clearToggle
 * @param     {object} event_      	Event
 * @param     {object} $links 		The elements with the state
 * @constant  {object} $this
 * @constant  {object} $that
 */
const clearTabs = function (event_, $links) {
	$($links).children().each(function () {
		const $this = $(this);
		const $that = $this.attr('href');

		$this.toggleClass('is-active', false);
		$($that).toggleClass('is-active', false);
	});
};

//---------------------------------------------

/**
 * Toggles the "is-active" class for the given element
 *
 * @this     {object}
 * @param     {object} target      element to apply toggle class on
 */

// const isActive = function(target) {
// 	this.click(event_ => {
// 		event_.preventDefault();
// 		event_.stopPropagation();
// 		target.toggleClass('is-active');
// 	});
// };

/**
 * Toggles the state for Modals
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 */
$($modalToggle).click(event_ => {
	event_.preventDefault();
	event_.stopPropagation();
	$($modal).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Replaces emoji preview with selected emoji
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      	Event
 * @constant  {object} $this
 * @constant  {object} $emoji		stored emoji html
 * @constant  {object} $desc		stored updated emoji shortname
 */
$($emojis).hover(event_ => {
	const $this = event_.target;
	const $emoji = $($this).children();
	const emojiLastClass = $emoji.attr('class').split(' ').pop();
	let $desc = $($this).attr('data-emoji-name');
	$desc = $($emojiPreview).children().last().text($desc);
	const newClass = $($emojiPreview).children().first().attr('class').split(' ').pop();

	$($emojiPreview).children().remove();
	$emoji.clone().removeClass(emojiLastClass).addClass(newClass).appendTo($emojiPreview);
	$($emojiPreview).append($desc);
});

//---------------------------------------------

/* eslint-disable no-negated-condition */

/**
 * Replaces emoji preview with selected emoji
 *
 * @todo      Refactor to toggle function
 * @constant  {object} query		value to filter
 */
$($emojiFilter).on('input', function () {
	const query = this.value;
	if (query !== '') {
		$('[data-emoji-preview="emoji"]:not([data-emoji-name*="' + query + '"])').hide();
	} else {
		$($emojis).show();
	}
});

/* eslint-enable no-negated-condition */

//---------------------------------------------

/**
 * Toggles the state for Collapse
 *
 * @todo Refactor to toggle function
 * @param     {object} event_      Event
 * @constant  {object} $this
 */
$($collapseToggle).click(function (event_) {
	const $this = $(this);
	const $that = $this.parents($collapseToggleParent).next($collapse);
	const tip = $this.attr('data-toggle-tooltip');

	event_.preventDefault();
	event_.stopPropagation();

	$that.toggleClass('is-collapsed');
	$this.attr('data-toggle-tooltip', $this.attr('title'));
	$this.attr('title', tip);
	$this.toggleClass('is-collapsed');
	$($tooltipContainer).remove();
});

//---------------------------------------------

/**
 * Toggles the state for Toasts
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 */
$($toastToggle).click(event_ => {
	event_.preventDefault();
	event_.stopPropagation();
	$($toast).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Toggles the state for Editor Toolbar
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 */
$($toolbarToggle).click(event_ => {
	event_.preventDefault();
	event_.stopPropagation();
	$($toolbar).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Toggles the state for Jump Menu
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 */
$($jumpToggle).click(event_ => {
	event_.preventDefault();
	event_.stopPropagation();
	$($jump).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Toggles the state for Search
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 */
$($searchToggle).click(event_ => {
	event_.preventDefault();
	event_.stopPropagation();
	$($search).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Toggles the state for Drawer
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 * @constant  {object} $that
 */
$($drawerToggle).click(event_ => {
	const $that = $($drawer);
	event_.preventDefault();
	event_.stopPropagation();
	$that.toggleClass('is-active');
	$($page).attr('style', 'position: relative; transition: 0.35s ease-in-out; left: -' + $that.width() + 'px');
});

/**
 * Toggles the state for DrawerMenu
 *
 * @todo Refactor to toggle function
 * @param     {object} event_      Event
 * @constant  {object} $this
 */
$($drawerMenuToggle).click(function (event_) {
	const $this = $(this);
	event_.preventDefault();
	event_.stopPropagation();
	$this.next($drawerMenu).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Toggles state for Tabs
 *
 * @constant  {object} $this
 * @constant  {object} $that
 * @event     Toggle#Tab
 * @event     Toggle#Content
 */
$($tabs).children().each(function () {
	const $this = $(this);
	const $that = $($this.attr('href'));

	$this.on({
		mouseup: event_ => {
			event_.preventDefault();
			event_.stopPropagation();
			clearTabs(event_, $tabs);
			$this.toggleClass('is-active');
			$that.toggleClass('is-active');
		},
	});
});

//---------------------------------------------

/**
 * Handle state for Notification Menu
 *
 * @param     {object} event_	Event
 * @constant  {object} $that	Container to be displayed
 */
$($notificationToggle).click(event_ => {
	const $that = $($notification);

	event_.preventDefault();
	event_.stopPropagation();

	$that.toggleClass('is-active');
});

//---------------------------------------------

/**
 * Handle state for Menus
 *
 * @todo      Refactor Menu into this
 * @param     {object} event_	Event
 * @constant  {object} $this
 * @constant  {object} $that
 */
$($menuToggle).click(function (event_) {
	const $this = $(this);
	const $that = $(this).next();
	event_.preventDefault();
	event_.stopPropagation();

	const link = edgeDetect($this);
	const menu = edgeDetect($that);
	let vertical = 'top';
	let horizontal = 'left';

	// not enough space in default location below link set above
	if ((link.currentTop + menu.height) > $(window).height()) {
		menu.top = (0 - menu.height + link.height);
		vertical = 'bottom';
	} else {
		menu.top = 0;
	}

	// not enough space in default location right of link set to left
	if ((link.currentLeft + menu.width) > $(window).width()) {
		menu.left = (0 - menu.width + link.width);
		horizontal = 'right';
	} else {
		menu.left = 0;
	}

	// $that.attr('style', 'transform-origin: ' + horizontal + ' ' + vertical + ';');
	$that.attr('style', 'left: ' + menu.left + 'px; top: ' + menu.top + 'px; transform-origin: ' + horizontal + ' ' + vertical + ';');

	$that.each(() => {
		$this.toggleClass('is-active', false);
	});

	$this.next($menu).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Handle animation direction for Profiles
 *
 * @todo      Refactor into Profile toggle
 * @constant  {object} $this
 * @constant  {object} targetOffset
 */
$($profile).each(function () {
	const $this = $(this);
	const targetOffset = $this.offset();
	const $direction = $this.data('direction');
	if ($direction) {
		$this.css({ 'transform-origin': $direction, top: 'inherit', bottom: 0 });
	} else {
		if (targetOffset.left > $(window).width() / 2) {
			$this.css({ 'transform-origin': 'right top', right: 0 });
		} else {
			$this.css('transform-origin', 'left top');
		}
	}
});

//---------------------------------------------

/**
 * Toggles the state for Profile
 *
 * @todo      Refactor to toggle function
 * @param     {object} event_      Event
 * @constant  {object} $this
 * @constant  {object} $that
 */
$($profileToggle).click(function (event_) {
	const $this = $(this);
	const $that = $($profile);
	event_.preventDefault();
	event_.stopPropagation();
	$that.each(() => {
		$this.toggleClass('is-active', false);
	});
	$this.next($profile).toggleClass('is-active');
});

//---------------------------------------------

/**
 * Handles state and creation of Tool Tips
 *
 * @param     {object} event_      Event
 * @constant  {object} $this
 * @constant  {object} $that
 * @constant  {string} tip
 * @constant  {object} link
 * @constant  {object} tipPos
 * @event     Toggle#ShowTip
 * @event     Toggle#HideTip
 */
$($tooltip).each(function () {
	const $this = $(this);
	let $that = {};
	$this.on({
		mouseenter: () => {
			$('body').append('<span class="c-tooltip" data-tooltip-container="true"></span>');
			$that = $($tooltipContainer);
			$that.append($this.attr('title'));
			const gap = 8; // set equal to default spacing unit size
			const link = edgeDetect($this);
			const tip = edgeDetect($that);

			// set left to center of link
			tip.left = ((link.left + (link.width / 2)) - (tip.width / 2));

			// not enough space in default location below link set above
			if ((link.currentBottom + gap + tip.height) > $(window).height()) {
				tip.top = (link.top - tip.height - gap);
			} else {
				tip.top = (link.bottom + gap);
			}

			$that.attr('style', 'left: ' + tip.left + 'px; top: ' + tip.top + 'px;');
			$that.toggleClass('is-active');
		},
		mouseleave: () => {
			$that.remove();
		},
	});
});

//----------------------------------------------

/**
 * Hide all elements on document load
 *
 * @event     Hide#Search
 * @event     Hide#Menu
 * @event     Hide#Profile
 * @event     Hide#Toolbar
 * @event     Hide#Jump
 * @event     Hide#NotificationMenu
 */
$(document).on('touchstart mouseup', event_ => {
	clearToggle(event_, $search, $searchToggle);
	clearToggle(event_, $menu, $menuToggle);
	clearToggle(event_, $profile, $profileToggle);
	clearToggle(event_, $toolbar, $toolbarToggle);
	clearToggle(event_, $jump, $jumpToggle);
	clearToggle(event_, $notification, $notificationToggle);
});

//---------------------------------------------

/**
 * Hide drawer properly
 *
 * @event     Hide#Drawer
 */
$($page).on('touchstart mouseup', event_ => {
	const $this = $(this);
	clearToggle(event_, $drawer, $drawerToggle);
	$($page).removeAttr('style');
});

//---------------------------------------------

/**
 * Hide social menu properly
 *
 * @event     Hide#Social
 */
$($profile).on('touchstart mouseup', event_ => {
	clearToggle(event_, $menu, $menuToggle);
});

//---------------------------------------------

/**
 * Handle state for Menus
 *
 * @todo      Refactor Menu into this
 * @param     {object} event_      Event
 * @constant  {object} $this
 */
$($closeToggle).click(function (event_) {
	const $this = $(this);
	event_.preventDefault();
	event_.stopPropagation();
	$this.parent().toggleClass('is-active', false);
});

//---------------------------------------------

              
            
!
999px

Console