/* main layout blocks */

body {
margin:auto;
width:984px;
position:relative;
background:url("/tts/branding/img/body_bg_graystripe.gif");
}

#headA {
width: 912px; 
padding:0 36px;
background:url("/tts/branding/img/topnav_black_gloss.gif") repeat-x;
height:22px;
}

#headA1 {padding-top:3px; float:left; text-align:right; width:754px;}
	#headA1 a {color:white; text-decoration:none; font-size:11px; padding-right:16px;}
	#logo { padding-left:36px; padding-top:26px; width:200px; float:left;}
	#logo2 { padding-top:26px; width:712px; float:left; text-align:right;}
	
#bodyWrap { width:984px; /*background:url(/tts/branding/img/pgborder_sides.gif) repeat-y;*/ clear:both; margin:0; padding:0;}

#headB {
width: 984px; 
height:88px;
background:url("/tts/branding/img/wave3.png") repeat-x;
clear:both;
}

#headImage {
width: 984px; 
clear:both;
}

#siteNav {
clear: both;
width: 984px;
height:26px;
background: #00bdf2;
}

#main {
clear: both;
width: 984px;
background-color:#fff;
background-repeat:no-repeat;
/* background-image moved to site/css 3/4/2014 DL */
/*background-image:url("/tts/branding/img/homepage/main_image_tts_fade.jpg");*/
}

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

#contentOuter {
position:relative;
min-height:500px;
float:left;
background:#fff;
}

.noColumns #contentOuter {
position:static;
}

#leftFadeOverlay {
background-image:url("/tts/branding/img/navfade.png");
background-repeat: no-repeat; 
z-index:100;
position:absolute;
left:0px;
top:0px;
width:11px;
height:479px;
}

#rightFadeOverlay {
background-image:url("/tts/branding/img/navfade.png");
background-repeat: no-repeat; 
z-index:100;
position:absolute;
left:0px;
top:0px;
width:11px;
height:479px;
}

#localNav {float:left; width:237px;}
.leftRight #contentOuter {width:510px; }
.leftRight #content {width:438px; padding:0 0 0 36px ;  margin-top:10px}
.leftOnly #contentOuter {width:747px; }
.leftOnly #content {width:675px; padding:0 0 0 36px;  margin-top:10px}
.rightOnly #contentOuter {width:747px; }
.rightOnly #content {width:675px; padding:0 36px 0 36px;  margin-top:10px }
.noColumns #contentOuter {width:984px;}
.noColumns #content {width:912px; margin:10px 36px 10px 36px; }

#rcolumnOuter {float:left; position:relative; min-height:500px; width:237px;}
#rcolumn {margin-top:10px; width:167px; padding:0 0 0 36px; }				


/* TOP NAVIGATION - merged from top_nav.css on 3/17/14 DL*/
/* KEEP THIS SECTION IN SYNC WITH top_nav.css - STILL USED FOR COMMERCIAL CARDS - 10/10/14 - DL */

/* Get rid of the margin, padding and bullets in the unordered lists */
#menu, #menu ul {padding:0; margin:0 0 0 26px; list-style-type: none; height:26px; }

/* Set up the link size, color and borders */
#menu a, #menu a:visited {display:block; font-size:11px; height:20px; font-weight:bold; color:#fff; text-decoration:none; 
/*url(/transactionservices/home/img/_r12/wave-short-hi.png) repeat-x;*/}
#menu a:hover, #menu a.mm-select, #menu a:active {background-color:#008ce6 }
#menu .selected a, #menu .selected a:hover, #menu .selected a:visited {background-color:#008ce6}

/* Set up the list items */
#menu li {float:left;  }
#menu li a {padding:6px 8px 0px 8px;  height:20px; margin:0; display:block; }

*html #menu li , *html #menu li a, *html #menu a:visited {
display: inline-block;
}

#menu li.selected {background-color:#008ce6}
#menu li.selected a {background-color:#008ce6}

#siteNav .subnav  {clear:both; width:944px;  margin-left:26px; height:26px;}

ul.sub {list-style-type:none; padding:6px 0 0 0; margin:0 0 0 0; font-size:11px; }
.sub li {display:block; float:left; padding:0 6px 0 0; border-right:1px solid #999; margin:0 6px 0 0; }
.sub li.last {border-right:none}
.sub .selected {font-weight:bold}
.sub a, .sub a:visited, .sub a.selected:hover, .sub a.selected:active  {color:#333; text-decoration:none}
.sub a:hover, .sub a:active {color:#006; text-decoration:underline}


#corpNav ul, #corpNav3 ul {padding:0; margin:0; list-style-type:none; }
#corpNav ul.secondrow, #corpNav3 ul.secondrow {clear:both; border-top:1px solid #ccc;}
#corpNav li, #corpNav3 li {
        list-style-type: none;
        padding: 0;        
        margin: 0;
        /*height: 20px;*/
        display: block;
        float: left;
}

#corpNav a, #corpNav3 a {
        color: #000;
        text-decoration: none;
        display: block;
        padding: 0 ;
}

.small_mobile {display:none}
.mobile_left_menu_icon {display:none;}
.mobile_overlay {
    display : none;	background-color : black;    width : 100%;    height : 100%;    opacity : 0.67;    position : absolute;    z-index : 10;}

/* TABS */
		.cititabs-container{
			width: 100%;
			margin: 0 auto;
		}



		ul.cititabs{
			width: 100%;
			margin: 0px;
			padding: 0px;
			list-style: none;
			background:url("/tts/branding/img/tabs-bottom.jpg") bottom repeat-x;
		}
		ul.cititabs li{
			color: #008ce6;
			font-size:12px;
			font-weight:bold;
			display: inline-block;
 			margin-right: -4px;
			padding: 10px 10px;
			cursor: pointer;
			border-right:1px #aaa solid;
			border-bottom:1px #aaa solid;
			background:url("/tts/branding/img/tab_bg_graystripe.gif") no-repeat left top;
		}

		ul.cititabs li.current{
			background:none;
			color: #002d72;
			border-bottom:1px #fff solid;
			background:url("/tts/branding/img/tab_bg_nostripe.gif") no-repeat left top;
		}

		.cititabs-content{
			clear:both;
			display: none;
			padding: 15px;
		}

		.cititabs-content.current{
			display: inherit;
		}


@media screen and (min-width: 984px) {
	#siteNavAccordion, .mobile_overlay  {
		display:none !important;
	}
		
}


@media screen and (max-width: 983px) {

/* RESPONSIVE DESIGN ACCORDION MENU FOR SMALL MOBILE DEVICES */

#siteNavAccordion {
    border-top:1px solid #00ACE1;
		background:#eeeeee;
    width: 100%;
    margin: 0 auto;
		position:absolute;
		top:111px;
		left:0;
		display:none;
		z-index: 200;
}

/* accordion header */
#siteNavAccordion h2, #siteNavAccordion h3 {
    background-color:#00bdf2;
    margin:0;
    padding:10px 5px 10px 3%;
    font-size:18px;
    font-weight:bold;
    border-bottom:1px solid #ddd;
    cursor:pointer;
		color: #ffffff;
		
}
#siteNavAccordion h2 a, #siteNavAccordion h3 a {color: #ffffff; text-decoration:none}
#siteNavAccordion h2 span, #siteNavAccordion h3 span {
	padding-left:10px
}
/* currently active header */
#siteNavAccordion h2.current, #siteNavAccordion h3:hover {
    cursor:default;
    background-color:#008ce6;
}

/* accordion pane */
#siteNavAccordion .pane {
    display:none;
    height:auto;
    font-size:14px;
}

#siteNavAccordion .pane ul {
		margin:0 0 0 0;
		padding:0 0 0 0;
}
#siteNavAccordion .pane li {
		list-style:none;
		border-bottom: 1px dotted #333333;
    padding:10px 5px 10px 3%;
		margin:0 0 0 0;
}

#siteNavAccordion .pane li a {
	color:#666;
	text-decoration:none;
	padding-left: 10px;
	
}

#siteNavAccordion .pane li a:hover {
	color:#333;
	text-decoration:underline;
	
}

}

/** TEMP ACCORDION OVERRIDES **/

#siteNavAccordion h2, #siteNavAccordion h3 {
    font-weight: normal;    font-size: 18px !important;    border-bottom: 1px solid #00ACE1 !important;}

#siteNavAccordion .pane {
    display:none;
}
/*#siteNavAccordion .pane li {
    border-top: 1px solid #FFF;}*/

#siteNavAccordion .pane li a {
    display : block;
		font-size: 18px;}




/* LEFT COLUMN - merged from left_nav.css on 3/17/14 DL*/

#nav {width:237px; }

/* link styles */
#nav li a {margin:0 0 0 0;
        padding:10px 12px 10px 36px;
        display:block;
        width:189px;
        font:normal 13px Arial, Helvetica, sans-serif;
        color:#888888;
        text-decoration:none;
     }
		 
#nav li li a {
        padding:0px 12px 8px 46px;
        width:179px;
     }
#nav li li li a {
        padding:0px 12px 8px 56px;
        width:169px;
     }

#nav li li li li a {
        padding:0px 12px 8px 66px;
        width:159px;
     }
	 
#nav li li li li li a {
        padding:0px 12px 8px 76px;
        width:149px;
     }
	 
#nav li li li li li li a {
        padding:0px 12px 8px 86px;
        width:139px;
     }

#nav a:hover {color:#008ce6;}
#nav a.active {color:#002d72; }

/* Main menu items */
#nav ul {margin:20px 0 0 0; padding:0 0 1px 0; font:normal 13px Arial, Helvetica, sans-serif; color:#333; list-style-type:none; background:transparent url("/tts/branding/img/leftnav_none.gif") no-repeat right bottom;}
#nav ul li {list-style-type:none; background:transparent url("/tts/branding/img/leftnav_top.gif") no-repeat right top;
}
	
/* Sub menu items */
#nav ul ul,
#nav ul ul ul {display: none; margin:0 0 0 0; padding:0 0 0 0; background:none;
}

/* Level 1 */
#nav ul li.open ul {display:block;  }
#nav ul li.open {background:transparent url("/tts/branding/img/leftnav_l1_top_open.png") no-repeat left top;}
#nav ul li.open ul ul {display:none;}
#nav ul li.open li {background:none;}

/* Level 2 */
#nav ul ul li.open ul {display:block;}
#nav ul ul li.open {background:transparent url("/tts/branding/img/leftnav_l2_top_open.png") no-repeat left top;}
#nav ul ul li.open ul ul {display:none; }
#nav ul ul li.open li {background:none;} 

/* Level 3 */
#nav ul ul ul li.open ul {display:block;}
#nav ul ul ul li.open {background:transparent url("/tts/branding/img/leftnav_l2_top_open.png") no-repeat left top;}
#nav ul ul ul li.open ul ul {display:none; }
#nav ul ul ul li.open li {background:none;} 

/* Level 4 */
#nav ul ul ul ul li.open ul {display:block;}
#nav ul ul ul ul li.open {background:transparent url("/tts/branding/img/leftnav_l2_top_open.png") no-repeat left top;}
#nav ul ul ul ul li.open ul ul {display:none; }
#nav ul ul ul ul li.open li {background:none;} 

/* Level 5 */
#nav ul ul ul ul ul li.open ul {display:block;}
#nav ul ul ul ul ul li.open {background:transparent url("/tts/branding/img/leftnav_l2_top_open.png") no-repeat left top;}
#nav ul ul ul ul ul li.open ul ul {display:none; }
#nav ul ul ul ul ul li.open li {background:none;} 

/* FOOTER */

#footer {
clear: both; background-color:#fff; width:912px;  padding:36px 36px 36px 36px;
background:#fff;
}

	#corpNav1 {float:left; }
	#corpNav {float:right; padding-bottom:4px; }
#innerFoot {clear: both; width: 912px;}
	#footcol1 {float:left;}
	#footcol2 {float:right; text-align:right;}
	#footcol1 a, #footcol2 a {font-size: 10px; }
	.foot {font-size: 11px; color:#999}

/* new layout 3/13/15 */
	#corpNav2 {float:left; width:150px}
	#corpNav3 {width:912px}




/* MULTI-COLUMN */

/* multi-column inserts to be used with the .noColumns (1-column) template only
   these can be stacked (i.e. shelving units) to create modular page layouts */
   
/* 2 columns -  standard left column width */
.insert2colL .column1 {width:201px; margin-right:36px; float:left;}
.insert2colL .column2 {width:675px; float:left;}
   
/* 2 columns -  standard right column width */
.insert2colR .column1 {width:675px; margin-right:36px; float:left;}
.insert2colR .column2 {width:165px; float:left;}
   
/* 2 columns -  equal size */
.insert2col .column1 {width:438px; margin-right:36px; float:left;}
.insert2col .column2 {width:438px; float:left;}
   
/* 3 columns - standard left and right column width */
.insert3colLR .column1 {width:201px; margin-right:36px; float:left;}
.insert3colLR .column2 {width:438px; margin-right:36px; float:left;}
.insert3colLR .column3 {width:165px; float:left; }
   
/* 3 columns - equal size */
.insert3col .column1 {width:280px; margin-right:36px; float:left;}
.insert3col .column2 {width:280px; margin-right:36px; float:left;}
.insert3col .column3 {width:280px; float:left; }

/* 3 columns - standard left column width, make other two even */
.insert3colL .column1 {width:201px; margin-right:36px; float:left;}
.insert3colL .column2 {width:320px; margin-right:35px; float:left;}
.insert3colL .column3 {width:320px; float:left; }

/* 3 columns - standard right column width, make other two even */
.insert3colR .column1 {width:320px; margin-right:35px; float:left;}
.insert3colR .column2 {width:320px; margin-right:36px; float:left;}
.insert3colR .column3 {width:201px; float:left;}
			
/* 4 columns - standard left and right column width */
.insert4col .column1 {width:201px; margin-right:36px; float:left;}
.insert4col .column2 {width:201px; margin-right:36px; float:left;}
.insert4col .column3 {width:201px; margin-right:36px; float:left;}
.insert4col .column4 {width:201px; float:left;}
			
/* 4 columns - all four equal column width */
.insert4colequal .column1 {width:201px; margin-right:36px; float:left;}
.insert4colequal .column2 {width:201px; margin-right:36px; float:left;}
.insert4colequal .column3 {width:201px; margin-right:36px; float:left;}
.insert4colequal .column4 {width:201px; float:left;}

/* 5 columns standard left column width */
.insert5colL .column1 {width:201px; margin-right:36px; float:left;}
.insert5colL .column2 {width:142px; margin-right:36px; float:left;}
.insert5colL .column3 {width:142px; margin-right:36px; float:left;}
.insert5colL .column4 {width:142px; margin-right:35px; float:left;}
.insert5colL .column5 {width:142px; float:left}

/* 5 columns standard right column width */
.insert5colR .column1 {width:142px; margin-right:36px; float:left;}
.insert5colR .column2 {width:142px; margin-right:36px; float:left;}
.insert5colR .column3 {width:142px; margin-right:36px; float:left;}
.insert5colR .column4 {width:142px; margin-right:35px; float:left;}
.insert5colR .column5 {width:201px; float:left;}

/* 5 columns standard left and right column width */
.insert5colLR .column1 {width:201px; margin-right:36px; float:left;}
.insert5colLR .column2 {width:122px; margin-right:36px; float:left;}
.insert5colLR .column3 {width:122px; margin-right:36px; float:left;}
.insert5colLR .column4 {width:122px; margin-right:36px; float:left;}
.insert5colLR .column5 {width:201px; float:left;}


/* 5 columns - all five equal column width */
.insert5colequal .column1 {width:154px; margin-right:36px; float:left;}
.insert5colequal .column2 {width:154px; margin-right:36px; float:left;}
.insert5colequal .column3 {width:154px; margin-right:35px; float:left;}
.insert5colequal .column4 {width:154px; margin-right:35px; float:left;}
.insert5colequal .column5 {width:154px; float:left;}

/* 
multi-column inserts to be used with the .leftOnly (2-column) template only
*/

/* transform 2 column layout (.leftOnly) to 3 columns - standard left column width, other two equal size */
.transform2to3L .column1 {width:320px; margin-right:35px; float:left;}
.transform2to3L .column2 {width:320px; float:left;}

/* transform 2 column layout (.leftOnly) to 3 columns - standard left and right column width */
.transform2to3LR .column1 {width:438px; margin-right:36px; float:left;}
.transform2to3LR .column2 {width:201px; float:left;}

/* transform 2 column layout (.leftOnly) to 4 columns - standard left and right column width */
.transform2to4L .column1 {width:201px; margin-right:36px; float:left;}
.transform2to4L .column2 {width:201px; margin-right:36px; float:left;}
.transform2to4L .column3 {width:201px; float:left; }
   
/* transform 2 column layout (.leftOnly) to 5 columns */
.transform2to5L .column1 {width:142px; margin-right:36px; float:left;}
.transform2to5L .column2 {width:142px; margin-right:36px; float:left;}
.transform2to5L .column3 {width:142px; margin-right:35px; float:left;}
.transform2to5L .column4 {width:142px; float:left;}

/*
multi-column inserts to be used with the .rightOnly (2-column) template only
*/

/* transform 2 column layout (.rightOnly) to 3 columns - standard right column width, make other two even */
.transform2to3R .column1 {width:320px; margin-right:35px; float:left;}
.transform2to3R .column2 {width:320px; float:left;}

/* transform 2 column layout (.rightOnly) to 3 columns - standard left and right column width */
.transform2to3LRR .column1 {width:201px; margin-right:36px; float:left;}
.transform2to3LRR .column2 {width:438px; float:left;}

/* transform 2 column layout (.rightOnly) to 4 columns - standard left and right column width */
.transform2to4LR .column1 {width:201px; margin-right:36px; float:left;}
.transform2to4LR .column2 {width:201px; margin-right:36px; float:left;}
.transform2to4LR .column3 {width:201px; float:left;}

/* transform 2 column layout (.rightOnly) to 4 columns - standard right column width */
.transform2to4R .column1 {width:201px; margin-right:36px; float:left;}
.transform2to4R .column2 {width:201px; margin-right:36px; float:left;}
.transform2to4R .column3 {width:201px; float:left;}

/* ransform 2 column layout (.rightOnly) to 5 columns */
.transform2to5R .column1 {width:142px; margin-right:36px; float:left;}
.transform2to5R .column2 {width:142px; margin-right:36px; float:left;}
.transform2to5R .column3 {width:142px; margin-right:35px; float:left;}
.transform2to5R .column4 {width:142px; float:left;}

/*
multi-column inserts to be used with the .leftRight (3-column) template only
*/
   
/* transform 3 column layout (.leftRight) to 4 columns */
.transform3to4 .column1 {width:201px; margin-right:36px; float:left;}
.transform3to4 .column2 {width:201px; float:left;}

/* transform 3 column layout (.leftRight) to 5 columns */
.transform3to5 .column1 {width:122px; margin-right:36px; float:left;}
.transform3to5 .column2 {width:122px; margin-right:36px; float:left;}
.transform3to5 .column3 {width:122px; float:left;}