@charset "utf-8";

* {
	margin: 0; 
	padding: 0;
}

html { 
	font-size: 62.5%; 
	height: 100%; 
}

body   { 
	height: 100%;
}

a {
	outline: none;
} 

img { 
	border: 1px solid #000;
}

img.borderless { 
	border-style: none;
}

label { 
	font-weight: bold;   
}

label.not_bold {
	font-weight: normal;
}

label.hidden {
	display: inline !important;
	font-weight: normal;
}

.error { 
	color: #900; 
}

p,
ul,
ol,
pre,
form,
table,
blockquote {
	line-height: 20px;
	margin-bottom: 20px;
}

form table,
table form,
table table {
	margin-bottom: 0px;
}

table {
	border-collapse: collapse;
}

ul,
ol,
blockquote {
	margin-left: 40px;
}

blockquote {
	margin-right: 40px;
	text-align: justify;
}

ul.no_dot,
ol.no_dot {
	list-style-type: none;
}

li {
	margin-bottom: 5px;
}

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

fieldset { 
	border-style: none;           
}

select,
textarea,
input[type=text],
input[type=password] {
	font: inherit;
}

textarea {
	font: inherit;
}

input[type=image] { 
	border: 0; 
	margin: 0;
	padding: 0;
}

.email span {
	display: none;
}

/* setup styles for smaller type-face for legaltext (i.e. fine print) and errortext.  in case we need legaltext within 
   errortext, we'll also set things up to avoid really small print (that is 90% of 90% type-face) in both cases */

.legaltext { 
	line-height: 18px;
	font-size: 85%;
}

.errortext {
	color: #F26; 
	line-height: 18px;
	font-size: 85%;
}

.errortext .legaltext { 
	color: #FFF;
	font-size: 100%;
}

.legaltext .errortext {
	color: #F26; 
	font-size: 100%;
}

pre,
.mono {
	font-family: "Courier New", Courier, monospace;
}

/* these styles can be applied to any element in the site to control the sizing of said elements.  most often, though,
   they're applied to form elements with tables to keep things well proportioned with respect to the expected amount 
   of input into said forms. */
   
.full    { width: 100% !important; }
.widest  { width:  96% !important; }
.wider	 { width:  90% !important; }
.wide    { width:  75% !important; }
.two3rds { width:  66% !important; }
.half    { width:  45% !important; }				/* 45% is used to allow two half columns to be floated around each other */
.third   { width:  30% !important; }				/* 30% is used to allow three third columns to folad around each other */
.thin    { width:  21% !important; }				/* 21% allows four thin columns floated around each other */
.skinny  { width:  15% !important; }
.petite  { width:  10% !important; }
.tiny    { width:   5% !important; }
.icon    { width: 16px !important; }				/* the exact width of our icon images */

/* textareas covered by TinyMCE need a little off the right.  since just about all of them are TinyMCE'd, we'll just add
   this rule for convenience.  */

textarea.full { width: 96% !important; }

/* for some reason, select boxes are 1% shorter than everything else.  thus, a select.half needs to be at 46% and not
   45%.  this sucks, but we can handle things here.  */
   
select.wide    { width: 76% !important; }
select.two3rds { width: 67% !important; }
select.half    { width: 46% !important; }
select.third   { width: 34% !important; }
select.thin    { width: 26% !important; }
select.petite  { width: 11% !important; }

.xsmall  { height:  4em; }
.small   { height:  8em; }
.medium  { height: 12em; }
.large   { height: 16em; }
.xlarge  { height: 20em; }
.xxlarge { height: 24em; }

.nowrap  { white-space: nowrap; }

/* the following classes can be applied to anything in order to change their border styles.  they're kept short in 
   order to facilitate easy of use and less clutter inline for class names. */
   
.t { border-top:    1px solid #7A6443; }
.l { border-left:   1px solid #7A6443; }
.r { border-right:  1px solid #7A6443; }
.b { border-bottom: 1px solid #7A6443; }

/* these can be used to move things to the right, left, and center sides of the screen and are ususally used with images
   or divs as sidebars. */
   
.right  { 
	float: right; 
	margin: 0 0 0 3.75%;			/* 4.75% leaves a little room for error around borders and the like */
}

.left   { 
	float: left;  
	margin: 0 3.75% 0 0; 
}

.center {
	display: block; 
	margin: 0 auto 20px auto;
	text-align: center;
}

.clearing { clear: both;    }
.block    { display: block; }

.align_left   { text-align: left;   }
.align_right  { text-align: right;  }
.align_center { text-align: center; }


.hide,
.js_show {
	display: none !important;
	visibility: hidden !important;
}

.css_hide {
	left: -100000000px !important;
	position: absolute !important;
}

.pad   { padding:		 20px !important; }
.pad_t { padding-top:    20px !important; }
.pad_l { padding-left:   20px !important; }
.pad_r { padding-right:  20px !important; }
.pad_b { padding-bottom: 20px !important; }

.mar   { margin:         20px !important; }
.mar_t { margin-top:     20px !important; }
.mar_l { margin-left:    20px !important; }
.mar_r { margin-right:   20px !important; }
.mar_b { margin-bottom:  20px !important; }

.little_mar_t { margin-top: 5px !important; }