<!--
/*-----------------------------------------------------------------------
  Side bar definitions for "La Esperanza" website sidebar.

  (C) Ian C McInnes, 2015                                                 
------------------------------------------------------------------------*/

nav.sidebar
{
  position:fixed;
  overflow-y:auto; 
  height:95vh;
  width:140px;
  left:6px; 
  margin:10px;
  top:10px;
}  
/* static highlighted sidebar icons indicating current page */
nav.sidebar div.button0EN { background-image:url('Icons/C0sEN.png'); }
nav.sidebar div.button1EN { background-image:url('Icons/C1sEN.png'); }
nav.sidebar div.button2EN { background-image:url('Icons/C2sEN.png'); }
nav.sidebar div.button3EN { background-image:url('Icons/C3sEN.png'); }
nav.sidebar div.button4EN { background-image:url('Icons/C4sEN.png'); }
nav.sidebar div.button5EN { background-image:url('Icons/C5sEN.png'); }
nav.sidebar div.button6EN { background-image:url('Icons/C6sEN.png'); }
nav.sidebar div.button7EN { background-image:url('Icons/C7sEN.png'); }
nav.sidebar div.button8EN { background-image:url('Icons/C8sEN.png'); }
nav.sidebar div.button9EN { background-image:url('Icons/C9sEN.png'); }
nav.sidebar div.button0ES { background-image:url('Icons/C0sES.png'); }
nav.sidebar div.button1ES { background-image:url('Icons/C1sES.png'); }
nav.sidebar div.button2ES { background-image:url('Icons/C2sES.png'); }
nav.sidebar div.button3ES { background-image:url('Icons/C3sES.png'); }
nav.sidebar div.button4ES { background-image:url('Icons/C4sES.png'); }
nav.sidebar div.button5ES { background-image:url('Icons/C5sES.png'); }
nav.sidebar div.button6ES { background-image:url('Icons/C6sES.png'); }
nav.sidebar div.button7ES { background-image:url('Icons/C7sES.png'); }
nav.sidebar div.button8ES { background-image:url('Icons/C8sES.png'); }
nav.sidebar div.button9ES { background-image:url('Icons/C9sES.png'); }
/* sidebar icons giving links to other pages */
nav.sidebar a.button0EN { background-image:url('Icons/C0nEN.png'); }
nav.sidebar a.button1EN { background-image:url('Icons/C1nEN.png'); }
nav.sidebar a.button2EN { background-image:url('Icons/C2nEN.png'); }
nav.sidebar a.button3EN { background-image:url('Icons/C3nEN.png'); }
nav.sidebar a.button4EN { background-image:url('Icons/C4nEN.png'); }
nav.sidebar a.button5EN { background-image:url('Icons/C5nEN.png'); }
nav.sidebar a.button6EN { background-image:url('Icons/C6nEN.png'); }
nav.sidebar a.button7EN { background-image:url('Icons/C7nEN.png'); }
nav.sidebar a.button8EN { background-image:url('Icons/C8nEN.png'); }
nav.sidebar a.button9EN { background-image:url('Icons/C9nEN.png'); }
nav.sidebar a.button0ES { background-image:url('Icons/C0nES.png'); }
nav.sidebar a.button1ES { background-image:url('Icons/C1nES.png'); }
nav.sidebar a.button2ES { background-image:url('Icons/C2nES.png'); }
nav.sidebar a.button3ES { background-image:url('Icons/C3nES.png'); }
nav.sidebar a.button4ES { background-image:url('Icons/C4nES.png'); }
nav.sidebar a.button5ES { background-image:url('Icons/C5nES.png'); }
nav.sidebar a.button6ES { background-image:url('Icons/C6nES.png'); }
nav.sidebar a.button7ES { background-image:url('Icons/C7nES.png'); }
nav.sidebar a.button8ES { background-image:url('Icons/C8nES.png'); }
nav.sidebar a.button9ES { background-image:url('Icons/C9nES.png'); }
nav.sidebar a, nav.sidebar div
{
  display:block;
  width:120px;
  height:58px;
  margin-bottom:5px;
}
nav.sidebar a:hover
{
  filter:brightness(135%) contrast(85%) saturate(130%) hue-rotate(345deg);
}

/* area of scrollable section */
main
{
  position:absolute;
  margin:10px;
  width:auto;
  left:155px;
  top:0px;
}

/* following is not part of the sidebar, but put here to separate from home page */
a.spanish, a.english
{
  display:block;
  height:111px;
  width:80px;
  position:relative;
  top:10px;
}
a.spanish { background-image:url('Icons/Spanish.png'); float:right; }
a.english { background-image:url('Icons/English.png'); float:right; }
a.spanish:hover, a.english:hover { filter:brightness(135%); }
-->