/* Home Page CSS */
/* This CSS, Cascading Style Sheet, file is used in all 9 of the free     */
/* simple templates at www.bravenet.com.  Feel free to look at the        */
/* templates themselves to get an idea of how the various classes listed  */
/* here can combine to produce a wide variety of layouts.                 */
/* (Classes are the entries beginning with a '.')                         */
/* (IDs are signified by a # in the HTML code.)                           */

/* You have to take some time to learn what the different 'css box types'  */ 
/* do and when to use them. */

/* Note: The slash star combinations surround text that is to be          */
/*       marked a comment.  These just describe the CSS and are           */
/*       ignored by the browser.                                          */

/* Most, if not all, of my comments on CSS files will be in this one and  */
/* the one I call Common.css.  There is one catch. Each Style Sheet is    */
/* color specific. So they are not really universal, so to speak. At least*/
/* the ones associated with these templates. I am creating a common.css   */
/* for items that can be used in all without reguards for color... well I */
/* broke that rule right off!!  There will be some instances of color that*/
/* will, theoretically, be useable universally. Like that???              */

/* Here we are adding a 'body' selector. A selector is simply an existing */
/* HTML element tag... or a new one that you are creating. */
body    /* This is an HTML tag */
{
/* Inside these brackets we have the 'declaration block'. It */
/* will be composed of declarations. Each will contain a     */
/* 'property' and a 'value' for that property.  */
    font: 15px Verdana, sans-serif;
    background-color: #000000;
    color: #ffffff;
}
/* The above selector and declatation block are called a 'rule'. */

/* These are the font styles for the 'anchor links' that appear on your web page. */
/* Everything is the same except hover. Not sure that I like that yet. But if it  */
/* is still that way when you arrive, I accepted it. :-) */
a:link { /* signifies a link to somewhere else */
       font: bold 13px arial, sans-serif; color: #ffffff; text-decoration: none;} 
a:active { /* signifies that the link is in use */
       font: bold 13px arial, sans-serif; color: #ffffff; text-decoration: none;}
a:visited { /* signifies that we have been there */
       font: bold 13px arial, sans-serif; color: #ffffff; text-decoration: none;}
a:hover { /* this one changes the mouseover or hover state of the link */
       font: bold 13px arial, sans-serif; color: #9C6C76; text-decoration: underline;}

/* The border is one pixel (px) wide. Now it was/is listed in the 'div' of the title  */
/* but when I tried to change the size it didn't work. That was cause there was       */
/* already a 'border element' in the title defines. I commented it out in the title.  */
/* But, alas, this is learning. You can use an external element 'if you do it right.' */
/* I, therefore, put the border def back in the title declaration and made the change */
/* in the HTML page.  Check out the index.php page. */
/* See title define below */
.border     /* a class */
{
    /* this is used for all kinds of borders */
    /* be it for the whole page, or just the content section */
    border: solid 1px #D13737;
}

/* This is setting up the title line. Now then, I had trouble with changing the border. */
/* In order to change, or over-ride, this already defined value you must use:           */
/* (style="border: solid 6px #9C6C76")  in the div section of your title without        */
/* the parens. I only have them there to show what is needed. Actual use in index.php   */
/* The Padding properties define the space between the element border and the element content. */
.title     /* a class */
{
	/* padding all four sides of the div in order top, right, bottom, left */
	background-color: #AF0020;
	border: groove 6px #9C6C76;
	color: #ffffff;
	font-style: italic;
	font-weight: bold;
	font-size: 36px;
	padding: 10px 20px 10px 20px;
	font-family:  Arial, sans-serif;
}

/* Interesting replacement for a Header 2 */
.title2     /* a class */ 
{
    color: #ffffff;
    font-family:  Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

/* Another Interesting replacement for a Header 3 */
.subtitle     /* a class */
{
    color: #ffffff;
    font-family:  Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
}

/* Ah the side bar itself. Used to set aside an area on the left or right side. */
/* The left and right classes are in Common.css  */
/* In the past, I have seen and used tables for this purpose. */
/* The Padding properties define the space between the element border and the element content. */
.sidebar     /* a class */
{
    width: 150px;
    height: 460px;  /* remove this to allow different-sized sidebars */
    background-color: #9C6C76;
    color: #AF0020;
    font-weight: bold;
    padding: 10px 0px 5px 0px;
}

/* This is a 'cell' in a sidebar. By default they are stacked vertically. */
/* The Padding properties define the space between the element border and the element content. */
.sidebaritem     /* a class */
{
    width: 130px;
    background-color: #750015;
    color: #9C6C76;
    border: solid 1px #AF0020;
    font-size: 14px;
    padding: 2px;
    margin-bottom: 3px;
}

/* Evidently, this is used to make a horizontal menu. Yes it is. One of the */
/* other css files has this comment: */
/*   for a horizontal menu use class="sidebaritem horiz" */
/* Notice there is not a period between the names. These are */
/* two separate classes. The horiz class is occurring inside the sidebaritem. */
/* The float is causing the horizontalness. */
.horiz     /* a class */
{
    color: #4B1A95;
    font-weight: bold;
    width: 125px;
    float: left;
    text-align: center;
}

/* This is presented as a row at the bottom of the page. Well, actually it is */
/* only at the bottom cause that is where it is in the code file.             */
.footer     /* a class */
{
    background-color: #AF0020;
    font-size: 10px;
    font-family:  Arial, sans-serif;
    text-align: center;
}