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:#B2B2B2;
min-width: 1024px;
}

body {
background: url("../images/bg-shade.gif") repeat-y scroll 0 0 transparent;
margin: 0 auto;
padding: 0 48px 36px;
width: 976px;
}

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: 26px;
color: #999;
border-bottom: 1px solid #999;
padding: 10px 0px 5px;
height: 1em;
}

h2 { /* ListAlert Titles, My Legislators, */
color: #990033;
font-family: Verdana,Helvetica,sans-serif;
font-size: 18px;
line-height: 22px;
text-decoration: none;
margin-bottom: 10px;
}

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.*/
margin: 10px 0 24px;
width: 100%; 
overflow: hidden;
}

/*Menu/Nav Styles
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/

#topnav, #footer, #footeraddr
{
    width: 974px;
    height: 40px;
    line-height: 40px;
}


#topnav
{
    background: transparent url(../images/bg-gradient.jpg) no-repeat 0 0;
}

#topnav table {
	margin: 0 auto;
}


.MenuContainer, .callout {
	background: url(../images/bg-callout.gif) no-repeat bottom;
	font-family: Arial, Helvetica, sans-serif;
	width: 212px;
	overflow: hidden;
}

.MenuContainer {  
float:left;
}

.MenuContainer h2, .callout h2 {
	background: url(../images/bg-callout-h2.gif) no-repeat;
	color: #fff;
	height: 47px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 47px;
	margin-bottom: 0;
	padding: 0 20px 0 17px;
}

.MenuContainer span, .callout span {
	display: block;
	padding: 15px 20px 0 17px;
}

.MenuContainer li a {
	background: url(../images/bg-menu-small.gif) no-repeat;
	color: #fff;
	display: block;
	font-size: 12px;
	font-weight: bold;
	height: 23px;
	line-height: 14px;
	margin-bottom: 15px;
	padding: 9px 20px 0;
	width: 135px;
}

.MenuContainer li a.large {
	background: url(../images/bg-menu-large.gif) no-repeat;
	height: 34px;
	padding-top: 8px;
}

li .rmText {
	padding: 0 12px 1px 0;
}

li.rmSeperator span.rmText {
	color: #000000 !important;
    font: 12px/40px Georgia,Arial,Helvetica,sans-serif !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 3px !important;
}

li.rmSeperator {
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

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

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

#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: 0 0 0 34px;
background-color:#fff;
width:690px; /*If the width is less then 485px then the styles of the Key Content page will need to adjusted as well. */
border-left: 1px solid #999;
margin-left: 34px;
min-height: 450px;
}
/* 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
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&*/
#footer {
    background: url(../images/bg-gradient.jpg) no-repeat scroll 0 0 transparent;
    font-size: 1.5em;
    margin: 30px 0 0;
    text-align: center;
}

#topnav, #footer, #footeraddr {
    height: 40px;
    line-height: 40px;
    width: 974
}

.greycopy {
    color: #999999;
}

.redcopy {
    color: #990033;
}

#footeraddr {
    text-align: center;
}

.greycopy a:link, .greycopy a:visited, .greycopy a:hover, .greycopy a:active {
    color: #999999;
    font-family: 'Lucida Grande','Lucida Sans',Sans-Serif;
    font-size: 9pt;
    font-style: normal;
    line-height: 14pt;
    text-decoration: none;
}

#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;
}


#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;
}

#shareyourstory label {display:inline-block; clear: both; width:125px; font-weight: bold; }
#tellafriend 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;}

label.long, #shareyourstory label.long {
	width: auto;
}

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

#LoginFormContainer {
	margin-bottom: 20px;
}

#LoginFormContainer ul li, .RegisterFormContainer ul li {
	list-style: none;
	margin-left: 0;
}

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

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


#left, #right {
	float: left;
	width: 324px;
}

#right {
	margin-left: 20px;
}


/* Index Page */
#LeftColumn{
width:400px;
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;
}