ul {
list-style-type:disc;
}

td {
font-family:arial,verdana,helvetica;
font-size:1rem;
}

td.teksto {
font-family:arial,verdana,helvetica;
font-size:1rem;
margin-left:5px;
margin-right:5px;
}

p {
font-family:arial,verdana,helvetica;
font-size:1rem;
margin-left:5px;
}

p.formata {
font-size:0rem;
}

p.granda {
font-family:arial,verdana,helvetica;
font-size:2rem;
color:#AFB8BF;
font-weight:bold;
margin-top:0;
margin-bottom:0;
margin-left:5px;
}

p.malgranda {
font-family:arial,verdana,helvetica;
font-size:1rem;
color:black;
font-weight:bold;
margin-top:0;
margin-bottom:0;
margin-left:5px;
}

p.kanzonoj {
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
font-weight:normal;
margin-left:5px;
}

p.rekanto {
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
font-style:italic;
margin-left:10px;
}

ul.menuo {
font-family:arial,verdana,helvetica;
/*font-size:0.875rem;*/
font-weight:bold;
margin-right:10px;
margin-left:-25px;
text-align:right;
line-height:150%;
list-style-type:none;
}

li.menuo {
margin-top: 1.5rem;
}

li.senbilda {
list-style:none;
}

ul.lingvoj {
font-family:arial,verdana,helvetica;
font-weight:normal;
margin-left:-15%;
text-align:left;
line-height:165%;
list-style-type:none;
}

ul.ligiloj {
font-family:arial,verdana,helvetica;
font-size:0.75rem;
font-weight:normal;
}

li.elshuto {
margin-top:1rem;
}

li.ligiloj {
margin-top:1rem;
}

span.novajhoj_titolo {
font-weight:bold;
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
}

span.novajhoj_enhavo {
font-weight:normal;
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
}

p.novajhoj {
margin-top:0.5rem;
margin-bottom:0;
margin-left:5px;
margin-right:5px;
}

p.kopirajto {
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
margin-top:0;
margin-bottom:0;
text-align:center;
}

p.tradukinto {
font-family:arial,verdana,helvetica;
font-size:0.75rem;
color:black;
margin-top:2px;
margin-bottom:0;
text-align:center;
}


td.griza {
background-color:#D0D8DF;
}

td.dividilo {
background-color:#D0D8DF;
height:0.3rem;
}

td.flanko {
background-color:#D0D8DF;
}

td.chefa_enhavo {
background-color:white;
}

td.kolumneto {
background-color:#D0D8DF;
}

td.novajhoj {
border-top-style:transparent;
border-right-style:transparent;
border-bottom-style:transparent;
border-left-style:dotted;
border-width:thin;
height:100%;
}

@media screen and (min-width: 1000px) {
/* start of desktop styles */
#chefa_tablo {
	width: 1000px;
	margin: auto;
}


#piedo_flanko, #lingvo_flanko {
 width: 15%;  
 height:100%;
 vertical-align: top;
 background-color: #D0D8DF;
}

#enhavo {
 width: 70%;
 vertical-align: top;
}

#menuo_butono, #lingvoj_butono {
	width: 0%;
	display: none;
}

#chefa_bildo {
	width: 100%; 
	color: #AFB8BF;
	text-align: center;
	letter-spacing: -2px;
	font-size: 70px; 
	line-height: 75%;
	text-shadow: 1px 1px 5px white;
	font-weight:bold;
	vertical-align: center;
	
	}
}


@media screen and (max-width: 999px) {
/* start of phone styles */



 /* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #D0D8DF; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    font-size: 1rem; /* 25px */
}

/* The sidebar links */
.sidebar a {
  padding: 0.1em 0.1em 0.1em 0.5rem;
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar {
  position: absolute;
  top: 75px;
  left: 0px;
  margin-left: 0px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 30px;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 7px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 0px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) 
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 10px;}
  .sidebar a {font-size: 0.8rem;}
  .sidebar_lingvoj {padding-top: 10px;}
  .sidebar_lingvoj a {font-size: 0.8rem;}
} 
*/

 /* The sidebar menu */
.sidebar_lingvoj {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: relative; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: #D0D8DF; 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px; /* Place content 60px from the top */
  /* padding-left: 5px; */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */

}

/* The sidebar links */
.sidebar_lingvoj a {
  /* padding: 0.1em 0.1em 0.1em 0.5rem; */
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar_lingvoj a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar_lingvoj {
  position: absolute;
  top: 75px;
  right: 0px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn_lingvoj {
  font-size: 2rem;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 10px 15px;
  border: none;
  float: right;
}

.openbtn_lingvoj:hover {
  background-color: #444;
}



/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#lingvoj {
  transition: margin-right .5s; /* If you want a transition effect */
  /* padding: 20px; */
}


#chefa_tablo {
	margin: auto;
}

html {
	font-size: 1rem;
}

#piedo_flanko, #lingvo_flanko {
 width: 0%;  
 height:100%;
 vertical-align: top;
 background-color: #D0D8DF;
}

#enhavo {
 width: 100%;
 vertical-align: top;
}

#menuo_butono {
	vertical-align: center;
	/* width: 10%; */
	float: left;
}

#lingvoj_butono {
	vertical-align: center;
	/* width: 20%; */
	float: right;
}

#chefa_bildo {
	/* width: 70%;  */
	color: #AFB8BF;
	text-align: center;
	letter-spacing: -2px;
	font-size: 64px; 
	line-height: 75%;
	/* white-space: nowrap; */
	text-shadow: 1px 1px 5px white;
	font-weight:bold;
	vertical-align: center;
	
	}

}
@media screen and (max-width: 767px) {
/* start of phone styles */



 /* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #D0D8DF; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    font-size: 1rem; /* 25px */
}

/* The sidebar links */
.sidebar a {
  padding: 0.1em 0.1em 0.1em 0.5rem;
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar {
  position: absolute;
  top: 75px;
  left: 0px;
  margin-left: 0px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 30px;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 7px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 0px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) 
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 10px;}
  .sidebar a {font-size: 0.8rem;}
  .sidebar_lingvoj {padding-top: 10px;}
  .sidebar_lingvoj a {font-size: 0.8rem;}
} 
*/

 /* The sidebar menu */
.sidebar_lingvoj {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: relative; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: #D0D8DF; 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px; /* Place content 60px from the top */
  /* padding-left: 5px; */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */

}

/* The sidebar links */
.sidebar_lingvoj a {
  /* padding: 0.1em 0.1em 0.1em 0.5rem; */
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar_lingvoj a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar_lingvoj {
  position: absolute;
  top: 75px;
  right: 0px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn_lingvoj {
  font-size: 2rem;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 10px 15px;
  border: none;
  float: right;
}

.openbtn_lingvoj:hover {
  background-color: #444;
}



/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#lingvoj {
  transition: margin-right .5s; /* If you want a transition effect */
  /* padding: 20px; */
}


#chefa_tablo {
	margin: auto;
}

html {
	font-size: 1rem;
}

#piedo_flanko, #lingvo_flanko {
 width: 0%;  
 height:100%;
 vertical-align: top;
 background-color: #D0D8DF;
}

#enhavo {
 width: 100%;
 vertical-align: top;
}

#menuo_butono {
	vertical-align: center;
	/* width: 10%; */
	float: left;
}

#lingvoj_butono {
	vertical-align: center;
	/* width: 20%; */
	float: right;
}

#chefa_bildo {
	/* width: 70%;  */
	color: #AFB8BF;
	text-align: center;
	letter-spacing: -2px;
	font-size: 48px; 
	line-height: 75%;
	/* white-space: nowrap; */
	text-shadow: 1px 1px 5px white;
	font-weight:bold;
	vertical-align: center;
	
	}

}

@media screen and (max-width: 560px) {
/* start of medium tablet styles */



 /* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #D0D8DF; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
    font-size: 1rem; /* 25px */
}

/* The sidebar links */
.sidebar a {
  padding: 0.1em 0.1em 0.1em 0.5rem;
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar {
  position: absolute;
  top: 75px;
  left: 0px;
  margin-left: 0px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 30px;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 7px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 0px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) 
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 10px;}
  .sidebar a {font-size: 0.8rem;}
  .sidebar_lingvoj {padding-top: 10px;}
  .sidebar_lingvoj a {font-size: 0.8rem;}
} 
*/

 /* The sidebar menu */
.sidebar_lingvoj {
  height: 100%; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: relative; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  right: 0;
  background-color: #D0D8DF; 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 10px; /* Place content 60px from the top */
  /* padding-left: 5px; */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */

}

/* The sidebar links */
.sidebar_lingvoj a {
  /* padding: 0.1em 0.1em 0.1em 0.5rem; */
  text-decoration: none;
  color: blue;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar_lingvoj a:hover {
  color: #444;
}

/* Position and style the close button (top right corner) */
.sidebar_lingvoj {
  position: absolute;
  top: 75px;
  right: 0px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn_lingvoj {
  font-size: 2rem;
  cursor: pointer;
  background-color: #888;
  color: white;
  padding: 10px 15px;
  border: none;
  float: right;
}

.openbtn_lingvoj:hover {
  background-color: #444;
}



/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#lingvoj {
  transition: margin-right .5s; /* If you want a transition effect */
  /* padding: 20px; */
}


#chefa_tablo {
	margin: auto;
}

html {
	font-size: 1rem;
}

#piedo_flanko, #lingvo_flanko {
 width: 0%;  
 height:100%;
 vertical-align: top;
 background-color: #D0D8DF;
}

#enhavo {
 width: 100%;
 vertical-align: top;
}

#menuo_butono {
	vertical-align: center;
	/* width: 10%; */
	float: left;
}

#lingvoj_butono {
	vertical-align: center;
	/* width: 20%; */
	float: right;
}

#chefa_bildo {
	/* width: 70%;  */
	color: #AFB8BF;
	text-align: center;
	letter-spacing: -2px;
	font-size: 36px; 
	line-height: 75%;
	/* white-space: nowrap; */
	text-shadow: 1px 1px 5px white;
	font-weight:bold;
	vertical-align: center;
	
	}

}
@viewport {
	zoom: 1.0;
	width: extend-to-zoom;
}

@-ms-viewport {
	width: extend-to-zoom;
	zoom: 1.0;
}