/* default or common CSS values */
/* I created this one to hold the definitions that are general. In other   */
/* words they are not size or color specific. The CSS files that came with */
/* the Bravenet templates were all color specific. */

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

body
	{font-family:Arial, Verdana, Helvetica, Sans-serif;font-size:78%;margin:0;}

/* Well, I lied. My first one is color specific. However, maroon will */
/* show up on any of the backgrounds that I use... I think.  At any   */
/* rate, there are always exceptions to every rule. :-)               */
/* But 5 Sep 10 changed again...cmt   */
/*pre {
    font-size: 9pt;
    color: maroon;
    margin-left: 1em; * Same as 10pt or 10px *
} */
pre {
	border: 1pt dashed black;
	white-space: pre;
	font-size: 8pt;
	overflow: auto;
	padding: 1em 0;
	padding-left:5px;
	background : white;
	color : black;
}

/* PRE expands the lines to much and messes up my divisions. And, supposedly */
/* they are doing away with the font attribute. So, here is mine... for code */
.code {
    font-size: 10pt;
    color: maroon;
}

/* Another creation of my own... which is again color specific. */
/* To hilite a specific section of text. */
.hilite     /* a class */
{
    font-weight: bold;
    color: #C40000;   /* A Darker Red */
}

/* This will hilite one line of text. Makes a bordered, dark red background. */
/* The text is bolded and increased in size. */
/* Use CSS span to accomplish this. ie: <span class="onelinerRed"></span> */
.onelinerRed     /* a class */
{
    font-size: 120%;
    font-weight: bold;
    border: 1px solid #bbb;
    color: #ffffff;
    background-color: #880000;
}

/* This will draw a box around one line of text and make the background white. */
/* Use CSS span to accomplish this. ie: <span class="onelinerBox"></span>      */
/* Also can use this for a 'Note' highlight box at the beginning of a line.    */
.onelinerBox     /* a class */
{
	border: 1px solid Black;
	color: #000000;					/* Text color */
	background-color: #ffffff;		/* As it says */
}
.oneOrgBox     /* an Orange class */
{  /* <span class="oneOrgBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #FFB66C;
}
.oneRedBox     /* a Red class */
{  /* <span class="oneRedBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #F08080;
}
.oneGrnBox     /* a Green class */
{  /* <span class="oneGrnBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #3CB371;
}
.oneVioBox     /* a Violet class */
{
/* <span class="oneVioBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #EE82EE;
}
.oneBluBox     /* a Blue class */
{
/* <span class="oneBluBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #87CEFA;
}
.onePurBox     /* a Purple class */
{
	/* <span class="onePurBox"> ??? </span> */
	border: 1px solid Black;
	color: #000000;
	background-color: #9370DB;
}
/* I am a SuSE Fan. Did I forget to mention that?? :-) */
.SuSEcolor
{
	color: green;
}
.oneSuSEBox     /* a class */
{
	border: 1px solid Black;
	color: #FFFFF0;					/* Text color */
	background-color: #75c38f;		/* As it says */
}

/****	<span class="onelinerBox"> ??? </span> ****/

/* Allow indentation or a margin or whatever you want to call it.    */
/* Guess I really don't understand all this. This indent didn't work */
/* the way I thought it did or should. */
.indented     /* a class */
{
    margin-left: 2em;
    margin-right: 2em;
}

/* The float property sets where an image or a text will appear in another element. */
/* This is used to get a sidebar on the left instead of using a table. */
/* Is used in conjuction with the sidebar class and/or can be used by itself to set   */
/* aside an area on the left. When used by itself, you must define all the parameters */
/* that 'were' in the sidebar definition. I actually 'learned' this by mistake. Isn't */
/* that usually they way things happen?.?. :-) */
.left     /* a class */
{
    /* floats the item to the left side of the page */
    float: left;
}

/* The float property sets where an image or a text will appear in another element. */
/* This is used to get a sidebar on the right instead of using a table. */
/* Is used in conjuction with the sidebar class and/or can be used by itself to set    */
/* aside an area on the right. When used by itself, you must define all the parameters */
/* that 'were' in the sidebar definition. */
.right     /* a class */
{
    /* floats the item to the right side of the page */
    float: right;
}

/* This makes the element create scroll bars if the text is too long to */
/* be displayed.  This is very similar to the effect created by frames  */
/* and iframes, but does not allow page transitions like frames do.     */
.scroll     /* a class */
{
    /* The overflow property sets what happens if the content of an  */
    /* element overflows its area. auto - If the content is clipped, */
    /* the browser should display a scroll-bar to see the rest of the content  */
    overflow: auto;
}

/* Here we are setting the page width. Images will ignore this and be as big as they are! */
.wrapper     /* a class */
{
    /* remove this to have the page load at full width */
    width: 890px;
}

/* The Margin properties define the space around elements. top, right, bottom, left */
.titlemargin     /* a class */
{
	margin: 10px 0px 10px 0px;
}

/* The Padding properties define the space between the element border and the element content. */
/* Only used if sidebars?? */
.content.padleft     /* a class in a class */
{
    /* this is to pad if there's a sidebar on the left */
    padding-left: 180px;
}
 
/* The Padding properties define the space between the element border and the element content. */
/* The first is padding top, right, bottom, left. */
.content     /* a class */
{ 
    /* this describes the container of the content paragraphs. */ 
	/* 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' */
    padding: 0px 20px 0px 20px; /* keeps text off the borders */ 
    font-family:  Arial, sans-serif;
    font-size: 14px; 
    margin: 0px; 
} 

/* The Padding properties define the space between the element border and the element content. */
/* Only used if sidebars?? */
.content.padright     /* a class in a class */
{
    /* this is to pad if there's a sidebar on the right */
    padding-right: 180px;
}

/* The first item is given a greater top margin to make the description label  */
/* above it more readable. Without the margin they are very close. */
.sidebaritem.first     /* a class in a class */
{
    margin-top: 10px;
}

/* Because I wanted to place a label in the middle of the menu I had to create  */ 
/* the following item. This is to allow a larger bottom margin for a menu label */
/* that is placed in the middle or so of a sidebar menu. More eye appealing.    */
.sidebaritem.last     /* a class in a class */
{ 
    margin-bottom: 10px; 
} 
/* =============================================================================== */
/* Most of the stuff below this line was obtained from others. HP in particular.   */
/* =============================================================================== */
.cb		/* No floating elements allowed on either the left or the right side */
	{clear:both;}
.large	/*  */
	{font-size:110%;}
.mb0	/*  */
	{margin-bottom:0;}
.mb5	/*  */
	{margin-bottom:5px;}
.ml10	/*  */
	{margin-left:10px;}
a.dotline, a.dotline:hover	/* Define 2 classes for mouse ops/references */
	{text-decoration:none;border-bottom:1px dashed #036;cursor:default;}
.p0505	/*  */
	{padding:0 5px;}
.p10	/*  */
	{padding:10px;}
.tinygray	/*  */
	{color:#666;font-size:78%;}
.alert	/*  */
	{background:#fff;border:2px solid #036;margin-bottom:10px;padding:4px;}
ul	/*  */
	{margin:0 0 10px 20px;padding:0;}
ol	/*  */
	{margin:0 0 10px 30px;padding:0;}
p,.m00100	/* This affected the spacing between the Tooltip Header and Text. */
	{margin:0 0 10px;}
li p,.m100100	/*  */
	{margin:10px 0;}