/* Declarations */
:root	{ --adwin-green-color: #319C00;
        --adwin-yellow-color: #FFEF29;
        --qt-green-color: #3fc74f;
        --qt-yellow-color: #FFFFFF;
        --std_text_color: black;
        --std-font: 12px verdana;
        --std-text-font: 14px verdana;
        --menu-font: 18px verdana;	}

/* The basics */
*	{ padding: 0;
    margin: 0;
    background-color: white; }
body { z-index: 10;
       font: var(--std-text-font);
       color: var(--std_text_color); }
p	{	font: var(--std-text-font);
    color: var(--std_text_color); }
a	{ color: var(--qt-green-color); }
h1 { font: var(--std-text-font);
     color : red;
     display: block;
     font-size: 1.5em;
     margin-top: 0.67em;
     margin-bottom: 0em;
     margin-left: 0;
     margin-right: 0;
     font-weight: bold;
     text-decoration: underline;}
h2 { font: var(--std-text-font);
     color: red;
     display: block;
     font-size: 1.17em;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0;
     font-weight: bold;
     text-decoration: underline; }
h3 { font: var(--std-text-font);
     color: var(--std_text_color);
     display: block;
     font-size: 1.0em;
     margin-left: 3em;
     margin-right: 0;
     color: red;
     font-weight: bold;
     text-decoration: underline; }
h4 { font: var(--std-text-font);
     color: var(--std_text_color);
     display: block;
     font-size: 1.0em;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 0;
     margin-right: 0;
     font-weight: bold;
     text-decoration: underline; }

img { vertical-align: middle;	}

/* some text styles */
.text	{	display: block;
        font: var(--std-text-font);
        margin: 10px;
        color: var(--std_text_color);	}
.text a {	color: red; }
.code	{	font: 16px courier;	color: white; background-color: black; width: 90%; margin: auto; }
.codenano	{	font: 16px courier;	color: yellow; background-color: black; width: 90%; margin: auto; }
.codesql	{	font: 16px courier;	color: Cyan; background-color: black; width: 90%; margin: auto; }
.codecpp	{	font: 14px courier;	color: yellow; background-color: navy; width: 90%; margin: auto; }
.codecpp1	{	font: 14px courier;	color: Lime; font-weight: bold; background-color: navy; width: 100%; margin: auto; }
.codebold	{	color: yellow;	font-weight: bold; background-color: grey; }
.textboldunderline { font: var(--std-text-font); color: var(--std_text_color); font-weight: bold;	text-decoration: underline;	}
.note	{	color: red; background-color: white; width: 90%; padding: 10px; margin: auto; border: 1px solid;}
.classtitle { font: var(--std-text-font); color: var(--std_text_color); display: block; font-size: 1.3em; margin-left: 0;  margin-right: 0; color: var(--qt-green-color); font-weight: 600; text-decoration: underline;	}
.classtopic { font: var(--std-text-font); color: var(--adwin-green-color); font-size: 1.3em; margin-left: 10px; font-weight: 600; text-decoration: underline;	}
.classsubtopic { font: var(--std-text-font); font-size: 1em; margin-left: 30px; text-decoration: underline;	}
.targettopic { font: var(--std-text-font); font-size: 1.3em; background-color: grey; color: var(--adwin-yellow-color); width: 96%; margin: auto; padding: 8px;}
.setter_getter { font: var(--std-text-font); font-size: 1em; color: black; font-weight: 600;	}
.leftcolfunc { text-align: right; border: none; font: 13px Lucida Console;	}
.rightcolfunc { width: 90%; text-align: left; border: none; font: 13px Lucida Console; }
.functable	{	font: 14px courier;	width: 90%; margin-right: auto; margin-left: auto; border: none; font: 13px Lucida Console; }
.func { font: Lucida Console; color: red; display: block; font-size: 0.9em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; }
/* The standard button */
.button { background-color: red;
          color: white;
          font: white;
          font-weight: bold;
          padding: 8px 32px;
          text-align: center;
          text-decoration: none;
          display: block;
          border: solid 2px;
          border-color: red;
          border-radius: 8px;
          width: 150px; }
.button:hover { background-color: white;
                color: red;
                border: solid 2px; }

/* Main dividers to organize stuff in pages */
.content { float: none;
           width: 1024px;
           height: 100%;
           margin: auto;
           padding-top: 5px;
           padding-bottom: 5px;
           margin-top: 5px;
           margin-bottom: 5px;
           z-index: 10;
           overflow: hidden;
           border: 1px solid red;
           border-top: none; }
.content-container { box-sizing: border-box;
                     max-width: 1024px;
                     position: relative;
                     margin: auto;
                     border: none;
                     font: var(--std-text-font);
                     color: var(--std_text_color);;	}
.content-box { box-sizing: border-box;
               max-width: 1024px;
               position: relative;
               margin: auto;
               font: var(--std-text-font);
               color: var(--std_text_color);	}

/* Header styles : For the Banner and Top Main Navigation Menu */
/* topheader : Applied to the HTML 'header' tag. Center the banner in the screen and make it 1024 pixels wide. Add a 1 pixel border to the right to mkae sure we are aligned with elemetns at the bottom of the tag */
.topheader { float: none;
            width: 1024px;
            margin: auto;
            background-color: white; }
/* A small separator between the banner and the top main menu */
.sep { float: none;
       width: 1024px;
       height: 5px;
       margin: auto;
       background-color: white; }
/* navcontainer :  Applied to the HTML 'nav' tag. This tag holds the top navigation main menu. */
.navcontainer {	position: relative;
                float: left;
                z-index: 50;
                background-color: white;
                border-top: 1px solid red;
                border-bottom: 1px solid red;
                border-right: 1px solid red;
                font: var(--menu-font);	}

.grid-container {	display: grid;	grid-template-columns: 15% 85%; }
.grid-container > div {	text-align: left;	}

/* The styles for main top menu */
#nav {padding:0; margin:0; width: 1024px; margin: auto; list-style:none; height:30px; position: relative; background-color:white; position:relative; z-index:500; font: var(--std-font); font-size: 16px; }
#nav li a.top_link {display:block; float:left; height:30px; line-height:30px; color:red; text-decoration:none; padding:0 0 0 0px; cursor:pointer; background-color:white; border-left: 1px solid red;}
#nav li.top {display:block; float:left;}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:30px; background-color:white;}
#nav li a.top_link span.down {float:left; display:block; padding:0 6px 0 6px; height:30px; background-color:white;}

#nav li a.top_link:hover {color:#fff; background-color:red;}
#nav li a.top_link:hover span {background-color:red;}
#nav li a.top_link:hover span.down {background-color:red;}

#nav li:hover > a.top_link {color:white; background-color:red;}
#nav li:hover > a.top_link span {background-color:red;}
#nav li:hover > a.top_link span.down {background-color:red;}

/* Default list styling */
#nav li:hover {border-left: 1px solid red;  position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:30px; background: red; border:1px solid red; border-left:5px solid red;  white-space:nowrap; width:auto; height:auto; z-index:300; font: var(--std-font); color:red; font-size: 16px; }
#nav li:hover ul.sub li
{display:block; height:30px; position:relative; float:left; width:auto; background: red;}
#nav li:hover ul.sub li a
{display:block; height:30px; width:auto; line-height:30px; text-indent:5px; color:#000; text-decoration:none; color:red; }
#nav li:hover ul.sub li a:hover
{color:white; background-color:red;}
#nav li:hover ul.sub li a.fly:hover
{color:white; background-color: red;}
#nav li:hover ul li:hover > a.fly {background-color:white; color:red;}
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:10px; top:-4px; background: #fff; border:1px solid red; border-left:5px solid red;  white-space:nowrap; width:120px; z-index:400; height:auto;}

/* Footer styles : To hold the logo, the links to legal informations and the button to scroll to the top of the page when the user scrolled down the page */
/* The push style is applied to an empty HTML div to make sure nothing from the page could be placed under the footer itself */
.push { height: 70px;
        clear: both; }
/* This style places the footer at the bottom of the page */
.footerWrap	{ width:100%;
              position:fixed;
              bottom: 0px;
              height: 60px; }
/* This style centers horizontally the footer in the page */
.footer	{ width:1024px;
          margin:auto; }
/* This is the style of the footer itself */
.footerContent { float:left;
                width:100%;
                height: 80px;
                background-color: white;
                border: 1px solid red;
                border-top: 4px solid red; }
/* Style for test in the footer */
.footer p	{ text-align:center;
            font: var(--std-font);
            background-color: rgba(255, 255, 255, 0);
            float:left;
            width:100%;	}
/* The style of the one and only one Home button used to scroll back to the top of the page. Located to the right end of the footer */
#homebutton {float: right;
             display: none;
             position: relative;
             bottom: 35px;
             right: 10px;
             width: 40px;
             height: 40px;
             z-index: 99;
             background-color: white;
             cursor: pointer;
             border-radius: 5px;
             border-color: red; }

.pagetitle {
  background-color: red;
  color: var(--qt-white-color);
  font: var(--std-text-font);
  font-size: 1.4em;
  font-weight: bold;
  padding: 6px 0px;
  margin-bottom: 0px;
  text-align: center;
  text-decoration: none;
  display: block;
  border: solid 2px;
  border-bottom: solid 1px;
  border-color: var(--qt-white-color);
  width: 100%;
}

.pagesubtitle {
  background-color: white;
  color: red;
  font: var(--std-text-font);
  font-weight: bold;
  font-size: 1.2em;
  padding: 5px 0px;
  margin-bottom: 0px;
  text-align: center;
  text-decoration: none;
  display: block;
  border: solid 2px;
  border-bottom: solid 1px;
  border-color: red;
  width: 100%;
  border-radius: 8px;
}

.main {
box-sizing: border-box;
max-width: 1024px;
position: relative;
padding: 4px;
border: 1px solid red;
font: var(--std-text-font);
color: black;
border-radius: 8px;
}

table {
border-collapse: collapse;
}
th, td {
border: solid 1px;
text-align: left;
padding: 5px;
font: var(--std-text-font);
color: black;
}
th {
background-color: red;
color: var(--qt-white-color);
}