/*-------------------------------------------------------------------
   CSS3 Primary Stylesheet -- Desktops, Laptops, etc.
   Copyright (c) 2004 - 2017 by William Paul Liggett (junktext)
   The following CSS3 code is licensed under the GNU Affero GPL 3.0.
   https://www.gnu.org/licenses/agpl-3.0.html
 -------------------------------------------------------------------*/

/*------------------------------------------
  Freely-licensed Monospaced Fonts
  By: Bitstream, 2003
  https://dejavu-fonts.github.io/
  -----------------------------------------*/
/* DejaVu Sans Mono: Normal */
@font-face {
    font-family: "DejaVuSansMono Web";
    src:
        /* local('DejaVu Sans Mono') */
        local('DejaVuSansMono'),
        url("fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSansMono.ttf");
    font-weight: normal;
    font-style: normal;
}

/* DejaVu Sans Mono: Bold */
@font-face {
    font-family: "DejaVuSansMono Web";
    src:
        /* local('DejaVu Sans Mono') */
        local('DejaVuSansMono-Bold'),
        url("fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

/* DejaVu Sans Mono: Italic */
@font-face {
    font-family: "DejaVuSansMono Web";
    src:
        /* local('DejaVu Sans Mono') */
        local('DejaVuSansMono-Oblique'),
        url("fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSansMono-Oblique.ttf");
    font-weight: normal;
    font-style: italic;
}

/* DejaVu Sans Mono: Bold & Italic */
@font-face {
    font-family: "DejaVuSansMono Web";
    src:
        /* local('DejaVu Sans Mono') */
        local('DejaVuSansMono-BoldOblique'),
        url("fonts/dejavu-fonts-ttf-2.37/ttf/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}


/*------------------------------------------
  CSS3 Formatting of Specific IDs
 ------------------------------------------*/
#social_media {
    /* For the logos of Twitter, LinkedIn, etc. */
    float:                      right;
    /*visibility:                 hidden; /* Hides icons until the page and icons are downloaded. */
}

#social_media img {
    height:                     25px;
    margin-left:                2px;
}

#site_banner {
    display:                    block;
    text-align:                 center;
    clear:                      both;
}

#site_banner a {
    text-decoration:            none;
    display:                    inline-block;
    position:                   relative;
    z-index:                    1;
}

/* The "j" logo with the ASCII rose. */
#site_banner_logo>object {
    height:                     120px;
    width:                      120px;
    position:                   relative;
    z-index:                    -1;
}

#site_banner_logo {
    display:                    inline-block;
    vertical-align:             middle;
}

#site_banner_text_and_slogan {
    display:                    inline-block;
    vertical-align:		middle;
    padding-left:               1rem;
}

/* This is the "j u n k t e x t . c o m" effect. */
#site_banner_text {
    font-size:  		16pt;
    font-family:		DejaVuSansMono Web;
    letter-spacing:		0.3em;
    color:			#ffffff; /* white */
}

/* Formats the "Lorem Ipsum" slogan. */
#site_banner_slogan {
    font-size:                  12pt;
    font-family:                DejaVuSansMono Web;
    color:                      #888888; /* light gray */
    letter-spacing:             normal;
    display:                    block;
    padding-top:                0.2rem;
}

/* The title of the page section being viewed (e.g., News or About) */
#section_heading {
    letter-spacing:		0.3rem;
    font-size:                  14pt;
    color:			#009900; /* nice green */
    background-color:           #000000; /* black */
    border:                     thin solid #888888; /* light gray */
    font-family:                DejaVuSansMono Web;
    font-weight:                bold;
    padding-top:                0.5rem;
    padding-bottom:             0.5rem;
    text-align:                 center;
}

/* The meat of the page's content (what people care about). */
#section_content {
    background-color:           #000000; /* black */
    border:                     thin solid #888888; /* light gray */
    margin-top:                 -1px; /* Fixes the double bottom border with the #section_heading. */
    padding-left:               0.5rem;
    padding-right:              0.5rem;
}

/* The navigational links at the bottom of the News page. Overall style for all elements within. */
#bottom_nav {
    text-align:                 center;
    font-size:                  14pt;
    font-weight:                bold;
    font-family:                DejaVuSansMono Web;
    padding-top:                0rem;
    padding-bottom:             1rem;
}

/* The navigational links at the bottom of the News page. Just for the actual <a href> links. */
#bottom_nav>a, #bottom_nav>span.nolink {
    /* Provides equal spacing between page numbers. */
    width:                      2rem;
    display:                    inline-block;
    margin-bottom:              0.5rem;
}

/* The navigational label that says "News Page:" */
#bottom_nav_label {
    color:			#009900; /* nice green */
    display:                    block;
    padding-bottom:             0.5rem;
}



/*----------------------------------------
  CSS3 Classes
 ----------------------------------------*/
.underline {
    text-decoration:            underline;
}

.niceyellow {
	color:			#cc9900; /* nice yellow */
	font-weight:		bold;
}

.nicegreen {
	color:			#009900; /* nice green */
	font-weight:		bold;
}

.highlight_yellow {
	background-color: #cc9900;
	color: black;
}

/* THIS SHOULD NOT BE USED ANY LONGER. DELETE THE .bullet_text WHEN POSSIBLE. Use .blog_bullets instead! */
/* .bullet_text is meant to be used for <li> text, as such: <li><span class="bullet_text">This is some text.</span></li> */
/*                                    This is fine as well: <li><div class="bullet_text">This is some text.</div></li>*/
.bullet_text {
	color:			#ededed; /* white gray */
	font-weight:		normal;
}

.notableborder {
	background-color:	#000000; /* black */
}

.clearFloat {
	/* To fix float issues. */
	clear:			both;
}

/* Image with a Dashed Border: Should be wrapped like such: <p class="blog_image"><img src="..." /></p> */
.image_with_outline {
	text-align: center;
	display: block;
}

.image_with_outline img {
	max-width: 80%;
	/* max-height: 400px; */
	border: 1px #888 dashed; /* nice green */
	padding: 2px; /* Adds a bit of whitespace in between the border and the image. */
}

.image_with_outline figcaption {
    font-size: 8pt;
}

/* Do this: <p class="max_img_width_equals_100percent"><img src="..." /></p> */
.max_img_width_equals_100percent img {
    max-width: 100%;
    height: auto;
}

/* Similar to the above, but for more general inline elements like: <video class="max_width_100percent_height_auto"><source src="..." type="video/webm" /></video> */
.max_width_100percent_height_auto {
    max-width: 100%;
    height: auto;
}

/* Similar to the blog images aspect, but the main focus is to left-align and not have any dashed border. */
/* IT Advice images should be used as such: <p class="it_advice_image"><img src="..." /></p> */
.it_advice_main_image {
    text-align: left;
    display: block;
}

.it_advice_main_image img {
    /* max-width: 100%; */
    /* max-height: 250px; */
    max-width: 350px;
}

.it_advice_main_image figcaption {
    font-size: 8pt;
}

/* Such as in a blog article that has "Date:" or the "By:" labels. */
.date_or_byline_label {
    color:  #888888;
    width: 4rem;
    display: inline-block;
}

.date_or_byline_label:first-of-type {
    margin-top: 1rem;
}

.date_or_byline_label:last-of-type {
    margin-bottom: 1rem;
}

/* Can be used as: <img class="center_image" src="..." /> */
.center_image {
    margin: auto;
    display: block;
    max-width: 100%;
}

.center_image_with_padding {
    margin: auto;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 100%
}

/* Can be used for groups of elements: <div class="center_text"> <p>Hello</p> <p>Yoyo</p> </div> */
/* Or for a single element:            <p class="center_text">Hello</p>   */
.center_text {
    text-align: center;
    display: block;
}

/* Applies extra bottom margin space for each <li> list item. */
ol.margin_bottom_2rem>li, ul.margin_bottom_2rem>li {
    margin-bottom: 2rem;
}

.video_extra_wrapper {
    max-width: 800px;
}

/* Fix solved in a how-to article by: */
/* https://www.w3docs.com/snippets/css/how-to-create-a-responsive-iframe-with-css.html */
.video_wrap_over_iframe {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 ratio */
}

/* Fix solved in a how-to article by: */
/* https://www.w3docs.com/snippets/css/how-to-create-a-responsive-iframe-with-css.html */
.video_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*---------------------------------------------
             CSS3 General HTML Tags
                      +
  Responsive Design for Different Screen Sizes
 ----------------------------------------------*/

/* Because Safari on iOS is dumb and will ignore my font-size settings, so I am telling Safari to not do this. */
body {
    -webkit-text-size-adjust: 100%;
}

/* Main navigation links. */
nav a {
    display:                    inline;
    text-decoration:            none;
    font-weight:		bold;
    font-size:                  12pt;
    letter-spacing:		0.1em;
    padding-left:               1.8rem;
    padding-right:              1.8rem;
}

nav {
    background-color:           #000000; /* black */
    border:                     thin solid #888888; /* light gray */
    font-size:                  12pt;
    font-family:                DejaVuSansMono Web;
    color:                      #ededed; /* white gray */
    text-align:                 center;
    display:                    block;
    margin:                     1rem auto 1.6rem auto;
    padding-top:                0.5rem;
    padding-bottom:             0.5rem;
}

body {
    background-color:   	#2a2a2a; /* charcoal gray */
    font-size:                  12pt;
    font-family:                DejaVuSansMono Web;
    color:                      #ededed; /* white gray */
}

a:link {
    color:                      #dd0000; /* red */
    text-decoration:            none;
    outline:                    0;
}

a:visited {
    color:                      #dd0000; /* red */
    outline:                    0;
}

a:focus {
    outline:                    0;
}

a:hover {
    color:                      #cc9900; /* nice yellow */
}

a:active {
    color:                      #009900; /* nice green */
    outline:                    0;
}

h1 {
    color:			#cc9900; /* nice yellow */
    font-weight:		bold;
    font-size:                  14pt;
    margin-bottom:              0;
}

h2 {
    color:                      #009900; /* nice green */         
    font-weight:                normal;
    font-size:                  12pt;
    margin:                     0;
}

/* Formatting of each News story summary on the homepage. */
/* This is for every <div> execpt for the last <div>. */
section.story>*:not(.story_heading_tags) {
    margin-top:			1rem;
    padding-left:               2rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Formatting of each story. */
section.story {
    padding-bottom:             4rem;
}

u {
    text-decoration:            none;
    border-bottom:              1px dashed;
}

footer {
    color:      		#888888; /* light gray */
    font-size:                  9pt;
    font-family:                DejaVuSansMono Web;
}

/* Give bullet points and list item numbers a nice yellow font. */
li {
    color:                      #cc9900; /* nice yellow */
    font-weight:                bold;
}

/* For blog posts that are structured like: <ul class="blog_bullets"><li>Item #1</li> ... </ul> */
/* Also meant to be used with <ol> (numbered) bullet types! */
.blog_bullets li {
	color:			#ededed; /* white gray */
	font-weight:		normal;

}

/* Per the W3C: Colors the bullets. */
/* See: https://www.w3.org/Style/Examples/007/color-bullets.en.html */
ul.blog_bullets {
    list-style: none;
    
}

ul.blog_bullets>li::before {
    content: "\2022"; /* Unicode bullet. */ 
    color: #009900; /* nice green */
    display: inline-block;
    width: 1rem;
    margin-left: -1rem;
    font-size: 1.1rem; /* Size of the bullet point. */
    vertical-align: middle;
}

ol.blog_bullets {
    list-style: none;
    counter-reset: li;
}

ol.blog_bullets>li::before {
    content: counter(li) "."; /* The 1, 2, 3 ... numbers, plus a period afterwards like "2.". */ 
    color: #009900; /* nice green */
    display: inline-block;
    width: 2rem;
    margin-left: -2rem;
    /* font-size: 1.1rem; /* Size of the numbered bullet. */
    /* vertical-align: middle; */
    font-weight: bold;
}

ol.blog_bullets>li {
    counter-increment: li;
    margin-left: 1.1rem;
}

ol>li>.li_inner_contents {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: top;
}

/* Useful when you need more whitespace. Add a <span> to be a simple container, like such: ol.blog_bullets>li>span.blog_bullets_ol_more_whitespace */
span.blog_bullets_ol_more_whitespace {
    margin-left: 0.5rem;
    margin-bottom: 0.2rem;
    display: inline-block;
    vertical-align: top;
}

section.story>.blog_bullets {
    padding-left:               4rem;
}

/* Small phones in portrait-mode. */
/* The four nav links take up FOUR rows. */
@media only screen and (max-width: 509px) {
    /* For the logos of Twitter, LinkedIn, etc. */
    #social_media img {
        margin-left:                4px;
        margin-bottom:              10px;
    }

    /* The "j" logo with the ASCII rose. */
    #site_banner_logo>object {
        height:                     85px;
        width:                      85px;
    }
    
    /* This is the "j u n k t e x t" effect. */
    #site_banner_text {
        font-size:                  14pt;
    }

    /* Formats the "Lorem Ipsum" slogan. */
    #site_banner_slogan {
        font-size:                  12pt;
    }
    
    nav a {
        display: block;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    nav {
        max-width: 100%;
    }
    
    .it_advice_main_image img {
        max-width: 100%;
    }
    
    #bottom_nav {
        width: 80%;
        margin: auto;
    }
    
    div#it_advice_heading {
        width: 81%;
    }
    
    .image_with_outline img {
	max-width: 100%;
    }
}

/* Small phones in landscape-mode. */
/* The four nav links take up TWO rows. */
@media only screen and (min-width: 510px) and (max-width: 805px) {
    /* For the logos of Twitter, LinkedIn, etc. */
    #social_media {
        position:                   absolute;  /* Right-aligns the logos and collapses the margin with the #site_banner. */
        right:                      5px;
    }
    
    #social_media img {
        margin-left:                4px;
    }
    
    #site_banner {
        padding-top:                16px;  /* Compensates for the 'absolute' positioning of the #social_media. */
    }
    
    /* The "j" logo with the ASCII rose. */
    #site_banner_logo>object {
        height:                     100px;
        width:                      100px;
    }
    
    /* This is the "j u n k t e x t . c o m" effect. */
    #site_banner_text {
        font-size:                  15pt;
    }

    /* Formats the "Lorem Ipsum" slogan. */
    #site_banner_slogan {
        font-size:                  12pt;
    }
    
    nav a {
        display: inline-block;
        padding-left: 0rem;
        padding-right: 0rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        width: 45%;
    }
    
    nav {
        max-width: 100%;
        margin: 0.5rem auto 0.7rem auto;
    }
    
    div#it_advice_heading {
        width: 89%;
    }
    
    .image_with_outline img {
	max-width: 100%;
    }
}

/* Larger phones in landscape-mode and tablets. */
/* The four nav links are on ONE row. The width just adjusts the black rectangle size. */
@media only screen and (min-width: 806px) and (max-width: 1102px) {
    nav {
        max-width: 100%;
    }
}

/* Tablets and laptops. */
/* The four nav links are on ONE row. The width just adjusts the black rectangle size. */
@media only screen and (min-width: 1103px) and (max-width: 1200px) {
    nav {
        max-width: 78%;
    }
}

/* Desktops. */
/* The four nav links are on ONE row. The width just adjusts the black rectangle size. */
@media only screen and (min-width: 1201px) {
    nav {
        max-width: 68%;
    }
}

/* Small phones in portrait-mode (400px) OR large phones in landscape-mode (800px). */
@media only screen and (max-width: 400px), (max-width: 800px) {
    section.story>*:not(.story_heading_tags) {
        padding-left:           0rem;
    }
    
    section.story>.blog_bullets {
        padding-left:           2rem;
    }
}