Text after custom checkboxes isn't on baseline

[haji]

In the following code:\[code\]<p><input type="checkbox" /> Pavement<input type="checkbox" /> Dirt or rocky trails<input type="checkbox"/> Gravel roads</p>\[/code\]along with the following CSS:\[code\]h1, input, button, textarea, progress, p, a, ul, li { font-family: "Open Sans", sans-serif; font-size: 10pt; color: #666; letter-spacing: normal; text-indent: 0; text-shadow: 0 1px 0 hsla(0,0%,100%,.75); margin: 10px 2px;}input[type="checkbox"], input[type="radio"] { background-color: #f4f4f4; background-image: -webkit-linear-gradient(90deg, hsla(0,0%,0%,.05), hsla(0,0%,0%,.01)); box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5), 0 1px 2px hsla(0,0%,0%,0.5); border: none; cursor: pointer; height: 16px; width: 16px; position: relative; -webkit-appearance: none;}\[/code\]The text after the checkboxes for some reason appears to be several pixels above the baseline. I tried removing all the CSS and the problem was resolved (the problem is also solved when I remove all the custom checkbox styling), but when I began to remove/replace the CSS line by line I couldn't find the problem. Any ideas? Thanks!