CSS for printer-happy PDF version of a dynamic web page

Our customer deliverable is an online scorecard that is an evaluation of a researcher'manuscript. It was intended to be used online, and has many interactive features. However, our customers are using the printed/PDF version much more than we intended, so an auto-generated PDF format isn't cutting it. We need someone to take our mockup of a more "print-friendly" layout, and translate it into CSS that different browsers will all interpret the same way when it gets to print view. Each customer gets a scorecard with multiple dynamic elements within the same general structure, so we need code for a print layout that will put all those dynamic elements in the right places according to the layout rules we specify. I am attaching the current PDF that is generated, plus mockup of what we want it to look like, and the link below goes to a sample of the current online version: [login to view URL] Please pay particular attention to the notes added to the mockup PDF; we have specified various layout/formatting rules that will make this work with the varying lengths of text from one scorecard to another. [note that in the printable version, we don't include anything beyond "Novelty & Interest" on the left hand nav of the online version]