/* This is the master CSS control sheet. CSS styles are used so nobody has to go thru an HTML document and modify shit individually in the HTML file to make a global change to colors, fonts, text, etc. It is much simpler to have this than to do formatting in HTML, because HTML is BAD at formatting, which is ironically what it was designed to do. I will explain the CSS style properties in this file, and then you can look at the heavily commented PHP file which came with this to see how we implement CSS on the page.*/


/*these styles are positioning elements, in this case positioning is 'absolute' meaning that within the containing element(tag, such as a DIV, a P or just the BODY itself) it is placed according to the left, right, top and/or bottom values. In the case of our right-corner-logo style, it's 0 pixels from the top and 0 pixels left, meaning it's ALWAYS in the top left and won't move. You get the idea, it's the same for the header and menus, content, etc. If we wanted to center it, as you suggested, we can enclose these things in a centered DIV and they'll be relative to the DIV(centered) instead of the default of the BODY. I'll discuss that in a sec.*/

/* Also note, these are "ID styles" where it's set via an ID attribute in the HTML. ID styles have a "#" in front of them. ID styles are used for positioning elements, usually elements that're only used once. This is shown in example in the index-EXPLAINED.php document which came with this, as that's kind of vague without seeing it and going 'oh' */

#right-corner-logo-old {
    position:absolute;
    left:0px;
    top:0px;
    width:162px;
    height:165px;
}

#main-header-old {
    position:absolute;
    left:180px;
    top:0px;
    width:420px;
    height:136px;
}


#slogan-old {
    position:absolute;
    left:180px;
    top:136px;
    width:420px;
    height:29px;
}

#content-old {
    position:absolute;
    left:180px;
    top:186px;

}

#left-navbar-old {
    position:absolute;
    left:10px;
    top:186px;
    
}

#right-navbar-old {
    position:absolute;
    left:660px;
    top:186px;
    
}


/* Now, those are old-ass absolutely positioned styles we don't want to use anymore if we're going to center the whole thing. We need relative positioning, not exact pixels from the sides of the browser, and saying 'in the damn center' is pretty relative to me. See below, and note they don't have 'old' appended to their names. */


#right-corner-logo {
    position:absolute;
    left:0px;
    top:0px;
    width:162px;
    height:165px;
}

#main-header {
    position:absolute;
    left:180px;
    top:0px;
    width:420px;
    height:136px;
}


#slogan {
    position:relative;
    left:180px;
    top:136px;
    width:420px;
    height:29px;
}

#content {
    position:absolute;
    left:180px;
    top:186px;

}

#left-navbar {
    position:absolute;
    left:10px;
    top:186px;
    
}

#right-navbar {
    position:absolute;
    left:660px;
    top:186px;
    
}

/* To center the DIV, thus centering all the content, we have to create a style for it. If we auto margin it, and set the width in pixels, it plops it nicely in the center. relative positioning helps it be dynamic, too. Absolute positioning would look all sorts of fucked up. */

#centor {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
}



/*these are styles applied to certain elements, like tables. They control things like borders, in the case of table.nav, the border is our dashed style, with no border at the top, none at the bottom or the right, basically, it just sets a border on the left side of the element which is 2 pixels wide, and is red(#FF0000)*/

/*Our side menus are these styles, ya know, with teh borders on the apropos side. */

table.nav 
{

background-color: #FFFFFF;
border-style: dashed;
border-top: none;
border-bottom: none;
border-right: none;
border-width: 2px;
border-color: #FF0000;


} 

table.nav2 
{

background-color: #FFFFFF;
border-style: dashed;
border-top: none;
border-bottom: none;
border-left: none;
border-width: 2px;
border-color: #FF0000;


} 


/* recognize our main table? Note that we set the font on the main table(since we know we're putting text in it) and the color, size and weight(bold) of the font as well. Here is where you will change the BG color for the table of main content, and below that, the other tables for menus, etc. Guess which parameter you have to change? haha*/


table.main {

background-color: #FFFFFF;

border-style: dashed;
border-bottom:none;
border-top:none;
border-width: 2px;
border-color: #FF0000;

font-family: Tahoma;
font-weight: lighter;
font-size: 10pt;
}



/* the table used for editing in the mgt console */


table.edit{ 
background-color: #000000;
border-style: solid;
border-width: 2px;
border-color: #FF0000;
color: #FFFFFF;
font-family: courier, sans-serif;
font-weight: lighter;
font-size: 10pt;
} 



/* here's where we define some style for text elements and that HR line thingy. Easy enough, right? */

hr {
border-style: dashed;
color: #FF0000;
}


/* used for the datestamp */

h1.date{
font-family: tahoma;
font-size: 12pt;
color: #000000;
}

/* used for the mgt console */

h1.manage{
font-family: sans-serif;
font-size: 14pt;
color: #FFFFFF;
}



/* used for the content area on teh page */


h1.main{
font-family: tahoma;
font-size: 18pt;
letter-spacing: 10px;
color: #000000;
}


/* Here, we set ABSOLUTE defaults. If you use any H1, for example, it uses the default properties below, unless specified otherwise. If we wanted to use a different style, we'd use, say, h1.main. Setting styles IN HTML will be discussed in a sec */

h1{
font-family: tahoma;
font-size: 18pt;
color: #000000;
}



h2{
font-family: tahoma;
font-size: 14pt;
color: #000000;
}



h3{
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}


h4{
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 16pt;
color: #000000;
}



h5{
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 10pt;
color: #000000;
}

/* get it so far? we just set defaults for all the various "H"s above, and now we set a special H5 below. Again, I'll show how to use non-default styles in a bit */


h5.smalltext{
font-family: "courier new", courier, sans-serif;
font-size: 8pt;
font-weight: lighter;
color: #99CCFF;
}



/* some image styles, for various purposes. Mostly flair, like fx2, with its dotted border. These were made so you caould have fun with images by assigning them some style and class. Dotted borders and other crazy*/


img.fx{
border-width: 2px;
border-color: #FF0000;
}

img.fx2{
border-width: 2px;
border-style: dotted;
border-color: #FFFFFF;
}

img.fx3{
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}


/* setting default text modifiers. Bolds, underlines, lists, etc */

b{

font-weight: bold;

color: #000000;
}

ul {
color: #FF0000;
border-color: #000000;
}

ol {
color: #FF0000;
border-color: #000000;
}



/* setting link properties for active, visited and unvisisted. They have been changed to blue, as requested. */


a:active{
text-decoration: none;

font-family: "courier new", courier, sans-serif;
font-weight: bolder;
font-size: 10pt;
color: #CC0000;
}

a:visited{
text-decoration: none;

font-family: "courier new", courier, sans-serif;
font-weight: bolder;
font-size: 10pt;
color: #CC0000;
}

a:link{

text-decoration: none;
font-family: "courier new", courier, sans-serif;
font-weight: bold;
font-size: 10pt;
color: #FF0000;
}