/*
	Theme Name: 3++ 2018
	Description: 3++ is the New Black
	Author: Christopher Gorham
	Version: 1.0
*/

@import 'css/reset.css';
@import 'css/header.css';
@import 'css/menu.css';
@import 'css/comments.css';

/* Layout classes */
.clearfix { clear: both; }
.alignleft, .align-left {
    float: left;
    margin: 0.5rem 1rem 0.5rem 0; }
.alignright, .align-right {
    float: right;
    margin: 0.5rem 0 0.5rem 1rem; }
.aligncenter, .align-center {
    display: block;
    margin: 0.5rem auto;
    text-align: center; }

@media screen and ( max-width: 25rem ) {

	.alignleft, .align-left,
	.alignright, .align-right {
		float: none;
		display: block;
		margin: 0.5rem auto;
		text-align: center;	}

}

/* Fonts */
html, body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1; }
h1, h2, h3, h4,
#header-menu,
.post-info,
.page-nav,
.more-link {
    font-family: 'Oswald', sans-serif; }

/* Basic typography */
p,
article li {
    line-height: 1.5;
    margin: 0.5em 0; }

h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em; }
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; font-weight: bold; }
h6 { font-size: 1em; }

i, em { font-style: italic; }
b, strong { font-weight: bold; }
sup, sub, small { font-size: 0.625em; }
sup { vertical-align: super; }
sub { vertical-align: sub; }

article ul,
article ol { 
    padding-left: 1.5em;
    overflow: hidden; }
article ul { list-style-type: disc; }
article ul > li > ul { list-style-type: circle; }
article ul > li > ul > li > ul { list-style-type: square; }
article ol { list-style-type: decimal; }
article ol > li > ol { list-style-type: lower-alpha; }
article ol > li > ol > li > ol { list-style-type: lower-roman; }

blockquote {
	padding-left: 0.75em;
	font-style: italic;
	color: #999;
	border-left: 0.25em solid #ccc; }

hr {
    border: 0px solid;
    border-top: 1px solid #ddd;
    margin: 2rem 0; }

/* Page width */
#header,
#footer {
    width: 100%; }
#header-content,
#page-content,
#footer-content {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto; }

/* Two-column layout */
body {
    background-color: #666; }

#page-content {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    color: #333;
    background-color: white; }

    #page-content > main {
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        border-right: 1px solid #ddd; }

        #page-content > main > .pagetitle {
            margin: 2rem 1rem; }

    #page-content > aside {
        max-width: 400px;
        flex-basis: 400px;
        flex-grow: 0;
        flex-shrink: 0; }

@media screen and ( max-width: 72rem ) {

    #page-content {
        flex-direction: column; }

        #page-content aside {
            max-width: none; }
            
}

/* Articles */
main { font-size: 0.875rem; }

main > article {
    position: relative;
    padding: 1rem 1rem 4rem;
    overflow: hidden; }

    main > article > header {
        display: flex;
        align-items: center;
        margin: -1rem -1rem 1rem;
        padding: 1rem;
        border-left: 0.2rem solid #bbb;
        padding-left: 0.8rem;
        background: linear-gradient( to left, transparent 0%, #ddd 100% );
        background: linear-gradient( to right, rgba( 255, 255, 255, 0.7 ), rgba( 255, 255, 255, 1 ) ),
                    url( images/metal.jpg ); }

        main > article > header > .post-info {
            flex: 1;
            font-size: 0.875rem;
            line-height: 1.5;
            text-align: right; }
            main > article > header > .post-info a {
                text-decoration: none; }
            main > article > header > .post-info .post-date,
            main > article > header > .post-info .post-author,
            main > article > header > .post-info .post-comments,
            main > article > header > .post-info .post-edit {
                white-space: nowrap; }
            

        main > article > header > .title {
            margin: 1rem 0;
            flex: 2; }
            main > article > header > .title > a {
                color: inherit;
                text-decoration: none; }

    main > article .more-link {
        position: absolute;
        display: block;
        left: 0; right: 0; bottom: 0;
        padding: 1rem;
        font-size: 0.875rem;
        text-decoration: none;
        text-align: right; }

@media screen and ( max-width: 72rem ) {

    main { font-size: 1rem; }

    main > article > header {
        flex-direction: column;
        align-items: left; }
        main > article > header > .post-info {
            text-align: left; }
            main > article > header > .post-info > br { display: none; }
            main > article > header > .post-info > .post-author,
            main > article > header > .post-info > .post-tags { padding-right: 1em; }

    main > article .more-link {
        font-size: 1rem; }

}

/* Images */
main img {
    max-width: 100%;
    height: auto; }

main .wp-caption .wp-caption-text {
	font-size: 0.875em;
	font-style: italic;
	text-align: center; }

#page-content.index > main > article > .post img { display: none; }
#page-content.index > main > article > .post img.wp-post-image { display: block; }

/* Navigation */
.page-nav,
.comment-nav {
    display: flex;
    justify-content: space-between;
    font-size: 1rem; }
    .page-nav div,
    .comment-nav div {
        display: flex;
        align-items: center;
        margin: 1rem; }
    .page-nav a,
    .comment-nav a {
        padding: 0 0.25em;
        text-decoration: none; }

/* Widgets */
.widget-area {
    text-align: center; }
.widget-area .widget {
    margin: 1rem;
    text-align: left; }

/* Ads */
#leaderboard-widgets #leaderboard-mobile { display: none; }

@media screen and ( max-width: 50rem ) {
    #leaderboard-widgets #leaderboard-mobile { display: block; }
    #leaderboard-widgets #leaderboard-desktop { display: none; }
}

.ad-unit { margin: 0 auto; }
.ad-unit.leaderboard { width: 728px; }
.ad-unit.leaderboard-mobile { width: 320px; }
.ad-unit.skyscraper { width: 300px; }

/* No Chatango on mobiles */
@media screen and ( max-width: 25rem ) {
    #chatango-container { display: none; }
}

/* Ultimate Member forms */
.um { opacity: 1 !important; }