/*'$Id: style.css,v 1.49 2018/10/04 22:01:52 jhow Exp $$Name: HEAD $'*/
/* FYI:
font-weight: <num>;  - In IE and Mozilla, num < 600 & > 900:no bold; num = 600:"bad" bold; num > 600:bold
*/
BODY{
background-color: #FFFFFF;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
font-family: Arial,Verdana,Helvetica, sans-serif;
font-size: 9pt;
}

/* The following styles are for the frame of each page */
.pageframe {
margin:0 auto 0 auto;
padding-top: 0;
border:1px solid #000000;
width:750px;
}
.pageframe * {
/*background-color:#FFFFFF; */
}
.pageframe .welcome {
background-color:#2A5F99
}
.pageframe .welcome TABLE.welcome_block {
border-bottom:1px solid #000000;
}
.pageframe .welcome TABLE.welcome_block TR.content TABLE {
padding-bottom:7px;
padding-top:3px;
}
.pageframe .welcome TR.content *{
background-color:#D3EAFE;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
}
.pageframe .welcome TABLE.welcome {
border-bottom:1px solid #000000;
}
.pageframe .content, .pageframe .menu  {
background-image:url(side_bevel.gif);
background-repeat:repeat-y;
}
.pageframe .welcome .content TD {
background-image:none;
}
.pageframe .content DIV.outer {
margin-right:auto;
margin-left:24px;
border-right:5px solid #EAE8EA;
}
.pageframe .content DIV.outer DIV.inner {
margin-left:0px;
border-right:1px solid #999999;
}

.pageframe .content DIV.outer_norightborder {
margin-right:auto;
margin-left:24px;
}
.pageframe .content DIV.outer_norightborder DIV.inner_norightborder {
margin-left:0px;
}

.pageframe .menu  {
background-color:#2A5F99;
margin-right:auto;
}
.pageframe .menu DIV {
margin-left:24px;
margin-right:auto;
background-color:#2A5F99;
}
/* end of styles for frame */

A, A:link, A:visited, A:hover, A:active {
/* text-decoration: none; */
}
A:active{
color:#AA0000;
}
A, A:link,A:visited {
/* text-decoration: none; */
color:#044287;/*#000099;*/
}
A:active{
color:#AA0000;
}
A:hover {
color: #FF0000;
text-decoration:underline;
}

TABLE.loginform TH {
font-size:10pt;
}
/* btnMenu* styles define the action menu look at the top of the window. */
.btnMenuFrame{
padding-left:10px;
background-color:#2A5F99;
border-bottom:1px solid #2A5F99;
border-top:1px solid #2A5F99;
}
UL.btnMenu{
border-left: 1px solid #8CC1F4;
list-style-type:none;
height:1.4em;
margin-bottom:0px;
margin-top:0px;
padding-left:0px;
margin-left: 10px;
}
LI.btnMenu {
float:left;
background-color:#D2E9FE;
}
LI A.btnMenu,LI A:link.btnMenu,LI A:visited.btnMenu,LI A:active.btnMenu,LI A:hover.btnMenu,LI.btnMenu{
border-right: 1px solid #8CC1F4;
border-top: 1px solid #8CC1F4;
border-bottom: 1px solid #8CC1F4;
font: 11px Arial bold;
font-weight: 900;
color: #295E98;
padding-left: 10px;
padding-right: 10px;
background-image: url("buttons_fill.gif");
background-position: bottom;
background-repeat:repeat-x;
}
LI A.btnMenu,LI A.btnMenu:link,LI A.btnMenu:visited,LI A.btnMenu:hover,LI A.btnMenu:active{
border-right: none;
border-bottom: none;
border-top: none;
text-decoration: none;
padding-left: 0;
padding-right: 0;
}
LI A.btnMenu:hover{
color:#583A7D;
text-decoration:none;
}

TABLE.btnMenu{
margin-left: 10px;
border-left: 1px solid #8CC1F4;
}
TR.btnMenu TD{
background-color:#D2E9FE;
background-image: url("buttons_fill.gif");
background-position: bottom;
background-repeat:repeat-x;
}
TD.btnMenu{
background-color:#D2E9FE;
}
.qtyBtn{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color: #CCCCCC;
font: 11px Arial bold;
font-weight: 900;
color: #295E98;
padding-left: 20px;
padding-right: 20px;	
}
TD A.btnMenu,TD A:link.btnMenu,TD A:visited.btnMenu,TD A:active.btnMenu,TD A:hover.btnMenu,TD.btnMenu{
border-right: 1px solid #8CC1F4;
border-top: 1px solid #8CC1F4;
border-bottom: 1px solid #8CC1F4;
font: 11px Arial bold;
font-weight: 900;
color: #295E98;
padding-left: 20px;
padding-right: 20px;
}
TD A.btnMenu,TD A.btnMenu:link,TD A.btnMenu:visited,TD A.btnMenu:hover,TD A.btnMenu:active{
border-right: none;
border-bottom: none;
border-top: none;
text-decoration: none;
padding-left: 0;
padding-right: 0;
}
TD.lbtnMenu{
border-right: 1px solid #8CC1F4;
background-image: url("lbuttons.gif");
}
TD.rbtnMenu{
background-image: url("rbuttons.gif");
}
TD A.btnMenu:hover{
color:#583A7D;
text-decoration:none;
}
A.btnMenu:active{
color:#AA0000;
font-weight:bold;
text-decoration:none;
}
TH.btnMenu{
font: 14px Arial bold;
font-weight: 900;
color:#D2E9FE;
}

/* .logo defines the style used to display the logo for the document */
.logo{
text-align: right;
padding-top: 1px;
padding-bottom: 4px;
height: 45px;
width: 98%;
}

/* (in)activePage defines the styles used to display the section links */
.activePage, .inactivePage{
background-image: url("buttons_fill.gif");
background-color:#D2E9FE;
background-position: bottom;
background-repeat:repeat-x;
font-family: Arial;
}
.activePage {
border-left: 1px solid #96C098;
border-top: 1px solid #96C098;
border-bottom: 1px solid #92BF9D;
border-right: 1px solid #79B596;
color: #2B5F98;
font-size: 11px;
font-weight: 900;
background-image: url("active_fill.gif");
background-color:#D1E89E;
background-position: bottom;
background-repeat:repeat-x;
}
A.inactivePage,A:link.inactivePage,A:visited.inactivePage,A:active.inactivePage, A:hover.inactivePage,
.inactivePage {
color: #396BA2;
font-size: 11px;
font-weight: 900;
/*background: #D2E9FE;*/
}
.inactivePage {
border-top: 1px solid #7BB7F1;
border-bottom: 1px solid #96C2F2;
border-left: 1px solid #83BBF2;
border-right: 1px solid #83BBF2;
}
A.inactivePage,A:link.inactivePage,A:visited.inactivePage,A:active.inactivePage, A:hover.inactivePage{
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.activePage, .inactivePage{
margin-left: 20px;
margin-right: 20px;
padding-left: 20px;
padding-right: 20px;

}
A.activePage, A.inactivePage{
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
border:0px solid white;
text-decoration: none;

}
/* frame defines a content block with a defined border */
.frame_t{
border-top:1px solid #B9D191;
}
.frame_b{
border-bottom:1px solid #B9D191;
}
TABLE.frame {
background-color: #FFFFFF;
border: 1px solid #B9D191;
border-top: none;
border-bottom: none;
}

/* headData is the area of a document that is the most important */
TABLE.headData{
padding-top: 2px;
padding-bottom: 10px;
}
.attention{
font-size:12px;
font-family: Arial;
color: #990000;
padding: 2px;
}
TH.headData_lg {
font-family: Arial;
color:#295E98;
font-weight: 900;
font-size: 12px;
padding-left:10px;
padding-right:5px;
}
TD.headData_lg {
font-family: Arial;
color:#000000;
font-weight: 900;
font-size: 12px;
}
TH.headData_sm {
font-family: Arial;
color:#295E98;
font-weight: 900;
font-size: 11px;
padding-left:10px;
padding-right:5px;
}
TD.headData_sm {
font-family: Arial;
color:#000000;
font-weight: normal;
font-size: 12px;
}

/* dataTable is the main workhorse for the document presentation */
.dataTableLabel_s_b,.dataTableLabel_s,.dataTable_nb,.dataTable_s,.dataTable_s_b,.dataTable_i,.dataTable,.dataTableEnd,.dataTableEnd_i,.dataTable_b,.formTable{
border: 1px solid #B9D191;
border-top: 1px solid #B8B8B7;
border-bottom: 1px solid #C4CBD2;
border-left: none;
border-right: none;
font-weight: normal;
font-family: Arial;
font-size: 10px;
/* height: 18px; */
}
TABLE.dataTable{
border-bottom: 7px solid #CBDAAC; /*#E8F3CE;*/ /*#C6DE8B;*/ /*#B5CB7F; *//*#E8F3CE; */
}
TABLE.dataTable_b{
border-bottom: 10px solid #FFFFFF;
}
TABLE.formTable{
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
TD.listTable{
padding-top:5px;
padding-bottom:5px;
}
TABLE.listTable{
margin-top:20px;
border: 1px solid #B9D191;
border-bottom:none;
border-right: none;
}
TABLE.sortable {
border-top: 1px solid #B9D191;
border-left: 1px solid #B9D191;
}
TH.dataTable_nb, TH.dataTable, TH.dataTable_lft,TH.dataTableEnd{
border-right:1px solid #B3B3B2;
font-size: 11.5px;
font-weight: bold;
}
TR.dataTable{
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
text-align: center;
color: #000000;
background-color: #E1E1DF;
padding-top: 1px;
/*padding-bottom: 1px; */
}
TR.dataTable_nb{
border-top:none;
border-bottom: none;
border-left: none;
border-right: none;
padding-left: 5px;
padding-right: 5px;
}
TD.dataTable_i, TD.dataTableEnd_i{
background-color:#D3EAFE;
}
TH.dataTableLabel_s,
TH.dataTableLabel_s_b,
TH.dataTableEnd,
TH.dataTable,
TH.dataTable_nb{
text-align: center;
color: #044287;
background-color: #E1E1DF;
}

TH.dataTable_lft{
text-align: left;
color: #044287;
background-color: #E1E1DF;
}

TD.dataTableEnd,TH.dataTableEnd,
TD.dataTableEnd_i,TD.dataTable_i,
TH.dataTable_nb,TD.dataTable_nb,
TH.dataTable,TH.dataTable_lft,TD.dataTable{
border-bottom: 1px solid #A4A4A2;
border-top:1px solid #D3D3D1;
border-right: 1px solid #B9D191;
}
TD.dataTableEnd,
TD.dataTableEnd_i,
TD.dataTable_nb,
TD.dataTable,
TD.dataTable_i{
border-top:none;
}
TH.dataTableEnd,TD.dataTableEnd,TD.dataTableEnd_i {
border-right: none;
}
TH.dataTableLabel_s_b,TH.dataTableLabel_s,TH.dataTable_nb,TD.dataTable_nb,TD.dataTable_s_b,TD.dataTable_s,TD.dataTable, TD.dataTableEnd{
background-color: #EFEFEF;
}
TH.dataTableLabel_s_b,TH.dataTableLabel_s,TH.dataTable_s{
border-right: none;
}
TH.dataTableLabel_s_b,TH.dataTableLabel_s,TH.dataTable_s,TD.dataTable_s,TD.dataTable_s_b {
border-bottom:1px solid #B9D191;
border-top: none;
padding-left: 5px;
}
TH.dataTableLabel_s,TH.dataTableLabel_s_b{
text-align: right;
}
TH.dataTableLabel_s_b,
TD.dataTable_s_b{
border-bottom:1px solid #B8B8B7;
}
TABLE.dataTable_s{
border-right:1px solid #B9D191;
}
TH.dataTable_nb, TD.dataTable_nb{
border-top:1px solid #A4A4A2;
border-right: none;
}
TD.dataTable_nb{
border-left: none;
border-right: none;
height:50px;
}
.dataTable_nb{
border-top:1px solid #A4A4A2;
}
TD.dataTable, TH.dataTable,
TD.dataTable_nb,TH.dataTable_lft,{
margin-left: 5px;
}

.contentData   {
/*
overflow-y: scroll;
overflow-x: auto;
*/
padding-left: 15px;
padding-right:30px;
}
DIV.bodyContent{
display:block;
width:97%;
}
TABLE.bodyContent, TABLE.frame{
margin-left:8px;
/*margin-right:10px;*/
width:98%;
}


/* specifics */
TH.lineData{
border-right: none;
}
TD.lineData{
border-left: none;
}

TD.linenum,TH.linenum {
color:#363637;
background-color: #E1E1DF;
font-family: Arial;
font-size:11.5px;
border-left: 1px solid #D4D4D2;
border-top: 1px solid #D0D0CF; /*#ABADAC;*/
border-bottom: 1px solid #ABADAC;
border-right: none;
font-weight: normal;
}
TD.linenum{
border-left: none;
background-image: url("rlinenum.gif");
}
TH.linenum{
width: 50px;
}

TABLE.sdq{
border-bottom:1px solid #B8B8B7;
}
TD.sdq,TH.sdq,.sdq {
background-color: #EFEFEF;
color: #000000;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
font-weight: normal;
font-family: Arial;
font-size: 10px;
text-align: left;
padding-left: 5px;
}
TH.sdq{
color: #044287;
text-align: right;
padding-right: 4px;
}

SPAN.sdqh{
display: inline-block;
background-color: #EFEFEF;
color: #044287;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
font-weight: normal;
font-family: Arial;
font-size: 10px;
text-align: right;
vertical-align:top;
width: 70px
}

SPAN.sdq{
display: inline-block;
background-color: #EFEFEF;
color: #000000;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
font-weight: normal;
font-family: Arial;
font-size: 10px;
text-align: left;
padding-left: 5px;
vertical-align:top;
width: 170px
}

TH.dataTable_lft, TH.dataTable, TH.dataTableEnd{
background-image: url("head_bevel.gif");
background-color:#E1E1DF;
background-position:bottom;
background-repeat:repeat-x;
}

.banner_link,A:hover.banner_link,A:visited.banner_link, A:active.banner_link,A:link.banner_link{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#CCFFFF;
font-weight:900;
}

TH.dataTable_l{
font-weight:100;
font-size:10px;
color:#044287;
background-color: #E1E1DF;
padding-right:5px;
border-right: 1px solid #CFCFCD;
border-bottom:1px solid #B9D191;
}

.dataTable_m{
border-top:0px;
background-color:#CBDAAC;
}

.dataTable_input{
font-weight: normal;
font-family: Arial;
font-size: 10px;
}

.sortable A:link, .sortable A:hover, .sortable A:visited, .sortable A:active {
text-decoration:none;
color:#2A5F99;
}
.sortable A:hover {
color:#688F33;
}
TABLE.ediTransaction *{
font-family: Arial,Verdana,Helvetica, sans-serif;
}
TABLE.ediTransaction THEAD TH{
    font-size: 14pt;
    font-weight: bold;
    padding: 2px 2px 2px 2px;
}
TABLE.ediTransaction TH{
    font-size: 12pt;
    font-weight: bold;
}
TABLE.ediTransaction TD{
    font-size: 12pt;
    font-weight: normal;
}
.pleasewait {
margin-left:25%;
margin-right:25%;
margin-top:25%;
margin-bottom:25%;
padding: 5px 10px;
background-color:#FFFFFF;
border:3px solid #3AADC6;
}

.pleasewaitLarge {
   margin-left:25%;
   margin-right:25%;
   padding: 5px 10px;
   background-color:#FFFFFF;
   border:3px solid #3AADC6;
   font-size: 10pt;
   font-weight: bold;
}

.pageOverlay {
    top: 200;
    left: 40%;
    position: absolute;
    height: 10%;
    width: 50%;
    z-index: 1001;
    display: block;
}
 
.acknowledgeOverlay {
    top: 125;
    left: 450;
	 position: absolute;
    height: 75%;
    width: 75%;
    z-index: 1001;
    display: block;
	
}

.loadingMessage {
    padding: 25px 40px;
    font-family:Arial,sans-serif;
    font-weight: bold;
    font-size: 11pt;
    color: #295E98;
}

TH.chartmenubar {
font-size: 11.5px;
font-weight: bold;
text-align: left;
color: #044287;

}
TD.chartmenuitem {
font-size: 12px;
text-align: center;
color: #000000;

}

DIV.charttitle {
font-size: 14px;
font-weight: bold;
text-align: center;
vertical-align: middle;
color: #044287;

}

.docheaderfont
{
   font-family:"Franklin Gothic", Demi, Cond;
   font-weight: bold;
   font-size: 18.5px;
   color: #7EA52F;
}

.docpageheaderfont
{
   font-family:"Franklin Gothic", Demi, Cond;
   font-weight: bold;
   font-size: 24px;
   color: #7EA52F;
}


UL.hdrBtnMenu {
	list-style-type:none;
	height:1.5em;
	margin-bottom:0px;
	margin-top:0px;
	padding-left:0px;
	margin-left: 0px;
	vertical-align: bottom;
}

LI.hdrBtnMenu {
   border-radius: 10px;
   padding: 3px 3px;
   border:1px solid #000000;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   background-color: #8cad7a;
   float:left;
}
LI A.hdrBtnMenu,LI A:link.hdrBtnMenu,LI A:visited.hdrBtnMenu,LI A:active.hdrBtnMenu,LI A:hover.hdrBtnMenu,LI.hdrBtnMenu{
	/*width:90px;*/
   text-align: center;
   vertical-align: middle;
   font-family:"Franklin Gothic", Demi, Cond;
   font-size:12px;
   color:#FFFFFF;
}
LI A.hdrBtnMenu,LI A.hdrBtnMenu:link,LI A.hdrBtnMenu:visited,LI A.hdrBtnMenu:hover,LI A.hdrBtnMenu:active{
	text-decoration: none;
	padding-left: 0;
	padding-right: 0;
}

/*
DIV .logoutbutton {
   border-radius: 10px;
   border:1px solid #000000;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;	
	background-color: #E56935;
   width: 70px;
   height: 20px; 
   float:left; 
}
*/
SPAN.logoutbutton {
	font-size: 14px;
   font-weight: bold;
   text-align: center;
   vertical-align: middle;
   font-family:"Franklin Gothic", Demi, Cond;
   text-decoration: none;
   color:#FFFFFF; 
}

DIV .logoutbutton {
   width: 65px;
   height: 17px; 
   -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
   -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
   box-shadow:inset 0px 1px 0px 0px #cf866c;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e56a35), color-stop(1, #cc460c));
   background:-moz-linear-gradient(top, #e56a35 5%, #cc460c 100%);
   background:-webkit-linear-gradient(top, #e56a35 5%, #cc460c 100%);
   background:-o-linear-gradient(top, #e56a35 5%, #cc460c 100%);
   background:-ms-linear-gradient(top, #e56a35 5%, #cc460c 100%);
   background:linear-gradient(to bottom, #e56a35 5%, #cc460c 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e56a35', endColorstr='#cc460c',GradientType=0);
   background-color:#e56a35;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   vertical-align: middle;
   float:left; 
}
DIV .logoutbutton:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cc460c), color-stop(1, #e56a35));
   background:-moz-linear-gradient(top, #cc460c 5%, #e56a35 100%);
   background:-webkit-linear-gradient(top, #cc460c 5%, #e56a35 100%);
   background:-o-linear-gradient(top, #cc460c 5%, #e56a35 100%);
   background:-ms-linear-gradient(top, #cc460c 5%, #e56a35 100%);
   background:linear-gradient(to bottom, #cc460c 5%, #e56a35 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc460c', endColorstr='#e56a35',GradientType=0);
   background-color:#cc460c;
}
DIV .logoutbutton:active {
   border-top-color: #de7e09;
   background: #de7e09;
}

.pageheaderfont
{
   font-family:"Franklin Gothic", Demi, Cond;
   font-weight: bold;
   font-size: 20px;
   color: #2a5f99;
}

.pagenewheaderfont
{
   font-family:Arial,sans-serif;
   font-weight: bold;
   font-size: 18px;
   color: #cc0000;
}

.pagenewmessagefont
{
   font-family:Arial,sans-serif;
   /*
   font-weight: bold;
   */
   font-size: 18px;
   color: #2a5f99;
}

.pagemessagefontsm
{
   font-family:Arial,sans-serif;
   /*
   font-weight: bold;
   */
   font-size: 12px;
   color: #000000;
   /*
   Commented out pending review.  This is light blue.
   color: #2a5f99;
   */
}

.standardButton {
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
   box-shadow:inset 0px 1px 0px 0px #ffffff;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
   background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
   background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
   background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
   background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
   background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
   background-color:#f9f9f9;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
   border:1px solid #a3a4a8;
   display:inline-block;
   cursor:pointer;
   color:#000000;
   font-family:Arial;
   font-size:15px;
   padding:2px 6px;
   text-decoration:none;
   text-shadow:0px 1px 0px #ffffff;
}
.standardButton:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
   background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
   background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
   background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
   background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
   background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
   background-color:#e9e9e9;
}
.standardButton:active {
   position:relative;
   top:1px;
}

.tabs li { 
  /* Makes a horizontal row */
   float: left; 
   
   /* So the psueudo elements can be
      abs. positioned inside */
   position: relative; 
   vertical-align:bottom; 
}
.tabs a { 
  /* Make them block level
     and only as wide as they need */
   float: left; 
   padding: 4.7px 4.7px;
   padding-right:6px;
   padding-left:6px;
   text-decoration: none;
   text-align: center;
   vertical-align: bottom;
   font-family:"Franklin Gothic", Demi, Cond;
   font-size:12px;
   color:#FFFFFF;
   background: #8cad7a;
   
  /* Only round the top corners
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-right: thick #000000;
   */ 
}

.tabs:hover {
   background: #176be2; 
   color: #FFFFFF;
}
.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}
.tabs .active a { 
  /* Colors when tab is active */
   background: #8cad7a; 
   color: #FFFFFF;
}
.tabs li:before, .tabs li:after, 
.tabs li a:before, .tabs li a:after {
  /* All pseudo elements are 
     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}
/* Only the first, last, and active
   tabs need pseudo elements at all */
.tabs li:last-child:after,   .tabs li:last-child a:after,
.tabs li:first-child:before, .tabs li:first-child a:before,
.tabs .active:after,   .tabs .active:before, 
.tabs .active a:after, .tabs .active a:before {
  content: "";
}
.tabs .active:before, .tabs .active:after {
  background: #8cad7a;; 
  
  /* Squares below circles */
  z-index: 1;
}
/* Squares */
.tabs li:before, .tabs li:after {
  background: #8cad7a;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;      
}
.tabs li:after { 
  right: -10px;
}
/* Circles */
.tabs li a:after, .tabs li a:before {
  width: 20px; 
  height: 20px;
  /* Circles are circular */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #222;
  
  /* Circles over squares */
  z-index: 2;
}
.tabs .active a:after, .tabs .active a:before {
  background: #8cad7a;
}
/* First and last tabs have different
   outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}

.smallheaderfont
{
   font-family:"Franklin Gothic", Demi, Cond;
   font-weight: bold;
   font-size: 18px;
   color: #2a5f99;
}