/**************************************************************************************************
** This work is licensed under the Creative Commons Attribution License. **
** To view a copy of this license, visit http://creativecommons.org/licenses/by/2.0/ **
** or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. **
** **
** Essentially this means you can do whatever you want with the code as long as you credit **
** Grayden MacLennan (grayden.maclennan@case.edu) as the original author. **
** **
** This document was last modified on April 11, 2005 **
**************************************************************************************************/
/*
* Case Western Reserve University web site template color theme picker by Grayden MacLennan,
* Technology Specialist, Mandel Center for Nonprofit Organizations.
* grayden.maclennan@case.edu 216.368.4815
*
* This CSS file was created to provide an easy mechanism of choosing the color theme in the
* web site template files created by Yamamoto Moss Inc. (http://www.yamamoto-moss.com/) for
* Case Western Reserve University as part of the university's rebranding effort.
*
* This stylesheet has been tested on the "Basic" template set and the "Advanced" template set.
*
* The colors available in Case's web palette are:
* - cranberry #7C2433
* - forest #3E775D
* - lime #93A530
* - navy #003962
* - olive #6F7730
* - purple #6E5D91
* - rust #A96B00
* - teal #00646E
* - turquoise #037596
*
* These colors have 90% saturation complementary colors. They are:
* - cranberry #88383E
* - forest #538169
* - lime #9BAC52
* - navy #2E4767
* - olive #7C823F
* - purple #7A6A99
* - rust #B1792B
* - teal #296E78
* - turquoise #327F9E
*
* To use this stylesheet, simply link this file as another stylesheet.
* I would greatly appreciate it if you would give me a line credit in your source code.
* You can modify the following example to include the file (substituting your paths of course):
* Example:
*
* Once the style sheet is linked, add a class declaration to the tag of the document with
* the name of the desired color theme.
* Example:
*
* Remember that HTML elements can have more than one class at the same time. If you end up using
* several of my stylesheets, it wouldn't be unusual to see a tag that looks something like this:
* Example:
*
* This will override the colors defined in basic.css and advanced.css for the following elements:
* -
tags
* - "highlights" boxes (see notes below and in graydenTweaks.css)
* - the "pnav" primary navbar (horizontal beneath masthead in the Advanced template)
* - the "headline" box usually used as a section intro in the Advanced template
* - the right half of the masthead (actually it swaps out pre-made images of different colors)
*
* This will also override the colors defined in other css tweak files such as graydenTweaks.css
* and mandelcenter.css for the following elements:
* - sections of class "rightcolumnbox"
* - sections of class "boxedcontent"
* - a variation of the "highlights" box semantic structure - see notes below
*
* It will also override the background image in the right half of the page's masthead with the
* indicated picture files. The Case templates come with a few sample sets of masthead backgrounds
* but you can also create your own. NOTE: If you create your own set, be sure to check with the
* Case Web Development Team to make sure your images are consistent with the university's
* branding guidelines. At the time of the creation of this document, a copy of the branding
* guidelines can be downloaded at http://www.cwru.edu/univrel/marcomm/creative/caseguide.pdf
*
* Don't forget to also change the tag in your documents to link to the matching file for
* the left half of the masthead. That half of the masthead is hardcoded and not controlled by CSS!
*
* CSS NOTE:
* I intentionally chose NOT to use the "!important" declaration for most rules in this override file
* because the specificity of these overrides will already have a higher cascade priority than the
* originals. This way, in-document overrides can still be used to override THIS file if desired by
* using the "!important" declaration. You would more likely just NOT USE a body class in such a case,
* but the opportunity is there anyway.
*
* Stylesheet originally created December 27, 2004.
*/
/* CRANBERRY */
body.cranberry h3,
/* The
tag should be the same color as the page theme, whereas the
is always grey. */
body.cranberry .highlights,
/* The text inside a "highlights" box should be the same color as the page theme. */
body.cranberry #snav h3 a
/* On some occasions in the Advanced template set, you will want to have an h3 at the top of
your snav column and you may want that h3 to be a clickable link back to the section main
page. If you make the h3 a link, it will inherit the standard snav link colors and no longer
look like an h3. This just makes sure the h3 is the template theme color and not the default
color. There is no need to also define the :hover color because this is already high enough
cascade priority to override that behavior. */
{
color: #7C2433;
}
body.cranberry .highlightstitle,
/* The title bar of a "highlights" box should have a background the same as the page theme.
An alternative to this semantic structure is available in graydenTweaks.css. */
body.cranberry #pnav,
/* The primary navbar (horizontal beneath masthead) should be the same color as the page theme. */
body.cranberry .headline
/* This is usually used as a large colored box beneath the masthead in the advanced templates. */
{
background-color: #7C2433;
}
body.cranberry .headline h2
/* This provides a 90% saturation variation of the page theme color to accentuate a headline for a section intro page. */
{
background-color: #88383E;
}
body.cranberry .masthead
/* This changes out the image in the right half of the masthead to one that is tinted with the page theme color.
Use your own files if you have them - you can use "graydenMastheadMaker.psd" if you like.
If you create your own files, please see the note in the intro about branding issues.
This rule can be overridden by the class "greymast". */
{
background-image: url(../images/mast_cranberry_mcnowall.gif);
}
/* FOREST */
body.forest h3,
body.forest .highlights,
body.forest #snav h3 a
{
color: #3E775D;
}
body.forest .highlightstitle,
body.forest #pnav,
body.forest .headline
{
background-color: #3E775D;
}
body.forest .headline h2
{
background-color: #538169; /* 90% saturation variation */
}
body.forest .masthead
{
background-image: url(../images/mast_forest_mcnowall.gif);
}
/* LIME */
body.lime h3,
body.lime .highlights,
body.lime #snav h3 a
{
color: #93A530;
}
body.lime .highlightstitle,
body.lime #pnav,
body.lime .headline
{
background-color: #93A530;
}
body.lime .headline h2
{
background-color: #9BAC52; /* 90% saturation variation */
}
body.lime .masthead
{
background-image: url(../images/mast_lime_mcnowall.gif);
}
/* NAVY */
body.navy h3,
body.navy .highlights,
body.navy #snav h3 a,
body.navy #snav1 h3 a,
body.navy #snav2 h3 a,
{
color: #003962;
}
body.navy .highlightstitle,
body.navy #pnav,
body.navy .headline
{
background-color: #003962;
}
body.navy .headline h2
{
background-color: #2E4767; /* 90% saturation variation */
}
body.navy .masthead
{
background-image: url(../images/mast_navy_mcnowall.gif);
}
/* OLIVE */
body.olive h3,
body.olive .highlights,
body.olive #snav h3 a
{
color: #6F7730;
}
body.olive .highlightstitle,
body.olive #pnav,
body.olive .headline
{
background-color: #6F7730;
}
body.olive .headline h2
{
background-color: #7C823F; /* 90% saturation variation */
}
body.olive .masthead
{
background-image: url(../images/mast_olive_mcnowall.gif);
}
/* PURPLE */
body.purple h3,
body.purple .highlights,
body.purple #snav h3 a
{
color: #6E5D91;
}
body.purple .highlightstitle,
body.purple #pnav,
body.purple .headline
{
background-color: #6E5D91;
}
body.purple .headline h2
{
background-color: #7A6A99; /* 90% saturation variation */
}
body.purple .masthead
{
background-image: url(../images/mast_purple_mcnowall.gif);
}
/* RUST */
body.rust h3,
body.rust .highlights,
body.rust #snav h3 a
{
color: #A96B00;
}
body.rust .highlightstitle,
body.rust #pnav,
body.rust .headline
{
background-color: #A96B00;
}
body.rust .headline h2
{
background-color: #B1792B; /* 90% saturation variation */
}
body.rust .masthead
{
background-image: url(../images/mast_rust_mcnowall.gif);
}
/* TEAL */
body.teal h3,
body.teal .highlights,
body.teal #snav h3 a
{
color: #00646E;
}
body.teal .highlightstitle,
body.teal #pnav,
body.teal .headline
{
background-color: #00646E;
}
body.teal .headline h2
{
background-color: #296E78; /* 90% saturation variation */
}
body.teal .masthead
{
background-image: url(../images/mast_teal_mcnowall.gif);
}
/* TURQUOISE */
body.turquoise h3,
body.turquoise .highlights,
body.turquoise #snav h3 a
{
color: #037596;
}
body.turquoise .highlightstitle,
body.turquoise #pnav,
body.turquoise .headline
{
background-color: #037596;
}
body.turquoise .headline h2
{
background-color: #327F9E; /* 90% saturation variation */
}
body.turquoise .masthead
{
background-image: url(../images/mast_turquoise_mcnowall.gif);
}
/* GREYMAST */
/* This is a special exception to the normal set.
In the Advanced templates, the masthead may need to have a gray background image. */
body.greymast .masthead
/* The !important flag is used here to override the background images that would otherwise be swapped
out based on the body class. This is useful for the advanced template set which generally calls
for a grey masthead and colored elements elsewhere. */
{
background-image: url(../images/mast_grey_msass1.gif) !important;
}
/*
* All of the previous rules address color changes for elements defined in either basic.css or advanced.css.
* The following rules extend the Color Picker to include rules for tweaking the colors in elements created
* or modified in either graydenTweaks.css or mandelcenterTweaks.css.
*/
/* CRANBERRY */
body.cranberry .rightcolumnbox, /* bordered box floated to the right - defined in graydenTweaks.css */
body.cranberry .boxedcontent /* bordered box that follows the document flow - defined in graydenTweaks.css */
{
border-color: #7C2433;
}
body.cranberry .highlights h4, .boxedcontent h4 {
/* This accomodates a semantic structural change made to the "highlights" box as described in graydenTweaks.css.
The original configuration is also supported in the rules earlier in this stylesheet. */
background-color: #7C2433;
}
/* FOREST */
body.forest .rightcolumnbox,
body.forest .boxedcontent
{
border-color: #3E775D;
}
body.forest .highlights h4, .boxedcontent h4 {
background-color: #3E775D;
}
/* LIME */
body.lime .rightcolumnbox,
body.lime .boxedcontent
{
border-color: #93A530;
}
body.lime .highlights h4, .boxedcontent h4 {
background-color: #93A530;
}
/* NAVY */
body.navy .rightcolumnbox,
body.navy .boxedcontent
{
border-color: #003962;
}
body.navy .highlights h4, .boxedcontent h4 {
background-color: #003962;
}
/* OLIVE */
body.olive .rightcolumnbox,
body.olive .boxedcontent
{
border-color: #6F7730;
}
body.olive .highlights h4, .boxedcontent h4 {
background-color: #6F7730;
}
/* PURPLE */
body.purple .rightcolumnbox,
body.purple .boxedcontent
{
border-color: #6E5D91;
}
body.purple .highlights h4, .boxedcontent h4 {
background-color: #6E5D91;
}
/* RUST */
body.rust .rightcolumnbox,
body.rust .boxedcontent
{
border-color: #A96B00;
}
body.rust .highlights h4, .boxedcontent h4 {
background-color: #A96B00;
}
/* TEAL */
body.teal .rightcolumnbox,
body.teal .boxedcontent
{
border-color: #00646E;
}
body.teal .highlights h4, .boxedcontent h4 {
background-color: #00646E;
}
/* TURQUOISE */
body.turquoise .rightcolumnbox,
body.turquoise .boxedcontent
{
border-color: #037596;
}
body.turquoise .highlights h4, .boxedcontent h4 {
background-color: #037596;
}