/* =====

Designer:	"BenWBlue";

Site:	"http://www.codeysworld.com/";

Path:	"cole-parker/";

File:	"styles-template.css";

Date:	"2007-11-09";

===== */





/* 

Colin ~ 

*	Use this as a guide. You may create a .css from scratch, 

	if you want or if your instructor insists. Show this and get approval. 

*	You can change anything, but it's better not to change 

	the custom class identifiers. They aren't scripted, at present, 

	so if you want to change them, I won't fuss. 

*	Note carefully how the body and div.page interact 

	on screen and in print.

*	Note that Codey had a thing against "boxes" in borders or backgrounds.

	He also had a thing favoring "balance" of things, and centering.

	Try to follow that. Some clients may have special preferences or 

	design needs, so this is a requirement you might meet in business.

*	Caution: divs and positioning may not work on IE6 or Win98, and yes, 

	we still have people using those. Therefore, you may have to use 

	tables for layout. ~ Use our boss as a check and test subject.

*	Innovate, especially with layouts and shapes, graphics, etc.

	I'd love it for you to show your own design flair. It'll increase the 

	variety for the site. If you have a cool technique, then I'll learn too.

*/





/* Font Definitions */

/* via MSOffice or OpenOffice */



@font-face {

	font-family: "Comic Sans MS";

	panose-1: 3 15 7 2 3 3 2 2 2 4;

}



/* Color Definitions ~ !Pseudocode! */

/* // handy memory aid; wish there were a real naming mechanism;

@_color-list "custom" { // rgb hex + rgb dec, etc. as needed

	// list any css3 standard colors you want to use;

	#faebd7	"css3:antiquewhite";

	#ffa500	"css3:orange";

	#ff4500	"css3:orangered";

	// list any custom colors;

	#abcdef	"custom:colorName";

} // @_color-list "custom"; 

*/



/* Style Definitions */



body { /* see also div.page near eof */

	background-color: antiquewhite; 

	/* background-image: none; */

	/* background-image: url(images/background.png); /* change */

	color: black; 

	font-family: "Comic Sans MS", sans-serif;

	font-size: medium; 

	text-align: left;

}

p, blockquote, ol, ul, li, dl, dt, dd {

	background: transparent; 

	color: black; 

	font-family: "Comic Sans MS", sans-serif;

}

p.pFirst { margin-top: 3.0em; }

dt { font-weight: bold; }



h1, h2, h3, h4, h5, h6 { 

	background: transparent;

	color: navy; 

	font-family: "Comic Sans MS", sans-serif;

}

h1 { font-size: xx-large; }

h2 { font-size: x-large; }

h3 { font-size: large; }

h4 { font-size: medium; }

h5 { font-size: small; }

h6 { font-size: x-small; }

.separator {

	text-align: center;

}



hr { 

	border: thin solid navy;

}



table { border-collapse: collapse; }

td, th { 

	background: transparent; 

	color: black; 

	font-family: "Comic Sans MS", sans-serif;

	vertical-align: top; 

}

a { 

	background: transparent; 

	color: black; 

	/* text-decoration: none; */

	/* font-weight: bold; */

}

a[href] { text-decoration: underline; }

a:link { background: transparent; color: teal; }

a:visited { background: transparent; color: purple; }

a:active, a:hover { background: transparent; color: red; }

img, a img, img a { border: none; }



/* how else might an external link be distinguished? */

.external { background: transparent; color: green; font-weight: bold; }



.menu {

	padding-top: 15px;

}



.trail, div.trail, table.trail { /* breadcrumb trail */

	border-top:    1px solid maroon;

	border-bottom: 1px solid maroon;

	background: transparent;

	color: black;

	font-family: "Comic Sans MS", sans-serif;

	font-size: medium; /* 12pt; */

	margin: 0.25in 0.0in;

	padding: 3pt 6pt;

	width: 100.00%;

} 



/* List or Tree */

/* to support an advanced technique ~ no, I haven't programmed it */

.tree, ol.tree, ul.tree { 

	font-size: small; 

	list-style: square outside; 

	list-style-image: url(images/list/leaf0.png); 

	text-indent:   0.0em;

	margin-left:   1.0em; 

	padding-left:  0.0em; 

}

/* 

li.empty   { list-style-image: url(images/list/empty.png); }

li.branchI { list-style-image: url(images/list/branchI.png); }

li.branchT { list-style-image: url(images/list/branchT.png); }

li.branchL { list-style-image: url(images/list/branchL.png); }

*/

li.folder0 { list-style-image: url(images/list/folder0.png); } /* collapsed */

li.folder1 { list-style-image: url(images/list/folder1.png); } /* expanded */

li.leaf0   { list-style-image: url(images/list/leaf0.png); } /* regular */

li.leaf1   { list-style-image: url(images/list/leaf1.png); } /* special */



.stub { background: transparent; color: gray; }



.flag { 

	background: transparent; 

	color: navy;

	font-family: "Comic Sans MS", sans-serif; 

	font-size: small;

	font-weight: bold;

	padding: 0pt 3pt; 

}

.flag a, a.flag { padding: 0pt 3pt; }



.xDateTime { font-size: smaller; display: inline; } /* or display: none; */

.list0 {

	list-style: none;

	margin-left:  0.0em;

	padding-left: 0.0em;

}

.margin0 {

	margin-top: 0;

	margin-bottom: 0;

}

.imageCenter {

	margin: 1.0em auto;

	text-align: center;

}



/* Story Styles */

/* may also need others such as, not limited to: 

	.dedication, .disclaimer, .notesBefore, .notesAfter, .footnotes

*/



.copyright { 

	font-size: small; 

}

.notes, div.notes, p.notes, ol.notes, ul.notes {

	font-size: small;

}

.notes li, li.notes, ol.notes li, ul.notes li { 

	font-size: small; 

}



/* Poem Styles */



.poem, ol.poem, ul.poem { 

	background: transparent;

	color: black;

	list-style: none; 

	margin: 0; 

	padding: 0; 

}

.poem li, ol.poem li, ul.poem li {

	background: transparent;

	color: black;

	list-style: none; 

	margin: 0; 

	padding: 0; 

}

.hVerse, .verseH {

	background: transparent;

	color: #cc3300;

}

.verse, ol.verse, ul.verse { 

	background: transparent;

	color: black;

	list-style: none; 

	margin-left: 0.5in; 

	padding: 0; 

}

.verse li, ol.verse li, ul.verse li { 

	background: transparent;

	color: black;

	list-style: none; 

	margin-left: -0.25in; 

	padding: 0; 

}

.stanzaIndent0 { text-indent: -0.25in; margin-left:  0.5in; }

.stanzaIndent1 { text-indent:  0.00in; margin-left:  0.5in; }



/* Table of Contents (toc) */

/* fill these out yourself */



.tocTable { 

}

.tocTable td, .tocTable th {

}

/* 

fields in order: 

	{ .tocHeading || { .tocTitle || .tocChapters, .tocBlurb, .tocFlags } }; 

*/

.tocHeading { /* multi-col heading, as needed */

}

.tocTitle { /* title of novel, collection, story, poem, etc. */

	width: 33.33%;

	padding: 6pt;

	text-align: right;

	font-size: 1.2em;

}

.tocBlurb { /* blurb to grab the reader's interest */

	width: 66.67%;

	padding: 6pt;

	font-style: italic;

}

.tocFlags { 

/* flags for type (novel, collection, short, poem), 

	recent item or completed story, or other needs; 

*/

	width: 33.33%;

	padding: 6pt;

}

/* Chapters as list-item or table-cell */

.tocChapters,    ol.tocChapters,    ul.tocChapters {

} 

.tocChapters li, ol.tocChapters li, ul.tocChapters li {

}



/* Masthead */



#masthead, div#masthead, table#masthead { margin-bottom: 0.25in; }



/* Column Definitions */

/* change, add, or remove as needed for layout; */

/* may want to add padding; */



.colx1of6 { width:  16.67%; }

.colx2of6 { width:  33.33%; }

.colx3of6 { width:  50.00%; }

.colx4of6 { width:  66.67%; }

.colx5of6 { width:  83.33%; }

.colx6of6 { width: 100.00%; }



/* Page Definitions */



@page usLetter {

	size: 8.5in 11.0in; /* // 215.9mm 279.4mm; */

	margin: 1.0in 1.0in 1.0in 1.0in; /* // 254mm; */

}

div.usLetter { page: usLetter; }

@page isoA4 {

	size: 210mm 297mm; /* // 8.2677in 11.6929in; */

	margin: 254mm 254mm 254mm 254mm; /* // 1.0in; */

}

div.isoA4 { page: isoA4; }

div.page { /* change background color or image as needed */

	background-color: white; 

	padding: 0.25in;

}

@media print {

	div.page { page: usLetter; }

} /* // @media print */

@media screen {

	div.page { width: 85.00%; margin: 0.125in 5.00% 0.125in 5.00%; }

} /* // @media screen */