/* http://jigsaw.w3.org/css-validator/ */
/*  Ctrl-Double-Click the following NoteTab hyperlink to update all listed "instyle.css" programs:
	[c:\apps\apgm\css\cssbench\instyle.bat]
*/

/* This style sheet requires the following pictures in the same folder:
                       bluegr1m.png
                       butnbu1x.gif
                       butnbu2x.gif
                       butnbu3x.gif
                       tileme1x.jpg ?
                       tileso1n.jpg ?
                       tilepa1x.jpg
                       tilepa2x.jpg
                       tilepa3x.jpg ?
                       tilepa4x.jpg
                       tilepa5x.gif
*/

/* Some CSS Standards:

Standard Named Color List: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
                                    olive, purple, red, silver, teal, white, yellow.

Standard Font List for both Windows and Mac:
    arial, arial black, arial narrow, century gothic, comic sans ms,
    courier new, franklin gothic, geneva, georgia, impact, monotype, palatino,
    symbol, tahoma, times new roman, trebuchet ms, verdana, webdings
    *e.g.:
	font-family: "trebuchet ms", helvetica, arial, sans-serif;
	font-family: charcoal, times, serif;
	*headers:
	font-family: verdana, geneva, sans-serif;
	font-family: georgia, utopia, palatino, serif;
	*text:
	font-family:  sans-serif;
	font-family:  serif;
	*monospace:
	font-family: "courier new", courier, monospace;
	*cursive:
	font-family: "Comic Sans MS", cursive;
*/

/*                                                                  start with the body     */

body {
	background: #a0a0ff url(bluegr2m.png) repeat-y;
	color: #000000;
	color: black;
	font-family: verdana, arial, helvetica, futura, sans-serif;
	font-size: 100%;
	line-height: 1.6;
	margin: 1em;
	padding: 1em;
	width: 94%;
}


/*                                                                                  BOXES   */

div.alarm {
	color: white;
	background: black;
	text-indent: 1em;
	border: thick ridge Red;
	font-family: "Arial Black", verdana, arial, helvetica, futura, sans-serif;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

div.article {
	color: black;
	background: url(tilepa2x.jpg) white;
	border: medium outset gray;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

div.big {
	font-size:    125%;
}

div.buttons {	/*  a transparent background for the buttons  */
	background: transparent;
	border: none;
	clear: both;
	color: black;
	margin: 1em 10% 1em 10%;
	padding: 0;
}

/*  page table of contents box  */
div.contents {
	text-indent: 1em;
	background: white;
	color: black;
	border: medium outset silver;
	font-weight: normal;
	padding: 0 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*             a statement that this form is for reference only   */
div.disclaimer {
	color: white;
	background: green;
	border: thick ridge maroon;
	padding: 1em;
	margin: 1em;
	width: 90%;
}

/*    a parchment page for official-looking document   */
div.document {
	color: black;
	background: url(tilepa4x.jpg) White;
	border: thin ridge Silver;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*  a happy-fancy letter page   */
div.fancy {
	/* a purple line with a parchment background    */
	color: black;
	background: url(tilepa2x.jpg) White;
	border: thick inset Fuchsia;
	font-family: "Arial Black", papyrus, "copperplate gothic bold", desdemona, fantasy;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*  a self-contained special item   */
div.feature {
	color: black;
	background: url(tilepa2x.jpg) White;
	border: medium outset gray;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*  a felt tabletop box  */
div.felt {
	color: white;
	background: Green;
	border: thick ridge maroon;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*  a fill-in-the-blanks (underlines) form / coupon   */
div.form {
	color: black;
	background: url(tilepa2x.jpg) white;
	border: thin solid Black;
	padding: 1em;
	margin: 1em;
	width: 90%;
}

/*  a formal boilerplate cast-in-metal box   */
div.formal {
	color: black;
	background: url(tileme1x.jpg) white;
	border-color: silver;
	border-width: thick;
	border-style: ridge;
	font-family: "times new roman", georgia, times, serif;
	font-size: large;
	font-weight: bold;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}


/*  a tabletop for games box  */
div.game {
	color: white;
	background: Green;
	border: thick ridge maroon;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}


div.handnote {
	color: black;
	background: white;
	border: medium outset gray;
	float: left;
	font-family: "walter turncoat", helvetica, arial, sans-serif;
	font-size: 120%;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 40%;
}


/*   stationary for a letter format    */
div.letter {
	color: black;
	background: url(tilepa5x.gif) yellow repeat;
	border: thin outset;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*   block writ small because it is out of date or whatever */
div.little {
	color: black;
	background: transparent;
	font: normal normal lighter .7em arial, helvetica, sans-serif;
	text-indent: 0em;
	border: 0;
	padding: 5%;
	margin: 0 5% 0 5%;
	width: 50em;
}

div.menu {
	/* box of menu items */
	color: black;
	background: #F2F4EE;
	font-family: tahoma, arial, helvetica, sans-serif;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}


/*  a note box for bulletins inside other boxes  */
div.note {
	background: #2C53EF;
	border: thick ridge maroon;
	color: white;
	margin: 1em;
	padding: 1em;
	text-align: center;
	width: 90%;
}


/*  a thin border line around everything   */
div.plain {
	/* a thin black line with a transparent background    */
	border: thin ridge silver;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 80%;
}

/*  an elegant protrayal of poetry and such   */
div.poetry {
	color: navy;
	background: url(tileso1n.jpg) white;
	border-color: silver;
	border-width: thick;
	border-style: ridge;
	font-family: "times New Roman", georgia, times, serif;
	font-size: large;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}


/*  a postit note  */
div.postit {
	background: yellow;
	border: medium outset gray;
	color: black;
	float: right;
	font-family: "walter turncoat", helvetica, arial, sans-serif;
	font-size: 120%;
	margin: 1em 10% 1em 10%;
	padding: 1em 4em 1em 4em;
	width: 30%;
}


/*  monospace typewriter font on a white page   */
div.report {
	color: black;
	background: url(tilepa2x.jpg) White;
	border: thin solid Black;
	font-family: "lucida console", monaco, "anadale mono", "courier new", courier, monospace;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*  ta da! Special Announcement   */
div.special {
	text-indent: 0em;
	background: url(tilepa2x.jpg) white repeat;
	color: maroon;
	border: thin outset Silver;
	font-weight: bolder;
	padding: 1em 4em 1em 4em;
	margin: 1em 10% 1em 10%;
	width: 50em;
}

/*           emphatic box              */
.emphatic {
	border-color: white;
	border-width: 1px;
	border-style: dashed;
	background-color: #a7cece;
	padding: 25px;
	padding-left: 80px;
	margin: 1em 8em 1em 8em;
	line-height: 1.9em;
	color: #666666;
	font-style: italic;
	font-family: georgia, "times new roman", times, serif;
	background-image: url(images/background.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 50em;
}


/*                                                                     HEADERS   */

h1, h2, h3, h4, h5 {
	font-family: verdana, geneva, georgia, utopia, palatino, serif;
	margin: 0;
	padding: 0;
	text-align:   center;
}
h1 {
	font-size:    130%;
}
h2 {
	font-size:    120%;
}
h3 {
	font-size:    110%;
}
h4 {
	margin: 5px 0 5px 10%;
	font-size: 115%;
	text-align: left;
}
h5 {
	background: transparent;
	font-family: 'Rock Salt', serif;
	font-size: 200%;
	font-style: normal;
	font-weight: bolder;
	text-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.2;
}


/* _______________________________ horizontal lines _____________________________________________ */


hr {
	color: red;
	margin: .3em;
}

div.hline{       	/* a custom hr */
	background-color: blue;
	border: .3em solid transparent;
	border-bottom: solid red;
	height:.2em;
	margin: 1em;
	overflow: hidden;
}


/*                                                                  center a block of text lines */
.center {
	text-align: center;
}

/*                                                  move below all previous blocks at this point */
.clearall {
	clear: both;
}

/*                                                                                paragraphs     */

p {			/* regular paragraph <p> is indented, but does not skip a line */
	text-indent: 2em;
	margin: 0.5em 2em;
}
p.block {		/* <p class="block"> skips a vertical line but does not indent */
	text-indent: 0em;
	margin-top: 1em;
}
p.indent {		/* an indented paragraph */
	margin-left:8em;
}
p.opening {
	margin-top: .5em;
	margin-bottom: 1.2em;
	text-indent: 0em;
}
p.date, p.pageno, p.closing {
	text-align: right;
	margin-top: .5em;
	margin-bottom: .5em;
}


p.signature {
	text-align: right;
	font-style: italic;
	font-weight: bolder;
	font-size: 200%;
	font-family: "lucida caligraphy", "lucida handwriting", "zapf chancery", "brush script mt",
                 "comic sans ms", cursive;
	color: #4B0082;           /* royal blue */
	background: transparent;
	padding: .2em;
	margin-top: .5em;
	margin-bottom: .5em;
}

p.signature2 {
  background: transparent;
  color: #4B0082;           /* royal blue */
  font-family: "Dancing Script", "lucida caligraphy", "lucida handwriting", "zapf chancery",
              "brush script mt", "comic sans ms", cursive;
  font-size: 200%;
  font-style: normal;
  font-weight: bolder;
  letter-spacing: 0em;
  line-height: 1.2;
  margin-bottom: .5em;
  margin-top: .5em;
  padding: .2em;
  text-align: right;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  word-spacing: 0em;
}

p.italics {
	font-style: italic;
}


/*                    pre-formatted look; be sure the text has line breaks or there won't be any */
pre {
	border-left: double;
	border-color: red;
	margin-left: 1em;
	margin-right: 1em;
	padding: .5em;
	font: medium "courier new", courier, "lucida console", monospace;
}

/*                                                                         TABLES          */

table, td, th {
	border: 1px solid green;
	color: black;
	background: yellow;
	margin-left: 10%;
	margin-right: 10%;
	font-family: verdana, arial, helvetica, futura, sans-serif;
}

/*        event table   */

table.events {  /* <table> <tr> and <td> must all contain "class=events" */
	font: normal normal bolder 100% verdana, arial, sans-serif;
	background: #696969;     /* dim gray */
}
tr.events {
	background: red;  /* doesn't show */
}
td.events {
	border: medium groove silver;
	background: #FFEBCD;
}

/*                                                                                    LISTS    */

/*     Unordered lists in general      */
ul {
	font-size: 120%;
	color: #444;
	padding: 0;
	margin: 0 .2em 0 10%;
	line-height: 1.25;
}
/*     Unordered lists with special bullets      */
ul.boxbutn1 {
	list-style: square url(butnbu1x.gif) outside;
}
ul.boxbutn2 {
	list-style: square url(butnbu2x.gif) outside;
}
ul.boxbutn3 {
	list-style: square url(butnbu3x.gif) outside;
}

/*     Ordered lists in general           */

ol {
	font-size: 120%;
	line-height: 1.25;
	margin: 0 .2em 0 .2em;
	padding: 0;
	color: #444;
	list-style: decimal outside;
}
ol li {
	margin: 0 0 0 3em;
}

/*                                                                    ANCHORS / LINKS       */

a {
	color: gray;
	background: #FFFFFF;
	font: bold 100% verdana, arial, helvetica, futura, sans-serif;
	text-decoration: none;
	border: 0;
}
a:link {
	color: blue;
	text-decoration: none;
}
a:visited {
  color: #996699;
  border-bottom: .2em dashed #996699;
  text-decoration: none;

}
a:hover {
	color: red;
	text-decoration: underline overline;
}


/*================================================================================
                                                           Left and Right  IMG
  ================================================================================*/

img {
	border: 0;
	float: left;
	margin: .5em;
}

img.imgright {
	float: right;
	margin: 0 0 1em 1em;
	border: 0;
}

/*                                                                              SPANs        */

span.canceled {
	color: red;
	background: white;
	text-decoration: line-through;
}
span.dim {
	color: gray;
	background: white;
	font: oblique normal normal x-small/normal sans-serif;
}
span.highlighted {
	color: black;
	background: yellow;
}
span.italics {
	font-style: italic;
}
span.regular {         /* turn off italic etc */
	font-style: normal;
}
span.script{
	color: #4B0082;           /* royal blue */
	background: transparent;
	font: normal normal bolder 200%/115%
		"lucida caligraphy", "lucida handwriting", "zapf chancery", "brush script mt",
		"comic sans MS", cursive;
	padding: .2em;
}
span.small {
	font-size: x-small;
}
span.strong1 {
	font-weight: bold;
	font-size: 100%;
}
span.strong2 {
	font-weight: bold;
	font-size: 110%;
}
span.strong3 {
	font-weight: bolder;
	font-size: 120%;
}

span.vivid {
	color: #ff0000;			/*   red   */
	font-weight: bolder;
	font-size: 110%;
}

/*                                                         HTML Emphasis and Strong            */

em {
	font-style: italic;
}

strong {
	font-weight: bolder;
	font-size: 110%;
	text-transform: uppercase;
}


/* small print because it is out of date or something */
.small {
	font-size: x-small;
}


/*                                                         TWO COLUMN LAYOUT                 */


#col2header {
  text-align: center;
  width: 90%;
}

#col2left {
  background: url(tilepa2x.jpg) white;
  color: black;
  float: left;
  margin: 1em;
  padding-left: 1%;
  width: 30em;
}

#col2right{
  background: url(tilepa2x.jpg) white;
  border-left: 2px gray solid;
  color: black;
  float: left;
  margin: 1em;
  padding-left: 1%;
  width: 30em;
}

#col2footer {
  border-top: 3px gray double;
  clear: both;
  float: left;
  text-align: center;
  width: 90%;
}


/*                                        THREE COLUMN LAYOUT                               */

#col3header {
	background-color: #675c47;
	border-bottom: 3px double gray;
	height: 108px;
	margin: 10px;
	text-align: center;
}
#col3left {
	background: #eeeeee;
	float: left;
	font-size: 105%;
	margin: 1em;
	min-height: 30em;
	padding: 15px;
	width: 20%;
}
#col3mid {
	background: #efe5d0;
	float: left;
	font-size: 105%;
	margin-left: 165px;
	margin-right: 230px;
	min-height: 30em;
	padding: 15px;
	width: 60%;
}
#col3rght {
	background-color: #EEEEEE;
	float: right;
	font-size: 105%;
	min-height: 30em;
	padding-left: 1%;
	width: 17%;
}
#col3footer {
	background-color: transparent;
	border: 1px black solid;
	clear: both;
	color: #efe5d0;
	float: left;
	font-size: 90%;
	margin: 10px;
	padding: 15px;
	text-align: center;
	width: 100%;
}

/*                                        End of THREE COLUMN LAYOUT                            */


/*
Ctrl-Double-Click the following NoteTab hyperlink to update all listed "instyle.css" programs:
	[c:\apps\apgm\css\cssbench\instyle.bat]
*/

/*                                                                               End of CSS File */