Telerik Academy CSS Exam-Variant 1

task3

HTML

<body>
    <div id="wrapper">
        <div>
            <h1>Chat session with Toshko</h1>
            <ul class="messages-list">
                <li class="me-item">
                    <span>Me:</span>
                    <p>Ko staa e Toshooo?!</p>
                    <span class="date">11:18 11-fev-2013</span>
                </li>
                <li class="me-item">
                    <span>Me:</span>
                    <p>:)</p>
                    <span class="date">11:19 11-fev-2013</span>
                </li>
                <li class="toshko-item">
                    <span>Tosko:</span>
                    <p>Batka samo hubavi raboti</p>
                    <span class="date">11:25 11-fev-2013</span>
                </li>
                <li class="toshko-item">
                    <span>Tosko:</span>
                    <p>Pri teb kak e?</p>
                    <span class="date">11:25 11-fev-2013</span>
                </li>
                <li class="me-item">
                    <span>Me:</span>
                    <p>Staa</p>
                    <span class="date">11:19 11-fev-2013</span>
                </li>
            </ul>
            <input type="text" />
            <button>send</button>
        </div>
    </div>
</body>

CSS

* {
    margin:0px;
    padding:0px;
}
div#wrapper {
    width: 960px;
    font-family: Cambria, 'Times New Roman', 'Nimbus Roman No9 L', 'Freeserif', Times, serif;
    font-size: 16px;
}
div#wrapper >div  {
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EDEDED), color-stop(100, #ADADAD));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #EDEDED 0%, #ADADAD 100%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #EDEDED 0%, #ADADAD 100%);

    margin:30px;
    width:380px;
    height:460px;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    border:1px solid black; 
}
div#wrapper >div h1 {
     color:#555555;
     padding-top:15px;
     padding-left:22px;
     margin-bottom:5px;
     font-size:1.8em;   
}
div#wrapper >div ul.messages-list {
    display:block;
    width:380px;
    height:400px;
}
    div#wrapper > div ul li {
        list-style-type:none;
        margin-top:5px;
        padding-left:20px;
        padding-top:5px;
        width:210px;
        color:#655555;

    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    border-radius: 15px; 
    border:1px solid black; 
    }
/*me item*/
div#wrapper >div ul.messages-list li.me-item {
    float:right;
    clear:both;
    margin-right:15px;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #37EEFF), color-stop(100, #BEFAFF));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #37EEFF 0%, #BEFAFF 100%);
    /* W3C Markup */ 
    background-image: linear-gradient(to bottom, #37EEFF 0%, #BEFAFF 100%);
}

div#wrapper >div ul.messages-list li.me-item span:not(:last-of-type){
    font-weight:bold;
}
div#wrapper >div ul.messages-list li.me-item p{
   
}
div#wrapper >div ul.messages-list li.me-item span.date{
    font-family:Consolas;
    float:right;
    font-size:0.8em;
    padding-right:10px;
   ...