Init project

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  env: {
+    "vue/setup-compiler-macros": true,
+  },
+};

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE.md

@@ -0,0 +1,676 @@
+### GNU GENERAL PUBLIC LICENSE
+
+Version 3, 29 June 2007
+
+Copyright (C) 2007 Free Software Foundation, Inc.
+<https://fsf.org/>
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+### Preamble
+
+The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+the GNU General Public License is intended to guarantee your freedom
+to share and change all versions of a program--to make sure it remains
+free software for all its users. We, the Free Software Foundation, use
+the GNU General Public License for most of our software; it applies
+also to any other work released this way by its authors. You can apply
+it to your programs, too.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights. Therefore, you
+have certain responsibilities if you distribute copies of the
+software, or if you modify it: responsibilities to respect the freedom
+of others.
+
+For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received. You must make sure that they, too, receive
+or can get the source code. And you must show them these terms so they
+know their rights.
+
+Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software. For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the
+manufacturer can do so. This is fundamentally incompatible with the
+aim of protecting users' freedom to change the software. The
+systematic pattern of such abuse occurs in the area of products for
+individuals to use, which is precisely where it is most unacceptable.
+Therefore, we have designed this version of the GPL to prohibit the
+practice for those products. If such problems arise substantially in
+other domains, we stand ready to extend this provision to those
+domains in future versions of the GPL, as needed to protect the
+freedom of users.
+
+Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish
+to avoid the special danger that patents applied to a free program
+could make it effectively proprietary. To prevent this, the GPL
+assures that patents cannot be used to render the program non-free.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+### TERMS AND CONDITIONS
+
+#### 0. Definitions.
+
+"This License" refers to version 3 of the GNU General Public License.
+
+"Copyright" also means copyright-like laws that apply to other kinds
+of works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of
+an exact copy. The resulting work is called a "modified version" of
+the earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user
+through a computer network, with no transfer of a copy, is not
+conveying.
+
+An interactive user interface displays "Appropriate Legal Notices" to
+the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+#### 1. Source Code.
+
+The "source code" for a work means the preferred form of the work for
+making modifications to it. "Object code" means any non-source form of
+a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can
+regenerate automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same
+work.
+
+#### 2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey,
+without conditions so long as your license otherwise remains in force.
+You may convey covered works to others for the sole purpose of having
+them make modifications exclusively for you, or provide you with
+facilities for running those works, provided that you comply with the
+terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for
+you must do so exclusively on your behalf, under your direction and
+control, on terms that prohibit them from making any copies of your
+copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under the
+conditions stated below. Sublicensing is not allowed; section 10 makes
+it unnecessary.
+
+#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such
+circumvention is effected by exercising rights under this License with
+respect to the covered work, and you disclaim any intention to limit
+operation or modification of the work as a means of enforcing, against
+the work's users, your or third parties' legal rights to forbid
+circumvention of technological measures.
+
+#### 4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+#### 5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these
+conditions:
+
+-   a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+-   b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under
+    section 7. This requirement modifies the requirement in section 4
+    to "keep intact all notices".
+-   c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy. This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged. This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+-   d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+#### 6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms of
+sections 4 and 5, provided that you also convey the machine-readable
+Corresponding Source under the terms of this License, in one of these
+ways:
+
+-   a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+-   b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the Corresponding
+    Source from a network server at no charge.
+-   c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source. This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+-   d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge. You need not require recipients to copy the
+    Corresponding Source along with the object code. If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source. Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+-   e) Convey the object code using peer-to-peer transmission,
+    provided you inform other peers where the object code and
+    Corresponding Source of the work are being offered to the general
+    public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal,
+family, or household purposes, or (2) anything designed or sold for
+incorporation into a dwelling. In determining whether a product is a
+consumer product, doubtful cases shall be resolved in favor of
+coverage. For a particular product received by a particular user,
+"normally used" refers to a typical or common use of that class of
+product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected
+to use, the product. A product is a consumer product regardless of
+whether the product has substantial commercial, industrial or
+non-consumer uses, unless such uses represent the only significant
+mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to
+install and execute modified versions of a covered work in that User
+Product from a modified version of its Corresponding Source. The
+information must suffice to ensure that the continued functioning of
+the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or
+updates for a work that has been modified or installed by the
+recipient, or for the User Product in which it has been modified or
+installed. Access to a network may be denied when the modification
+itself materially and adversely affects the operation of the network
+or violates the rules and protocols for communication across the
+network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+#### 7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders
+of that material) supplement the terms of this License with terms:
+
+-   a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+-   b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+-   c) Prohibiting misrepresentation of the origin of that material,
+    or requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+-   d) Limiting the use for publicity purposes of names of licensors
+    or authors of the material; or
+-   e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+-   f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions
+    of it) with contractual assumptions of liability to the recipient,
+    for any liability that these contractual assumptions directly
+    impose on those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions; the
+above requirements apply either way.
+
+#### 8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+#### 9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or run
+a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+#### 10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+#### 11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims owned
+or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on
+the non-exercise of one or more of the rights that are specifically
+granted under this License. You may not convey a covered work if you
+are a party to an arrangement with a third party that is in the
+business of distributing software, under which you make payment to the
+third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties
+who would receive the covered work from you, a discriminatory patent
+license (a) in connection with copies of the covered work conveyed by
+you (or copies made from those copies), or (b) primarily for and in
+connection with specific products or compilations that contain the
+covered work, unless you entered into that arrangement, or that patent
+license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+#### 12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under
+this License and any other pertinent obligations, then as a
+consequence you may not convey it at all. For example, if you agree to
+terms that obligate you to collect a royalty for further conveying
+from those to whom you convey the Program, the only way you could
+satisfy both those terms and this License would be to refrain entirely
+from conveying the Program.
+
+#### 13. Use with the GNU Affero General Public License.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+#### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in
+detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program
+specifies that a certain numbered version of the GNU General Public
+License "or any later version" applies to it, you have the option of
+following the terms and conditions either of that numbered version or
+of any later version published by the Free Software Foundation. If the
+Program does not specify a version number of the GNU General Public
+License, you may choose any version ever published by the Free
+Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions
+of the GNU General Public License can be used, that proxy's public
+statement of acceptance of a version permanently authorizes you to
+choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+#### 15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
+WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
+PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
+CORRECTION.
+
+#### 16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
+CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
+NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
+LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
+TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
+PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+#### 17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+END OF TERMS AND CONDITIONS
+
+### How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these
+terms.
+
+To do so, attach the following notices to the program. It is safest to
+attach them to the start of each source file to most effectively state
+the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+        <one line to give the program's name and a brief idea of what it does.>
+        Copyright (C) <year>  <name of author>
+
+        This program is free software: you can redistribute it and/or modify
+        it under the terms of the GNU General Public License as published by
+        the Free Software Foundation, either version 3 of the License, or
+        (at your option) any later version.
+
+        This program is distributed in the hope that it will be useful,
+        but WITHOUT ANY WARRANTY; without even the implied warranty of
+        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+        GNU General Public License for more details.
+
+        You should have received a copy of the GNU General Public License
+        along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper
+mail.
+
+If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+        <program>  Copyright (C) <year>  <name of author>
+        This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+        This is free software, and you are welcome to redistribute it
+        under certain conditions; type `show c' for details.
+
+The hypothetical commands \`show w' and \`show c' should show the
+appropriate parts of the General Public License. Of course, your
+program's commands might be different; for a GUI interface, you would
+use an "about box".
+
+You should also get your employer (if you work as a programmer) or
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary. For more information on this, and how to apply and follow
+the GNU GPL, see <https://www.gnu.org/licenses/>.
+
+The GNU General Public License does not permit incorporating your
+program into proprietary programs. If your program is a subroutine
+library, you may consider it more useful to permit linking proprietary
+applications with the library. If this is what you want to do, use the
+GNU Lesser General Public License instead of this License. But first,
+please read <https://www.gnu.org/licenses/why-not-lgpl.html>.
+ 

README.md

@@ -0,0 +1,9 @@
+# Wind (Vue)
+
+Rewriting of [Wind frontend](https://github.com/ChronosX88/wind) in Vue with old Reddit-like UI.
+
+## License
+
+<a href="LICENSE.md"><img src="docs/GPLv3_Logo.svg" width="120" height="60"></a>
+
+This project is licensed under the GPLv3 license. For more information see [LICENSE.md](LICENSE.md) file.

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "wind-vue",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --port 5050",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "pinia": "^2.0.13",
+    "vue": "^3.2.33"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@types/node": "^16.11.27",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "less": "^4.1.2",
+    "prettier": "^2.5.1",
+    "sass": "^1.51.0",
+    "typescript": "~4.6.3",
+    "vite": "^2.9.5",
+    "vue-tsc": "^0.34.7"
+  }
+}

src/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <Header />
+  <ul style="list-style: none; padding: 5px;">
+    <li v-for="(post, index) in posts">
+      <Post 
+        :number="index+1" 
+        :author="post.author"
+        :title="post.title"
+        :time-ago="post.timeAgo" 
+        :comments-count="post.commentsCount" />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Header from './components/Header.vue'
+import Post from './components/Post.vue'
+
+export default defineComponent({
+  name: "app",
+  components: {
+    Header,
+    Post
+  },
+  data() {
+    return {
+      posts: [
+        {author: "anonymous", title: "No Damned Computer Is Going to Tell Me What to Do – Story of Naval Data System", timeAgo: "0 seconds", commentsCount: 0},
+        {author: "anonymous", title: "Use ruins to tell a story. What was the building for? What destroyed it?", timeAgo: "0 seconds", commentsCount: 0},
+        {author: "anonymous", title: "Dedicated node project", timeAgo: "0 seconds", commentsCount: 0},
+        {author: "anonymous", title: "We need a middle class for startups", timeAgo: "0 seconds", commentsCount: 0},
+        {author: "anonymous", title: "Plane accidentally flew around the world (2018)", timeAgo: "0 seconds", commentsCount: 0}
+      ]
+    }
+  }
+});
+
+</script>
+
+<style lang="less">
+@import "./style/reddit.less";
+</style>

src/components/Header.vue

@@ -0,0 +1,43 @@
+<template>
+    <div id="header" role="banner">
+        <div id="sr-header-area">
+            <div class="width-clip">
+                <div class="sr-list">
+                    <ul class="flat-list sr-bar hover">
+                        <li style="margin-left: .5em; padding-left: .5em;"></li>
+                        <li v-for="n in newsgroupList">
+                            <HeaderBarLink :label="n"/>
+                            <span class="separator">-</span>
+                        </li>
+                    </ul>
+                </div>
+                <a id="sr-more-link">more</a>
+            </div>
+        </div>
+        <div id="header-bottom-left">
+            <img id="header-img" class="default-header" src="../assets/wind_logo.png">
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import HeaderBarLink from './HeaderBarLink.vue';
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "Header",
+    components: {
+        HeaderBarLink
+    },
+    data() {
+        return {
+            newsgroupList: [
+                "talk.politics",
+                "talk.religion",
+                "comp.os.linux",
+                "ru.moscow"
+            ]
+        }
+    }
+});
+</script>

src/components/HeaderBarLink.vue

@@ -0,0 +1,13 @@
+<template>
+    <a class="random">{{label}}</a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    props: {
+        label: {required: true, type: String}
+    }
+})
+</script>

src/components/Post.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="thing link post">
+        <span class="number">{{number}}</span>
+        <div class="entry">
+            <p class="title"><a class="title">{{title}}</a></p>
+            <p>by {{author}} {{timeAgo}} ago | {{commentsCount}} comments</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "Post",
+    props: {
+        number: { required: true, type: Number },
+        author: { required: true, type: String },
+        title: { required: true, type: String },
+        commentsCount: { required: true, type: Number },
+        timeAgo: {required: true, type: String}
+    }
+});
+</script>
+
+<style>
+.post {
+    margin: 10px;
+    display: flex;
+}
+
+.entry {
+    align-self: center;
+}
+
+.number {
+    align-self: center;
+    color: #c6c6c6;
+    font-family: arial;
+    font-size: medium;
+    margin: 10px;
+}
+
+.link {
+    padding-left: 0;
+}
+</style>

src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(createPinia());
+
+app.mount("#app");

src/sfc.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from 'vue'
+    export default typeof Vue
+}

src/style/adminbar.less

@@ -0,0 +1,363 @@
+.transition (@property, @duration, @function: ease, @delay: 0s) {
+    -webkit-transition: @arguments;
+    -moz-transition: @arguments;
+    -o-transition: @arguments;
+    -ms-transition: @arguments;
+    transition: @arguments;
+}
+
+.no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@debug-color: #ee0;
+@debug-dark-color: #990;
+@admin-color: #e00;
+@admin-dark-color: #900;
+#admin-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+
+    .show-button {
+        display: none;
+    }
+    &.hidden {
+        .status-bar, .timings-bar {
+            display: none !important;
+        }
+
+        .show-button {
+            display: block;
+            &:before, &:after {
+                content: '';
+                border: 0 solid transparent;
+                position: absolute;
+                display: block;
+                top: 0;
+            }
+
+            &:before {
+                @size: 12px;
+                right: -@size;
+                border-width: @size;
+                z-index: 101;
+            }
+
+            &:after {
+                @size: 18px;
+                right: -@size;
+                border-width: @size;
+                border-top-color: gray;
+                z-index: 100;
+            }
+        }
+
+        &.debug {
+            .show-button:before {
+                border-top-color: @debug-color;
+            }
+            .show-button:after {
+                border-top-color: @debug-dark-color;
+            }
+        }
+
+        &.admin {
+            .show-button:before {
+                border-top-color: @admin-color;
+            }
+            .show-button:after {
+                border-top-color: @admin-dark-color;
+            }
+        }
+    }
+
+    .status-bar {
+        font-size: 12px;
+        height: 14px;
+        line-height: 14px;
+        padding: 2px 5px;
+        border-bottom: 1px solid gray;
+        background: white;
+        z-index: 9999;
+        white-space: nowrap;
+        overflow: hidden;
+        box-shadow: 0 -5px 15px #cee3f8 inset;
+        .no-select;
+
+        .caption {
+            font-weight: bold;
+            color: gray;
+        }
+
+        .indicator {
+            margin-left: 14px;
+        }
+
+        .indicator .icon {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 2px;
+            vertical-align: bottom;
+            margin-right: 5px;
+            border: 1px solid black;
+        }
+
+        .indicator.debug .icon {
+            background: @debug-color;
+            border-color: @debug-dark-color;
+        }
+
+        .indicator.admin .icon {
+            background: @admin-color;
+            border-color: @admin-dark-color;
+        }
+
+        .indicator.secure .icon {
+            background: #8e0;
+            border-color: #890;
+        }
+
+        .indicator.dev-statics .icon {
+            background: #9ff;
+            border-color: #089;
+            border-top-width: 5px;
+            border-bottom-width: 5px;
+            height: 4px;
+        }
+
+        .indicator.prod-statics .icon {
+            background: #0ee;
+            border-color: #089;
+        }
+
+        .indicator.disabled {
+            opacity: .5;
+        }
+
+        .indicator.disabled .icon {
+            display: none;
+        }
+
+        .admin-off {
+            margin-left: 8px;
+            padding: 0 4px;
+            background: fade(@admin-dark-color, 5%);
+            border: 1px solid fade(@admin-dark-color, 40%);
+            border-radius: 3px;
+            font-size: 11px;
+            color: @admin-dark-color;
+            cursor: pointer;
+            vertical-align: top;
+        }
+
+        .controls {
+            position: absolute;
+            right: 0;
+
+            & > span {
+                border-left: 1px solid #ccc;
+                padding: 0 7px;
+                color: #369;
+                cursor: default;
+
+                .state {
+                    display: inline-block;
+                    width: 1em;
+                }
+            }
+
+            .dropdown.lightdrop .selected {
+                font-weight: normal;
+                text-decoration: none;
+                color: #369;
+            }
+        }
+    }
+    &.admin .status-bar {
+        box-shadow: 0 -5px 15px #ffcfc7 inset;
+    }
+
+    .timings-bar {
+        position: relative;
+        display: block;
+        background: #eee;
+        border-bottom: 1px solid gray;
+        box-shadow: 0 -5px 15px #ddd inset;
+
+        .expand-button {
+            display: inline-block;
+            width: 11px;
+            line-height: 11px;
+            margin: 1px 4px;
+            background: #f4f4f4;
+            border: 1px solid #bbb;
+            border-bottom-width: 2px;
+            border-radius: 2px;
+            font-size: 11px;
+            text-align: center;
+            cursor: pointer;
+            .no-select;
+        }
+
+        &.mini-timings {
+            height: 16px;
+            line-height: 16px;
+            .timeline-browser {
+                display: none;
+            }
+        }
+        &.full-timings {
+            height: 25px;
+            line-height: 25px;
+        }
+
+        .timelines {
+            position: absolute;
+            left: 20px;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            cursor: -webkit-zoom-in;
+            cursor: -moz-zoom-in;
+            cursor: zoom-in;
+
+            &.zoomed {
+                cursor: -webkit-zoom-out;
+                cursor: -moz-zoom-out;
+                cursor: zoom-out;
+            }
+
+        }
+
+        .timeline {
+            position: relative;
+            margin: 1px;
+
+            .elapsed {
+                position: absolute;
+                top: 0;
+                right: 2px;
+            }
+
+            .events {
+                position: relative;
+                margin-right: 40px;
+            }
+
+            .event {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                border: 1px solid rgba(0, 0, 0, .5);
+                z-index: 2;
+
+                opacity: .65;
+                .transition(opacity, .25s);
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            .event.out-of-bounds {
+                left: 0;
+                right: 0;
+                border: 1px solid #888;
+                background: #aaa;
+            }
+        }
+
+        .event-color(@color) {
+            background: @color;
+            border-color: darken(saturate(@color, 30%), 23%);
+            box-shadow: 0 -2px 0px darken(@color, 4%) inset;
+        }
+
+        .timeline-browser {
+            @height: 8px;
+            height: @height;
+            .events {
+                height: @height;
+            }
+
+            .elapsed {
+                font-size: 8px;
+                line-height: @height;
+            }
+
+            .event.start {
+                .event-color(rgb(20, 200, 60));
+            }
+
+            .event.redirect {
+                .event-color(rgb(20, 200, 120));
+            }
+
+            .event.https {
+                .event-color(rgb(120, 100, 120));
+            }
+
+            .event.request {
+                .event-color(rgb(20, 150, 150));
+            }
+
+            .event.response {
+                .event-color(rgb(20, 90, 250));
+            }
+
+            .event.domLoading {
+                .event-color(rgb(50, 50, 150));
+            }
+
+            .event.domInteractive {
+                .event-color(rgb(80, 50, 150));
+            }
+
+            .event.domContentLoaded {
+                .event-color(rgb(120, 50, 150));
+            }
+        }
+
+        .timeline-server {
+            @height: 14px;
+            height: @height;
+            .events {
+                height: @height;
+            }
+
+            .elapsed {
+                font-size: 10px;
+                line-height: @height;
+            }
+
+            .event.web {
+                z-index: 1;
+                .event-color(rgb(50, 150, 20));
+            }
+
+            .event.render {
+                &.nocache {
+                    .event-color(rgb(240, 200, 17));
+                }
+                &.cached {
+                    .event-color(rgb(200, 170, 50));
+                }
+            }
+
+            .event.cassandra {
+                .event-color(rgb(150, 50, 20));
+            }
+
+            .event.pg {
+                .event-color(rgb(20, 50, 150));
+            }
+        }
+    }
+}

src/style/compact.css

@@ -0,0 +1,552 @@
+/* mixins */
+/* meat */
+body { background: #c5ccd3; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; margin: 0; width: 100%; height: 100%; -webkit-font-smoothing: antialiased; }
+
+p { margin: 0; padding: 0; }
+
+a { color: #517191; }
+
+a:visited { color: #4F565B; }
+
+textarea { font-family: inherit; }
+
+/*Preloading*/
+#preload { position: absolute; top: -1000px; left: -1000px; }
+
+/*UI stuff*/
+.newbutton { -moz-appearance: none; -webkit-appearance: none; border: 8px solid transparent; -moz-border-image: url("../compact/border-button.png") 8 fill; -o-border-image: url("../compact/border-button.png") 8 fill; -webkit-border-image: url("../compact/border-button.png") 8 fill; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); background: none; }
+.newbutton:active, .newbutton:hover, .newbutton[selected], .newbutton.expanded, .newbutton.active { -moz-border-image: url("../compact/border-button-active.png") 8 fill; -o-border-image: url("../compact/border-button-active.png") 8 fill; -webkit-border-image: url("../compact/border-button-active.png") 8 fill; border-image: url("../compact/border-button-active.png") 8 fill; color: white; }
+
+.button, .button:visited { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwYTJjNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(to bottom, #bfd0e0, #80a2c4); background-color: #9fb9d2; height: 30px; line-height: 30px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.75), 0px 1px 1px rgba(255, 255, 255, 0.6), 0px -1px 1px rgba(0, 0, 0, 0.1); }
+
+.button:active, .button[selected], .button.active, .button.upmod, .button.downmod { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlODk5NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwYTJjNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(to bottom, #7e8994, #80a2c4); background-color: #7f95ac; }
+
+button.button { padding: 0 5px; }
+
+.secondary_button { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiYmJjOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgzOTNhMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #abbbc9), color-stop(100%, #8393a3)); background: -moz-linear-gradient(top, #abbbc9, #8393a3); background: -webkit-linear-gradient(top, #abbbc9, #8393a3); background: linear-gradient(to bottom, #abbbc9, #8393a3); background-color: #97a7b6; border: 1px solid #626D78; }
+
+.secondary_button:active, .second_button[selected], .second_button.active { background-color: #ABBBC9; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgzOTNhMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FiYmJjOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8393a3), color-stop(100%, #abbbc9)); background: -moz-linear-gradient(top, #8393a3, #abbbc9); background: -webkit-linear-gradient(top, #8393a3, #abbbc9); background: linear-gradient(to bottom, #8393a3, #abbbc9); background-color: #97a7b6; }
+
+.small_button, .small_button:visited { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwYTJjNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(to bottom, #bfd0e0, #80a2c4); background-color: #9fb9d2; line-height: 20px; color: white; font-family: inherit; font-size: 12px; font-weight: bold; margin: 0px; padding: 1px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: auto; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); border: 1px solid #517191; -moz-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; -webkit-box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; box-shadow: "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) "; }
+
+.small_button:active, .small_button[selected], .small_button.active { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlODk5NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwYTJjNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7e8994), color-stop(100%, #80a2c4)); background: -moz-linear-gradient(top, #7e8994, #80a2c4); background: -webkit-linear-gradient(top, #7e8994, #80a2c4); background: linear-gradient(to bottom, #7e8994, #80a2c4); background-color: #7f95ac; }
+
+.group_button { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-left: 1px solid #a6bed9; border-right: 1px solid #445d79; }
+
+.group_button:first-child { -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; border-left: 1px solid #517090; }
+
+.group_button:last-child { -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-right: 1px solid #517090; }
+
+/*Options popups*/
+.options_link { font-size: x-small; clear: left; margin: 2px 0px 0px 10px; display: inline-block; width: 30px; height: 30px; position: absolute; top: 35px; right: 10px; background-image: url("../compact/options.png"); /*SPRITE*/ }
+.options_link.active { background-image: url("../compact/options-active.png"); /*SPRITE*/ }
+
+.comment .options_link { top: 10px; }
+
+/*Options expando*/
+.link .options_expando, .comment .options_expando, .message .options_expando { background: #213345; margin: 35px -5px -1px; border-top: 1px solid #111922; display: none; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8); text-align: center; height: 60px; overflow: hidden; }
+.link .options_expando a, .comment .options_expando a, .message .options_expando a { display: inline-block; color: white; text-decoration: none; font-size: 11px; padding: 10px; width: 50px; height: 40px; text-align: center; border-right: 1px solid #111922; border-left: 1px solid #324c67; -moz-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; -webkit-transition: all 100ms ease-in; transition: all 100ms ease-in; }
+.link .options_expando a:active, .comment .options_expando a:active, .message .options_expando a:active { background-color: #324c67; border-left: 1px solid #42668a; }
+.link .options_expando a:hover, .comment .options_expando a:hover, .message .options_expando a:hover { background-color: #263340; -moz-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0px 3px 8px rgba(0, 0, 0, 0.8); border-left: 1px solid #42668a; }
+.link .options_expando a:first-child, .comment .options_expando a:first-child, .message .options_expando a:first-child { border-left: none; }
+.link .options_expando a:last-child, .comment .options_expando a:last-child, .message .options_expando a:last-child { border-right: none; }
+.link .options_expando.expanded, .comment .options_expando.expanded, .message .options_expando.expanded { display: block; }
+
+.comment .entry, .message .entry { margin-right: 50px; }
+.comment .child .options_link, .message .child .options_link { top: 8px; }
+.comment .options_expando, .message .options_expando { margin: 10px -50px 10px 0px; }
+
+.message .options_expando { margin: 25px -55px 10px -5px; }
+
+.options_icons, .email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon, .edit-icon, .reply-icon, .permalink-icon, .collapse-icon, .context-icon, .parent-icon, .unread-icon, .hide-icon, .unhide-icon { display: block; width: 24px; height: 24px; margin-left: auto; margin-right: auto; margin-bottom: 5px; }
+
+.email-icon { background-image: url("../compact/email.png"); /*SPRITE*/ }
+
+.report-icon { background-image: url("../compact/report.png"); /*SPRITE*/ }
+
+.save-icon { background-image: url("../compact/save.png"); /*SPRITE*/ }
+
+.unsave-icon { background-image: url("../compact/unsave.png"); /*SPRITE*/ }
+
+.domain-icon { background-image: url("../compact/domain.png"); /*SPRITE*/ }
+
+.edit-icon { background-image: url("../compact/edit.png"); /*SPRITE*/ }
+
+.reply-icon { background-image: url("../compact/reply.png"); /*SPRITE*/ }
+
+.permalink-icon { background-image: url("../compact/permalink.png"); /*SPRITE*/ }
+
+.collapse-icon { background-image: url("../compact/collapse.png"); /*SPRITE*/ }
+
+.context-icon { background-image: url("../compact/context.png"); /*SPRITE*/ }
+
+.parent-icon { background-image: url("../compact/context.png"); /*SPRITE*/ }
+
+.unread-icon { background-image: url("../compact/unread.png"); /*SPRITE*/ }
+
+.hide-icon { background-image: url("../compact/hide.png"); /*SPRITE*/ }
+
+.unhide-icon { background-image: url("../compact/unhide.png"); /*SPRITE*/ }
+
+/*Toolbar*/
+#topbar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZTNmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E4YzRlMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(to bottom, #cee3f8, #a8c4e0); background-color: #bbd3ec; border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; height: 40px; position: relative; }
+#topbar #header-img { height: 32px; width: auto; }
+#topbar .left { position: absolute; left: 0; bottom: 3px; overflow: hidden; max-height: 40px; z-index: 1; }
+#topbar .right { position: absolute; right: 10px; bottom: 1px; z-index: 3; }
+#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1; }
+
+#topbar > h1 a { position: relative; color: inherit; text-decoration: inherit; z-index: 2; }
+
+body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
+
+#topbar > .right > .button { padding-top: 8px; padding-bottom: 3px; }
+
+#topbar > .right > .button:first-child { margin-right: 5px; }
+
+#topbar > .right > #mail { width: 30px; height: 30px; display: inline-block; }
+#topbar > .right > #mail.nohavemail { background-image: url("../compact/nomail.png"); /*SPRITE*/ }
+#topbar > .right > #mail.nohavemail:active, #topbar > .right > #mail.nohavemail:hover { background-image: url("../compact/nomail-active.png"); /*SPRITE*/ }
+#topbar > .right > #mail.havemail { background-image: url("../compact/havemail.png"); /*SPRITE*/ }
+#topbar > .right > #mail.havemail:active, #topbar > .right > #mail.havemail:hover { background-image: url("../compact/havemail-active.png"); /*SPRITE*/ }
+
+#topbar > .right > #modmail { width: 30px; height: 30px; display: inline-block; }
+#topbar > .right > #modmail.nohavemail { background-image: url("../compact/modmail.png"); /*SPRITE*/ }
+#topbar > .right > #modmail.nohavemail:active, #topbar > .right > #modmail.nohavemail:hover { background-image: url("../compact/modmail-active.png"); /*SPRITE*/ }
+#topbar > .right > #modmail.havemail { background-image: url("../compact/newmodmail.png"); /*SPRITE*/ }
+#topbar > .right > #modmail.havemail:active, #topbar > .right > #modmail.havemail:hover { background-image: url("../compact/newmodmail-active.png"); /*SPRITE*/ }
+
+.topbar-options { width: 30px; height: 30px; display: inline-block; background-image: url("../compact/menu-options.png"); /*SPRITE*/ }
+.topbar-options.active, .topbar-options:hover, .topbar-options:active { background-image: url("../compact/menu-options-active.png"); /*SPRITE*/ }
+
+#top_menu { position: absolute; right: 5px; top: 44px; background-color: white; border: 1px solid rgba(27, 47, 94, 0.4); border-top: 0px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); z-index: 5; display: none; }
+
+#top_menu > .menuitem { padding: 5px; }
+
+#top_menu > .menuitem.bottm-bar { border-bottom: 1px solid rgba(27, 47, 94, 0.4); }
+
+#top_menu > .menuitem a { text-decoration: none; color: #222; font-weight: bold; }
+
+.status { color: red; margin-left: 20px; }
+
+/*Subtoolbar (eg hot)*/
+.subtoolbar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 32px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc)); background: -moz-linear-gradient(top, #ffffff, #cccccc); background: -webkit-linear-gradient(top, #ffffff, #cccccc); background: linear-gradient(to bottom, #ffffff, #cccccc); background-color: #e5e5e5; border-bottom: 1px solid #bbb; padding: 6px; text-overflow: ellipsis; overflow: hidden; }
+
+.subtoolbar > ul { list-style-type: none; margin: 0; padding: 0; }
+
+.subtoolbar > ul > li { display: inline-block; text-overflow: ellipsis; overflow: hidden; }
+
+.subtoolbar > ul > li a { color: #4c566c; font-weight: bold; text-decoration: none; font-size: 12px; line-height: 20px; margin: 0; padding: 3px 10px; text-overflow: ellipsis; overflow: hidden; }
+
+.subtoolbar > ul > li.selected a { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background: -moz-linear-gradient(top, #dddddd, #aaaaaa); background: -webkit-linear-gradient(top, #dddddd, #aaaaaa); background: linear-gradient(to bottom, #dddddd, #aaaaaa); background-color: #c3c3c3; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #aaa; padding-top: 2px; padding-bottom: 1px; -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8); }
+
+/*Things*/
+/*Arrows*/
+.link .arrow, .comment .arrow, .message .arrow { width: 28px; height: 28px; cursor: pointer; display: block; margin: 1px auto 0px; outline: none; }
+.link .arrow.up, .comment .arrow.up, .message .arrow.up { background-image: url("../compact/upvote.png"); /*SPRITE*/ }
+.link .arrow.down, .comment .arrow.down, .message .arrow.down { background-image: url("../compact/downvote.png"); /*SPRITE*/ }
+.link .arrow.upmod, .comment .arrow.upmod, .message .arrow.upmod { background-image: url("../compact/upvote-active.png"); /*SPRITE*/ }
+.link .arrow.downmod, .comment .arrow.downmod, .message .arrow.downmod { background-image: url("../compact/downvote-active.png"); /*SPRITE*/ }
+
+/*Links*/
+.link { min-height: 70px; border-bottom: 1px solid #999; border-top: 1px solid #ddd; padding: 5px 5px; padding-bottom: 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: rgba(255, 255, 255, 0.6); position: relative; overflow: hidden; }
+
+.link:first-child { border-top: none; }
+
+.link:nth-child(odd) { background: rgba(206, 227, 248, 0.5); }
+
+/* Voting stuff */
+.link > .rank { float: left; margin-top: 17px; font-size: 12px; color: #aaa; }
+
+.link > .midcol { float: left; width: 25px; margin: 0 10px 1px 0px; padding-bottom: 5px; position: relative; }
+
+.link > .entry .score, .link > .entry.likes .score.unvoted, .link > .entry.dislikes .score.unvoted { display: none; }
+
+.link > .entry .score.unvoted, .link > .entry.likes .score.likes, .link > .entry.dislikes .score.dislikes { display: inline; font-weight: bold; }
+
+.link > .entry.likes .score.likes { color: #E07A7A; }
+
+.link > .entry.dislikes .score.dislikes { color: #7272D1; }
+
+/* experimental */
+.link .rank { display: none; }
+
+.link .modcol { float: left; }
+
+.comment { position: relative; }
+
+.comment > .entry > .tagline .score { display: none; }
+
+.comment > .entry.unvoted > .tagline .score.unvoted, .comment > .entry.likes > .tagline .score.likes, .comment > .entry.dislikes > .tagline .score.dislikes { display: inline; }
+
+/** Vote up **/
+.link > .midcol.likes > .score { color: #E07A7A; }
+
+/** Vote down **/
+.link > .midcol.dislikes > .score { color: #7272D1; }
+
+/*Image*/
+.link .thumbnail { float: right; margin: 0 0 5px 5px; overflow: hidden; max-height: 50px; }
+
+.link .thumbnail img { max-width: 50px; max-height: 50px; }
+
+/* Entry*/
+.link .entry { margin: 0px 50px 3px 0px; }
+
+.link a { text-decoration: none; color: #517191; color: #369; }
+
+.link p.title { margin: 0; padding: 0; text-overflow: ellipsis; word-wrap: break-word; font-size: .8em; font-weight: bold; }
+
+.link p.title > a { text-overflow: ellipsis; overflow: hidden; color: #25A; }
+
+.link.stickied p.title > a { color: #228822; }
+
+.link .domain { color: #737373; font-size: 9px; margin-left: 5px; }
+.link .domain a, .link .domain a:hover { color: inherit; }
+
+.link .tagline { margin: 2px 0 5px; padding: 0; padding-top: 2px; font-size: 10px; color: #333; }
+
+.link .tagline > span { margin-right: 2px; }
+
+.link .tagline a { font-weight: bold; }
+
+.link .tagline .stickied-tagline { color: #228822; }
+
+/*Expando*/
+.link .expando-button { float: left; display: block; height: auto; line-height: inherit; margin: 3px 10px 2px 0; width: 30px; height: 30px; background-image: url("../compact/selftext.png"); /*SPRITE*/ }
+.link .expando-button.expanded { background-image: url("../compact/selftext-active.png"); /*SPRITE*/ }
+
+.link > .expando { clear: both; margin: 5px 0; margin-bottom: 30px; border: 1px solid #999; background: #ddd; padding: 5px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; font-size: 11px; }
+
+.link > .thing_options { font-size: x-small; margin: none; display: block; float: left; clear: left; margin: 2px 0px 0px 10px; }
+
+.nsfw-warning, .quarantine-warning { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #ac3939; text-decoration: none; font-weight: normal; font-size: 9px; margin-left: 5px; padding: 0 2px; border: 1px solid #d27979 !important; }
+
+/* Comment count */
+.commentcount { float: right; margin: 5px; width: 45px; text-align: right; }
+
+.commentcount > .comments { border: 8px solid transparent; -moz-border-image: url("../compact/border-button.png") 8 fill; -o-border-image: url("../compact/border-button.png") 8 fill; -webkit-border-image: url("../compact/border-button.png") 8 fill; border-image: url("../compact/border-button.png") 8 fill; color: white; font-family: inherit; font-size: 12px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.4); }
+.commentcount > .comments:active, .commentcount > .comments:hover, .commentcount > .comments[selected], .commentcount > .comments.preloaded { -moz-border-image: url("../compact/border-button-active.png") 8 fill; -o-border-image: url("../compact/border-button-active.png") 8 fill; -webkit-border-image: url("../compact/border-button-active.png") 8 fill; border-image: url("../compact/border-button-active.png") 8 fill; }
+
+/* Comment styles */
+.commentarea > h1 { color: #4c566c; font-size: 17px; margin: 10px 10px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4); }
+
+.commentarea > .menuarea { display: none; /*TODO: Make dropdown menu*/ }
+
+.commentarea > .main-form-title { color: #4c566c; font-size: 17px; font-weight: bold; margin: 0 10px; }
+
+.commentarea > .usertext { background: white; margin: 0 10px 5px; border: 1px solid #d9d9d9; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
+
+.commentarea > .usertext textarea { margin: 0; padding: 5px; width: 100%; height: 100px; border: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border-bottom: 1px solid #d9d9d9; }
+
+.cancel, .save { float: right; padding: 0 5px !important; }
+
+.save { margin-left: 5px; }
+
+/* Errors */
+.error { color: red; }
+
+.content > .error { color: rgba(255, 255, 255, 0.9); font-size: 25px; margin: 10px; text-align: center; text-shadow: rgba(0, 0, 0, 0.15) 0px -1px 0px; }
+
+.help-toggle { float: left; margin-top: 3px; }
+
+.bottom-area { padding: 5px; }
+
+.markhelp-parent { display: none; }
+
+.markhelp { width: 100%; border-collapse: collapse; }
+
+.markhelp th { background: #d9d9d9; }
+
+.markhelp th:first-child { -webkit-border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; border-top-left-radius: 8px; }
+
+.markhelp th:last-child { -webkit-border-top-right-radius: 8px; -moz-border-radius-topright: 8px; border-top-right-radius: 8px; }
+
+.markhelp tr:nth-child(odd) td { background: rgba(0, 0, 100, 0.1); }
+
+.markhelp td { border: 1px solid #d9d9d9; padding: 5px; }
+
+.markhelp tr:last-child td:first-child { -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-left-radius: 8px; }
+
+.markhelp tr:last-child td:last-child { -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px; border-bottom-right-radius: 8px; }
+
+/*Cloned comment reply */
+.usertext textarea { margin: 0; padding: 5px; border: 1px solid #d9d9d9; width: 100%; min-height: 100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+.child form.usertext.cloneable { margin: 5px; }
+
+/**Actual comments*/
+.comment { background: white; border: 1px solid #d9d9d9; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
+
+.comment > .midcol { float: left; margin: 7px; overflow: hidden; }
+
+.comment > .entry > .tagline { font-size: 11px; padding-bottom: 2px; }
+
+.child .comment { margin: 4px; margin-top: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; }
+
+.comment.collapsed .child, .comment.collapsed .usertext, .comment.collapsed .midcol, .comment.collapsed .button, .comment.collapsed .options_link, .comment.collapsed .options_expando { display: none; }
+
+.comment.collapsed { font-style: italcs; }
+
+.comment.collapsed .tagline { margin-left: 20px; font-style: italcs; color: #AAA; }
+
+/** gilding */
+.gilded-icon { position: relative; display: inline-block; margin: 0 0 -15px 8px; top: -8px; color: #99895F; font-size: .9em; vertical-align: middle; }
+
+.gilded-icon:before { display: inline-block; content: ''; background-image: url(../gold-coin.png); /* SPRITE */ background-repeat: no-repeat; height: 14px; width: 13px; margin-right: 2px; vertical-align: -3px; }
+
+.user-gilded > .entry .gilded-icon:before { width: 23px; }
+
+body.post-under-6h-old .gilded-icon { opacity: .55; }
+
+/** messages and inbox */
+.message { background: white; position: relative; border: 1px solid #d9d9d9; margin: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; padding: 5px; }
+
+.message > .midcol { float: left; margin: 10px; overflow: hidden; }
+
+.message.unread { background-color: #FFFFAA; }
+
+.message .correspondent { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZTNmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzllYmVkYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #9ebedc)); background: -moz-linear-gradient(top, #cee3f8, #9ebedc); background: -webkit-linear-gradient(top, #cee3f8, #9ebedc); background: linear-gradient(to bottom, #cee3f8, #9ebedc); background-color: #b6d0ea; /* TODO */ margin-right: 10px; padding: 2px 5px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
+
+.message .correspondent a { text-decoration: none; }
+
+.message .message .subject { display: none; }
+
+.message > .entry > .tagline { font-size: 11px; padding-bottom: 2px; margin-bottom: 2px; }
+
+.message > .entry .usertext-body, .message > .entry .md { font-size: 11px; word-wrap: break-word; }
+
+.message > .metabuttons { float: right; margin: 10px; }
+
+.message .subject { font-weight: bold; font-size: 13px; border-bottom: 1px solid #d9d9d9; padding: 5px; overflow: hidden; }
+
+.message .subject a { margin-left: 5px; }
+
+.message .subject .correspondent a { margin-left: 0; }
+
+/* subreddit */
+.link .subreddit { background-color: transparent; margin: 0px; }
+
+.subreddit { background-color: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 5px; }
+
+.subreddit p.title { display: block; margin-left: 35px; margin-right: 30px; }
+
+.subreddit a.title { display: block; margin: 0; padding: 0; text-overflow: ellipsis; word-wrap: break-word; font-size: small; font-weight: bold; text-overflow: ellipsis; overflow: hidden; color: #25A; text-decoration: none; }
+
+.subreddit .title a.domain { font-size: x-small; color: #AAA; font-style: italic; display: block; }
+
+.subreddit .tagline { font-size: x-small; color: #666; }
+
+.subreddit .button.active { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwYTJjNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfd0e0), color-stop(100%, #80a2c4)); background: -moz-linear-gradient(top, #bfd0e0, #80a2c4); background: -webkit-linear-gradient(top, #bfd0e0, #80a2c4); background: linear-gradient(to bottom, #bfd0e0, #80a2c4); background-color: #9fb9d2; }
+
+.subreddit > .entry .score, .subreddit > .entry.likes .score.unvoted, .subreddit > .entry.dislikes .score.unvoted { display: none; }
+
+.subreddit > .entry .score.unvoted, .subreddit > .entry.likes .score.likes, .subreddit > .entry.dislikes .score.dislikes { display: inline; }
+
+.subreddit .midcol .button.add, .subreddit .midcol .button.remove { font-family: courier; font-size: small; }
+
+.subreddit .midcol { float: left; }
+
+.subreddit .midcol .button { display: none; margin: 4px; }
+
+.subreddit .midcol .button.active { display: block; width: auto; height: auto; padding: 0px 9px; }
+
+.subreddit .expando-button { float: right; height: 100%; }
+
+.subreddit .description { border-top: 1px solid #AAA; margin-top: 2px; padding-top: 2px; margin-left: 0px; padding-left: 10px; }
+
+/* Compose */
+#compose-message { background: white; border: 1px solid #d9d9d9; border-top: 0px; margin: 10px; margin-top: 0; padding: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }
+
+#compose-message label { display: block; font-size: 17px; font-weight: bold; }
+
+#compose-message input[type="text"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #757575; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 5px; padding: 5px; width: 100%; }
+
+#compose-message textarea { border-color: #757575; height: 200px; }
+
+.comment > .entry .usertext-body { font-size: 11px; word-wrap: break-word; }
+
+.comment > .entry .usertext-edit { margin-left: 42px; }
+
+.comment > .metabuttons { float: right; margin: 10px; }
+
+/*Child comment specific styles*/
+/*Reduce the bottom margin on the last child comment in a thread, to make viewing easier.*/
+.child .comment { margin-right: -1px; }
+
+.child .comment:last-child { margin-bottom: 2px; }
+
+.comment > .morecomments { margin: 5px; text-align: right; }
+
+/*Link colors*/
+.tagline .submitter { color: blue; }
+
+.tagline .friend { color: orange; /*Why not orangered? Because orangered can look very red on a mobile*/ }
+
+.tagline .moderator { color: #282; }
+
+.tagline .admin { color: #F01; }
+
+.tagline .userattrs .cakeday { display: inline-block; text-indent: -9999px; width: 11px; height: 8px; background-image: url(../cake.png); /* SPRITE */ vertical-align: middle; }
+
+/*Loading spinner, yay CSS animation*/
+@-webkit-keyframes rotateThis { from { -webkit-transform: scale(0.75) rotate(0deg); }
+  to { -webkit-transform: scale(0.75) rotate(360deg); } }
+.loading { width: 100%; background-color: white; text-align: center; }
+
+.loading img { -webkit-animation-name: rotateThis; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
+
+.throbber { display: none; margin: 0 2px; background: url("../compact/throbber.gif") no-repeat; width: 18px; height: 18px; }
+
+.working .throbber { display: inline-block; }
+
+/* Login and Register */
+#login_login, #login_reg { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; max-width: 350px; margin-left: auto; margin-right: auto; }
+
+#login_login > div, #login_reg > div { padding: 10px; }
+
+#login_login > div > ul, #login_reg > div > ul { list-style-type: none; padding: 0; margin: 0 0 10px; }
+
+#login_login > div > ul li label, #login_reg > div > ul li label { display: block; font-size: 17px; font-weight: bold; }
+
+#login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] { width: 100%; margin: 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #757575; /*It was the coins fault!*/ font-size: 17px; padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+#login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label { display: inline; }
+
+.user-form .submit * { vertical-align: middle; }
+
+/* takdown page (sigh) */
+.infobar.red img { float: left; }
+
+.infobar.red { border: 1px solid red; padding: 10px; margin: 5px; background-color: #FFA177; }
+
+.clear { clear: both; }
+
+.clearleft { clear: left; }
+
+.cover { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: gray; opacity: .3; z-index: 1000; }
+
+.popup { position: absolute; top: 75px; left: 0; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; background-color: white; text-align: left; z-index: 1001; padding: 10px; border-color: #B2B2B2 black black #B2B2B2; border-style: solid; border-width: 1px; margin-left: auto; margin-right: auto; max-width: 350px; }
+
+.popup h1 { text-align: center; font-size: large; font-weight: normal; color: orangered; }
+
+/* Submit links */
+#newlink { background: white; border: 1px solid #d9d9d9; margin: 10px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }
+
+#newlink .save { margin: 8px; }
+
+/** Tab switcher **/
+#newlink .tabmenu { display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; margin: 10px; padding: 0; }
+
+#newlink .tabmenu li { display: block; webkit-box-flex: 1; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(100%, #b3b3b3)); background: -moz-linear-gradient(top, #d9d9d9, #b3b3b3); background: -webkit-linear-gradient(top, #d9d9d9, #b3b3b3); background: linear-gradient(to bottom, #d9d9d9, #b3b3b3); background-color: #c6c6c6; border: 1px solid #999999; position: relative; }
+
+#newlink .tabmenu li a { width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: 5px; color: #4d4d4d; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px; text-decoration: none; font-weight: bold; }
+
+#newlink .tabmenu li:first-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; }
+
+#newlink .tabmenu li:last-child { -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; border-left-color: #cccccc; }
+
+#newlink li.selected { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #808080), color-stop(100%, #b3b3b3)); background: -moz-linear-gradient(top, #808080, #b3b3b3); background: -webkit-linear-gradient(top, #808080, #b3b3b3); background: linear-gradient(to bottom, #808080, #b3b3b3); background-color: #999999; }
+
+#newlink li.selected a { text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 1px; color: #f2f2f2; }
+
+#newlink .spacer { margin-bottom: 5px; }
+
+#newlink .infobar { margin: 5px; }
+
+/* Fields */
+#newlink textarea, #newlink input[type="text"], #newlink input[type="url"] { border: 1px solid #999999; }
+
+#newlink .roundfield { position: relative; padding: 0px 5px; }
+
+#newlink .roundfield-content textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
+
+#newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
+
+#newlink .title { font-weight: bold; }
+
+/* Individual sections */
+#url-field .button { float: right; margin-top: 5px; }
+
+#url-field .title-status { background: #e6e6e6; border: 1px solid gray; padding: 2px 4px; margin-top: 5px; display: inline-block; }
+
+#suggested-reddits ul { background: #e6e6e6; border: 1px solid gray; padding: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
+
+#suggested-reddits ul li { display: inline; }
+
+#suggested-reddits ul li a { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlY2ZlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgxYTNjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(to bottom, #becfe0, #81a3c5); background-color: #9fb9d2; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; margin: 5px; padding: 3px 7px; text-decoration: none; border: 1px solid #507faf; color: #304c69; }
+
+/* Autocomplete */
+#sr-autocomplete-area { position: relative; z-index: 50; }
+
+#sr-drop-down { position: absolute; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JmYmZiZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6e6e6), color-stop(100%, #bfbfbf)); background: -moz-linear-gradient(top, #e6e6e6, #bfbfbf); background: -webkit-linear-gradient(top, #e6e6e6, #bfbfbf); background: linear-gradient(to bottom, #e6e6e6, #bfbfbf); background-color: #d2d2d2; border: 1px solid gray; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-top: 0px; display: none; left: 5px; margin: 0px; padding: 0px; position: absolute; font-weight: bold; color: #333333; }
+
+#sr-drop-down li { display: block; padding: 2px 5px; }
+
+#sr-drop-down li:hover, #sr-drop-down li:active { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlY2ZlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgxYTNjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #becfe0), color-stop(100%, #81a3c5)); background: -moz-linear-gradient(top, #becfe0, #81a3c5); background: -webkit-linear-gradient(top, #becfe0, #81a3c5); background: linear-gradient(to bottom, #becfe0, #81a3c5); background-color: #9fb9d2; color: white; text-shadow: rgba(255, 255, 255, 0.09766) 0px 1px 1px, rgba(0, 0, 0, 0.39844) 0px -1px 1px; -webkit-text-stroke: 1px solid #517090; }
+
+#sr-drop-down li:last-child { -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; }
+
+/* markdown */
+.md { overflow: auto; font-size: small; }
+
+.md p, .md h1 { margin: 5px 0; }
+
+.md h1 { font-weight: bold; font-size: 100%; }
+
+.md h2 { font-weight: bold; font-size: 100%; }
+
+.md > * { margin-bottom: 0px; }
+
+.md strong { font-weight: bold; }
+
+.md em { font-style: italic; }
+
+.md strong em { font-style: italic; font-weight: bold; }
+
+.md img { display: none; }
+
+.md ol, .md ul { margin: 10px 2em; }
+
+.md ul { list-style: disc outside; }
+
+.md ol { list-style: decimal outside; }
+
+.md pre { margin: 10px; }
+
+.md blockquote, .help blockquote { border-left: 2px solid #369; padding-left: 4px; margin: 5px; margin-right: 15px; }
+
+.md td, .md th { border: 1px solid #EEE; padding: 1px 3px; }
+
+.md th { font-weight: bold; }
+
+.md table { margin: 5px 10px; }
+
+.md center { text-align: left; }
+
+.tryme { width: 100%; max-width: 280px; padding: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 10px auto; }
+
+.tryme p { margin: 10px; font-size: small; }
+
+.tryme .choices .button { width: 260px; display: block; text-align: center; margin: 10px; }
+
+.deepthread { margin-left: 40px; }
+
+.morecomments a, .deepthread a { text-decoration: none; color: white; }
+
+.morechildren { margin: 5px 10px; }
+
+.morechildren a { display: block; text-align: center; max-width: 350px; color: white !important; }
+
+a.author { margin-right: 0.5em; }
+
+.flair, .linkflair { margin-top: 2px; margin-right: 0.5em; padding: 0px 2px; display: inline-block; background: whiteSmoke; color: #545454; border: 1px solid #dedede; font-size: 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.9); }
+
+.linkflair { font-weight: normal; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.mobile-web-redirect-bar { background: white; box-sizing: border-box; font-family: sans-serif; font-size: 14px; padding: 20px; width: 100%; z-index: 1000; }
+.mobile-web-redirect-bar a { text-decoration: none; }
+.mobile-web-redirect-bar .mobile-web-redirect-header { font-size: 18px; line-height: 25px; margin-bottom: 20px; }
+.mobile-web-redirect-bar .mobile-web-redirect-optin { background-color: #4a7fc5; border-radius: 3px; box-shadow: inset 0 -3px 0 0 #3e6ab7; color: white; display: block; font-family: "Verdana", sans-serif; font-weight: bold; line-height: 20px; margin-bottom: 20px; padding: 10px 0; text-align: center; text-transform: uppercase; }
+.mobile-web-redirect-bar .mobile-web-redirect-optout { color: #7f7f7f; }
+
+.commentspacer { clear: both; }

src/style/components/alerts.less

@@ -0,0 +1,12 @@
+.c-alert {
+    padding: 15px;
+    margin: 8px 0 19px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+}
+
+.c-alert-danger {
+    background-color: @alert-danger-bg;
+    border-color: @alert-danger-border;
+    color: @alert-danger-color !important;
+}

src/style/components/animations.less

@@ -0,0 +1,11 @@
+@keyframes spin {
+    to {
+        transform: rotate(360deg)
+    }
+}
+
+@-webkit-keyframes spin {
+    to {
+        -webkit-transform: rotate(360deg)
+    }
+}

src/style/components/buttons.less

@@ -0,0 +1,49 @@
+.c-btn {
+    .box-sizing(border-box);
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    vertical-align: middle;
+    cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    .button-size(4px; @padding-base-horizontal; 12px; 20px; 3px);
+    .no-select();
+
+    &:hover,
+    &:focus {
+        color: #fff;
+        text-decoration: none;
+    }
+
+    &:active,
+    &.active {
+        outline: 0;
+        background-image: none;
+    }
+
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        pointer-events: none;
+        .opacity(.65);
+        box-shadow: none;
+    }
+
+}
+
+.c-btn-primary {
+    .button-variant(@text-color: #fff; @bg-color: #4f86b5; @bevel-color: #4270a2);
+}
+
+.c-btn-secondary {
+    .button-variant(@text-color: #fff, @bg-color: #c6c6c6, @bevel-color: #b8b8b8);
+}
+
+.c-btn-highlight {
+    .button-variant(@text-color: #fff; @bg-color: #DC6431; @bevel-color: #C9532B);
+}

src/style/components/close.less

@@ -0,0 +1,12 @@
+.c-close {
+  display: block;
+  width: 12px;
+  height: 12px;
+  .hdpi-bg-image(@1x: data-uri('../close_x.png'); @2x: data-uri('../close_x_2x.png'));
+  background-size: 12px;
+  background-position: center;
+
+  &:hover {
+    .hdpi-bg-image(@1x: data-uri('../close_x_hover.png'); @2x: data-uri('../close_x_hover_2x.png'));
+  }
+}

src/style/components/colors.less

@@ -0,0 +1,44 @@
+/* 
+  do not use these colors directly! create local aliases with descriptive names
+  i.e.
+   
+  @my-background-color: @color-eggshell;
+ */
+
+// Colors
+@color-warning-red: #EA0027;
+@color-orangered: #FF4500;
+@color-orange: #FF8717;
+@color-yellow: #FFD635;
+@color-highlight: #FFF03E;
+@color-gold: #D8C161;
+@color-lime: #C7E223;
+@color-green: #7CD344;
+@color-teal: #25B79F;
+@color-dark-teal: #008985;
+@color-light-blue: #24A0ED;
+@color-link-blue: #333df5;
+@color-link-purple: #551a8b;
+@color-periwinkle: #9494FF;
+@color-white: #FFFFFF;
+@color-off-white: #FCFCF7;
+@color-eggshell: #F2F1E9;
+@color-pale-grey: #E5E3DA;
+@color-grey: #B5B3AC;
+@color-semi-black: #222222;
+
+// Product-specific colors
+@color-alien-blue: #0079D3;
+@color-ads-blue: #6093BF;
+@color-ads-grey: #F8F8F8;
+
+// non-styleguide colors:
+@color-ui-blue: #336699;
+@color-text-grey: #4F4F4F;
+@color-dark-grey: #808080;
+
+// ban colors
+@color-spam: #ff8b60;
+@color-temp-ban: #ff0000;
+@color-perma-ban: #cc0000;
+@color-deleted: #c6c6c6;

src/style/components/components.less

@@ -0,0 +1,17 @@
+@import "animations.less";
+@import "variables.less";
+@import "mixins.less";
+@import "utils.less";
+@import "forms.less";
+@import "buttons.less";
+@import "tooltip.less";
+@import "form-states.less";
+@import "alerts.less";
+@import "strength-meter.less";
+@import "modal.less";
+@import "close.less";
+@import "toggles.less";
+@import "read-next.less";
+@import "infobar.less";
+@import "progress.less";
+@import "image-upload.less";

src/style/components/form-states.less

@@ -0,0 +1,150 @@
+.c-has-feedback {
+    position: relative;
+}
+
+.c-has-error {
+
+    .c-tooltip.right .tooltip-arrow {
+        border-right-color: @tooltip-danger-arrow-color;
+    }
+
+    .c-tooltip.left .tooltip-arrow {
+        border-left-color: @tooltip-danger-arrow-color;
+    }
+
+    .c-tooltip.top-right .tooltip-arrow,
+    .c-tooltip.top .tooltip-arrow {
+        border-top-color: @tooltip-danger-arrow-color;
+    }
+
+    .c-tooltip.bottom .tooltip-arrow {
+        border-bottom-color: @tooltip-danger-arrow-color;
+    }
+
+    .tooltip-inner {
+        background-color: @tooltip-danger-bg;
+    }
+
+}
+
+.c-has-success {
+
+    .c-tooltip.right .tooltip-arrow {
+        border-right-color: @tooltip-success-arrow-color;
+    }
+
+    .c-tooltip.left .tooltip-arrow {
+        border-left-color: @tooltip-success-arrow-color;
+    }
+
+    .c-tooltip.top-right .tooltip-arrow,
+    .c-tooltip.top .tooltip-arrow {
+        border-top-color: @tooltip-success-arrow-color;
+    }
+
+    .c-tooltip.bottom .tooltip-arrow {
+        border-bottom-color: @tooltip-success-arrow-color;
+    }
+
+    .tooltip-inner {
+        background-color: @tooltip-success-bg;
+    }
+
+}
+
+.c-form-control-feedback-wrapper {
+    width: calc(100% + 25px);
+    width: 110%;
+    position: absolute;
+    left: 100%;
+    top: 0;
+
+    &.inside-input {
+        margin-left: -30px;
+    }
+}
+
+.c-form-control-feedback {
+    @vertical-space: ((@input-height-base - 20px) / 2);
+    display: none;
+    position: absolute;
+    left: 5px;
+    top: @vertical-space;
+    height: 20px;
+    width: 20px;
+    vertical-align: middle;
+}
+
+.c-form-control-feedback-throbber,
+.c-form-throbber:after {
+    .hdpi-bg-image(@1x: data-uri('../throbber_v2.gif'); @2x: data-uri('../throbber_v2_2x.gif'));
+
+    .cssanimations & {
+        background: none;
+        .box-sizing(border-box);
+        .animation(spin .75s linear infinite);
+        border: 2px solid @throbber-color;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+        border-radius: 100%;
+    }
+}
+
+.c-form-control-feedback-success {
+    .hdpi-bg-image(@1x: data-uri('../check.png'); @2x: data-uri('../check_2x.png'));
+}
+
+.c-form-control-feedback-error {
+    .hdpi-bg-image(@1x: data-uri('../alert.png'); @2x: data-uri('../alert_2x.png'));
+
+    &:hover {
+        .hdpi-bg-image(@1x: data-uri('../alert_mouseover.png'); @2x: data-uri('../alert_mouseover_2x.png'));
+
+        + .c-tooltip {
+            .tooltip-inner {
+                background-color: @tooltip-danger-hover-bg;
+            }
+
+            &.right .tooltip-arrow {
+                border-right-color: @tooltip-danger-hover-bg
+            }
+
+            &.left .tooltip-arrow {
+                border-left-color: @tooltip-danger-hover-bg
+            }
+
+            &.top-right .tooltip-arrow,
+            &.top .tooltip-arrow {
+                border-top-color: @tooltip-danger-hover-bg
+            }
+
+            &.bottom .tooltip-arrow {
+                border-bottom-color: @tooltip-danger-hover-bg
+            }
+        }
+    }
+}
+
+.c-has-throbber .c-form-control-feedback-throbber,
+.c-has-success .c-form-control-feedback-success,
+.c-has-error .c-form-control-feedback-error {
+    display: block;
+}
+
+.c-form-throbber {
+    display: none;
+    float: right;
+    padding: 5px 0;
+    margin-right: -25px;
+
+    &:after {
+        content: '';
+        height: 20px;
+        width: 20px;
+        display: block;
+    }
+
+    .working & {
+        display: block;
+    }
+}

src/style/components/forms.less

@@ -0,0 +1,91 @@
+.c-form-control {
+    .box-sizing(border-box);
+    display: block;
+    width: 100%;
+    font-size: 14px;
+    height: @input-height-base;
+    line-height: (@input-height-base - (@padding-base-vertical * 2 + 2));
+    padding: @padding-base-vertical @padding-base-horizontal;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: inset 1px 1px 2px -1px rgba(0,0,0,0.15);
+    .transition-shorthand(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+    &:focus {
+        border-color: @input-focus-color;
+        outline: 0;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px @input-focus-color;
+    }
+
+    .input-placeholder();
+
+    textarea& {
+        height: auto;
+        resize: vertical;
+    }
+}
+
+.c-form-group {
+    margin-bottom: 10px;
+    position: relative;
+}
+
+.c-form-inline {
+    .c-form-group {
+        display: inline-block;
+        vertical-align: top;
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .c-form-control {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
+.c-submit-group {
+    margin-top: @input-height-base;
+}
+
+.c-radio,
+.c-checkbox {
+    position: relative;
+    display: block;
+    font-size: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    label {
+        font-weight: normal;
+        cursor: pointer;
+    }
+
+    &.c-input-height {
+        min-height: @input-height-base;
+    }
+}
+
+.c-radio input[type="radio"],
+.c-checkbox input[type="checkbox"] {
+    margin-right: .5em;
+    line-height: normal;
+
+    &:focus {
+        outline: thin dotted;
+        outline: 5px auto -webkit-focus-ring-color;
+        outline-offset: -2px;
+    }
+}
+
+.c-help-block {
+    display: block;
+
+    .c-checkbox & {
+        margin-top: 5px;
+    }
+
+    &.c-help-block-toggle {
+        display: none;
+    }
+}

src/style/components/image-upload.less

@@ -0,0 +1,38 @@
+.c-image-upload-input {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  margin: 0;
+  opacity: 0;
+  padding: 0;
+  width: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.c-image-upload-preview-container {
+  border-width: 2px;
+  border-style: dashed;
+  border-color: lightgray;
+  display: inline-block;
+  margin: 5px 0;
+  overflow: hidden;
+  padding: 5px;
+  position: relative;
+}
+
+.c-image-upload-preview {
+  display: block;
+  margin: 0 !important;
+}
+
+.c-image-upload-btn {
+  display: block;
+  padding: 2px 8px !important;
+  font-size: 10px !important;;
+}

src/style/components/infobar.less

@@ -0,0 +1,99 @@
+@infobar-legacy-color: #f6e69f;
+@infobar-legacy-color-border: orange;
+@infobar-color: #fff7d7;
+@infobar-color-border: darken(@infobar-color, 32%);
+@infobar-color-text: @color-semi-black;
+@infobar-padding: unit(@margin-small, px);
+@infobar-min-text-height: unit(@line-x-small, px) + unit(2 * @margin-x-small, px);
+@infobar-icon-size: 2 * @infobar-padding + @infobar-min-text-height;
+
+.infobar {
+  background-color: @infobar-legacy-color;
+  border-color: @infobar-legacy-color-border;
+  border-style: solid;
+  border-width: 1px;
+  font-size: small;
+  margin: 5px 305px 5px 0px;
+  padding: 5px 10px;
+
+  img {
+    display: inline;
+    vertical-align: middle;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+}
+
+.reddit-infobar {
+  .box-sizing(border-box);
+  background-color: @infobar-color;
+  border-color: @infobar-color-border;
+  border-style: solid;
+  border-width: 1px;
+  margin-bottom: @infobar-padding;
+  margin-left: 0;
+  margin-top: unit(@margin-x-small, px);
+  overflow: auto;
+  padding: @infobar-padding;
+  position: relative;
+
+  .md {
+    color: @infobar-color-text;
+  }
+
+  &.with-icon {
+    min-height: @infobar-icon-size;
+    padding-left: @infobar-padding + @infobar-icon-size;
+
+    &:before {
+      content: '';
+      display: block;
+      width: @infobar-icon-size;
+      height: 100%;
+      background-color: @infobar-color-border;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background-position: center;
+    }
+  }
+}
+
+.locked-infobar:before {
+  @1x: url('../infobar-icon-lock.png');
+  @2x: url('../infobar-icon-lock_2x.png');
+  @2x-bg-size: 20px 25px;
+  .hdpi-bg-image(@1x: @1x, @2x: @2x, @2x-bg-size);
+}
+
+.archived-infobar {
+  @archived-infobar-color: #FCFCFB;
+  @archived-infobar-color-border: @color-grey;
+  background-color: @archived-infobar-color;
+  border-color: @archived-infobar-color-border;
+
+  &.with-icon:before {
+    background-color: @archived-infobar-color-border;
+    @1x: url('../infobar-icon-archived.png');
+    @2x: url('../infobar-icon-archived_2x.png');
+    @2x-bg-size: 25px 24px;
+    .hdpi-bg-image(@1x: @1x, @2x: @2x, @2x-bg-size);
+  }
+}
+
+.timeout-infobar {
+  @timeout-infobar-color: #fff0f0;
+  @timeout-infobar-color-border: #e70028;
+  background-color: @timeout-infobar-color;
+  border-color: @timeout-infobar-color-border;
+
+  &.with-icon:before {
+    @1x: url('../infobar-icon-banhammer.png');
+    @2x: url('../infobar-icon-banhammer_2x.png');
+    @2x-bg-size: 20px 27px;
+    .hdpi-bg-image(@1x: @1x, @2x: @2x, @2x-bg-size);   
+    background-color: @timeout-infobar-color-border;
+  }
+}

src/style/components/mixins.less

@@ -0,0 +1,198 @@
+.animation (@animation) {
+    -webkit-animation: @animation;
+    -moz-animation: @animation;
+    -ms-animation: @animation;
+    -o-animation: @animation;
+    animation: @animation;
+}
+
+.transition (@property, @duration, @function: ease, @delay: 0s) {
+    -webkit-transition: @arguments;
+    -moz-transition: @arguments;
+    -o-transition: @arguments;
+    -ms-transition: @arguments;
+    transition: @arguments;
+}
+
+.translate(@x; @y) {
+    -webkit-transform: translate(@x, @y);
+    -ms-transform: translate(@x, @y);
+    -o-transform: translate(@x, @y);
+    transform: translate(@x, @y);
+}
+
+.transition-transform(@transition) {
+    -webkit-transition: -webkit-transform @transition;
+    -moz-transition: -moz-transform @transition;
+    -o-transition: -o-transform @transition;
+    transition: transform @transition;
+}
+
+.transition-shorthand(@transition) {
+    -webkit-transition: @transition;
+    -moz-transition: @transition;
+    -o-transition: @transition;
+    -ms-transition: @transition;
+    transition: @transition;
+}
+
+.linear-gradient(@color1, @color2) {
+    background: @color1;
+    background: -moz-linear-gradient(top,  @color1 0%, @color2 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%, @color2));
+    background: -webkit-linear-gradient(top,  @color1 0%, @color2 100%);
+    background: -o-linear-gradient(top,  @color1 0%, @color2 100%);
+    background: -ms-linear-gradient(top,  @color1 0%, @color2 100%);
+    background: linear-gradient(to bottom,  @color1 0%, @color2 100%);
+}
+
+.box-shadow(@shadow) {
+    -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
+    box-shadow: @shadow;
+}
+
+.box-sizing(@sizing) {
+    box-sizing: @sizing;
+    -webkit-box-sizing: @sizing;
+    -moz-box-sizing: @sizing;
+}
+
+.transform(@transformation) {
+    transform: @transformation;
+    -webkit-transform: @transformation;
+    -moz-transform: @transformation;
+    -o-transform: @transformation;
+    -ms-transform: @transformation;
+}
+
+.opacity(@opacity) {
+    opacity: @opacity;
+    @opacity-ie: (@opacity * 100);
+    filter: ~"alpha(opacity=@{opacity-ie})";
+}
+
+.flex(@props) {
+  -webkit-flex: @props;
+  flex: @props;
+}
+
+.flex-wrap(@props) {
+  -webkit-flex-wrap: @props;
+  flex-wrap: @props;
+}
+
+.flex-direction(@props) {
+  -webkit-flex-direction: @props;
+  flex-direction: @props;
+}
+
+.display-flex() {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.align-items(@props) {
+    -webkit-align-items: @props;
+    align-items: @props;
+}
+
+.justify-content(@props) {
+    -webkit-justify-content: @props;
+    justify-content: @props;
+}
+
+.clearfix() {
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+.button-variant(@text-color; @bg-color; @bevel-color;) {
+    background-color: @bg-color;
+    border-bottom: 2px solid @bevel-color;
+    color: @text-color;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.disabled,
+    &[disabled] {
+        background-color: darken(@bg-color, 2.5%);
+        color: @text-color;
+    }
+
+    &:focus {
+        outline-offset: 1px;
+    }
+
+    &:active,
+    &.active {
+        border-bottom-width: 1px;
+        margin-top: 1px;
+    }
+}
+
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+    padding: @padding-vertical @padding-horizontal (@padding-vertical - 1px);
+    font-size: @font-size;
+    line-height: @line-height;
+    border-radius: @border-radius;
+}
+
+#gradient {
+    .horizontal(@start-color: #555, @end-color: #333) {
+        background-color: @end-color;
+        background-image: -moz-linear-gradient(left, @start-color, @end-color);
+        background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@start-color), to(@end-color));
+        background-image: -webkit-linear-gradient(left, @start-color, @end-color);
+        background-image: -o-linear-gradient(left, @start-color, @end-color);
+        background-image: linear-gradient(to right, @start-color, @end-color);
+        background-repeat: repeat-x;
+        filter: e(%("progid:DXImageTransform.Microsoft.gradient(start-colorstr='%d', end-colorstr='%d', GradientType=1)", argb(@start-color), argb(@end-color))); // IE9 and down
+    }
+
+    .vertical(@start-color: #555, @end-color: #333) {
+        background-color: mix(@start-color, @end-color, 60%);
+        background-image: -moz-linear-gradient(top, @start-color, @end-color);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), to(@end-color));
+        background-image: -webkit-linear-gradient(top, @start-color, @end-color);
+        background-image: -o-linear-gradient(top, @start-color, @end-color);
+        background-image: linear-gradient(to bottom, @start-color, @end-color);
+        background-repeat: repeat-x;
+        filter: e(%("progid:DXImageTransform.Microsoft.gradient(start-colorstr='%d', end-colorstr='%d', GradientType=0)", argb(@start-color), argb(@end-color))); // IE9 and down
+    }
+}
+
+.hdpi-bg-image(@1x; @2x; @2x-bg-size: 100%; @bg-repeat: no-repeat) {
+    background-image: @1x;
+    background-repeat: @bg-repeat;
+
+    @media
+    only screen and (min-resolution: 2dppx),
+    only screen and (-webkit-min-device-pixel-ratio: 2) {
+        background-image: @2x;
+        background-size: @2x-bg-size;
+    }
+}
+
+.input-placeholder(@color: @input-placeholder-color;) {
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1;
+    }
+
+    &:-ms-input-placeholder { color: @color; }
+    &::-webkit-input-placeholder  { color: @color; }
+}
+
+.no-select() {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

src/style/components/modal.less

@@ -0,0 +1,137 @@
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+    overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+    display: none;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @zindex-modal;
+    -webkit-overflow-scrolling: touch;
+
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    outline: 0;
+
+    // When fading in the modal, animate it to slide down
+    &.fade .modal-dialog {
+        .translate(0, -25%);
+        .transition-transform(~"0.3s ease-out");
+    }
+    &.in .modal-dialog { .translate(0, 0) }
+}
+.modal-open .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: 10px;
+
+    @media (min-width: @screen-sm-min) {
+        width: @modal-md;
+        margin: 30px auto;
+    }
+}
+
+// Actual modal
+.modal-content {
+    position: relative;
+    background-color: @modal-content-bg;
+    border-radius: @modal-border-radius;
+    border: 1px solid @modal-content-border-color;
+    .box-shadow(3px 3px 13px rgba(0,0,0,0.35));
+    background-clip: padding-box;
+    // Remove focus outline from opened modal
+    outline: 0;
+
+    @media (min-width: @screen-sm-min) {
+        .box-shadow(0 5px 15px rgba(0,0,0,.5));
+    }
+}
+
+// Modal background
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: @modal-backdrop-bg;
+    z-index: (@zindex-modal - 1);
+    // Fade for backdrop
+    &.fade { .opacity(0); }
+    &.in { .opacity(@modal-backdrop-opacity); }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+}
+
+// Title text
+.modal-title {
+    color: @modal-title-color;
+    display: block;
+
+    h1&,
+    h2&,
+    h3& {
+        font-size: 18px;
+        font-weight: normal;
+        margin: 12px 0 18px;
+    }
+
+    h4&,
+    h5&,
+    h6& {
+        font-size: 12px;
+        font-weight: bold;
+        margin: 4px 0 6px;
+        text-transform: uppercase;
+    }
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+    padding: @modal-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+    background: @modal-footer-bg;
+    border-bottom-left-radius: @modal-border-radius;
+    border-bottom-right-radius: @modal-border-radius;
+    border-top: 1px solid @modal-footer-border-color;
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+    position: absolute;
+    top: -9999px;
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+}

src/style/components/progress.less

@@ -0,0 +1,19 @@
+.c-progress {
+    display: none;
+    height: 2px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1)");
+    position: relative;
+    margin-top: -2px;
+}
+
+.c-progress-bar {
+    float: left;
+    width: 0;
+    height: 100%;
+    line-height: 2px;
+    background-color: #337ab7;
+    .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.15)");
+    .transition-shorthand(width .6s ease);
+}

src/style/components/read-next.less

@@ -0,0 +1,157 @@
+@read-next-color-background: @color-white;
+@read-next-color-header: #EFF7FF;
+@read-next-color-button-background: lighten(@color-ui-blue, 5%);
+@read-next-color-text: @color-semi-black;
+@read-next-color-text-light: @color-dark-grey;
+@read-next-height: 100px;
+@read-next-width: 300px;
+@read-next-link-height: 60px;
+@read-next-thumbnail-size: 45px;
+@zindex-read-next: @zindex-modal - 1;
+
+@read-next-font-base: @font-x-small;
+@read-next-font-small: @font-xx-small;
+@read-next-line-base: @line-x-small;
+@read-next-line-large: @line-small;
+
+.read-next-font-size(@font:@read-next-font-base, @line:@read-next-line-base) {
+  .md-font-size(@read-next-font-base, @font, @line);
+}
+
+.read-next-container {
+  font-size: @base-font-keyword;
+}
+
+.read-next {
+  .md-base-font-size(@read-next-font-base);
+  .no-select();
+  background: @read-next-color-background;
+  border: 1px solid darken(@read-next-color-background, 15%);
+  box-sizing: border-box;
+  color: @read-next-color-text;
+  display: none;
+  height: @read-next-height;
+  position: relative;
+  width: @read-next-width;
+  z-index: @zindex-read-next;
+
+  &.active {
+    display: block;
+  }
+
+  &.fixed {
+    border-bottom-width: 0;
+    bottom: 0;
+    position: fixed;
+  }
+
+  .read-next-header {
+    background-color: @read-next-color-header;
+    border-bottom: 1px solid darken(@read-next-color-header, 5%);
+    color: @read-next-color-text-light;
+    padding-left: @margin-small * 1px;
+    padding-right: @margin-small * 1px;
+    padding-top: @margin-x-small * 1px;
+  }
+
+  .read-next-header-title {
+    .read-next-font-size(@read-next-font-base, @read-next-line-large);
+    margin-left: (@read-next-line-base + @margin-x-small) * 2px;
+    position: relative;
+    // magic number, but it looks better ;_;
+    top: -2px;
+  }
+
+  .read-next-title {
+    .read-next-font-size();
+    display: block;
+    max-height: @read-next-line-base * 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .read-next-nav {
+    .read-next-font-size(@read-next-font-small);
+    position: absolute;
+    top: @margin-x-small * 1px;
+  }
+
+  .read-next-nav-right {
+    right: @margin-x-small * 1px;
+
+    > * {
+      margin-left: @margin-x-small * 1px;
+    }
+  }
+
+  .read-next-nav-left {
+    left: @margin-x-small * 1px;
+     
+    > * {
+      margin-right: @margin-x-small * 1px;
+    }
+  }
+
+  .read-next-dismiss,
+  .read-next-button {
+    .transform(scale(1, 1) translateY(0px));
+    .transition(all, 0.2s);
+    cursor: pointer;
+    display: inline-block;
+    height: @read-next-line-base * 1px;
+    position: relative;
+    text-align: center;
+    width: @read-next-line-base * 1px;
+
+    &:active {
+      .transform(scale(1.01, 1.01) translateY(1px));
+    }
+  }
+
+  .read-next-button {
+    background-color: @read-next-color-button-background;
+    border-radius: 50%;
+    color: @read-next-color-background;
+
+    &:active {
+      background-color: darken(@read-next-color-button-background, 5%);
+    }
+  }
+
+  .read-next-list {
+    padding: @margin-small * 1px;
+    padding-top: @margin-x-small * 1px;
+  }
+
+  .read-next-link {
+    display: none;
+    float: left;
+    height: @read-next-link-height;
+    overflow: hidden;
+    width: 100%;
+
+    &.active {
+      display: block;
+    }
+
+    .read-next-thumbnail {
+      display: block;
+      float: left;
+      height: @read-next-thumbnail-size;
+      margin-right: @margin-x-small * 1px;
+      // magic number, but it just looks better
+      margin-top: 3px; 
+      width: @read-next-thumbnail-size;
+
+      img {
+        height: auto;
+        width: 100%;
+      }
+    }
+  }
+
+  .read-next-meta {
+    .read-next-font-size(@read-next-font-small);
+    color: @read-next-color-text-light;
+  }
+}

src/style/components/strength-meter.less

@@ -0,0 +1,34 @@
+.strength-meter {
+    background-color: @strength-meter-bg;
+    border-radius: 5px;
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    margin-top: -4px;
+    width: 50px;
+    height: 8px;
+    overflow: hidden;
+    pointer-events: none;
+
+    .c-has-feedback & {
+        display: block;
+    }
+}
+
+.strength-meter-fill {
+    height: 100%;
+    width: 0;
+
+    .c-has-success & {
+        background-color: @strength-meter-fill-success;
+    }
+
+    .c-has-error & {
+        background-color: @strength-meter-fill-error;
+    }
+
+    .c-has-throbber & {
+        background-color: @strength-meter-fill-loading;
+    }
+}

src/style/components/toggles.less

@@ -0,0 +1,21 @@
+.c-toggle {
+
+    &:after {
+        content: ' [+]';
+        font-family: monospace;
+        font-size: 10px;
+        vertical-align: 1px;
+    }
+
+    &.c-toggle-toggled:after {
+        content: ' [-]';
+    }
+}
+
+.c-toggle-content {
+    display: none;
+
+    &.c-toggle-content-toggled {
+        display: block;
+    }
+}

src/style/components/tooltip.less

@@ -0,0 +1,89 @@
+.c-tooltip {
+    position: absolute;
+    z-index: 1002;
+    display: block;
+    visibility: visible;
+    font-size: 11px;
+    line-height: 1.4;
+    .opacity(0);
+
+    .tooltip-inner {
+        padding: 2px 8px 3px;
+        color: @tooltip-color;
+        text-decoration: none;
+        background-color: @tooltip-bg;
+        border-radius: 2px;
+    }
+
+    .tooltip-arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-width: @tooltip-arrow-width;
+    }
+
+    &.in {
+      .opacity(@tooltip-opacity);
+    }
+
+    &.top {
+        padding: @tooltip-arrow-width 0;
+    }
+
+    &.right {
+        padding: 0 @tooltip-arrow-width;
+    }
+
+    &.bottom {
+        padding: @tooltip-arrow-width 0;
+    }
+
+    &.left {
+        padding: 0 @tooltip-arrow-width;
+    }
+
+    &.top .tooltip-arrow {
+        bottom: 2px;
+        left: 50%;
+        margin-left: -@tooltip-arrow-width;
+        border-bottom-width: 0;
+        border-top-color: @tooltip-arrow-color;
+    }
+
+    &.top-right {
+        .tooltip-arrow {
+            bottom: -@tooltip-arrow-width;
+            left: auto;
+            right: 2px;
+            border-bottom-width: 0;
+            border-top-color: @tooltip-arrow-color;
+        }
+    }
+
+    &.right .tooltip-arrow {
+        top: 50%;
+        left: 2px;
+        margin-top: -@tooltip-arrow-width;
+        border-left-width: 0;
+        border-right-color: @tooltip-arrow-color;
+    }
+
+    &.left .tooltip-arrow {
+        top: 50%;
+        right: 2px;
+        margin-top: -@tooltip-arrow-width;
+        border-right-width: 0;
+        border-left-color: @tooltip-arrow-color;
+    }
+
+    &.bottom .tooltip-arrow {
+        top: 2px;
+        left: 50%;
+        margin-left: -@tooltip-arrow-width;
+        border-top-width: 0;
+        border-bottom-color: @tooltip-arrow-color;
+    }
+
+}

src/style/components/utils.less

@@ -0,0 +1,34 @@
+.c-hidden {
+  display: none;
+}
+
+.c-clearfix {
+    .clearfix();
+}
+
+.c-pull-right {
+    float: right;
+}
+
+.c-pull-left {
+    float: left;
+}
+
+.c-hide-text {
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.c-hidden {
+    display: none;
+}
+
+.fade {
+    opacity: 0;
+    .transition-shorthand(opacity .15s linear);
+
+    &.in {
+        opacity: 1;
+    }
+}

src/style/components/variables.less

@@ -0,0 +1,104 @@
+@import "colors.less";
+
+@reddit-sidebar-width: 300px;
+
+// States
+
+@brand-success: #6ec02a;
+@brand-danger: #d4473f;
+
+// Shared
+
+@padding-base-vertical: 6px;
+@padding-base-horizontal: 12px;
+
+// Forms
+
+@input-height-base: 34px;
+@input-focus-color: #3c80d3;
+@input-placeholder-color: #a6a6a6;
+
+// Tooltips
+
+@tooltip-max-width: 200px;
+@tooltip-color: #fff;
+@tooltip-bg: #000;
+@tooltip-success-bg: @brand-success;
+@tooltip-success-hover-bg: @tooltip-success-bg;
+@tooltip-danger-bg: @brand-danger;
+@tooltip-danger-hover-bg: rgb(191, 64, 57);
+@tooltip-opacity: 1;
+@tooltip-arrow-width: 8px;
+@tooltip-arrow-color: @tooltip-bg;
+@tooltip-success-arrow-color: @tooltip-success-bg;
+@tooltip-danger-arrow-color: @tooltip-danger-bg;
+
+// Alerts
+
+@alert-danger-bg: lighten(@brand-danger, 40%);
+@alert-danger-color: darken(@brand-danger, 10%);
+@alert-danger-border: lighten(@brand-danger, 38%);
+
+// Screen Sizes
+
+@screen-xs-min:              480px;
+@screen-sm-min:              768px;
+@screen-md-min:              992px;
+@screen-lg-min:              1200px;
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
+
+// Throbber
+@throbber-color: #606060;
+
+// Strength meter
+@strength-meter-bg: #efefef;
+@strength-meter-fill-loading: @throbber-color;
+@strength-meter-fill-success: @brand-success;
+@strength-meter-fill-error: @brand-danger;
+
+// Modal
+@zindex-modal: 9999;
+@modal-border-radius: 5px;
+@modal-padding: 60px;
+@modal-title-color: #4270a2;
+@modal-title-line-height: 1.618;
+@modal-content-bg: #f8fbfd;
+@modal-content-border-color: rgba(0,0,0,.2);
+@modal-backdrop-bg: #000;
+@modal-backdrop-opacity: .5;
+@modal-footer-border-color: #e9eef1;
+@modal-footer-bg: #e9f0f7;
+@modal-lg: 758px;
+@modal-md: 728px;
+@modal-sm: 300px;
+
+// Font size and vertical grid
+@base-font-keyword: small;
+@base-font-keyword-size: 13; // small == 13px;
+
+@font-xx-small: 10;
+@font-x-small: 12;
+@font-small: 14;
+@font-medium: 16;
+@font-large: 18;
+@font-x-large: 20;
+@font-xx-large: 24;
+@font-xxx-large: 32;
+
+@line-x-small: 15;
+@line-small: 20;
+@line-medium: 20;
+@line-large: 25;
+@line-x-large: 25;
+@line-xx-large: 30;
+@line-xxx-large: 40;
+
+@margin-x-small: 5;
+@margin-small: 10;
+@margin-medium: 15;
+@margin-large: 20;
+@margin-x-large: 25;
+@margin-xx-large: 30;
+@margin-xxx-large: 40;

src/style/config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "."
+sass_dir = "."
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+ line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

src/style/expando.less

@@ -0,0 +1,45 @@
+.thing .entry .expando-button {
+    background-color: transparent;
+    cursor: pointer;
+    height: 20px;
+    margin: 4px 8px 4px 0;
+    width: 20px;
+
+    &.expanded {
+        background-image: url('../icon-contract.png'); /* SPRITE */
+    }
+
+    &.expanded:hover {
+        background-image: url('../icon-contract-hover.png'); /* SPRITE */
+    }
+
+    &.collapsed {
+        background-image: url('../icon-expand.png'); /* SPRITE */
+    }
+
+    &.collapsed:hover {
+        background-image: url('../icon-expand-hover.png'); /* SPRITE */
+    }
+
+    @media
+    only screen and (min-resolution: 2dppx),
+    only screen and (-webkit-min-device-pixel-ratio: 2) {
+        background-size: 100%;
+
+        &.expanded {
+            background-image: url(../icon-contract_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.expanded:hover {
+            background-image: url(../icon-contract-hover_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.collapsed {
+            background-image: url(../icon-expand_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+
+        &.collapsed:hover {
+            background-image: url(../icon-expand-hover_2x.png); /* SPRITE pixel-ratio=2 */
+        }
+    }
+}

src/style/highlight.css

@@ -0,0 +1,238 @@
+/* subreddit stylesheet source viewer */
+.subreddit-stylesheet-source {
+    padding: 0.5em;
+    overflow-x: auto;
+    margin: 10px 7px;
+    font-size: medium;
+    font-family: "Bitstream Vera Sans Mono", Consolas, monospace;
+}
+
+/* github.com style (c) Vasily Polovnyov <vast@whiteants.net> - from the highlight.js source */
+pre {
+    color: #333;
+    background-color: #f8f8ff;
+}
+
+pre .comment,
+pre .template_comment,
+pre .diff .header,
+pre .javadoc {
+  color: #998;
+  font-style: italic
+}
+
+pre .keyword,
+pre .css .rule .keyword,
+pre .winutils,
+pre .javascript .title,
+pre .nginx .title,
+pre .subst,
+pre .request,
+pre .status {
+  color: #333;
+  font-weight: bold
+}
+
+pre .number,
+pre .hexcolor,
+pre .ruby .constant {
+  color: #099;
+}
+
+pre .string,
+pre .tag .value,
+pre .phpdoc,
+pre .tex .formula {
+  color: #d14
+}
+
+pre .title,
+pre .id {
+  color: #900;
+  font-weight: bold
+}
+
+pre .javascript .title,
+pre .lisp .title,
+pre .clojure .title,
+pre .subst {
+  font-weight: normal
+}
+
+pre .class .title,
+pre .haskell .type,
+pre .vhdl .literal,
+pre .tex .command {
+  color: #458;
+  font-weight: bold
+}
+
+pre .tag,
+pre .tag .title,
+pre .rules .property,
+pre .django .tag .keyword {
+  color: #000080;
+  font-weight: normal
+}
+
+pre .attribute,
+pre .variable,
+pre .lisp .body {
+  color: #008080
+}
+
+pre .regexp {
+  color: #009926
+}
+
+pre .class {
+  color: #458;
+  font-weight: bold
+}
+
+pre .symbol,
+pre .ruby .symbol .string,
+pre .lisp .keyword,
+pre .tex .special,
+pre .input_number {
+  color: #990073
+}
+
+pre .built_in,
+pre .lisp .title,
+pre .clojure .built_in {
+  color: #0086b3
+}
+
+pre .preprocessor,
+pre .pi,
+pre .doctype,
+pre .shebang,
+pre .cdata {
+  color: #999;
+  font-weight: bold
+}
+
+pre .deletion {
+  background: #fdd
+}
+
+pre .addition {
+  background: #dfd
+}
+
+pre .diff .change {
+  background: #0086b3
+}
+
+pre .chunk {
+  color: #aaa
+}
+
+/* Monokai style - ported by Luigi Maselli - http://grigio.org - from the highlight.js source */
+.res-nightmode pre {
+  background: #272822;
+  color: #ddd;
+}
+
+.res-nightmode pre .tag,
+.res-nightmode pre .tag .title,
+.res-nightmode pre .keyword,
+.res-nightmode pre .literal,
+.res-nightmode pre .change,
+.res-nightmode pre .winutils,
+.res-nightmode pre .flow,
+.res-nightmode pre .lisp .title,
+.res-nightmode pre .clojure .built_in,
+.res-nightmode pre .nginx .title,
+.res-nightmode pre .tex .special {
+  color: #F92672;
+}
+
+.res-nightmode pre code .constant {
+  color: #66D9EF;
+}
+
+.res-nightmode pre .class .title {
+  color: white;
+}
+
+.res-nightmode pre .attribute,
+.res-nightmode pre .symbol,
+.res-nightmode pre .symbol .string,
+.res-nightmode pre .value,
+.res-nightmode pre .regexp {
+  color: #BF79DB;
+}
+
+.res-nightmode pre .tag .value,
+.res-nightmode pre .string,
+.res-nightmode pre .subst,
+.res-nightmode pre .title,
+.res-nightmode pre .haskell .type,
+.res-nightmode pre ..res-nightmode preprocessor,
+.res-nightmode pre .ruby .class .parent,
+.res-nightmode pre .built_in,
+.res-nightmode pre .sql .aggregate,
+.res-nightmode pre .django .template_tag,
+.res-nightmode pre .django .variable,
+.res-nightmode pre .smalltalk .class,
+.res-nightmode pre .javadoc,
+.res-nightmode pre .django .filter .argument,
+.res-nightmode pre .smalltalk .localvars,
+.res-nightmode pre .smalltalk .array,
+.res-nightmode pre .attr_selector,
+.res-nightmode pre .pseudo,
+.res-nightmode pre .addition,
+.res-nightmode pre .stream,
+.res-nightmode pre .envvar,
+.res-nightmode pre .apache .tag,
+.res-nightmode pre .apache .cbracket,
+.res-nightmode pre .tex .command,
+.res-nightmode pre .input_number {
+  color: #A6E22E;
+}
+
+.res-nightmode pre .comment,
+.res-nightmode pre .java .annotation,
+.res-nightmode pre .python .decorator,
+.res-nightmode pre .template_comment,
+.res-nightmode pre .pi,
+.res-nightmode pre .doctype,
+.res-nightmode pre .deletion,
+.res-nightmode pre .shebang,
+.res-nightmode pre .apache .sqbracket,
+.res-nightmode pre .tex .formula {
+  color: #75715E;
+}
+
+.res-nightmode pre .keyword,
+.res-nightmode pre .literal,
+.res-nightmode pre .css .id,
+.res-nightmode pre .phpdoc,
+.res-nightmode pre .title,
+.res-nightmode pre .haskell .type,
+.res-nightmode pre .vbscript .built_in,
+.res-nightmode pre .sql .aggregate,
+.res-nightmode pre .rsl .built_in,
+.res-nightmode pre .smalltalk .class,
+.res-nightmode pre .diff .header,
+.res-nightmode pre .chunk,
+.res-nightmode pre .winutils,
+.res-nightmode pre .bash .variable,
+.res-nightmode pre .apache .tag,
+.res-nightmode pre .tex .special,
+.res-nightmode pre .request,
+.res-nightmode pre .status {
+  font-weight: bold;
+}
+
+.res-nightmode pre .coffeescript .javascript,
+.res-nightmode pre .javascript .xml,
+.res-nightmode pre .tex .formula,
+.res-nightmode pre .xml .javascript,
+.res-nightmode pre .xml .vbscript,
+.res-nightmode pre .xml .css,
+.res-nightmode pre .xml .cdata {
+  opacity: 0.5;
+}

src/style/interstitial.less

@@ -0,0 +1,76 @@
+@margin-interstitial-top: 60;
+
+.interstitial {
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  margin: auto;
+  text-align: center;
+  width: 650px;
+}
+
+.modal .interstitial {
+  width: auto;
+
+  .interstitial-image {
+    margin-top: @margin-large * 1px;
+  }
+}
+
+.interstitial-image {
+  margin-bottom: @margin-large * 1px;
+  margin-top: @margin-interstitial-top * 1px;
+}
+
+.interstitial-message .note {
+  color: #a5a4a4;
+  font-size: @font-small;
+}
+
+.interstitial .md {
+  h3 {
+    .md-font-size(@font-small, @font-x-large, @line-x-large);
+    .md-margins(@font-x-large, @margin-large, @margin-large);
+  }
+
+  h5,
+  p {
+    .md-font-size(@font-small, @font-large, @line-large);
+  }
+
+  p { 
+    font-weight: 300;
+  }
+}
+
+.interstitial-subreddit-description {
+  background-color: lighten(@color-pale-grey, 5%);
+  margin-bottom: @margin-large * 1px;
+  padding: (@margin-small * 1px) (@margin-large * 1px);
+
+  h5 {
+    margin-bottom: @margin-large * 1px;
+    margin-top: 0;
+  }
+
+  p {
+    margin: 0;
+    text-align: left;
+  }
+}
+
+.interstitial .buttons {
+  .display-flex();
+  .justify-content(center);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: @margin-xx-large * 1px;
+  width: 400px;
+
+  .c-btn {
+    .flex(0 1 75%);
+    font-weight: 500;
+    margin-left: @margin-x-small * 1px;
+    margin-right: @margin-x-small * 1px;
+    padding-bottom: 8px;
+    padding-top: 8px;
+  }
+}

src/style/markdown.less

@@ -0,0 +1,414 @@
+// markdown colors
+@markdown-color-link: @color-alien-blue;
+@markdown-color-code: @color-off-white;
+@markdown-color-code-alt: @color-white;
+@markdown-color-border-light: @color-pale-grey;
+@markdown-color-border-heavy: darken(@color-pale-grey, 15%);
+@markdown-color-font: @color-semi-black;
+@markdown-color-font-light: @color-text-grey;
+
+// wiki page styles
+@markdown-color-wiki-header: @color-text-grey;
+@markdown-color-wiki-header-alt: @color-ui-blue;
+
+
+.md-font-size(@base, @font, @line) {
+  font-size: (@font / @base) * 1em;
+  line-height: (@line / @font) * 1em;
+}
+
+.md-margins(@font, @top, @bottom) {
+  margin-top: (@top / @font) * 1em;
+  margin-bottom: (@bottom / @font) * 1em;
+}
+
+.md-base-font-size(@font-size) {
+  font-size: (@font-size / @base-font-keyword-size) * 1em;
+}
+
+.md-container-small,
+.md-container {
+  font-size: @base-font-keyword;
+}
+
+.md {
+  h1, h2, h3, h4, h5, h6 {
+    &:extend(.md .-headers all);
+  }
+
+  th, td {
+    &:extend(.md .-cells all);
+  }
+
+  ul, ol {
+    &:extend(.md .-lists all);
+  }
+
+  .-lists, pre, blockquote, table, p {
+    &:extend(.md .-blocks all);
+  }
+
+  p, pre > code, th, td, li {
+    &:extend(.md .-text all);
+  }
+
+  color: @markdown-color-font;
+  max-width: 60em;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  .-headers {
+    border: 0;
+    color: inherit;
+    -webkit-font-smoothing: antialiased;
+
+    code {
+      font-size: inherit;
+    }
+  }
+
+  blockquote,
+  del {
+    color: @markdown-color-font-light;
+  }
+
+  a {
+    color: @markdown-color-link;
+    text-decoration: none;
+
+    del {
+      color: inherit;
+    }
+  }
+
+  h6 {
+    text-decoration: underline;
+  }
+
+  em {
+    font-style: italic;
+    font-weight: inherit;
+  }
+
+  th,
+  strong,
+  .-headers {
+    font-weight: 600;
+    font-style: inherit;
+  }
+
+  h2,
+  h4 {
+    font-weight: 500;
+  }
+
+  &,
+  h6 {
+    font-weight: 400;
+  }
+
+  * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  tr,
+  code,
+  .-cells,
+  .-lists,
+  .-blocks,
+  .-headers {
+    margin: 0;
+    padding: 0;
+  }
+
+  hr {
+    border: 0;
+    color: transparent;
+    background: @markdown-color-border-heavy;
+    height: 2px;
+    padding: 0;
+  }
+
+  blockquote {
+    border-left: 2px solid @markdown-color-border-heavy;
+  }
+
+  code,
+  pre {
+    border: 1px solid darken(@markdown-color-code, 10%);
+    background-color: @markdown-color-code;
+    border-radius: 2px;
+  }
+
+  code {
+    margin: 0 2px;
+    white-space: nowrap;
+    word-break: normal;
+  }
+
+  p {
+    code {
+      line-height: 1em;
+    }
+  }
+
+  pre {
+    overflow: auto;
+
+    code {
+      white-space: pre;
+      background-color: transparent;
+      border: 0;
+      display: block;
+      padding: 0 !important;
+    }
+  }
+
+  // can't rely on &:extend here, doesn't apply the align rules
+  td, th {
+    border: 1px solid @markdown-color-border-light;
+    text-align: left;
+
+    &[align=center] {
+      text-align: center;
+    }
+
+    &[align=right] {
+      text-align: right;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  blockquote {
+    // -2 to compensate for border
+    padding: 0 ((@margin-small - 2) * 1px);
+    margin-left: (@margin-x-small * 1px);
+  }
+
+  code {
+    padding: 0 ((@margin-x-small - 1) * 1px);
+  }
+
+  pre,
+  .-cells {
+    padding: ((@margin-x-small - 1) * 1px) ((@margin-small - 1) * 1px);
+  }
+
+  .-lists {
+    padding-left: (@margin-xxx-large * 1px);
+  }
+
+  sup {
+    font-size: 0.86em;
+    line-height: 0;
+  }
+
+  li li,
+  li p {
+    font-size: 1em !important;
+  }
+}
+
+
+.link .usertext .md {
+  padding: (@margin-x-small * 1px) (@margin-small * 1px);
+}
+
+.new-comment .md,
+.link .md,
+.usertext.border .md {
+  :not(pre) > code,
+  pre {
+    background-color: @markdown-color-code-alt;
+  }
+}
+
+.linklisting .md,
+.commentarea .md {
+  @vertical-margin: (@margin-x-small * 1px);
+  margin-top: @vertical-margin;
+  margin-bottom: @vertical-margin;
+}
+
+textarea {
+  // prevent from using system default colors, since this can cause
+  // problems on systems with dark color schemes
+  background-color: white;
+  color: black;
+}
+
+code {
+  // this hack fixes browsers automatically shrinking monospace fonts.  weird.
+  // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
+  font-family:monospace,monospace;
+}
+
+
+.md {
+  @font-base: @font-small;
+  @line-base: @line-small;
+
+  .md-base-font-size(@font-base);
+
+  h1,
+  h2 {
+    .md-font-size(@font-base, @font-large, @line-large);
+    .md-margins(@font-large, @margin-medium, @margin-medium);
+  }
+
+  h3,
+  h4 {
+    .md-font-size(@font-base, @font-medium, @line-medium);
+    .md-margins(@font-medium, @margin-small, @margin-small);
+  }
+
+  h5,
+  h6 {
+    .md-font-size(@font-base, @font-base, @line-base);
+    .md-margins(@font-base, @margin-small, @margin-x-small);
+  }
+
+  .-blocks {
+    .md-margins(@font-base, @margin-x-small, @margin-x-small);
+  }
+
+  textarea,
+  .-text {
+    .md-font-size(@font-base, @font-base, @line-base);
+  }
+}
+
+.md-container-small .md,
+.side .md {
+  @font-base: @font-x-small;
+  @line-base: @line-x-small;
+
+  .md-base-font-size(@font-base);
+
+  h1,
+  h2 {
+    .md-font-size(@font-base, @font-large, @line-large);
+    .md-margins(@font-large, @margin-small, @margin-small);
+  }
+
+  h3,
+  h4 {
+    .md-font-size(@font-base, @font-medium, @line-medium);
+    .md-margins(@font-medium, @margin-small, @margin-small);
+  }
+
+  h5,
+  h6 {
+    .md-font-size(@font-base, @font-small, @line-small);
+    .md-margins(@font-small, @margin-small, @margin-x-small);
+  }
+
+  .-blocks {
+    .md-margins(@font-base, @margin-x-small, @margin-x-small);
+  }
+
+  .-text {
+    .md-font-size(@font-base, @font-base, @line-base);
+  }
+}
+
+.wiki-page-content .md {
+  @font-base: @font-small;
+  @line-base: @line-small;
+
+  h1 {
+    .md-font-size(@font-base, @font-xxx-large, @line-xxx-large);
+    .md-margins(@font-xxx-large, @margin-xxx-large, @margin-x-large);
+  }
+
+  h2 {
+    .md-font-size(@font-base, @font-xx-large, @line-xx-large);
+    .md-margins(@font-xx-large, @margin-xx-large, @margin-medium);
+  }
+
+  h3 {
+    .md-font-size(@font-base, @font-x-large, @line-x-large);
+    .md-margins(@font-x-large, @margin-large, @margin-small);
+  }
+
+  .-blocks {
+    .md-margins(@font-base, @margin-x-small, @margin-small);
+  }
+
+  // Style changes for wiki pages
+  h1,
+  h6 {
+    color: @markdown-color-wiki-header;
+    font-weight: 300;
+  }
+
+  h2 {
+    color: @markdown-color-wiki-header-alt;
+  }
+
+  h2,
+  h3 {
+    font-weight: 600;
+  }
+
+  h4 {
+    font-style: italic;
+  }
+
+  h5 {
+    text-decoration: underline;
+  }
+
+  h4,
+  h5 {
+    font-weight: 400;
+  }
+
+  h6 {
+    .md-font-size(@font-base, @font-base, @line-base);
+    .md-margins(@font-base, @margin-medium, @margin-x-small);
+
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+}
+
+
+.md {
+  &,
+  .-cells,
+  .-lists,
+  .-blocks,
+  .-headers {
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    > :first-child {
+      margin-top: 0;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

src/style/mobile.css

@@ -0,0 +1,153 @@
+body {
+     font-family: verdana,arial,helvetica,sans-serif;
+     margin: 0;
+     padding: 0;
+     color: #888;
+}
+
+a {
+  text-decoration: none;
+  color: #369;
+  }
+
+p { 
+  margin: 0px;
+  padding: 0px;
+  }
+
+ul {
+   margin: 5px;
+   padding: 0px;
+   list-style: none;
+   }
+
+.link {
+      padding: 5px 5px 5px 5px;
+      /*padding-top: 5px;
+      padding-bottom: 5px;
+      margin-left: 2px;
+      display: inline;*/
+      }
+
+.title {
+       color: black;
+       }
+
+.byline {
+	margin: 0px 0px .5em 2px;
+        display: inline;
+        font-size: small;
+        }
+
+.description {
+             margin-bottom: .5em;
+             }
+
+.domain {
+        color: #369;
+        }
+
+.comment .md, .subreddit .md {
+    color: black;
+}
+
+.link .md {
+    color: black;
+    margin: 5px 5px 10px 5px;
+}
+
+.comment .child {
+    border-left: 1px dotted #DDF;
+}
+
+.child {
+       padding-left: 1em;
+       margin-left: 1em;
+       border-left: 1px dotted #DDF;
+       }
+
+.headerbar {
+           background-color: lightgrey;
+	   margin: 5px 0px 5px 2px;
+}
+
+.headerbar span {
+           background-color: white;
+           color: gray;
+           font-weight: bold;
+           margin-left: 15px;
+           padding: 0px 3px;
+}
+
+.score {
+       margin: 0px .5em 0px .5em;
+}
+
+.error { 
+       color: red; 
+       margin: 5px;
+       }
+
+.nextprev { 
+          margin: 10px;
+          }
+
+.tabmenu {
+    list-style-type: none;
+    display: inline;
+}
+
+.tabmenu li {
+            display: inline;
+	    margin-right: .25em;
+	    padding-left: .25em;
+            border-left: thin solid #000;
+            }
+
+.redditname {
+            font-weight: bold;
+            margin: 0px 3px 0px 3px;
+            }
+
+.selected {
+          font-weight: bold;
+          }
+
+.pagename {
+          font-weight: bold;
+          margin-right: 1ex;
+          color: black;
+          }
+
+.or {
+    border-left:thin solid #000000;
+    border-right:thin solid #000000;
+    padding: 0px .25em 0px .25em;
+    }
+ 
+#header {
+        background-color: #CEE3F8;
+        }
+
+#header .redditname a{
+                     color: black;
+                     }
+
+#header img {
+            margin-right: 3px;
+            }
+
+/* markdown */
+.md { max-width: 60em; overflow: auto; }
+.md p, .md h1 { margin-bottom: .5em;}
+.md h1 { font-weight: normal; font-size: 100%; }
+.md > * { margin-bottom: 0px }
+.md strong { font-weight: bold; }
+.md em { font-style: italic; }
+.md img { display: none }
+.md ol, .md ul { margin: 10px 2em; }
+.md pre { margin: 10px; }
+.flair, .linkflair { color: #545454; background-color: #F5F5F5; border: 1px solid #DEDEDE; }
+.linkflair { display: inline-block; font-size: small; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+a.author, .flair, .linkflair { margin-right: 0.5em }
+.author.submitter { color: white; background-color: #5F99CF; padding: 0 4px; }

src/style/mod-action-icons.less

@@ -0,0 +1,51 @@
+@mod-action-icon-size: 16px;
+
+.mod-action-icon {
+    display: inline-block;
+    width: @mod-action-icon-size;
+    height: @mod-action-icon-size;
+    background-position: center;
+}
+
+.mod-action-icon-delete {
+    .hdpi-bg-image(@1x: url(../mod-action-icon-delete.png),
+                   @2x: url(../mod-action-icon-delete_2x.png),
+                   @2x-bg-size: @mod-action-icon-size);
+    
+    &:hover,
+    .mod-action-deleting & {
+        .hdpi-bg-image(@1x: url(../mod-action-icon-delete-active.png),
+                       @2x: url(../mod-action-icon-delete-active_2x.png),
+                       @2x-bg-size: @mod-action-icon-size);
+    }
+}
+
+.mod-action-icon-edit {
+    .hdpi-bg-image(@1x: url(../mod-action-icon-edit.png),
+                   @2x: url(../mod-action-icon-edit_2x.png),
+                   @2x-bg-size: @mod-action-icon-size);
+
+    &:hover {
+        .hdpi-bg-image(@1x: url(../mod-action-icon-edit-active.png),
+                       @2x: url(../mod-action-icon-edit-active_2x.png),
+                       @2x-bg-size: @mod-action-icon-size);
+    }
+}
+
+.mod-action-icon-add {
+    .hdpi-bg-image(@1x: url(../mod-action-icon-add.png),
+                   @2x: url(../mod-action-icon-add_2x.png),
+                   @2x-bg-size: @mod-action-icon-size);
+}
+
+.mod-action-icon-cancel {
+    .hdpi-bg-image(@1x: url(../mod-action-icon-cancel.png),
+                   @2x: url(../mod-action-icon-cancel_2x.png),
+                   @2x-bg-size: @mod-action-icon-size);
+}
+
+.mod-action-icon-confirm {
+    .hdpi-bg-image(@1x: url(../mod-action-icon-confirm.png),
+                   @2x: url(../mod-action-icon-confirm_2x.png),
+                   @2x-bg-size: @mod-action-icon-size);
+}

src/style/modtools.less

@@ -0,0 +1,20 @@
+@import "components/variables.less";
+@import "components/mixins.less";
+@import "markdown.less";
+
+@import "mod-action-icons.less";
+@import "subreddit-rules.less";
+
+#this_is_a_hack__please_ignore {
+  // lets me put this file in the SPRITED_STYLESHEETS section of the Makefile
+  background-image: url(../reddit.com.header.png); /* SPRITE */
+}
+
+.modtools-page {
+    & > div.content {
+      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+      margin: 0;
+      margin-right: @reddit-sidebar-width;
+      padding: 15px 20px;
+    }
+}

src/style/policies.less

@@ -0,0 +1,234 @@
+.transition (@property, @duration, @function: ease, @delay: 0s) {
+    -webkit-transition: @arguments;
+    -moz-transition: @arguments;
+    -o-transition: @arguments;
+    -ms-transition: @arguments;
+    transition: @arguments;
+}
+
+.policy-page {
+    position: relative;
+    margin: 0 auto;
+    padding-left: 195px;
+    width: 43em;
+    font-size: 11pt;
+
+    .md {
+        line-height: 1.75em;
+        overflow: visible;
+        margin: 0;
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        h1 {
+            font-size: 1.75em;
+            font-weight: bold;
+            margin: 1.5em 0;
+
+            a {
+                color: black;
+                padding-bottom: 2px;
+
+                &:hover {
+                    // the padding added to the em causes a break in the text-decoration underline
+                    text-decoration: none;
+                    border-bottom: 1px solid #777;
+                }
+            }
+
+            strong {
+                margin-right: .5em;
+            }
+
+            em {
+                font-size: .60em;
+                font-style: normal;
+                color: #777;
+                white-space: nowrap;
+            }
+        }
+
+        h2 {
+            font-size: 1.4em;
+            margin: 1em 0 .75em;
+            padding-top: 1em;
+            color: #336699;
+        }
+
+        h3 {
+            color: #333;
+            font-size: 1.1em;
+            margin-top: 1.5em;
+
+            a {
+                color: black;
+            }
+        }
+
+        h1, h2, h3 {
+            text-transform: lowercase;
+        }
+
+        p {
+            margin-bottom: 1em;
+            color: #222;
+        }
+
+        p em {
+            line-height: 1.5em;
+            font-style: normal;
+            display: block;
+            background: #fcfbd7;
+            padding: .5em .75em;
+            margin: 0 -.75em;
+            margin-top: 1.5em;
+            position: relative;
+            top: -.5em;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px #d1d0bb;
+        }
+
+        a.p-anchor {
+            float: left;
+            font-size: 10pt;
+            font-weight: normal;
+            color: #ddd;
+            margin-left: -3.5em;
+            width: 1.5em;
+            text-align: right;
+            .transition(color, 1.5s);
+        }
+
+        h1:hover > a.p-anchor,
+        h2:hover > a.p-anchor,
+        h3:hover > a.p-anchor,
+        p:hover > a.p-anchor {
+            color: #555;
+            .transition(color, 0.25s, ease, 0.5s);
+
+            &:hover {
+                .transition(color, 0s);
+            }
+        }
+
+        blockquote {
+            margin: .5em 0;
+            padding: 0;
+            border: none;
+            font-size: 1.7em;
+
+            p {
+                line-height: 1.5em;
+                color: #555;
+            }
+        }
+    }
+
+    .doc-info, .md blockquote {
+        top: 2.5em;
+        margin-top: 1.5em;
+        h4 {
+            margin-bottom: .75em;
+        }
+    }
+
+    .doc-info {
+        position: absolute;
+        margin-left: -13em;
+        width: 10em;
+
+        h4 {
+            color: #555;
+            font-size: .9em;
+        }
+
+        .revisions li {
+            font-size: .85em;
+        }
+
+        .toc ul ul li {
+            font-size: .85em;
+        }
+
+        li {
+            margin: .75em 0;
+
+            &.selected {
+                font-weight: bold;
+            }
+        }
+
+        .revisions li {
+            white-space: nowrap;
+        }
+
+        .toc {
+            position: relative;
+            text-transform: lowercase;
+
+            & > ul {
+                margin-bottom: 1.5em;
+
+                // only display h2 sections in toc
+
+                & > li {
+                    display: none;
+                }
+
+                & > li.toc_child {
+                    display: block;
+                }
+
+                ul ul {
+                    display: none;
+                }
+            }
+
+            .location {
+                position: absolute;
+                left: -11px;
+                margin-top: 2px;
+                border: 5px solid transparent;
+                border-left-color: orangered;
+            }
+        }
+    }
+}
+
+@media (max-width: 835px) {
+    .policy-page {
+        padding-left: 0;
+
+        .doc-info.scroll-fixed-standin {
+            display: none;
+        }
+
+        .doc-info {
+            position: static;
+            margin: 2em 0;
+            width: auto;
+
+            &.scroll-fixed {
+                position: static !important;
+            }
+
+            .toc {
+                display: none;
+            }
+
+            .revisions li {
+                display: inline-block;
+                margin: 0 .5em;
+            }
+        }
+    }
+}
+
+@media (max-width: 635px) {
+    .policy-page {
+        margin: 0 1em;
+        width: auto;
+    }
+}

src/style/post-sharing.less

@@ -0,0 +1,245 @@
+@post-sharing-icon-size: 26px;
+@post-sharing-max-width: 550px;
+@post-sharing-shareplane-width: 50px;
+@post-sharing-shareplane-height: 32px;
+
+@post-sharing-shareplane-image: '../share-paper-airplane.png';
+@post-sharing-facebook-image: '../share-to-facebook.png';
+@post-sharing-twitter-image: '../share-to-twitter.png';
+@post-sharing-tumblr-image: '../share-to-tumblr.png';
+@post-sharing-email-image: '../share-to-email.png';
+@post-sharing-reddit-pm-image: '../share-to-reddit-pm.png';
+
+@post-sharing-color-success: @color-green;
+@post-sharing-color-button-focus: @color-white;
+@post-sharing-color-background: #fbfbfb;
+@post-sharing-color-border: darken(@post-sharing-color-background, 10%);
+@post-sharing-color-tooltip: @color-white;
+@post-sharing-color-tooltip-border: darken(@color-white, 10%);
+@post-sharing-color-tooltip-text: @color-semi-black;
+
+@post-sharing-font-base: @font-small;
+@post-sharing-font-small: @font-x-small;
+@post-sharing-line-base: @line-small;
+
+.post-sharing-font-size(@font:@post-sharing-font-base, @line:@post-sharing-line-base) {
+  .md-font-size(@post-sharing-font-base, @font, @line);
+}
+
+.post-sharing {
+  background: @post-sharing-color-background;
+  border: 1px solid @post-sharing-color-border;
+  box-sizing: border-box;
+  display: none;
+  font-size: @base-font-keyword;
+  max-width: @post-sharing-max-width;
+  padding: (@margin-large * 1px);
+  position: relative;
+
+  .c-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: @margin-x-small * 1px;
+  }
+
+  .post-sharing-form {
+    .md-base-font-size(@post-sharing-font-base);
+    display: none;
+  }
+
+  .post-sharing-main {
+    display: block;
+
+    .c-form-group {
+      .align-items(center);
+      .display-flex();
+
+      > * {
+        .flex(1 1 100%);
+      }
+
+      > .post-sharing-label {
+        .flex(0 0 83px);
+        padding-right: @margin-small * 1px;
+        text-align: right;
+      }
+
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+
+  .post-sharing-email-form {
+    .c-form-group {
+      margin-bottom: @margin-small * 1px;
+      margin-top: @margin-small * 1px;
+    }
+
+    &.shared {
+      .post-sharing-shareplane {
+        display: block;
+
+        &:before {
+          .animation(post-sharing-shareplane .7s forwards);
+        }
+      }
+
+      .post-sharing-buttons {
+        .c-btn {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .post-sharing-label {
+    .post-sharing-font-size();
+    color: @color-dark-grey;
+  }
+
+  .post-sharing-option {
+    background-size: @post-sharing-icon-size @post-sharing-icon-size;
+    cursor: pointer;
+    display: inline-block;
+    height: @post-sharing-icon-size;
+    margin-right: @margin-x-small * 1px;
+    margin-top: @margin-x-small * 1px;
+    position: relative;
+    width: @post-sharing-icon-size;
+
+    &:hover .c-tooltip {
+      bottom: 100%;
+      opacity: 1;
+    }
+
+    .c-tooltip {
+      .transform(translate(-50%, @tooltip-arrow-width * -1));
+      .transition(all, 0.15s);
+      bottom: 50%;
+      left: 50%;
+      pointer-events: none;
+
+      .tooltip-inner {
+        .box-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
+        background: @post-sharing-color-tooltip;
+        border: 1px solid @post-sharing-color-tooltip-border;
+        color: @post-sharing-color-tooltip-text;
+        padding: @margin-small * 1px;
+        white-space: nowrap;
+      }
+
+      .tooltip-arrow {
+        .transform(translate(-50%, -1px));
+        border-top-color: @post-sharing-color-tooltip;
+        left: 50%;
+        top: 100%;
+      }
+    }
+  }
+
+  .post-sharing-option-facebook {
+    background-image: data-uri(@post-sharing-facebook-image);
+  }
+
+  .post-sharing-option-twitter {
+    background-image: data-uri(@post-sharing-twitter-image);
+  }
+
+  .post-sharing-option-tumblr {
+    background-image: data-uri(@post-sharing-tumblr-image);
+  }
+
+  .post-sharing-option-email {
+    background-image: data-uri(@post-sharing-email-image);
+  }
+
+  .post-sharing-option-reddit-pm {
+    background-image: data-uri(@post-sharing-reddit-pm-image);
+  }
+
+  .post-sharing-shareplane {
+    .post-sharing-font-size(@post-sharing-font-small);
+    bottom: 0;
+    color: @post-sharing-color-success;
+    display: none;
+    font-weight: bold;
+    padding: (@margin-x-small* 1px) (@margin-medium * 1px);
+    position: absolute;
+    right: 0;
+    text-transform: uppercase;
+
+    &:before {
+      background-image: data-uri(@post-sharing-shareplane-image);
+      background-size: @post-sharing-shareplane-width @post-sharing-shareplane-height;
+      content: '';
+      height: @post-sharing-shareplane-height;
+      position: absolute;
+      transform: translate(0, 0);
+      width: @post-sharing-shareplane-width;
+    }
+  }
+
+  .post-sharing-buttons {
+    overflow: auto;
+
+    .c-btn {
+      .no-select();
+      margin-left: @margin-x-small * 1px;
+      margin-right: 0;
+      padding: (@margin-x-small * 1px) (@margin-medium * 1px);
+
+      &:focus {
+        box-shadow: 0 0 0 1px @post-sharing-color-button-focus inset;
+        outline: none;
+      }
+    }
+  }
+}
+
+.post-sharing-shareplane-animation() {
+  @keyframe-0-translate-x: 0px;
+  @keyframe-0-translate-y: 0px;
+  @keyframe-0-opacity: 0;
+
+  @keyframe-1-translate-x: 20px;
+  @keyframe-1-translate-y: -10px;
+  @keyframe-1-opacity: 1;
+
+  @keyframe-2-translate-x: -50px;
+  @keyframe-2-translate-y: -60px;
+  @keyframe-2-opacity: 0;
+
+  0% {
+    opacity: @keyframe-0-opacity;
+    transform: translate(@keyframe-0-translate-x, @keyframe-0-translate-y);
+  }
+
+  50% {
+    opacity: @keyframe-1-opacity;
+    transform: translate(@keyframe-1-translate-x, @keyframe-1-translate-y);
+  }
+
+  60% {
+    opacity: @keyframe-1-opacity;
+    transform: translate(@keyframe-1-translate-x, @keyframe-1-translate-y);
+  }
+
+  100% {
+    opacity: @keyframe-2-opacity;
+    transform: translate(@keyframe-2-translate-x, @keyframe-2-translate-y);
+  }
+}
+
+@keyframes post-sharing-shareplane {
+  .post-sharing-shareplane-animation()
+}
+
+@-o-keyframes post-sharing-shareplane {
+  .post-sharing-shareplane-animation()
+}
+
+@-webkit-keyframes post-sharing-shareplane {
+  .post-sharing-shareplane-animation()
+}

src/style/reddit-embed.less

@@ -0,0 +1,160 @@
+@import "components/variables.less";
+@import "components/mixins.less";
+@import "markdown.less";
+
+
+* {
+    .box-sizing(border-box)
+}
+
+body {
+    font: normal 14px verdana, arial, helvetica, sans-serif;
+    margin: 0;
+}
+
+a {
+    color: #369;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+p {
+    margin: 0 0 .5em;
+}
+
+.reddit-embed {
+    background: #fff;
+}
+
+.reddit-embed-content {
+    border-bottom: 1px solid #f6f6f6;
+    padding: 20px;
+}
+
+.reddit-embed-footer {
+    @snoo-height: 32px;
+    @snoo-width: 90px;
+    @snoo-padding: 12px;
+
+    background: #fafbfd;
+    display: table;
+    font-size: 12px;
+    height: (@snoo-height + (@snoo-padding * 2));
+    padding: 20px;
+    padding-right: (@snoo-width + (@snoo-padding * 2));
+    position: relative;
+    width: 100%;
+
+    p {
+        display: table-cell; 
+        margin: 0;
+        padding: 0;
+        vertical-align: middle; 
+    }
+
+    .reddit-embed-footer-img {
+        display: block;
+        position: absolute;
+        right: @snoo-padding;
+        bottom: @snoo-padding;
+        width: @snoo-width;
+        height: @snoo-height;
+        .hdpi-bg-image(@1x: url(../reddit-embed-logo.png); @2x: url(../reddit-embed-logo_2x.png););
+        text-indent: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+
+.reddit-embed-list {
+    margin: 0;
+    padding: 0;
+
+    .reddit-embed-list {
+        margin-left: 20px;
+    }
+}
+
+.reddit-embed-list-item {
+    list-style: none;
+    margin-top: 24px;
+
+    .reddit-embed-content > .reddit-embed-list > &:first-child {
+        margin-top: 0;
+    }
+}
+
+.reddit-embed-author {
+    color: #6f6f6f;
+    font-weight: bold;
+}
+
+// Comment embeds
+.reddit-embed-comment-header {
+    position: relative;
+}
+
+.reddit-embed-comment-meta {
+    font-size: 12px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.reddit-embed-comment-meta-item {
+    color: #6f6f6f;
+
+    &:after {
+        content: '•';
+        display: inline-block;
+        margin: 0 5px;
+    }
+
+    &:last-child:after {
+        display: none;
+    }
+}
+
+.reddit-embed-comment-body {
+    margin: 10px 0 0;
+}
+
+.reddit-embed-comment-edited,
+.reddit-embed-comment-deleted {
+    background: #f7f7f7;
+    padding: 48px 18px;
+    text-align: center;
+}
+
+.reddit-embed-comment-more {
+    display: none;
+}
+
+.reddit-embed-comment-fade {
+    .reddit-embed-comment-body {
+        position: relative;
+        overflow: hidden;
+        margin-bottom: 8px;
+
+        &:before {
+            content:'';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 40px;
+
+            .linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+        }
+    }
+
+    .reddit-embed-comment-more {
+        position: relative;
+        top: -20px;
+        display: block;
+        padding-top: 20px;
+    }
+}

src/style/search.less

@@ -0,0 +1,455 @@
+@color-body: @color-text-grey;
+@color-meta: @color-dark-grey;
+@color-link: darken(@color-alien-blue, 5%);
+@color-link-visited: @color-link-purple;
+
+@color-unsubscribe: darken(@color-warning-red, 10%);
+@color-subscribe: darken(@color-green, 10%);
+@color-subscribe-button-focus: @color-white;
+@color-group-header-border: @color-pale-grey;
+
+@color-subreddit: @color-meta;
+
+@max-width: 750px;
+@min-width: 600px;
+
+@search-font-large: @font-medium;
+@search-font-medium: @font-small;
+@search-font-base: @font-x-small;
+@search-font-small: @font-xx-small;
+@search-line-base: @line-medium;
+@search-line-small: @line-x-small;
+
+.search-font-size(@font:@search-font-base, @line:@search-line-base, @base:@search-font-base) {
+  .md-font-size(@base, @font, @line);
+}
+
+.combined-search-page {
+  > .content {
+    font-size: @base-font-keyword;
+  }
+
+  // needs the extra selector to override the default styles :/
+  .search-subscribe-button {
+    display: inline-block;
+    margin: 0;
+    margin-right: @margin-x-small * 1px;
+
+    .remove {
+      @color: @color-unsubscribe;
+      @color2: darken(@color, 10%);
+
+      background: @color;
+      border-color: @color2;
+
+      &:active {
+        background: @color2;
+      }
+    }
+
+    .add {
+      @color: @color-subscribe;
+      @color2: darken(@color, 10%);
+
+      background: @color;
+      border-color: @color2;
+
+      &:active {
+        background: @color2;
+      }
+    }
+
+    .add, .remove {
+      color: @color-white;
+      text-align: center;
+      transform: scale(1, 1);
+      transition: all 0.15s;
+      width: 90px;
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 1px @color-subscribe-button-focus inset;
+      }
+
+      &.active {
+        display: inline-block;
+        line-height: 13px;
+      }
+    }
+  }
+
+  .searchfacets {
+    .search-font-size();
+    border: 1px solid @color-meta;
+    margin: 0;
+    margin-left: @margin-xx-large * 1px;
+    margin-top: @margin-large * 1px;
+    max-width: @max-width;
+    min-width: @min-width;
+    overflow: auto;
+    padding: @margin-medium * 1px;
+    white-space: pre-wrap;
+
+    > h4.title {
+      color: @color-dark-grey;
+      margin-bottom: @margin-x-small * 1px;
+    }
+
+    .facet:hover {
+      text-decoration: underline;
+    }
+  }
+
+  li.searchfacet {
+    display: inline-block;
+    line-height: 20px;
+    min-width: 32%;
+  }
+
+  .facet.count {
+    color: @color-meta;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .searchpane {
+    background: none;
+    border: none;
+    padding: @margin-small * 1px;
+    padding-left: @margin-xx-large * 1px;
+  }
+
+  #search {
+    padding-right: 120px;
+  }
+
+  #search input[type=text] {
+    .search-font-size(@search-font-medium);
+    border-color: @color-dark-grey;
+    border-radius: 2px;
+    box-sizing: border-box;
+    max-width: @max-width;
+    min-width: @max-width / 2;
+    padding: @margin-x-small * 1px;
+    padding-left: @margin-small * 1px;
+    padding-right: @margin-x-large * 1px;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .search-submit-button {
+    margin-left: @margin-small * 1px;
+    .search-font-size(@search-font-base);
+    padding: (@margin-x-small * 1px) (@margin-medium * 1px);
+    vertical-align: middle;
+  }
+
+  .menuarea {
+    font-size: 1em;
+    margin-left: @margin-large * 1px;
+  }
+
+  .linkflairlabel {
+    line-height: 17px;
+  }
+
+  // undo old styles, remove when unflagged
+  .searchfacets {
+    background: transparent;
+    box-shadow: none;
+
+    .list {
+      margin: 0;
+    }
+  }
+
+  .facet.count {
+    font-weight: normal;
+  }
+
+  .search-icon {
+    background-image: data-uri('../search-button-icon.png');
+    background-size: 20px 20px;
+    display: inline-block;
+    height: 20px;
+    transform: translateY(-1px);
+    vertical-align: middle;
+    width: 20px;
+  }
+}
+
+.search-result-listing {
+  .md-base-font-size(@search-font-base);
+}
+
+.search-result.visited {
+  .search-title,
+  .search-link {
+    &, > mark {
+      color: @color-link-visited;
+    }
+  }
+}
+
+.search-result {
+  margin-bottom: @margin-x-large * 1px;
+  margin-top: @margin-small * 1px;
+
+  :link {
+    &, > mark {
+      color: @color-link;
+    }
+  }
+
+  :visited {
+    &, > mark {
+      color: @color-link-visited;
+    }
+  }
+
+  &.has-thumbnail {
+    .display-flex();
+
+    > * {
+      .flex(1 1);
+    }
+
+    > .thumbnail {
+      .flex(0 0 70px);
+      margin-right: @margin-small * 1px;
+      width: 70px;
+
+      img {
+        display: block;
+        height: auto;
+        width: 100%;
+      }
+    }
+  }
+
+
+  mark {
+    background-color: transparent;
+    color: inherit;
+    font-weight: bold;
+    line-height: 1em;
+  }
+}
+
+.search-result-meta,
+.search-result-footer {
+  .search-font-size();
+  vertical-align: baseline;
+
+  > * {
+    // prevent unstyled children (e.g. spans) from adding to line-height
+    line-height: 1em;
+  }
+}
+
+.search-result-header {
+  .search-font-size();
+
+  > * {
+    vertical-align: top;
+  }
+
+}
+
+.search-title {
+  font-size: @search-font-large * 1px;
+  margin-right: @margin-x-small * 1px;
+}
+
+.search-result-meta {
+  // let this element inherit the same styles as the 'tagline' class
+  // we don't want to add the extra class to the markup because it will cause
+  // the line to potentially inherit a bunch of unwanted styles from subreddit
+  // stylesheets
+  &:extend(.tagline all);
+
+  .search-font-size(@search-font-small, @search-line-base);
+  color: @color-meta;
+
+  .search-result-icon {
+    vertical-align: text-bottom;
+  }
+}
+
+.search-score {
+  .search-font-size(@search-font-base, @search-font-base, @search-font-small);
+
+  &:after {
+    content: ' •';
+  }
+}
+
+.search-comments {
+  font-weight: bold;
+  color: @color-meta;
+}
+
+.search-result-body {
+  .search-font-size(@search-font-base, @search-line-small);
+  color: @color-body;
+  padding-right: @margin-xxx-large * 1px;
+}
+
+.search-expando {
+  overflow: hidden;
+
+  &.collapsed {
+    max-height: 45px;
+    position: relative;
+
+    &:before {
+      bottom: 0;
+      content:'';
+      height: 15px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+
+      .linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+    }
+  }
+}
+
+.search-expando-button {
+  color: @color-link;
+
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  > span {
+    display: none;
+  }
+
+  &.expanded .search-expando-button-label-expanded,
+  &.collapsed .search-expando-button-label-collapsed {
+    display: inline;
+  }
+}
+
+.search-result-footer {
+  .search-font-size();
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .search-link {
+    margin-left: @margin-x-small * 1px;
+  }
+}
+
+.search-result-group {
+  max-width: @max-width;
+  min-width: @min-width;
+  padding-left: @margin-xx-large * 1px;
+  padding-right: @margin-large * 1px;
+
+
+  footer .nav-buttons {
+    .search-font-size(@search-font-base);
+    margin-top: @margin-small * 1px;
+    margin-bottom: @margin-xx-large * 1px;
+
+    * { 
+      font-size: inherit;
+    }
+  }
+
+  footer .info {
+    color: @color-meta;
+  }
+}
+
+.search-result-group-header {
+  border-bottom: 2px solid @color-group-header-border;
+  color: @color-dark-grey;
+  margin-bottom: @margin-large * 1px;
+  margin-top: @margin-xx-large * 1px;
+}
+
+.search-header-label {
+  .search-font-size(@search-font-medium);
+  font-weight: bold;
+}
+
+.search-header-menus {
+  float: right;
+}
+
+.search-menu {
+  .search-font-size(@search-font-base);
+  display: inline-block;
+  margin-left: @margin-large * 1px;
+}
+
+.search-result-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 15px;
+  vertical-align: middle;
+  width: 16px;
+}
+
+.search-result-icon-score {
+  background-image: data-uri('../ambivote-icon.png');
+  background-size: 10px 14px;
+}
+
+.search-result-icon-external {
+  background-image: data-uri('../external-link-icon.png');
+  background-size: 15px 7px;
+}
+
+.search-result-icon-filter {
+  background-image: data-uri('../search-icon.png');
+  background-size: 11px 12px;
+}
+
+.search-result-icon-internal {
+  background-image: data-uri('../internal-link-icon.png');
+  background-size: 11px 10px;
+}
+
+
+// old styles, remove when unflagged
+.searchfacets {
+  overflow: auto;
+  font-size: small;
+  white-space: pre-wrap;
+  border: 1px solid gray;
+  padding: 10px;
+  margin-top: -6px;
+  box-shadow: 0 4px 6px -1px #ccc inset;
+  background: #fefefe;
+}
+
+.searchfacets .title {
+  margin: 5px;
+}
+
+.searchfacets .facet:hover {
+  text-decoration: underline;
+}
+
+.searchfacets .list {
+  margin: 0px 0px 0px 10px;
+}
+
+li.searchfacet {
+  display: inline-block;
+  width: 15em;
+}
+
+.facet.count {
+  color: #888888;
+  font-weight: bold;
+}

src/style/subreddit-rules.less

@@ -0,0 +1,209 @@
+.subreddit-rule-item {
+    margin-bottom: 10px;
+    margin-left: -10px;
+    margin-top: 10px;
+    padding: 10px;
+
+    &:hover {
+        background: #F7F7F7;
+    }
+
+    .subreddit-rule-delete-confirmation {
+        text-align: right;
+    }
+}
+
+.subreddit-rule-item .editable .subreddit-rule-contents,
+.subreddit-rule-form {
+    .display-flex();
+}
+
+.subreddit-rule-item .editable .subreddit-rule-contents-display,
+.subreddit-rule-form .form-inputs {
+    .flex(1 1);
+}
+
+.subreddit-rule-item .editable .subreddit-rule-buttons,
+.subreddit-rule-form .form-buttons {
+    .flex(0 0 41px);
+
+    > button {
+        margin-bottom: 5px;
+        margin-left: 5px;
+
+        .mod-action-icon {
+            padding: 5px 10px;
+        }
+    }
+}
+
+.subreddit-rule-form .form-buttons {
+    .display-flex();
+    .flex-direction(column);
+    .justify-content(flex-end);
+}
+
+.subreddit-rule-form {
+    .c-form-group {
+        position: relative;
+        margin-bottom: unit(@margin-medium, px);
+
+        .label {
+            color: @color-grey;
+        }
+
+        .label.required:after {
+            color: @color-warning-red;
+            content: ' *';
+            display: inline;
+        }
+
+        .text-counter {
+            color: @color-grey;
+            position: absolute;
+            right: 0;
+            top: 0;
+
+            &.has-error {
+                color: @color-warning-red;
+            }
+        }
+    }
+
+    .form-group-kind label {
+        margin-right: unit(@margin-large, px);
+    }
+}
+
+.subreddit-rule-add-form-buttons .subreddit-rule-edit-button {
+    color: @color-light-blue;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 15px;
+    text-transform: uppercase;
+
+    &[disabled] {
+        color: @color-grey;
+    }
+
+    .mod-action-icon {
+        margin-right: 5px;
+        vertical-align: bottom;
+    }
+}
+
+.error-fields {
+    color: @color-warning-red;
+    margin-top: unit(@margin-x-small, px);
+    text-align: right;
+
+    > .error {
+        display: block;
+    }
+}
+
+.subreddit-rule-too-many-notice {
+    color: @color-dark-teal;
+    margin-top: unit(@margin-x-small, px);
+}
+
+.subreddit-rule-delete-confirmation {
+    color: @color-warning-red;
+
+    button {
+        background: transparent;
+        border: none;
+        padding: 0 3px;
+        color: @color-light-blue;
+        font-size: 1em;
+    }
+
+    .separator {
+        color: @color-grey;
+    }
+}
+
+.subreddit-rules-page {
+    @icon-size: 52px;
+
+    max-width: 700px;
+    padding-left: @icon-size + 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    position: relative;
+    
+    &:before {
+        .hdpi-bg-image(@1x: url(../modtools-page-icon-rules.png),
+                       @2x: url(../modtools-page-icon-rules_2x.png));
+
+        content: '';
+        display: block;
+        height: @icon-size;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: @icon-size;
+    }
+
+    .subreddit-rule-buttons,
+    .subreddit-rule-add-form-buttons,
+    .form-buttons {
+        button {
+            background: transparent;
+            border: none;
+            padding: 0;
+        }
+    }
+
+    > header {
+      margin-bottom: @margin-xx-large * 1px;
+
+      p {
+        font-weight: 500;
+      }
+    }
+
+    > footer {
+        margin-top: unit(@margin-xx-large, px);
+    }
+
+    .md {
+        p:first-child {
+            margin-top: 0;
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .md-container .md {
+        @font-base: @font-small;
+        @line-base: @line-small;
+
+        h2 {
+            .md-font-size(@font-base, @font-xx-large, @line-xx-large);
+            .md-margins(@font-xx-large, 0, 0);
+            font-weight: 300;
+        }
+
+        .subreddit-rule-title {
+            .md-font-size(@font-base, @font-medium, @line-medium);
+            margin-top: 0;
+            margin-bottom: unit(@margin-x-small, px);
+            font-weight: 500;
+        }
+
+        .subreddit-rule-kind {
+            .md-font-size(@font-base, @font-x-small, @line-medium);
+            margin-bottom: unit(@margin-x-small, px);
+            font-weight: 500;
+            color: @color-dark-grey;
+        }
+
+        .subreddit-rule-description {
+            color: @color-text-grey;
+        }
+    }
+}
+

src/style/wiki.less

@@ -0,0 +1,184 @@
+.transition (@prop: all, @time: 1s, @ease: linear) {
+    -webkit-transition: @prop @time @ease;
+    -moz-transition: @prop @time @ease;
+    -o-transition: @prop @time @ease;
+    -ms-transition: @prop @time @ease;
+    transition: @prop @time @ease;
+}
+
+.wiki-page {
+    // Main content portion of the wiki pages
+    .wiki-page-content {
+        margin: 15px;
+        margin-right: 325px;
+
+        // Wiki page listing 
+        .pagelisting {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: black;
+            padding-left: 25px;
+            ul {
+                list-style: disc;
+                padding: 2px;
+                padding-left: 10px;
+            }
+        }
+
+        // Page action subtitle 
+        .description {
+            padding-bottom: 5px;
+            h2 {
+                color: #222;
+            }
+        }
+
+        // Revision listing 
+        .wikirevisionlisting {
+            .generic-table {
+                width: 100%;
+            }
+            table tr td {
+                padding-right: 15px;
+            }
+            .revision {
+                .transition(opacity, 500ms);
+            }
+            .revision.deleted {
+                opacity: .5;
+                text-decoration: line-through;
+            }
+            .revision.hidden {
+                opacity: .5;
+            }
+            // Opera does not inherit the opacity to the td
+            .revision.hidden td {
+                opacity: inherit;
+            }
+        }
+
+        // Wiki markdown 
+        .wiki.md {
+            max-width: none;
+        }
+
+        // Wiki table of contents 
+        .wiki > .toc > ul {
+            float: right;
+            padding: 11px 22px;
+            margin: 0 0 11px 22px;
+            border: 1px solid #8D9CAA;
+            list-style: none;
+            max-width: 300px;
+        }
+        .wiki > .toc > ul ul {
+            margin: 4px 0;
+            padding-left: 22px;
+            border-left: 1px dotted #cce;
+            list-style: none;
+        }
+        .wiki > .toc > ul li {
+            margin: 0;
+        }
+
+        // Page settings 
+        .fancy-settings .toggle {
+            display: inline-block;
+            padding-right: 15px;
+        }
+
+        // Reason for revision field 
+        #wiki_revision_reason {
+            padding: 2px;
+            margin-left: 0;
+            width: 100%;
+        }
+        
+        // Save page button, save settings button, etc
+        .wiki_button {
+            padding: 2px;
+        }
+
+        .throbber {
+            margin-bottom: -5px;
+        }
+
+        // Submit Discussion button 
+        .discussionlink {
+            display: inline-block;
+            margin-left: 15px;
+            padding-right: 50px;
+            margin-top: 5px;
+            a {
+                padding-left: 15px;
+            }
+        }
+
+        .markhelp {
+            max-width: 500px;
+            font-size: 1.2em;
+            padding: 4px;
+            margin: 5px 0;
+        }
+
+    }
+
+    // Page title 
+    .wikititle {
+        margin-left: 15px;
+        color: #666;
+        display: inline;
+        vertical-align: middle;
+        strong {
+            font-weight: bold;
+        }
+    }
+
+    // Wiki tabs 
+    .pageactions {
+        display: inline-block;
+        font-size: larger;
+        margin-left: 25px;
+        border-radius: 5px;
+        border: 1px solid #8D9CAA;
+        vertical-align: middle;
+        .wikiaction {
+            display: inline-block;
+            margin: 2px;
+            padding-top: 2px;
+            padding-bottom: 3px;
+            border-radius: 3px;
+            padding-right: 10px;
+            padding-left: 10px;
+        }
+        .wikiaction:hover {
+            background-color: #CEE3F8;
+        }
+        .wikiaction-current:hover {
+            background-color: #5F99CF;
+        }
+        .wikiaction-current {
+            color: white;
+            background-color: #5F99CF;
+        }
+    }
+    .source {
+        width: 100%;
+        display: none;
+    }
+    .toggle-source {
+        float: right;
+    }
+}
+
+// Specific wiki page styles
+.wiki-page-config-automoderator {
+  #editform textarea {
+    font-family: "Bitstream Vera Sans Mono", Consolas, monospace;
+  }
+
+  .wiki-page-content pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.vite-config.json"
+    }
+  ]
+}

tsconfig.vite-config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

vite.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from "url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});