bbn-bernard/gist:51ff82342a1a0e2f0a41

## gistfile1.txt
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">


body, table, td, span, div {
    font-family: verdana, calibri;
}

.act_as_table {
    display: table;
}
.act_as_row  {
    display: table-row;
}
.act_as_cell {
    display: table-cell;
}
.act_as_thead {
    display: table-header-group;
}
.act_as_tbody {
    display: table-row-group;
}
.act_as_tfoot {
    display: table-footer-group;
}
.act_as_caption {
    display: table-caption;
}
act_as_colgroup {
    display: table-column-group;
}

.list_table, .data_table {
    width: 100%;
    table-layout: fixed
}

.bg, .act_as_row.labels {
    background-color:#F0F0F0;
}

.list_table, .data_table, .list_table .act_as_row {
    text-align:left;
    font-size: 11px;
    padding-right:3px;
    padding-left:3px;
    padding-top:2px;
    padding-bottom:2px;
    border-collapse:collapse;
}

.list_table .act_as_row.labels, .list_table .act_as_row.initial_balance, .list_table .act_as_row.lines {
    border-color:gray;
    border-bottom:1px solid lightgrey;
}

.data_table .act_as_cell {
    text-align: center;
    padding: 2px;
}

.data_table .act_as_cell, .list_table .act_as_cell {
    word-wrap: break-word;
}

.labels {
    font-weight: bold;
    width: 20%;
}

.initial_balance .act_as_cell {
    font-style:italic;
}

.account_title {
    font-size:10px;
    font-weight:bold;
    page-break-after: avoid;
}

.act_as_cell.amount {
    word-wrap:normal;
    text-align:right;
}

.list_table .act_as_cell{
    padding-left: 5px;
/*    border-right:1px solid lightGrey;  uncomment to active column lines */
}
.list_table .act_as_cell.first_column {
    padding-left: 0px;
/*    border-left:1px solid lightGrey; uncomment to active column lines */
}

.sep_left {
    border-left: 1px solid lightGrey;
}

.account_level_1 {
    text-transform: uppercase;
    /*font-weight: bold;*/
    font-size: 15px;
    background-color:#F0F0F0;
}

/*
.account_level_1 .act_as_cell {
    height: 30px;
    vertical-align: bottom;
}
*/

.account_level_2 {
    /*text-transform: uppercase;
    font-weight: bold;*/
    font-size: 12px;
    background-color:#F0F0F0;
}

/*
.account_level_2 .act_as_cell {
    height: 20px;
    vertical-align: bottom;
}

.account_level_3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    background-color:#FAFAFA;
}

.account_level_4 {
    font-weight: bold;
    font-size: 11px;
}
*/

.account_level_5 {

}

.regular_account_type {
    font-weight: normal;
}

.view_account_type {
    font-weight: bold;
}

.account_level_consol {
    font-weight: normal;
    font-style: italic;
}

.overflow_ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.list_table .act_as_cell {
    padding: 2px 0 2px 0;
}

.data_table .act_as_row.labels .act_as_cell{
    padding: 5px;
}

    </style>
</head>
<body>


        <div class="act_as_table data_table">
            <div class="act_as_row labels">
                <div class="act_as_cell">Col 1</div>
                <div class="act_as_cell">Col 2</div>
                <div class="act_as_cell">Col 3</div>
                <div class="act_as_cell">Col 4</div>
                <div class="act_as_cell">
                    Date
                </div>
            </div>
            <div class="act_as_row">
                <div class="act_as_cell">Val 1</div>
                <div class="act_as_cell">Val 2</div>
                <div class="act_as_cell">Val 3</div>
                <div class="act_as_cell">Val 4</div>
                <div class="act_as_cell">16/09/2014</div>
            </div>
        </div>

        <div class="act_as_table list_table" style="margin-top: 20px;">
            <div class="act_as_row">
                    <div class="act_as_cell labels">Row 1</div>
                    <div class="act_as_cell">Val 1</div>
             </div>
             <div class="act_as_row">
                    <div class="act_as_cell labels">Row 2</div>
                    <div class="act_as_cell">Val 2</div>
             </div>

        </div>
        <div class="act_as_table list_table" style="display: block; width:20%; margin-top: 100px; text-align: center">
            <span>Best regards,</span>
            <div style="padding-top: 50px;">
              (Name)
            </div>
        </div>
</body>
</html>
	<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style type="text/css">


	body, table, td, span, div {
	font-family: verdana, calibri;
	}

	.act_as_table {
	display: table;
	}
	.act_as_row {
	display: table-row;
	}
	.act_as_cell {
	display: table-cell;
	}
	.act_as_thead {
	display: table-header-group;
	}
	.act_as_tbody {
	display: table-row-group;
	}
	.act_as_tfoot {
	display: table-footer-group;
	}
	.act_as_caption {
	display: table-caption;
	}
	act_as_colgroup {
	display: table-column-group;
	}

	.list_table, .data_table {
	width: 100%;
	table-layout: fixed
	}

	.bg, .act_as_row.labels {
	background-color:#F0F0F0;
	}

	.list_table, .data_table, .list_table .act_as_row {
	text-align:left;
	font-size: 11px;
	padding-right:3px;
	padding-left:3px;
	padding-top:2px;
	padding-bottom:2px;
	border-collapse:collapse;
	}

	.list_table .act_as_row.labels, .list_table .act_as_row.initial_balance, .list_table .act_as_row.lines {
	border-color:gray;
	border-bottom:1px solid lightgrey;
	}

	.data_table .act_as_cell {
	text-align: center;
	padding: 2px;
	}

	.data_table .act_as_cell, .list_table .act_as_cell {
	word-wrap: break-word;
	}

	.labels {
	font-weight: bold;
	width: 20%;
	}

	.initial_balance .act_as_cell {
	font-style:italic;
	}

	.account_title {
	font-size:10px;
	font-weight:bold;
	page-break-after: avoid;
	}

	.act_as_cell.amount {
	word-wrap:normal;
	text-align:right;
	}

	.list_table .act_as_cell{
	padding-left: 5px;
	/* border-right:1px solid lightGrey; uncomment to active column lines */
	}
	.list_table .act_as_cell.first_column {
	padding-left: 0px;
	/* border-left:1px solid lightGrey; uncomment to active column lines */
	}

	.sep_left {
	border-left: 1px solid lightGrey;
	}

	.account_level_1 {
	text-transform: uppercase;
	/font-weight: bold;/
	font-size: 15px;
	background-color:#F0F0F0;
	}

	/*
	.account_level_1 .act_as_cell {
	height: 30px;
	vertical-align: bottom;
	}
	*/

	.account_level_2 {
	/*text-transform: uppercase;
	font-weight: bold;*/
	font-size: 12px;
	background-color:#F0F0F0;
	}

	/*
	.account_level_2 .act_as_cell {
	height: 20px;
	vertical-align: bottom;
	}

	.account_level_3 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	background-color:#FAFAFA;
	}

	.account_level_4 {
	font-weight: bold;
	font-size: 11px;
	}
	*/

	.account_level_5 {

	}

	.regular_account_type {
	font-weight: normal;
	}

	.view_account_type {
	font-weight: bold;
	}

	.account_level_consol {
	font-weight: normal;
	font-style: italic;
	}

	.overflow_ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}


	.list_table .act_as_cell {
	padding: 2px 0 2px 0;
	}

	.data_table .act_as_row.labels .act_as_cell{
	padding: 5px;
	}

	</style>
	</head>
	<body>


	<div class="act_as_table data_table">
	<div class="act_as_row labels">
	<div class="act_as_cell">Col 1</div>
	<div class="act_as_cell">Col 2</div>
	<div class="act_as_cell">Col 3</div>
	<div class="act_as_cell">Col 4</div>
	<div class="act_as_cell">
	Date
	</div>
	</div>
	<div class="act_as_row">
	<div class="act_as_cell">Val 1</div>
	<div class="act_as_cell">Val 2</div>
	<div class="act_as_cell">Val 3</div>
	<div class="act_as_cell">Val 4</div>
	<div class="act_as_cell">16/09/2014</div>
	</div>
	</div>

	<div class="act_as_table list_table" style="margin-top: 20px;">
	<div class="act_as_row">
	<div class="act_as_cell labels">Row 1</div>
	<div class="act_as_cell">Val 1</div>
	</div>
	<div class="act_as_row">
	<div class="act_as_cell labels">Row 2</div>
	<div class="act_as_cell">Val 2</div>
	</div>

	</div>
	<div class="act_as_table list_table" style="display: block; width:20%; margin-top: 100px; text-align: center">
	<span>Best regards,</span>
	<div style="padding-top: 50px;">
	(Name)
	</div>
	</div>
	</body>
	</html>