├── .arcconfig
├── .arclint
├── .editorconfig
├── article-page.html
├── assets
    ├── accounts-55.png
    ├── accounts-70.png
    ├── blue-leaf-bg.png
    ├── discussion-55.png
    ├── discussion-70.png
    ├── faq-55.png
    ├── faq-70.png
    ├── hopper-55.png
    ├── hopper-70.png
    ├── leaf-bg.png
    ├── leafers-55.png
    ├── leafers-70.png
    ├── magnifying-glass.png
    ├── pants-55.png
    ├── pants-70.png
    ├── problem-55.png
    ├── problem-70.png
    ├── sam-55.png
    └── sam-70.png
├── category-page.html
├── contributions-page.html
├── document-head.html
├── error-page.html
├── following-page.html
├── footer.html
├── header.html
├── home-page.html
├── new-request-page.html
├── request-list-page.html
├── request-page.html
├── search-results.html
├── section-page.html
├── theme.css
└── theme.js


/.arcconfig:
--------------------------------------------------------------------------------
1 | {
2 |     "conduit_uri": "https://phabricator.khanacademy.org/",
3 |     "lint.engine": "ArcanistConfigurationDrivenLintEngine"
4 | }
5 | 


--------------------------------------------------------------------------------
/.arclint:
--------------------------------------------------------------------------------
 1 | {
 2 |   "linters": {
 3 |     "khan-linter": {
 4 |       "type": "script-and-regex",
 5 |       "script-and-regex.script": "ka-lint --always-exit-0 --blacklist=yes --propose-arc-fixes",
 6 |       "script-and-regex.regex": "\/^((?P<file>[^:]*):(?P<line>\\d+):((?P<char>\\d+):)? (?P<name>((?P<error>E)|(?P<warning>W))\\S+) (?P<message>[^\\x00]*)(\\x00(?P<original>[^\\x00]*)\\x00(?P<replacement>[^\\x00]*)\\x00)?)|(?P<ignore>SKIPPING.*)$\/m"
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | max_line_length = 0
10 | trim_trailing_whitespace = true
11 | 
12 | [COMMIT_EDITMSG]
13 | max_line_length = 0
14 | 


--------------------------------------------------------------------------------
/article-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | 
 5 | <nav class="sub-nav clearfix">
 6 |   {{breadcrumbs}}
 7 | </nav>
 8 | 
 9 | <div class="article-column">
10 |   <article>
11 |     <h1>{{visibility}} {{title}}</h1>
12 |     <div class="article-body">
13 |       {{body}}
14 |     </div>
15 |     <div class="article-attachments">
16 |       {{attachments}}
17 |     </div>
18 |     <div class="article-meta">
19 |       {{author_name}} - {{updated_at}}
20 |     </div>
21 |     <footer class="article-footer clearfix">
22 |       {{vote}}
23 |       {{share}}
24 |     </footer>
25 |   </article>
26 |   <div class="article-more-questions">
27 |     {{more_questions}}
28 |   </div>
29 |   <section class="article-comments">
30 |     <h2>{{comment_heading}}</h2>
31 |     {{comment_list}}
32 |     {{pending_comment_list}}
33 |     {{comment_pagination}}
34 |     {{comment_form}}
35 |   </section>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/assets/accounts-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/accounts-55.png


--------------------------------------------------------------------------------
/assets/accounts-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/accounts-70.png


--------------------------------------------------------------------------------
/assets/blue-leaf-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/blue-leaf-bg.png


--------------------------------------------------------------------------------
/assets/discussion-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/discussion-55.png


--------------------------------------------------------------------------------
/assets/discussion-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/discussion-70.png


--------------------------------------------------------------------------------
/assets/faq-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/faq-55.png


--------------------------------------------------------------------------------
/assets/faq-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/faq-70.png


--------------------------------------------------------------------------------
/assets/hopper-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/hopper-55.png


--------------------------------------------------------------------------------
/assets/hopper-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/hopper-70.png


--------------------------------------------------------------------------------
/assets/leaf-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/leaf-bg.png


--------------------------------------------------------------------------------
/assets/leafers-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/leafers-55.png


--------------------------------------------------------------------------------
/assets/leafers-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/leafers-70.png


--------------------------------------------------------------------------------
/assets/magnifying-glass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/magnifying-glass.png


--------------------------------------------------------------------------------
/assets/pants-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/pants-55.png


--------------------------------------------------------------------------------
/assets/pants-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/pants-70.png


--------------------------------------------------------------------------------
/assets/problem-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/problem-55.png


--------------------------------------------------------------------------------
/assets/problem-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/problem-70.png


--------------------------------------------------------------------------------
/assets/sam-55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/sam-55.png


--------------------------------------------------------------------------------
/assets/sam-70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Khan/zendesk-theme/20b05c8b3e7018daf3faff74ff065e8320c4d7c3/assets/sam-70.png


--------------------------------------------------------------------------------
/category-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | 
 5 | <nav class="sub-nav clearfix">
 6 |   {{breadcrumbs}}
 7 | </nav>
 8 | 
 9 | <h1>{{title}}</h1>
10 | <p class="category-description">{{description}}</p>
11 | {{section_tree}}
12 | 


--------------------------------------------------------------------------------
/contributions-page.html:
--------------------------------------------------------------------------------
 1 | <header class="my-activities-header">
 2 |   {{breadcrumbs}}
 3 | </header>
 4 | 
 5 | <nav class="my-activities-nav">
 6 |   {{my_activities_navigation}}
 7 | </nav>
 8 | 
 9 | <nav class="my-activities-sub-nav">
10 |   {{contribution_navigation}}
11 | </nav>
12 | 
13 | <div class="my-activities-table contribution-table">
14 |   {{contribution_table}}
15 | </div>
16 | 


--------------------------------------------------------------------------------
/document-head.html:
--------------------------------------------------------------------------------
1 | <!-- add code here that should appear in the document head -->
2 | 


--------------------------------------------------------------------------------
/error-page.html:
--------------------------------------------------------------------------------
1 | <div class="error-page">
2 |   {{error_header}}
3 |   {{error_message}}
4 |   {{home_page_link}}
5 | </div>
6 | 


--------------------------------------------------------------------------------
/following-page.html:
--------------------------------------------------------------------------------
 1 | <header class="my-activities-header">
 2 |   {{breadcrumbs}}
 3 | </header>
 4 | 
 5 | <nav class="my-activities-nav">
 6 |   {{my_activities_navigation}}
 7 | </nav>
 8 | 
 9 | <div class="my-activities-table following-table">
10 |   {{following_table}}
11 | </div>
12 | 


--------------------------------------------------------------------------------
/footer.html:
--------------------------------------------------------------------------------
1 | <footer class="footer">
2 |   <div class="footer-inner">
3 |     <!-- Footer content -->
4 |   </div>
5 | </footer>
6 | 


--------------------------------------------------------------------------------
/header.html:
--------------------------------------------------------------------------------
 1 | <header class="header">
 2 |   <div class="header-inner clearfix">
 3 |     <div class="left-nav">
 4 |       <div class="nav-link"><a href="https://www.khanacademy.org/"><img src="https://p2.zdassets.com/hc/settings_assets/526991/200061184/n9qTDbn85LPlx3KtZjNFxg-smaller_logo.png" width="166" height="28"></a></div>
 5 |       <div class="nav-link"><a href="/hc">Help Center</a></div>
 6 |     </div>
 7 |     <nav class="right-nav">
 8 |       <div class="nav-link">{{submit_a_request}}</div>
 9 |       <div class="nav-link">{{user_info}}</div>
10 |     </nav>
11 |   </div>
12 | </header>
13 | 


--------------------------------------------------------------------------------
/home-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | <div class="home-page-categories">
 5 |   <div class="categories-left">
 6 |     <h2>Guides</h2>
 7 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175790-For-Learners" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/hopper-55.png);">Learners</a>
 8 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175820-For-Teachers" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/pants-55.png);">Teachers & Coaches</a>
 9 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175830-For-Parents" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/sam-55.png);">Parents</a>
10 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175840-Help-out-Khan-Academy" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/leafers-55.png);">Volunteers & Donations</a> 
11 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200186020-Translators" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/mrpinkzd.png);">Translators</a> 
12 |   </div>
13 |   <div class="categories-right">
14 |     <h2>Categories</h2>
15 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175860-Common-Questions" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/faq-55.png);">Frequently asked questions</a>
16 |     <a href="https://khanacademy.zendesk.com/hc/en-us/categories/200175850-Accounts-and-Passwords" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/accounts-55.png);">Accounts and passwords</a>
17 |    <!-- <a href="https://khanacademy.zendesk.com/hc/communities/public/topics" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/discussion-55.png);">Discuss Khan Academy</a> -->
18 |     <a href="https://khanacademy.zendesk.com/hc/en-us/requests/new" style="background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/problem-55.png);">Report a problem</a>
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/new-request-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | 
 5 | <nav class="sub-nav clearfix">
 6 |   {{breadcrumbs}}
 7 | </nav>
 8 | 
 9 | <div class="clearfix">
10 | 
11 |   <section class="main-column">
12 |     <h1 class="new-request">Report a problem{{follow_up_hint}}</h1>
13 |     {{error_list}}
14 |     For us to help you we need to be able to reproduce the bug. To help this tell us exactly what steps we need to follow to         reproduce it. Please answer the following questions in the        desciption field.
15 | 
16 |     <br><br>1) Where were you when you found this idea/bug (enter a URL)?
17 |     <br>2) Please describe what your expected to happen, what steps you took to make that happen, and what didn't happen.
18 |     <br>3) If you reload your page, is it fixed?
19 |     <br><br>
20 |       {{form}}
21 |     </div>
22 |   </section>
23 | 
24 | </div>
25 | 
26 | {{chat}}
27 | 


--------------------------------------------------------------------------------
/request-list-page.html:
--------------------------------------------------------------------------------
 1 | <header class="my-activities-header">
 2 |   {{breadcrumbs}}
 3 | </header>
 4 | 
 5 | <nav class="my-activities-nav">
 6 |   {{my_activities_navigation}}
 7 | </nav>
 8 | 
 9 | <nav class="my-activities-sub-nav">
10 |   {{request_navigation}}
11 | </nav>
12 | 
13 | <div class="request-table-toolbar">
14 |   {{request_filter}}
15 |   {{organization_selector}}
16 |   {{status_selector}}
17 | </div>
18 | 
19 | <div class="my-activities-table request-table">
20 |   {{request_table}}
21 | </div>
22 | 


--------------------------------------------------------------------------------
/request-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | 
 5 | <nav class="sub-nav clearfix">
 6 |   {{breadcrumbs}}
 7 | </nav>
 8 | 
 9 | <div class="clearfix">
10 | 
11 |   <section class="main-column">
12 |     {{satisfaction}}
13 |     <h1>
14 |       <span class="request-id">{{request_id}}</span>
15 |       {{subject}}
16 |     </h1>
17 |     {{comment_list}}
18 |     {{comment_form}}
19 |     {{chat_about_my_ticket}}
20 |   </section>
21 | 
22 |   <section class="side-column">
23 |     {{request_details}}
24 |     {{submit_request}}
25 |   </section>
26 | 
27 | </div>
28 | 


--------------------------------------------------------------------------------
/search-results.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 | 
 5 | <nav class="sub-nav clearfix">
 6 |   {{breadcrumbs}}
 7 | </nav>
 8 | 
 9 | <div class="search-results clearfix">
10 |   <h1 class="search-results-heading">{{result_heading}}</h1>
11 |   {{results}}
12 | </div>
13 | 
14 | {{results_pagination}}
15 | 


--------------------------------------------------------------------------------
/section-page.html:
--------------------------------------------------------------------------------
 1 | <div class="search-box">
 2 |   <span class="pre-search">I need help with</span> {{search}}
 3 | </div>
 4 |     {{subscribe}}
 5 | 
 6 | <nav class="sub-nav clearfix">
 7 |   {{breadcrumbs}}
 8 | </nav>
 9 | 
10 | <h1>{{visibility}} {{title}}</h1>
11 | <p class="section-description">{{description}}</p>
12 | <div class="section-page">
13 |   {{article_list}}
14 | </div>


--------------------------------------------------------------------------------
/theme.css:
--------------------------------------------------------------------------------
   1 | /* ====================================================
   2 |    Custom styles
   3 |    ==================================================== */
   4 | .hp-bottom-bar {
   5 |   margin-top: 20px;
   6 | }
   7 | 
   8 | .hp-box {
   9 |   width: 220px;
  10 |   height: 120px;
  11 |   border-style: solid;
  12 |   border-width: 1px;
  13 |   border-color: #cccccc;
  14 |   float:left;
  15 |   margin: 10px 10px 10px 10px;
  16 |   padding: 10px 10px 10px 10px;
  17 |   background-color: white;
  18 |   color: #99cc66;
  19 |   font-size: 18px;
  20 | }
  21 | 
  22 | /* Hide user_id field from "new request" form */
  23 | .request_custom_fields_22555874 {
  24 |   display: none;
  25 | }
  26 | 
  27 | /* ====================================================
  28 |    Base styles
  29 |    ==================================================== */
  30 | *, input[type=search] {
  31 |   -webkit-box-sizing: border-box;
  32 |   -moz-box-sizing: border-box;
  33 |   box-sizing: border-box;
  34 | }
  35 | 
  36 | html {
  37 |   background-color: $color_5;
  38 | }
  39 | 
  40 | body {
  41 |   color: $color_3;
  42 |   font-family: "Proxima Nova", sans-serif;
  43 |   font-size: 14px;
  44 |   font-weight: lighter;
  45 |   line-height: 1.5;
  46 |   margin: 0;
  47 |   padding-bottom: 50px;
  48 | }
  49 | 
  50 | /*
  51 |  * Links
  52 |  */
  53 | a {
  54 |   color: #96ab4f;
  55 |   text-decoration: none;
  56 |   font-family: inherit;
  57 | }
  58 | 
  59 | a:hover {
  60 |   cursor: pointer;
  61 |   text-decoration: underline;
  62 | }
  63 | 
  64 | /*
  65 |  * Images
  66 |  */
  67 | img {
  68 |   max-width: 100%;
  69 |   vertical-align: middle;
  70 | }
  71 | 
  72 | img[width], img[height] {
  73 |   max-width: none;
  74 | }
  75 | 
  76 | figure > img {
  77 |   display: block;
  78 | }
  79 | 
  80 | /*
  81 |  * Lists
  82 |  */
  83 | ul, ol {
  84 |   list-style: none;
  85 |   margin: 0;
  86 |   padding: 0;
  87 | }
  88 | 
  89 | /*
  90 |  * Headings
  91 |  */
  92 | h1, h2, h3, h4, h5, h6 {
  93 |   color: inherit;
  94 |   font-family: inherit;
  95 |   font-weight: normal;
  96 | }
  97 | 
  98 | /*
  99 |  * Forms
 100 |  */
 101 | label {
 102 |   display: inline-block;
 103 |   vertical-align: middle;
 104 | }
 105 | 
 106 | input[type=checkbox] + label {
 107 |   display: inline-block;
 108 |   margin-left: 5px;
 109 | }
 110 | 
 111 | input, textarea {
 112 |   border: 1px solid #DDDDDD;
 113 |   border: 1px solid rgba(0, 0, 0, 0.13);
 114 |   padding: 10px;
 115 | }
 116 | 
 117 | textarea {
 118 |   height: 100px;
 119 |   padding: 7px 10px;
 120 |   resize: vertical;
 121 | }
 122 | 
 123 | textarea, input[type=text] {
 124 |   width: 100%;
 125 | }
 126 | 
 127 | input, textarea, select {
 128 |   color: #555555;
 129 | }
 130 | 
 131 | input::-ms-clear {
 132 |   display: none;
 133 | }
 134 | 
 135 | input::-webkit-outer-spin-button,
 136 | input::-webkit-inner-spin-button {
 137 |   margin: 0;
 138 |   -webkit-appearance: none;
 139 | }
 140 | 
 141 | ::-webkit-input-placeholder {
 142 |   color: #CCC;
 143 | }
 144 | 
 145 | :-ms-input-placeholder {
 146 |   color: #CCC;
 147 | }
 148 | 
 149 | ::-moz-placeholder {
 150 |   color: #CCC;
 151 | }
 152 | 
 153 | /*
 154 |  * Buttons
 155 |  */
 156 | button, [role=button], [type=button], [type=submit] {
 157 |   background: transparent;
 158 |   border-radius: 2px;
 159 |   border: 1px solid #DDDDDD;
 160 |   border: 1px solid rgba(0, 0, 0, 0.13);
 161 |   box-shadow: inset 0 -2px #f6f6f6;
 162 |   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.03);
 163 |   color: #158EC2;
 164 |   cursor: pointer;
 165 |   display: inline-block;
 166 |   font-size: 13px;
 167 |   font-weight: lighter;
 168 |   height: 30px;
 169 |   line-height: 28px;
 170 |   padding: 0 10px;
 171 |   position: relative;
 172 |   vertical-align: middle;
 173 |   white-space: nowrap;
 174 | }
 175 | 
 176 | a[role=button]:hover {
 177 |   text-decoration: none;
 178 | }
 179 | 
 180 | input[type=submit] {
 181 |   background: #444;
 182 |   border-color: transparent;
 183 |   box-shadow: inset 0 -2px #222;
 184 |   color: #FFF;
 185 |   -webkit-transition: opacity 300ms ease;
 186 |   transition: opacity 300ms ease;
 187 | }
 188 | 
 189 | input[type=submit][disabled] {
 190 |   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
 191 |   /* IE 8 */
 192 |   opacity: 0.4;
 193 | }
 194 | 
 195 | /*
 196 |  * Tables
 197 |  */
 198 | table {
 199 |   border-collapse: collapse;
 200 |   text-align: left;
 201 |   width: 100%;
 202 | }
 203 | 
 204 | td, th {
 205 |   border-color: #ECECEC;
 206 |   border-color: rgba(0, 0, 0, 0.07);
 207 |   border-style: solid;
 208 |   padding: 12px;
 209 | }
 210 | 
 211 | th {
 212 |   border-width: 1px 0;
 213 |   color: #BBB;
 214 |   font-size: 11px;
 215 |   font-weight: normal;
 216 |   white-space: nowrap;
 217 | }
 218 | 
 219 | td {
 220 |   border-width: 0 0 1px 0;
 221 | }
 222 | 
 223 | h1 {
 224 |   color: #333;
 225 |   font-size: 32px;
 226 |   font-weight: bold;
 227 |   margin: 20px 0;
 228 |   padding: 0 15px;
 229 | }
 230 | 
 231 | /* ====================================================
 232 |    Helper classes
 233 |    ==================================================== */
 234 | /*
 235 |  * Clearfix: contain floats
 236 |  */
 237 | .clearfix:before, .clearfix:after {
 238 |   content: " ";
 239 |   display: table;
 240 | }
 241 | 
 242 | .clearfix:after {
 243 |   clear: both;
 244 | }
 245 | 
 246 | /*
 247 |  * Column size
 248 |  */
 249 | .main-column {
 250 |   float: left;
 251 |   width: 600px;
 252 | }
 253 | 
 254 | .side-column {
 255 |   float: right;
 256 |   width: 250px;
 257 | }
 258 | 
 259 | /*
 260 |  * Dropdowns
 261 |  */
 262 | .dropdown-toggle:hover {
 263 |   text-decoration: none;
 264 | }
 265 | 
 266 | .dropdown-toggle:after {
 267 |   color: #888;
 268 |   content: "\25BE";
 269 |   display: inline-block;
 270 |   font-family: "entypo";
 271 |   font-size: 14px;
 272 |   margin-left: 5px;
 273 |   vertical-align: middle;
 274 | }
 275 | 
 276 | /*
 277 |  * Visibility
 278 |  */
 279 | .visibility-internal-icon:before {
 280 |   cursor: default;
 281 |   content: "\1F512";
 282 |   font-family: "entypo";
 283 |   margin-right: 5px;
 284 | }
 285 | 
 286 | .visibility-internal {
 287 |   position: relative;
 288 | }
 289 | 
 290 | .visibility-internal:before,
 291 | .visibility-internal:after {
 292 |   display: none;
 293 |   position: absolute;
 294 | }
 295 | 
 296 | .visibility-internal:hover:before,
 297 | .visibility-internal:hover:after {
 298 |   display: block;
 299 | }
 300 | 
 301 | .visibility-internal:before {
 302 |   background: #222;
 303 |   background: rgba(0, 0, 0, 0.85);
 304 |   border-radius: 4px;
 305 |   color: #FFF;
 306 |   content: attr(data-title);
 307 |   text-transform: none;
 308 |   font-family: sans-serif;
 309 |   left: -10px;
 310 |   margin-top: 5px;
 311 |   padding: 3px 10px;
 312 |   top: 100%;
 313 |   white-space: nowrap;
 314 |   z-index: 1;
 315 | }
 316 | 
 317 | .visibility-internal:after {
 318 |   border-bottom: 5px solid #222;
 319 |   border-bottom: 5px solid rgba(0, 0, 0, 0.85);
 320 |   border-left: 5px solid transparent;
 321 |   border-right: 5px solid transparent;
 322 |   bottom: -5px;
 323 |   content: "";
 324 |   height: 0;
 325 |   left: 50%;
 326 |   margin-left: -5px;
 327 |   width: 0;
 328 | }
 329 | 
 330 | /* ====================================================
 331 |    Content frame
 332 |    ==================================================== */
 333 | main, .header-inner {
 334 |   -moz-box-sizing: border-box;
 335 |   box-sizing: border-box;
 336 |   margin: 0 auto;
 337 |   width: 1000px;
 338 | }
 339 | 
 340 | /* ====================================================
 341 |    Header
 342 |    ==================================================== */
 343 | .header {
 344 |   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 345 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 346 |   height: 45px;
 347 |   position: relative;
 348 | }
 349 | 
 350 | .nav-link {
 351 |   border-right: 1px solid #ddd;
 352 |   float: left;
 353 |   line-height: 43px;
 354 |   padding: 2px 15px 0;
 355 | }
 356 | 
 357 | .nav-link:empty {
 358 |   display: none;
 359 | }
 360 | 
 361 | .nav-link a:link,
 362 | .nav-link a:visited {
 363 |   color: #444;
 364 |   display: block;
 365 |   margin: 0 -15px;
 366 |   padding: 0 15px;
 367 | }
 368 | 
 369 | .nav-link a:hover,
 370 | .nav-link a:active {
 371 |   color: #96ab4f;
 372 |   text-decoration: none;
 373 | }
 374 | 
 375 | .nav-link a.login {
 376 |   /* Override [role=button] styles */
 377 |   border: 0;
 378 |   box-shadow: none;
 379 |   font: inherit;
 380 |   height: auto;
 381 |   line-height: inherit;
 382 | }
 383 | 
 384 | .nav-link img {
 385 |   position: relative;
 386 |   top: -2px;
 387 | }
 388 | 
 389 | .left-nav,
 390 | .right-nav {
 391 |   border-left: 1px solid #ddd;
 392 | }
 393 | 
 394 | .left-nav {
 395 |   float: left;
 396 | }
 397 | 
 398 | .right-nav {
 399 |   float: right;
 400 | }
 401 | 
 402 | /* ====================================================
 403 |    User nav links
 404 |    ==================================================== */
 405 | .user-nav > * {
 406 |   display: inline-block;
 407 |   font-size: inherit;
 408 |   vertical-align: middle;
 409 | }
 410 | 
 411 | .user-info [role="button"] {
 412 |   background: #ffffff;
 413 |   background: linear-gradient(to bottom, white 0%, #f4f4f4 50%, #ededed 100%);
 414 |   border-bottom-color: #C0C0C0;
 415 |   border-radius: 3px;
 416 |   box-shadow: inset 0 -1px #DDD;
 417 |   color: #444;
 418 |   height: auto;
 419 |   line-height: 1;
 420 |   padding: 4px 10px 4px 4px;
 421 | }
 422 | 
 423 | .user-info [role="button"]:hover {
 424 |   border-color: #AAA;
 425 |   box-shadow: inset 0 -1px #BBB;
 426 | }
 427 | 
 428 | .user-info [role="button"]:active {
 429 |   background: linear-gradient(to bottom, whitesmoke 0%, #d5d5d5 100%);
 430 | }
 431 | 
 432 | .user-avatar {
 433 |   margin-right: 4px;
 434 |   max-height: 20px;
 435 | }
 436 | 
 437 | .user-avatar, .user-avatar + span {
 438 |   display: inline-block;
 439 |   vertical-align: middle;
 440 | }
 441 | 
 442 | /* ====================================================
 443 |    Search
 444 |    ==================================================== */
 445 | .search-box {
 446 |   background-color: $color_1;
 447 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/leaf-bg.png);
 448 |   background-position: center bottom;
 449 |   background-repeat: none;
 450 |   background-size: cover;
 451 |   /* Box shadow extends background visually outside the container */
 452 |   -webkit-box-shadow: -900px 0 $color_1, 900px 0 $color_1;
 453 |   box-shadow: -900px 0 $color_1, 900px 0 $color_1;
 454 |   font-size: 21px;
 455 |   padding: 40px 0;
 456 |   text-align: center;
 457 | }
 458 | 
 459 | .search-box .pre-search {
 460 |   color: #fff;
 461 |   display: inline-block;
 462 |   vertical-align: -1px;
 463 | }
 464 | 
 465 | .search-box .search {
 466 |   display: inline-block;
 467 |   margin-left: 10px;
 468 |   position: relative;
 469 | }
 470 | 
 471 | .search-box .search input {
 472 |   border: 0;
 473 |   display: inline-block;
 474 |   height: 60px;
 475 |   outline: 0;
 476 |   vertical-align: middle;
 477 | }
 478 | 
 479 | .search-box .search input[type=search],
 480 | .search-box .search input[type=text] {
 481 |   background: #fff;
 482 |   font-size: inherit;
 483 |   padding: 20px 52px 20px 15px;
 484 |   width: 720px;
 485 | }
 486 | 
 487 | .search-box .search input[type=submit] {
 488 |   background: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/magnifying-glass.png) 50% 50% no-repeat;
 489 |   border: 0;
 490 |   box-shadow: none;
 491 |   color: transparent;
 492 |   cursor: pointer;
 493 |   font-size: 1px;
 494 |   height: 32px;
 495 |   overflow: hidden;
 496 |   position: absolute;
 497 |   right: 12px;
 498 |   top: 14px;
 499 |   width: 32px;
 500 | }
 501 | 
 502 | /* ====================================================
 503 |    Navigation pages
 504 |    ==================================================== */
 505 | .help-center-name {
 506 |   color: #FFF;
 507 |   font-size: 60px;
 508 |   font-weight: bold;
 509 |   margin: 65px 0 50px 0;
 510 |   text-align: center;
 511 |   text-transform: uppercase;
 512 | }
 513 | 
 514 | .help-center-name + .search {
 515 |   margin-bottom: 135px;
 516 | }
 517 | 
 518 | .category-tree {
 519 |   border-color: rgba(0, 0, 0, 0.15);
 520 |   border-style: solid;
 521 |   border-width: 1px 0;
 522 |   padding: 20px 30px;
 523 | }
 524 | 
 525 | .category-tree h2 ~ *, .category-tree h3 ~ * {
 526 |   display: none;
 527 | }
 528 | 
 529 | .category-tree .category {
 530 |   display: inline-block;
 531 |   padding-right: 30px;
 532 |   vertical-align: top;
 533 |   width: 49.5%;
 534 | }
 535 | 
 536 | .category-tree .category h2 {
 537 |   margin: 12px 0;
 538 | }
 539 | 
 540 | .category-tree .category h2 a {
 541 |   color: inherit;
 542 |   font-weight: lighter;
 543 | }
 544 | 
 545 | .category-tree .section h3 {
 546 |   margin: 0;
 547 | }
 548 | 
 549 | .category-tree .section h3 a {
 550 |   color: inherit;
 551 |   font-weight: bold;
 552 |   font-size: 14px;
 553 | }
 554 | 
 555 | .category-tree .section {
 556 |   margin: 5px 20px;
 557 | }
 558 | 
 559 | .category-tree .article-list, .category-tree .section-empty a {
 560 |   margin: 20px;
 561 | }
 562 | 
 563 | .category-tree .section-empty a {
 564 |   display: block;
 565 | }
 566 | 
 567 | .category-description, .section-description {
 568 |   color: #BBB;
 569 |   margin-bottom: 30px;
 570 |   margin-top: 0px;
 571 | }
 572 | 
 573 | .section-tree,
 574 | .section-page {
 575 |   padding: 0 15px;
 576 | }
 577 | 
 578 | .section-tree .section {
 579 |   display: inline-block;
 580 |   padding: 0 50px 50px 0;
 581 |   vertical-align: top;
 582 |   width: 49.5%;
 583 | }
 584 | 
 585 | .section-tree .section h3 {
 586 |   color: #999;
 587 |   font-size: 21px;
 588 |   margin: 0 0 20px;
 589 |   text-transform: uppercase;
 590 | }
 591 | 
 592 | .section-tree .section h3 a {
 593 |   color: inherit;
 594 | }
 595 | 
 596 | .section-subscribe, .section-unsubscribe,
 597 | .article-subscribe, .article-unsubscribe {
 598 |   float: right;
 599 | }
 600 | 
 601 | .section-subscribe [role=button], .section-unsubscribe,
 602 | .article-subscribe, .article-unsubscribe {
 603 |   background: #ededed;
 604 |   border: 0;
 605 |   border-radius: 5px;
 606 |   box-shadow: none;
 607 |   height: 25px;
 608 |   line-height: 25px;
 609 |   margin-top: 5px;
 610 | }
 611 | 
 612 | .article-list li {
 613 |   margin-bottom: 6px;
 614 | }
 615 | 
 616 | .article-list li a {
 617 |   color: #444;
 618 | }
 619 | 
 620 | .see-all-articles {
 621 |   font-weight: bold;
 622 | }
 623 | 
 624 | .category-tree .see-all-articles {
 625 |   position: relative;
 626 |   top: -10px;
 627 |   left: 20px;
 628 | }
 629 | 
 630 | /* ====================================================
 631 |    Community box
 632 |    ==================================================== */
 633 | .community {
 634 |   background: rgba(0, 0, 0, 0.025);
 635 |   border-radius: 5px;
 636 |   margin-top: 40px;
 637 |   padding: 25px 30px;
 638 | }
 639 | 
 640 | .community h4 {
 641 |   color: #111111;
 642 |   float: right;
 643 |   font-size: 13px;
 644 |   margin: 0;
 645 | }
 646 | 
 647 | .community h4 a {
 648 |   font-weight: normal;
 649 |   font-size: 11px;
 650 | }
 651 | 
 652 | .trending-questions {
 653 |   margin-bottom: 40px;
 654 | }
 655 | 
 656 | .trending-questions h2 {
 657 |   border-bottom: 1px solid #e6e6e6;
 658 |   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 659 |   color: #111111;
 660 |   font-weight: normal;
 661 |   font-size: inherit;
 662 |   margin: 0 0 15px 0;
 663 |   padding-bottom: 20px;
 664 |   text-transform: uppercase;
 665 | }
 666 | 
 667 | .trending-questions:last-child {
 668 |   margin-bottom: 0;
 669 | }
 670 | 
 671 | .trending-question-list {
 672 |   margin-bottom: 15px;
 673 | }
 674 | 
 675 | .trending-question-list li {
 676 |   display: inline-block;
 677 |   font-size: 13px;
 678 |   padding: 10px 25px 0 0;
 679 |   width: 49.5%;
 680 | }
 681 | 
 682 | /* ====================================================
 683 |    Promoted tooltip
 684 |    ==================================================== */
 685 | .article-promoted span {
 686 |   cursor: default;
 687 |   font-family: "entypo";
 688 |   margin-right: 5px;
 689 |   position: relative;
 690 | }
 691 | 
 692 | .article-promoted span:before,
 693 | .article-promoted span:after {
 694 |   display: none;
 695 |   position: absolute;
 696 | }
 697 | 
 698 | .article-promoted span:hover:before,
 699 | .article-promoted span:hover:after {
 700 |   display: block;
 701 | }
 702 | 
 703 | .article-promoted span:before {
 704 |   background: #222;
 705 |   background: rgba(0, 0, 0, 0.85);
 706 |   border-radius: 4px;
 707 |   color: #FFF;
 708 |   content: attr(data-title);
 709 |   font-family: sans-serif;
 710 |   left: -10px;
 711 |   margin-top: 5px;
 712 |   padding: 3px 10px;
 713 |   top: 100%;
 714 |   white-space: nowrap;
 715 |   z-index: 1;
 716 | }
 717 | 
 718 | .article-promoted span:after {
 719 |   border-bottom: 5px solid #222;
 720 |   border-bottom: 5px solid rgba(0, 0, 0, 0.85);
 721 |   border-left: 5px solid transparent;
 722 |   border-right: 5px solid transparent;
 723 |   bottom: -5px;
 724 |   content: "";
 725 |   height: 0;
 726 |   left: 50%;
 727 |   margin-left: -5px;
 728 |   width: 0;
 729 | }
 730 | 
 731 | /* ====================================================
 732 |    Sub nav
 733 |    ==================================================== */
 734 | .sub-nav {
 735 |   background: #f7f7f7;
 736 |   /* Box shadow extends background visually outside the container */
 737 |   -webkit-box-shadow: -900px 0 #f7f7f7, 900px 0 #f7f7f7;
 738 |   box-shadow: -900px 0 #f7f7f7, 900px 0 #f7f7f7;
 739 |   margin-bottom: 30px;
 740 |   padding: 0 15px;
 741 | }
 742 | 
 743 | .sub-nav:before {
 744 |   background: #ccc;
 745 |   /* Box shadow extends background visually outside the container */
 746 |   -webkit-box-shadow: -900px 0 #ccc, 900px 0 #ccc;
 747 |   box-shadow: -900px 0 #ccc, 900px 0 #ccc;
 748 |   content: "";
 749 |   display: block;
 750 |   height: 1px;
 751 |   margin-bottom: 8px;
 752 | }
 753 | 
 754 | .sub-nav:after {
 755 |   background: #ccc;
 756 |   /* Box shadow extends background visually outside the container */
 757 |   -webkit-box-shadow: -900px 0 #ccc, 900px 0 #ccc;
 758 |   box-shadow: -900px 0 #ccc, 900px 0 #ccc;
 759 |   content: "";
 760 |   display: block;
 761 |   height: 1px;
 762 |   margin-top: 6px;
 763 | }
 764 | 
 765 | .sub-nav .breadcrumbs {
 766 |   height: 21px;
 767 | }
 768 | 
 769 | /* ====================================================
 770 |    Breadcrumbs
 771 |    ==================================================== */
 772 | .breadcrumbs li {
 773 |   float: left;
 774 |   font-weight: bold;
 775 |   margin-right: 10px;
 776 |   white-space: nowrap;
 777 | }
 778 | 
 779 | .breadcrumbs li a {
 780 |   /* Make only the last (selected) breadcrumb bold */
 781 |   font-weight: normal;
 782 | }
 783 | 
 784 | .breadcrumbs li + li:before {
 785 |   font-weight: normal;
 786 |   margin-right: 5px;
 787 |   content: ">";
 788 | }
 789 | 
 790 | /* ====================================================
 791 |    Article
 792 |    ==================================================== */
 793 | .article-body,
 794 | .article-meta,
 795 | .article-footer,
 796 | .article-comments {
 797 |   padding: 0 15px;
 798 | }
 799 | 
 800 | .article-meta,
 801 | .article-footer,
 802 | .article-comments {
 803 |   display: none;
 804 | }
 805 | 
 806 | .article-column {
 807 |   width: 700px;
 808 | }
 809 | 
 810 | .article-column h1 {
 811 |   font-size: 24px;
 812 |   font-weight: normal;
 813 | }
 814 | 
 815 | /*
 816 |  * Body
 817 |  */
 818 | .article-body {
 819 |   line-height: 1.6;
 820 |   font-size: 14px;
 821 |   word-wrap: break-word;
 822 | }
 823 | 
 824 | .article-body img {
 825 |   border: 1px solid #ECECEC;
 826 |   border: 1px solid rgba(0, 0, 0, 0.07);
 827 |   height: auto;
 828 |   max-width: 100%;
 829 |   padding: 3px;
 830 | }
 831 | 
 832 | .article-body pre {
 833 |   background: #f6f6f6;
 834 |   background: rgba(0, 0, 0, 0.02);
 835 |   border: 1px solid #ECECEC;
 836 |   border: 1px solid rgba(0, 0, 0, 0.07);
 837 |   border-radius: 3px;
 838 |   padding: 10px 15px;
 839 |   overflow: auto;
 840 |   white-space: pre;
 841 | }
 842 | 
 843 | .article-body blockquote {
 844 |   border-left: 1px solid #ECECEC;
 845 |   border-left: 1px solid rgba(0, 0, 0, 0.07);
 846 |   color: #bbb;
 847 |   font-style: italic;
 848 |   margin: 20px 0;
 849 |   padding-left: 20px;
 850 | }
 851 | 
 852 | .article-body ul,
 853 | .article-body ol {
 854 |   margin: 20px 0 20px 20px;
 855 |   list-style-position: outside;
 856 | }
 857 | 
 858 | .article-body li > ul,
 859 | .article-body li > ol {
 860 |   margin: 0 0 0 20px;
 861 | }
 862 | 
 863 | .article-body ul {
 864 |   list-style-type: disc;
 865 | }
 866 | 
 867 | .article-body ol {
 868 |   list-style-type: decimal;
 869 | }
 870 | 
 871 | .article-body li {
 872 |   margin-left: 20px;
 873 | }
 874 | 
 875 | .article-meta {
 876 |   margin-top: 40px;
 877 |   margin-bottom: 35px;
 878 | }
 879 | 
 880 | /*
 881 |  * Footer
 882 |  */
 883 | .article-footer {
 884 |   border-color: #ECECEC;
 885 |   border-color: rgba(0, 0, 0, 0.07);
 886 |   border-style: solid;
 887 |   border-width: 0 0 1px 0;
 888 |   margin: 30px 0;
 889 |   padding: 20px 15px;
 890 | }
 891 | 
 892 | .article-footer .article-vote {
 893 |   float: left;
 894 | }
 895 | 
 896 | .article-footer .share {
 897 |   float: right;
 898 |   margin-top: 2px;
 899 | }
 900 | 
 901 | /*
 902 |  * Inline votes
 903 |  */
 904 | .article-vote {
 905 |   position: relative;
 906 | }
 907 | 
 908 | .article-vote-controls {
 909 |   display: inline-block;
 910 |   margin-left: 20px;
 911 | }
 912 | 
 913 | .article-vote-count {
 914 |   color: #a6a6a6;
 915 |   left: 100%;
 916 |   margin-left: 25px;
 917 |   margin-top: 7px;
 918 |   position: absolute;
 919 |   top: 0;
 920 |   white-space: nowrap;
 921 | }
 922 | 
 923 | /*
 924 |  * Vote icons
 925 |  */
 926 | .article-vote-up, .article-vote-down {
 927 |   color: inherit;
 928 |   font-family: "entypo";
 929 | }
 930 | 
 931 | .article-vote-up:before {
 932 |   content: "\1f44d";
 933 | }
 934 | 
 935 | .article-vote-down:before {
 936 |   content: "\1f44e";
 937 | }
 938 | 
 939 | .article-footer a, .article-footer a:before {
 940 |   background: #cccccc;
 941 |   box-shadow: none;
 942 |   border: 0;
 943 |   border-radius: 50%;
 944 |   color: #FFF;
 945 |   height: 30px;
 946 |   line-height: 30px;
 947 | }
 948 | 
 949 | .article-more-questions {
 950 |   margin-top: 35px;
 951 |   margin-bottom: 60px;
 952 | }
 953 | 
 954 | .article-comments h2 {
 955 |   font-size: inherit;
 956 |   font-weight: lighter;
 957 | }
 958 | 
 959 | /* ====================================================
 960 |    Social share links
 961 |    ==================================================== */
 962 | .share li {
 963 |   display: inline-block;
 964 | }
 965 | 
 966 | .share a {
 967 |   display: inline-block;
 968 |   height: 30px;
 969 |   line-height: 30px;
 970 |   overflow: hidden;
 971 |   vertical-align: middle;
 972 |   width: 30px;
 973 | }
 974 | 
 975 | .share a:before {
 976 |   display: inline-block;
 977 |   color: #FFF;
 978 |   font-family: "entypo";
 979 |   text-align: center;
 980 |   width: 100%;
 981 | }
 982 | 
 983 | .share a:hover {
 984 |   text-decoration: none;
 985 | }
 986 | 
 987 | .share-twitter:before {
 988 |   background: #00ACED;
 989 |   content: "\F309";
 990 | }
 991 | 
 992 | .share-facebook:before {
 993 |   background: #3B5998;
 994 |   content: "\F30C";
 995 | }
 996 | 
 997 | .share-linkedin:before {
 998 |   background: #4875B4;
 999 |   content: "\F318";
1000 | }
1001 | 
1002 | .share-googleplus:before {
1003 |   background: #CD3C2A;
1004 |   content: "\F30F";
1005 | }
1006 | 
1007 | .share-label {
1008 |   cursor: pointer;
1009 | }
1010 | 
1011 | .share-label + .share {
1012 |   background: #FFF;
1013 |   border: 1px solid #DDDDDD;
1014 |   border: 1px solid rgba(0, 0, 0, 0.17);
1015 |   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
1016 |   left: 50%;
1017 |   line-height: 70px;
1018 |   margin: 10px 0 0 -75px;
1019 |   position: absolute;
1020 |   text-align: center;
1021 |   top: 100%;
1022 |   white-space: nowrap;
1023 |   width: 175px;
1024 |   z-index: 1;
1025 | }
1026 | 
1027 | .share-label + .share:before, .share-label + .share:after {
1028 |   content: "";
1029 |   display: inline-block;
1030 |   left: 50%;
1031 |   position: absolute;
1032 | }
1033 | 
1034 | .share-label + .share:before {
1035 |   top: -7px;
1036 |   border-right: 7px solid rgba(0, 0, 0, 0);
1037 |   border-bottom: 7px solid #CCC;
1038 |   border-left: 7px solid rgba(0, 0, 0, 0);
1039 |   margin-left: -6px;
1040 | }
1041 | 
1042 | .share-label + .share:after {
1043 |   top: -6px;
1044 |   border-right: 6px solid rgba(0, 0, 0, 0);
1045 |   border-bottom: 6px solid #FFF;
1046 |   border-left: 6px solid rgba(0, 0, 0, 0);
1047 |   margin-left: -5px;
1048 | }
1049 | 
1050 | .share-label[aria-selected="true"] {
1051 |   color: #111;
1052 | }
1053 | 
1054 | .share-label[aria-selected="true"] + .share {
1055 |   display: block;
1056 | }
1057 | 
1058 | .share-label[aria-selected="false"] + .share {
1059 |   display: none;
1060 | }
1061 | 
1062 | /* ====================================================
1063 |    Attachments/Screencasts
1064 |    ==================================================== */
1065 | .attachment-list, .screencast-list {
1066 |   font-size: 11px;
1067 | }
1068 | 
1069 | .attachment-list span, .screencast-list span {
1070 |   color: #bbb;
1071 | }
1072 | 
1073 | .comment .attachment-list, .comment .screencast-list {
1074 |   margin-top: 25px;
1075 | }
1076 | .comment .attachment-list li, .comment .screencast-list li {
1077 |   margin-bottom: 10px;
1078 | }
1079 | .comment .attachment-list li:before, .comment .screencast-list li:before {
1080 |   background: #f6f6f6;
1081 |   border-radius: 3px;
1082 |   color: #bbb;
1083 |   font-family: "entypo";
1084 |   margin-right: 5px;
1085 |   padding: 5px;
1086 | }
1087 | .comment .attachment-list li:before {
1088 |   content: "\1F4CE";
1089 | }
1090 | .comment .screencast-list li:before {
1091 |   content: "\1F4BB";
1092 | }
1093 | 
1094 | /* ====================================================
1095 |    Comments - Used in the Article page and Request page
1096 |    ==================================================== */
1097 | .comment, .comment-form {
1098 |   border-top: 1px solid #ECECEC;
1099 |   border-top: 1px solid rgba(0, 0, 0, 0.07);
1100 |   font-size: inherit;
1101 |   line-height: 1.3;
1102 |   min-height: 100px;
1103 |   padding: 20px 0;
1104 |   position: relative;
1105 | }
1106 | 
1107 | .comment-container {
1108 |   margin-left: 90px;
1109 | }
1110 | 
1111 | .comment-avatar {
1112 |   position: absolute;
1113 |   display: inline-block;
1114 | }
1115 | 
1116 | .comment-avatar img {
1117 |   border: 0;
1118 |   border-radius: 3px;
1119 |   max-width: 70px;
1120 |   max-height: 70px;
1121 | }
1122 | 
1123 | .comment-avatar-agent:after {
1124 |   background-color: transparent;
1125 |   background-image: url(/hc/assets/agent-marker.png);
1126 |   background-image: url(/hc/assets/agent-marker.svg);
1127 |   background-repeat: no-repeat;
1128 |   background-size: 14px;
1129 |   position: absolute;
1130 |   width: 15px;
1131 |   height: 15px;
1132 |   bottom: -5px;
1133 |   right: -3px;
1134 |   content: " ";
1135 | }
1136 | 
1137 | .comment-author {
1138 |   display: inline-block;
1139 |   font-size: inherit;
1140 |   margin: 0 0 10px 0;
1141 | }
1142 | 
1143 | .comment-published, .comment-edit, .comment-delete, .comment-mark-as-spam {
1144 |   float: right;
1145 |   font-size: 11px;
1146 |   margin-right: 12px;
1147 |   margin-left: 12px;
1148 | }
1149 | 
1150 | .comment-published {
1151 |   color: #bbb;
1152 |   font-weight: lighter;
1153 | }
1154 | 
1155 | .comment-edit:before, .comment-delete:before, .comment-mark-as-spam:before {
1156 |   color: #CCC;
1157 |   content: "\2022";
1158 |   font-size: 10px;
1159 |   margin-left: -14px;
1160 |   pointer-events: none;
1161 |   position: absolute;
1162 | }
1163 | 
1164 | .comment-body {
1165 |   font-weight: lighter;
1166 |   line-height: 2;
1167 |   word-wrap: break-word;
1168 | }
1169 | 
1170 | .comment-body p:first-child {
1171 |   margin-top: 0px;
1172 | }
1173 | 
1174 | .comment-form textarea {
1175 |   border-radius: 2px 2px 0 0;
1176 |   border-width: 1px;
1177 | }
1178 | 
1179 | .comment-attachments {
1180 |   border-color: #DDDDDD;
1181 |   border-color: rgba(0, 0, 0, 0.13);
1182 |   border-style: solid;
1183 |   border-radius: 0 0 2px 2px;
1184 |   border-width: 0 1px 1px;
1185 |   padding: 10px;
1186 | }
1187 | 
1188 | .comment-form {
1189 |   padding-top: 30px;
1190 | }
1191 | 
1192 | .comment-form-controls {
1193 |   display: none;
1194 |   margin-top: 10px;
1195 |   text-align: right;
1196 | }
1197 | 
1198 | .comment-form-controls input[type=submit] {
1199 |   margin-left: 15px;
1200 | }
1201 | 
1202 | .comment-mark-as-solved {
1203 |   float: left;
1204 |   margin-top: 5px;
1205 | }
1206 | 
1207 | .comment-screencasts {
1208 |   float: left;
1209 |   margin-top: 5px;
1210 |   margin-right: 25px;
1211 | }
1212 | 
1213 | .comment-list + .pagination {
1214 |   border-top: 1px solid #ECECEC;
1215 |   border-top: 1px solid rgba(0, 0, 0, 0.07);
1216 | }
1217 | 
1218 | .pending-comments-list {
1219 |   list-style: none;
1220 | }
1221 | 
1222 | .pending-moderation-comment-badge {
1223 |   border-style: solid;
1224 |   border-width: 1px;
1225 |   border-color: #c7aa2b;
1226 |   color: #c7aa2b;
1227 |   padding: 3px 5px;
1228 |   margin-top: 10px;
1229 |   font-size: 12px;
1230 | }
1231 | 
1232 | /* ==========================================================================
1233 |    Pagination
1234 |    ========================================================================== */
1235 | .pagination {
1236 |   line-height: 0;
1237 |   padding: 20px 0;
1238 |   text-align: center;
1239 | }
1240 | 
1241 | .pagination ul {
1242 |   display: inline-block;
1243 |   list-style: none;
1244 | }
1245 | 
1246 | .pagination li {
1247 |   float: left;
1248 |   border: 1px solid #ECECEC;
1249 |   border: 1px solid rgba(0, 0, 0, 0.07);
1250 | }
1251 | 
1252 | .pagination li + li {
1253 |   border-left: none;
1254 | }
1255 | 
1256 | .pagination a, .pagination span {
1257 |   display: inline-block;
1258 |   line-height: 20px;
1259 |   font-size: 12px;
1260 |   padding: 5px 12px;
1261 | }
1262 | 
1263 | .pagination-current {
1264 |   background-color: #f6f6f6;
1265 |   background-color: rgba(0, 0, 0, 0.03);
1266 |   color: #AAA;
1267 | }
1268 | 
1269 | .pagination-first {
1270 |   border-radius: 3px 0 0 3px;
1271 | }
1272 | 
1273 | .pagination-last {
1274 |   border-radius: 0 3px 3px 0;
1275 | }
1276 | 
1277 | /* ====================================================
1278 |    My activities
1279 |    ==================================================== */
1280 | .my-activities-header .breadcrumbs li:first-child,
1281 | .my-activities-header .breadcrumbs li:before {
1282 |   display: none;
1283 | }
1284 | 
1285 | .my-activities-header {
1286 |   font-size: 20px;
1287 |   font-weight: bold;
1288 |   padding: 25px 0;
1289 | }
1290 | 
1291 | .my-activities-nav {
1292 |   border-top: 1px solid #ECECEC;
1293 |   border-top: 1px solid rgba(0, 0, 0, 0.07);
1294 |   margin-bottom: 55px;
1295 |   padding: 25px 0;
1296 | }
1297 | 
1298 | .my-activities-nav li {
1299 |   padding-right: 30px;
1300 | }
1301 | 
1302 | .my-activities-sub-nav li {
1303 |   padding-right: 15px;
1304 | }
1305 | 
1306 | .my-activities-nav li, .my-activities-sub-nav li {
1307 |   display: inline-block;
1308 |   font-weight: bold;
1309 | }
1310 | 
1311 | .my-activities-nav li a, .my-activities-sub-nav li a {
1312 |   font-weight: normal;
1313 | }
1314 | 
1315 | .my-activities-nav li + li {
1316 |   border-left: 1px solid #ECECEC;
1317 |   border-left: 1px solid rgba(0, 0, 0, 0.07);
1318 |   padding-left: 30px;
1319 | }
1320 | 
1321 | .my-activities-sub-nav li + li {
1322 |   padding-left: 15px;
1323 | }
1324 | 
1325 | .my-activities-sub-nav {
1326 |   padding: 15px 0;
1327 |   position: relative;
1328 | }
1329 | 
1330 | .request-table-toolbar {
1331 |   background-color: #FAFAFA;
1332 |   padding: 8px;
1333 |   text-align: right;
1334 | }
1335 | 
1336 | .status-selection, .organization-selection {
1337 |   display: inline-block;
1338 | }
1339 | 
1340 | .status-selection > span, .organization-selection > span {
1341 |   margin-right: 10px;
1342 | }
1343 | 
1344 | .status-selection button, .organization-selection button {
1345 |   background: #FFF;
1346 |   border-radius: 0;
1347 |   color: inherit;
1348 |   height: 27px;
1349 |   line-height: 25px;
1350 |   min-width: 85px;
1351 |   text-align: left;
1352 | }
1353 | 
1354 | .status-selection button:after, .organization-selection button:after {
1355 |   color: #adadad;
1356 |   float: right;
1357 |   margin-left: 15px;
1358 | }
1359 | 
1360 | .organization-selection button {
1361 |   margin-right: 15px;
1362 | }
1363 | 
1364 | .requests-search {
1365 |   border-radius: 15px;
1366 |   float: left;
1367 |   height: 27px;
1368 |   outline: none;
1369 |   padding: 5px 15px;
1370 |   width: 250px;
1371 | }
1372 | 
1373 | .my-activities-table a {
1374 |   display: inline-block;
1375 |   overflow: hidden;
1376 |   text-overflow: ellipsis;
1377 |   white-space: nowrap;
1378 | }
1379 | 
1380 | .my-requests th:first-child + th + th, .my-requests td:first-child + td + td {
1381 |   display: none;
1382 | }
1383 | 
1384 | .request-table a {
1385 |   max-width: 550px;
1386 | }
1387 | 
1388 | .following-table a {
1389 |   max-width: 390px;
1390 | }
1391 | 
1392 | .contribution-table a {
1393 |   max-width: 250px;
1394 | }
1395 | 
1396 | .request-table td:nth-child(1) {
1397 |   width: 5%;
1398 | }
1399 | 
1400 | .request-table td:nth-child(2) {
1401 |   width: 65%;
1402 | }
1403 | 
1404 | .request-table td:nth-child(3) {
1405 |   width: 15%;
1406 | }
1407 | 
1408 | .request-table td:nth-child(4) {
1409 |   width: 15%;
1410 | }
1411 | 
1412 | .following-table td:nth-child(1) {
1413 |   width: 45%;
1414 | }
1415 | 
1416 | .following-table td:nth-child(2) {
1417 |   width: 15%;
1418 | }
1419 | 
1420 | .following-table td:nth-child(3) {
1421 |   width: 30%;
1422 | }
1423 | 
1424 | .following-table td:nth-child(4) {
1425 |   width: 10%;
1426 | }
1427 | 
1428 | /* ====================================================
1429 |    Requests
1430 |    ==================================================== */
1431 | .request-follow-up {
1432 |   text-align: right;
1433 | }
1434 | 
1435 | .follow-up-hint {
1436 |   display: inline-block;
1437 |   float: right;
1438 |   font-size: 13px;
1439 |   margin-top: 13px;
1440 | }
1441 | 
1442 | .request-details {
1443 |   background: #f6f6f6;
1444 |   background: rgba(0, 0, 0, 0.02);
1445 |   border: 1px solid #ECECEC;
1446 |   border: 1px solid rgba(0, 0, 0, 0.07);
1447 |   border-radius: 3px;
1448 |   margin: 30px 0 30px;
1449 |   padding: 15px 20px;
1450 | }
1451 | 
1452 | .request-details li + li {
1453 |   margin-top: 10px;
1454 | }
1455 | 
1456 | .request-header {
1457 |   font-weight: lighter;
1458 |   font-size: 1.7em;
1459 |   margin: 1em 0;
1460 | }
1461 | 
1462 | .request-id {
1463 |   color: #bbb;
1464 |   display: block;
1465 |   font-size: 13px;
1466 | }
1467 | 
1468 | .request-details {
1469 |   font-size: 12px;
1470 | }
1471 | 
1472 | .request-details dt ~ dt {
1473 |   font-weight: bold;
1474 |   margin-top: 15px;
1475 | }
1476 | 
1477 | .request-details dd {
1478 |   margin: 2px 0 0;
1479 | }
1480 | 
1481 | .request-details dd ul {
1482 |   margin: 10px 0;
1483 | }
1484 | 
1485 | .request-details dd li {
1486 |   list-style-type: disc;
1487 |   list-style-position: inside;
1488 |   margin: 0;
1489 | }
1490 | 
1491 | .request-details .nested-field-tag:before {
1492 |   content: " > ";
1493 | }
1494 | .request-details .nested-field-tag:first-child:before {
1495 |   content: "";
1496 | }
1497 | 
1498 | .request-status {
1499 |   color: #FFF;
1500 |   border-radius: 3px;
1501 |   display: inline-block;
1502 |   font-size: 11px;
1503 |   font-weight: normal;
1504 |   letter-spacing: 1px;
1505 |   padding: 2px 5px;
1506 |   white-space: nowrap;
1507 | }
1508 | 
1509 | .request-open {
1510 |   background: #59BBE0;
1511 | }
1512 | 
1513 | .request-answered {
1514 |   background: #F5CA00;
1515 | }
1516 | 
1517 | .request-solved {
1518 |   background: #828282;
1519 | }
1520 | 
1521 | /* ====================================================
1522 |    Search results
1523 |    ==================================================== */
1524 | body.community-enabled .search-results-column {
1525 |   float: left;
1526 |   margin-left: 15px;
1527 |   width: 430px;
1528 | }
1529 | 
1530 | body.community-enabled .search-results-column ~ .search-results-column {
1531 |   margin-left: 40px;
1532 | }
1533 | 
1534 | .search-results-subheading {
1535 |   border-bottom: 1px solid #ECECEC;
1536 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1537 |   padding-bottom: 10px;
1538 |   margin-bottom: 0;
1539 | }
1540 | 
1541 | .search-results-subheading-link {
1542 |   font-size: 13px;
1543 |   font-weight: normal;
1544 |   margin-left: 5px;
1545 | }
1546 | 
1547 | .search-result {
1548 |   margin: 0;
1549 |   padding: 20px 0;
1550 | }
1551 | 
1552 | .search-result + .search-result {
1553 |   border-top: 1px solid #ECECEC;
1554 |   border-top: 1px solid rgba(0, 0, 0, 0.07);
1555 | }
1556 | 
1557 | .search-results-list {
1558 |   margin: 0;
1559 | }
1560 | 
1561 | .search-result-link {
1562 |   font-size: 16px;
1563 | }
1564 | 
1565 | .search-result-description,
1566 | .search-result-meta {
1567 |   padding-top: 16px;
1568 | }
1569 | 
1570 | .search-result-meta-name,
1571 | .search-result-meta-time,
1572 | .search-result-meta-count {
1573 |   font-size: 12px;
1574 |   color: #bbb;
1575 | }
1576 | 
1577 | .search-result-meta-time:before,
1578 | .search-result-meta-count:before {
1579 |   display: inline-block;
1580 |   padding-right: 5px;
1581 |   content: '\2022';
1582 |   speak: none;
1583 |   line-height: 1;
1584 |   -webkit-font-smoothing: antialiased;
1585 | }
1586 | 
1587 | .search-result-votes {
1588 |   background: #A8D119;
1589 |   border-radius: 2px;
1590 |   color: #FFF;
1591 |   display: inline-block;
1592 |   line-height: 1;
1593 |   margin-left: 5px;
1594 |   padding: 4px 5px;
1595 |   position: relative;
1596 |   top: -2px;
1597 | }
1598 | 
1599 | .search-result-votes:before {
1600 |   content: "\1F44D";
1601 |   font-family: "entypo";
1602 |   margin-right: 3px;
1603 | }
1604 | 
1605 | .search-results + .pagination {
1606 |   border-top: 1px solid #ECECEC;
1607 |   border-top: 1px solid rgba(0, 0, 0, 0.07);
1608 | }
1609 | 
1610 | /* ====================================================
1611 |    Forms
1612 |    ==================================================== */
1613 | .form {
1614 |   padding: 0 15px;
1615 | }
1616 | 
1617 | .form-field + .form-field {
1618 |   margin-top: 25px;
1619 | }
1620 | 
1621 | .form-field label {
1622 |   color: #666;
1623 |   display: block;
1624 |   margin-bottom: 5px;
1625 | }
1626 | 
1627 | .form-field input[type=checkbox] + label {
1628 |   margin: 0 0 0 10px;
1629 | }
1630 | 
1631 | .form-field textarea, .form-field input {
1632 |   box-shadow: inset 0 1px #E3E3E3;
1633 |   box-shadow: inset 0 1px rgba(0, 0, 0, 0.11);
1634 | }
1635 | 
1636 | .form-field p {
1637 |   color: #666;
1638 |   font-size: 12px;
1639 | }
1640 | 
1641 | .form-field input[type=number], .form-field input.datepicker {
1642 |   width: 150px;
1643 | }
1644 | 
1645 | .form form + form,
1646 | .searchbox {
1647 |   margin-top: 25px;
1648 | }
1649 | 
1650 | .searchbox-suggestions {
1651 |   border-radius: 4px;
1652 |   background-color: #fff;
1653 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
1654 |   border: solid 1px #ccc;
1655 |   padding: 10px 20px;
1656 | }
1657 | 
1658 | .searchbox-suggestions li {
1659 |   padding: 5px 0;
1660 | }
1661 | 
1662 | [data-loading="true"] input,
1663 | [data-loading="true"] textarea {
1664 |   background: transparent url(/hc/assets/loader.gif) 99% 50% no-repeat;
1665 |   background-size: 16px 16px;
1666 | }
1667 | 
1668 | .form footer {
1669 |   margin-top: 30px;
1670 | }
1671 | 
1672 | .form footer input[type=submit] {
1673 |   background: #a8bb6a;
1674 |   border: 0;
1675 |   border-radius: 15px;
1676 |   box-shadow: none;
1677 |   -moz-box-sizing: border-box;
1678 |   box-sizing: border-box;
1679 |   font: inherit;
1680 |   width: 100%;
1681 | }
1682 | 
1683 | /* ====================================================
1684 |    Error pages
1685 |    ==================================================== */
1686 | .error-page {
1687 |   margin: 0 auto;
1688 |   max-width: 500px;
1689 |   padding-top: 5%;
1690 | }
1691 | 
1692 | .error-page h1 {
1693 |   font-size: 52px;
1694 |   margin-bottom: 0;
1695 | }
1696 | 
1697 | .error-page h2 {
1698 |   font-size: 16px;
1699 |   margin-bottom: 5px;
1700 | }
1701 | 
1702 | .error-page > a {
1703 |   display: block;
1704 |   margin-top: 25px;
1705 | }
1706 | 
1707 | /* ====================================================
1708 |    Community
1709 |    ==================================================== */
1710 | /*
1711 |  * Heading
1712 |  */
1713 | .community-heading {
1714 |   font-size: 18px;
1715 |   font-weight: bold;
1716 |   display: inline-block;
1717 | }
1718 | 
1719 | /*
1720 |  * Nav
1721 |  */
1722 | .community-nav {
1723 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1724 |   border-top: 0;
1725 |   margin: 5px 0px 5px 0px;
1726 |   padding: 10px 0;
1727 | }
1728 | 
1729 | .community-nav li {
1730 |   display: inline-block;
1731 |   font-weight: bold;
1732 |   padding-right: 30px;
1733 | }
1734 | 
1735 | .community-nav li a {
1736 |   font-weight: normal;
1737 | }
1738 | 
1739 | /*.community-nav li + li {
1740 |   border-left: 1px solid #ECECEC;
1741 |   border-left: 1px solid rgba(0, 0, 0, 0.07);
1742 |   padding-left: 30px;
1743 | }*/
1744 | 
1745 | .community-nav li:last-child {
1746 |   float: right;
1747 |   border-radius:25px;
1748 |   margin: 0;
1749 |   padding: 0;
1750 |   position: relative;
1751 |   top: -5px;
1752 |   background-color: #a8bb6a;
1753 |   color: #ffffff;
1754 | 
1755 | }
1756 | 
1757 | /*#query {
1758 |   width:300px;
1759 | }*/
1760 | 
1761 | .community-nav li:last-child a {
1762 |   color: #ffffff;
1763 |   border:none;
1764 | }
1765 | 
1766 | /*.community-nav li:last-child a:before {
1767 |   content: "\270E";
1768 |   font-family: "entypo";
1769 |   font-size: 14px;
1770 |   margin-right: 10px;
1771 |   vertical-align: middle;
1772 | }*/
1773 | 
1774 | /*
1775 |  * Sub nav
1776 |  */
1777 | .community-sub-nav {
1778 |   border-bottom: 1px solid #ECECEC;
1779 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1780 |   padding: 15px 0;
1781 |   position: relative;
1782 | }
1783 | 
1784 | .community-sub-nav li {
1785 |   display: inline-block;
1786 |   font-weight: bold;
1787 |   padding-right: 15px;
1788 | }
1789 | 
1790 | .community-sub-nav li a {
1791 |   font-weight: normal;
1792 | }
1793 | 
1794 | .community-sub-nav li + li {
1795 |   padding-left: 15px;
1796 | }
1797 | 
1798 | .community-sub-nav .topic-add {
1799 |   position: absolute;
1800 |   right: 0;
1801 |   top: 10px;
1802 | }
1803 | 
1804 | /*
1805 |  * Topics/questions/answers
1806 |  */
1807 | .topic {
1808 |   display: inline-block;
1809 |   width: 49.5%;
1810 |   padding: 20px 30px 20px 0;
1811 |   vertical-align: top;
1812 | }
1813 | 
1814 | .topic-header, .question-header {
1815 |   border-bottom: 1px solid #ECECEC;
1816 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1817 |   display: table;
1818 |   padding-bottom: 10px;
1819 | }
1820 | 
1821 | .topic-header > *, .question-header > * {
1822 |   display: table-cell;
1823 |   vertical-align: middle;
1824 | }
1825 | 
1826 | .topic-header .topic-meta, .question-header .question-meta {
1827 |   padding: 0 15px;
1828 |   white-space: nowrap;
1829 | }
1830 | 
1831 | .topic-heading, .question-heading, .answer-list-heading {
1832 |   font-weight: bold;
1833 |   font-size: 13px;
1834 |   width: 100%;
1835 | }
1836 | 
1837 | .topic-heading {
1838 |   font-size: 18px;
1839 | }
1840 | 
1841 | .topic-questions {
1842 |   /*margin-top: 45px;*/
1843 | }
1844 | 
1845 | .topic-description {
1846 |   word-break: break-word;
1847 | }
1848 | 
1849 | .question, .answer {
1850 |   border-bottom: 1px solid #ECECEC;
1851 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1852 |   padding: 20px 0;
1853 |   position: relative;
1854 | }
1855 | 
1856 | .question-form .nesty-input {
1857 |   max-width: none;
1858 | }
1859 | 
1860 | .question-avatar, .answer-avatar {
1861 |   display: table-cell;
1862 |   margin-right: 10px;
1863 |   min-width: 50px;
1864 |   position: relative;
1865 |   vertical-align: top;
1866 | }
1867 | 
1868 | .question-avatar-agent:after, .answer-avatar-agent:after {
1869 |   background-color: transparent;
1870 |   background-image: url(/hc/assets/agent-marker.png);
1871 |   background-image: url(/hc/assets/agent-marker.svg);
1872 |   background-repeat: no-repeat;
1873 |   background-size: 14px;
1874 |   position: absolute;
1875 |   width: 15px;
1876 |   height: 15px;
1877 |   left: 30px;
1878 |   top: 30px;
1879 |   content: " ";
1880 | }
1881 | 
1882 | .question-avatar img, .answer-avatar img {
1883 |   border-radius: 3px;
1884 |   max-height: 38px;
1885 |   max-width: 38px;
1886 | }
1887 | 
1888 | .question-body, .answer-body, .answer-official-body {
1889 |   display: table-cell;
1890 |   vertical-align: top;
1891 |   width: 100%;
1892 | }
1893 | 
1894 | .question-body .answer-official-body {
1895 |   vertical-align: top;
1896 |   width: 100%;
1897 | }
1898 | 
1899 | .question-body p, .answer-body p, .answer-official-body p {
1900 |   margin: 0 0 5px;
1901 | }
1902 | 
1903 | .question-body .question-meta, .answer-body .answer-meta, .answer-official-body .answer-meta {
1904 |   float: left;
1905 | }
1906 | 
1907 | .question .answer {
1908 |   border: none;
1909 |   padding-bottom: 0;
1910 | }
1911 | 
1912 | .question-topic-list {
1913 |   margin: -20px 0 30px;
1914 | }
1915 | 
1916 | .question-topic-list li {
1917 |   display: inline-block;
1918 |   margin: 10px 10px 0 0;
1919 | }
1920 | 
1921 | .question-topic-list a {
1922 |   background: #f6f6f6;
1923 |   background: rgba(0, 0, 0, 0.02);
1924 |   border-radius: 5px;
1925 |   color: #C5C5C5;
1926 |   display: inline-block;
1927 |   font-size: 11px;
1928 |   padding: 7px 15px;
1929 | }
1930 | 
1931 | .question-title, .topic-title {
1932 |   margin: -3px 0 5px;
1933 |   font-size: 15px;
1934 | }
1935 | 
1936 | .question-title a, .topic-title a {
1937 |   font-weight: lighter;
1938 | }
1939 | 
1940 | .question-meta, .answer-meta, .topic-meta {
1941 |   color: #C5C5C5;
1942 |   font-size: 11px;
1943 | }
1944 | 
1945 | .topic-meta span + span:before, .question-meta span + span:before, .answer-meta span + span:before {
1946 |   content: "\2022";
1947 |   font-size: 10px;
1948 |   margin: 0 10px;
1949 | }
1950 | 
1951 | .answer-form {
1952 |   margin: 30px 0 0 95px;
1953 | }
1954 | 
1955 | .answer-form-controls {
1956 |   display: none;
1957 |   margin-top: 10px;
1958 |   text-align: right;
1959 | }
1960 | 
1961 | .answer-form-controls input[type=submit] {
1962 |   margin-left: 15px;
1963 | }
1964 | 
1965 | .answer-form-controls .pull-left {
1966 |   float: left;
1967 | }
1968 | 
1969 | .answer-official-heading {
1970 |   font-size: 13px;
1971 |   font-weight: bold;
1972 |   line-height: 1;
1973 |   margin: 0 0 20px;
1974 |   border-bottom: 0px;
1975 | }
1976 | 
1977 | .answer-list-heading {
1978 |   border-bottom: 1px solid #ECECEC;
1979 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
1980 |   margin-top: 30px;
1981 |   padding-bottom: 20px;
1982 | }
1983 | 
1984 | .pending-moderation-answer-badge {
1985 |   clear: both;
1986 |   border-style: solid;
1987 |   border-width: 1px;
1988 |   border-color: #c7aa2b;
1989 |   color: #c7aa2b;
1990 |   padding: 3px 5px;
1991 |   float: left;
1992 |   margin-top: 10px;
1993 |   font-size: 12px;
1994 | }
1995 | 
1996 | .question-share, .answer-share {
1997 |   position: relative;
1998 | }
1999 | 
2000 | .related-questions-header {
2001 |   border-bottom: 1px solid #ECECEC;
2002 |   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
2003 | }
2004 | 
2005 | .related-questions-heading {
2006 |   margin-top: 3px;
2007 | }
2008 | 
2009 | .related-questions li {
2010 |   margin-top: 10px;
2011 |   margin-bottom: 10px;
2012 | }
2013 | 
2014 | /*
2015 |  * Vote
2016 |  */
2017 | .vote {
2018 |   display: table-cell;
2019 |   margin-left: 15px;
2020 |   margin-right: 10px;
2021 |   min-width: 95px;
2022 |   vertical-align: top;
2023 | }
2024 | 
2025 | .vote-sum, .vote-controls {
2026 |   display: inline-block;
2027 |   vertical-align: middle;
2028 | }
2029 | 
2030 | .vote-sum {
2031 |   font-size: 15px;
2032 |   font-weight: bold;
2033 |   min-width: 60px;
2034 |   padding-left: 10px;
2035 |   text-align: center;
2036 | }
2037 | 
2038 | .vote-controls {
2039 |   border-radius: 5px;
2040 | }
2041 | 
2042 | .vote-controls a {
2043 |   background: #FFF;
2044 |   border-color: #f6f6f6;
2045 |   box-shadow: none;
2046 |   color: #BBB;
2047 |   display: block;
2048 |   font-family: "entypo";
2049 |   font-size: 13px;
2050 |   height: 18px;
2051 |   line-height: 18px;
2052 |   padding: 0 6px;
2053 | }
2054 | 
2055 | .vote-up {
2056 |   border-radius: 5px 5px 0 0;
2057 | }
2058 | 
2059 | .vote-down {
2060 |   border-radius: 0 0 5px 5px;
2061 |   border-top: 0;
2062 | }
2063 | 
2064 | .vote-up:before {
2065 |   content: "\E763";
2066 | }
2067 | 
2068 | .vote-down:before {
2069 |   content: "\E760";
2070 | }
2071 | 
2072 | .vote-controls:hover {
2073 |   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
2074 | }
2075 | 
2076 | .vote-controls:hover a {
2077 |   background: #FFF;
2078 |   border-color: #A6A6A6;
2079 |   color: #BBB;
2080 | }
2081 | 
2082 | .vote-controls a:hover, .vote-controls [aria-selected=true] {
2083 |   background: #f6f6f6;
2084 |   color: #333;
2085 | }
2086 | 
2087 | .vote-controls a:active {
2088 |   background: #CCC;
2089 |   color: #111;
2090 | }
2091 | 
2092 | /*
2093 |  * Accept
2094 |  */
2095 | .answer-accept {
2096 |   color: #BBB;
2097 |   font-size: 15px;
2098 |   max-width: 15px;
2099 |   overflow: hidden;
2100 |   padding-top: 7px;
2101 |   position: absolute;
2102 |   white-space: nowrap;
2103 | }
2104 | 
2105 | .answer-accept:hover {
2106 |   text-decoration: none;
2107 | }
2108 | 
2109 | .answer-accept:before {
2110 |   content: "\2713";
2111 |   font-family: "entypo";
2112 |   margin-right: 5px;
2113 | }
2114 | 
2115 | .answer-accepted .answer-accept, .answer-accepted .vote-sum {
2116 |   color: green;
2117 | }
2118 | 
2119 | /*
2120 |  * Admin controls
2121 |  */
2122 | .topic-controls, .question-controls, .answer-controls {
2123 |   float: right;
2124 |   font-size: 11px;
2125 | }
2126 | 
2127 | .topic-edit, .question-delete, .question-mark-as-spam, .answer-delete, .answer-mark-as-spam {
2128 |   margin-left: 25px;
2129 | }
2130 | 
2131 | .topic-edit:before, .question-delete:before, .question-mark-as-spam:before, .answer-delete:before, .answer-mark-as-spam:before {
2132 |   color: #CCC;
2133 |   content: "\2022";
2134 |   font-size: 10px;
2135 |   margin-left: -16px;
2136 |   pointer-events: none;
2137 |   position: absolute;
2138 | }
2139 | 
2140 | /* ====================================================
2141 |    Chat
2142 |    ==================================================== */
2143 | .chat {
2144 |   background: #f6f6f6;
2145 |   border: 1px solid #E0E0E0;
2146 |   border-bottom: 0;
2147 |   border-radius: 5px 5px 0 0;
2148 |   bottom: 0;
2149 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
2150 |   font-size: 13px;
2151 |   line-height: 35px;
2152 |   padding: 0 15px;
2153 |   position: fixed;
2154 |   right: 85px;
2155 |   -webkit-transition: bottom .5s ease-in, color .5s ease-in;
2156 |   -moz-transition: bottom .5s ease-in, color .5s ease-in;
2157 |   -ms-transition: bottom .5s ease-in, color .5s ease-in;
2158 |   -o-transition: bottom .5s ease-in, color .5s ease-in;
2159 |   transition: bottom .5s ease-in, color .5s ease-in;
2160 | }
2161 | 
2162 | .chat:before {
2163 |   content: "\E720";
2164 |   font-family: "entypo";
2165 |   font-size: 16px;
2166 |   margin-right: 10px;
2167 |   vertical-align: middle;
2168 | }
2169 | 
2170 | .chat:hover {
2171 |   text-decoration: none;
2172 | }
2173 | 
2174 | .chat-available {
2175 |   bottom: 0;
2176 | }
2177 | 
2178 | .chat-unavailable {
2179 |   color: gray;
2180 |   cursor: default !important;
2181 |   bottom: -50px;
2182 | }
2183 | 
2184 | /* ====================================================
2185 |    Parsed markdown
2186 |    ==================================================== */
2187 | .markdown {
2188 |   word-wrap: break-word;
2189 | }
2190 | 
2191 | .markdown h1,
2192 | .markdown h2,
2193 | .markdown h3,
2194 | .markdown h4,
2195 | .markdown h5 {
2196 |   padding: 0;
2197 |   margin: 0 0 10px 0;
2198 |   font-weight: bold;
2199 |   line-height: 13px;
2200 |   font-size: 13px;
2201 | }
2202 | 
2203 | .markdown img {
2204 |   display: block;
2205 |   border: 1px solid #ECECEC;
2206 |   border: 1px solid rgba(0, 0, 0, 0.07);
2207 |   height: auto;
2208 |   max-width: 100%;
2209 |   padding: 3px;
2210 |   margin-bottom: 10px;
2211 | }
2212 | 
2213 | .markdown p {
2214 |   margin-bottom: 10px;
2215 | }
2216 | 
2217 | .markdown ul,
2218 | .markdown ol {
2219 |   list-style-position: inside;
2220 |   margin: 0 0 10px 10px;
2221 | }
2222 | 
2223 | .markdown ul {
2224 |   list-style-type: disc;
2225 | }
2226 | 
2227 | .markdown ol {
2228 |   list-style-type: decimal;
2229 | }
2230 | 
2231 | .markdown li > ul,
2232 | .markdown li > ol {
2233 |   margin: 0 0 0 10px;
2234 | }
2235 | 
2236 | .markdown pre {
2237 |   background: #f6f6f6;
2238 |   background: rgba(0, 0, 0, 0.02);
2239 |   border: 1px solid #ECECEC;
2240 |   border: 1px solid rgba(0, 0, 0, 0.07);
2241 |   border-radius: 3px;
2242 |   padding: 10px 15px;
2243 |   overflow: auto;
2244 |   white-space: pre;
2245 |   margin-bottom: 10px;
2246 | }
2247 | 
2248 | .markdown blockquote {
2249 |   border-left: 1px solid #ECECEC;
2250 |   border-left: 1px solid rgba(0, 0, 0, 0.07);
2251 |   color: #bbb;
2252 |   font-style: italic;
2253 |   padding-left: 10px;
2254 |   margin: 0 0 10px 0;
2255 | }
2256 | 
2257 | .markdown hr {
2258 |   margin-bottom: 10px;
2259 |   height: 2px;
2260 |   background-color: #ECECEC;
2261 | }
2262 | 
2263 | /* ====================================================
2264 |    Home page styles
2265 |    ==================================================== */
2266 | .home-page-categories {
2267 |   margin: 40px auto 0;
2268 |   width: 760px;
2269 | }
2270 | 
2271 | .home-page-categories .categories-left,
2272 | .home-page-categories .categories-right {
2273 |   float: left;
2274 |   margin: 0 20px;
2275 |   width: 340px;
2276 | }
2277 | 
2278 | .home-page-categories h2 {
2279 |   color: #999;
2280 |   font-size: 21px;
2281 |   text-transform: uppercase;
2282 | }
2283 | 
2284 | .home-page-categories a {
2285 |   background-repeat: no-repeat;
2286 |   color: #444;
2287 |   display: block;
2288 |   font-size: 21px;
2289 |   height: 55px;
2290 |   margin: 15px 0;
2291 |   padding: 15px 0 0 65px;
2292 | }
2293 | 
2294 | /* ====================================================
2295 |    Category header icons
2296 |    ==================================================== */
2297 | h1.category-200175790,
2298 | h1.category-200175820,
2299 | h1.category-200175830,
2300 | h1.category-200175840,
2301 | h1.category-200175860,
2302 | h1.category-200175850,
2303 | h1.new-request {
2304 |   background-position: 15px 0;
2305 |   background-repeat: no-repeat;
2306 |   height: 70px;
2307 |   padding: 15px 15px 0 90px;
2308 | }
2309 | 
2310 | h1.category-200175790 {
2311 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/hopper-70.png);
2312 | }
2313 | 
2314 | h1.category-200175820 {
2315 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/pants-70.png);
2316 | }
2317 | 
2318 | h1.category-200175830 {
2319 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/sam-70.png);
2320 | }
2321 | 
2322 | h1.category-200175840 {
2323 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/leafers-70.png);
2324 | }
2325 | 
2326 | h1.category-200175860 {
2327 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/faq-70.png);
2328 | }
2329 | 
2330 | h1.category-200175850 {
2331 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/accounts-70.png);
2332 | }
2333 | 
2334 | h1.new-request {
2335 |   background-image: url(//p2.zdassets.com/hc/theme_assets/526991/200061184/problem-70.png);
2336 | }
2337 | 


--------------------------------------------------------------------------------
/theme.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jQuery v1.9.1 included
 3 |  */
 4 | 
 5 | $(document).ready(function() {
 6 |   //community page design customizations
 7 |   if ($('.community-heading').html() == "Community"){
 8 |      $('.community-heading').css("color", "#ffffff");
 9 |       /*$('body').css("background-color", "#f4f6f6");
10 |       $('body').css("-webkit-box-shadow", "-900px 0 #f4f6f6, 900px 0 #f4f6f6");*/
11 |       $('.sub-nav').removeClass('sub-nav').addClass('search-box');
12 |       $('.community-heading').html('Search discussions for');
13 |       $('.community-heading').css("font-family", "Proxima Nova, sans-serif");
14 |       $('.community-heading').css("font-weight", "lighter");
15 |       $('.community-heading').css("color", "#ffffff");
16 |       $("#query").attr("placeholder", "New ideas for the site");
17 |       $('body').css("-webkit-box-shadow", "-900px 0 #f4f6f6, 900px 0 #f4f6f6");
18 |       $(".topic-title a").css('color','black');
19 |       $(".question-title a").css('color','black');
20 |       $(".question-author a").css('color','#C5C5C5');
21 |       $(".community-sub-nav").prepend("<h2>Discussion Topics</h2>");
22 |   }
23 |   
24 |   // toggle categories and sections on the home page
25 |   $(".category-tree").on("click", "h2 a, h3 a", function() {
26 |     $(this).parent().nextAll().toggle();
27 |     return false;
28 |   });
29 | 
30 |   // social share popups
31 |   $(".share a").click(function(e) {
32 |     e.preventDefault();
33 |     window.open(this.href, "", "height = 500, width = 500");
34 |   });
35 | 
36 |   // toggle the share dropdown in communities
37 |   $(".share-label").on("click", function(e) {
38 |     e.stopPropagation();
39 |     var isSelected = this.getAttribute("aria-selected") == "true";
40 |     this.setAttribute("aria-selected", !isSelected);
41 |     $(".share-label").not(this).attr("aria-selected", "false");
42 |   });
43 | 
44 |   $(document).on("click", function() {
45 |     $(".share-label").attr("aria-selected", "false");
46 |   });
47 | 
48 |   // show form controls when the textarea receives focus
49 |   $(".answer-body textarea").one("focus", function() {
50 |     $(".answer-form-controls").show();
51 |   });
52 | 
53 |   $(".comment-container textarea").one("focus", function() {
54 |     $(".comment-form-controls").show();
55 |   });
56 | 
57 |   // copy ?userId=... from URL to hidden form field
58 |   var userIdRegex = /(?:^\?|&)userId=([^&]+)/;
59 |   var $userIdInput = $("#request_custom_fields_22555874");
60 |   var match = userIdRegex.exec(window.location.search);
61 |   if ($userIdInput.length && match) {
62 |     $userIdInput.val(decodeURIComponent(match[1]));
63 |   }
64 | 
65 |   // nav bar text
66 |   $(".header .submit-a-request").text("Report a problem");
67 |   $(".header .login").text("Log in");
68 | 
69 |   // search box placeholder text
70 |   $("#query").attr("placeholder", "creating an account, understanding mastery challenges");
71 |   
72 |   // add tags to h1 based on breadcrumbs, using paths that look like categories
73 |   var categoryIdRegex = /^\/hc\/en-us\/categories\/(\d+)/;
74 |   var match = categoryIdRegex.exec(window.location.pathname);
75 |   $(".breadcrumbs a").each(function() {
76 |     if (match) {
77 |       return false;
78 |     }
79 |     match = categoryIdRegex.exec(this.pathname);
80 |   });
81 |   if (match) {
82 |     $("h1").addClass("category-" + match[1]);
83 |   }
84 |   
85 | });
86 | 
87 | setTimeout(function(){var a=document.createElement("script");
88 | var b=document.getElementsByTagName("script")[0];
89 | a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0011/5719.js?"+Math.floor(new Date().getTime()/3600000);
90 | a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
91 | 


--------------------------------------------------------------------------------