.color-box{margin-top:20px;margin-bottom: 10px; padding-left:17px}
.color-box p.extra{padding-top:5px}
.color-box strong{font-size:16px;padding-right:5px;font-family:CuprumFFU,"Trebuchet MS",Arial,sans-serif}
.color-box .shadow{margin:0}
.info-tab{width:36px;height:50px;float:left;margin-left:-21px;position:relative;top:6px;background:url(../images/icons.png) no-repeat}
.tip-box{font-family: 'Roboto', sans-serif; font-size: 1.0em; padding:5px 15px 5px 25px; color:#2e5014; background:#d5efc2; }
.tip-box a:hover{color:#000}
.tip-icon{background-position:0 -120px}

/* Html

<!--Tip Box-->
            <div class="color-box">
                <div class="shadow">
                    <div class="info-tab tip-icon" title="Useful Tips">&nbsp;</div>
                    <div class="tip-box">
                        <p><strong>Tip:</strong>The concepts from each chapter in this tutorial tend to build on those from previous chapters. So it's a good idea to ensure that you have understood the every topic very clearly before moving on to the next chapter.</p>
                    </div>
                </div>
            </div>
            <!--End:Tip Box-->
*/