assets/css/add-on.css

body, input, select, textarea, b, strong {
    color: #000000;
}

pre {
    display: table;
    table-layout: fixed;
    width: 100%
}

#header .links a {
    /* Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=65);

    /* Modern Browsers */
    opacity: 0.65;
}

    #header .main ul li > a {
        color: #000000;
        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=35);

        /* Modern Browsers */
        opacity: 0.35;
    }

        #header .main .search input {
            color: #000000;
        }

#intro p,
#intro .icons a {
    /* Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=60);

    /* Modern Browsers */
    opacity: 0.6;
}

    #sidebar #recent-posts ul.posts time,
    #sidebar #categories ul.posts li header,
    #sidebar .blurb p {
        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=65);

        /* Modern Browsers */
        opacity: 0.65;
    }

article.post header .title p,
article.post header .meta p,
article.post header .meta span,
article.post footer .stats {
    /* Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=70);

    /* Modern Browsers */
    opacity: 0.70;
}

    article.post p,
    article.post h2,
    article.post h3,
    article.post h4 {
        color: #000000;
        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=87)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=87);

        /* Modern Browsers */
        opacity: 0.87;
    }

#header h2 {
    font-size: inherit;
    height: inherit;
    line-height: inherit;
    padding: 0 0 0 1.5em;
    white-space: nowrap;
}

    #header h2 a {
        font-size: 0.7em;
    }

    @media screen and (max-width: 736px) {
        #header h2 {
            padding: 0 0 0 1em;
        }
    }

#intro .intro-circle {
    border-radius: 50%;
}

.post > header .title h1 {
    font-weight: 900;
    font-size: 1.5em;
}
    @media screen and (max-width: 736px) {
        .post > header .title h1 {
            font-size: 1.1em;
        }
    }

@media screen and (max-width: 480px) {
    .post > .image.featured {
        margin-top: 0;
    }
}

blockquote p {
    margin-bottom: 0;
}

.image.center-image {
    max-width: 50%;
}
    .image.center-image img {
        width: 100%;
    }
        .image.center-image {
            display: block;
            margin: auto;
            clear: both;
        }

.pagination .button {
    background: white;
}

/** Social Share Button CSS **/
#social-share {
    position: relative;
    top: -0.5em;
}

#social-share ul {
    margin: 0;
}

#social-share .icons li {
    padding: 0 !important;
    padding-bottom: 10px !important;
}

#social-share ul li p {
    display: none;
}

#social-share .share-btn {
    padding: 0.5em;
    width: 4em;
}

#social-share-nav .share-btn h3{
    color: #ffffff;
}

.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
    text-decoration: none;
}

.share-btn:hover {
    color: #ffffff !important;
}

.share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}

.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.email       { background: #444444; }

.share-btn.twitter:hover     { background: #4c9ad6 }
.share-btn.google-plus:hover { background: #c64333; }
.share-btn.facebook:hover    { background: #2f4779; }
.share-btn.linkedin:hover    { background: #4069a2; }
.share-btn.stumbleupon:hover { background: #d3401f; }
.share-btn.reddit:hover      { background: #e54e00; }
.share-btn.email:hover       { background: #363636; }

/* Share Menu */
body.is-share-visible #wrapper {
    opacity: 0.15;
}

	#share-menu {
		-moz-transform: translateX(25em);
		-webkit-transform: translateX(25em);
		-ms-transform: translateX(25em);
		transform: translateX(25em);
		-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		background: #ffffff;
		border-left: solid 1px rgba(160, 160, 160, 0.3);
		box-shadow: none;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 25em;
		z-index: 10002;
	}

		#share-menu > * {
			border-top: solid 1px rgba(160, 160, 160, 0.3);
			padding: 3em;
		}

			#share-menu > * > :last-child {
				margin-bottom: 0;
			}

		#share-menu > :first-child {
			border-top: 0;
		}

		#share-menu .links {
			list-style: none;
			padding: 0;
		}

			#share-menu .links > li {
				border: 0;
				border-top: dotted 1px rgba(160, 160, 160, 0.3);
				margin: 0.7em 0 0 0;
				padding: 1em 0 0 0;
			}

				#share-menu .links > li a {
					display: block;
					border-bottom: 0;
				}

					#share-menu .links > li a h3 {
						-moz-transition: color 0.2s ease;
						-webkit-transition: color 0.2s ease;
						-ms-transition: color 0.2s ease;
						transition: color 0.2s ease;
						font-size: 0.7em;
					}

					#share-menu .links > li a p {
						font-family: "Raleway", Helvetica, sans-serif;
						font-size: 0.6em;
						font-weight: 400;
						letter-spacing: 0.25em;
						margin-bottom: 0;
						text-decoration: none;
						text-transform: uppercase;
					}

					#share-menu .links > li a:hover h3 {
						color: #ffffff;
					}

				#share-menu .links > li:first-child {
					border-top: 0;
					margin-top: 0;
					padding-top: 0;
				}

		body.is-share-visible #share-menu {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			visibility: visible;
		}

		@media screen and (max-width: 736px) {

			#share-menu > * {
				padding: 1.5em;
			}

		}

.post {
    margin: 0 0 2em 0;
}

    #content img {
        max-width: 100%;
    }

    #content p a, #content ul li a {
        border-bottom: dotted 2px rgba(160,160,160,.65);
    }

        #content p a:hover {
            border-bottom-color: transparent;
        }

    #content blockquote, #content p, #content ul{
        margin: 0 0 1em;
    }

ul.pagination li {
    padding-top: 1em;
}

    ul.pagination .button {
        line-height: 2.5em;
        height: auto;
        white-space: normal;
        padding-top: 1em;
        padding-bottom: 1em;
    }

#back-to-top {
    background-color: white;
    bottom: 5px;
    color: #aaaaaa;
    display: none;
    position: fixed;
    right: 5px;
}

    #back-to-top.btt-fade-out {
        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
        -webkit-transition: opacity .3s 0s, visibility 0s 0s;
        -moz-transition: opacity .3s 0s, visibility 0s 0s;
        transition: opacity .3s 0s, visibility 0s 0s;
        opacity: .5;
    }