/*

	Title : framework.css
	Author : Erickson Barnett
	
	Acknowledgements: 
	
	The defaults in this css file have bits and pieces picked 
	up from Eric Meyer's reset.css 
	[meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/]
	and Olav Berkjoy's blueprint.css
	[code.google.com/p/blueprintcss] - which in turn has many
	other collaborators.
	
	Many thanks to all involved.

	TABLE OF CONTENTS:
	- CSS Reset
	- Body (site-wide defaults)
	- Typography (font-size/margins/color)
	  - Headers
	  - Lists
	  - Links
	  - Other non-traditional elements
	- Tables
	- Forms
	- Common classes
	- Page Layout
	
	USAGE NOTES:
	
	To calculate the spacing and arrangement of text 
	(your vertical rhythm) you need to know these units:
	
	-- font size: 
	   main font size (in px)
	
	-- line height: 
	   main line height (in px)
	
	-- vertical unit: 
	   a value which determines the space between elements (in px).
	
	-- inside vertical proportion: 
	   a multiple of the vertical unit used for the bottom margin 
	   in normal copy elements
	
	-- outside vertical proportion: 
	   multiples of the vertical unit used for the top and 
	   bottom margin in header elements
		
	proportions should increase/decrease in multiples of .25.	
		
	After you have these units:	
	1. Set your desired font size (%) and line height (em).
	2. Set your main element margins (ems).
	3. Set your header font sizes (ems) and margins (ems).
 	
	NOTE: All em calculations should be to three decimal points.
	
	The units for this file are:
	-- font size: 12px
	-- line height: 16px
	-- vertical unit: 12px
	-- inside vertical proportion: top: 0 / bottom: 1 
	-- outside vertical proportion: top: 2 / bottom: 1
	
*/

/* -- reset ---------------------------------------------*/

html, body,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
object, blockquote, pre, address {
	margin: 0;
	padding: 0;
	border: 0;
}

table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}

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

blockquote, q {
	quotes: none;
}

a img { border: none; }

hr { border: 0; height: 0; margin: 0; padding: 0; width:0; }

/* -- body/overall ---------------------------------------------*/

/*	This is where you set your base font size and line height.
	
	Your main font size is specified in %.  Base browser font size
	is 16px, so your formula is: font size (px) / 16px = %.
	
	For example: you want 12px baseline type.
	12px / 16px = 75%;
	
	Line height is specified in ems.  The formula for line-height is:
	desired line height (px) / font size (px) = line height (em)
	
	For example: Your font size is 12px, and you want an 18px line
	height. 18px / 12px = 1.5em
	
*/

body {	
	font-size: 75%; /* sets base font-size to 12px */ 
	line-height: 1.333em; /* 16px / 12px = 1.333em */
}

body {	
	font-family: 'Trebuchet MS', Trebuchet, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; 
	/* for serif-ed fonts */
	/* font-family:  Georgia, "lucida bright", "times new roman", serif; */
	color: #000;	
	background: #fff;
}
	 
/* -- typography ---------------------------------------------*/

/*	This is where you set your baseline margin.
	
	The margin is calculated by taking the margin you desire (in px)
	and dividing by the main font size (in px).  Your main font 
	size is specified in % in the body declaration above.
	
	For example: you want a 18px bottom margin for 12px type.
	18px / 12px = 1.5em;
	
	NOTE: All em calculations should be to three decimal points.
	
*/

p, ul, ol, dl, dd, blockquote, pre, code, table { 
	margin: 0 0 1em 0; /* 12px */
}

/* lists should be a half-size less than the main margin */

li { 
	margin: .5em 0 .5em 0; 
}

li ul {
	margin-bottom: .5em;
}

/* -- headers -- */

/* 	This is where you set your header margins, font size, and
	line height.
	
	Font sizes (em) are calculated by taking the font size you 
	desire (in px) and dividing by the body font size (in px)
	
	For example: you want 36px type.
	Body font size (in px) = 16px * 75% = 12px
	New font size (in em) = 36px / 12px = 3em
	
	The margins (px) are determined by the outside vertical proportion. 
	If we have a vertical unit of 18px, and our margin-top 
	proportion is 1.5, then we have a top margin of 18px * 1.5 = 27px.
	
	The margins (em) are then calculated by taking the margin you 
	desire (in px) and dividing by the header font size (in px).
	
	For example: you want a 27px margin for 36px type.
	27px / 36px = .75em;
	
	Line height should be calculated as the closest 25% (or 33% depending) multiple of
	the vertical unit that is greater than the font size. (Rounded up)
	
	For example: Your unit is 18px.  Your font size is 34px.
	18px * 2 = 36px.  36px / 34px = 1.059em
	
	NOTE: All em calculations should be to three decimal points.

*/

h1, h2, h3, h4, h5, h6 { 
	font-weight: normal;
}

h1 { 
	font-size: 3em; /* 36px */
	line-height: 1em;  
	margin: 0 0 .333em 0; 
} 

h2 { 
	font-size: 1.5em; /* 18px */
	line-height: 1.167em; /* 21px */
	margin: 1.333em 0 .666em 0; 
} 

h3 { 
	font-size: 1.25em; /* 15px */
	line-height: 1.2em; /* 18px */
	margin: 1.6em 0 .8em 0; 
} 

h4 { 
	font-size: 1.167em; /* 14px */
	line-height: 1.071em;  /* 15px */
	margin: 1.714em 0 .857em 0; 
} 

h5 { 
	font-size: 1em; /* 12px */
	margin: 2em 0 1em 0; 
} 

h6 { 
	font-size: 1em; /* 12px */
	margin: 2em 0 1em 0; 
}

dt { 
	font-size: 1em; /* 12px */
	margin: 2em 0 1em 0; 
}

/*	these next rules deal with headers that show up right below
	one another. Use the bottom vertical unit for the margin.
	
	This does not work in IE6.
*/

h1 + h2 {
	margin-top: .666em;
}

h2 + h3 {
	margin-top: .8em;
}

h3 + h4 {
	margin-top: .857em;
}

h4 + h5, h5 + h6 {
	margin-top: 1em;
}

/* -- lists -- */

ul, li { list-style-type: none; }

li { 
	background: url(../images/bullets/bullet.gif) 0 .25em no-repeat; 
	padding-left: 1.4em; 
}
	
ol {
	padding-left: 1em;
	margin-left: 1em;
}
	
ol li {	
	list-style: decimal; 
	background: none; 
	padding-left: 0; 
}

dt {
	font-weight: bold;
}

/* -- links -- */

a {
    text-decoration: underline;
    outline: none;
    color: #002244;
}

a:visited {
    color: #002244;
}

a:hover, a:focus {
	color: #3883c4;
	text-decoration: underline;
}

a:active {
    color: #3883c4;
}

/* -- other elements -- */

pre, code, tt { font-family: 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } 
code { white-space: pre; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; white-space: monospace;}
strong, b { font-weight: bold; }
em { font-style: italic; }

/* -- tables ---------------------------------------------*/


/*table   { margin-bottom: 1.333em; }
th      { border-bottom: 2px solid #ccc; font-weight: bold; }
td      { border-bottom: 1px solid #ddd; }
th,td   { padding: 4px 10px 4px 0; }
tfoot   { font-style: italic; }
caption { background: #ffc; }*/


/* -- forms ---------------------------------------------*/


form {}
fieldset {}
legend {}

label { margin: 0 0; }

input {
	height: 16px;
	margin: .5em 0;
	border: 1px solid #7f9db9;
	padding: 2px;
}

input.short { width: 100px; }
input.medium { width: 150px; }
input.long { width: 200px; }

input:focus {}
input.checkbox { width: 13px; height: 13px; border: none; }
input.radio { width: 13px; height: 13px; border: none; }

label.wide { width: auto !important; padding: 0 !important; }

select {}

form br { clear: left; }

textarea {
	margin: .5em 0;
	border: 1px solid #7f9db9;
	padding: 2px;
}

/*input.button-img {
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	padding: 0 !important;
}

input.button {
	float: left;
	margin-right: 10px;
	width: auto !important;
	height: auto !important;
	cursor: pointer;
}

input.button:hover {
	background: #d8e7ef;
}*/

/* -- common classes -------------------------------------*/

.right {
	text-align: right;
 }

.clearer {
	clear: both;
}

.hide, .print {
	display: none;
}

.leadin {
	padding: 0;
	margin-top: 0;
}

.imgleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.imgright {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

.last {
	border-right: none !important;
}

.replaced {
	width: 0px;
	height: 0px;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: -10000px;
	background: url(/images/bg/header-image.jpg) top left no-repeat;
}

ul.no-bullet {
	margin-left: 0;
	padding-left: 0;
}

ul.no-bullet li {
	padding-left: 0;
	background: none;
}

/* Indentation instead of line shifts for sibling paragraphs. */
p.indent { text-indent: 2em; margin-top: -1em; }
/* can use p + p for a whole block */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
	zoom: 1;
}

/* 

 for every four lines of content, we want five lines of 
 tighter text: 

 New type size in em's:
 11px (wanted side note size) / 12px (existing base size) = 0.917 (new type size in ems)

 New line-height value:
 base-line-height (px) x 4 = height 
 height / 5 = new line height
 new line height / 11px = (new line height in em's) 
 margin = main unit margin
 
*/

.incremental p, p.incremental {
	font-size: .917em;
	line-height: 1.164em;
	margin: 0 0 1.091em 0;
}	

p.small, .small p {
	font-size: .917em;
	margin: 0 0 1.091em 0;
}

/* 	some elements should just run the same meter as the body text.  
	This is that class */

.normal {
	font-size: 1em;
	line-height: 1.333em;
	margin-bottom: 0;
}

/* 	There is always some sort of separator as well. */

.separator {
	margin: 24px 0 0 0;
	border-top: 1px solid #999;
	padding: 23px 0 0 0;
}

/* vertical-unit 12 line-height 14 = tighter measure */

.tight p, .tight ul, p.tight, ul.tight {
	line-height: 1.167em;
	margin: .5em 0 0 0;
}

.tight ul li, ul.tight li {
	margin: 0 0 4px 0;
}


/* -- layout ---------------------------------------------*/


#beta {
	top: 0;
	left: 0;
	position: absolute;
	z-index: 1000;
}

#header-wrapper {
}

#header {
	width: 979px;
	text-align: left;
	margin: 0 auto 0 auto;
	position: relative;
	height: 0px;
}

#bowtie {
	background: url(/images/bg/bowtie.jpg) 10% 146px no-repeat;
}

#apply-button {	
	width: 219px;
	height: 66px;
	display: block;
	text-decoration: none;
	text-indent: -99999px;
	background: url(/images/common/apply.jpg) top left no-repeat;
}

#apply-button:hover {
	background-position: 0 -66px;
}

#join-button {	
	width: 219px;
	height: 66px;
	display: block;
	text-decoration: none;
	text-indent: -99999px;
	background: url(/images/common/join-discussion.gif) top left no-repeat;
}

#join-button:hover {
	background-position: 0 -66px;
}

#content-wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#content-wrapper {
	zoom: 1;
	background: #e5e5e5 url(/images/bg/body.jpg) top left repeat-x;
}


#centering-content-wrapper {
	margin: 0 auto;
	width: 979px;
	text-align: left;
	/*padding-top: 65px;*/
	padding-bottom: 24px;
}

#main-content {
	float: left;
	width: 736px;
	padding-right: 21px;
}

#align-wrap {
	border: 1px solid #cdcdcd;
	margin-top: 65px;
	margin-left: 21px;
}

#align-flash {
	margin-left: -21px;
}

.flashmessage {
	margin-right: -320px;
	width: 650px;
}

#align {
	border: 5px solid #fff;
	background: #fff url(/images/bg/align.jpg) top left repeat-x;
	position: relative;
	height: 381px;
	padding: 24px 12px 12px 12px;
}

body.text #align {
	height: auto;
}

.intro {
	float: left;
	width: 353px;
}

.callout {
	margin-top: 36px;
	background: url(/images/bg/align-content.jpg) top left repeat-x;
	padding: 12px;
	float: left;
	width: 323px;
}

.wide {
	margin-top: 0;
	width: 676px;
}


#align h1 {
	color: #4085be;
	margin: 2px 0;

}

#align h2 {
	margin: 0 0 12px 0;
	color: #4085be;
}

#align h3 {
	margin: 0;
	font-size: 16px;
}

#shots {
	position: absolute;
	left: 12px;
	top: 151px;
}

#secondary-content {
	float: left;
	width: 222px;
	padding-top: 65px;
}


#secondary-content p a:link,
#secondary-content p a:hover,
#secondary-content p a:focus,
#secondary-content p a:visited {
	color: black;
	/*text-decoration: none;*/
	font-size:14px;
}

#secondary-content h3 {
	margin: 0;
	padding: 12px 0 8px 7px;
	font-size: 1em;
	border: 1px solid #ccc;
	border-bottom: 0;
	font-weight: bold;
	line-height: 1.2em;
	background: #e6e6e6 url(/images/bg/conversation-header.jpg) top left repeat-x;
	
}

.bubble {
	display: block;
	padding-left: 26px;
	background: url(/images/bg/bubbles.gif) top left no-repeat;
}

.conversation {
	border: 1px solid #ccc;
	background: #eee;
	position: relative;
	padding: 0 4px 8px 4px;
	margin-bottom: 12px;
}

.conversation-window {
	padding: 0px 8px 8px 8px;
	background: #fff;
	height: 214px;
	position: relative;
	overflow: auto;
}

.conversation-window li {
	margin: 8px 0;
}

span.title {
	display: block;
}


p.more {
	margin: 2px 6px 0 12px;
	padding-top: 15px;
	height: 27px;
	background: url(/images/bg/peeps.jpg) top right no-repeat;
}

span.title a {
	color: #3883c4;
	text-decoration: none;
}

span.title a:hover {
	text-decoration: underline;
}

ul.no-bullet span.attribution {
	font-size: 11px;
	color: #999999;
	line-height: 1.3em;
	display: block;
}

p.more a#join, p.more a#join:visited {
	color: #3883c4;
	/*background: url(/images/bg/carat-o.gif) top left no-repeat;*/
	padding-left: 7px;
	padding-bottom: 0;
	text-decoration: none;
	vertical-align: middle;
	zoom: 1;
	margin-right: 2px;
}

p.more a#join:hover {
	text-decoration: underline;
}

#carat {
	vertical-align: middle;
/*	position: absolute;
	bottom: 17px;
	left: 12px;*/
}

.quote-wrap {
	border: 1px solid #ccc;
}

.quote {
	border: 4px solid #fff;
	background: url(/images/bg/quote.gif) top left repeat-x;
}

.quote p {
	background: url(/images/common/quote.gif) 6px 12px no-repeat;

	padding: 34px 12px 12px 12px;
	font-size: 1.083em;
	line-height: 1.333em;
}

.quote p span.attribution {
	font-weight: bold;
	display: block;
	margin-top: 4px;
	zoom: 1;
}

.quote p span.byline {
	display: block;
	font-size: 10px;
	line-height: 1.2em;
	margin-top: 4px;
	zoom: 1;
}


#footer-wrapper {
}

#footer {
	clear: both;
	width: 979px;
	margin: 0 auto 0 auto;
	padding: 16px 0;
}

#footer p {
	margin: 0;
}

#footer p.logo {
	position: absolute;
	right: 0;
	top: 0;
}

#footer {
	position: relative;
}

/*-- navigation ------------------*/

#mainnav {
	position: absolute;
	bottom: 6px;
	right: 7px;
	margin: 0;
	padding: 0;	
}

#mainnav li{
	float: left;
	margin: 0;
	padding: 0 7px;
	line-height: 1.1em;
	background: none;
	border-right: 1px solid #6B7583;
}	
	
#subnav {
}

#mininav {
	position: absolute;
	bottom: 35px;
	right: 5px;
	margin: 0;
	padding: 0;	
}

#mininav li{
	float: left;
	margin: 0;
	padding: 0 7px;
	line-height: 1.1em;
	background: none;
	border-right: 1px solid #6B7583;
}

/* form */


/* -- two-column forms -- */

/*form label {
	display: block;
}*/


form {
	padding-top: 0px;
	
}

form fieldset {
	padding: 0 0 0 0;
}

form select {
	margin: 0px 0;
	
}

form textarea {
	margin: 0 0;
}

form .rt-just input {
        display: block;
        width: 180px;
        float: left;
		margin: 3px 0;
}

form .rt-just label {
		float: left;
        text-align: right;
        width: 100px;
        padding-right: 0px;
        margin: 0px 0 0px 0;
}

form.general-form textarea, form.general-form select {
	float: left;
	width: 180px;
}

form.rt-just textarea {
	float: left;
	width: 180px;
}


form br {
    clear: left;
}

form input.button {
	width: auto !important;
	border: 0;
	
}

.chkboxlist{
	float: left;
	display: inline;
	margin-bottom: 10px;
}

.chkboxlist label{
	text-align:left !important;
	width: 150px !important;
	margin: 3px 0 5px 0 !important;
	padding: 0 !important;
}

.chkboxlist input{
	border: 0;
	margin: 3px 5px 0 0 !important;
	width: 13px !important;
	height: 13px !important;
	padding:0 !important;
}

.nolabel{
	margin-left: 108px; /* width of the label plus the padding */
	margin-bottom: 10px;
	clear: left;
}

.nolabel label{
	text-align: left !important;
	width: 150px !important;
	margin: 3px 0 5px 0 !important;
	padding: 0 !important;
}

.nolabel input{
	margin: 3px 5px 0 0 !important;
	width: 13px !important;
	height: 13px !important;
	padding: 0 !important;
}


/* columns */

form div.col {
	width: 100px;
	float: left;
	display: inline;
}

form div.col label {
	width: 70px !important;
}

form input.button {
	width: auto !important;
	border: 0;
	margin: 0px 0;
	
}

.submit-button {
	float: right;
	font-size: 14px;
	margin-right: 24px;
	width: auto !important;
	height: auto !important;
	cursor: pointer;
}

.asterisks {
	color:red;
	font-size:18px;
	font-weight:bold;
}

h1 {
	line-height: 1.2em;
}


.smaller {
	font-size: 20px;
	vertical-align: top;
}

/* fix eloqua */

form#webMethodsAlign {
	margin-top: 12px;
}

form#webMethodsAlign input {
	margin-bottom: 0;
}

td.LayoutTableRowStart {
	padding-top: 4px;
	vertical-align: middle;
	padding-right: 8px;
	text-align: right;
}

td select {
	margin-top: 5px;
}

#Subscribe_email_list {
	border: 0;
}