The last few features I added to the Financial Manager didn’t have proper “theme” support via the style sheets. Unfortunately this was because as I was building it, I threw together the html and css in a very quick and messy way. I was using tables to style the pages rather than layers and other such things.
Because I have to add style support for the last new feature I took this moment to “redo” the css support. I took it from trailer trash to supermodel.
The good thing about this is that it is now supports “true” dynamic css templates since the javascript style changing code is out. This should also speed up the Financial Manager considerably. On the flip side though, I’m sure Internet Explorer is now not supported.
Behold, my beautiful css code.
.ns_page_title { font-size: 200%; }
.ns_page_title a { color: #252525; text-decoration: none; }
.ns_month_nav { border: 1px solid #555; background: #b7b7b7; margin-bottom: 15px; }
.ns_month_nav ul { list-style: none; padding: 6px; margin: 0; text-align: center; font-family: "Trebuchet MS", sans-serif; font-size: 75%; }
.ns_month_nav ul li { display: inline; font-weight: bolder; }
.ns_month_nav ul li.selected { font-size: 140%; color: #363636; }
.ns_month_nav ul li a { color: #363636; text-decoration: none; }
.ns_month_nav ul li a:hover { color: #00746b; }
.ns_parent_title { font-size: 170%; }
.ns_parent_title a { color: #252525; text-decoration: none; }
.ns_parent { margin-bottom: 15px; }
.ns_parent table { border: 1px solid #555; width: 100%; border-collapse: collapse; }
.ns_parent table td { padding: 6px 10px 6px 6px; font-family: "Trebuchet MS", sans-serif; font-size: 75%; }
.ns_parent table td.amount { width: 110px; }
.ns_parent table td.estimated { width: 110px; }
.ns_parent table td.actual { width: 110px; }
.ns_parent table tr.head { background: #b7b7b7; }
.ns_parent table tr.head td { color: #363636; font-weight: bold; }
.ns_parent table tr.head td.account { text-align: left; }
.ns_parent table tr.head td.amount { text-align: center; }
.ns_parent table tr.head td.estimated { text-align: center; }
.ns_parent table tr.head td.actual { text-align: center; }
.ns_parent table tr.content { background: #f6f6f6; }
.ns_parent table tr.content:hover { background: #ececec; cursor: pointer; }
.ns_parent table tr.content td.amount { text-align: right; }
.ns_parent table tr.content td.estimated { text-align: right; }
.ns_parent table tr.content td.actual { text-align: right; }
.ns_parent table tr.buttons { background: #ebebeb; }
.ns_parent table tr.buttons input { font-family: sans-serif; font-size: 80%; }
.ns_parent table tr.foot { background: #e1e1e1; font-weight: bold; }
.ns_parent table tr.foot td.amount { text-align: right; }
.ns_parent table tr.foot td.estimated { text-align: right; }
.ns_parent table tr.foot td.actual { text-align: right; }
.ns_child_title { font-size: 135%; margin-left: 50px; }
.ns_child_title a { color: #223344; text-decoration: none; }
.ns_child_title span a { color: #999; font-size: 60%; font-style: italic; }
.ns_child { margin-bottom: 15px; margin-left: 50px; }
.ns_child table { border: 1px solid #555; width: 100%; border-collapse: collapse; }
.ns_child table td { padding: 6px 10px 6px 6px; font-family: "Trebuchet MS", sans-serif; font-size: 75%; }
.ns_child table td.date { width: 110px; }
.ns_child table td.amount { width: 110px; }
.ns_child table td.estimated { width: 110px; }
.ns_child table td.actual { width: 110px; }
.ns_child table tr.head { background: #b7b7b7; }
.ns_child table tr.head td { color: #363636; font-weight: bold; }
.ns_child table tr.head td.date { text-align: left; }
.ns_child table tr.head td.description { text-align: left; }
.ns_child table tr.head td.amount { text-align: center; }
.ns_child table tr.head td.estimated { text-align: center; }
.ns_child table tr.head td.actual { text-align: center; }
.ns_child table tr.content { background: #f6f6f6; }
.ns_child table tr.content:hover { background: #ececec; cursor: pointer; }
.ns_child table tr.content td.amount { text-align: right; }
.ns_child table tr.content td.estimated { text-align: right; }
.ns_child table tr.content td.actual { text-align: right; }
.ns_child table tr.fields { background: #ebebeb; }
.ns_child table tr.fields input { font-family: sans-serif; font-size: 80%; width: 100%; }
.ns_child table tr.buttons { background: #e1e1e1; font-weight: bold; }
.ns_child table tr.buttons td { text-align: right; }
.ns_child table tr.buttons input { font-family: sans-serif; font-size: 80%; font-weight: normal; }
.ns_edit { margin-bottom: 15px; margin-left: 50px; }
.ns_edit table { border: 1px solid #555; width: 100%; border-collapse: collapse; }
.ns_edit table td { padding: 6px 10px 6px 6px; font-family: sans-serif; font-size: 75%; }
.ns_edit table td.date { width: 110px; }
.ns_edit table td.amount { width: 110px; }
.ns_edit table td.estimated { width: 110px; }
.ns_edit table td.actual { width: 110px; }
.ns_edit table tr.fields { background: #f6f6f6; }
.ns_edit table tr.fields input { font-family: sans-serif; font-size: 80%; width: 100%; }
.ns_edit table tr.buttons { background: #e1e1e1; }
.ns_edit table tr.buttons td { text-align: right; }
.ns_edit table tr.buttons input { font-family: sans-serif; font-size: 80%; }