Convert an HTML site design to a responsive design using my parameters

We have a number of HTML templates used in our custom CMS that need conversion to responsive (mobile friendly), CSS driven code. This project requires you to convert one such template into a responsive HTML template that uses CSS to make it conform to the screen on which it is displaying (mobile, tablet, PC, etc). You are welcome to change the overall look of the design, though it is for a professional so it needs to be a professional looking design. Also, there are some coding parameters that must be maintained for the navigation. Specifically, the navigation HTML must be list based, and the id and class assigned to the <UL> tag must be as follows ('nav' and 'classmain'). <NAVITEMS> <ul id="nav" class="classmain"> <li><a href="[login to view URL]">Home</a></li> <li><a href="[login to view URL]">Areas of Practice</a></li> <li class="dir"><a href="[login to view URL]">About This Person</a> <ul class="dropdown"> <li><a href="[login to view URL]">Professional Resume</a></li> <li><a href="[login to view URL]">Testimonials</a></li> </ul> </li> <li><a href="[login to view URL]">Available Dates</a></li> <li class="dir"><a href="[login to view URL]">Valuable Links</a> <ul class="dropdown"> <li><a href="[login to view URL]">[login to view URL]</a></li> <li><a href="[login to view URL]">CA Dispute Resolution Council</a></li> <li><a href="[login to view URL]">ABA Dispute Resolution Section</a></li> <li><a href="[login to view URL]">College Comm. Arbitratrators</a></li> </ul> </li> <li><a href="[login to view URL]">Contact Us</a></li> </ul> </NAVITEMS> I am attaching the HTML file and current CSS files. Again, you are welcome to modify these files, or completely rewrite them (while observing the restrictions I note, above). The navigation is vertically aligned in this example, but it doesn't need to be (you can arrange it however you think it looks good. If you impress me, I have more of these to be done. Thanks