
#leftside {
	-moz-box-shadow: -7px 5px 12px #8F8F8F;
	-webkit-box-shadow: -7px 5px 12px #8F8F8F;
	-o-box-shadow: -7px 5px 12px #8F8F8F;
	box-shadow: -7px 5px 12px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	margin: 0 0 1em 0;
	float: left;
	position: relative;
	width: 17.3em;
	height: auto;
	background-color: #0E4167;
 *padding-bottom:1em;
}

#leftside h2, #leftside h2 a {
	background-color: #0E4167;
	color: #fff !important;
	font-size: 1.2em;
	padding: .4em .75em 0 .75em;
	margin-bottom: .1em;
}

#leftside h2:nth-child(1) { padding: .5em .75em 0 .75em; }

#leftside section {
	padding: .5em;
	margin: 0 1em;
	width: 17em;
	border: 1px solid #CCC;
	float: left;
	position: relative;
	top: 0;
}

#leftside section.box {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	behavior: url(/styles/PIE.htc);
	padding: 0 1em .5em 0;
	background-color: #fff;
	margin: .5em 1em 1em 1em;
	width: 14em;
	height: auto;
}

#leftside table { margin: 0 .2em; }

#rightside {
	top: 0;
	position: relative;
	height: 95%;
	float: left;
	width: 60em;
	background-color: #fff;
	margin: 0 .2em .5em .5em;
}

#leftside .css3button a, #leftside .css3button a:link, #leftside .css3button a:visited, #leftside2 .css3button a, #leftside2 .css3button a:link, #leftside2 .css3button a:visited { color: #fff; }

#leftside .css3button a:hover, #leftside2 .css3button a:hover {
	color: #E8E2BF;
	background-color: transparent;
}

#leftside .css3button { margin-left: 1.9em; }

/************* for top-level pages, same as Home page *******************************/
#leftside2 {
	margin-right: .5em;
	float: left;
	position: relative;
	height: auto;
}

#leftside2 #image_caption {
	width: 150px;
	padding: 0 0 10px 7px;
	height: auto;
}

#leftside2 h2 {
	background-color: #fff /*#e9e9e9*/;
	color: #0E4167;
	padding: .75em;
	width: 8.7em;
	margin: 1em auto;
	text-align: center;
}

#leftside2 a:link, #leftside a:visited { color: #0E4167; }

#leftside2 a:hover { color: #0E4167; }

#leftside2 section.box2 {
	-moz-box-shadow: -7px 5px 12px #8F8F8F;
	-webkit-box-shadow: -7px 5px 12px #8F8F8F;
	-o-box-shadow: -7px 5px 12px #8F8F8F;
	box-shadow: -7px 5px 12px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	border: 1px #ccc solid;
	padding: .75em .75em 1em .75em;
	background-color: #0E4167;
	margin: 0 .5em 1em 0;
	width: 14em;
	height: auto;
}

#leftside2 section section {
	width: 13.5em;
	margin: 0 auto;
}

#leftside2 section.box2 h2 { margin: .5em; }

#leftside2 table#calendar {
	margin-top: 0;
	padding-top: 0;
	width: 95%;
}

#leftside2 section:nth-child(2n) table { margin-top: 0; }

#leftside2 section:nth-child(2n) h2 { padding-bottom: .2em; }

#leftside2 .box2 p {
	margin-top: 0;
	padding-top: 0;
}

#rightside2 {
	position: relative;
	left: 0;
	margin-right: 0;
	top: 0;
	float: left;
	width: 59em;
	padding-bottom: 1em;
	height: auto;
}

/****************2 column pages with gray background*******************/
#rightside3 {
	top: 0;
	position: relative;
	height: 95%;
	min-height: 52em;
	float: left;
	width: 59em;
	background-color: #e9e9e9;
	margin: 0 .1em .5em .8em;
	padding: .8em .2em .5em .6em;
}

/**********************************************************************/

#centercontent {
	background-color: #e9e9e9;
	float: left;
	width: 40.8em;
	min-height: 43em;
	height: auto;
	clear: both;
	padding: .8em;
	margin: 0 .2em;
}

#centercontent_59 {
	background-color: #e9e9e9;
	float: left;
	width: 59em;
	height: auto;
	clear: both;
	padding: .8em;
	margin: 0 .2em;
}

#centercontent_wide {
	background-color: #e9e9e9;
	float: left;
	width: 74em;
	height: auto;
	padding: .8em;
	margin: 0 auto;
	margin-left: 1em;
}

/* for Tab pages  */
#centercontent>section {
	width: 38em;
	border: none; /*min-height:21em;*/
	margin-bottom: 1.5em;
	padding: .4em;
}

#centercontent>section .column1 {
	position: relative;
	float: left;
	width: 17.6em;
	margin: 0 .2em 0 .5em;
}

#centercontent>section .column2 {
	position: relative;
	float: left;
	width: auto;
}

#centercontent>section>section p { margin-top: 5em; }

#columns ul ul li, .columns ul ul li {
	background-image: none;
	list-style: disc;
	margin-left: .3em;
	padding-left: 0;
}
#columns ul ul ul li, .#columns ul ul ul li {
 background-image: none;
 list-style:disc;
 margin-left:1em;
 padding-left:0;
}

/* for landing pages */
#columns, .columns {
	width: 40em;
	margin: 0 auto;
	margin-bottom: 1em;
	clear: both;
	margin-top: .5em;
}

#columns-alt, .columns-alt {
	margin-bottom: 1em;
	clear: both;
}

#columns .column1, #columns .column20, .columns .column1, .columns .column20 {
	position: relative;
	float: left;
	width: 20em;
}

#columns .column2, .columns .column2 {
	position: relative;
	float: left;
	width: 20em;
}

#columns>section>section, .columns>section>section {
	background-color: #fff;
	margin: .5em .5em 1em .6em;
	padding: .5em;
	width: 17.6em;
	float: left;
}

/* when a nested section needs to be aligned with an H2 in a containing section*/
#columns>section>section>section, .columns>section>section>section { margin: .2em .5em; }

#columns .column8, .columns .column8 {
	position: relative;
	float: left;
	width: 8em;
}

#columns .column10, #columns-alt .column10, .columns .column10, .columns-alt .column10 {
	position: relative;
	float: left;
	width: 10em;
}

#columns .column12, #columns-alt .column12, .columns .column12, .columns-alt .column12 {
	position: relative;
	float: left;
	width: 12em;
}

#columns .column14, #columns-alt .column14, .columns .column14, .columns-alt .column14 {
	position: relative;
	float: left;
	width: 14em;
}

#columns .column16, #columns-alt .column16, .columns .column16, .columns-alt .column16 {
	position: relative;
	float: left;
	width: 16em;
}

#columns .column18, #columns-alt .column18, .columns .column18, .columns-alt .column18 {
	position: relative;
	float: left;
	width: 18em;
}
#columns .column20, #columns-alt .column20, .#columns .column20, .columns-alt .column20 {
 position:relative;
 float:left;
 width:20em;
}

#columns .column22, #columns-alt .column22, .columns .column22, .columns-alt .column22 {
	position: relative;
	float: left;
	width: 22em;
}

#columns .column24, #columns-alt .column24, .columns .column24, .columns-alt .column24 {
	position: relative;
	float: left;
	width: 24em;
}

#columns .column26, .columns .column26 {
	position: relative;
	float: left;
	width: 26em;
}

#columns .column28, .columns .column28 {
	position: relative;
	float: left;
	width: 28em;
}

#columns>section>section h2, .columns>section>section h2, #centercontent>section h2 {
	border: none;
	margin: 0;
	padding: .2em .5em;
}

/* when a nested section needs to be aligned with an H2 in a containing section and has an H3 at its beginning*/
#columns>section>section>section h3, .columns>section>section>section h3, #centercontent>section>section h3 {
	border: none;
	margin: 0;
	padding: .2em .5em 0 0
}

/*  Styles for online services buttons  */

.onlinebuttons {
	text-align: center;
	width: 10em;
	margin: 0 auto;
}

.onlinebuttons .buttongray { margin-top: .5em; }

.onlinebuttons .buttongray a { line-height: 1.6; }

.onlinebuttons .buttongray a:nth-of-type(2) { border-top: .15em solid #fff; } /* does not work in IE8 */

.onlinebuttons a, #pressimage a {
	width: 7.9em;
	/*background-color: #e9e9e9;*/
	margin: 0 auto;
	/*border:4px #999 solid;*/
	padding: .2em;
	text-align: center;
}

.onlinebuttons img {
	padding: 0;
	margin: 0 auto;
}  /* overrides default for images */

.onlinebuttons a:hover, #pressimage a:hover { background-color: transparent; }

.onlinebuttons .buttongray a:hover, #pressimage .buttongray a:hover {
	background-color: #E8E2BF;
	color: #0E4167;
}

/* 
.buttongray:nth-of-type(2) {  the space before MTA Help; oes not work in IE8  
	margin:.5em auto;	
}*/

/*************************************************/

/* used for right panel  */

#rightpanel {
	float: right;
	padding: 0 .8em .5em 0;
	width: 15em;
	height: auto;
	position: relative;
	top: 0;
	right: 0;
}

#rightpanelwide {
	float: right;
	padding: 0 .8em .5em 0;
	width: 22em;
	height: auto;
	position: relative;
	top: 0;
	right: 0;
}

#rightside2 #rightpanel section { margin-left: 1.9em; } /* compensates for the extra width of the left panel on top-level pages */

#rightpanel h2, #centercontent h2 {
	margin-top: 0;
	font-weight: bold;
	padding: .3em .5em;
	text-align: left;
}

#rightpanel h3, #centercontent h3 {
	margin-top: 0;
	font-weight: bold;
	padding: .3em;
	text-align: left;
}

#rightpanel section {
	border: 1px solid #ccc;
	background-color: #fff;
	-moz-box-shadow: -7px 5px 10px #8F8F8F;
	-webkit-box-shadow: -7px 5px 10px #8F8F8F;
	-o-box-shadow: -7px 5px 10px #8F8F8F;
	box-shadow: -7px 5px 10px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	margin: 0 auto;
	padding: .3em .3em .75em .3em;
	width: 15.4em;
	margin-bottom: 1em;
}

#rightpanel img { padding: 0; }

/* new right aside to replace the legacy version */
aside {
	float: right;
	-moz-box-shadow: -7px 5px 12px #8F8F8F;
	-webkit-box-shadow: -7px 5px 12px #8F8F8F;
	-o-box-shadow: -7px 5px 12px #8F8F8F;
	box-shadow: -7px 5px 12px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	border: 1px solid #CCC;
	background-color: #d0d6df;
	padding: 10px;
	margin: 0 1em 2em 2em;
	width: 17em;
	height: auto;
	top: 1em;
	right: 1em;
}

#pay h2 { text-align: center; }

#pay hr {
	width: 90%;
	margin: 0 auto;
	border: 2px solid #ccc;
	margin-top: .5em;
	margin-bottom: .3em;
}

/* used for existing right side aside-types */
#right {
	float: right;
	-moz-box-shadow: -7px 5px 12px #8F8F8F;
	-webkit-box-shadow: -7px 5px 12px #8F8F8F;
	-o-box-shadow: -7px 5px 12px #8F8F8F;
	box-shadow: -7px 5px 12px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	border: 1px solid #CCC;
	background-color: #d0d6df;
	padding: 10px;
	margin: 0 1em 2em 2em;
	width: 17em;
	height: auto;
	position: relative;
	top: 1em;
	right: 1em;
	clear: both;
}

#right h2 {
	margin-top: 0;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 1.2em;
	padding: .4em;
}

.right {
	float: right;
	-moz-box-shadow: -7px 5px 12px #8F8F8F;
	-webkit-box-shadow: -7px 5px 12px #8F8F8F;
	-o-box-shadow: -7px 5px 12px #8F8F8F;
	box-shadow: -7px 5px 12px #8F8F8F;
	behavior: url(/styles/PIE.htc);
	border: 1px solid #CCC;
	background-color: #d0d6df;
	padding: 10px;
	margin: 0 1em 1em 1em;
	width: 17em;
	height: auto;
	position: realtive;
	top: 1em;
	right: 1em;
	clear: both;
}

.right h2 {
	margin-top: 0;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0 .4em .4em .4em;
}

.right .box {
	padding: 0 .5em .5em .5em;
	background: white;
}

.right #sideAgenda { margin: 0; }

/* this style is used in the sortableTable.js to position the sort arrow for our tables */
.sortarrow {
	position: relative;
	bottom: -5px;
}

/********************************************************************************/
@media print {

#content, #rightside, #leftside, section {
	margin: 0;
	padding: 0;
	border: none;
}

#centercontent section, section, .box, #leftside, #rightpanel section {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	behavior: url(/styles/PIE.htc);
	border: none;
	padding: 0;
}

img { padding: 0; }
}