/* Basic CSS for the CCL Site */

/* Author: John Mauceri @ Choreographed Solutions  |  (831) 234-0323   webwallah.org */
/* Updated: Nov. 2, 2007 */

/* Page structure is based on the floated column layout technique. */

/* As needs change, it is possible to widen pages and change to a fluid layout fairly easily. */

/* Note the wraps, which form outer divs without left/right margins/padding.  These hold the structure in place.  It is up to the inner divs to add padding/margins as needed.  The tradeoff here is that anything (except overly large images) can be added to the inner divs later without breaking the structure.  Another thing that breaks the layout in IE6 is an italicized space where a line breaks next to a container edge. */


/* ------------------  POSITIONING ---------------------- */

html {					/* forces a vertical scroll bar in IE so page doesn't appear to jump */
	min-height: 100%;
	margin-bottom: 1px;
}

body {
	font-family: "Trebuchet MS", Arial, Helvetica;	/* default font */
	color: #333;					/* default font color */
	font-size: 12px;
	padding: 0;
	margin: 0;
	background-color: #F0EFC2;
}

#wrap	{            /* wrap to the overall page sets the width */
	width: 800px;
	margin-right: auto;  /* centers the page content in the browser window */
	margin-left: auto;
	background-color: #fff;
}


#banner {            /* the banner background can be swaped as needs change */
	width: 800px;
	height: 161px;
	background: url(../images/headerlarge.jpg) no-repeat;
	/* see navigation tab CSS later */
}

#content-wrap {            /* the page content area, used for background and possible border */
							/* the content-wrap contains a maincolumn-wrap and a sidecolumn-wrap */
	
    /*padding: 6px 0;			 gives the content breating room from banner and footer */
	background-color: #fff;
	width: 100%;
}

#content {
	
}

#maincolumn-wrap {			/* this wrap handles floats and width only */
	width: 64%;
	float: left;
}

#maincolumn {				/* any horizontal padding or border goes here */
	padding: 6px 18px 6px 14px;
}

#sidecolumn-wrap {
	width: 36%;
	float: right;
	/*background-color: #EEFFE3;*/
}

#sidecolumn {				/* any horizontal padding or border goes here */
	padding: 6px 12px 6px 12px;
}

#footer-wrap {
	background: #B5B58A;
	clear: both;
	width: 100%;			/* must specify this width or IE/Win gets confused */
}

#footer {
	padding: 4px 18px;
	color: #fff;
	font-size:12px;
}

#footer a {
	color: #fff;
	font-weight: bold;
	text-decoration:none;
}

#footer a:hover {
	text-decoration: underline;
}




/* ------------------------ NAVIGATION TABS --------------------------- */




#navbar {            /* this is the navbar region, which lies on top of the banner */
position: relative;
float:right;
width:800px;
/*background:#DAE0D2 url("../images/navbar/bg.jpg") repeat-x bottom;*/
font-size:93%;
line-height:normal;
/*top: 124px;*/
top: 123px;
/*left: 301px;*/
  }
#navbar ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
  }
#navbar li {
  float:right;
  background:url(../images/navbar/left.gif) no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  font-family: "Lucinda Grande", sans-serif;
  font-size: 14px;
  }
#navbar a {
  display:block;
  background:url(../images/navbar/right.gif) no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }
#navbar a:hover {
  color:#333;
  }
  
body#home #navbar #t-home {
  background-image:url(../images/navbar/left_on.gif);
  }
body#home #navbar #t-home a {
  background-image:url(../images/navbar/right_on.gif);
  color:#333;
  padding-bottom:5px;
  }
  
body#directory #navbar #t-directory {
  background-image:url(../images/navbar/left_on.gif);
  }
body#directory #navbar #t-directory a {
  background-image:url(../images/navbar/right_on.gif);
  color:#333;
  padding-bottom:5px;
  }
  
body#resources #navbar #t-resources {
  background-image:url(../images/navbar/left_on.gif);
  }
body#resources #navbar #t-resources a {
  background-image:url(../images/navbar/right_on.gif);
  color:#333;
  padding-bottom:5px;
  }
  
body#contact #navbar #t-contact {
  background-image:url(../images/navbar/left_on.gif);
  }
body#contact #navbar #t-contact a {
  background-image:url(../images/navbar/right_on.gif);
  color:#333;
  padding-bottom:5px;
  }
  
body#board #navbar #t-board {
  background-image:url(../images/navbar/left_on.gif);
  }
body#board #navbar #t-board a {
  background-image:url(../images/navbar/right_on.gif);
  color:#333;
  padding-bottom:5px;
  }



/* -----------------------------  ELEMENT STYLING  --------------------------------- */


		/* ---------------------------  Main News Component  ------------------- */
		
		/* Used on the Home page to highlight 2-4 items of critical timely interest to the librarians,
		 suggested size of images: 90 x 90 */
			
			
		.mainnews	{
		
		}
		
		.mainnews p {
			clear: both;
			margin-top: 6 px;
			width: 100%;
		}
		
		.mainnews p img {
			float: left; 
			margin: 6px 12px 12px 2px;
			border: none;
		}
		
		
		.newstitle {
			font-size: 18px;
			line-height: 1.4em;
			color: #593500;                                         /* light brown */
		}
		
		.newsteaser {           
			font-size: 12px;            
			line-height: 1.4em;
		}
		
		a.newstitle {
			text-decoration: none;
		}
		
		a.newstitle:hover {
			color: #E73500;											/* red */
		}

	
	

		/* ---------------------------  Horizontal link menu  ------------------- */
		
		/* Used on the Home page to highlight key links for the librarians. */
			

		
		
		#homelinks {            /* this is a section that contains vertical lists of popular links */
			padding: 12px 0 16px 16px;			/* pushes content away from the edges */
			height: 56px;								/* min height to expose the background image */
			background: url(../images/links-bkg.png) no-repeat;
			clear: both;								/* clear the floats so contents dont get mixed up with elements above them */	
		}
		
		
		#homelinks ul {				/* styles lists so they will fit 3-across in the #homelinks space */
			padding: 0;
			margin: 0 2px;
			width: 32%;
			float: left;
			list-style-type: none;
			list-style-position: inside;
		}
		

		.listheader {			/* Labels a list, can be applied to a li or p */
			font: 13px Verdana, Arial, Helvetica, sans-serif;
			color: #383E60;                                        /* steel blue */
			letter-spacing: .15em;
			text-transform: uppercase;
		}

		.popularitemlabel {
			font: 10px Verdana, Arial, Helvetica, sans-serif;
			color: #E73500;											/* alert red */
			line-height: 1.6em;
		}
		
		.popularitemlabel a {
			text-decoration: none;
			color: #E73500;
		}
		
		.popularitemlabel a:hover {
			color: #593500;
		}



		/* --------------------  Events listing in the sidebar --------------------- */
		
		.eventlabel {
			font: 13px Verdana, Arial, Helvetica, sans-serif;
			color: #E73500;											/* alert red */
			padding-top: .2em;
			padding-bottom: .2em;
			margin-top: 1em;
			margin-bottom: 0;
		}
		
		.eventlabel a {
			color: #E73500;
			text-decoration: none;
		}
		
		.eventlabel a:hover {
			color: #593500;
		}
		
		.whenlabel {
			font: 10px Verdana, Arial, Helvetica, sans-serif; 
			color: #333;                                           /* dark gray */
			padding-top: .2em;
			padding-bottom: .4em;
			margin-top: 0;
			margin-bottom: .5em;
		}





		/* --------------------------- Other List Styles  --------------------------- */
		
		/* Useful for sidebar lists */		


		/* Roster of Colleges in the sidebar */
		/* 	There are serious rendering problems with IE6/Win when using unordered lists.
			The workaround for this project, annoying as it is, it to remove all space characters
			between line items in the source code. Unfortunately, when manipulating the list, 
			DW will try to interject tabs and returns to make the code more leggible.
			To avoid strange spacing in IE6, you need to remove those tabs and returns.
		*/
		
		ul.membercolleges {
			font: 13px Verdana, Arial, Helvetica, sans-serif;
			color: #E73500;
			list-style-type: none;
			list-style-position: outside;
			margin: 0;
			padding: 0px 0px 0px 6px;
		}
		
		ul.membercolleges li {
			padding-top: 4px;
			padding-bottom: 2px;
		}
		
		ul.membercolleges li.duespaid {
			margin-bottom: 2px;
			margin-top: 1px;
			list-style-image: url(../images/goldstar.png);
		}
		
		ul.membercolleges li.duespaid + li.duespaid {
			margin-top: 2px;
		}
		
		ul.membercolleges a{
			color: #E73500;
			text-decoration: none;
			display: block;
		}
		
		ul.membercolleges a:hover {
			background-color: #fff37a;
			color: #593500;
		}
		
		ul.membercolleges a.sublink {
			color: #666666;
		}




		/* Generic list of links in the sidebar */


		
		/*#sidecolumn .link,*/ 
		.link {							/* Standard sidebar link for the site */
			font: 13px Verdana, Arial, Helvetica, sans-serif;
			color: #E73500;
			margin: 0;
			padding: 0.5em 0 0 0;			
		}
		
		/*#sidecolumn .link a, */
		.link a {
			color: #E73500;
			text-decoration: none;
			display: block;
		}

		/*#sidecolumn .link a:hover, */
		.link a:hover {
			background-color: #fff37a;
			color: #593500;
		}
		
		
		#sidecolumn .sublink {						/* Sidebar link with smaller font */
			font: 11px Verdana, Arial, Helvetica, sans-serif;
			color: #E73500;
			padding: 0.5em 0 0 0;
		}
		
		#sidecolumn .sublink a {
			color: #666666;
			text-decoration: none;
			display: block;
		}
		
		#sidecolumn .link a:hover {
			background-color: #fff37a;
			color: #593500;
		}
		
		#sidecolumn .listheader {				/* Title for lists of links in the sidebar */
			margin: 0;
			padding: 1.2em 0 0.2em 0;
		}
		

		/* -----------------------------  Images  ----------------------------- */
		
		
		img {
			border:none;
		}