/*
   Structure:


					 ___________________________________________
					|                                           |     Content: max-width 1280px
					| Logo                               Search |     Logo   : max-width 100%
					|___________________________________________|     Footer : max-width 100%
					|__________________Menus____________________|
					|_________________Toolbar___________________|     Menus  : centered; 
					|      |                             |      |     Toolbar: centered;
					|      | Content                     |      |
					|      |                             |      |     Content: left aligned to max 1280px
					|      |                             |      |
					|      |                             |      |
					|      |                             |      |
					|      |                             |      |
					|______|_____________________________|______|
					|                                           |
					|                                    Footer |
					|___________________________________________|



*/


/*
 *
 * Content of CSS:
 *
 *  p
 *  pre
 *  h2
 *  .h2_docs
 *  h3
 *  #h3_tags
 *  h4
 *  a
 *  a:hover
 *  select
 *  .a_title
 *  .a_title:hover
 *  .white_title
 *  .sep_title
 *  #Logo_Site_Name
 *  #Text_Site_Name
 *  #TopNavMaxWidth
 *  #TopNav
 *  #SubNav
 *  .NavTopLink
 *  .NavTopLink:hover
 *  .Focus_NavTopLink
 *  .Focus_NavTopLink:hover
 *  .SmallTitle
 *  .TinyTitle
 *  #MainContent
 *  #Content
 *  .HrefDockItem
 *  .HrefDockItem:hover
 *  .Focus_HrefDockItem
 *  .IconDockItem
 *
 *  a.tip
 *  a.tip:hover
 *  span
 *  a.tip:hover span 
 *
 *************************************************************************************************/

/* --------------------------------------------------------------------------------------------- */

/**************************************************************************************************
*                                                                                                 *
* Global theme                                                                                    *
*                                                                                                 *
**************************************************************************************************/

* {
  font-family: "Exo2-Light";
	font-size: 1em;
}

p {
  margin: 2px;
  text-align: justify;
  text-justify: inter-word;
}

pre {
	color: #110e10;
  font-family: 'Hack';
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


h1 {
		text-decoration: none;
}

h2 {
		text-decoration: none;
}

.h2_docs {
  align: center;
}

h3 {
		text-decoration: none;
}

h4 {
	text-decoration: none;
}

.news_search {
	text-decoration: none;
	background-color: #98E27f;
}

.news_search_invert {
  font-family: "Exo2-Light";
	text-decoration: none;
	background-color: #434343;
	color: #98E27f;
}

a.tip {
    text-decoration: none
}

a.tip:hover {
    /*cursor: help;*/
    position: relative;
}

span.tip {
  display: none;
  border-radius:6px;
  font-family: "Exo2-Light";
  border: lime 1px solid;
}

a.tip:hover span {
    padding: 10px 10px 10px 10px;
    display: block;
    z-index: 100;
    background-color: #333;
    left: 0px;
    margin: 10px;
    width: 160px;
    position: absolute;
    top: 10px;
    text-decoration: none;
    color: white;
    text-align: center;
}


a.longtip {
    text-decoration: none
}

a.longtip:hover {
    /*cursor: help;*/
    position: relative;
}

span.longtip {
  display: none;
  border-radius:4px;
  font-family: "Exo2-Light";
  border: lightgreen 0.5px solid;
  font-weight: normal;
  font-style: italic;
}

a.longtip:hover span {
    padding: 10px 10px 10px 10px;
    display: block;
    z-index: 100;
    background-color: #111;
    left: 0px;
    margin: 10px;
    width: 320px;
    position: absolute;
    top: 10px;
    text-decoration: none;
    color: #999;
    text-align: center;
}



/**************************************************************************************************
*                                                                                                 *
* Links                                                                                           *
*                                                                                                 *
**************************************************************************************************/

a {
	text-decoration: none;
	color: black;
}

.a_title {
	 text-decoration: none;
	 color: #080;
}

.a_title:hover {
  text-rendering: geometricPrecision;
  text-shadow: 0.75px 0.75px 1.75px black;
  color: white;
}




/**************************************************************************************************
*                                                                                                 *
* Tags                                                                                            *
*                                                                                                 *
**************************************************************************************************/


.sep_tags {
  width: 100%;
  background: black;
  color: white;
  /* vertical align */
  text-align:center;
  line-height: 36px;
  vertical-align: middle;
}

.tags_title {
  color: white;
  text-rendering: geometricPrecision;
  text-shadow: 1px 1px 1.5px black;
  vertical-align: middle;
}





/**************************************************************************************************
*                                                                                                 *
* Titles                                                                                          *
*                                                                                                 *
**************************************************************************************************/

.white_title {
  color: white;
  text-rendering: geometricPrecision;
  text-shadow: 1px 1px 1.5px black;
  vertical-align: middle;
}

.sep_title {
  width: 100%;
  background: grey;
  color: white;
  /* vertical align */
  text-align:center;
  line-height: 36px;
  background-image: linear-gradient(to top, rgba(120, 120, 120, 0.45), rgba(160, 160, 160, 0.60) );  
}

#home-article-logo {
	display: none;
	display: inline;
}

#article_cats {
	display: inline;
}

#article_img {
	max-width: 1280px;
	height: 520px;
	background-position: center;
	background-size: cover;
	border: dotted lime 1px;
}



/**************************************************************************************************
*                                                                                                 *
* Body                                                                                            *
*                                                                                                 *
**************************************************************************************************/

#MainContent {
 position: relative;
 top: 0px;
 margin: 0 auto;
 width: 100%;
 height: 100%;
 /*background-repeat: no-repeat;*/
 /*background: url('../img/wallpaper.jpg');*/
 background-color: #ccc;

}

#MainContent_Home {
 position: relative;
 top: 0px;
 margin: 0 auto;
 width: 100%;
 height: 100%;
 background-color: black;
}

#content {
  position: relative;
  width: 98%;
  border: dotted grey 1px;
  font-family: "Exo2-Light";
  text-align: justify;

  padding: 10px 10px 10px 10px;
  /*background-color: rgba(233, 233, 233, 0.75);*/

  color: black;
  white-space: normal;
  float:left;
  vertical-align:bottom;
  word-wrap: break-word;
  background-image: linear-gradient(to top, rgba(190, 190, 190, 0.55), rgba(233, 233, 233, 0.80) );  
}

#index-title {
	position: relative;
	top: -50px;
	left: 10px;
	color: lime;
		text-shadow: 0 0 5px black;
}

#index-title-suffix {
	position: relative;
	top: -50px;
	left: 5px;
	color: green;
	text-shadow: 0 0 3px lime;
}

#main-logo {
	width: 120px;
	position: relative;
	left: -20px;
 /*filter: drop-shadow(0px 0px 5px black);*/
 filter: drop-shadow(0px 0px 2px #999);
}

#site-descr {
  font-family: Verdana;
		color: darkgreen;
	/*text-shadow: 0 0 2px black;*/
  letter-spacing: 0.1em;
  /*font-style: italic;*/
  /*font-variant: initial;*/
}

#site-quote {
  font-family: Arial;
		color: #333;
	/*width: 400;*/
 	display: inline-block;
 	position: relative;
 	/*top: -400px;*/
 	text-align: center;
 	top: 420px;
 	max-width: 640px;
 	z-index: 1;
	/*text-shadow: 0 0 3px black;*/
/*  letter-spacing: 0.2em;*/
/*  font-style: italic;*/
/*  font-variant: initial;*/
}

/* --------------------------------------------------------------------------------------------- */

#TopNavMaxWidth {
	width: 100%;
	top: 0;
	position: fixed;
	z-index: 1;
	-webkit-filter: drop-shadow(1px 1px 2px #111);
	filter: drop-shadow(1px 1px 2px #111);
}

#TopNavMaxWidth_HomePage {
	width: 100%;
  z-index: 1;
	top: 0;
  position: relative;
}

#TopNav_Icon {
	background: #555;
	color: white;
	text-align: left;
	display: none;
}

#TopNav {
	background-color: black;
	color: white;
	text-align: center;
}

#SubNav {
	color: #444;
	background: white;
	width: 100%;
}

/* --------------------------------------------------------------------------------------------- */

.NavTopLink {
 	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-color: #555;
	padding: 15px 3px 15px 3px;
  font-family: "Exo2-Light";
}

.NavTopLink:hover {
	background: #222;
	border-style: solid;
	border-width: 1px;
	border-color: lightgreen;	
}


.NavTopLink_Black {
 	display: inline-block;
	padding: 15px 3px 15px 3px;
}

.NavTopLink_Black:hover {
	background: #131;
	border-style: solid;
	border-width: 1px;
	border-color: lime;	
}

/* --------------------------------------------------------------------------------------------- */

.Focus_NavTopLink {
 	display: inline-block;
	/*right: 0px;*/
	padding: 15px 3px 15px 3px;
  font-family: "Exo2-Light";
	background: #373737;
	border-style: solid;
	border-width: 1px;
	border-color: #888;
}

.Focus_NavTopLink:hover {
	background: black;
	border-style: solid;
	border-width: 1px;
	border-color: lime;
}

/* --------------------------------------------------------------------------------------------- */

.SmallTitle {
	font-family: Arial;
}

/* --------------------------------------------------------------------------------------------- */

.TinyTitle {
	font-family: Arial;
	font-weight: bold;
		text-decoration: none;
}

.HrefDockItem {
	color: lightgreen;
	text-decoration: none;
	text-shadow: 0 0 5px black;
	font-family: Verdana;
}

.HrefDockItem:hover {
	color: white;
}

#SearchDockItem {
  width: 18px;
  height: 18px;
}

.Focus_HrefDockItem {
	display: inline-block;
	text-decoration: none;
	font-family: Verdana;
		color: white;
}

.Focus_HrefDockItem:hover {
	text-shadow: 2px 2px 2px green;
	color: #00FF00;
}

.IconDockItem {
	width: 20px;
	height: 20px;
	-webkit-filter: drop-shadow(1px 1px 2px #111);
	filter: drop-shadow(1px 1px 2px #111);
	position: relative;
	top: 3px;
}

.button_view_nofocus {
	width: 32px;
	height: 32px;
  filter: drop-shadow(1px 1px 0px #ccc);
  filter: drop-shadow(-1px -1px 0px #ccc);
}

.button_view_nofocus:hover {
	position: relative;
	filter: invert(1) drop-shadow(0px 0px 2px black);
	transform: scale(1.2);
}

.button_view_focus {
	width: 32px;
	height: 32px;
	transition: transform .2s;
}

.button_view_focus:hover {
	position: relative;
	-webkit-filter: invert(1) drop-shadow(0px 0px 2px black);
	filter: invert(1) drop-shadow(0px 0px 2px black);
	transform: scale(1.2);
}

.display-on-mobile {
	display: none;
}

.hide-on-mobile {
	display: inline;
}
