/* adapted from CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial */

/* the appropriate background class will be applied based on class attached to the body */

body
{
	margin: 0;
	padding: 0;
	font:90% 'Lucida Grande',Verdana, Helvetica, sans-serif;
}

@media print
{
	*
	{
		/* force the background to white and all text to black for printing */
		background-color: white !important;
/*$		background-image: none !important; $*/
		color: black !important;
		background: #ffffff !important;
	}
}

#threeColLayout
{
	background: #CAC78A url(/images/background.gif) repeat-x fixed;
}

#twoColLayout
{
	background: #CAC78A url(/images/background.gif) repeat-x fixed;
}

#oneColLayout
{
	background: #CAC78A url(/images/background.gif) repeat-x fixed;
}

@media print
{
	#threeColLayout,
	#twoColLayout,
	#oneColLayout
	{
		background: #FFFFFF;
	}
}

/* default links */

a:link
{
	background-color: transparent;
	text-decoration: underline;
	color: #666;
}

a:visited
{
	background-color: transparent;
	text-decoration: underline;
	color: #666
}

a:hover
{
	background-color: #FFC;
	text-decoration: underline;
	color: #990;
}

/* custom links */

.authorLink
{
	font-weight: bold;
}

.bookLink, .movieLink
{
	font-weight: bold;
}

.mbbdgLink
{
	font-weight: bold;
}

/* headers here */

.hiResLink
{
	font-size: 60%;
}

.bookmarkLink
{
	font-weight: bold;
}

h1
{
	margin: 0;
	padding: 30px;
	font-size: 150%;
	color: #FF0000;
	text-indent: -9000px;
}

@media print
{
	h1
	{
		padding: 0;
		text-indent: 0;
	}
}

h2
{
	margin: 0 10px 0 10px;
	padding: 2px;
	font-size: 130%;
	color: #000000;
	background: #E5E2A9;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3
{
	text-transform: uppercase;
	display: inline;
	font-size: 92%;
	margin: 10px 5px 0 5px;
	padding: 2px;
}

.block
{
	display: block;
}

.default h3
{
	background: #F6CE45;
}

.library_hours h3
{
	color: #FFFFFF;
	font-size: 110%;
	background: #B18FD1;
}

.book_sales h3, .free_programs h3
{
	font-size: 110%;
	background: #D7D493;
}

.profiles h3
{
	background: #C4DDB8;
}

/* main wrapper that holds it all centrally */

#wrapper
{
	width:950px;
	margin:0 auto;
	background-color: #D7D493;
	padding: 0 10px 10px 10px;
}

/* default masthead holding the banner */

#header
{
	width: 129px;
/*	width: 274px; */
/*	width: 327px; */
	height: 145px;
/*	height: 186px; */
	background: url(/images/Friends-Logo_v5-129x145.png);
/*	background: url(/images/MBFOL_Logo_274x145.png); */
/*	background: url(/images/MBFOL_Logo_327x186.png); */
}

#library_header
{
	width: 200px;
	height: 125px;
	background: url(http://slolibrary.org/branches/om.gif);
}

@media print
{
	#header, #library_header
	{
		height: 0;
	}
}

/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent
{
	float:left;
	width:950px;
	display:inline;
	margin: 0 0 20px 0;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent
{
	float:left;
	width:370px;
	margin: 0 0 20px 195px;
}

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent
{
	width:755px;
	float:left;
	margin: 0 0 20px 195px;
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent
{
	display: none;
}

#secondaryContent
{
	float:left;
	width:370px;
	margin: 0 0 20px 15px;
}

#sideContent
{
	float:left;
	width:180px;
	margin: 0 0 20px -950px;
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent
{
	display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent
{
	width:755px;
	float:left;
	margin: 0 0 20px 295px;
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide
{
	width:160px;
	margin: 5px 0 0 10px;
	padding: 10px 0 5px 0;
	background: #FFF;
}

.cbSide p
{
	margin: 0;
	padding: 0 5px 2px 5px;
	font-size: 90%;
	color: #666;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box
{
	margin: 15px 0 0 0;
	padding: 5px 0 5px 0;
	background:url(/images/diags.gif);
}

/* Styling of the boxes if there is no JavaScript support */

.cbb
{
	margin: 0 10px 0 10px;
	background: #FFF;
	padding: 5px 0 5px 0;
	line-height: 170%;
}

/* paragraph styles for any main boxes */

.cbb p, .cb p
{
	margin: 0;
	padding: 0 5px 5px 5px;
	color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb
{
	margin: 0.5em 0;
	line-height: 170%;
}

/* Rules for the top corners and border */

.bt
{
	background:url(/images/box.png) no-repeat 100% 0 !important;
	background:url(/images/box.gif) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:27px;
}

.bt div
{
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(/images/box.png) no-repeat 0 0 !important;
	background:url(/images/box.gif) no-repeat 0 0;
}

/* Rules for the bottom corners and border */

.bb
{
	background:url(/images/box.png) no-repeat 100% 100% !important;
	background:url(/images/box.gif) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
}

.bb div
{
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(/images/box.png) no-repeat 0 100% !important;
	background:url(/images/box.gif) no-repeat 0 100%;
}

/* Insert the left border */

.i1
{
	padding: 0 0 0 12px;
	background:url(/images/borders.png) repeat-y 0 0 !important;
	background:url(/images/borders.gif) repeat-y 0 0;
}

/* Insert the right border */

.i2
{
	padding: 0 12px 0 0;
	background:url(/images/borders.png) repeat-y 100% 0 !important;
	background:url(/images/borders.gif) repeat-y 100% 0;
}

/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */

.i3
{
	background:#FFF;
	border: 1px solid #FFF;
	border-width:1px 0;
	padding:0 5px;
}

/* CSS for the box ends here */

/* date and posted control the small text info in article blurbs */

.date
{
	font-size: 85%;
	color: #666;
}

.posted
{
	color: #666;
	display: block;
	margin-bottom: 0;
	margin-left: 50px;
	margin-right: 0;
	margin-top: -3px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.postedUnderline
{
	border-bottom: 1px solid #999;
	color: #666;
	display: block;
	margin-bottom: 5px;
	margin-left: 50px;
	margin-right: 5px;
	margin-top: 0;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.programMonth
{
	color: #000;
	font-weight: bold;
	font-size: 125%;
}

.programName
{
	color: #000;
	font-weight: bold;
}

.programTime
{
	color: #a00;
	font-weight: bold;
}

address
{
	margin-left: 50px;
}

/* erm, the footer */

#footer
{
	clear:both;
	width: 950px;
/*$	height: 85px;
	background: transparent url(/images/footer.gif); $*/
	padding: 0px;
}

@media print
{
	#footer
	{
		height: auto;
	}
}

/*$ #footer p
{
	margin: 10px 10px 0 10px;
	padding: 50px 4px 4px 0;
	font-weight: bold;
}

@media print
{
	#footer p
	{
		padding: 0;
	}
}
$*/
/*$ #footer a:link, #footer a:visited
{
	color: #D7D493;
}

#footer a:hover
{
	color: #000;
	background: #D7D493;
}
$*/

/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have 2px bottom and 5px right margins. They will all float left. */

img
{
	float: left;
	margin: 0px 0 2px 5px;
	border: 0;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img
{
	border: 0;
}

.fslocpl_logo, .cambria_fol_logo, .fonl_logo, .fotagl_logo, .lo_logo, .slo_lib_logo, .morro_bay_city_logo, .mbcc_logo,
.altaff_logo, .memb_app_thumb, .jr_memb_app_thumb, .afol_logo, .morro_bay_pool_logo, .bg_logo, .slofol_logo
{
	margin: 0;
	border: 0;
}

.mbbdg_logo
{
	margin: 5px 10px 2px 5px;
	border: 0;
}

.feed
{
	border: 0;
	display: inline;
	float: none;
	margin-bottom: 0px;
	margin-left: 2px;
	margin-right: 4px;
	margin-top: 0px;
	vertical-align: middle;
}

@media print
{
	.feed
	{
		display: none;
	}
}

.under_construction
{
	display: block;
	float: none;
}

.application
{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

.muralImage
{
	margin: 20px 20px 20px 20px;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage
{
	display: block;
	float: none;
	margin-top: 4px;
	border: 3px solid #C5BDBD;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper
{
	margin: 20px 40px 0 0;
	background: url(/images/shadow.gif) no-repeat bottom right;
	float: left;
	line-height: 0;
}
 
.img-wrapper img
{
	float: none;
	margin: 0;
	background: #fff;
	padding: 4px;
	border: 1px solid #C5BDBD;
	position: relative;
	left: -5px;
	top: -5px;
}

.thumb
{
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 10px;
	margin-top: 5px;
}


.thumbLeft
{
	float: left;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 10px;
	margin-top: 5px;
}

.thumbRight
{
	float: right;
	margin-bottom: 0;
	margin-left: 5px;
	margin-right: 0;
	margin-top: 5px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails
{
	margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer
{
	clear: both;
}

li.new
{
  background-image: url(/images/new.gif);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 54px;  /* space for the image */
}

li.revised
{
  background-image: url(/images/revised.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 54px;  /* space for the image */
}

.cbSide ul
{
	list-style-type: none;
	margin-top: 0px;
	margin-left: 0;
	margin-bottom: 0;
	padding: 3px;
}

.cbSide li a:link
{
	color:#333;
	line-height:150%;
	text-decoration:none;
	display:block;
	width:154px;
	border-bottom: 1px solid #EDEAEB;
}

.cbSide li a:visited 
{
	color: #999;
	text-decoration:none;
	line-height:150%;
	display:block;
	width:154px;
	border-bottom: 1px solid #EDEAEB;
}

.cbSide li a:hover
{
	color:#602000;
	line-height:150%;
	display:block;
	width:154px;
	border-bottom: 1px solid #EDEAEB;
	text-decoration:none;
}

.cbSide li a:active
{
	color:#333;
	line-height:150%;
	text-decoration:none;
	display:block;
	width:154px;
	border-bottom: 1px solid #EDEAEB;
}

/* horizontal main menu navigation - based on a method from Richard Rutter */

#mainNav
{
	margin: 10px 0 0 0 ;
	padding: 0;
	width: 950px;
	height: 15px;
	font-family: 'Lucida Grande',Verdana, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 100%;
}

@media print
{
	#mainNav
	{
		display: none;
	}
}

#mainNav ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

#mainNav li
{
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}

#mainNav a
{
	color: #D7D493;
	display: inline;
	width: auto;
	text-decoration: none;
	background: #000;
	margin: 0;
	padding: 10px 10px;
	border-right: 1px solid #FFF;
}

#mainNav a:hover, #mainNav a:active
{
	background: #D7D493;
	color: #000;
}

#mainNav a.active:link, #mainNav a.active:visited
{
	position: relative;
	z-index: 102;
	background: #BBB;
	color: #D7D493;
	font-weight: bold;
}

/* Highlighting the current page */

body.home #mainNav a#home,
body.about #mainNav a#about,
body.join #mainNav a#join,
body.volunteer #mainNav a#volunteer,
body.donate #mainNav a#donate,
body.newsletters #mainNav a#newsletters,
body.members #mainNav a#members,
body.library #mainNav a#library,
body.contact #mainNav a#contact
{ 
	color: #fff;
	text-decoration: underline;
}

body.home #mainNav a:hover#home,
body.about #mainNav a:hover#about,
body.join #mainNav a:hover#join,
body.volunteer #mainNav a:hover#volunteer,
body.donate #mainNav a:hover#donate,
body.newsletters #mainNav a:hover#newsletters,
body.members #mainNav a:hover#members,
body.library #mainNav a:hover#library,
body.contact #mainNav a:hover#contact
{ 
	color: #000;
}

/* Highlighting external links ONLY in the main text areas, so as not to screw up the ticked-off links */

.box.default a[href^="http:"]
{ 
	background: url(/images/external.gif) no-repeat right top;
	padding-right: 10px; 
}

/*$ .box.default a[href^="http://www.collylogic.com"], .box.default a[href^="http://www.collylogic.com"]
{
	background-image: none; 
	padding-right: 0; 
}
$*/

/* 
	following form styling adapted from (thanks!):

	Accessible CSS Forms: Using CSS to Create a Two-Column Layout

	http://www.websiteoptimization.com/speed/tweak/forms/
*/

form
{  
	/* set width in form, not fieldset (still takes up more room w/ fieldset width */
	font-size: 100%;
	margin: 0;
	padding: 0;
	min-width: 500px;
	max-width: 600px;
	width: 560px; 
}

form fieldset
{
  / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
	border-color: #000;
	border-width: 1px;
	border-style: solid;
	padding: 10px;		/* padding in fieldset support spotty in IE */
	margin-left: 5px;
}

form fieldset legend
{
	font-size:0.9em;
	/* bump up legend font size, not too large or it'll overwrite border on left */
	/* be careful with padding, it'll shift the nice offset on top of border  */
}

form label
{ 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset label:first-letter
{
	/* use first-letter pseudo-class to underline accesskey, note that */
	/* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
	/* pseudo-class on legend elements, but do support it on label elements */
	/* we instead underline first letter on each label element and accesskey */
	/* each input. doing only legends would  lessens cognitive load */
	/* opera breaks after first letter underlined legends but not labels */
	text-decoration:underline;	
}

.textfield,
.textarea
{
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;	  /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
							label aligns textarea better in IE */
	background: #D7E7E9;
	color: #333;
}

form input#reset
{
	margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

textarea
{
	overflow: auto;
}

form small
{
	display: block;
	margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 88%;
}

form .required
{
	font-weight:bold;
} /* uses class instead of div, more efficient */

form br
{
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}