/* This is totally ripped off from http://www.alistapart.com/d/howtosizetextincss/complexexample.css */

body {
	background: #fff;
	color: #333;
	font-family: georgia, serif;
	font-size:100%;
	line-height:1.125em; /* 16x1.125=18px */
	margin:0;
	padding: 18px;
}

#wrapper {
	width: 40em;
}

#footer {
	color:#309A0A;
}

h1, h2, h3 {
	font-weight:normal;	
	color:#309A0A;
}

h1 {
	font-size: 1.375em; /* 16x1.375=22px */
	line-height: 1.636em;/* 16x1.636=36px */
	margin: 0 0 0.818em; /*22*0.818=18px */
}

h2 {
	font-size: 1.125em; /* 16x1.125=18px */
	margin:0 0 1em ; /* 18x1=18px */
}

h3 {
	font-size: 1em;
	line-height: 1.125em;/* 16x1.125=18px */
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing:0.12em;
}

p, li {
	font-size: 0.875em; /* 16x0.875=14px */
	margin: 0 0 1.286em ; /* 14x1.286=18px */
}

.center {
	text-align: center;
}

a,a:visited {
	color: #333;
	text-decoration: underline;
}

a:hover {
	color: #222;
}

.greyed {
	color: #777;
}

.bad {
	color: #A00;
	font-weight: bold;
	font-style: italic;	
}

.good {
	color: #22E;
	font-weight: bold;
	font-style: italic;
}

.dubious {
	text-decoration: line-through;
}

.errors {
	color: #a22;
	background-color:yellow;
}

table {
	border-collapse: collapse;
	clear: left;
	margin-bottom: 1.125em;
}

th, td {
	text-align: left;
	vertical-align: top;
	padding: 0;
}

/* rather than give the table a font size, use contextual selectors to target the th and td elements within */

th {
	text-transform: lowercase;
	font-variant: small-caps;
	color: #309A0A;
	font-weight: normal;
	font-size: 0.875em; /* 16x0.875=14px */
	padding:0 0.643em 0.571em 0.643em; /* 14x0.643=9px 14x0.571=8px */
	border-bottom:0.071em solid #ccc; /* 14x0.071=1px */
}

td {
	font-size: 0.75em; /* 16x0.75=12px */
	padding:0.333em 0.75em 0.417em 0.75em; /* 12*0.333=4px 12*0.75=9px 12x0.417=5px */
	border-bottom:0.083em solid #ccc; /* 12x0.083=1px */
	line-height: 1em; /* 12x1=12px */ 
}

.textdoc {
	font-family: "Courier New", courier;
}


/*p, h1, h2, li {
	outline: 1px dashed blue;
}
div#wrapper {
	outline: 1px dashed green;
}
body {
	background-image: url('/public/site/images/18px.png');
	background-repeat: repeat;
	outline: 1px dashed red;
}*/