/* 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;
}

/* 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;
}

.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: 274px;
/*	width: 327px; */
	height: 145px;
/*	height: 186px; */
	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 50px;
	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 a 2px border, and bottom and right margins of 5px. They will all float left. */

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

/* 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,
.folusa_logo, .memb_app_thumb, .jr_memb_app_thumb, .afol_logo, .morro_bay_pool_logo, .bg_logo
{
	margin: 0;
	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 */
}