/* == ZONE: SYSTEM
SUBSECTIONS:
  1. SPLASH, 2. SESSIONS, 3. DOCS, 4. COMMS, 5. SUPPORT, 6. FAQ, 7. TOS POPUP,
  8. PROXY NOTICE
*/

.system p {
  line-height: 1.5;
}

.system .userstuff {
  max-width: 72em;
  margin: auto;
}

.system .userstuff h3 {
  margin-top: 3em;
}

/* 1. ZONE: SYSTEM: SPLASH PAGE */

.splash {
  margin: auto;
  max-width: 78em;
}

.splash .module h3 {
  border-bottom: 1px solid #c8c8c8;
  color: #900;
  font-size: 1.714em;
}

.splash span.link {
  float: right;
}

.splash .link a {
  font-size: 0.583em;
}

.splash .browse, .splash div.news {
  width: 36%;
}

.splash .intro, .splash .social {
  float: right;
  width: 60%;
}

.splash .browse ul, .splash .browse li {
  float: left;
  width: 100%;
    box-sizing: border-box;
}

.splash .browse li a, .splash .favorite a {
  border-bottom: none;
  display: block;
}

/* module: browse */

.splash .browse li {
  margin: 0.375em 0;
  padding: 0.375em 0;
  width: 50%;
}

.splash .browse li a:before {
  color: #900;
  content: "\00BB";
  padding: 0 0.25em 0 0;
}

.splash .browse li:nth-of-type(1), .splash .browse li:nth-of-type(2) {
  margin-top: 0;
}

.splash .browse li:nth-of-type(odd) {
  padding-right: 0.375em;
}

/* module: favorite tags */

.splash .favorite li {
  margin: 0;
}

.splash .favorite a {
  padding: 0.25em 0.375em;
}

.splash .favorite li:nth-of-type(odd) a {
  background: #eee;
}

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus {
  background: #900;
}

/* module: intro */

.splash .intro {
  padding: 1em 0 2em;
}

.splash .intro h2 {
  font-size: 2em;
  line-height: 1.375;
}

.splash .intro .stats, .splash .parent {
  text-align: center;
}

.splash .count {
  font-weight: 700;
}

.splash .module div.account {
  background: #eaeaea;
  border: 1px solid #ccc;
    border-radius: 0.5em;
    box-sizing: border-box;
}

.splash .account .heading {
  margin: 1em;
}

.splash .account p {
  margin-left: 1em;
  margin-right: 1em;
}

.splash .account ul {
  margin-left: 4em;
  margin-right: 1em;
}

.splash .account li {
  list-style-type: disc;
}

.splash .account .actions {
  float: none;
  font-size: 1.143em;
}

/* module: news */

.splash .news li {
  border-bottom: 1px solid #eee;
}

.splash .news li:last-of-type {
  border-bottom: none;
}

.splash .news .meta {
  font: normal 0.857em 'Monaco', 'Consolas', Courier, monospace;
}

.splash .news blockquote {
  float: left;
}

.splash .jump {
  text-align: right;
}

.splash .placeholder {
  font-style: italic;
}

/* module: marked for later */

.splash .blurb blockquote {
  margin: 0.643em auto;
}

/* module: unread messages */

.splash .comment .userstuff {
  margin: 1em;
}

/* module: social */

.splash .social ul {
  text-align: center;
}

.splash .social li {
  display: inline-block;
}

/* mod: logged-in */

.logged-in .splash > .module {
  float: left;
  margin: 0 1% 1.571em 1%;
  width: 48%;
}

.logged-in .splash > div:nth-of-type(odd) {
  clear: left;
}

/* misc */

.splash .module .module, .splash .dynamic, .splash .news blockquote {
  margin: 0;
  width: 100%;
}

/* 2. ZONE: SYSTEM: SESSIONS (login) */

.session #signin {
  margin-left: 48%;
  width: 48%;
}

.sessions-new #new_admin {
  width: 75%;
  margin: auto;
}

.session dt {
  min-width: 0;
}

/* 3. ZONE: SYSTEM: DOCS
For practicality, /home .docs have been given the .userstuff class as well, to
save doubling up that sheet or confusing end users. We will just cope with the
inconsistency. Docs encompasses pages in /home as well as FAQs and Wrangling
Guidelines.
*/

.docs .userstuff h6 {
  border-bottom: none;
  margin: 0.714em 0;
}

.docs .userstuff ul, .docs .userstuff ol, .docs .userstuff details .toc {
  margin: 0.643em auto;
  padding: 0;
}

.docs .userstuff li {
  padding: 0 1.5em;
}

.docs .userstuff ul ul li {
  list-style-type: circle;
}

.docs .userstuff ol.toc li {
  list-style-type: upper-roman;
}

.docs .userstuff ol.toc li ol li {
  list-style-type: upper-alpha;
}

.docs .userstuff summary .heading {
  display: inline;
}

/* module: tos
For practicality, the in-page full TOS module on the account creation page
(located in /users/registrations/_legal.html.erb) has been given the .docs and
.system classes to ensure it has the same styling it is given on the individual
/content, /privacy, and /tos pages.
*/

#tos-partial .tos {
  height: 36em;
  overflow: auto;
}

#tos-partial .userstuff {
  margin: 0.643em;
  max-width: 100%;
}

/* 4. ZONE: SYSTEM: ADMIN COMMS
admin comms, user facing, are a type of Home Zone, look in zone-home.css
admin zone, admin facing, has no special rules atm
admin role is only admin facing, and changes normal views in role-admin.css
*/

/* 5. ZONE: SYSTEM: SUPPORT */

.feedbacks h3 {
  clear: right;
  padding-top: 1.929em;
}

.feedbacks form {
  margin-top: 1.929em;
}

.feedbacks form .notice {
  margin: 0.643em;
}

/* 6. ZONE: SYSTEM: FAQS
For practicality, /archive_faqs are also .docs and .support and have the .userstuff class on category pages
*/

.faq .categories {
  margin: 0 auto;
  max-width: 72em;
  float: none;
}

.faq .categories h3 {
  border-bottom: 0.25em double #333;
  margin-top: 1.929em;
}

.faq .categories li {
  padding: 0;
}

.faq .userstuff .toc li {
  list-style-type: circle;
}

.faq .categories .userstuff {
  clear: both;
}

.faq .screencast .label {
  font-weight: 700;
}

.faq .userstuff .notice, .faq .userstuff .caution, .faq .example, .guideline .userstuff .notice, .guideline .userstuff .caution, .guideline .example  {
  margin: 0.643em 3.858em;
  padding: 0.643em;
}

.faq .example, .guideline .example {
  border: 1px solid #c2d2df;
}

.faq .userstuff nav.toc {
  margin: 3.215em auto;
}

/* 7. ZONE: SYSTEM: TOS, TOS FAQ, AND TOS POPUP */

.tos .userstuff nav.toc > details {
  margin-top: 3em;
}

.tos .userstuff nav.toc > details > summary {
  border-bottom: 0.25em double #333;
}

.tos .userstuff nav.toc > details > summary h3 {
  border-bottom: none;
}

.tos_faq .userstuff .toc {
  margin-bottom: 3.215em;
}

#tos_prompt {
  background: #fff;
  margin: 0;
  min-height: 100vh;
  /* put it on top of the other content so it fades in nicely */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999
}

#tos_prompt .heading {
  background: #900;
  color: #fff;
  display: block;
  margin: 0;
  padding: 0.125em 0;
}

#tos_prompt .heading span {
  display: block;
  margin: auto;
  width: 40rem;
  max-width: 80%;
}

#tos_prompt .agreement {
  margin: auto;
  overflow: hidden;
  width: 40rem;
  max-width: 80%;
}

#tos_prompt p {
  line-height: 1.4;
}

#tos_prompt p:first-of-type {
  margin: 2em 0 0.643em 0;
}

#tos_prompt .confirmation {
  margin: 2em 0 1em;
}

#tos_prompt p.submit {
  margin-bottom: 2em;
  line-height: 1.125;
}

#tos_prompt .submit input, #tos_prompt .submit button {
  white-space: normal;
  height: 100%;
}

#tos_prompt [disabled] {
  background: #ccc;
    box-shadow: none;
}

/* 8. ZONE: SYSTEM: PROXY NOTICE */

#proxy-notice {
  background: #efd1d1;
  border-bottom: 1px solid #900;
  font-size: 0.875em;
}

#proxy-notice .userstuff {
  padding: 0.643em 0.875em;
}

#proxy-notice .submit {
  margin-bottom: 0;
}