/**
 * 2buntu Global CSS Styles
 * Copyright (c) 2014 - Nathan Osman
 */

/* Override the Bootstrap theme */
a:hover, a:focus { text-decoration: none; }
body { background-color: #f5f5f5; }
h1 small { display: block; font-size: 12pt; line-height: 14pt; }
img { max-width: 100%; }
p, li { text-align: justify; }
.alert { overflow: auto; }
.alert h1:first-child,
.alert h2:first-child,
.alert h3:first-child,
.alert h4:first-child,
.alert h5:first-child,
.alert h6:first-child { margin-top: 0; }
.btn-group { margin: 0 0 8px 0; }
.jumbotron { padding: 16px; }
.jumbotron h1 { font-size: 24pt; }
.jumbotron p { font-size: 12pt; }
.navbar { box-shadow: 0 0 8px black; margin-bottom: 0; }
.navbar-brand { font-size: 18pt; }

/* Space the Font Awesome icons away from text */
.alert .fa { margin-top: 6px; }
.fa { margin: 0 4px; }

/* Implement "missing" classes. */
.fade-bottom { position: relative; }
.fade-bottom:after { content: ""; display: block; position: absolute; bottom: 0; height: 64px; pointer-events: none; width: 100%;
   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), white);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(1, white));
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white);
   background: -o-linear-gradient(top, rgba(255, 255, 255, 0), white);
   background: -ms-linear-gradient(top, rgba(255, 255, 255, 0), white); }
.fixed { position: fixed; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Implement "missing" elements. */
.article img { display: block; margin: 20px auto; }
.content { background-color: white; box-shadow: 0 0 8px #ccc; padding: 16px 16px 32px; }
.content h2:first-child,
.content h4:first-child { margin-top: 0; }
.footer { background-color: #ddd; padding: 32px 0; }
.footer img { margin-top: 6px; }

/* Featured styles. */
.featured-article { height: 200px; overflow: hidden; }
.featured-author { height: 100px; overflow: hidden; }

/* Classes for the article editor */
.editor { background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; padding: 8px; }
.editor .toolbar { margin-bottom: 8px; }
.editor .toolbar button { background-color: #e3e3e3; border: 1px solid #ccc; border-radius: 2px; height: 28px; margin: 0 2px; width: 28px; }
.editor .toolbar button:hover { background-color: #ccc; }
.editor .toolbar .spacer { display: inline-block; width: 12px; }
.editor .ace { border: 1px solid #ccc; }

/* Classes for the device art generator */
.spinner-container { position: relative; }
.spinner-container .spinner { background: url(../img/spinner.gif) center no-repeat; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.spinner-container.spinning img { opacity: 0.3; }
.spinner-container.spinning .spinner { display: block; }

/* Ensure the page is never wider than 992px. */
@media (min-width: 992px) {
    .container { max-width: 970px; }
}