/*--------------------------------- Header--------------------------------------*/
.header 
  {
    background-color	: green;
    color				: black;
    margin-top			: 0px;
    margin-bottom		: 0px;
    padding-bottom		: 52px;
	padding-top			: 30px;
    text-align			: center;  
  }

.header h2
  {
    color				: greenyellow;
    font-size			: 50px;
    margin-bottom		: 0px;
	margin-block-start	: 0px;
  }


				/*---------------------------------Navigation Bar--------------------------------*/

/* Style the top navigation bar */
.navbar
  {
    background-color	: orange;
    display				: flex;
    list-style-type		: none;
	width :100%;
  }

/* Style the navigation bar links */
.navbar a
  {
    color				: black;
    margin				: 0px;
    padding				: 10px 20px 10px 20px;   /*top-right-bottom-left*/
    text-decoration		: none;
    text-align 			: center;
    float				: left;
    display				: block;
  }

/* Change color on hover */
.navbar a:hover
  {
    background-color	: black;
    color				: white;
    margin				: 0px;
  }

/* Add a color to the active/current link */
.active 
  {
    background-color	: red;
    color				: white;
  }


/* Hide the link that should open and close the topnav on small screens */
.navbar .icon 
  {
    display				: none;
  }

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky
  {
    position			: fixed;
    top					: 0px;
    left				: 8px;
    right				: 8px;
  }

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content
  {
    padding-top			: 60px;
  }

/* Style the search box inside the navigation bar--NOT in the typing area (outside it) */
.navbar .search-container
  {
    padding				: 4px 0px 0px 0px;
    margin				: 0px 0px 0px 0px;
    background			: white;
    font-size			: 10px;
    border				: solid;
    border-width		: 5px;
    border-color		: orange;
    cursor				: pointer;
    border-radius		: 12px;
  }

/* Style the search box inside the navigation bar--inside the typing area */
.navbar input[type=text]
  {
    padding				: 0px 0px 0px 10px;  
    margin				: 0px 0px 0px 0px;
    font-size			: 20px;
    background-color	: white;
    border				: none;
    border-width		: 0px;
    border-color		: orange;
    border-radius		: 12px;
  }

/* Style the search icon inside the navigation bar */
.navbar .search-container button
  {
    padding				: 0px 10px 0px 0px;
    margin				: 0px 0px 0px 0px;
    background			: white;
    font-size			: 20px;
    border				: none;
    cursor				: pointer;
    border-radius		: 12px;
  }

/* Background color of search icon */
.navbar .search-container button:hover
  {
    background			: white;
  }

/* Dropdown container - needed to position the dropdown content 
.dropdown 
  {
    float				: left;
    overflow			: hidden;
  }*/

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn 
  {
    font-size			: 17px;
    border				: none;
    outline				: none;
    color				: black;
    padding				: 10px 20px 10px 12px;
    background-color	: inherit;
    font-family			: inherit;
    margin				: 0;
  }

/* Style the dropdown content (hidden by default) */
.dropdown-content 
  {
    display				: none;
    position			: absolute;
    background-color	: pink;
    min-width			: 113px;
    box-shadow			: 10px 8px 16px 10px rgba(0,5,0,0.2);
    z-index				: 1;
  }

/* Style the links inside the dropdown */
.dropdown-content a 
  {
    float				: none;
    color				: black;
    padding				: 10px 20px 10px 19px;
    text-decoration		: none;
    display				: block;
    text-align			: left;
    /*white-space		: nowrap;*/
  }

/* Add a background color on the dropdown button on hover */
.dropdown:hover .dropbtn
  {
    background-color	: black;
    color				: white;
  }

/* Add a background to dropdown links on hover */
.dropdown-content a:hover 
  {
    background-color	: black;
    color				: white;
  }

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content 
  {
    display				: block;
  }

						/*----------------- For small screens -------------------*/

/*stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px)
  {
    .navbar a, .navbar input[type=text] 
      {
        float			: none;
        display			: block;
        text-align		: left;
        width			: 100%;
        margin			: 0px;
        padding			: 14px;
      }
    .navbar input[type=text]
      {
        border			: 2px solid black;
      }

/*hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
    .navbar a:not(:first-child), .dropdown .dropbtn
      {
        display			: none;
      }
    .navbar a.icon
      {
        float			: right;
        display			: block;
      }

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
    
    .navbar.responsive
      {
        position		: relative;
      }
    .navbar.responsive .icon
      {
        position		: absolute;
        right			: -97%;
      }
    .navbar.responsive a 
      {
        float			: none;
        display			: block;
        text-align		: left;
      }
    .navbar.responsive .dropdown-content
      {
        position		: relative;
      }
    .navbar.responsive .dropdown .dropbtn
      {
        float			: none;
        display			: block;
        width			: 100%;
        text-align		: left;
      }
  }

					/*------------------------------------The middle panel--------------------------------*/


/* Column container */
.row
  {  
    width				: 100%;  
    display				: flex;
    flex-wrap			: wrap;
  }

/* Create two unequal columns that sits next to each other */
/* Left column */
.side
  {
    flex				: 70%;
    background-color	: springgreen;
    padding				: 10px;
    overflow			: hidden;
  }

/* Main column */
.main
  {
    flex				: 20%;
    width				: 100%;
    background-color	: springgreen;
    padding				: 10px;
    overflow			: hidden;    
  }

/* images */
/*.image
  {
    max-width			: 100%;
    height				: auto;
  }*/

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
  {
    .row, .navbar
      {   
        flex-direction	: column;
      }
  }

					/*------------------------------------The footer panel--------------------------------*/

/* Footer */
.footer
  {
    background			: white;
    /*padding				: 50px;*/
	/*padding-bottom	: 50px;*/
	/*padding-left		: 50px;*/
	/*padding-right		: 50px;*/
	/*padding-top		: 50px;*/
    text-align			: center;
   /* position			: fixed;*/
    left				: 8px;
    right				: 8px;
    bottom				: 0px;
    color				: white;
    height				: 180px;
 
  }

					/*------------------------------------Output table--------------------------------*/


table.center 
  {
    margin-left			: auto;
    margin-right		: auto;
    margin-top			: 30px;
    margin-bottom		: 50px;
  }

table
  {
    /*table-layout		: auto;*/
    font-family			: arial, sans-serif;
    border				: 0px solid black;
    border-collapse		: collapse;
    padding				: 20px;
    text-align			: center;
  width				: 100%;
	
  }

th 
  {
    background-color	: lightblue;
    color				: blue;
  }

tr:nth-child(even) 
  {
    background-color	: lightgreen;
  }
tr:nth-child(odd) 
  {
    background-color	: lightgrey;
  }
					/*------------------------------------Pagination buttons--------------------------------*/



.pagination
  {
    color				: black;
    display				: flex;
    list-style-type		: none;
    background-color	: white;
    text-align			: center;
    justify-content		: center;   /*for center alignment*/
    align-items			: center;
    margin-top			: 10px;
    margin-left			: 0;
    padding				: 0;
  }

.pagination a
  {
    color				: black;
    float				: center;
    padding				: 0px 10px;
    text-decoration		: none;
    border				: 1px solid black;
    font-size			: 25px;
    display				: block;
  }

/* Changes text color and background color on mouse-over */
.pagination a:hover:not(.active) 
  {
    background-color	: red;
    color				: black;
  }

li
  {
    float				: left;
  }