/* MY LOGIC 

Strategy: Required Classes--declare only font types, size, height, kearning, etc., relying on inheritance (use em or % only). Declare color and background color once in BODY and A and then override as needed. 

Declare positioning, margins, and borders in Anonymous Classes, DIV, and SPAN (border can be px or em, use relative or % for postion) 

Border qualities are declared in this order: width, style, color | inherit. 

Logical order for boxes, from outside to in: margin, border, padding, [content]. My CSS style: Margins and borders are declared when positioning; padding is declared with [content].

Box model calls: One value = all. Two = top/bottom and right/left Three = top, left/right, bottom. Four = top, right, bottom, left. 

Print CSS: use pt for control of fonts (printer is target).

Layout Rules: Margins are used for whitespace (do not use padding for whitespace, since padding can contain bg color) Top margins are set to zero, unless the element is inside a visible box (border). Bottom margins are set to Xem to set off whitespace for the following line or paragraph.


Tag end generic decs for font families:
serif 
sans-serif
monospace
cursive
fantasy 


FOR FONTS:
font-family: Name, "Name With Space";
font-size: 0%;
line-height:0%;

FOR BOXES:
margin: 1em;
border: 1px solid #00FF00;
padding: 1em;

FOR COLORS:


 */
 
 /*First things first--nail down the fonts and then override on a case-by-case basis later. Rancho Arcana using the following font scheme: .xar global components (non-content) are set sans-serif, story content is serif. Font-type further vary by use. Simple, yes? */

body 
{
font-family: Times, "Times New Roman", serif;
}

code 
{
font-family: monaco, courier, monospace;
}

.xar-block-title, .xar-block-title-right, .xar-block-title-topnav, .xar-block-title-center, .xar-mod-title 
{
font-family: Futura, Arial, Helvetica, sans-serif;
}

.xar-block-body, .xar-block-body-right, .xar-block-body-topnav, .xar-block-body-center, .xar-mod-body, .xar-norm, .xar-sub  
{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}



/* Pseudo Classes */
a:link 		{}
a:visited 	{color: red;}
a:active 	{}
a:hover 	{} 
/* NOTE!:leave pseudo-classes exactly in this order, even if you re-declare */

/* Next--set global colors, sizes, heights, and positions */

/* XARAYA REQUIRED CLASSES */

a {text-decoration: none;}
blockquote {}
body {margin: 0; font-size: 100%; background : #FFFFFF;} /* ems inherit and modify size based on parent font-size declaration or last declaration override if nested. Ex: span call within another dec modifying body em. Watch out. */
code {}
h1 {font-size: 140%; line-height: 120%;}
h2 {font-size: 130%; line-height: 120%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;} /*All Article Titles are h2*/
h3 {font-size: 120%; line-height: 120%;}
h4 {font-size: 110%; line-height: 120%;}
th {}
td {}
table {}
thead {}
tbody {}
tfoot {}
p {line-height: 140%; font-size: 120%; color:#000000;}
pre {}
input {}
button {}

select {}
option {}
optgroup {}
textarea {}
label {}
img {}
li {}
ul {list-style-type: none; padding: 0em;} /* I *HATE* bullets--sloppy crap! */
ol {}
sup {}
sub {}


/* BEGIN MY ANONYMOUS BLOCK CLASSES */

/* Text */

.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.j {text-align: justify;}

/* Images with margins and captions using DIV to package */

div.img-left {float: left; margin: 0em 2em .5em 0em;}
div.img-left p {text-align: center; font-style: italic; font-size: 80%; font-family: Times, serif;}
div.img-right {float: right; margin: 0em 0em .5em 2em;}
div.img-right p {text-align: center; font-style: italic; font-size: 80%; font-family: Times, serif;}
div.img-center {float: left; margin: 0em 2em 2em .5em;}
div.img-center p {text-align: center; font-style: italic; font-size: 80%; font-family: Times, serif;}

/*  MY ANONYMOUS BLOCK/INLINE (SPAN) CLASSES */
.i {font-style: italic;}
.b {font-weight: bold;}
.u {text-decoration: underline;}
.s {text-decoration: line-through;}


/* Xar_Rancho_Arcana Theme Layout */

#container {width: 75%; margin: 1em auto; color: #000000; line-height: 130%;}

#top {padding: .5em 0em .5em 0em; border-bottom: 2px solid black;}

#top h1 {text-align: right; font-size: 120%; font-family: Futura, "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; color: #000000; padding: 0; margin: 0;}

#top h1 a {color: #000000; text-decoration: none;}

#leftnav {float:left; width:120px; border-right: 2px solid white; margin: 0 2em 2em 0; padding: 0em 1em 0em 1em;}

#content {padding: 1em;}

#footer {clear:both; margin: 0em ; padding: 1em 0em 1em 0em; color: #CCCCCC; font-size: 75%;}

#copyright {
	float: left;
	padding: 0em;
	margin:0;
	color: #000099;
}

#slogan {
	
	float: right;
	padding: 0em;
	text-align: right;
	margin:0;
	color: #000099;
	}

p#footermsg {
	margin: 1em 0 1em 0;
	text-align: center;
	font-size: 75%;
}

/* Article Summaries--Tagged in View (Summaries)*/
#summary-column p {margin: 0em 0em .25em 140px; padding: 0em; line-height: 120%;}
#summary-column h2 {margin:0em 0em 0em 140px; padding: 0em; line-height: 80%;}

/* Summary Styles--Tagged in Summaries */
.date {font-size: 80%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
.sum-more {font-size: 80%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}

#content h2 { margin: 0 0 1em 140px; } 

.warning {border: 1px solid gray; padding: .5em; font-family: Arial;}