header {
    font-size: 15px;
    line-height: 1.5;
}

#global-header {
    background: #fff none repeat scroll 0 0;
    min-height: 85px;
    position: relative;
}
#global-header .page-width {
    background: #fff none repeat scroll 0 0;
}
#main-list {z-index:1000;}
#smallmenu {z-index:999;}

#second-header {
    position: relative;
    font-size: 16px;
    line-height: 2.5;
    margin: 0 auto;
}
#second-header a
{
    white-space: nowrap;
}
#second-header .page-width {
    display: table;
    font-size: 16px;
    line-height: 2.5;
    margin: 0 auto;
    padding: 0 15px;
    width: 972px;
}
.logo-header {
    bottom: 0;
    color: #000 !important;
    display: block;
    float: left;
    font-size: 14px;
    height: 40px;
    margin: 23px 10px 0 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    text-indent: -10000px;
    top: 0;
    width: 450px;
}
img {
    border: medium none;
}
.logo-header img {
    display: block;
    float: left;
    max-width: 100%;
}


.page{
   overflow:initial;
}

.page-width {
    clear: both;
    margin: 0 auto;
    max-width: 1080px;
    min-width: 250px;
    padding: 0 15px;
}
.nav-header-utilities {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    font-weight: 400;
    float: right;
    text-align: right;
    white-space: nowrap;
    /*text-decoration: underline #B87333;*/
    text-rendering: auto;
}

.nav-header-utilities a {
    border-bottom: 1px dotted #B87333;
    color: #555555;
    text-decoration: none;
}

.form-header-search
{
    float:none;
    clear:both;
    text-align:left;
    margin:0;
}
.form-header-search{
    overflow:hidden;
    width:300px;
    margin:0;
    float:right;
    clear:right;
    position:relative}

.form-header-search input{
    -webkit-appearance:none;
    border-radius:0}

.form-header-search .search-container{
    padding:0 15px 0 15px;
    margin:0;
    overflow:visible}
.form-header-search .query {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fafafa none repeat scroll 0 0;
    border-color: #ccc -moz-use-text-color #ccc #ccc;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
    float: left;
    font-size: 14px;
    height: 28px;
    max-width: 259px;
    padding: 0 5px;
    width: 258.6px;
}
.form-header-search .submit{
    border:1px solid #fafafa;
    position:absolute;
    top:50%;
    right:15px;
    margin:-15px 0;
    background-color:#fafafa;
    background-position:-46px -206px}
.form-header-search .submit:hover,.form-header-search .submit:focus,.form-header-search .submit:active{
    background-color:#39d}
.form-header-search .query::-moz-placeholder {
    color: #999 !important;
    font-size: inherit;
    line-height: inherit;
    text-overflow: ellipsis;
}

.form-header-search .query::-moz-placeholder{
    color:#999 !important;
    text-overflow:ellipsis;
    font-size:inherit;
    line-height:inherit}

.form-header-search .query:-ms-input-placeholder{
    color:#999 !important;
    text-overflow:ellipsis;
    font-size:inherit;
    line-height:inherit}

.form-header-search .query::-webkit-input-placeholder{
    color:#999 !important;
    text-overflow:ellipsis;
    font-size:inherit;
    line-height:inherit}

.form-header-search .query:focus{
    background:#fff}

.nav-header-utilities li
{
    margin:0;
    padding:0;
    display:inline-block;
    white-space:nowrap
}
.nav-header-utilities li{
    margin-left:0;
    margin-right:10px
}

.nav-header-utilities li:first-child{
    margin-left:0}

.nav-header-utilities li:last-child{
    margin-right:0}
.nav-header-utilities, .nav-main, .nav-footer {
    list-style: outside none none;
    padding: 0;
}

.logo-header {
    bottom: 0;
    color: #000 !important;
    display: block;
    float: left;
    font-size: 14px;
    height: 80px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    text-indent: -10000px;
    top: 0;
    width: 450px;
    font-family: Tahoma,sans-serif;
    line-height: 1.5;
    font-weight: 400;
    text-rendering: auto;
}
a {
    background-color: transparent;
}



#nav-responsive{
    display:none;
}

#global-header > div > div:nth-child(2) > div.well.widget > form > div{
    width:0px;
    top:-20px;
}

#global-header > div > div:nth-child(2) > div:nth-child(1) > ul{
    position: absolute;
    right: 0px;
    z-index:10;
    
}

#global-header .page-width{
    padding:0px;
}

#newsBar img{
    width: 180px;
    height: 105px; 
}

#floating-footer-padding{
    height:80px;
}




.nav-main{
    margin:0 auto;
    font-size:16px;
    line-height:2.5;
    display:table;
    width:982px;
    list-style: outside none none;
    padding:0}
.nav-main li{
    display:table-cell
}
.nav-main a{
    color:#000;
    display:block;
    text-align:center;
    float:none;
    padding:0 10px;
    text-decoration:none}

.nav-main a:active,.nav-main a:visited{
    color:#fff}

.nav-main a:hover,.nav-main a:focus{
    background-color:#39d}

.nav-main a:active,.nav-main a.selected{
    color:#fff;
    background-color:#1c7cbc}

.nav-main abbr,.nav-main abbr[title2]{
    border:none}



#main-list > ul > li.active > a,
#main-list > ul > li.dropdown.open > a{

    height:50px;
}



.navbar {
    border:none;
    margin-bottom: 0;
    min-height: 50px;
    position: relative;
}
.navbar-default {
    height: 85px;
    line-height: 85px;
    text-transform: none;

}

.navbar-collapse { padding: 0; } /* forces the nav to take full container with */


#main-list > ul > li > a 
{ 
    font-size:12px;
    text-transform: none; 
    color:white;
    font-weight:normal; /*Silas*/
    position:relative;
    top:-19px;
}

#main-list > ul > li > a:hover 
{
   /* height:50px; */
} 

.navbar-nav > li:first-child { text-align: left; } /* alligns first element to the left border */

.navbar-nav { display: table; width: 100%; margin: 0; }

#mainmenu {
    background: #033f58 none repeat scroll 0 0;
    font-size: 29px;
    height:40px;
    position:absolute;
    top:84px;;
}

.dropdown-menu {
    background:#06a;
    color:white;
}
.dropdown-menu > li > a {
    display: inline-block;
    color: white;
}

.dropdown-menu > li > a:hover {
    color: white;
    background: #0186ba;
}

.dropdown-menu > li.active > a
{
    color: white;
    background: #0186ba;
}
.dropdown-menu > li > a {
     border: 0px;
}
.dropdown-menu > li > a:hover {
    border: 0px;
}
.dropdown-menu > ul > a:hover {
     border-top: solid 1px #E1E1E1;
}
.navbar-default {
    background: #0186ba;
    border: none;
}

.navbar-nav > .active > a:hover {
    background-color: #0186ba;
}

.navbar-nav li>a:hover,
.navbar-nav > .open > a:hover{
    background-color: #0186ba;
}

.navbar-nav>li>.dropdown-menu{
    top:90px;
}

#global-header > div > div.navbar-header > button.pull-left{
    float:right!important;
}

/* vertical-align th emain menu tops: */
#main-list > ul > li{
    vertical-align:top;
}

#global-header > div > div{
    display:block;
    height:100%;
}

#global-header > div > div.well.widget{
    display:block;
    width:100%;
    position:relative;
    top:-80px;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: #0186ba;
}

.nav > li > a:focus, .nav > li > a:hover {
    background-color: #0186ba;
}

#breadcrumbs{
    margin-top:30px;
    margin-left:30px;
}

.breadcrumb{
    padding: 20px 0px;
    padding-bottom:20px;
}

#global-header > div > a{
    z-index:5;
}

#content.col-sm-12.col-md-12{
    top:35px;
}

/* adjust navburger */
#mainmenu > div > div.navbar-header{position:relative;top:-9px;}

section.bg-white.nobanner{
    padding-top:60px;
}
.bg-white{
    display:initial;
}
.page{
  overflow:visible;
}


.article-wrapper{
    top:80px;
}

.quicklink_block{
    float:left;
    min-width:300px;
}

#calendar-list .date_d{
    width:30px;
    color:white;
}

#calendar-list .btn{
    margin-bottom:0px;
}

#calendar-list .btn a{
    color:white;
}

#calendar-list td.btn-sm.btn-block{
    margin-bottom: 0px;
}

/* homepage event slug hover styles. map to categories, build classname dynamicallyevent- */
.event-TEST{
    background-color: lightcoral;
}
.event-TEST:hover{
     background-color:#0186ba
}

.container.bg-color.accordion_wrapper{
    position:relative;
    top:35px;
}

#search{
    float: right;
    width: 290px;
    border: solid 1px #B87333;
}

#searchBox{
    float: right;
    width: 240px;
    border: solid 1px #B87333;
}

#currency > img{
  max-width: 100%;
  width: 100%;
  min-width: 350px;
  height: auto;
}


/************************************************* 
Media queries 

Care when adding CSS blocks after this, as the parser works top to bottom. Therefore, later items
can over-ride media query items, resulting in difficult to resolve bugs.
**************************************************/
@media only screen and (max-width: 1000px){
    
    .nav-main{
        display:block;
        width:auto}

    .nav-main li{
        display:inline}

    .nav-main a{
        float:left;
        text-align:left;
        min-width:20%;
        padding:0 2%
    }
    
}

@media only screen and (min-width: 768px){


    #main-list > ul > li > a:hover 
    {
        height:50px;
    } 


    #bank_rates_desktop{
        display:inline-table;
    }
    #bank_rates_mobile{
        display:none;
    }

    body > main > div > section > div{
        margin-right:30px;
        width:inherit;
    }

    .navbar-nav > li { display: table-cell; text-align: center; float: none;}
    
    #main-list > ul > li.dropdown{
        top:-19px;
    }
    
    #main-list > ul > li.dropdown > ul {top:70px;}

    #main-list > ul > li:nth-child(1) > ul, #main-list > ul > li:nth-child(2) > ul{
        left:0px;
        width:200px;
    }
    
    #global-header > div > div:nth-child(2) > div.well.widget > form > div {
        top:21px;
    }
    
    .container{
        width:inherit;
    }
    
    /* adjust body content height on homepage  */
    body > main > div.container-fluid.home{
        margin-top:60px;
    }
}
 
@media only screen and (max-width: 767px){


  .breadcrumb{
      padding: 0px;
      margin-top: -10px;
      padding-bottom:10px;
  }

    #bank_rates_desktop{
        display:block;
    }
    #bank_rates_mobile{
        display:none;
    }
    
    #bank_rates_mobile th{
        width:120px;
    }
    
    section#bank_rates_mobile{
        width:100%;
    }

    section#bank_rates_mobile table{
        margin-bottom:5px;
    }

    body > main > header, body > main > div.container.bg-color{
        display:none;
    }
    
    .logo-header{
       width:324px;
/*         height:38px;*/
/*        top:10px;*/
        float:left;
        left:-10px;
        margin:8px 7px 12px;
        position:relative
    }
    
    #mainmenu > div > div.navbar-header > button{
        left:0px;
    }

    #global-header > div > div:nth-child(1) > a > img{
        position:relative;
        top: 15px;
    }

    #global-header > div > div:nth-child(1) > a{
        height:51px;
    }
    
    .nav-header-utilities,.form-header-search{
        float:none;
        clear:both;
        text-align:left;
        margin:10px 15px}

    .nav-header-utilities li{
        margin-left:0;
        margin-right:10px;
    }
    
    div.navbar-header > button.pull-left{
        margin-right:-30px;
        position:relative;
        left:-30px;
    }





    #global-header > div > div:nth-child(2) > div.well.widget > form > div{
        left:30px;
        padding-right:30px;
        z-index:1150;
    }
    
    #global-header > div > div.well.widget > form > div{
        float: left;
        top:32px;
    }
    
    #global-header > div.page-width > div.navbar-collapse{
        position: absolute;
        margin: 0;
        background-color: white;
        z-index:10;
        float:right;
    }
    
    #main-list{
        background-color:#033f58; position:relative;top:-9px;
    }

    #newsBar > table > tbody > tr > td:nth-child(1){
        display:none;
    }
    
    
    /* #global-header > div > a{
        position:relative;
        top:20px;
        
    } */ 
    
    #main-list > ul > li.dropdown.open > ul{
        display:none;
    }
    
    #main-list > ul > li > a 
    { 
        /*font-size:12px;
        text-transform: none; 
        color:white;
        font-weight:normal;*/ /*Silas*/
        position:relative;
        top:0px;
    }
    
    /*#main-list > ul > li > a:hover 
    {
       height:50px;
    } */
 
}


@media only screen and (max-width: 550px){
    .logo-header{
        width:284px;
/*        height:38px;*/
       top:16px;
/*         float:left;
        margin:8px 7px 12px;
        position:relative*/
    }
}

@media only screen and (min-width: 451px){

/*    #search{
        float: right;
        width: 300px;
         border: solid 1px #B87333;
    }*/
}

@media only screen and (max-width: 450px){
    #search{
        float:right;
        width: 220px;
    }
    

    
    
}

@media only screen and (max-width: 350px){
    #search{
        width: 150px;
    }
    .container{
        padding-left:0px;
        padding-right:0px;
    }
    /* and reduce the padding on table cells for homepage  */
    #bank_rates_mobile td{
        padding:1px;
    }
    
    #mainmenu > div > div.navbar-header > button{
        left:10px;
    }
}



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


                                                .average_rates {
                                                    display: none;
                                                }

                                                .row.row_border_bottomX {
                                                    display: none;
                                                }


                                                .RatesOnly {
                                                    display: none;
                                                }

                                               
                                                
                                                #bank_rates_mobile{
                                                display:none;
                                                }   

                                                
                                                  
                                             

                                                 [id="bank_rates_desktop"]              
                                                /* Force table to not be like tables anymore */
                                                table, thead, tbody, th  , td , tr  {
                                                    display: block;
                                                }

                                                    /* Hide table headers (but not display: none;, for accessibility) */
                                                    [id="bank_rates_desktop"]
                                                    thead tr  {
                                                        position: absolute;
                                                        top: -9999px;
                                                        left: -9999px;
                                                    }
                                                    
                                                tr {
                                                    border: 1px solid #ccc;
                                                }
                                                                                                           
                                                td {
                                                    /* Behave  like a "row" */
                                                    border: none;
                                                    border-bottom: 1px solid #eee;
                                                    position: relative;
                                                    padding-left: 50%;
                                                      
                                                }

                                                    td:after {
                                                        /* Now like a table header */
                                                        position: absolute;
                                                        /* Top/left values mimic padding */
                                                        top: 6px;
                                                        left: 6px;
                                                        width: 45%;
                                                        padding-left: 10px;
                                                        white-space: nowrap;
                                                         
                                                    }




                                                                /*background-color: red;
                                                                         color: white;
                                                                         padding: 10px;*/





                                                td { 
						/* Behave  like a "row" */
						border: none;
						border-bottom: 1px solid #eee; 
						position: relative;
						padding-right: 50%; 
						}
 
                                              /*  #bank_rates_desktop::after {
						text-align: right;
						color: red;
						}
                                              */      
                                                


                                               /*[class="table.bank_rates_desktop"]*/
                                                
                                                {
                                                text-align: justify;  
                                                
                                                } 


                                                [id="bank_rates_desktop"]
                                                

                                                 td:hover 

                                                {
                                                background-color: lightgray;
                                                font-size: 100%;
                                                } 
                                               
                                               

                                                [id="bank_rates_desktop"]
                                                

                                                                                      
                                                td:nth-of-type(1):before {
                                                    content: "Interbank Rates      Buy 9:30AM -                               ";
                                                    text-align: left;   
                                                    
                                                }
                                                
                                                 [id = "bank_rates_desktop"]

                                                td:nth-of-type(2):before {
                                                    content: "Interbank Rates      Sell 09:30AM -                               ";
                                                }
                                                
                                                 [id="bank_rates_desktop"]
                                                td:nth-of-type(3):before {
                                                    content: "Retail Rates         Buy 09:30AM -                               ";
                                                }
                                                
                                                [id="bank_rates_desktop"]
                                                td:nth-of-type(4):before {
                                                    content: "Retail Rates         Sell 09:30AM -                               ";
                                                }
                                                [id="bank_rates_desktop"]  
                                                td:nth-of-type(5):before {
                                                    content: "Interbank Rates      Buy 12:30AM -                               ";
                                                }
                                                [id="bank_rates_desktop"] 
                                                td:nth-of-type(6):before {
                                                    content: "Interbank Rates      Sell 12:30AM -                               ";
                                                }
                                                [id="bank_rates_desktop"]
                                                td:nth-of-type(7):before {
                                                    content: "Retail Rates         Buy 12:30AM -                               ";
                                                }
                                                [id="bank_rates_desktop"]     
                                                td:nth-of-type(8):before {
                                                    content: "Retail Rates         Sell 12:30AM  -                               ";
                                                }
                                                [id="bank_rates_desktop"] 
                                                td:nth-of-type(9):before {
                                                    content: "Interbank Rates      Buy 15:30PM -                               ";
                                                }
                                                [id="bank_rates_desktop"] 
                                                td:nth-of-type(10):before {
                                                    content: "Interbank Rates     Sell 15:30PM -                               ";
                                                }
                                                [id="bank_rates_desktop"]
                                                td:nth-of-type(11):before {
                                                    content: "Retail Rates        Buy 15:30PM -                               ";
                                                }
                                                [id="bank_rates_desktop"]
                                                td:nth-of-type(12):before {
                                                    content: "Retail Rates        Sell 15:30PM -                               ";
                                                }


                                                








                                                table2::after {
                                                    content: none;
                                                }


                                                #RatesDisplay::before {
                                                    content: none;
                                                    display: none;
                                                }

                                                .col-sm-12.col-md-12.row.row_6_border_right_top_bottom.row_6_border_left_top_bottom.bg-color1::before {
                                                    content: none;
                                                    /*display: none*/
                                                }




                                                .ellipsis {
                                                    text-overflow: ellipsis;
                                                    /* Required for text-overflow to do anything */
                                                    white-space: nowrap;
                                                    overflow: hidden;
                                                }
                                            }


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


[id="hp_usd"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_usd"] { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_usd"] 
	tr { border: 1px solid #ccc; }
	[id="hp_usd"]
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_usd"]
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	
	

[id="hp_usd"] td:nth-of-type(2):before {
  /*  background: lightblue;   */
    content: "Buying:   "; }
	
	
	
	[id="hp_usd"] td:nth-of-type(3):before {
  /*  background: yellowgreen; */
    content: "Selling:   "; }

	
	
	
	
	} 
	
	
	


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


[id="hp_key"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_key"] { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_key"] 
	tr { border: 1px solid #ccc; }
	
	td  { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_key"]
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
		
	
	

[id="hp_key"] td:nth-of-type(2):before {
 /*   background: yellow; */
    content: "Buying   "; }
	
	
	
	
	[id="hp_key"] td:nth-of-type(3):before {
/*    background: silver;  */
    content: "Selling:      "; 
} 




} 






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


[id="hp_policyrate"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_policyrate"]  { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_policyrate"]  
	tr { border: 1px solid #ccc; }
	
	td  { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_policyrate"] 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	




	[id="hp_policyrate"] td:nth-of-type(2):before {
 /*   background: yellow;   */
    content: "BOZ Policy Rate:      "; }
} 












	
	



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


[id="hp_lending"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_lending"]  { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_lending"]  
	tr { border: 1px solid #ccc; }
	
	td  { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_lending"] 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	[id="hp_lending"]  	
	td:nth-of-type(2):before { content: "Overnight Lending Facility Rate:   "; }

    
	

	
}	



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


[id="hp_interbank"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_interbank"]  { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_interbank"]  
	tr { border: 1px solid #ccc; }
	
	td  { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_interbank"] 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	[id="hp_interbank"]  
	
	td:nth-of-type(2):before { content: "Overnight Interbank Interest Rate:   "; }
	
}	



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


[id="hp_bills"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_bills"]  { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_bills"]  
	tr { border: 1px solid #ccc; }
	
	td  { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_bills"] 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	

[id="hp_bills"] td:nth-of-type(2):before {
    /*background: pink;  */
    content: "Yield:   "; }
	
	
	
	
	[id="hp_bills"] td:nth-of-type(3):before {
/*    background: orange;   */
    content: "WA Discount Rate:    "; }
	
	
	
	
} 






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


[id="hp_bonds"] 
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td , tr  { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
	thead tr [id="hp_bonds"]  { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	[id="hp_bonds"]  
	tr  { border: 1px solid #ccc; }
	[id="hp_bonds"] 
	td : { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	[id="hp_bonds"] 
	td :before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	



[id="hp_bonds"] td:nth-of-type(2):before {
  /*  background: lightblue; */
    content: "Yield:   "; }
	
	
	
	[id="hp_bonds"] td:nth-of-type(3):before {
   /* background: yellowgreen; */
    content: "Coupon Rate:    "; 
} 


	
}