<!DOCTYPE html>
<html>
<head>
<style>


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


body {
	background: #faf8f7;
color: #405261;
}
/* Home Page Title */

#docsSearch h1 {
	font-size: 48px;
	font-weight: 900;
	text-align: center;
	margin-top: .4em;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #222256;
	padding: 10px;
	letter-spacing: -1.8px;
}

#mainNav .brand > img {
	display: inline-block;
	text-indent: -9000px;
	width: auto;
	height: 30px;
	background: url(path/to/image) no-repeat 0 0;
	background-size: 100%;
}
.navbar .nav li {
	display: inline-block;
	float: none;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 13px;
}
.navbar .nav li a, .navbar .icon-private-w {
	font-size: 14px;
    font-weight: normal;
    color: #556575;
}

.navbar .nav li.active a {
	font-weight: 500;
}


#fullArticle .printArticle {
    border: none !important;
    top: 0;
    right: 0;
}

#fullArticle .printArticle .icon-print {
		color: #556575;
		    transition: color 0.3s;
}

#fullArticle .printArticle .icon-print:hover {
		color: #126fe9;
}

.contentWrapper .printArticle {
	margin-top: 0 !important;
}

/* Header Size */

.navbar .navbar-inner {
	height: 60px;
	box-shadow: none;
	padding-top:18px;
}
.navbar .navbar-inner .container-fluid {
	padding: 0;
}


.navbar .brand {
	float: left;
	display: block;
	padding-left: 0px;
	margin-left: 0px;
	font-size: 20px;
	font-weight: 200;
	color: #777;
	padding-top: 11px;
}
/* Home Page Search Bar Background */

#docsSearch {
	background: #faf8f7;
	border: none;
	margin-bottom: 3em;
	padding: 88px 0;
}
/* Search Input Box */

#searchBar .search-query {
	font-size:16px;

}

input.search-query {
	padding-right: 14px;
	padding-right: 4px \9;
	padding-left: 14px;
	padding-left: 4px \9;
	margin-bottom: 0;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif,
	sans-serif;
	font-weight: 300;
	font-size:16px;
	letter-spacing: 1px;
	border: 1px solid #abb9c7;
	color: #405261;
}

input.search-query:hover {
	border-color: #4176fa;
	}

	#searchBar .search-query:hover, #searchBar .search-query:active, #searchBar .search-query:focus {
		border-color: #4176fa;
	}

	#sidebar form .search-query {
		border: 1px solid #abb9c7;
		border-radius:4px;
	}

	#sidebar form .icon-search {
		color: #7e8e9e;
	}

	#sidebar form .icon-search:hover {
		color: #405261;
	}
/* Home Page Categ
/* Home Page Category Title*/

.category-list h3 {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Category Styles */

.category-list .category p {
	color: #405261;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 100;
	font-size: 15px;
	letter-spacing: 0.25px;
}
.category-list .category {
	background-color: #fff;
	background-position: top 20px center !important;
	background-repeat: no-repeat !important;
	background-size: 100px auto !important;
	box-shadow: rgba(49, 67, 81, 0.02) 0px 1px 1px 0px, rgba(49, 67, 81, 0.04) 0px 2px 2px 0.5px, rgba(49, 67, 81, 0.06) 0px 4px 4px 1px;
	/*box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);*/
	box-sizing: border-box;
	min-height: 183px;
	padding: 94px 20px 20px;
	position: relative;
	width: 31.5%;
	transition: all 0.2s;
	border-radius: 6px;
}
.category-list .category:hover {
	text-decoration: none;
	background: #f7f7f9;
}

#category-10 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXpXNK15vX8N0GFhv0oIvM2hsACaHuJQM18cnNdW-mIkHwxd5imxoJ43HtDZbBhFQndFzXdLbJaJCtQhYTKpuzYtvhjJjrKwLAhuCMKx9zqacB9De2kd89PHjVM9WR8H0WIrCu83oltGJRLBoxALYjLy7UhsTH5_NrScE4cnXvKKie1FuPUM_CW2f6ZGVj/s1600/FAQs.png);
background-size: 40px !important;
    background-position-y: 32px !important;
}


#category-5 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYT3nNwrHnUEYGKjdJ2303f7P5EnNplgIrEEJ51r2W33EDohoWabbdH_EAQETOIMcGSGUxn64lZvWF8ClQfMheQYwhH8d7EMtxk4y6Onk8Vu3_EeP5Vp8mLOIN39WG02BgdO2KJY5FnTtltlKIrC_WrKsFDiSKI0nLJcmTl3uGxstGGzavbEnt4UpxOYA/s1600/getting-started.png);
background-size: 40px !important;
    background-position-y: 32px !important;
}

#category-18 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirJ-RQBB0LL-8XcJktlEfkmt1GNtm7UthCWdYVraznHy5tbM61qKMCKLQRLBiC0t3Xo075ee9tg_aAo2qbZNuWEZ6o3hFVwRhyc306Jc_6e1IZYMpSNC3Z4BoNcpaO-wvwr7hnOKSFAZbL2AGXCTFg3fVYdIGMQepGpIHYT4FQ-ao5hPGkVGs1k9Y07mxK/s1600/Keyword-tracking.png);
background-size: 40px !important;
    background-position-y: 32px !important;
}

#category-23 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWzSFto5oSFiuS0LPsEHFwWtWV9a739-wocqavrIKSBA4AGs7dDCE2bJSO-fF3RyIh4t9BSdkLTwbls-0vZ3X_0yli8PenPMgQ8keYUnZsO4-GzaHyDD_0DYBPv8DUOlP_FDHZr9WzjR9sHEmlLUXgSiD0mFH0bJXtAfUaXEye-5e_LplDBwWtjgehWuj/s1600/account-management.png);
background-size: 40px !important;
    background-position-y: 32px !important;
}



.collection-category h2 {
    font-weight: 500;
    margin: 0 0 20px;
    text-align: center;
    padding-left: 0%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    /* text-transform: uppercase; */
    color: #405261;
    font-size: 22px;
    letter-spacing: 1px;
}

.collection-category h2 a {
    color: #126fe9;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}



/* Home Page Link Style */

#serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: #126fe9;
	margin-top: 15px;
	text-transform: capitalize;
	text-decoration: none;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
}
#serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: #126fe9;
	margin-top: 15px;
	text-transform: capitalize;
	/* text-decoration: underline; */
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
}

#serp-dd .noResults {
	font-size: 14px;
}
/* Home Page Search Button */

#searchBar button {
	color: #ffffff;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);
	background: #126fe9;
	border-radius: 0 5px 5px 0;
	font-size: 18px;
	font-weight: 700;
	padding: 0 1.5em;
	height: 50px;
	position: absolute;
	top: unset;
}
#searchBar button:hover {
	background: #0E59BA;
}
input, button, select, textarea {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#searchBar.sm button, #searchBar.sm button:hover {
	background: none;
}
/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/


/* Getting Started (use your actual category names here in the comment to make it easier) */
#category-123 {
	background-image: url(https://storage.myhostingprovider.com/public/images/123-getting-started.png);
}

/* Setup Users */
#category-456 {
  background-image: url(https://storage.myhostingprovider.com/public/images/456-setup-users.png);
}

/* Uploading Files */
#category-223 {
  background-image: url(https://storage.myhostingprovider.com/public/images/223-uploading-files.png);
}

/* etc... keep going and add one CSS ID selector for each category. */

#fullArticle .callout, #fullArticle .callout-blue, #fullArticle .callout-green, #fullArticle .callout-red, #fullArticle .callout-yellow, #fullArticle .private-note {
	font-size: 16px;
	line-height: 26px;
}

/* Side Bar Styles */

#sidebar {
	margin: 0;
	padding: 0;
}

#sidebar .nav-list a {
    display: block;
    font-size: 16px;
    line-height: 20px;
    color: #405261;
    padding: 4px 0 4px 0;
}

#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
	font-weight: 600;
	color: #405261;
}
#sidebar h3 {
	font-size: 14px;
	color: #314351;
    font-weight: normal;
	margin: 0 0 20px;
text-transform: capitalize;
}
/* Article Styles */

#main-content {
    background: #ffffff;
border-radius: 6px;
    float: right;
    margin-bottom: 0;
    padding: 46px;
   box-shadow: rgba(49, 67, 81, 0.02) 0px 1px 1px 0px, rgba(49, 67, 81, 0.04) 0px 2px 2px 0.5px, rgba(49, 67, 81, 0.06) 0px 4px 4px 1px, rgba(49, 67, 81, 0.08) 0px 8px 8px 1.5px;
}


#contentArea .row-fluid {
	padding-top: 46px;
margin-bottom: 78px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle a {
color: #314351;
 border-bottom: 1px solid #314351;
cursor: pointer;
}

#fullArticle a:hover {
color: #126fe9;
 border-bottom-color: #126fe9;
}

#fullArticle .title {
	padding-right: 22px;
}

#fullArticle .title, .contentWrapper h1 {
	margin: 0 0 32px 0;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.237675px;
}

#fullArticle, #fullArticle p, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
	color: #405261;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px;
	font-weight: normal;
	margin: 0 0 32px 0;
	line-height: 26px;
}

#fullArticle ul, #fullArticle ol, #fullArticle li {
	color: #405261;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px;
	font-weight: normal;
	margin: 0;
	line-height: 26px;
	margin-left: 12px;
}

#fullArticle>ul, #fullArticle>ol {
	margin-bottom:32px;
}
#categoryHead .sort select {
	width: 150px;
	height: 24px;
	margin: 0;
	line-height: 26px;
	font-size: 13px;
	color: #405261;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
	color: #494949;
}
#fullArticle h2 {
	font-size: 22px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 600;
	color: #131b24;
	margin-bottom: 8px;
	margin-top:0px;
	letter-spacing: -0.178838px;
}
#fullArticle h3 {
	font-size: 18px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #131b24;
	margin-bottom: 4px;
	margin-top:0px;
}
#fullArticle h4 {
	font-size: 16px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
	color: #405261;
    font-style: italic;
    margin-bottom: 4px;
	margin-top:0px;
}
.contentWrapper p {
	margin-top: -4px;
	word-wrap: break-word;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #405261;
	font-weight: 300;
	font-size: 16px;
	letter-spacing: .01em;
}

.contentWrapper {
	background: #ffffff;
position: relative;
border: none !important;
    padding: 0 !important;
color: #405261;
}



/* Article Footers */

.articleFoot p, .articleFoot time {
	color: #405261;
	display: inline-block;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
	font-style: italic;
}


/* Page Footers */

footer {
	margin-top: 64px;
	margin-bottom: 64px;
}

footer p {
	margin: 0;
text-align: center;
color: rgb(85, 101, 117);
font-size: 14px;

}


footer p a {
	color: #405261;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
	background: #fff;
	margin: 0;
	padding: 11px 0 10px 18px;
	font-size: 22px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #58A4B0;
	font-weight: 300;
}
#contactModal .control-label {
	width: 110px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #405261;
}

.btn {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #03d3d5;
	border-radius: 5px;
	border: 1px solid #b98389;
	font-size: 14px;
	padding: .5em;
	/* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
	color: #fff;
	text-shadow: 0 0px 0px rgba(255,255,255,.0);
	background: #8fa7c2;
	border-radius: 5px;
	border: 1px solid #9da39a;
	font-size: 18px;
	padding: 0 1.5em;
	height: 50px;
}

.category-list {
    text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
	section.category-list .category {
		width: 48.2%;
	}
}
@media screen and (max-width: 760px) {
	section.category-list .category {
		box-sizing: border-box;
		margin: 0 0 20px;
		padding: 94px 20px 15px;
		width: 100%;
	}
}
/* RESPONSIVE */

@media (max-width: 768px) {
	.navbar .btn-navbar {
		margin-top: 16px;
		right: -10px;
	}
	.related {
		padding: 30px 25px 25px;
	}
	.related ul {
		margin-left: 0;
	}
	.related h3 {
		padding-left: 0;
	}
	.related ul>li a {
		margin-left: 0;
	}
}
@media (max-width: 480px) {
	#searchBar button {
		color: transparent;
		text-shadow: 0;
		background: transparent;
		border-radius: 0 5px 5px 0;
		border: 0;
		font-size: 18px;
		padding: 0 1.5em;
		height: 50px;
		position: absolute;
	}
	#searchBar button .icon-search {
		display: block;
		text-shadow: none;
		margin-top: 15px;
	}
	#searchBar button:hover .icon-search:hover {
		display: block;
		text-shadow: none;
		margin-top: 15px;
		background-color: transparent;
	}
}
@media (max-width: 480px) {
	#fullArticle .title, .contentWrapper h1 {
		font-size: 26px;
	}
	#fullArticle h2 {
		font-size: 20px;
	}
}


/* Collection Titles  */
.collection-category h2 a {
    color: #54494b;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-align: center;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>


