/* CSS Document */
/*this version uses absolute/relative positioning between the side columns and their respective faux column containers. */
/* se notes on min and max width above
/* the content is first in the markup followed by the two side columns*/
/* this "content-first" markup is good for accessability and search engine optimization */
body {font: 1.0em verdana, arial, sans-serif;  /* overal font and sizing */
	text-align:center; /* centers the layout in IE */
	}
	
* {margin:0; padding:0;} /* removes defaults of all elements */

div#mainwrap {min-width:780px; max-width:1500px; /* sets the max and miin widths */
	margin-left:auto; margin-right:auto; /* centers the layout in SCBs */
	text-align:left;
	padding-bottom: 20px;
}
	

div#header {margin-bottom:0; margin-top:0; padding:0;margin-left:150px;  height:150px;} /* tempoarary placeholder styles for header */

div#contentarea {	position:relative; /* set positioning context  for left sidebar div */;
}

div#contentarea2 {
position:relative; /* set positioning context  for right sidebar div */
	
	}
	

div#column1 {width:150px; /* left col width */
	position: absolute; /* contextual positioning in contentarea container */
	margin-top: -150px;
	top:0px; left:0px; /*positions col within contentarea container */ /* left col bg color - (change color to see divs is position : ) */
	overflow:hidden; /* prevents overlarge elements breaking out of column */;
	   background: repeat-y url(../images/left-col-back.gif);
}



div#column2 {
	margin:0 300px 0 152px; /* left and right margins to make room for sidebars */
	}
	
#home #mainwrap {
	background-color: #f0f8ff;
}

#gallery #mainwrap,
#designsamples #mainwrap,
#printsamples #mainwrap,
#calendars #mainwrap {
	background-color: #f7ffd5;
}

#mission #mainwrap,
#who #mainwrap, #union #mainwrap, #social #mainwrap, #progressive #mainwrap, #coop #mainwrap   {
	background-color: #fbf3f0;
}

#print #mainwrap, #paper #mainwrap, #ink #mainwrap, #bind #mainwrap, #equip #mainwrap, #state #mainwrap, #terms #mainwrap {
	background-color: #efefef;
}

#design #mainwrap {
	background-color: #effafa;
}


#environment #mainwrap {
	background-color: #e9ffde;
}

#contact #mainwrap {
	background-color: #eee;
}

#column2.single {margin: 0 0 0 152px;
}

#gallery #column2.single  {margin: 0 0 0 120px;
}

div#column3 {
	width:300px;
	position:absolute;  /* contextual positioning in contentarea container */
	top:-0px; right:1px; 
 /*positions col within contentarea container */
	overflow:hidden; /* prevents overlarge elements breaking out of column */
	}

#column3.none {
width: 50px;
}

#paper #column3 {
	height: 1500px;
}

/* some basic styles for placeholder content */

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

b{font-size: 110%;
}

a{
	   
}


#print #header{background: color: #336666;}
#paper #header{background-color:#666666;}
#ink #header{background-color:#666666;}
#bind #header{background-color:#666666;}
#equip #header{background-color:#666666;}
#state #header{background-color:#666666;}
#terms #header{background-color:#666666;}

#mission #header{background-color:#663333;}
#who #header{background-color:#663333;}
#union #header{background-color:#663333;}
#social #header{background-color:#663333;}
#progressive #header{background-color:#663333;}
#coop #header{background-color:#663333;}

#home #header{background-color:#336666;}
#gallery #header{background-color:#999966;}
#designsamples #header{background-color:#999966;}
#printsamples #header{background-color:#999966;}
#calendars #header{background-color:#999966;}
#environment #header{background-color:#669966;}
#design #header{background-color:#99cc33;}
#print #header{background-color:#666666;}
#contact #header{background-color:#669933;}
#submit #header{background-color:#e24dfc;}

#contact #column2 p {
	  color: #669933
}



#home #column2 p{
font-size: 1.2em;
color: #336666;
text-align: left;
}


#prog #column3 p,
#who #column3 p {
text-align: center;	   
}


#design #column3 p,
#paper #column3 p,
#home #column3 p,
#coop #column3 p,
#union #column3 p {
font-size: 1em;
color: #999900;
text-align: right;
}


#print #column3 p {
color: #999900;
text-align: center;
line-height:2em;
}


.innertube{ 
	   margin-right: 50px;
	   margin-left: 50px;
}

#gallery .innertube, #callendars .innertube {
	margin-right: 0px;
	   margin-left: 40px;

}

.whoinnertube{
	   margin-top: 0px;
	   margin-right: 0px;
	   margin-left: 20px;
}


a:hover{
color:white;
}

#submit #column2 a:hover{
color:red;
}

ul{
list-style-type: none; 
margin-left: 20px;
}

ul li{
	   display: inline;
}
	
	
ul li a{
text-decoration:none;
color:#99cccc;
	   display: block;
	   height: 2em;
	   font: small/1em Arial, Helvetica, sans-serif;
}

ul li a:hover{
color:white;
}


#who ul li.who a,
#progressive ul li.progressive a,
#coop ul li.coop a,
#social ul li.social a,
#union ul li.union a,
#paper ul li.paper a,
#ink ul li.ink a,
#bind ul li.bind a,
#equip ul li.equip a,
#state ul li.state a,
#terms ul li.terms a,
#home ul li.home a,
#mission ul li.mission a.top,
#print ul li.print a.top,
#design ul li.design a,
#environment ul li.environment a,
#gallery ul li.gallery a.top,
#calendars ul li.calendars a,
#designsamples ul li.designsamples a,
#printsamples ul li.printsamples a,
#submit ul li.submit a,
#contact ul li.contact a {
	color: #fff777;
	cursor:  default;
	   }

#who #column2 img{float:right; margin: 5px 5px 5px 5px; display:inline;}
#submit #column2 img{float:left; display:inline;}