We Keep Coding

How to increment notifications when different buttons are clicked on multiple pages in jquery

I have a list of buttons. When a user clicks on one it will add and show you a notification bubble. This calculates how many times a user clicked a button. This works fine for the table, as shown below.
However I have more buttons on a different part of a page that I also want to include in to the notification list. For example, if I have the button pants and O clicks on it, it must check the current notifications to see if any one of them is clicked and add to it, and vice versa.
How can I achieve this?
function countN(counter) {
if (counter > 0) {
$('.notify').addClass("notification");
$('.market-odds .btn').addClass("notification")
$('.market-odds .btn').html(counter);
$(".notify").html(counter);
}
}
$('body').on('click', '.marketoptionrow.OP a.button', function() {
var alreadyClicked = $(this).hasClass('clicked');
if (!alreadyClicked) {
$(this).addClass('clicked');
var counter = parseInt($(".notify").html()) || 0
counter++;
countN(counter);
}
});
.notification {
position: absolute;
display: block;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: -1px;
width: auto;
min-width: 8px;
/*height: 9px;*/
line-height: 5px;
padding: 5px;
border-radius: 50%;
color: #fff;
box-shadow: 1px 1px 5px #000;
border: 2px solid #fff;
background-color: #b60000;
}
.button {
display: block;
width: 56px;
height: 22px;
line-height: 22px;
background: url(images/odds_button.png) #f9b108 repeat-x;
color: #005081;
border-radius: 9px;
text-decoration: none;
margin: 0 auto;
cursor: pointer;
border-left: 1px #f9b108 solid;
border-top: 1px #f9b108 solid;
border-bottom: 1px #f9b108 solid;
border-right: 1px #f9b108 solid;
box-shadow: 1px 1px 1px #005081;
text-transform: uppercase;
font-family: 'Roboto-Bold';
font-size: 14px;
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="notify"> Notification</span>
<br/>
<table>
<thead>
<tr>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr class="marketoptionrow OP" dataid="35917931">
<td><a class="button" bettype="W">Milk</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917934">
<td><a class="button" bettype="W">Salt</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917933">
<td><a class="button" bettype="W">EGGS</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917937">
<td><a class="button" bettype="W">flour</a></td>
</tr>
</tbody>
</table>
<br/>
How do i include this into the notifications. if this is clicked first before the table buttons then the table buttons must add to its list and vice versa
<div id="">
<div class="market">
<input type="button" id="1104263 " class="btn btn-betslip bg-blue" value="Pants">
</div><br/>
<div class="market">
<input type="button" id="1104264" class="btn btn-betslip bg-blue" value="Shirt">
</div><br/>
<div class="market">
<input type="button" id="1109306" class="btn btn-betslip bg-blue" value="Shoes">
</div>
</div>

"The resource cannot be found" when printing the page

I have developed a MVC 4 application.
There is a page which should be printed as it is.
If the print popup where we have to select the printer is closed, the web page gives a 404 error. But when the page is refreshed, the page gets loaded with no issues.
What could be the reason for this? Thanks in advance.
Here's a part of the page (The full page is very long)
#{
ViewBag.Title = "Details";
}
<div>
#{
string d = ViewBag.trans[0].REC_NO;
}
</div>
<form method="post" name="main" id="main">
<table x:str border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 689px" id="table5" bgcolor="#F3F3F3">
<colgroup>
<col width="64" span="7" style="width:48pt">
</colgroup>
#if (ViewBag.status.ToString().Trim() == "1" && !String.IsNullOrEmpty(ViewBag.lastDate) )
{
<tr>
<td align="center" height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p>
<font size="2" color="#FF0000" face="Trebuchet MS">Rejected
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "1" && String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Deleted
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "0" && !String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Initial
Receipt</font></td>
</tr>
}
#if (ViewBag.status.ToString().Trim() == "0" && String.IsNullOrEmpty(ViewBag.lastDate))
{
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<p align="center">
<font size="2" color="#FF0000" face="Trebuchet MS">Cashed
Receipt (Completed)</font></td>
</tr>
}
<tr>
<td height="17" style="height: 12.75pt; color: windowtext; font-size: 10.0pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Arial; text-align: general; vertical-align: bottom; white-space: nowrap; border: medium none; padding-left: 1px; padding-right: 1px; padding-top: 1px" width="676" colspan="7" align="left">
<input type="submit" value="Print" name="B1" style="NonPrintable; color:#0000FF; font-size:8pt; font-family:Trebuchet MS" onClick="PrintElem('main')" class="NonPrintable">
</td>
</tr></table>
The javascript function I used to print the area.
<script type="text/javascript">
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}</script>

Use like this
Print
Web browsers allow you to execute JavaScript statements directly by entering JavaScript code into the browser's URL text field. All you need to do is place a JavaScript: before your code to inform the browser you wish to run JavaScript.

Why does my jQuery slidedown not work in my table?

I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.
<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td><div id="flip">Pieter Schreurs</td>
<td>
<label for="pieter">Secretaris</label>
</div></td>
<td><div id="panel">Hidden information</div></td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>
</html>

I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel,
#flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr>
<td width="200">
<div id="flip">Pieter Schreurs</div>
<div id="panel">Hidden information</div>
</td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.
I changed implementation so that "Functie" doesn't move.
Demo
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
th, td {
width: 150px;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #42a5f5;
}
#panel, #flip {
padding: 5px;
}
#panel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li>Bestuur wijzigen</li>
<li>Bestuur toevoegen</li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
<tbody>
<tr>
<th>Naam</th>
<th>Functie</th>
</tr>
<tr id="flip">
<td>Pieter Schreurs<div id="panel">Hidden information</div></td>
<td>
<label for="pieter">Secretaris</label>
</td>
</tr>
<tr>
<td>Wessel Oblink</td>
<td>
<label for="wessel">Penningmeester</label>
</td>
</tr>
<tr>
<td>Luca Fraser</td>
<td>
<label for="luca">Voorzitter</label>
</td>
</tr>
</tbody>
</table>
</div>

How to achieve alternating row styles for a responsive table?

I think I need JavaScript to solve this but that's why I need help (I've only edited existing JavaScript - never created them).
I have two striped tables nest side-by-side that when viewed on a mobile device, the table on the right moves below the table on the left to look as one continuous table.
The problem is with the table striping only when viewed on a mobile device if the tbody row counts are an even number, I end up with two consecutive rows in the middle being the same color.
#media only screen and (max-width: 480px) {
.sizesTableContent {
display:block !important;
width:100% !important;
}
.hider {
display: none;
}
}
.sizesAsterisk {
width:100%;
border-collapse: collapse;
text-align: left;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.hanging {
text-indent: -0.5em;
padding-left: 0.5em;
}
.sizesTableContent {
vertical-align: top;
}
.sizesTwoColumn {
width:100%;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.sizes {
border-collapse: collapse;
white-space: nowrap;
width: 100%;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.sizes td:first-child {
text-align: left;
font-weight: bold;
}
.sizes th {
border-bottom: 1pt solid #000000;
vertical-align: bottom;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.sizes th:first-child {
text-align: left;
}
.sizes tbody tr:hover {
background: #D2DAE3;
}
.sizes tbody tr:nth-child(odd) {
background: #ffffcc;
}
.sizes tbody tr:nth-child(odd):hover {
background: #D2DAE3;
}
<table class="sizesAsterisk">
<tr>
<td>
<table class="sizesTwoColumn">
<tr>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead>
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--First column size data go between the tbody tags-->
<tr>
<td>1" x 1/4</td>
<td>.620</td>
<td>12.40</td>
</tr>
<tr>
<td>1-1/4 x 5/15</td>
<td>.960</td>
<td>19.20</td>
</tr>
<tr>
<td>1-1/2 x 5/16</td>
<td>1.180</td>
<td>23.60</td>
</tr>
</tbody>
</table>
</td>
<td class="hider" style="border-right: 1px solid #000000" width="14px"></td>
<td class="hider" width="14px"></td>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead class="hider">
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--Second column size data go between the tbody tags-->
<tr>
<td>1-1/2 x 7/16</td>
<td>1.560</td>
<td>31.20</td>
</tr>
<tr>
<td>1-3/4 x 7/16<span style="color:red"> *</span>
</td>
<td>1.910</td>
<td>38.20</td>
</tr>
<tr>
<td>2" x 1/2<span style="color:red"> *</span>
</td>
<td>2.587</td>
<td>51.74</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hanging"><!--Asterisk notes go between the td tags-->
<span style="color:red">* </span>Also in 10' Lengths.
</td>
</tr>
</table>

You won't need JavaScript. Simply use some :last-child pseudo-selectors in your media query to change the presentation a little more in mobile view. This essentially switches the even/odd backgrounds of the 2nd table only in mobile view:
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
JSFiddle Example
#media only screen and (max-width: 480px) {
.sizesTableContent {
display:block !important;
width:100% !important;
}
.hider {
display: none;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
}
.sizesAsterisk {
width:100%;
border-collapse: collapse;
text-align: left;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.hanging {
text-indent: -0.5em;
padding-left: 0.5em;
}
.sizesTableContent {
vertical-align: top;
}
.sizesTwoColumn {
width:100%;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.sizes {
border-collapse: collapse;
white-space: nowrap;
width: 100%;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.sizes td:first-child {
text-align: left;
font-weight: bold;
}
.sizes th {
border-bottom: 1pt solid #000000;
vertical-align: bottom;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.sizes th:first-child {
text-align: left;
}
.sizes tbody tr:hover {
background: #D2DAE3;
}
.sizes tbody tr:nth-child(odd) {
background: #ffffcc;
}
.sizes tbody tr:nth-child(odd):hover {
background: #D2DAE3;
}
<table class="sizesAsterisk">
<tr>
<td>
<table class="sizesTwoColumn">
<tr>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead>
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--First column size data go between the tbody tags-->
<tr>
<td>1" x 1/4</td>
<td>.620</td>
<td>12.40</td>
</tr>
<tr>
<td>1-1/4 x 5/15</td>
<td>.960</td>
<td>19.20</td>
</tr>
<tr>
<td>1-1/2 x 5/16</td>
<td>1.180</td>
<td>23.60</td>
</tr>
</tbody>
</table>
</td>
<td class="hider" style="border-right: 1px solid #000000" width="14px"></td>
<td class="hider" width="14px"></td>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead class="hider">
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--Second column size data go between the tbody tags-->
<tr>
<td>1-1/2 x 7/16</td>
<td>1.560</td>
<td>31.20</td>
</tr>
<tr>
<td>1-3/4 x 7/16<span style="color:red"> *</span>
</td>
<td>1.910</td>
<td>38.20</td>
</tr>
<tr>
<td>2" x 1/2<span style="color:red"> *</span>
</td>
<td>2.587</td>
<td>51.74</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hanging">
<!--Asterisk notes go between the td tags-->
<span style="color:red">* </span>Also in 10' Lengths.</td>
</tr>
</table>

RAL to RGB/HEX via javascript

I'm a beginner when it comes to javascript...I got a project which requires the following:
Conversion from RAL-Color-Codes to RGB/HEX (javascript).
I overthought that and came across some ideas:
1.) Make a complex list which inherits all RAL-Codes (around 213+)
2.) to be DRY - get RAL-to-RGB/HEX-Information from: http://www.ralcolor.com/
Well - as I said: I'm a beginner in javascript...
It would be very nice if you could give me some hints to start the coding, as I'm a media-designer, not a programmer :(
Best regards,
daft

Here's a short example of parsing the table itself. This is my standard template blank.html file with the addition of 4 rows of the table and some code in mInit.
A few things to consider, in no particular order:
It seems that every 2nd table row is empty
The rgb values use the - as a separator, rather than ,
It seems unlikely that you'd want the hex code and the rgb code. If you give the(some?) browser a # code, it converts it internally to an rgb() code. (Chrome 32.0.1700.102 m) If this is suitable, just grab the hex-code, since it doesn't need to be altered with a RegEx like the rgb value does.
you can have a look around http://w3schools.com for documentation of the various functions/attributes I've used.
Output: (excerpt)
There are 4 rows in the table
RAL 7046: rgb: 130,137,143 - hex: #82898F
RAL 7047: rgb: 208,208,208 - hex: #D0D0D0
/////////////////////////////////////////////////////////////
//// U n u s e d i n t h i s s a m p l e
/////////////////////////////////////////////////////////////
function newEl(tag) {
return document.createElement(tag);
}
function newTxt(txt) {
return document.createTextNode(txt);
}
function toggleClass(element, newStr) {
var index = element.className.indexOf(newStr);
if (index == -1)
element.className += ' ' + newStr;
else {
if (index != 0)
newStr = ' ' + newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func) {
var i, n = nodeList.length;
for (i = 0; i < n; i++) {
func(nodeList[i], i, nodeList);
}
}
/////////////////////////////////////////////////////////////
//// R e q u i r e d b y t h i s s a m p l e
/////////////////////////////////////////////////////////////
function byId(e) {
return document.getElementById(e);
}
window.addEventListener('load', mInit, false);
function mInit() {
var tbl = byId('colTable');
var rows = tbl.rows
var output = '';
var i, n, curRowNum, curRowOfCells;
output = "There are " + rows.length + " rows in the table" + "<br>";
for (i = 0; i < rows.length; i++) {
curRowOfCells = rows[i].cells;
if (rows[i].cells[0].childNodes.length != 0) {
var curRalCode, curRgb, curHex;
curRalCode = rows[i].cells[0].querySelectorAll('p span')[0].innerHTML;
curRgb = rows[i].cells[1].childNodes[0].innerHTML;
// change 130-137-143 into 130,137,143
curRgb = curRgb.replace(/-/g, ',');
curHex = rows[i].cells[2].childNodes[0].innerHTML;
output += curRalCode + ": " + "rgb: " + curRgb + " - hex: " + curHex + "<br>";
}
}
byId('output').innerHTML = output;
}
<div id='output'></div>
<table id='colTable'>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7046</span></p>
</td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">130-137-143</span></td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#82898F</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris tele 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 2</span></p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7047</span></p>
</td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">208-208-208</span></td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#D0D0D0</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris
tele 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 4</span></p>
</td>
</tr>
</table>