So, here is what i think: Since none of us have experience, no knows anybody else with experience, how about we make it collaborative? we each pick at it a little, and bring to hear our results.
Here is what i got so far:
/* Framework */
html, body
{
font-family: courier, sans-serif;
}
body
{
background-color: #8b89ea;
}
/* Content */
#content
{
background-color: #e2caef;
}
/* Head */
#mw-page-base
{
/*background-color: white;*/
background-color: #f4959b;
}
#mw-head-base
{
background-color: #f4b09b;
}
#mw-head
{
position: absolute;
top: 0;
right: 0;
width: 100%;
background-color: #f4bf9b;
}
/* Personal */
#p-personal
{
background-color:#f2d374;
}
/* Navigation Containers */
#left-navigation
{
background-color:#e8d3f4;
}
#right-navigation
{
background-color:#e28766;
}
/* Namespaces and Views */
div.vectorTabs
{
background-color: #bcf3ca;
}
div.vectorTabs
{
background-color:#9166ad;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li
{
background-color: #e2caef;
}
div.vectorTabs li.new a,
div.vectorTabs li.new a span,
div.vectorTabs li.new a:visited,
div.vectorTabs li.new a:visited span
{
color: #8b89ea;
}
div.vectorMenu ul
{
background-color: #bcf3ca;
}
/* Panel */
#mw-panel
{
background: #f49b9b;
}
/* Footer */
#footer
{
background-color:#8b89ea;
}
/* Categories */
.catlinks
{
background-color: #f4d49b;
}
Keep in mind, 2 things:
1) This is butt-ugly.
2) The purpose of this is too isolate usable CSS classes.
Remeber to implement this on your user/vector.css pages only.