Phone Number Panel

by Charles Butler

HTML

<div id="opening_time-3" class="opening-time">
    <div class="time-table">
        
<h2 class="opening-time--title">CALL US NOW!</h2>
        <div class="inner-bg">
            <dl class="week-day">
<dt>Monday</dt>

                <dd>7 AM - 11 PM</dd>
            </dl>
            <dl class="week-day light-bg today">
<dt>Tuesday</dt>

                <dd>7 AM - 11 PM</dd>
            </dl>
            <dl class="week-day">
<dt>Wednesday</dt>

                <dd>7 AM - 11 PM</dd>
            </dl>
            <dl class="week-day light-bg">
<dt>Thursday</dt>

                <dd>7 AM - 11 PM</dd>
            </dl>
            <dl class="week-day">
<dt>Friday</dt>

                <dd>7 AM - 11 PM</dd>
            </dl>
            <dl class="week-day light-bg closed">
<dt>Saturday</dt>

                <dd>EMERGENCY</dd>
            </dl>
            <dl class="week-day closed">
<dt>Sunday</dt>

                <dd>EMERGENCY</dd>
            </dl>
        </div>
        <div class="additional-info">Fast service; On-site in hours!</div>
    </div>
</div>

CSS

.opening-time {
    clear: both;
    width: 300px;
}
.opening-time .time-table {
    color: #777777;
    background-color: #f6f6f6;
    border-radius: 3px;
    padding: 0px;
    -moz-box-shadow: 0 0 3px 0 #888;
    -webkit-box-shadow: 0 0 3px 0 #888;
    box-shadow: 0 0 3px 0 #888;
    overflow: hidden;
}
.opening-time .time-table .opening-time--title {
    position: relative;
    font-size: 22px;
    color: #305088;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.9);
    margin: 0;
    border-bottom: 0px solid rgba(0, 0, 0, 0.1);
    padding: 12px 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFF 2%, rgba(255, 255, 255, 0.99) 3%, rgba(255, 255, 255, 0.48) 97%, rgba(255, 255, 255, 0.32) 98%, rgba(255, 255, 255, 0) 100%) repeat scroll 0% 0% #CCC;
border: medium none;
border-radius: 0px;
}
.opening-time .time-table > .inner-bg {
    padding-top: 10px;
        padding-bottom: 10px;

    position: relative;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        background-color: #efefef;

}
/*
.opening-time .time-table > .inner-bg:before {
    content: "";
    width:100px;
    height:100px;
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: -50px;
    background: #0093D0;
    border-radius: 1000px;
}
*/
.opening-time .time-table > .additional-info {
    padding: 16px 4px;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    color: #305088;
}
.opening-time .week-day {
    padding: 4px 10px;
    margin: 0;
    background: #EFEFEF;
}


.opening-time .week-day dt {
    width: 50%;
    float: left;
    font-weight: normal;
}
.opening-time .week-day dd {
    text-align: right;
}
.opening-time .week-day.closed dt, .opening-time .week-day.closed dd {
    color: #aaa;
}
.opening-time .week-day.today dt, .opening-time .week-day.today dd {
    color: #f68c24;
    font-weight: bold;
}