You can put the css styling in the template's <head> section of the soy file that you have created for the overlay.
border: 1px solid #DADADA;
border-bottom-left-radius: 6px 6px;
border-bottom-right-radius: 6px 6px;
border-top-left-radius: 6px 6px;
border-top-right-radius: 6px 6px;
margin: 0px 0px 22px;
padding: 10px 5px;
<<table id="table-container-id" class="table-container">
The only problem there is that the CSS is in the header of the page all the time; it's not cached by the browser (and CDN if you use one) by having it in a separate file. In our 22.214.171.124 theme we have a separate custom CSS file we pull into the main template. We're just reviewing how we do this as we do our Jive 6 upgrade. There's an FTL called custom-css.ftl which at first looked like it'd fit the bill, but it's essentially just injecting the CSS into the page header, which is less than ideal. I'm hoping to find something better, without having to alter the main templates to include my own CSS file.
Yeah, the reason I'm asking here is because I'm currently including the style inline by defining a .style template within my Soy namespace and calling that to insert the CSS above my HTML. I had thought about the custom-css.ftl approach however I thought that was only for templates and wasn't sure about how I would do it for an overlay. I could also use a plugin to include a CSS file which will be called all the time however that also didn't seem like the best way.
My current project doesn't have much styling so this a fairly small problem however I thought that it would be better to ask now than to come across this in the future, perhaps in a different project, when it would become a larger problem.
Close but not exactly what I was after, I wanted to include my CSS independent of any themes or plugins. I'll leave the question open but mark your answer as helpful.