Edit in JSFiddle

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Penka Каменова" />
    <link href="ticket.css" type="text/css" rel="stylesheet" />
    <title>Ticket</title>
</head>
<body>
    <section>
        <header>
            <h1>Ticket ID: 409788</h1>
        </header>
        <dl>
            <dt>Name:</dt>
            <dd id="name" class="dot">Parker Seidel</dd>
            <dt class="support">&nbsp;</dt>
            <dd class="support">No Active Support</dd>
            <dt>Email:</dt>
            <dd><a href="mailto:seidel@aptmail.com">seidel@aptmail.com</a></dd>
            <dt>Response Time:</dt>
            <dd>72hours, 60hours left</dd>
            <dt>Last Action:</dt>
            <dd>Never been locked.</dd>
            <dt>&nbsp;</dt>
            <dd><a href="#">Link to public post</a></dd>
            <dt>Status:</dt>
            <dd id="status" class="not_answered">Not answered</dd>
        </dl>
    </section>
</body>
</html>
body {
    background-color: #595959;
    font-family: Arial;
    font-size: 18px;
    color: #fff;
}

section header h1 {
    font-size: 26px;
    color: #bbb9b6;
    font-weight: normal;
    margin-bottom: -5px;
}

a {
    text-decoration: none;
}

    dd#name, a:link {
        color: #f9e7a1;
        font-size: 0.98em;
    }

    a:visited {
        color: #f9e7a1;
    }

    a:hover {
        color: #f88a72;
    }

dt {
    float: left;
    font-style: italic;
    width: 160px;
    padding-right: 5px;
    margin: 7px 0;
}

dd {
    margin: 7px 0;
    padding: 7px 0;
    color: #aeb1b4;
}

    dd.dot:before {
        content: url('http://s20.postimage.org/5zzqrag89/dot.png');
        margin-right: 5px;
    }

    dt.support, dd.support {
        margin: -17px 0px 0px 0px;
        font-size: 20px;
    }

    dd.support {
        color: #ff000e;
    }

    dd#status.not_answered {
        font-size: 20px;
        color: #e16a25;
    }