html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/*Defined html elements *
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
html {
background-color:#D8D4C9;
}

body {
margin-top:10px;
border:1px solid #000;
line-height: 1.25; 
color: black;  
background: white; 
width:795px;
margin-left:auto; /* The left & right margin being set to auto will make the page centered*/
margin-right:auto; /* The left & right margin being set to auto will make the page centered*/
background-color: #ffffff; 
text-align:left;
font-size:12px;
font-family:Arial, Helvetica, sans-serif; 
position:relative;
}

ol, ul {
list-style: none;
}

p {
padding:5px 0;
}

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


a { 
color: #30639A; 
}

a:link, a:visited, a:active { 
text-decoration: none; 
}

a:hover { 
text-decoration: underline; 
}

h1 { /* Page Titles */
font-weight: 700; 
font-size: 1.85em; 
color: #777;

}

h2 { /* ListAlert Titles, My Legislators, */
font-weight: 700; 
font-size: 1.3em;
color: #30639A; 
background-color: #F0F8FF;
}

h3{ /* SubHead used on Composeletters, MyInfo (User Name), My Legislators */
font-weight: 700;
font-size:1.1em;
}

hr { /* Used under titles, between letter on ComposeLetters Page */
margin-bottom:15px;  /* "h1 has a Negative Margin to bring this directly under the Title, if this is changed the h1 should be looked at too */
margin-top:15px;
background-color:#CCCCCC;
height:1px;
border-style:none;
border-width:0;
}

textarea{ /* Used to set the size of the textarea on composeletters page & Tell-Ariend */
width:100%;
height:150px;
}


label { 
cursor: pointer; 
display:block;
width:80px;
position:relative;
float:left; 
margin:5px 0 0 0;
clear:both;
}

input, select {margin-top:3px; }

radio {width:1em;}

strong {font-weight:700;}


table{
border-collapse:collapse;
}



/* Styles used by the includes 
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

/*Header Styles
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
#MainHeaderContainer{
text-align:center; /* Centers the banner */
}

	#color-bar{
	width:795px;
	height:25px;
	background-color:#C42845;
	border-top:3px solid #BAC1DD;
	text-align:center;
	color:#fff;
	font-size:1.5em;
	padding-top:4px;
	font-weight:700;
	}
/*Body Container holds the other three containers ImageBar, Nav, & ContentContainer
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
.BodyContainer { /* This holds the main area includeing Nav,Main and Image Bar.*/
width: 100%; 
}

/*Menu/Nav Styles
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
.MenuContainer {  
float:left;
background-color:#BAC1DD;
width:145px;
_width: 140px;
padding: 5px;
}



.MenuContainer li{
/* UnComment this if you would like a Menu under the banner
float:left;*/
line-height:1.8;
}


.MenuContainer li a:link, .MenuContainer li a:visited, .MenuContainer li a:active { 
color: #464646; 
display:block;
padding-left:10px;
font-size: 1em;
font-weight:700;
width:145px; /*  This is need to make IE6 work correctly, this value should be the width of the Container - all padding and margins */
_width: 135px;
}

.MenuContainer a:hover { 
text-decoration:underline;
}

#LoggedInContainer {
	float: left;
	display: block;
	background-color: #FFF;
	width: 100%;
	margin: 10px 0 -5px -5px;
	_margin: 10px -5px -5px;
	padding: 10px;
	text-align: center;


/*
width:143px;
border:1px solid #777;
background-color:#fff;
float:left;
padding:10px;
display:block;*/
}

* > #LoggedInContainer{ /* This alternate style is for IE *//*
width:133px;
border:1px solid #777;
background-color:#fff;
float:left;
*margin: 10px 0 -5px;
padding:10px;
display:block;  */
}

/*Main Container Area Styles
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
.ContentContainer {  /* This holds the main area that all the funtionality of the site is in.*/
float:left;
padding:10px;
background-color:#fff;
width:610px; /*If the width is less then 485px then the styles of the Key Content page will need to adjusted as well. */
}
/* If this style where uncommented it would control the size of the Content Container for only the AlertDetail Page.
This technique can be used to over ride any style on a page by page level (Always place the page id first).
#AlertDetail .ContentContainer {  
padding:10px;
width: 400px;
}
*/

/*Footer Area Styles
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/

#MainFooterContainer {  /* This holds the mainfooter include file.*/
clear:both;
text-align:center;
}

#MainFooterContainer .copy{
font-size:.8em;
}




#btnLogin, #btnRegister, #btnTakeAction, #btnRedirect {
	cursor: pointer;
	border: none;
	background-color: transparent;
	background: url(../images/register-button.gif) no-repeat left top;
	width: 128px;
	height: 26px;
}


.RegisterFormContainer { /* This is a container that holds the three elements of the edit form (RequiredMark, label, input) */
width:25.5em; /* Width should be just bigger then the three elemets combined */
}

#Register br { /* This creates line brake between form elements */
clear:both;
}

.RegisterSumitButton{
margin-top:10px;
background-image:url('../images/SubmitButton.gif');  
border:none;
background-repeat:no-repeat; 
background-color:transparent; 
width:179px;  /* Should be the width of the image */
height:22px;  /* Should be the height of the image */
cursor:pointer;
margin-bottom:5px;
}



/*TellAFriend
//////////////////////////////////////////////////////////////////////////////////////////////////*/

#TellAFriend .TellAFriendSumitButton{
background-image:url('../images/SubmitButton.gif');  
border:none;
background-repeat:no-repeat; 
background-color:transparent; 
width:179px;  /* Should be the width of the image */
height:22px;  /* Should be the height of the image */
cursor:pointer;
}


#tellafriend label, #shareyourstory label {display:block; clear:both; margin:15px 0 0 0; width:300px; }
#tellafriend input,  {width:300px; clear:both; display:block; margin-top:3px; }
#tellafriend textarea, #shareyourstory textarea { height:220px; width:100%; clear:both; display:block; margin-top:3px;}

#shareyourstory #btnShareStory, #tellafriend #btnEmailFriend {
	width: auto;
	margin: 10px 0;
}


.RegistrationForm{ margin:0 8px 8px 0; padding:5px; width:238px;}

.RegistrationForm select#other{width:18em; }


/* Index Page */
#LeftColumn{
width:345px;
position:relative;
float:left;
}

#LeftColumn2 {
	float: left;
	position: relative;
	width: 100%;
}

#RightColumn{
width:250px;
position:relative;
float:right;
}

#tx-letter, #SelectedLetterBody, .tx-letter {
width:95%;
height:350px; /* this will have to change depending on height of letter */
color:#777;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
background-color:#e6e5e3;
border:1px solid #ccc;
padding:8px;
}

#tx-letter2{
width:98%;
height:400px; /* this will have to change depending on height of letter */
color:#777;
margin-left:8px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
background-color:#e6e5e3;
border:1px solid #ccc;
padding:8px;
}




/* Learn page */

.ContentContainer li{
list-style-type:disc;
padding:5px;
margin-left:30px;
}

.TellAFriendContainer{
width:350px;
margin:auto;
}

.clear{
clear:both;
}

.small {
font-size:9px;
}
.error {
	display: block;
	margin: 1em 0;
	color: #F00;
}
.noshow {
	display: none;
}