/* Layout general pentru content */
#content {
  display: flex; /* Activează Flexbox */
  justify-content: flex-start; /* Aliniază elementele la stânga */
  align-items: flex-start; /* Aliniază elementele la partea de sus */
  gap: 20px; /* Spațiu între coloane */
  margin: 20px; /* Spațiu față de marginea paginii */
}

/* Coloana stângă: Meniul */
#left {
  width: 25%; /* Lățimea coloanei stângi */
  background-color: blue;
  padding: 1px;
  box-sizing: border-box; /* Include padding-ul în dimensiunea totală */
  height: 100%; /* Asigură că întreaga coloană ocupă 100% din înălțimea disponibilă */
  background-color: blue; /* Fundal lightblue pentru fiecare element de meniu */
  position: relative; /* Permite mutarea elementului în raport cu poziția sa curentă */
  left: -10px; /* Mută meniul cu 10px față de marginea stângă a paginii */
  text-align: left; /* Aliniază textul la stânga */
}

/* Coloana dreaptă: Conținutul */
#right {
  width: 70%; /* Lățimea coloanei drepte */
  background-color: #fff; /* Fundal alb */
  padding: 10px;
  box-sizing: border-box; /* Include padding-ul în dimensiunea totală */
  color: #000; /* Text negru */
  /*border: 1px solid #ccc; */ /* Linie de separare */
  border-radius: 5px; /* Colțuri rotunjite */
}

/* Stiluri pentru meniu */
#left ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 100%; /* Asigură că întreaga coloană ocupă 100% din înălțimea disponibilă */
}

#left li {
  height: 100%; /* Face ca fiecare element să se întindă pe întreaga înălțime disponibilă */
  display: flex;
  flex-direction: column; /* Permite extensia verticală a elementelor */
  justify-content: space-between; /* Permite elementelor să se extindă până la linia următoare */
}





#left a {
  color: #306EFF; /* Albastru pentru textul din meniu */
  text-decoration: none;
}

#left a:hover {
  text-decoration: none;
  color: #FFFF00; /* Schimbă culoarea textului la galben la hover */
}

#left hr {
  margin: 1px 0;
  border: none;
  border-top: 1px solid white;
}





*{ margin: 0; padding: 0; }*
body { font: 1em Arial, Sans-Serif; line-height: 1.8em; background: #333; color: #444; }
a {COLOR: #306EFF; margin: 10px; text-decoration: none; }                        //#FF7A09;   #FFA500 meniu deplasat 10px
a:visited {COLOR: #306EFF; text-decoration: none;}
a:hover {COLOR: #FFFF00; text-decoration: underline;}   //COLOR: #333
h2 { margin: 0 0 10px; padding: 10px 0 3px; }
h3 { padding-left: 10px; color: #fff; background: #306EFF; font-size: 1em; height: 24px; line-height: 24px; }   //#FE7B09 url(images/bg.jpg) repeat-x


ul {  padding: 0; margin: 0 0 10px;}
li {list-style-type: none; background: #B0E0E6; line-height: 13px;} /*inaltimea elementelor din meniu  */




 
p { margin: 5px 0 10px 0; }
img { border: none; }

#header {
background: #306EFF;          //#FE7B09 url(images/bg.jpg) repeat-x   fundal header
height: 100px;
}
#header h1 {
font-size: 2em;
color: white;
font-weight: 100;
letter-spacing: 1px;
padding: 20px 0 5px 20px;
}
#header h1 a {
color: #fff;     
text-decoration: none;
}
#header h1 a:hover {
color: #000;
text-decoration: none;
}
#header h2 {
color: white;
font-size: 19px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}





#wrap { padding: 10px 10px 3px 10px; width: 860px; margin:20px auto; background: #fff;}   
#left { float: left; width: 180px; background: #82CAFF; margin-bottom: 10px; margin-top: 20px; border: 1px dotted #FF8B1E;} //background: #FFD8AF
#left ul { padding: 5px 10px 10px 10px; margin: 10px; }
#right { margin-bottom: 10px; float: right; width: 650px; padding: 0 10px 10px 10px; margin-top: 10px;}  //width: 550px; 
	
#footer { font-size: 11px; text-align: center; border-top: 1px solid #ccc; padding: 10px 5px; }


table.stats 
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
width:  600px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}

table.stats td 
{background-color: #82CAFF;//#FFD8AF;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;
}

table.stats td.hed
{background-color: #306EFF;// #FE7B09;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;
} 





/* Stiluri generale pentru secțiuni */
.section {
  padding: 20px;
  margin: none;  /*20px; */
  border: none;   /*1px solid #ccc; */
  font-size: 16px;
  background-color: white;
}

/* Stiluri pentru butoane */
button {
  background-color: #306EFF; /* Albastru */
  color: #fff; /* Text alb */
  font-size: 14px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

button:hover {
  background-color: #82CAFF; /* O nuanță mai deschisă de albastru */
  transform: scale(1.05); /* Efect de mărire */
}

button:active {
  background-color: #0047AB; /* O nuanță mai închisă de albastru */
  transform: scale(0.95); /* Ușor mai mic când e apăsat */
}




.section {
    padding: 10px;
    background-color: #f0f0f0;
    text-align: left;   /* Aliniere text in sectiune  */
}

.controls button {
    margin: 1px;
    padding: 5px 10px;
    font-size: 14px;
}








/*


button {
  margin: 5px;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #999;
  background-color: #f0f0f0;
  border-radius: 5px;
}

button:hover {
  background-color: #e0e0e0;
}
*/