/*******************************************************************************
Skedwool Cascading Stylesheet - Copyright 2008 Bear Code, all rights reserved.

Don't steal this design. That would be really lame of you. Go ahead learn from
its example and bust out your own kickass designs. Thanks, Nicholas.
                                                                              */


/*  The following comments are for development purposes only. They should be
    removed in production code to lower bandwidth costs.                      */

/******************************************************************************
Skedwool CSS File

Different pages are styled by selecting for a page-specific class name. For
instance, the front page may have a body class of ".front-page", so style 
selectors for that front page might look like ".front-page .left-column .title"

This document is structured in the following way:

[1]: The basic, page-agnostic styles. This includes style rules for A, EM,
     H1-H6, HTML, UL, OL, LI, etc. Elements in the document should approximate
     these styles, even if they require a unique styling to better-fit in the
     document flow.

[1-1]: Standard class definitions. This includes the standard float-clearing
     class (.break), form structural styling, custom HR design, etc.

[2]: Site-wide structural rules for things like "#wrapper", "#head", etc.

[3]: Layout-specific styles. There are a handful of common layouts that should
     recieve similar stylistic treatments. Rather than repeat a lot of style
     code, this is where generalized layout code should go.
[3-1]: Left-column, two column layout.
[3-2]: "Modal dialoge" page (login, logout, etc)

[4]: Page-specific styles. Each page should be marked as a subsection and
     added to the the following page list.
[4-1]: User homepage.
[4-2]: Group homepage

[5]: Javascript-specific styling. Any styles or classes that would appear only
     in a Javascript-enabled environment. Should be subsectioned by javascript
     widget that uses the style. e.g. if YUI tabviews are used, the style for
     each tabview should be subsectioned.
[6]: Group events display styling.
 */

/******************************************************************************
Measurements: Pixels versus Ems

Pixels should be used anywhere that the dimension is determined by a graphic
element; if the dimensions of a certain HTML element is the same as a
background or foreground image, those dimensions should be declared as pixels.

If the element's font size can scale without damaging the appearance of the
layout, use em measurements instead. This will provide maximum flexibility
for scaling fonts while minimizing damage to the layout or apperance.

To calculate an approximate em measurement, divide the number of pixels the
element dimension should be by 12. The real result of this can be measured
by Firefox's Firebug plugin by inspecting the element in Firebug and selecting
"show computed style" from the options menu on the right of the Firebug
interface.
*/

/******************************************************************************
Colors:

	PRIMARY GREEN (COOL) COLORS:
	#8CC63F: Bright, high-saturation green. Good for links, highlights, and
	         other elements that should have extra visual wieght.
	#34471F: Dark, high-saturation green. Good for dark backgrounds or body
	         text that shouldn't appear to be black.
	#ADCE7F: Light, low-saturation pale green. Good for backgrounds with dark
	         text or white bolded headers. Can be used as a background
	         highlight. #8CC63F blends almost entirely into this color, so
	         you must be careful when using them together.
	#3C472C: A dark, low-saturation green. Reads as black when printed on a 
	         light background.
	#68943E: Medium green. Semi-dark green; good as a background for white
	         text or as a semi-highlighted text color.
	
	SECONDARY WARM COLORS:
	#AB2823: Medium red. Contrasts well with light greens. Strobes with high-
	         saturation greens.
	#EFE92C: Bright yellow. Plays well with dark colors as a point of interest.
	
                                                                             */


/******************************************************************************
[1] Page-agnostic styles
                                                                             */

html { background: #fff url(../images/backgrounds/html-bg.gif) top repeat-x; color: black; }

/* Headers */
h1 { font-size: 182%; }
h2 {
	font-size: 138.5%; line-height: 1.11; 
	margin-top: 1em;
}
h3 { font-size: 108%; font-weight: bold; margin-top: 1em;}
h4 { 
	text-transform: uppercase; margin-top: 1em;
	color: #34471f; background-color: inherit;
}

/* Body Text */
p { margin-top: 1em; }
a { text-decoration: none; color: #68943E; background-color: inherit; }
a:hover { text-decoration: underline; }
em { font-style: italic; }
strong { font-weight: bold; }

/* Lists */
ul, ol { margin: 1em 0 1em 2em;}
ul li { list-style-position: outside; list-style-type: disc; }
ol li { list-style-position: outside; list-style-type: decimal; }
dl { margin: 1em 0; }
dl dt { font-weight: bold; margin-top: 1em; }
dl dd { margin: 0em 0 0 2em; }

/* [1-1] Standard classes */
.break { clear: both; }

.hr { border-bottom: 1px dotted #ccc; }
.hr hr { display: none; }

p.more { text-align: right; }
p.more a { }


/******************************************************************************
[2] Site-wide structural rules
                                                                             */
#wrapper { 
	width: 100%;
	font-family: "Trebuchet MS", Trebuchet, Verdana, sans-serif;
	font-size: 93%; /* Renders to 12px */ line-height: 1.5;
	background: transparent url(../images/backgrounds/foot-bg.gif) bottom repeat-x;
}

#head { width: 974px; height: 105px; margin: 0 auto; }
#head .site-title {
	float:left; width:50%;
}
#head .site-title a { 
	display: block; 
	height: 95px; width: 371px; /* absolute widths because this is an image */
	background: transparent url(../images/headers/skedwool-masthead.gif) center no-repeat;
}
#head .site-title a span { position: absolute; top: -9999px; }
#head .demo-links {
    padding-top:50px;
    float:right;
}
#head .demo-links.logged {
    padding-top:20px;
    float:right;
}
#head .demo-links a { 
	display: block; 
	height: 30px; width: 80px; /* absolute widths because this is an image */
	background: transparent url(../images/headers/demo.png) center no-repeat;
}
#head .demo-links a span { position: absolute; top: -9999px; }

#head .logged-user-links {
	padding-top: 12px;
	width:50%;
	float:right;
	text-align:right;
	background-color: inherit;
	color: #EFE92C;
	font-size:135%;
}

#head .logged-user-links a {
    background-color: inherit;
	color: #EFE92C;
	text-decoration:underline;
}

#body { width: 974px; min-height: 250px; margin: 0 auto; padding: 12px 0; }

/* The footer probably won't change, so we're putting the styles here */
#foot { 
	width: 945px; height: 114px;
	margin: 0 auto; color: #aaa; padding: 33px 22px 0 22px;
	background: transparent url(../images/backgrounds/foot-bg-2.gif) top center no-repeat;
}
#foot p { margin: 0; }
#foot a { background-color:inherit; color: #777; text-decoration: underline; }
#foot .bottom-menu { float: left; width: 33%; }
#foot .copyright { float: left; width: 33%; text-align: center; }
#foot .makers-mark { float: right; width: 33%; text-align: right; }
#foot .makers-mark a { text-decoration: none; }


/******************************************************************************
[3]: Layout-specific styles 
                                                                             */

/* [3-1]: Two column layout, sidebar on left */
.layout-2-column {}
.layout-2-column .sidebar { float: left; width: 241px; background: transparent; }
.layout-2-column .body-area {
	float: right; width: 723px; background: #fff; color:inherit;
}
.layout-2-column .body-area .head {
	border-bottom: 1px solid #ccc;
	background: transparent url(../images/backgrounds/body-area-bg-1.gif) top no-repeat;
}
.layout-2-column .body-area .head .title {
	float: left; margin: 0.167em 0.5em;
}
.layout-2-column .body-area .body {
	margin: 1em;
}
/**********
 [6] Group events display styling 
 */
.default {
    background-color: #ACD080; 
    color: black;
}
.busy {
    background-color: #C08080; 
    color: white; 
}
.available {
    background-color: #D0FFD0; 
    color: black;
    border:1px solid #D0FFEF;
}
.undecided {
    background-color: #D0FF80; 
    color: black; 
    border:1px dashed black;
}
.gs1 {
    background-color: rgb(255,100,100); 
    color: black;
}
.gs2 {
    background-color: rgb(160,255,160); 
    color: black;
}
.gs3 {
    background-color: rgb(64,64,192); 
    color: white;
}
.gs4 {
    background-color: rgb(255,255,160); 
    color: black;
}
.gs5 {
    background-color: rgb(255,160,255); 
    color: black;
}
.gs6 {
    background-color: rgb(160,255,255); 
    color: black;
}