/* 

Goals: have several different theams that end users can choose from
-green theme that looks like a datapoint 2200
-coders format where keywords are highlighted in different colors, numbers, special characters
-boring standard whie back ground with black/blue text
-night mode

*/


h11 /* traditional Header */
{
color: #00ff3c;
border: 0px solid black;
border-width: 0px;
font-size: 18px;
display: inline;
}

h1 /* my header with a border*/
{
    color: #ffb300;
    font-size: 24px;
    display: inline-block;
    width: 100%;
    height: 20px;
    margin: 0px;
    background-color: rgb(23, 23, 23);
    text-align: Left;
    line-height: 20px; /* Vertically center text */
}



.red-text {
  color: red;
}
.blue-text {
  color: blue;
}
.green-text {
  color: green;
}
.yellow-text {
  color: rgb(251, 255, 0);
}
.orange-text {
  color: rgb(255, 213, 0);
}
.purple-text {
  color: rgb(124, 0, 128);
}
/*    to call these colors use this in HTML file
<p class="red-text">This paragraph text is red.</p>
<p class="blue-text">This paragraph text is blue.</p>
<p class="green-text">This paragraph text is green.</p>

-- this is better for coloring text in the middle of a sentance.  the code above adds carriage returns.
 <span style="color: blue;">blue text</span> 
*/


/*---------------this causes issues--------------------------------------------------------------------*/
/*all of the text is red in the current version of the CSS.  i need a 2nd and 3d color to explain a top*/
h2 /* Orange Basic Header */
{
    color: #00b3ff;
    font-size: 18px;
    display: inline-block;
}

h3 /* Orange Basic Header */
{
    color: #e100ff;
    font-size: 18px;
    display: inline-block;
}
/*-----------------------------------------------------------------------------------*/


.h1 /* Orange Basic Header */
{
color: #FF9900;
font-size: 18;
}



.h2
{
    color: #FFFF66;
    font-size: 16;
}

.style1 /* Light Blue Basic Font */
{
    color: #0099FF;
    font-size: 14;
}
              
.style2
{
color: #FF9900;
font-size: large;
}
        
.style3
{
color: #FF9900;
font-size: 16;
}

.style4
{
    color: #FF0000;
    font-size: 18;
}

/*i think this is where i started working on making the text the color of code*/

.text { color: #00C0FF; background-color: #000000; }
.keyword1 { color: #FFFF00; background-color: #000000; }
.keyword2 { color: #FFCC99; background-color: #000000; }
.keyword3 { color: #FFCC99; background-color: #000000; }
.comment { color: #808080; background-color: #000000; }
.number { color: #FF0000; background-color: #000000; }
.string { color: #FF00FF; background-color: #000000; }
.urn { color: #3366FF; background-color: #000000; }
.bracket { color: #00FF00; background-color: #000000; }
.operator { color: #FF9900; background-color: #000000; }


/* 
----------------- E L E M E N T S ------------------------
This sets the page background as black i think that when i 
set the vaule here it is a global value.  meaning i don't 
have to go to my File and Say import the body tag.  
 */
body
{
    background-color: #000000;
    color: #ff0000; /* all text will be blue by default */
    font-size: 20; /* all text will be size 16 by default */  /*if i change the font size its not working*/
}




a {font-family:Monaco,Consolas,serif; font-size:16}
a:link{color: #00FF00;}
a:visited
{
    color: #009933;
}
a:hover
{
    text-decoration: none;
    color: #66FF33;
    font-weight: bold;
}
a:active {color: red;text-decoration: none}