/*----------------------------- 
    Global HTML tag styling
------------------------------*/
@font-face {
  font-family: "Lato Regular";
  src: url('/fonts/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Lato Regular";
 	background: #f2f2f2;
}

footer {
  margin-top: 1em;
  margin-bottom: 1em;
	width: 100%;
	text-align: center;
	background: lightgray;
}

h1, h2, h3, h4, h5 {
  text-align: center;
}

ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

article, section {
  margin: 0.5em;
}

aside              { display: none;}
main               { flex: 0 0 100%; }
footer             { flex: 0 0 100%; }
header             { flex: 0 0 100%; }

.col-3_2_2_1-content { flex: 0 0 100%; }
.col-3_2_2_1-ad { flex: 0 0 100%; }
.col-ad_share {
  flex: 0 0 100%;
  height: auto;
}
.col-content_share { flex: 0 0 100%; }
.col-content       { flex: 0 0 100%; }
.col-2_2_1         { flex: 0 0 100%; }
.col-3_2_1         { flex: 0 0 100%; }
.col-3_3_1         { flex: 0 0 100%; }
.col-ad_full {
  flex: 0 0 100%;
  height: auto;
}
.enable_parent_row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.enable_parent_column {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
}


/*----------------------
  General
-----------------------*/
#container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  padding-top: 45px;
  background: #F8F8FF;
  width: 100%;
  max-width: 1366px;
  margin: auto;
}

#webpage_header img {
  width: 100%;
  height: auto;
}

.sidebar_left {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  flex-grow: 1;
  flex-shrink: 1;
}

.sidebar_left_expanded {
  flex-basis: 100%;
}

.sidebar_left_normal {
  flex-basis: 0;
  display: none;
}

main {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
}

.main_content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
  justify-content: space-between;
}

.main_content_contracted {  
  display: none;
}

.main_content_normal {
  flex: 0 0 100%;
}


/*---------------------
  Navbar
---------------------*/
.navbar_main .category {
  font-weight: bold;
  line-height: 2em;
  border-bottom: 2px solid #383838;
}

.navbar_main li {
  list-style: none;
  border: 1px solid #cdd0d2;
  background: #4e4e4e;
}

.navbar_main li a {
  display: block;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 2em;
  border-bottom: 1px solid #383838;
}

.navbar_main li a:hover {
  color: #008080;
}

.sidebar_left_normal {
  flex-basis: 0;
  display: none;
}

.sidebar_left_expanded {
  display: inline;
  flex-basis: 100%;
}

.box-shadow-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  padding: 10px;
  margin: 0;  
  padding-left: 1.25em;
  font-weight: bold;
  font-size: 150%;
  background: #4e4e4e;
  border-bottom: 2px solid white;
}

.box-shadow-menu span {
  padding-left: 1.5em;
  color: black;
}

.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 1em;
  top: 0.75em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}


/*-----------------------
  Content layout
------------------------*/
section > ul {
  margin-left: 1.5em;
}

.article_data {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
  background-color: white;
  padding: 1em;
}

.article_header img {
  width: 100%;
  height: auto;
}

.article_title, .article_content, .article_two_third, .article_one_third {
  width: 100%;
  height: auto;
}

.article_photo img {
  max-width: 100%;
  height: auto;
}

.article ul {
  padding: 10px;
  list-style-type: square;
}

/* Ads */
.ad_full, .ad_one_third {
  height: auto;
  width: 100%;
}

/*-- Text and a picture --*/
.text_picture {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;

  max-width: 100%;
  height: auto;
}

.text_picture .text {
  flex-basis: 65%;
}

.text_picture .picture {
  flex-basis: 30%;
  height: auto;
  margin: auto;
}

/* Indexing guides(browse) */
.indexlist {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  border: 1px solid black;
  height: auto;
  flex-basis: 100%;
  margin: 5px;
}

.icon {
  -webkit-flex: 1 0 0; 
  flex: 1 0 0; 
}
.text {
  -webkit-flex: 7 0 0;
  flex: 7 0 0;
}

/* Listing guides(YouTube) */
.guidesnippet {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-basis: 100%;
  height: auto;
  border: 1px solid black;
  margin: 3px;
}

.video {
  display: none;
}

.text {
    width: 100%;
    height: 100px;
    height: auto;
}

/* Single YouTube Videos */
.youtube_iframe {
  width: 300px;
  height: 168px;
}

/*-- Disqus --*/
.disqus {
  width: 100%;
}

/* schema.org tags */
.hidden_tag {
  display: none !important;
}

.code_editor {
  width: 100%;
  height: 300px;
}

.code_editor iframe {
  border: 0;
  min-width: 100%;
  overflow: hidden;
}


/*----------------------
  Social Media
----------------------*/
/* Follow */
.socialmedia_text {
  font-weight: bold;
  font-size: 1.15em;
}

.socialmedia_follow {
  padding: 7px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: space-around;
}

.socialmedia_follow_box {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-family: Entypo;
  font-size: 28px;
  text-align: center;
  color: #555;
  border-radius: 10px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
  transition: .30s;
  box-shadow: rgb(210, 210, 210) 1px 1px,
    rgb(210, 210, 210) 1px 1px,
    rgb(211, 211, 211) 1px 1px,
    rgb(211, 211, 211) 1px 1px,
    rgb(211, 211, 211) 1px 1px,
    rgb(212, 212, 212) 1px 1px,
    rgb(212, 212, 212) 1px 1px,
    rgb(212, 212, 212) 1px 1px,
    rgb(213, 213, 213) 2px 2px,
    rgb(213, 213, 213) 2px 2px,
    rgb(214, 214, 214) 2px 2px,
    rgb(214, 214, 214) 2px 2px,
    rgb(214, 214, 214) 2px 2px,
    rgb(215, 215, 215) 2px 2px,
    rgb(215, 215, 215) 2px 2px,
    rgb(215, 215, 215) 3px 3px,
    rgb(216, 216, 216) 3px 3px,
    rgb(216, 216, 216) 3px 3px,
    rgb(216, 216, 216) 3px 3px,
    rgb(217, 217, 217) 3px 3px,
    rgb(217, 217, 217) 3px 3px,
    rgb(218, 218, 218) 3px 3px,
    rgb(218, 218, 218) 3px 3px,
    rgb(218, 218, 218) 4px 4px,
    rgb(219, 219, 219) 4px 4px,
    rgb(219, 219, 219) 4px 4px,
    rgb(219, 219, 219) 4px 4px,
    rgb(220, 220, 220) 4px 4px,
    rgb(220, 220, 220) 4px 4px,
    rgb(221, 221, 221) 4px 4px;
}
.socialmedia_follow_box:hover {
  transition: .30s;
  color: white; 
}
.facebook_follow:hover { background-color: #3a5795; }
.twitter_follow:hover  { background-color: #00acee; }
.google_follow:hover   { background-color: #dd4b39; }
.paypal_donate:hover   { background-color: #3b7bbf; }

/*Share */
.social-buttons {
  list-style-type: none !important;
  box-sizing: border-box;
}
.social-buttons:before,
.social-buttons:after {
  box-sizing: border-box;
}
.social-buttons:before,
.social-buttons:after {
  content: " ";
  display: table;
  line-height: 0;
}
.social-buttons:after {
  clear: both;
}
.button__share {
  float: left;
  background-color: #888;
  margin-right: .7em;
  margin-bottom: .7em;
  border-radius: 4px;
}
.button__share:last-child {
  margin-right: 0;
}
.button__share:hover {
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  -webkit-opacity: 0.8;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter: alpha(opacity=80);
}
.button__share a {
  color: #fff;
  font-family: Arial, Helvetica, -apple-system, sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1.33;
  text-decoration: none;
  padding: .35em .7em;
  display: inline-block;
}
.button__share--facebook    { background-color: #3b5998; }
.button__share--googleplus  { background-color: #dc4e41; }
.button__share--twitter     { background-color: #55acee; }
.button__share--linkedin    { background-color: #0077b5; }
.button__share--reddit      { background-color: #ff4500; }
.button__share--hackernews  { background-color: #ff6600; }
.button__share--buffer      { background-color: #323b43; }
.button__share--digg        { background-color: #000000; }
.button__share--tumblr      { background-color: #35465c; }
.button__share--stumbleupon { background-color: #eb4924; }
.button__share--delicious   { background-color: #3399ff; }
.button__share--evernote    { background-color: #7ac142; }
.button__share--wordpress   { background-color: #21759b; }
.button__share--pocket      { background-color: #ef4056; }
.button__share--pinterest   { background-color: #bd081c; }


/*----------------------
  Code example layout
----------------------*/
.metacode {
  max-width: 100%;
  background: none repeat scroll 0 0 #444444;
  border: 1px solid #26ade3;
  border-radius: 3px 3px 3px 3px;
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 13px;
  line-height: 18px;
  overflow: auto;
  padding: 1em;
  margin: 5px;
  word-wrap: break-word;
  color: #ffffff;
}

pre, samp {
  white-space: pre-wrap;
}

.metacode h3, strong { 
  color: #52bde8;
  margin: 11px 0 30px 0;
}

.metacolor {
  color: #f8be36;
}

.metacode a {
  color: #d0df59;
  margin: 11px 0 30px 0;
}

.orange {
  color: #f8be36;
}

.lightblue {
  color: #ADD8E6;
}

/* Old "terminal system" Want to change to something better */
.code {
  max-width: 100%;
  background-color: black;
  border: 3px solid gray;
}

.code h5 {
  color: white;
  text-align: center;
}

.code p{
  color: white;
}

/* Breadcrumb */
.breadcrumbs:before, .breadcrumbs:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.breadcrumbs:after {
  clear: both;
}

.breadcrumbs {
  list-style: none;
  font-weight: 300;
}
.breadcrumbs a {
  padding-left: .3em;
  color: white;
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs li {
  list-style: none;
  float: left;
  padding: .5em .5em .5em 1em;
  background: #000;
}
.breadcrumbs li:after {
  content: '';
  width: 0;
  height: 0;
  position: relative;
  left: 13px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent black;
}
.breadcrumbs li:nth-child(2)       { background: #333333; }
.breadcrumbs li:nth-child(2):after { border-color: transparent transparent transparent #333333; }
.breadcrumbs li:nth-child(3)       { background: #666666; }
.breadcrumbs li:nth-child(3):after { border-color: transparent transparent transparent #666666; }
.breadcrumbs li:nth-child(4)       { background: #999999; }
.breadcrumbs li:nth-child(4):after { border-color: transparent transparent transparent #999999; }
.breadcrumbs li:last-child {
  background: linear-gradient(#d0b87c, #b59341);
  padding-right: 1em;
}
.breadcrumbs li:last-child:after { display: none; }


/*---------------------
  Raponive Web Design
---------------------*/
@media only screen and (min-width: 480px) {
  .col-3_3_1         { flex: 0 0 calc(100% / 3) }
  .col-2_2_1         { flex: 0 0 50%; }
  .text_picture .text {
    flex-basis: 75%;
  }

  .text_picture .picture {
    flex-basis: 20%;
  }
  /* Single YouTube Videos */
  .youtube_iframe {
    width: 470px;
    height: 264px;
  }

}

@media only screen and (min-width: 768px) {
  /* General layout */
  #container {
    padding-top: 0;
    padding: 0;
  }
  .main_content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 calc(100% - 215px);
  }
  .sidebar_left_normal {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-grow: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 215px;
  }
  /* Navigation */
  .box-shadow-menu {
    display: none;
  }
  .text_picture .text {
    flex-basis: 80%;
  }

  .text_picture .picture {
    flex-basis: 15%;
  }  
  /* Content layout */
  .col-3_2_2_1-content { flex: 0 0 45%; }
  .article_two_third {
    flex: 0 0 calc(100% - 300px);
  }
  
  .article_one_third {
    flex-basis: 25%;
  }

  .article_photo img {
    max-width: 75%;
    height: auto;
  }

  /* Indexlist articles */
  .indexlist {
    flex-basis: 47%;
  }

  /* YouTube lists */
  .guidesnippet .video {
    display: inline-flex;
  }
  .guidesnippet .text {
    height: 150px;
  }
  /* Single YouTube Video */
  .youtube_iframe {
     width: 560px;
     height: 315px;
  } 


  .col-ad_share {
    flex: 0 0 336px;
    height: auto;
  }
  .col-content_share {
    flex: 0 0 calc(100% - 336px);
  }
}

@media only screen and (min-width: 1024px) {
  /* Content layout */
  .col-3_2_2_1-content {
    flex: 0 0 calc((100% - 336px) / 2);
    margin: 0;
    padding: 0;
  }
  .col-3_2_2_1-ad {
    flex: 0 0 336px;
    margin: 0;
    padding: 0;
  }
  .article_one_third {
    flex: 0 0 calc(100% / 2 - 336px);
  }
  .article_two_third {
    flex: 0 0 calc(100% - 341px);
    margin: 0;

  }
    /* Ad specific */
  .ad_one_third {
    flex: 0 0 336px;
  }
}