/*----------------------------------------------------------------
CSS file for WindChill Studios - The Artwork of Christopher Cowley
Portfolio site - Version 10
Created: July 2009

-----------------------------------------------------------------*/


/* -- GENERAL GOVERNANCE -- */
body {
	/* W2.0 fader bg - */background: url(../images/headerBack.jpg) repeat-x top left; 
	background: url(../images/bg-tile01.gif) center;
	color: #000000;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: center;
	}

#page {
	border: 0px
	border: 0px solid #959596;
	/*background-color: #d5eac9;*/
	margin: 0px auto;
	padding: 0px;
	width: 780px;
	text-align: left;
	}
	


/* -- PAGE SETUP -- */

#content_splash {
	width:780px;
	margin: 0px;
	padding: 0px;
}


#content {
	width:780px;
	margin: 5px 10px 5px 10px;
	padding: 0;
}

#bigleft {
	float:left;
	width:550px;
	margin: 0px 0px 0px 10px;
	padding:0;
	background:#ffffff;
}

#smallright {
	float:right;
	width:200px;
	margin: 0px 10px 0px 0px;
	padding:0;
	background: #ffffff;
}

#bigright {
	float:right;
	width:550px;
	margin: 0px 10px 0px 0px;
	padding:0;
	background:#ffffff;
}

#smallleft {
	float:left;
	width:200px;
	margin: 0px 0px 0px 10px;
	padding:0;
	background: #ffffff;
}


/* -- Header -- */
#header {
	width:780px;
	margin: 0px auto 0px;
	padding: 0;
	/* background: #0072bb; old blue */
	background: #000000;
}

/* -- Footer --*/
#footer {
	background: url(../images/footer_splash1.jpg) center;
	/* background: #000000; original just black bg */
	width: 780px; 
	height:440px;
	bottom: 0px;
	color: #0072bb;
	font-size: .9em; 
	margin: 0px auto 0px;
	padding: 0;
	/* text-align:center; */
	overflow: hidden;
	clear: both; /*this should work in both ie and FF, works on everything else.*/
	border-top: 0px solid #0072bb; 
	}
	
#footer p {padding: 5px 10px 5px 10px;}
#footer ul {list-style: none;}


/* -- TEXT FORMATTING -- */
html,body	{padding:0; font-size:85%;}

html,body,
p,ul,ol,li, 
td,th,dl,dt, 
blockquote,
h1,h2,h3,h4,h5	{font-family:arial,helvetica,verdana,sans-serif;}


p,li,blockquote,table,tr,td,th {font-size:1em;}

p	{margin:0; padding:0 0 .5em 0;}
.first	{padding:0 0 .5em 0;}
ul.first	{margin:0; padding:0 0 .5em 1.25em;}
ul	{margin:0; padding:.5em 0 .5em 1.5em;}
ol	{padding:.5em .5em .5em 2.0em;}
ul ul, ul ol, ol ol, ol ul {padding-bottom:0;}
dl	{}
li	{margin:0; padding-bottom:.5em; line-height:1.25em;}
dt	{margin:0; padding:0; font-weight:bold; line-height:1.25em;}
dd	{margin:0; padding:0em 0em .25em 3em; line-height:1.25em;}

ul.no-bullets	{padding:0 0 1em 0; list-style-type:none;}
ul.anchor-links	{padding:0 0 1em 35px;}



.caption	{font-weight:bold;}
.caption,.copyright	{font-size:.9em; color:#666; letter-spacing:.05em; padding:0;}

.byline	{float:right; font-size:.75em; font-weight:normal; font-style:italic; color:#999;}
.confidential	{font-weight:bold; color:#a00;}
.note	{color:#666; font-size:.9em;}



/* ------- header treatments ------- */
h1,h2,h3,h4,h5,h6,
.sub-title,.sub-head	{margin:0; padding:0;}

.sub-title	{padding:.5em 0 .5em 0; color:#666; font-weight:bold; font-style: italic;} /* fix with targeting */
.sub-head	{color:#666; padding:.3em 0 .5em 0;}
.kicker	{font-size:.9em; color:#666; padding:0 0 5px 0; font-weight:bold;}
.note	{font-size:.8em; color:#666; padding:0 0 5px 0;}

h1	{font-size:1.9em; font-weight:normal; color:#000; line-height:1.1em;}

h2	{font-size:1.5em; font-weight:bold;}
#content-main h2	{margin-top:.5em;}

.frontfloat h2, .frontFloatEnd h2 {
padding: 0 0 10px 0;
}

h2.small	{font-size:1.2em; font-weight:bold;}

h3 {
font-size:1.1em;
color: #1748a5;
padding: 15px 0 0 0;
margin: 15px 0 5px 0;
border-top: 1px solid #ccc;
}

h4	{font-size:1.1em; margin: 0;}



.primary-blue-dark	{color:#000668;}
.primary-blue-med	{color:#0853a4;}
.primary-blue-light	{color:#5c88c5;}

.blue-dark	{color:#05a;}
.blue-med-dark	{color:#47b;}
.blue-med	{color:#69c;}
.blue-med-light	{color:#9be;}
.blue-light	{color:#cef;}

.black	{color:#000;}
.white	{color:#ffffff;}
.gray-dark	{color:#666;}
.gray-med-dark	{color:#999;}
.gray-med	{color:#aaa;}
.gray-med-light	{color:#ccc;}
.gray-light	{color:#ddd;}
.gray-lightest	{color:#eee;}

.green-dark	{color:#00673d;}
.green-med-dark	{color:#9c3;}
.green-med-light	{color:#bd6;}
.green-light	{color:#dfb;}

.yellow-med	{color:#fe2;}
.yellow-light	{color:#ffa;}

.orange-dark	{color:#c60;}
.orange-med	{color:#f90;}

.red-dark	{color:#a00;}
.red-med	{color:#c33;}

.pink-med	{color:#f76;}
.pink-light	{color:#fcc;}

.violet-dark	{color:#936;}
.violet-med-dark	{color:#969;}
.violet-med-light	{color:#b7b;}
.violet-light	{color:#ede;}

.alert-stop	{color:#c00;}
.alert-go	{color:#0f0;}
.alert-caution	{color:#ff0;}



.bar-green-dark	{background:#7a3; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-green-med-dark	{background:#9c3; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-green-med-light	{background:#bd6; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med-dark	{background:#47b; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-blue-med	{background:#69c; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold; border-bottom: 1px solid #69c;}
.bar-blue-med-light	{background:#9be; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-dark	{background:#666; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-med-dark	{background:#999; color:#fff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-med-light	{background:#ccc; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-gray-light	{background:#ddd; color:#000; padding:.3em .5em; font-size:1.1em; font-weight:bold;}
.bar-red-dark	{background:#9d0a0e; color:#ffffff; padding:.3em .5em; font-size:1.1em; font-weight:bold;}



/* --- Universal link behaviour -- */

a, a:active, a:visited {
text-decoration: none;
color: #1748a5;
}

a:hover {
text-decoration:underline;
color: #3660b0;
}



/* ------- Expanding Text --------- */
.short { display:inline; }
.long { display:none; background-color: #ffffff; }



/* ------ Post-It-Note Mouseover text ----------- */
a.infobox{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ffffcc;
    color:#000;
    text-decoration:none;}

a.infobox:hover{z-index:25; background-color:#ff0}

a.infobox span{display: none}

a.infobox:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    /* border:1px solid #ffff00; */
    background-color:#ffffcc; color:#000;
    text-decoration: none;}