body
{

  font-family: Arial, sans-serif;
  font-size: 0.8em;
  margin: 0px;
  padding: 0px;
  background-color: #ddd;
}

hr
{
  border: 0;
  color: #ccc;
  background-color: #ccc;
  height: 1px;
}

a
{
  color: #c50000;
  font-weight: normal;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

a[data-icon^='ext']:before
{
  content: "";
  display: inline-block;
  background: url("/img/icon_link.png") no-repeat;
  width: 12px;
  height: 12px;
  margin-right:2px;
}

a.more:after
{
  content: "\2192"; /*→ »*/
  display: inline-block;
  margin-left:2px;
}

a.more
{
  font-weight: bold;
  font-size: 11px;
}

.ext_link_block
{
  background-color:#f0f0f0;
  padding: 5px;
  margin-top:5px;
}

input[type="submit"], input[type="button"]
{
  height: 20px;

  background-color: #eee;
  color: #666;
  border: 1px solid #999;
  border-radius: 5px;
  text-decoration: none;
}

input[type="submit"]:hover, input[type="button"]:hover
{
  background-color: #999;
  color: #fff;
  text-decoration: none;
}

select, input[type="text"]
{
  height: 20px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
}

textarea
{
  width:100%;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
}

#topbar
{
  width: 100%;
/*  height: 24px;*/
  background-color: #000;
  color: #FFF;
  padding-top: 4px;
  padding-bottom: 5px;
  font-size: 13px;
  display:none;
  clear:both;

}

#topbar:after
{
  display: block;
  content:  " ";
  clear:both;
}

#topbar div:first-child
{
  margin-left: 10px;
}

#topbar div:last-child
{
  font-weight: bold;
  margin-right: 10px;
  margin-left: 10px;
  cursor: pointer;
}

#topbar div:last-child:hover
{
  color: #fffcaf;
}

#topbar2
{

  width: 100%;
  background-color: #9a9a9a;
  color: #FFF;
  padding-top: 4px;
  padding-bottom: 5px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  clear:both;
}


/* for all containerMCout-s except last two */
/*
.containerL div:not(:nth-last-of-type(-n+2))
{
  padding-bottom: 10px;
}
*/

.containerMCout
{

  position: relative;
  padding-bottom: 10px;
}

.containerMCoutLast
{

  position: relative;
  padding-bottom: 0px;
}

.containerMC
{

  padding-left: 10px;
  padding-right: 10px;
  margin-left:3em;
  margin-left:2.7vw;

  line-height: 1.1em;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;

/* FF */
  -moz-column-width: 20em;
  -moz-column-gap: 2em;
  -moz-column-rule: 1px solid #aaa;

/* Chrome */
  -webkit-column-width: 20em;
  -webkit-column-gap: 2em;
  -webkit-column-rule: 1px solid #aaa;

/* IE, Opera */
  column-width: 20em;
  column-gap: 2em;
  column-rule: 1px solid #aaa;

  text-align: justify;

  padding-top: 10px;
  padding-bottom: 10px;
  word-wrap: break-word;
}


.containerYRSS
{
  height: 134px;
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 10px;

  margin-left:3em;
  margin-left:2.7vw;

  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;
}

.containerPERSS
{
  height: 138px;
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 10px;

  margin-left:3em;
  margin-left:2.7vw;

  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;
}


.containerPRSS
{
  height: 138px;
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 10px;

  margin-left:3em;
  margin-left:2.7vw;

  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;
}


.YBlock
{
  border: 3px solid white;
  width: 124px;
  height:133px;
  font-size:10px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:center; float: left;
}

.YBlock img
{
  width: 120px;
}

.PEBlock
{
  border: 3px solid white;
  width: 200px;
  height:140px;
  font-size:10px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:center; float: left;
}

.PBlock
{
  border: 3px solid white;
/* width: 200px;*/
  height:140px;
  font-size:10px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:center; float: left;
}

.containerL
{
  float:left;
  width: 80%;
}

.containerR
{
  float: right;
  width:20%;

  line-height: 1.1em;
  word-wrap: break-word;
  text-align: justify;

}


.containerR > div
{
  padding-left:10px;
  padding-right:10px;
}

.containerR > div > div
{
  padding-bottom:10px;
}

.containerR h1
{
  text-align:right;
}

.containerMC a, .containerR a
{
  color: #c50000;
  font-weight: normal;
  text-decoration: none;
}

.containerMC a:hover, .containerR a:hover
{

  text-decoration: underline;
}

h1.ui /* headline-title */
{
  background: #cc0033;
  color: #fff;
  /* height: 20px; */
  font-size: 1.1em;
  font-family: Arial;
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 5px;

  margin-top: 0px; /* 10 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: normal;
}

.containerL h1.ui div:first-child
{
  float:left;

}
.containerL h1.ui a
{
 /* float:left;*/
  color: #fff;
  font-weight: bold;
}

.containerL h1.ui a:hover
{
  color: #fffcaf;
  font-weight: bold;
  text-decoration: none;
}

.containerL h1.ui div:last-child
{
  /*display:none;*/
  float:right;
}

.icon_restore
{
  width: 17px;
  height: 17px;
  background-color: #888;
  background: url(/img/icon_restore.png) no-repeat scroll 0px 0px;
}

.icon_restore:hover
{
  cursor  : pointer;
  background: url(/img/icon_restore.png) no-repeat scroll 0px -17px;
}
/*
.containerL h1.ui div:hover
{
}
*/
h2.ui /* headline-tag, rotated */
{
  position: absolute;
  top: 50px;

  left: 2.2em;  /* fallback */
  left: 2.80vw;

  font-size: 1.4em; /* fallback */
  font-size: 1.4vw;
  font-family: Arial;
  color: #fff;
/*  background-color: #aaa;*/

  background: #aaa url(/img/icon_cross.png) no-repeat scroll 11px 4px;
  width: 20px;
  height: 20px;

  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 3px;
  padding-top: 5px;


  border: 1px solid #aaa;
  border-radius: 0px 0px 9px 9px;

  -webkit-transform-origin: 0 0;
  -moz-transform-origin:    0 0;
  -ms-transform-origin:     0 0;
  -o-transform-origin:      0 0;

  -webkit-transform: rotate(90deg);
  -moz-transform:    rotate(90deg);
  -ms-transform:     rotate(90deg);
  -o-transform:      rotate(90deg);
}

h2.ui:hover
{
  cursor  : pointer;
}

/* headline-date */
a.headline_post
{
  width: 100%;
  display: block;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: right;
  clear: both;
  margin-top: 8px;
  margin-bottom: 8px;

  padding-right: 3px;
  padding-bottom: 2px;

  font-size: 1.4em;
  font-weight: bold;
  font-family: Georgia;
  background: url(/img/icon_link2.png) no-repeat scroll 2px 4px;
  color: #000;
}

a.headline_post span
{
  color: #aaa;
  font-size: 0.6em;
  float: left;
  padding-left: 26px;
}

a.headline_post:hover
{
  color: #c50000;
  text-decoration: none;
  background-color: #ddd;
}

a.headline_post:hover span
{
  color: #c50000;
  text-decoration: none;
}

/*
.headback_1
{
  background: url(/img/b_hardware.png) no-repeat left top 210px;
  background-position: left 5px bottom 10px;
}
*/

.containerMC img, .containerR img
{
  margin-right: 5px;
  margin-bottom: 5px;
  float: left;
}

.containerR img.inpostimage
{
  width: 100%;
  height: auto;
  max-width: 130px;  /* should be set corresponding to each image!!! */
}

.containerR .ext_link_block
{
  background-color:#cfcfcf;
  margin-bottom:3px;
}

.tags
{
  float: left;
  padding-left:3px;
  display: inline-block;
}

.containerR a.tag
{
  background-color: #cecece;
  color: #666;
}

#menu-top
 {
  column-width: 6em;
  column-gap: 1.75em;
  column-rule: 1px solid #aaa;
  -moz-column-width: 6em;
  -moz-column-gap: 1.75em;
  -moz-column-rule: 1px solid #aaa;
  -webkit-column-width: 6em;
  -webkit-column-gap: 1.75em;
  -webkit-column-rule: 1px solid #aaa;

  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;

  border-top: 1px solid #aaa;
}

#menu-top li
{
  display: block;
  text-align: center;
}

#menu-top li a
{
  display: block;
  font-size: 0.9em;
  font-weight: bold;
  font-family: Georgia;
  white-space: nowrap;
  color: black;
}

#menu-top li a:hover
{
  display: block;
  color: #c50000;
  text-decoration: none;
}
/*
#menu-top li a:active
{
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
*/

#buttons-bottom
{
/*  padding-left: 45px; */
  padding-bottom: 12px;
  background-color: #dadada;
  padding-top: 12px;
}

#buttons-bottom:after
{
 display: block;
 content:  " ";
 clear:both;
}


#buttons-bottom a
{
  float: left;
  display: block;
  width: 25px;
  height: 20px;
  margin-right:10px;
}

#buttons-bottom a#goback
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll 0px 0px;
}

#buttons-bottom a#goback:hover
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll 0px -20px;
}

#buttons-bottom a#gotop
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll -25px 0px;
}

#buttons-bottom a#gotop:hover
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll -25px -20px;
}

#buttons-bottom a#email
{
  margin-right:14px;
  background: url(/img/icon_bottom_all.png) no-repeat scroll -50px 0px;
}

#buttons-bottom a#email:hover
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll -50px -20px;
}

#buttons-bottom a#rss
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll -100px 0px;
}

#buttons-bottom a#rss:hover
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll -100px -20px;
}

/*
#buttons-bottom a#email
{
  float: left;
  display: block;
  width: 25px;
  height: 20px;
  margin-left: 20px;
  background: url(/img/icon_bottom_all.png) no-repeat scroll 0px 0px;
}

#buttons-bottom a#email:hover
{
  background: url(/img/icon_bottom_all.png) no-repeat scroll 0px -21px;
}
*/

#menu-bottom
{
  column-width: 8.5em;
  column-gap: 1.75em;
  column-rule: 1px solid #aaa;
  -moz-column-width: 8.5em;
  -moz-column-gap: 1.75em;
  -moz-column-rule: 1px solid #aaa;
  -webkit-column-width: 8.5em;
  -webkit-column-gap: 1.75em;
  -webkit-column-rule: 1px solid #aaa;

  margin: 0;
/*  margin-top: 20px;*/
  padding-top: 8px;
  padding-bottom: 5px;

  border-top: 1px solid #ccc;

}

#menu-bottom li
{
  display: block;
  text-align: center;
  font-size: 0.9em;
}

#menu-bottom li a
{
  font-family: Georgia;
  white-space: nowrap;
  color: black;
}

#menu-bottom li a:hover
{
  color: #c50000;
  text-decoration: none;
}

#copyright
{
  background-color: #fff;
  border-top: 1px solid #aaa;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 25px;
  font-size:0.8em;
}

#copyright > div:nth-child(1)
{
  float: left;
}

#copyright > div:nth-child(2)
{
  float: right;
}

a.tag
{
  background-color: #eee;
  color: #666;
  border: 1px solid #999;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.7em;
  padding: 0 5px;
  text-decoration: none;
}

a.tag:hover
{
  background-color: #999;
  color: #fff;
  text-decoration: none;
}

#header
{
  background-color: #fff;

  padding-top: 13px;
  padding-bottom: 10px;
  width:100%;
}

#logo_container
{

  float: left;
  width: 215px;
/*  background-color: #f99; */
  height: 64px;
  padding-left: 4px;
}

#banner_container
{
  width: 550px;
  float: left;
/*  background-color: #9f9;  */
}

#banner
{
  width: 417px;
  margin-left: auto;
  margin-right: auto;
}

#date_container
{
  width: 180px;
  margin-right: 10px;
  float: right;
/*  background-color: #99f; */
  text-align: right;
}



/* or less */
@media screen and (max-width: 980px)
{

  #header
  {

  }

  #logo_container
  {

  }

  #banner_container
  {
    width: 280px;
  }

  #banner
  {
    width: 206px;
    overflow: hidden;
  }

  #date_container
  {

  }

}

/* or less */
@media screen and (max-width: 700px)
{

  #header
  {

  }

  #logo_container
  {

  }

  #banner_container
  {
    width: 180px;
  }

  #banner
  {
    width: 86px;
    overflow: hidden;
  }

}

/* or less */
@media screen and (max-width: 600px)
{

  #logo_container
  {
    width: auto;
    float: none;
  }

  #date_container
  {
    float: none;
    padding-left:25px;
  }

  #banner_container
  {
    display: none;
  }

  #dt_time
  {
    display: none;
  }

  #dt_date
  {
    display: none;
  }

}

#dt_date
{
  font-weight: bold;
  text-align: right;
  padding-bottom: 4px;
}

#dt_time
{
  text-align: right;
  /*padding-bottom: 6px;*/
}

#field_search
{
 /* display: none; */
  width: 150px;
  height: 20px;
  background: url(/img/icon_search.png) no-repeat scroll 4px 3px;
  padding-left:22px;
  margin-top:6px;
  border: 1px solid #ccc;
}

#field_search2_select
{
  width: 150px;
  margin-right:8px;
}

#field_search2_input
{
  width: 250px;
  padding: 0px 4px 0 4px;;
  margin-right:5px;
  outline: none;
}

a.moreposts
{
  display:block;
  float:right;
  position: absolute;
  bottom: 18px;
  right: 10px;
  font-weight: bold;
  padding: 4px;

  background-color: #eee;
  color: #666;
  border: 1px solid #999;
  border-radius: 5px;
  text-decoration: none;
}

a.moreposts:hover
{
  background-color: #999;
  color: #fff;
  text-decoration: none;
}


/* for hires/retina displays - then width is not enough for right column */
/*
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
{

  body
  {
    font-size: 2em;
  }

  .containerL
  {
    width: 100%;
  }

  .containerR
  {
    width: 100%;
  }


}
*/

/* for narrow screens */

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

  .containerL
  {
    width: 100%;
  }

  .containerR
  {
    width: 100%;
  }


  h2
  {

    visibility: hidden;
  }

  .containerMC
  {
    margin-left:0;
  }

}

/* for /post/  */


.containerPOST
{
  padding-left:10px;
  padding-right:10px;
  padding-top:7px;
  padding-bottom:5px;

  line-height: 1.1em;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;
  font-size: 15px;

/*  min-height: 1000px; */
}

.containerPOST img
{
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-top: 0px;

  max-width:100%;
  height: auto;

}

.containerPOST img.inpostimage
{
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-top: 0px;
  float: left;
}
/*
.containerPOST h1
{
  all: initial;
}

.containerPOST h2
{
  all: initial;
}
*/
/* for /postS/  */

.containerPOSTS
{
  padding-left:10px;
  padding-right:10px;
  padding-top:7px;
  padding-bottom:5px;

  line-height: 1.1em;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #fff;
}

.containerPOSTS img
{
  margin-right: 5px;
  margin-bottom: 5px;
  float: left;
}

.containerPAGINATION
{
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  padding-top: 20px;
  padding-bottom: 20px;
  clear: both;
}

.containerPAGINATION a
{
  text-align: center;
  background-color: #eee;
  color: #666;
  border: 1px solid #999;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 3px;
  margin-right: 3px;
  text-decoration: none;
}

.containerPAGINATION span
{
  background-color: red;
  color: #fff;
  border: 1px solid #999;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 3px;
  margin-right: 3px;
}


.containerPAGINATION a.prev
{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}


.containerPAGINATION a.next
{

  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}


.containerPAGINATION a.prevnexttopic
{
  background-color: #fff;
  color: #666;
  border-radius: 0px;
}

.containerPAGINATION a:hover
{
  background-color: #999;
  color: #fff;
  text-decoration: none;
}


.containerSEARCH
{
  padding-left:10px;
  padding-right:10px;
  padding-top:7px;
  padding-bottom:5px;
  margin-bottom: 8px;

/*  line-height: 1.1em;*/
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #f8f8f8;
}

.containerSEARCH div
{
  font-size: 11px;
  padding: 5px;
  margin-top: 5px;
  background-color: #eee;
}

.count_likes
{
  background-color: #c50000;
  color: #fff;
  border-radius: 3px;
  font-weight: bold;
  font-size: 9px;
  padding: 0 3px;
}

.count_shares
{
  background-color: #298729;
  color: #fff;
  border-radius: 3px;
  font-weight: bold;
  font-size: 9px;
  padding: 0 3px;
}


.count_comments
{
  background-color: #5B51AA;
  color: #fff;
  border-radius: 3px;
  font-weight: bold;
  font-size: 9px;
  padding: 0 3px;
}


.comments_headline
{
  font-weight: bold;
  color: #000000;
  padding-bottom: 10px;
  padding-top: 5px;
}

.comments
{
  font-size: 12px;
  padding-bottom: 10px;
}

.comments a
{
  font-weight: bold;
  color: #000;
}

.sncomment
{
  clear:both;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px dashed #999;
}

.sncomment span
{
  font-weight: bold;
}

/* for responsive youtube/vimeo videos */

.videowrapper
{

  float: none;
  clear: both;

  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.videowrapper iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.headline_post_full
{
  width: 100%;
  text-align: right;
  clear: both;
  margin-top: 8px;
  margin-bottom: 18px;

  padding-right: 3px;
  padding-bottom: 2px;

  font-size: 1.3em;
  font-weight: bold;
  font-family: Georgia;
  color: #000;
  line-height: 1.3em;
}

.headline_post_full > span:nth-child(2)
{
  float: left;
  padding-left: 6px;
}

.headline_post_full > span:nth-child(1)
{
  color: #aaa;
  font-size: 0.8em;
}


.snlikes
{
  border-top: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}

.snlikes div
{
  padding-bottom: 10px;
}

.debugmsg
{
  display: none;
}

.message_ok
{
  background-color: #f4f2c3;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.author
{
  float: right;
  font-size: 12px;
}

/* for PRE tag, to embed program code snippets into article */

.code
{
  font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
  color: #000000;
  background-color: #eee;
  font-size: 12px;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 5px;
  overflow: auto;
  width: 100%;
  word-wrap: normal;
}