root/static/css/main.css
/* ==================================================================
File: root/static/css/main.css
Project: ShinyCMS
Purpose: CSS file for public-facing pages
If you change the name of this file, you will also need to update
the configuration for CKEditor in root/static/ckeditor/config.js
Author: Denny de la Haye <2019@denny.me>
Copyright (c) 2009-2019 Denny de la Haye
ShinyCMS is free software; you can redistribute it and/or modify it
under the terms of either the GPL 2.0 or the Artistic License 2.0
================================================================== */
/* =========== ( General ) ========== */
body {
color: #444444;
margin: 0;
}
h1, h2, h3, h4 {
color: #256292;
font-family: Myriad Pro, sans-serif;
margin: 0;
}
.status {
color: #000000;
background: #ddd1e7;
padding: 5px;
}
.error {
color: #000000;
background: #edd8ff;
padding: 5px;
}
.clear {
clear: both;
}
.small {
font-size: smaller;
}
.right {
float: right;
}
input.textnumber {
max-width: 3rem;
text-align: right;
}
input.textveryshort {
max-width: 5rem;
}
input.textshort {
max-width: 10rem;
}
input.textlong {
max-width: 20rem;
}
input.textverylong {
max-width: 40rem;
}
textarea {
max-width: 40em;
}
/* Undo weird bits from zerofour stylesheet */
input[type=text] {
display: inline !important;
line-height: 2rem !important;
padding: 0.2rem !important;
font-size: 1rem;
}
input[type=submit] {
display: inline !important;
line-height: 2rem !important;
padding: 0.2rem 0.8rem !important;
font-size: 1rem;
}
input[type=radio] {
-moz-appearance: radio;
-webkit-appearance: radio;
}
input[type=checkbox] {
-moz-appearance: checkbox;
-webkit-appearance: checkbox;
}
form label {
color: #404248;
display: inline;
margin: 0;
font-size: 1em;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
}
ul.disc {
list-style: disc outside;
margin-bottom: 20px;
}
ul.circle {
list-style: circle outside;
margin-bottom: 0;
}
ul.square {
list-style: square outside;
margin-bottom: 0;
}
#content li {
margin-left: 1.5em;
}
/* =========== ( Header ) ========== */
#header-wrapper {
width: 100%;
max-width: 100%;
}
#header-wrapper .container {
width: calc(100% - 100px);
max-width: calc(100% - 100px);
}
#nav {
float: right;
margin-right: 200px;
}
#header-search {
float: right;
height: 28px;
width: 180px;
margin: 26px 14px;
}
#header-search #search-box {
height: 28px;
width: 150px;
background: #dddddd;
float: left;
border: 1px solid #707070;
padding: 6px;
}
#header-search #search-icon {
height: 19px;
width: 19px;
float: left;
margin: 5px 0 0 7px;
}
/* =========== ( Footer ) ========== */
#footer-wrapper {
padding: 40px 0 10px 0;
}
/* =========== ( Admin footer bar ) ========== */
.admin-footer {
z-index: 999;
color: #000000;
background: #dddddd url('../admin/images/site-toolbar-bg.png') left top repeat-x;
height: 32px;
width: 100%;
position: fixed;
bottom: 0;
}
.shinyCMS {
float: left;
border: none;
}
.admin-links {
float: right;
padding: 5px 20px 0 0;
}
.admin-links a {
color: #005a7e;
text-decoration: none;
}
.admin-links a:hover {
color: #005a7e;
text-decoration: underline;
}
/* =========== ( Homepage ) ========== */
.welcome-image{
float: left;
margin: 0 20px 0 0;
border: 1px solid #cccccc;
}
h2 {
font-size: 24px;
padding: 0 0 1em 0;
margin: 0;
}
.style1 {
min-height: 400px;
}
.style1 p {
padding: 0 0 1em 0;
margin: 0;
}
.style3 section.container section {
width: 479px;
height: 276px;
padding: 20px 30px;
background: transparent url('../images/panel-bg.png') no-repeat;
}
.style3 section.container section h2 {
margin: 0 0 5px 0;
padding: 0;
}
/* =========== ( Subpages ) ========== */
.subpage-image {
float: right;
margin: 0 0 15px 20px;
border: 1px solid #666666;
max-width: 400px;
height: auto;
}
/* =========== ( Discussion ) ========== */
.comment-thread {
clear: both;
margin: 0;
}
.add-new-comment {
float: right;
width: 70%;
text-align: right;
font-size: 0.9em;
margin: 0 0 10px 0;
padding: 0 5px 0 0;
}
.comment_container {
background: #ffffff;
padding: 15px 10px 0 10px;
border-top: 10px solid #ececec;
margin: 0;
clear: both;
}
.comment_container .clearfix {
margin: 0;
padding: 0;
}
.comment_children_container {
margin: 0 0 0 20px;
padding: 0;
}
.links_container {
clear: both;
overflow: auto;
}
#first {
border-top: 0;
padding: 10px;
margin: 0;
}
.comment_header {
margin: 0 0 10px 0;
}
.comment_header .user_icon {
width: 50px;
height: auto;
margin: 0 10px 0 0;
float: left;
}
.comment_header h3 {
color: #28004b;
font-family: "adelle-1","adelle-2",calibri,"Andale Mono",serif;
font-size: 1.1em;
margin: 0 0 5px 0;
line-height: 1em;
}
.comment_byline {
color: #636363;
font-style: italic;
font-size: 0.9em;
}
.comment_body {
color: #252525;
font-size: 0.9em;
line-height: 1.1em;
}
.comment_likes {
float: left;
width: 20%;
height: 30px;
text-decoration: none;
color: #000000;
font-size: 0.9em;
font-weight: bold;
margin: 10px 0 20px 0;
}
.like-count {
padding: 10px 0 0 0;
}
.like-count-0 {
color: #898989;
padding: 10px 0 0 0;
}
.comment_likes a {
color: #363636;
text-decoration: none;
font-weight: bold;
}
.likes-image {
float: left;
width: 21px;
height: 30px;
padding: 0 5px 0 0;
}
.comment_links {
text-align: right;
float: right;
margin: 20px 0 20px 0;
font-weight: bold;
font-size: 0.9em;
width: 80%;
}
.comment_links a {
color: #363636;
text-decoration: none;
}
.comment_links a:hover {
color: #28004b;
}
.comment-thread .post-comment {
background: #ffffff;
padding: 20px 15px 15px 15px;
clear: both;
}
.comment-thread .post-comment p {
padding: 0 0 15px 0;
}
.comment-title {
color: #393939;
margin: 0 0 15px 0;
font-weight: bold;
}
/* =========== ( Forms ) ========== */
#contact,
#login ,
#register,
#add_post {
margin: 20px 0 20px 0;
}
#edit_user {
margin: 0 0 20px 0;
}
#contact label,
#login label,
#register label ,
#add_post label,
#add_comment label {
color: #363636;
font-weight: bold;
}
#forgot_details label {
float: left;
color: #363636;
width: 100px;
margin: 5px 15px 0 0;
font-weight: bold;
}
#edit_user label,
#change_password label {
color: #363636;
margin: 5px 15px 5px 0;
font-weight: bold;
}
.post-as {
font-size: 0.9em;
margin: 0 0 10px 0;
}
#email_from_name,
#email_from,
#email_subject {
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 400px;
margin: 0;
}
#contact p,
#login p,
#register p,
#add_post p,
#add_comment p,
#edit_user p,
#change_password p,
#forgot_details p {
clear: both;
}
#message_body {
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 400px;
}
#forgot_details #recaptcha {
margin: 0 0 0 115px;
}
#recaptcha {
margin: 0 0 0 90px;
}
.submit {
color: #ffffff;
background: #256292;
padding: 10px 20px 10px 20px;
margin: 20px 0 0 20px;
border: 0;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.reset {
color: #ffffff;
background: #C6C6C6;
padding: 10px 20px 10px 20px;
margin: 20px 0 0 90px;
border: 0;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.submit:hover {
background: #28004b;
}
.reset:hover {
background: #666666;
}
.thankyou {
margin: 20px 0 0 0;
font-weight: bold;
}
#edit_user #profile_pic {
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 200px;
margin: 5px 0 10px 0;
float: left;
}
.textshort {
float: left;
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 200px;
margin: 0 0 10px 0;
}
#edit_user .textshort {
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 200px;
margin: 5px 0 10px 0;
}
.textmedium {
float: left;
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 300px;
margin: 0 0 10px 0;
}
.textlong {
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
margin: 5px 0 10px 0;
width: 400px;
}
.textlonger {
float: left;
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 530px;
margin: 0 0 10px 0;
}
#edit_user .radio {
margin: 0 5px 0 10px;
}
#add_post #body,
#add_comment #body,
#edit_user #body {
float: left;
padding: 4px;
border: 3px solid #c6c6c6;
color: #252525;
width: 530px;
margin: 0 0 10px 0;
}
.forgot {
font-size: 0.9em;
text-align: right;
}
.forgot a {
text-decoration: none;
color: #636363;
}
.login-link {
clear: both;
font-size: 0.9em;
}
.login-link a {
font-weight: bold;
color: #28004b;
text-decoration: none;
}
.forgot a:hover,
.login-link a:hover {
text-decoration: underline;
}
#register {
width: 404px;
}
#login .submit {
background: #28004b;
width: 75px;
height: 29px;
margin: 10px 0 10px 0;
float: right;
border: 0;
}
#login .submit:hover {
background: #28004b;
}
#register .submit {
background: #28004b;
width: 100px;
height: 25px;
margin: 5px 0 20px 0;
float: right;
border: 0;
}
/* =========== ( Blogs ) ========== */
/*
.comment_container {
border: 1px solid #000000;
padding: 5px;
margin: 5px;
}
.comment_children_container {
padding-left: 20px;
}
.comment_byline {
font-size: 80%;
font-style: italic;
}
.comment_body {
padding: 10px 0 10px 0;
}
.comment_links {
font-size: 80%;
}
.textshort {
width: 200px;
}
.textlong {
width: 400px;
} */
/* =========== ( Events ) ========== */
.events th {
padding: 0 10px 0 10px;
}
.events td {
vertical-align: top;
padding: 5px;
margin: 0;
border: 1px solid #cccccc;
}
/* =========== ( Newsletters / Mailing lists ) ========== */
.subscriptions {
float: left;
min-width: 25%;
max-width: 75%;
margin: 0 2rem 0 0;
}
.hintbox {
font-size: small;
width: 25%;
float: left;
padding: 0.5rem;
margin: 0;
border: 1px solid #256292;
border-radius: 3px;
}
.hintbox p {
margin-top: 0 !important;
}
/* =========== ( Polls ) ========== */
.pollbooth {
display: inline-block;
border: 1px solid #20a8d8;
border-radius: 3px;
padding: 20px 40px;
}
/* =========== ( Shop ) ========== */
.basket-summary {
float: right;
padding: 25px 50px;
font-size: 0.8rem;
text-align: center;
}
.basket-summary a {
text-decoration: none;
}
.basket-summary a:hover {
text-decoration: none;
}
/* =========== ( Users ) ========== */
.label {
font-weight: bold;
color: #363636;
margin: 0 15px 10px 0;
float: left;
width: 100px;
display: block;
clear: left;
font-size: 0.9em;
}
#user-profile p {
clear: left;
}
#user-profile p.label {
margin: 0;
}
.user-info {
float: left;
margin: 0 0 10px 0;
font-size: 0.9em;
}
.user_profile_pic {
max-width: 200px;
height: auto;
border: 3px solid #555555;
float: right;
margin: 0 0 15px 15px;
}
.label-long {
font-weight: bold;
color: #363636;
margin: 0 15px 10px 0;
float: left;
display: block;
clear: left;
width: 200px;
font-size: 0.9em;
}
p.label-longer {
font-weight: bold;
color: #363636;
margin: 0;
clear: left;
font-size: 0.9em;
}
#user-profile .user-left {
width: 325px;
float: left;
margin: 0 0 20px 10px;
}
#user-profile .recent-list {
margin: 0 0 5px 0;
}
#user-profile .subheading {
float: left;
clear: left;
}
#user-profile ul li {
margin: 0;
font-size: 0.9em;
}
#user_profile_pic {
max-width: 200px;
max-height: 200px;
}
#user_icon {
max-width: 40px;
max-height: 40px;
float: left;
margin-right: 5px;
}
/* =========== ( Forums (OMG so much CSS) ) ========== */
.forums {
background: #ececec;
width: 100%;
border: 2px #959595 solid;
display: table;
}
.forums2 {
background: #ececec;
width: 100%;
border-left: 2px #959595 solid;
border-right: 2px #959595 solid;
border-bottom: 2px #959595 solid;
display: table;
padding-top: 5px;
}
.most-popular {
background: #28004b;
width: 100%;
border: 2px #28004b solid;
display: table;
margin: 0 0 30px 0;
}
.most-popular .header {
display: table-row;
background: #28004b;
}
.most-popular .comment {
background: #ffffff url('/static/images/most-popular-comment.jpg') top left no-repeat;
border: 5px solid #ececec;
padding: 10px 10px 5px 10px;
display: table-cell;
font-size: 0.9em;
}
.most-popular .title {
font-weight: bold;
font-size: 1.1em;
padding: 0 0 0 50px;
margin: 0 0 2px 0;
}
.most-popular .username {
font-size: 0.9em;
padding: 0 0 0 50px;
margin: 0 0 7px 0;
}
.most-popular .username a {
color: #363636;
text-decoration: none;
}
.most-popular .username a:hover {
text-decoration: underline;
}
.most-popular .comment a.readmore {
color: #363636;
font-weight: bold;
text-decoration: none;
}
.most-popular .comment a.readmore:hover {
color: #28004b;
}
.most-popular .byline {
background: #ffffff url('/static/images/forum-post-bg.jpg') top left no-repeat;
border-top: 5px solid #ececec;
border-right: 5px solid #ececec;
border-bottom: 5px solid #ececec;
padding: 5px 10px 5px 10px;
color: #363636;
display: table-cell;
font-size: 0.9em;
vertical-align: bottom;
line-height: 1.1em;
text-align: right;
font-style: italic;
}
.most-popular .count {
background: #ffffff url('/static/images/most-popular-count.jpg') top center no-repeat;
border-top: 5px solid #ececec;
border-right: 5px solid #ececec;
border-bottom: 5px solid #ececec;
padding: 5px 5px 5px 10px;
display: table-cell;
text-align: left;
color: #256292;
font-family: Myriad Pro, sans-serif;
font-size: 1.2em;
vertical-align: bottom;
width: 50px;
height: 90px;
}
h4.forums-header a {
color: #28004b;
text-decoration: none;
font-size: 1.5em;
font-family: Myriad Pro, sans-serif;
}
.buttons {
clear: both;
}
.forums .header {
display: table-row;
background: #959595;
}
.forums .subheader {
display: table-row;
background: #ececec;
}
.forums .subheader .column1,
.forums .subheader .column2,
.forums .subheader .column4 {
color: #000000;
}
.forums .row,
.forums .row2,
.forums2 .row,
.most-popular .row {
display: table-row;
margin-bottom: 5px;
}
.forums .sticky {
border: 2px #959595 solid;
}
.forums a,
.forums2 a {
color: #256292;
text-decoration: underline;
}
.column1,
.column1 a {
color: #ffffff;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 1.1em;
padding: 0 0 0 5px;
}
.column2,
.column3,
.column4 {
color: #ffffff;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 1em;
}
.column1,
.column2,
.column3,
.column4 {
display: table-cell;
vertical-align: middle;
padding: 10px 5px 5px 5px;
}
.forums .top,
.most-popular .top,
.forums2 .top {
padding: 10px 5px 10px 5px;
}
.forum {
background: #ffffff;
}
.forum,
.forums .post,
.forums2 .post {
border-right: 5px solid #ececec;
border-left: 5px solid #ececec;
border-bottom: 5px solid #ececec;
display: table-cell;
font-size: 0.9em;
background: #ffffff url('/static/images/forum-post-bg.jpg') center left no-repeat;
min-height: 45px;
vertical-align: middle;
padding: 10px 10px 10px 50px;
width: 245px;
}
.forums2 .post-active,
.forums .post-active {
background: #ffffff url('/static/images/active-forum-post-bg.jpg') center left no-repeat;
min-height: 45px;
vertical-align: middle;
padding: 10px 10px 10px 50px;
width: 245px;
border: 5px solid #28004b;
display: table-cell;
font-size: 0.9em;
}
.forums2 .comment-active,
.forums .comment-active {
background: #ffffff;
border-right: 5px solid #28004b;
border-bottom: 5px solid #28004b;
border-top: 5px solid #28004b;
padding: 10px;
color: #363636;
font-size: 0.9em;
vertical-align: middle;
line-height: 1.1em;
display: table-cell;
}
.forums2 .posts-active,
.forums .posts-active {
background: #ffffff;
border-top: 5px solid #28004b;
border-right: 5px solid #28004b;
border-bottom: 5px solid #28004b;
padding: 10px;
display: table-cell;
text-align: center;
color: #363636;
font-family: Myriad Pro, sans-serif;
font-size: 1em;
vertical-align: middle;
width: 50px;
}
.forums .post a,
.forums2 .post a,
.forums .sticky-post a,
.forums .post-active a,
.forums2 .post-active a {
font-weight: bold;
font-size: 1.1em;
}
.forums .sticky-post {
background: url('/static/images/sticky.jpg') top right no-repeat;
display: table-cell;
width: 245px;
}
a.forum-name,
a.post-name {
font-size: 1em;
font-weight: bold;
}
.description {
color: #000000;
font-family: Myriad Pro, sans-serif;
font-size: 0.9em;
}
.forums .comment,
.post-thread .comment,
.forums2 .comment {
background: #ffffff;
border-right: 5px solid #ececec;
border-bottom: 5px solid #ececec;
padding: 10px;
color: #363636;
font-size: 0.9em;
vertical-align: middle;
line-height: 1.2em;
display: table-cell;
}
.forums .threads {
background: #ffffff;
border-right: 5px solid #ececec;
border-bottom: 5px solid #ececec;
padding: 10px;
display: table-cell;
text-align: center;
color: #363636;
font-family: Myriad Pro, sans-serif;
font-size: 1em;
vertical-align: middle;
}
.forums .posts,
.post-thread .posts,
.forums2 .posts {
background: #ffffff;
border-right: 5px solid #ececec;
border-bottom: 5px solid #ececec;
padding: 10px;
display: table-cell;
text-align: center;
color: #363636;
font-family: Myriad Pro, sans-serif;
font-size: 1em;
vertical-align: middle;
width: 50px;
}
.forums .first {
border-top: 5px solid #ececec;
}
.create-new-thread {
float: left;
margin: 0 0 15px 0;
clear: left;
}
.buttons a {
text-decoration: none;
background: #666666;
color: #ffffff;
font-weight: bold;
font-size: 1.5em;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
display: block;
}
.buttons a:hover {
background: #28004b;
}
.buttons .create-new-thread {
margin: 15px 0 15px 0;
}
.buttons .add-comment {
margin: 15px 0 15px 15px;
}
.add-comment {
float: right;
margin: 0 0 15px 15px;
}
.post-thread {
background: #ececec;
border: 2px #959595 solid;
clear: both;
}
.post-thread .header {
display: block;
background: #959595;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
font-size: 1.1em;
padding: 5px;
}
.post-thread .header a {
text-decoration: none;
color: #ffffff;
}
.post-thread .author {
padding: 5px 5px 10px 10px;
}
.post-thread .author .user_icon {
float: left;
width: 75px;
height: auto;
border: 1px solid #959595;
margin: 0 15px 0 0;
}
.post-thread h1 {
margin: 5px 0 0 0;
padding: 0;
font-size: 1.3em;
font-family: Myriad Pro, sans-serif;
font-weight: bold;
}
.post-thread h1 a {
color: #000000;
text-decoration: none;
}
.post-thread .byline {
margin: 5px 0 10px 0;
font-style: italic;
font-size: 0.9em;
}
.post-thread .thread {
background: #ffffff;
border: 10px solid #ececec;
padding: 15px;
line-height: 1.2em;
clear: both;
}
.post-thread .thread p {
margin: 0 0 10px 0;
}
.post-thread .author-details {
float: left;
width: 80%;
}
.post-thread .metadata {
float: right;
width: 20%;
}
.post-thread .metadata p {
padding: 5px 0 0 0;
}
.post-thread .metadata-left {
float: left;
color: #363636;
width: 120px;
line-height: 1.1em;
font-size: 0.9em;
}
.post-thread .metadata-right {
float: right;
padding: 0 10px 0 0;
line-height: 1.1em;
font-size: 0.9em;
}
.post-thread .discussion {
padding: 10px;
}
.pagenum {
margin: 20px 0 0 0;
font-size: 0.9em;
font-weight: bold;
text-align: center;
}
.pagenum a {
color: #363636;
text-decoration: none;
}
.pagenum a:hover {
color: #28004b;
}
/* =========== ( Forums: loggedout.tt ) ========== */
#row1 #left .logged-in {
width: 430px;
margin: 15px 0 0 0;
height: 50px;
font-size: 0.9em;
clear: both;
}
#subpage-row1 {
padding: 0 0 10px 0;
}
#subpage-row1 #left .logged-in {
width: 430px;
float: left;
margin: 15px 0 0 0;
font-size: 0.9em;
}
#left .logged-in a {
color: #28004b;
font-weight: bold;
text-decoration: none;
}
#left .logged-in a:hover {
color: #363636;
font-weight: bold;
text-decoration: none;
}
#forumpage-row {
clear: left;
margin: 0 0 20px 0;
}
#forumpage-row #left {
float: left;
width: 745px;
}
#forumpage-row #left #login-form {
}
#forumpage-row #left #login {
margin: 10px 0 0 0;
width: 410px;
float: left;
}
#forumpage-row #left #login .textshort {
float: left;
padding: 4px;
height: 17px;
border: 2px solid #959595;
color: #000000;
width: 145px;
margin: 0 10px 0 0;
font-size: 0.8em;
}
#forumpage-row #left #login .submit {
padding: 4px 6px 4px 6px;
color: #ffffff;
background: #959595;
margin: 0;
border: 0;
text-transform: uppercase;
float: left;
}
#forumpage-row #left #login .submit:hover {
background: #28004b;
}
#forumpage-row #left .forgot {
clear: left;
text-align: left;
font-size: 80%;
margin: 5px 0 0 0;
}
#forumpage-row #left .forgot a {
color: #959595;
text-decoration: none;
}
#forumpage-row #left .forgot a:hover {
text-decoration: underline;
}
#forums-page-row #right {
float: right;
width: 215px;
margin: 10px 0 0 20px;
padding: 0;
}
#forumpage-row #register-link {
float: right;
margin: 5px 0 0 0;
padding: 10px;
display: block;
color: #ffffff;
text-transform: uppercase;
background: #959595;
text-decoration: none;
font-weight: bold;
}
#forumpage-row #register-link:hover {
background: #28004b;
}