Starsong Theme

/**
 *  Starsong
 *  @author Timothy Foster (@tfAuroratide)
 *  @version 1.00.160714
 *  
 *  Copyright 2016, All rights reserved
 *
 *  Palette:
 *    Posts:      #448DDD
 *    Projects:   #41AAB7
 *    Stories:    #0048A0
 *    Background: #001533
 */
 
/**
 *  Google Fonts
 *
 *  Source Code Pro (code, monospace)
 *  Source Sans Pro (text, sans-serif)
 *  Archivo Narrow (titles, sans-serif)
 */
@import url('//fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:300');
@import url('//fonts.googleapis.com/css?family=Archivo+Narrow');
 
/**
 *  Font Awesome v4.6.3
 */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
 
/**
 *  Community Bootstrap Base v1.07.160127
 *  http://css.wikidot.com/theme:community-bootstrap-base
 */
.fa span{display:none}#new-post-button,.button,.join-box a,input[type=button]:not(.btn),input[type=submit]:not(.btn){display:inline-block;line-height:1.42857;margin-bottom:0;text-align:center;vertical-align:middle;white-space:nowrap;border-radius:4px;font-size:14px;padding:6px 12px;color:#333;background-color:#FFF;border:1px solid #CCC}.join-box a{background-image:none;display:table}#new-post-button:focus,#new-post-button:hover,.button:focus,.button:hover,.join-box a:focus,.join-box a:hover,input[type=button]:not(.btn):focus,input[type=button]:not(.btn):hover,input[type=submit]:not(.btn):focus,input[type=submit]:not(.btn):hover{color:#333;border-color:#ADADAD;background-color:#EBEBEB;text-decoration:none}#new-post-button:active,.button:active,.join-box a:active,input[type=button]:not(.btn):active,input[type=submit]:not(.btn):active{box-shadow:0 3px 5px rgba(0,0,0,.125) inset;outline:0}.buttons,.page-options-bottom{display:inline-block;position:relative;vertical-align:middle}.buttons>.btn:first-child:not(:last-child):not(.dropdown-toggle),.page-options-bottom>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.buttons>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.page-options-bottom>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.buttons>.btn:last-child:not(:first-child),.buttons>.dropdown-toggle:not(:first-child),.page-options-bottom>.btn:last-child:not(:first-child),.page-options-bottom>.dropdown-toggle:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.buttons .btn+.btn,.buttons .btn+.buttons,.buttons .buttons+.btn,.buttons .buttons+.buttons,.page-options-bottom .btn+.btn,.page-options-bottom .btn+.page-options-bottom,.page-options-bottom .page-options-bottom+.btn,.page-options-bottom .page-options-bottom+.page-options-bottom{margin-left:-1px}.buttons>.btn:first-child,.page-options-bottom>.btn:first-child{margin-left:0}.buttons>.btn,.page-options-bottom>.btn{float:left;position:relative}input[type=text]:not(.form-control),textarea:not(.form-control){background:#FFF;border:1px solid #CCC;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;color:#555;font-size:14px;line-height:1.42857;padding:6px 12px;transition:border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;vertical-align:middle}input[type=text]:not(.form-control){height:34px;max-width:100%}input[type=text]:not(.form-control):focus,textarea:not(.form-control):focus{outline:0;border-color:#66AFE9;box-shadow:0 1px 1px rgba(0,0,0,.075) inset,0 0 8px rgba(102,175,233,.6)}.pager .pager-no{display:none}.pager .dots{font-weight:700}.pager>.current,.pager>.dots,.pager>.target>a{background:#FFF;border:1px solid #DDD;color:#428BCA;line-height:1.42857;margin:0 0 0 -1px;padding:6px 12px;position:relative;text-decoration:none}.pager>.target>a:focus,.pager>.target>a:hover{color:#2A6496;background:#EEE}.pager>span:nth-child(2),.pager>span:nth-child(2)>a{border-radius:4px 0 0 4px}.pager>span:last-child,.pager>span:last-child>a{border-radius:0 4px 4px 0}.pager>.current{background:#428BCA;border-color:#428BCA;color:#FFF;font-weight:400}.breadcrumbs{background:#F5F5F5;border-radius:4px;margin-bottom:20px;padding:8px 15px;color:#777}.mailform-box{width:84%;margin:16px auto}.mailform-box .form{width:100%}.mailform-box .form tr td:first-child{width:16%;text-align:right;vertical-align:top;padding:.5em 1em;font-weight:700}.mailform-box input.text,.mailform-box textarea{width:100%}.mailform-box .buttons{text-align:center;margin-top:12px;display:block}.mailform-box .buttons input{font-size:16px}.mailform-box .field-error-message{color:#A94442}@media (max-width:1200px){.mailform-box{width:90%}.mailform-box .form tr td:first-child{width:18%}}@media (max-width:992px){.mailform-box{width:96%}.mailform-box .form tr td:first-child{width:22%}}#action-area .page-history,.wiki-content-table{width:100%;max-width:100%;border-collapse:collapse;border-spacing:0}.panel-heading p{margin:0}.checkbox,.radio,input[type=checkbox],input[type=radio]{display:inline-block;margin:0 4px;vertical-align:bottom}.alert.alert-info{color:#31708F}.alert.alert-warning{color:#8A6D3B}.alert.alert-success{color:#3C763D}.alert.alert-danger{color:#A94442}header .header,header.header-wrap{position:relative}.login-status{position:absolute;top:22px;right:5px}#search-top-box{float:right}#search-top-box-input{margin-right:4px}nav.top-bar-wrap{margin-top:10px}main .content .page-title{font-size:36px;border-bottom:1px solid #CCC;margin:15px 0 1em;padding:0;line-height:1.25em}.page-tags{margin:8px 0 0}.page-tags a{display:inline-block;padding:1px 10px 0 0;border-top:1px solid #CCC;margin:0;font-size:12px}nav.side-bar-wrap .navbar-collapse{max-height:none}#toc{min-width:200px;border:1px solid #CCC;border-radius:4px;padding:.5em 1em}#toc .title{letter-spacing:1px}#toc-action-bar{height:0}#toc-action-bar a{font-size:0;position:relative;left:138px}#toc-action-bar a:first-child::after{font-family:FontAwesome;content:'';font-size:12px}#toc-action-bar a:last-child::after{font-family:FontAwesome;content:'';font-size:12px}.floatleft{float:left}.floatright{float:right}.wiki-content-table{margin-bottom:20px;background-color:rgba(0,0,0,0)}.wiki-content-table>tbody>tr>td,.wiki-content-table>tbody>tr>th,.wiki-content-table>tfoot>tr>td,.wiki-content-table>tfoot>tr>th,.wiki-content-table>thead>tr>td,.wiki-content-table>thead>tr>th{line-height:1.42857;padding:8px;vertical-align:top;border-top:none;border-bottom:1px solid #CCC}.wiki-content-table th{text-align:left}#rename-option-delete,#rename-option-rename>form>div,.hovertip,footer .footer{text-align:center}@media (max-width:768px){.table-responsive .wiki-content-table{margin-bottom:0}.table-responsive>.wiki-content-table>tbody>tr>td,.table-responsive>.wiki-content-table>tbody>tr>th,.table-responsive>.wiki-content-table>tfoot>tr>td,.table-responsive>.wiki-content-table>tfoot>tr>th,.table-responsive>.wiki-content-table>thead>tr>td,.table-responsive>.wiki-content-table>thead>tr>th{white-space:nowrap}}.wiki-content-table>tbody>tr>th,.wiki-content-table>tfoot>tr>th,.wiki-content-table>thead>tr>th{background:#E6E6E6;color:#333}.code span.hl-reserved{color:#1518FF}.code span.hl-number{color:#009}.code span.hl-special{color:#0060FF}.code span.hl-string{color:#A31515}.code span.hl-var{color:#1518FF}.code span.hl-types{color:#0080AA}.page-rate-widget-box .rate-points{background:0 0;font-size:0}.page-rate-widget-box .rate-points .number{font-size:14px;color:#333;border:1px solid #CCC;padding:6px 12px;display:inline-block;border-radius:4px}.page-rate-widget-box .btn{padding:0;margin-right:3px}.page-rate-widget-box .btn a{padding:6px 12px;background:0 0;font-size:0;display:inline-block;color:#333}.page-rate-widget-box .btn a:hover{color:#111;text-decoration:none}.page-rate-widget-box .btn a::after{font-family:FontAwesome;font-size:14px}.page-rate-widget-box .btn.rateup a::after{content:''}.page-rate-widget-box .btn.cancel a::after{content:''}.page-rate-widget-box .btn.ratedown a::after{content:''}#edit-page-textarea{font-family:Monaco,Menlo,Consolas,"Courier New",monospace}ins{font-weight:700;background-color:#DFF0D8;color:#3C763D}del{text-decoration:line-through;background-color:#F2DEDE;color:#A94442}#action-area #history-form-1 table.form td:first-child{padding-right:12px}#action-area #history-form-1 .checkbox{display:inline-block;vertical-align:-5px}#action-area .page-history{margin-top:12px;margin-bottom:20px;background-color:rgba(0,0,0,0)}#action-area .page-history tr>td{line-height:1.42857;padding:8px;vertical-align:top;border-top:1px solid #CCC}#action-area .page-history tr:first-child td{background:#E6E6E6;color:#333;font-weight:700}#action-area .page-history tr:not(:first-child) td:nth-child(6){padding-top:8px!important}#action-area .autocomplete-list ul{position:absolute;border:1px solid #DDD;background:#FFF;box-shadow:0 2px 3px -1px rgba(0,0,0,.2);border-radius:4px;margin:4px;padding:4px 0;list-style:none;width:250px;z-index:999}#action-area .autocomplete-list ul li{padding:2px 12px}#action-area .autocomplete-list ul li:hover{background:#428BCA;color:#FFF;cursor:pointer}.wd-editor-toolbar-panel+div{clear:both}footer .footer{padding-bottom:32px}footer .footer>div{margin:8px 0}.hovertip{border:none;background:rgba(20,20,20,.95);font-size:12px;min-width:100px;color:#FFF;border-radius:4px}.yui-navset .yui-nav{list-style:none;padding:0}.yui-navset .yui-nav li{float:left}.yui-navset .yui-nav li a{display:inline-block;border:1px solid #CCC;border-bottom:none;border-radius:4px 4px 0 0;background:#FFF;padding:2px 12px;margin-right:2px;margin-top:4px;color:#333}.yui-navset .yui-nav li.selected a{background:#F5F5F5;padding:4px 14px;margin-top:0}.yui-navset .yui-nav li a:focus,.yui-navset .yui-nav li a:hover{background:#E6E6E6;border-color:#ADADAD;text-decoration:none;outline:0}.yui-navset .yui-nav li.selected a:focus,.yui-navset .yui-nav li.selected a:hover{background:#F5F5F5;border-color:#CCC;cursor:text}.yui-navset .yui-nav li a:active{outline:0;box-shadow:0 3px 5px rgba(0,0,0,.125) inset}.yui-navset .yui-nav li.selected a:active{box-shadow:none}.yui-navset .yui-content{clear:both;border:1px solid #CCC;border-top-width:3px;background:#FFF;border-radius:0 4px 4px;padding:12px 12px 0}.tabview-primary .yui-navset .yui-nav li a{border-color:#3573BD;background:#428BCA;color:#FFF}.tabview-primary .yui-navset .yui-nav li a:focus,.tabview-primary .yui-navset .yui-nav li a:hover{background:#3071A9;border-color:#285E8E}.tabview-primary .yui-navset .yui-nav li.selected a{background:#428BCA}.tabview-primary .yui-navset .yui-content,.tabview-primary .yui-navset .yui-nav li.selected a:focus,.tabview-primary .yui-navset .yui-nav li.selected a:hover{border-color:#3573BD}.tabview-info .yui-navset .yui-nav li a{border-color:#46B8DA;background:#D9EDF7;color:#31708F}.tabview-info .yui-navset .yui-nav li a:focus,.tabview-info .yui-navset .yui-nav li a:hover{background:#CBE2ED;border-color:#269ABC}.tabview-info .yui-navset .yui-nav li.selected a{background:#BCE8F1}.tabview-info .yui-navset .yui-content,.tabview-info .yui-navset .yui-nav li.selected a:focus,.tabview-info .yui-navset .yui-nav li.selected a:hover{border-color:#46B8DA}.tabview-success .yui-navset .yui-nav li a{border-color:#4CAE4C;background:#DFF0D8;color:#3C763D}.tabview-success .yui-navset .yui-nav li a:focus,.tabview-success .yui-navset .yui-nav li a:hover{background:#D2E5C9;border-color:#398439}.tabview-success .yui-navset .yui-nav li.selected a{background:#D6E9C6}.tabview-success .yui-navset .yui-content,.tabview-success .yui-navset .yui-nav li.selected a:focus,.tabview-success .yui-navset .yui-nav li.selected a:hover{border-color:#4CAE4C}.tabview-warning .yui-navset .yui-nav li a{border-color:#EEA236;background:#FCF8E3;color:#8A6D3B}.tabview-warning .yui-navset .yui-nav li a:focus,.tabview-warning .yui-navset .yui-nav li a:hover{background:#EFEBD5;border-color:#D58512}.tabview-warning .yui-navset .yui-nav li.selected a{background:#FAEBCC}.tabview-warning .yui-navset .yui-content,.tabview-warning .yui-navset .yui-nav li.selected a:focus,.tabview-warning .yui-navset .yui-nav li.selected a:hover{border-color:#EEA236}.tabview-danger .yui-navset .yui-nav li a{border-color:#D43F3A;background:#F2DEDE;color:#A94442}.tabview-danger .yui-navset .yui-nav li a:focus,.tabview-danger .yui-navset .yui-nav li a:hover{background:#E5CECE;border-color:#AC2925}.tabview-danger .yui-navset .yui-nav li.selected a{background:#EBCCD1}.tabview-danger .yui-navset .yui-content,.tabview-danger .yui-navset .yui-nav li.selected a:focus,.tabview-danger .yui-navset .yui-nav li.selected a:hover{border-color:#D43F3A}.gallery-box .gallery-item{float:left;border:1px solid #CCC;padding:5px;margin:5px}.gallery-box::after{clear:both;display:table;content:' '}.embed-responsive{display:block;height:0;overflow:hidden;padding:0;position:relative}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{border:0;bottom:0;height:100%;left:0;position:absolute;top:0;width:100%}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}
 
/**
 *  Minimized Search Bar
 *  http://css.wikidot.com/cssnippet:minimized-search-bar
 */
#search-top-box{position:relative;width:200px;height:28px}#search-top-box input.btn{display:none}#search-top-box input.text{position:absolute;right:0;height:28px;width:28px;border:1px solid #E3E3E3;border-radius:14px;background:rgba(255,255,255,0);box-shadow:none;padding:2px 0;color:rgba(51,51,51,0);transition:width .5s,color .5s,background .5s;cursor:pointer}#search-top-box-input{margin:0}#search-top-box form{width:24px;height:28px}#search-top-box form:hover input.text{background:rgba(0,0,0,.188);border-color:#D7D7D7}#search-top-box form:hover input.text:focus{background:rgba(255,255,255,1)}#search-top-box form:focus{width:200px}#search-top-box input.text:focus{width:200px;padding:2px 1em;color:rgba(51,51,51,1);box-shadow:1px 1px 2px -1px rgba(0,0,0,.15) inset;border-color:#D7D7D7;background:rgba(255,255,255,1);cursor:text}#search-top-box input.text.empty{font-size:0}#search-top-box form:before{position:absolute;right:0;top:0;font-family:FontAwesome;font-size:13px;content:'';width:28px;height:28px;padding:0;color:#333;text-align:center;background:#FFF;border-radius:14px;box-shadow:0 0 2px rgba(0,0,0,.2) inset;line-height:28px}
 
/**
 *  Better Code Blocks v1.02.150520
 *  http://css.wikidot.com/cssnippet:better-code-blocks
 */
.code{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:13px;background:#FFF;border:none}div.code{border:1px solid #CCC;border-radius:4px;margin:10px 1px;padding:.5em 1em;box-shadow:2px 2px 4px -4px rgba(0,0,0,.25) inset;overflow:auto;position:relative;counter-reset:linenumber}div.code p,div.code pre{margin:0;padding:0}div.code p{white-space:nowrap;overflow-x:auto}div.code span.line{counter-increment:linenumber;display:inline-block;min-width:100%;padding-left:32px}div.code span.line:hover{background-color:rgba(0,0,0,.05)}div.code span.line::before{content:counter(linenumber);position:absolute;left:10px;width:2.25em;text-align:right;border-right:2px solid #CCC;padding-right:3px;margin-right:6px;background:#FFF}span.code{border:1px solid #EEE;border-radius:2em;background:0 0;padding:0 .4em;font-size:85%}.code span.comment{color:green}.code span.doccomment{color:#008060}.code span.digit,.code span.literal,.code span.value{color:#009}.code span.invalid{color:red;font-weight:700}.code span.attribute{color:#0060FF}.code span.definition,.code span.statement{color:#1518FF}.code span.type{color:#0080AA}.code span.char,.code span.string{color:#A31515}.code span.directive{color:#02B902}.code.css span.idSelector{color:#996300}.code.css span.browserDefinition{color:#2528FF}.code pre{border:none;background:0 0}.code a{color:inherit;border-bottom:1px dotted;display:inline-block;height:1.28em}.code a:hover{text-decoration:none;color:inherit;border-bottom:none}.code a.newpage,.code a.newpage:hover{color:red}.code-primary .code,.code-primary .code span.line::before,.code.code-primary,div.code.code-primary span.line::before{border-color:#BAD6F2}.code-primary .code span.line:hover,div.code.code-primary span.line:hover{background-color:rgba(66,139,202,.05)}.code-success .code,.code-success .code span.line::before,.code.code-success,div.code.code-success span.line::before{border-color:#D6E9C6}.code-success .code span.line:hover,div.code.code-success span.line:hover{background-color:rgba(92,184,92,.06)}.code-danger .code,.code-danger .code span.line::before,.code.code-danger,div.code.code-danger span.line::before{border-color:#EBCCD1}.code-danger .code span.line:hover,div.code.code-danger span.line:hover{background-color:rgba(217,83,79,.05)}.code-info .code,.code-info .code span.line::before,.code.code-info,div.code.code-info span.line::before{border-color:#BCE8F1}.code-info .code span.line:hover,div.code.code-info span.line:hover{background-color:rgba(91,192,222,.07)}.code-warning .code,.code-warning .code span.line::before,.code.code-warning,div.code.code-warning span.line::before{border-color:#FAEBCC}.code-warning .code span.line:hover,div.code.code-warning span.line:hover{background-color:rgba(240,173,78,.08)}
 
/**
 *  FontAwesome Editor
 *  http://css.wikidot.com/cssnippet:fontawesome-editor
 */
.wd-editor-toolbar-panel div{height:auto}.wd-editor-toolbar-panel ul li a{background-image:url(//css.wikidot.com/local--files/cssnippet:fontawesome-editor/editorButtons.png);background-color:#FFF;border-radius:4px;display:inline-block;line-height:1.42857;padding:0;border:1px solid #CCC;height:25px;width:25px}.wd-editor-toolbar-panel ul li a:focus,.wd-editor-toolbar-panel ul li a:hover{background-image:url(//css.wikidot.com/local--files/cssnippet:fontawesome-editor/editorButtons.png);background-color:#EBEBEB;border-color:#ADADAD}.wd-editor-toolbar-panel ul li a:active{background-image:url(//css.wikidot.com/local--files/cssnippet:fontawesome-editor/editorButtons.png);box-shadow:0 3px 5px rgba(0,0,0,.125) inset;outline:0}.wd-editor-toolbar-panel li.hseparator{background-color:#BBB;width:1px}
 
/*  Global (@global)
 *  ==========================================================================*/
html {  background: #001533; }
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17px;
    letter-spacing: 0.25px;
}
.container-wrap-wrap {  overflow: hidden; }
a {  color: #448DDD; }
a:hover, a:focus, a:active {
    text-decoration: none;
    color: #336AA5;
}
p {
    line-height: 1.72em;
    margin-bottom: 1.5em;
    margin-top: 1.24em;
}
tt {  font-family: 'Source Code Pro', monospace; }
 
/*  Buttons (@buttons)
 *  ==========================================================================*/
.btn {
    font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif;
    letter-spacing: 1px;
    border: none;
    padding: 2px 1.5em;
    border-radius: 32px;
    color: #FFF;
    transition: padding-left 128ms linear,
                padding-right 128ms linear,
                margin-left 128ms linear,
                margin-right 128ms linear;
}
.btn:hover, .btn:active, .btn:focus, .btn.active {
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: #FFF;
}
.btn.btn-xl {  font-size: 29px; }
.btn.btn-lg {  font-size: 24px; }
.btn.btn-md {  font-size: 18px; }
.btn.btn-sm {  font-size: 15px; }
.btn.btn-xs {  font-size: 13px; }
 
.btn.btn-default, .btn.btn-primary {  background: #448DDD; }
.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default:focus,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
    background: #336AA5;
}
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default.focus:active,
.btn-default:active:focus,
.btn-default:active:hover,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover {
    border-color: transparent;
    box-shadow: none;
    color: #FFF;
}
 
.btn.btn-github {  background: #333; }
.btn.btn-github:hover,
.btn.btn-github:focus,
.btn.btn-github:active {
    background: #222;
}
.btn.btn-windows {  background: #00ADEF; }
.btn.btn-windows:hover,
.btn.btn-windows:focus,
.btn.btn-windows:active {
    background: #009BD3;
}
.btn.btn-apple {  background: #AAA; }
.btn.btn-apple:hover,
.btn.btn-apple:focus,
.btn.btn-apple:active {
    background: #999;
}
.btn.btn-linux {  background: #F5BD0C; }
.btn.btn-linux:hover,
.btn.btn-linux:focus,
.btn.btn-linux:active {
    background: #DBA70A;
}
.btn.btn-facebook {  background: #3B5998; }
.btn.btn-facebook:hover,
.btn.btn-facebook:focus,
.btn.btn-facebook:active {
    background: #304A7C;
}
.btn.btn-twitter {  background: #29AAE1; }
.btn.btn-twitter:hover,
.btn.btn-twitter:focus,
.btn.btn-twitter:active {
    background: #2597C4;
}
.btn.btn-google {  background: #DD4B39; }
.btn.btn-google:hover,
.btn.btn-google:focus,
.btn.btn-google:active {
    background: #C14032;
}
 
/*  Button Groups (@button_groups)
 *  ==========================================================================*/
 
/*  Inputs (@inputs)
 *  ==========================================================================*/
 
/*  Header (@header)
 *  ==========================================================================*/
header {  z-index: 12; }
header,
nav.top-bar-wrap,
nav .navbar-header {  height: 112px; }
header .header {  display: none; }
 
header nav.top-bar-wrap {
    background: #001533;
    border: none;
    border-radius: 0;
    margin: 0;
    font-size: 28px;
    overflow: visible;
    letter-spacing: 1px;
}
 
header nav .top-bar .navbar-header {  position: relative; }
header nav .top-bar .navbar-brand {
    background: #448DDD;
    overflow: visible;
    border-radius: 80px;
    width: 160px;
    height: 160px;
    border: 16px solid #001533;
    padding: 0;
    transition: border-width 128ms linear;
}
header nav .top-bar .navbar-brand:hover,
header nav .top-bar .navbar-brand:active,
header nav .top-bar .navbar-brand:focus {
    background: #448DDD;
    border-width: 24px;
}
header nav .top-bar .navbar-brand img {
    width: 128px;
    position: absolute;
    top: 16px; left: 0;
}
header nav .top-bar .navbar-nav li > a {
    color: #FFF;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
    font-family: 'Archivo Narrow', sans-serif;
    min-width: 224px;
    position: relative;
}
header nav .top-bar .navbar-nav li > a:hover,
header nav .top-bar .navbar-nav li > a:active,
header nav .top-bar .navbar-nav li > a:focus {
    color: #FFF;
}
 
header nav .top-bar .navbar-nav li > a .btn-fa-circle {
    display: inline-block;
    overflow: visible;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    font-size: 36px;
    text-align: center;
    margin-right: 12px;
    top: 3px;
    border: 0px solid #001533;
    transition: line-height 128ms linear,
                border-width 128ms linear;
}
header nav .top-bar .navbar-nav li > a .fa {  position: absolute; }
header nav .top-bar .navbar-nav li > a:hover .btn-fa-circle {  border-width: 8px; }
header nav .top-bar .navbar-nav li > a.top-bar-posts-link .btn-fa-circle {  background: #448DDD; }
header nav .top-bar .navbar-nav li > a.top-bar-posts-link .fa {
    top: 38px;
    left: 38px;
}
header nav .top-bar .navbar-nav li > a.top-bar-projects-link .btn-fa-circle {  background: #41AAB7; }
header nav .top-bar .navbar-nav li > a.top-bar-projects-link .fa {
    top: 36px;
    left: 35px;
}
header nav .top-bar .navbar-nav li > a.top-bar-stories-link .btn-fa-circle {  background: #0048A0; }
header nav .top-bar .navbar-nav li > a.top-bar-stories-link .fa {
    top: 37px;
    left: 42px;
}
header nav .top-bar .navbar-nav li > a .text {
    position: absolute;
    left: 116px;
    top: 45px;
}
 
@media(max-width: 768px) {
    header,
    nav.top-bar-wrap,
    nav .navbar-header {  height: 84px; }
 
    header nav .top-bar .navbar-brand {
        border-radius: 80px;
        width: 84px;
        height: 84px;
        border: 12px solid #001533;
        transition: border-width 128ms linear;
    }
    header nav .top-bar .navbar-brand:hover,
    header nav .top-bar .navbar-brand:active,
    header nav .top-bar .navbar-brand:focus {
        border-width: 16px;
    }
    header nav .top-bar .navbar-brand img {
        width: 64px;
        position: absolute;
        top: 10px; left: 8px;
    }
 
    header nav .top-bar .navbar-nav li > a .text {
        right: 32px;
        left: auto;
        transition: right 128ms linear;
    }
    header nav .top-bar .navbar-nav li > a:hover .text {  right: 44px; }
 
    header nav .top-bar .navbar-nav li > a .btn-fa-circle {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        font-size: 32px;
    }
    header nav .top-bar .navbar-nav li > a {  padding-left: 12px; }
 
    header nav .top-bar .navbar-nav li > a.top-bar-posts-link .fa {  left: 26px; }
    header nav .top-bar .navbar-nav li > a.top-bar-projects-link .fa {  left: 23px; }
    header nav .top-bar .navbar-nav li > a.top-bar-stories-link .fa {  left: 30px; }
    header nav .top-bar .navbar-nav li > a:hover .btn-fa-circle {  border-width: 4px; }
}
 
header nav .top-bar .navbar-toggle {
    border: none;
    width: 54px;
    height: 54px;
    padding: 14px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 27px;
}
header nav .top-bar .navbar-toggle:hover,
header nav .top-bar .navbar-toggle:active,
header nav .top-bar .navbar-toggle:focus {
    border-width: 0px;
    background: none;
}
header nav .top-bar .navbar-toggle:hover .icon-bar {  background-color: #448DDD; }
header nav .top-bar .navbar-toggle .icon-bar {
    border-color: #FFF;
    background-color: #FFF;
    width: 26px;
}
header nav .top-bar .navbar-toggle .icon-bar + .icon-bar {  margin-top: 5px; }
 
header nav .top-bar .navbar-collapse.in,
header nav .top-bar .navbar-collapse.collapsing {
    background: #001533;
    border: none;
}
 
/*  Search (@search)
 *  ==========================================================================*/
 
/*  Content (@content)
 *  ==========================================================================*/
main.content-wrap {  background: #DDD; }
main .main-content .page-title-container {  display: none; }
main .main-content-wrap {  padding: 0; }
main .content > .row {  margin: 0; }
main .container {
    background-color: #FFF;
    padding-left: 32px;
    padding-right: 32px;
}
main .content-container.container {
    padding-bottom: 32px;
    padding-top: 16px;
}
 
main .content h1,
main .content h2,
main .content h3,
main .content h4,
main .content h5,
main .content h6 {
    font-family: 'Archivo Narrow', sans-serif;
    letter-spacing: 1px;
}
 
@media(max-width: 768px) {
    main .content-container.container {
        padding-left: 16px;
        padding-right: 16px;
    }
    main .content-container.container p {  text-align: justify; }
}
 
.date-text {
    font-size: 19px;
    color: #777;
}
:not(a).category-text {
    display: inline-block;
    background: #448DDD;
    color: #FFF;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 24px;
    padding: 2px 1.5em;
    letter-spacing: 1px;
    border-radius: 24px;
}
 
blockquote {
    border-left-color: #DDD;
    font-size: 18px;
}
blockquote p:first-child {  margin-top: 0; }
 
.math-inline {  margin: 0 3px; }
.equation-number {  display: none; }
 
/*  Code (@code)
 *  ==========================================================================*/
div.code {
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
}
div.code span.line {  padding-left: 36px; }
 
/*  Action Area (@action-area)
 *  ==========================================================================*/
#action-area .form-group .col-sm-5 {  width: 75%; } 
.change-textarea-size {  display: none; } 
 
/*  Page Header (@page-header)
 *  ==========================================================================*/
.page-title {  display: none; }
.page-title-actual {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 48px;
    text-align: center;
    letter-spacing: 1px;
}
main .container.page-header {  padding: 0; }
.page-header {
    margin: 0 auto;
    height: 620px;
    background-position: center center;
    position: relative;
    border-bottom: none;
}
.page-header .page-header-content {
    color: #FFF;
    background: rgba(0, 0, 0, 0.8);
    font-family: 'Archivo Narrow', sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.page-header .page-header-title {
    font-size: 52px;
    letter-spacing: 1px;
}
.page-header .page-header-title p {
    margin-top: 24px;
    margin-bottom: 24px;
}
.page-header .page-header-caption {  font-size: 18px; }
.page-header .page-header-caption p {
    margin-top: 0;
    margin-bottom: 32px;
}
 
@media(max-width: 768px) {
    .page-title-actual {  font-size: 36px; }
    .page-header {
        height: 428px;
        background-size: cover;
    }
    .page-header .page-header-content {
        background: #000;
    }
    .page-header .page-header-title {  font-size: 32px; }
    .page-header .page-header-title p {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .page-header .page-header-caption {  display: none; }
}
 
.page-header-buttons {
    margin-top: -54px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.page-header-buttons a {
    font-size: 20px;
    border: 3px solid #FFF;
}
 
/*  Posts (@posts)
 *  ==========================================================================*/
.post .category-text-wrap {  text-align: center; }
.post .page-header-buttons .fa {  min-width: 28px; }
.post .page-header-buttons p {  margin-bottom: 2px; }
 
/*  Projects (@projects)
 *  ==========================================================================*/
.show-when {  display: none; }
.show-when.show-when-website-website {  display: inline; }
.show-when.show-when-css-css {  display: inline; }
.show-when.show-when-game-game {  display: inline; }
.show-when.show-when-utility-utility {  display: inline; }
.show-when.show-when-library-library {  display: inline; }
.show-when.show-when-other-other {  display: inline; }
 
.project .category-text-wrap {
    margin-top: -54px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.project .category-text {
    font-size: 20px;
    border: 3px solid #FFF;
}
 
.project .project-download-wrap .btn {
    font-size: 24px;
    margin-bottom: 8px;
}
.project-version {
    font-size: 14px;
    color: #AAA;
}
.project-summary {
    font-size: 21px;
    text-align: center;
}
 
@media(max-width: 768px) {
    .project-summary {  font-size: 17px; }
}
 
/*  Cards (@cards)
 *  ==========================================================================*/
.card {
    position: relative;
    overflow: hidden;
    margin: 16px 0;
    bottom: 0px;
    transition: bottom 128ms linear;
}
.card.card-lg {  height: 718px; }
.card.card-md {  height: 396px; }
.card.card-sm {  height: 316px; }
.card.card-xs {  height: 202px; }
.card.card-lg .card-title {  font-size: 42px; }
.card.card-md .card-title {  font-size: 28px; }
.card.card-sm .card-title {  font-size: 22px; }
.card.card-xs .card-title {  font-size: 18px; }
 
.card .card-link {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.card .card-image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    border-top-left-radius: 0px;
    transition: border-top-left-radius 128ms linear;
}
.card .card-image {
    width: 100%;
}
.card .card-content-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #FFF;
    padding: 12px 24px;
}
.card .card-title {
    font-family: 'Archivo Narrow', sans-serif;
    letter-spacing: 1px;
}
.card .card-title p {
    margin: 8px 0;
    line-height: 1;
}
.card .card-content {  font-size: 15px; }
.card .card-content p:first-child {  margin-top: 0; }
.card .card-content p:last-child {  margin-bottom: 0; }
.card .card-footer p {  margin: 4px 0 0 0; }
.card .category-text-wrap {  text-align: right; }
.card .category-text-wrap a {
    position: relative;
    z-index: 3;
}
.card.card-lg .category-text {  font-size: 20px; }
.card.card-md .date-text {  font-size: 16px; }
.card.card-md .category-text {
    font-size: 18px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.card.card-sm .date-text {  font-size: 15px; }
.card.card-sm .category-text {
    font-size: 17px;
    padding-top: 0;
    padding-bottom: 0;
}
 
.card.card-xs .card-image {
    width: 150%;
    position: relative;
    left: -25%;
}
.card.card-xs .card-content-wrap {
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #FFF;
}
 
.card:hover {  bottom: 8px; }
.card:hover .card-image-wrap {
    border-top-left-radius: 84px;
}
.card.card-xs:hover .card-image-wrap {
    border-top-left-radius: 64px;
}
 
@media(max-width: 1200px) {
    .card.card-lg {  height: 704px; }
    .card.card-md {  height: 375px; }
    .card.card-sm {  height: 296px; }
}
@media(max-width: 992px) {
    .card.card-lg {  height: 580px; }
    .card.card-md {  height: 296px; }
    .card.card-sm {  height: 296px; }
    .col-sm-4 .card.card-sm {  height: 216px; }
    .col-sm-4 .card.card-sm .card-content {  display: none; }
    .card.card-md .card-title {  font-size: 22px; }
    .card.card-md .date-text {  font-size: 15px; }
    .card.card-md .category-text {
        font-size: 17px;
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media(max-width: 768px) {
    .card.card-lg {  height: auto; }
    .card.card-md {  height: auto; }
    .card.card-sm {  height: auto; }
    .col-sm-4 .card.card-sm {  height: auto; }
    .col-sm-4 .card.card-sm .card-content {  display: block; }
    .card.card-lg .card-title {  font-size: 22px; }
    .card.card-lg .date-text {  font-size: 15px; }
    .card.card-lg .category-text {
        font-size: 17px;
        padding-top: 0;
        padding-bottom: 0;
    }
 
    .card:not(.card-xs) {  margin: 4px; }
 
    .card:not(.card-xs) .card-image-wrap {  position: relative; }
    .card:not(.card-xs) .card-content-wrap {  position: relative; }
    .card:not(.card-xs) .card-link-wrap p {  margin: 0; }
 
    .card:not(.card-xs):hover {  bottom: 0; }
}
 
/*  Footer (@footer)
 *  ==========================================================================*/
footer {
    background: #001533;
    padding-top: 32px;
    color: #FFF;
    font-family: 'Archivo Narrow', sans-serif;
}
footer .footer .container {  margin: 0 auto; }
 
footer .footer-subscription .modal {
    text-align: center;
    color: #333;
}
footer .footer-subscription .modal-body {
    font-size: 19px;
    font-family: 'Source Sans Pro', sans-serif;
}
 
footer .footer-connect,
footer .footer-nav {  margin-top: 48px; }
footer .footer-license {  margin-top: 24px; }
footer .footer-nav a {
    display: inline-block;
    padding: 0 15px;
    color: #DDD;
}
footer .footer-nav a:hover {  color: #FFF; }
 
footer .footer-connect a {
    width: 64px;
    height: 64px;
    display: inline-block;
    margin: 0 32px;
    transition: padding-top 128ms linear;
}
footer .fa {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    display: inline-block;
    line-height: 64px;
    font-size: 36px;
    color: #FFF;
    transition: line-height 128ms linear,
                width 128ms linear,
                height 128ms linear;
}
footer .footer-connect a:hover {  padding-top: 8px; }
footer .footer-connect a:hover .fa {
    line-height: 48px;
    width: 48px;
    height: 48px;
}
footer .fa.fa-linkedin {  background-color: #0077B5; }
footer .fa.fa-twitter {  background-color: #29AAE1; }
footer .fa.fa-github-alt {  background-color: #333333; }
 
footer .modal input.text {
 
}
 
/*  Utility (@utility)
 *  ==========================================================================*/
.no-back {  background: none !important; }
.no-padding {  padding: 0 !important; }
.no-margin {  margin: 0 !important; }
.no-p p {  margin: 0 !important; }
.is-checked-0 {  display: none !important; }
.force-left, .force-left p {  text-align: left !important; }
.force-right, .force-right p {  text-align: right !important; }
.force-center, .force-center p {  text-align: center !important; }
 
/*  Cool Text (@cool-text)
 *  ==========================================================================*/
@keyframes cool {
    from {  bottom: -0.72em; }
    to   {  bottom:  0.72em; }
}
.cool-text {
    font-weight: bold;
    letter-spacing: 2px;
}
.cool-text span {
    position: relative;
    animation-name: cool;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
.cool-text .cool-text-0 {  animation-delay: 0; }
.cool-text .cool-text-1 {  animation-delay: 100ms; }
.cool-text .cool-text-2 {  animation-delay: 200ms; }
.cool-text .cool-text-3 {  animation-delay: 300ms; }
 
/*  OWindow (@owindow)
 *  ==========================================================================*/
/*
 *  Theoretically, the only error users should see is failing to provide an
 *  email when subscribing.  The native Wikidot error is junk, so I need to
 *  fill it in with my own content.  This will fill in way too many errors,
 *  though, but such errors should not arise unless the user is really
 *  poking around or knows how Wikidot works.
 */
.owindow.error h1 {  display: none; }
.owindow.error p  {  display: none; }
.owindow.error .modal-body::after {
    content: 'You did not provide a valid email!  The email must look something like "myemail@gmail.com", but without the quotes.  And it does not have to be gmail.';
}
.owindow.error .btn {  text-transform: capitalize; }
 
/*  Misc (@misc)
 *  ==========================================================================*/
.alert p:first-child {  margin-top: 0; }
.alert > p + p {
    line-height: 1.72em;
    margin-bottom: 1.5em;
    margin-top: 1.24em;
}
.alert p:last-child {  margin-bottom: 0; }
 
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6 {
    margin: 0;
}
.modal .modal-body p:first-child {  margin-top: 0; }
.modal .modal-body p:last-child  {  margin-bottom: 0; }
.modal .modal-footer p {  margin: 0; }
 
.page-tags {  display: none; }
 
/*  Stack Overflow code */
@keyframes blinker {  
  0%  { opacity: 1.0; }
  50% { opacity: 0.0; }
}
 
.alert-subscription {
    position: fixed;
    z-index: 999;
    top: 10px;
    left: 10px;
    max-width: 300px;
 
    animation-name: blinker;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.5, 0, 1, 1);
    animation-duration: 1.7s;
}