/* this is the stylesheet, hopefully it won't grow much longer than it is now */
/* GENERICS */
* {
    box-sizing: border-box;
}

footer table {
	font-style:		italic;
	width:			100%;
}

#icons {
	text-align:	right;
    font-family: monospace;
}

#left {
    font-family: monospace;
}

body {
	margin:			auto 8px 20px 8px;
	background: #1b1b1b ;
	color: #fff ;
	font-family: sans;
}

code {
	background-color:	#272822;
    color: #f8f8f2;
	padding:		2px;
}

pre code {
	padding:                0px;
}

pre {
	background-color:	#272822;
	border:			1px solid lime;
	padding:		6px;
	overflow-x:             auto;
}

.language-spoiler tt font{ 
    color: #272822; 
}

.language-spoiler tt font:hover{
    color: #f8f8f2;
}

a {
	color:			#8fc;
	text-decoration:	none;
}


a:hover {
	text-decoration:	underline;
}

html {
	margin:			1em auto;
}

h1 {
	text-align:		center;
}

td h1 {
	text-align:		left;
	font-size:		1.5em;
}

h1 { 
    color: #789; 
}
h2 { 
    color: #aaa;
    text-align: center;
}
h3, h4 { 
    color: #ccc;
}
h5, h6 { 
    color: #bdb;
}

table {
	width:	100%;
}

.rss-button {
    width: 13px;
    height: 13px;
}

/* for example, in Blog TODO: make this not apply so generically */
main ul li {
    font-family: monospace;
    color: #888;
    font-size: 10pt;
}

.url td {
	font-family:		monospace;
}

/* fix-decoder specifics*/

#fix-input {
    width:          99%;
    background-color: #272822;
    color: #f8f8f2;
    border: 2px solid lime;
    outline: none;
} 


.fix-output {
    background-color: #272822;
    color: #f8f8f2;
    font-family: sans;
    border: 2px solid lime;
    padding: 6px;
    overflow-x: auto;
}

/* cron-descriptor specifics */
#cron-input {
	width:			99%;
    text-align:     center;
    font-size:      250%;
    background-color: #272822;
    color: #f8f8f2;
    font-family: sans;
    border: 2px solid lime;
    outline: none;
}

.main-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.footer-line {
    border-top: 1px solid #333;
    padding-top: 15px;
}

/* NAVBAR STUFF */
.nav-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top: -1%;
    margin-bottom: -1%;
    border-bottom: 1px solid #333;
}

#navbar li{
    display:inline-block;
}
[type="checkbox"],
label {
    display: none;
}

ul > li > a:focus, ul > li > a:hover, #home-button:hover {
    text-decoration: none;
    background-color: #171717;
    border-bottom: 1px solid #8fc;
}

header nav table {
	width:			100%;
}

nav ul li a, .nav-container a {
    color: #8fc;
}

nav ul li {
    margin-left: 5px;
}

label {
    display: none;
    position: fixed;
    right: 20px;
    top: 0px;
}

/* STILL NAVBAR, SMALL SCREEN SPECIFICS */
@media only screen and (max-width: 768px) {
    nav ul {
        display: none;
    }
    label {
        display: block;
        background: #222;
        width: 30px;
        height: 30px;
        cursor: pointer;
        position: fixed !important;
        right: 20px;
        top: 0px;
    }
    label:after {
        content: '';
        display: block;
        width: 20px;
        height: 5px;
        background: #777;
        margin: 3px 5px;
        box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
    }
    [type="checkbox"]:checked ~ nav ul {
        display: block;
        z-index: 9999;
        position: fixed;
        right: 20px;
        left: 20px;
    }
    nav a {
        color: #8fc;
    }
    nav ul li {
        display: block;
        float: none;
        width: 100%;
        text-align: left;
        background: #222;
        text-indent: 20px;
    }
    nav > ul {
        float: right;
    }
    nav > ul > li {
        text-align: left;
        line-height: 40px;
        margin-left: 0px;
    }
    nav > ul li ul li {
        display: block;
        float: none;
    }
    nav > ul li ul {
        display: block;
        position: relative;
        width: 100%;
        z-index: 9999;
        float: none;
    }
    h1 {
        font-size: 26px;
    }
   .main-container {
        width: 750px;
    }

}

@media (min-width: 992px) {
    .main-container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .main-container {
        width: 1170px;
    }
}

#recipe_directory {
    column-count: 3;
}

#tag-directory {
    column-count: 3;
}

.hidden {
    display: none !important ;
}

#search {
  width: 99%;
  text-align: center;
  font-size: 250%;
  background-color: #272822;
  color: #f8f8f2;
  font-family: sans;
  border: 2px solid lime;
  outline: none;
}