/*
Table of contents
============================

        last-updated: 5 November 2012
        updated by Matt Addison

        =1. universal reset
        =2. accessibility features
        =3. html and body
        =4. typography
        =5. layout
        =6. main navigation
        =7. form
        =8. tables
        =9. links

============================
*/

/*
=1. universal reset
============================
*/

*       {
        /* set the fonts to a uniform size, including form fields as well as all headings etc. */
        font-size: 100%;
        margin: 0;
        padding: 0;
}

/*
=2. accessibility features
============================
*/

#MBCHOICE4 .pageHeading,
#MBCHOICE1 table,
#MBCHOICE2 table,
#MBCHOICE3 table,
#MBCHOICE4 table,
#MBCHOICE5 table,
#DEPDETV table,
#printoption,
.printHide,
#idPrintLogoff,
#optionsnav,
.cookietrail,
#togglebutton,
#MBCHOICE1 .submit-wrap h3,
#MBCHOICE3 .submit-wrap h3,
#MBCHOICE4 .submit-wrap h3,
#MBCHOICE5 .submit-wrap h3,
.submit-wrap input,
.noprint,
.hide,
p .greysubmit,
#unit   {
        width: 0px;
        position: absolute;
        left: -9999px;
        overflow: hidden;
        }
		
.printThis {
        width: auto;
        position: static;
		display: block;
}
	
#optionsnav2,
#furtheroptionsnav,
#addrow,
#addfoot,
.showhidewrap,
#netPayWrap,
#leftframe,
.cell1	{
	height: 0;
	display: none;
	}
	
#MBCHOICE1 .ruler td input	{
	width: auto;
	}

#MBCHOICE1 #user-details table,
#MBCHOICE1 #table4,
#MBCHOICE1 table.details,
#MBCHOICE1 table.ruler,

#MBCHOICE2 #user-details table,
#MBCHOICE2 #table4,
#MBCHOICE2 table.noborder-bot,
#MBCHOICE2 table.noborder-bot td.col2 table,
#MBCHOICE2 table.noborder-bot td.col4 table.show,

#MBCHOICE3 #user-details table,
#MBCHOICE3 #table4,
#MBCHOICE3 table.noborder-bot,
#MBCHOICE3 table.ruler,
#MBCHOICE3 table.noborder-bot td.col2 table,
#MBCHOICE3 table.noborder-bot td.col4 table.show,

#MBCHOICE4 table.noborder-bot,
#MBCHOICE4 table.ruler,

#MBCHOICE5 table.noborder-bot,
#MBCHOICE5 table.ruler,
#MBCHOICE5 #user-details table,
#MBCHOICE5 table.noborder-bot td.col2 table,
#MBCHOICE5 table.noborder-bot td.col4 table.show,

#viewpd1 table,

#DEPDETV #table4,
#DEPDETV table.ruler  {
        position: static;
        width: 100%;
        overflow: auto;
        left: 0;
        }

#MBCHOICE1 td h5,
#MBCHOICE2 td h5,
#MBCHOICE3 td h5,
#MBCHOICE4 td h5,
#MBCHOICE5 td h5	{
	margin: 0;
	display: block;
	text-align: left;
	font-size: 1em;
	display: none;
	}

/*#container th span.annual,
#container th span.monthly,
*/#MBCHOICE1 #container .ruler .col8,
#MBCHOICE2 #container .noborder-bot .col5 input,
#MBCHOICE5 #container .last .col4,
#MBCHOICE5 #container .noborder-bot .col4 input {
	display: none !important;
	}

acronym,
abbr    {
        cursor: help;
        }
		
#content,
#tab02,
#tab03,
#tab04,
#tab05	{
	page-break-after: always;
	}
	
.newpage {
	page-break-before: always;
	}
	
#container span.annual,
#container span.monthly,
#container span.showmonth,
#container span.showyear {
	/*margin-top: -18px;
	display: block !important;*/
	width: 100%;
	z-index: 3;
	position: relative;
	text-align: right;
        }

#container #p_flexallspent .showhidewrap  {
	display: none !important;
        }

#container #flexallspent.hide,
#container #flexallow2.hide,
#container #flexallbal.hide,
#container #flexsaltotal.hide,
#MBCHOICE3 #container #flexsaltotal.show {
	display: block !important;
	width: 100%;
	z-index: 3;
	left: 0;
	position: relative;
	height: auto;
	text-align: right;
	margin-top: -18px;
        }

#container #flexallspent.show,
#container #flexallow2.show,
#container #flexallbal.show,
#container #flexsaltotal.show,
#MBCHOICE3 #container #flexsaltotal.hide {
	display: none !important;
        }

#container span.show {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
}
	
/*
=3. html and body
============================
*/

html    {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        font-size: 100%;
        line-height: 1;
        }

body    {
        font-size: 10px; /* equates to about 12.16px on most browsers */
        line-height: 1.8; /* equates to about 18.24px on most browsers */
        margin:0;
        padding:0;
        color: #414141;
        }

/*
=4. typography
============================
*/

h1, h2, h3, h4, h5, h6, caption, .pageHeading, legend, dt   {
        font-family: Arial, Helvetica, sans-serif;
        color: #4B4B4B;
        font-weight: bold;
        }
h1,
h2,
.pageHeading    {
        color: #4B4B4B;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.8em;
        line-height: 1;
        margin-bottom: 1em;
        }
		
.pageHeading    {
        padding-bottom: 1em;
        }
		
h3      {
        font-size: 1.6em;
        line-height: 1.125;
        margin-bottom: 1.125em;
        }
		
h4      {
        font-size: 1.4em;
        line-height: 1.286;
        margin-bottom: 1.286em;
        }
		
h5      {
        font-size: 1.4em;
        line-height: 1.286;
        margin-bottom: 1.286em;
        }
		
h6      {
        font-size: 1.2em;
        line-height: 1.5;
        margin-bottom: 1.5em;
        }
		
p, li, dd, address     {
        font-size: 1.4em;
        line-height: 1.286;
        margin-bottom: 1.286em;
        }

ul, ol  {
        padding: 0 24px;
        }

dl      {
        padding: 0;
        }

dl dl   {
        padding: 0 22px;
        }

dt      {
        font-size: 1.6em;
        line-height: 1.125;
        margin-bottom: 1.125em;
        }

dd      {
        padding: 0 1.5em 0 0;
        }
		
ol ol   {
        list-style-type: lower-roman;
        }
		
ul ul,
ul ol,
ol ol,
ol ul,
dl dl,
dl ul,
dl ol   {
        font-size: 0.72em;
        line-height: 1.8;
        margin: 1.8em 0 0 0;
        }
		
blockquote      {
        font-style: italic;
        margin: 0 0 1.8em 0;
        padding: 1.8em 12px 0 12px;
        border: 1px solid #ccc;
        border-width: 1px 0;
        color: #414141;
        background-color: #f5f6f6;
        }

code    {
        font-family: "Courier New", Courier, monospace;
        font-size: inherit;
        color: #3399cc;
        }

em      {
        color: #333;
        font-style: normal;
        }
h1 em,
h2 em,
h3 em   {
        font-style: normal;
        color: #4B4B4B;
        }
		
strong  {
        font-weight: bold;
        font-size: inherit;
        }
		
.superstrong {
        font-weight: bold;
        font-style: italic;
}

.warning {
 color: #ff0000;
}


#MBCHOICE2 .submit-wrap h3	{
	font-size: 1em;
	font-weight: normal;
	color: #333;
	}

.intropanel	{
	border: 1px solid #ccc;
	padding: 1em;
	width: auto;
	}
	
#container table.ruler td.heading {
	background-color: #898D94;
	border-bottom: 1px solid #e6e6e6;
}
	
.heading em {
	color: #fff;
	font-style: normal;
	font-weight: normal;
}

#MBCHOICE3 .submit-wrap {
	clear: both;
	padding-top: 18px;
}

/*
=5. layout
============================
*/

#header {
	margin-bottom: 20px;
}

#MBCHOICE5 #header {
	position: relative;
	margin-bottom: 30px;
	top: -100px;
	left: 0;
}

#MBCHOICE5 #user-details {
	position: relative;
	top: 100px;
	left: 0;
}

/*
=6. main navigation
============================
*/



/*
=7. form
============================
*/

legend  {
        font-size: 1.5em;
        line-height: 1em;
        margin-bottom: 1.125em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: left;
		color: #333;
        }

* html legend  {
	margin-left: -6px;
	}

form p  {
        float: none;
        clear: both;
        width: auto;
        }

fieldset p   {
        float: left;
        clear: both;
        width: 100%;
        }

fieldset,
fieldset.fullwidth      {
        width: 90%;
        float: left;
        clear: both;
        border: 0px solid #71cef5;
        margin: 0 5% 18px 5%;
        padding: 0;
        }

fieldset fieldset       {
        border: 0px solid #71cef5;
        clear: both;
        float: none;
        padding: 0;
        margin: 0;
        }

label   {
        position: relative;
        float: left;
        width: 200px;
        padding-right: 1em;
        }

#options label   {
        position: static;
        width: 38%;
        padding: 0;
        display: block;
        line-height: 23px;
        margin-right: 4px;
        }
        
table label     {
        position: static;
        float: none;
        clear: both;
        width: auto;
        padding: 0;
        }

select,
input   {
        position: relative;
        width: auto;
        }

fieldset select  {
        float: left;
        }

fieldset input  {
        width: 85px;
        float: left;
        line-height: 23px;
		height: 25px;
        margin-right: 4px;
        }

fieldset p.highlight input,
fieldset input.tickbox  {
        width: auto;
        border: 0px solid #fff;
        }
        
fieldset p.highlight input  {
        width: auto;
        float: none;
        border: 0px solid #fff;
        }
        
input.extrawide {
        width: 60%;
        }
        
#options fieldset input.checkbox        {
        width: 12px;
        border: 0px solid;
        }
        
input.noborder  {
        border: 0px solid;
        background-color: transparent;
        }

#container table input,
#container table select {
        margin: 0;
        padding: 0;
        width: auto;
        clear: both;
        }
        
input.radio     {
        width: 2em;
        }
        
.button {
        background: #eeeeee url('../images/greysubmit.gif') center left repeat-x;
        font-size: 0.9em;
        padding: 0;
        width: auto;
        float: none;
        }
        
.submit {
        background: #007024 url('../images/submit.gif') center left repeat-x;
        color: #FFFFFF;
        padding: 3px 0;
        width: 15.5em;
        }
                
.greysubmit     {
        background: #eeeeee url('../images/greysubmit.gif') center left repeat-x;
        padding: 3px 0;
        width: 19em;
        margin-right: 1em;
        }
        
.highlight      {
        background-color: #efefef;
        border: 1px solid #ccc;
        padding: 1%;
        float: left;
        width: 97.5%;
        }
        
#form   {
        width: 100%;
        float: left;
        }

#content        {
        float: left;
        width: 50%;
        }     

#options        {
        float: right;
        width: 48%;
        background-color: #e6e6e6;
		border: 1px solid #ccc;
        }
		
legend,
fieldset h4 {
	line-height: 125px;
	padding-left: 150px;
	padding-bottom: 0;
}
        
fieldset h4 {
	padding-left: 150px;
}
        
#cal1 #options,
#bi_cal1 #options {
        background: #e6e6e6 url('../images/cal1.jpg') top left no-repeat;
}

#car1 #options,
#bi_car1 #options {
        background: #e6e6e6 url('../images/car1.jpg') top left no-repeat;
}

#chi1 #options,
#bi_chi1 #options {
        background: #e6e6e6 url('../images/chi1.jpg') top left no-repeat;
}

#cii1 #options,
#bi_cii1 #options {
        background: #e6e6e6 url('../images/cii1.jpg') top left no-repeat;
}

#cii2 #options,
#bi_cii2 #options {
        background: #e6e6e6 url('../images/cii1.jpg') top left no-repeat;
}

#cyc1 #options,
#bi_cyc1 #options {
        background: #e6e6e6 url('../images/cyc1.jpg') top left no-repeat;
}

#den1 #options,
#bi_den1 #options {
        background: #e6e6e6 url('../images/den1.jpg') top left no-repeat;
}

#gay1 #options,
#bi_gay1 #options {
        background: #e6e6e6 url('../images/gay1.jpg') top left no-repeat;
}

#hcp1 #options,
#bi_hcp1 #options {
        background: #e6e6e6 url('../images/hcp1.jpg') top left no-repeat;
}

#hcp2 #options,
#bi_hcp2 #options {
        background: #e6e6e6 url('../images/hcp1.jpg') top left no-repeat;
}

#hol1 #options,
#bi_hol1 #options  {
        background: #e6e6e6 url('../images/hol1.jpg') top left no-repeat;
}

#hsc1 #options,
#bi_hsc1 #options {
        background: #e6e6e6 url('../images/hsc1.jpg') top left no-repeat;
}

#hsc2 #options,
#bi_hsc2 #options {
        background: #e6e6e6 url('../images/hsc1.jpg') top left no-repeat;
}

#lif1 #options,
#bi_lif1 #options {
        background: #e6e6e6 url('../images/lif1.jpg') top left no-repeat;
}

#pai1 #options,
#bi_pai1 #options {
        background: #e6e6e6 url('../images/pai1.jpg') top left no-repeat;
}

#pnn1 #options,
#pnn2 #options,
#pnn3 #options,
#pnn4 #options,
#bi_pnn1 #options,
#bi_pnn2 #options,
#bi_pnn3 #options,
#bi_pnn4 #options {
        background: #e6e6e6 url('../images/pen1.jpg') top left no-repeat;
}

#pmi1 #options,
#bi_pmi1 #options {
        background: #e6e6e6 url('../images/pmi1.jpg') top left no-repeat;
}

#sip1 #options,
#bi_sip1 #options {
        background: #e6e6e6 url('../images/shp1.jpg') top left no-repeat;
}

#trv1 #options,
#bi_trv1 #options {
        background: #e6e6e6 url('../images/trv1.jpg') top left no-repeat;
}

#spr1 #options,
#bi_spr1 #options {
        background: #e6e6e6 url('../images/rvr1.jpg') top left no-repeat;
}

#vip1 #options,
#bi_vip1 #options {
        background: #e6e6e6 url('../images/vip1.jpg') top left no-repeat;
}

/*
=8. tables
============================
*/

table   {
        width: 100%;
        font-size: 1em;
        line-height: 1.8;
        margin: 0 auto 0 auto;
        border: 0px solid #e6e6e6;
        border-collapse: collapse;
        }
		
table table,
table table table       {
        width: 100%;
        font-size: 0.72em;
        margin: 0;
        }
		
caption {
        font-size: 1.8em;
        line-height: 1;
        margin-bottom: 1em;
        text-align: left;
        }
		
th, td  {
        text-align: left;
        padding: 0;
        border-collapse: collapse;
        border: 0px solid #fff;
        vertical-align: top;
        height: auto !important;
		font-size: 1.4em;
		line-height: 1.286;
        }
		
th      {
        text-align: left;
        background-color: #f5f6f6;
        }
		
tfoot td        {
        background-color: #f5f6f6;
        }
		
#container table   {
        margin-bottom: 0;
        border: 0px solid #e6e6e6;
        }
        
#invfundchoice,
#totalfunds,
#lifestyle,
#selfselect,
fieldset #invfundchoice p,
fieldset #totalfunds p   {
	float: none;
	clear: both;
        }
        
fieldset #invfundchoice p,
fieldset #totalfunds p   {
	margin-bottom: 1em;
        }
        
#totalfunds,
#lifestyle,
#selfselect   {
	position: relative;
	width: 100%;
        }
        
#invfundchoice label,
#totalfunds label   {
	width: 250px;
	float: none;
        }
        
#invfundchoice input,
#totalfunds input   {
	width: 50px;
	float: none;
        }
        
.td25 thead {
	display: none;
        }

#MBCHOICE4 #table7 thead {
	display: block;
	display: table-header-group;
        }

#container table.noborder-bot,
#container table.details,
#container table.ruler,
#container table.datablock,
#container #user-details table	{
	background-color: #fff;
    border: 3px solid #e6e6e6;
	margin-bottom: 1.8em;
	}

#container table.details th,
#container table.details td,
#container table.ruler th,
#container table.ruler td,
#container table.noborder-bot th,
#container table.noborder-bot td,
#container table.datablock th,
#container table.datablock td,
#container #user-details table th,
#container #user-details table td	{
    padding: 9px;
	border-bottom: 0px solid #e6e6e6;
	vertical-align: top;
	border-collapse: collapse;
	}

#container table.details th,
#container table.ruler th,
#container table.noborder-bot th,
#container table.datablock th	{
	}

#MBCHOICE2 #table6 td.col4,
#MBCHOICE3 #table6 td.col4,
#MBCHOICE5 #table6 td.col4 {
	padding: 0 9px;
}

fieldset fieldset table {
        border-collapse: collapse;
        border: 3px solid #e6e6e6;
        }
        
#container th,
#container td      {
        border-collapse: collapse;
        border: 0px solid #e6e6e6;
        }

#container th      {
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        text-align: left;
        }
                
#container tbody td,
#container #user-details table th,
#container #user-details table td     {
        border-collapse: separate;
        }
        
#container #user-details table th     {
        width: 25%;
		background-color: #fff;
        }
        
#container #user-details table td {
        }
        
#addrow td      {
        border-top: 1px solid #e6e6e6; 
        background-color: #f5f6f6;
        }

.align  {
        text-align: right;
        }
        
td.align  {
	width: 80px;
        }
        
tfoot td.align  {
	width: auto;
        }
        
.colwidth       {
        width: 20%;
        }
        
tfoot td        {
        border-collapse: collapse;
        background-color: #f5f6f6;
        border-top: 0px solid #ccc;
		font-weight: bold;
        }
		
#container #table5 {
}

#container #table5,
#container #table5 td {
}

#container #table5 td {
}

#container table.td25 th,
#container table.td25 td,
#container #table7 tfoot td.col3 {
	width: 23%;
}

#container table.td25 th.heading,
#container table.td25 td.heading {
	width: 100%;
}

#container table.td25 tfoot td.align {
	width: 65%;
}

#container #table7 th.col2,
#container #table7 td.col2 {
	width: 33%;
}

#container #table7 th.col3,
#container #table7 td.col3,
#container #table7 tfoot td.col2 {
	width: 19%;
}

#container tbody td.col2 span {
	display: block;
	font-weight: bold;
}

#MBCHOICE2 #container table.td25 .col1,
#MBCHOICE2 #container table.td25 .col3,
#MBCHOICE3 #container table.td25 .col1,
#MBCHOICE3 #container table.td25 .col3,
#MBCHOICE5 #container table.td25 .col1,
#MBCHOICE5 #container table.td25 .col3 {
	width: 12%;
}

#MBCHOICE2 #container table.td25 .col2,
#MBCHOICE2 #container table.td25 .col4,
#MBCHOICE3 #container table.td25 .col2,
#MBCHOICE3 #container table.td25 .col4,
#MBCHOICE5 #container table.td25 .col2,
#MBCHOICE5 #container table.td25 .col4 {
	width: 36%;
}

#MBCHOICE2 #container .noborder-bot {
	width: 100%;
	}

#MBCHOICE2 #container .noborder-bot .col4,
#MBCHOICE3 #container .ruler .col3,
#MBCHOICE3 #container .ruler tfoot .col2,
#MBCHOICE5 #container .noborder-bot .col3 {
	width: 24%;
	}
	
#MBCHOICE2 #container table.td25 td table .col1,
#MBCHOICE3 #container table.td25 td table .col1,
#MBCHOICE5 #container table.td25 td table .col1 {
	width: 48%;
}

#MBCHOICE2 #container table.td25 td table .col2,
#MBCHOICE3 #container table.td25 td table .col2,
#MBCHOICE5 #container table.td25 td table .col2 {
	width: 52%;
}


#MBCHOICE2 #container .noborder-bot .col5,
#MBCHOICE2 #container .noborder-bot tfoot .col3,
#MBCHOICE5 #container .noborder-bot .col4,
#MBCHOICE5 #container .noborder-bot tfoot .col3 {
	width: 0;
	padding: 4px 0;
	text-indent: -9999px;
	}
	
#MBCHOICE3 #container .noborder-bot .col5 {
	display: none;
	}
	
#MBCHOICE2 #container .noborder-bot thead .col4,
#MBCHOICE5 #container .noborder-bot thead .col4 {
	font-size: 0;
	}
	
#MBCHOICE2 #container #benefitcosts,
#MBCHOICE5 #container #benefitcosts {
	font-size: 12px;
	}
	
#MBCHOICE2 #container #flexallspent,
#MBCHOICE3 #container #flexallspent,
#MBCHOICE5 #container #flexallspent,
#MBCHOICE2 #container #flexallow2,
#MBCHOICE3 #container #flexallow2,
#MBCHOICE5 #container #flexallow2,
#MBCHOICE2 #container #flexallbal,
#MBCHOICE3 #container #flexallbal,
#MBCHOICE5 #container #flexallbal{
	margin-top: -18px;
	display: block;
	}
	
#user-details table th {
}
	
/*
=9. links
============================
*/

a:link,
a:visited	{
	font-size: 0.9em;
	font-weight: bold;
        color: #17549C;
	text-decoration: underline;
	padding: 0.15em 0;
	}

a:hover,
a:active,
a:focus	{
	font-size: 0.9em;
	font-weight: bold;
        color: #1882C1;
	text-decoration: none;
	}
