/*****************************************************************************
**		 __      __  ____     ____     __  __  ________   ________      	**
**		/\ \  __/\ \/\  _`\  /\  _`\  /\ \/\ \/\_____  \ /\_____  \    		**
**		\ \ \/\ \ \ \ \ \L\ \\ \ \L\ \\ \ \ \ \/____//'/'\/____//'/'   		**
**		 \ \ \ \ \ \ \ \  _ <'\ \  _ <'\ \ \ \ \   //'/'      //'/'    		**
**		  \ \ \_/ \_\ \ \ \L\ \\ \ \L\ \\ \ \_\ \ //'/'___   //'/'___  		**
**		   \ `\___x___/\ \____/ \ \____/ \ \_____\/\_______\ /\_______\		**
**			'\/__//__/  \/___/   \/___/   \/_____/\/_______/ \/_______/		**
**																			**
**	This site created by Drew Loomer for the West Bloomfield Township 		**
**	Public Library Youth Department.  										**
**	Completed on 9-14-2009													**
**	loomerdr@wblib.org														**
**	Sorry about the lame ASCII art - it was just too tempting...			**
**																			**
**	These styles are used by the homework pages.							**
**																			**
*****************************************************************************/


/* Research Pro Search Box */
#researchProBox
{
	margin-bottom:				20px;
	margin-left:				auto;
	margin-right:				auto;
	margin-top:					30px;
	text-align:					center;
	width:						400px;
}

.researchPro
{
	background-color:			#84b3c7;
	float:						left;
	text-align:					left;
	width:						400px;
}

.researchLogo
{
	float:						left;
	margin-bottom:				10px;
	margin-top:					10px;
}

.researchForm
{
	float:						left;
	margin-left:				30px;
	margin-right:				30px;
	width:						340px;
}

.researchProTopLeft
{
	background-image:			url('./images/research_pro_top_left.png');
	float:						left;
	height:						30px;
	width:						30px;
}

.researchProTopRight
{
	background-image:			url('./images/research_pro_top_right.png');
	float:						right;
	height:						30px;
	width:						30px;
}

.researchProBotLeft
{
	background-image:			url('./images/research_pro_bot_left.png');
	clear:						left;
	float:						left;
	height:						30px;
	width:						30px;
}

.researchProBotRight
{
	background-image:			url('./images/research_pro_bot_right.png');
	float:						right;
	height:						30px;
	width:						30px;
}

.researchButton
{
	background-image:			url('./images/research_pro_search.png');
	border:						0px;
	cursor:						pointer;
	float:						right;
	height:						21px;
	margin-top:					3px;
	width:						80px;
}

.researchInput
{
	border:						1px solid #a7a6a4;
	float:						left;
	font-size:					20px;
	width:						250px;
}



/* Ask a librarian */
#askBox
{
	margin-bottom:				20px;
	margin-left:				auto;
	margin-right:				auto;
	margin-top:					30px;
	text-align:					center;
	width:						560px;
}

#askError
{
	color:						#d82c2c;
	float:						left;
	font-size:					16px;
	font-weight:				bold;
	margin-top:					15px;
	margin-left:				8px;
}

.ask
{
	background-color:			#e2ddc6;
	float:						left;
	text-align:					left;
	width:						560px;
}

.askLogo
{
	float:						left;
	margin-bottom:				10px;
	margin-top:					10px;
}

.askForm
{
	float:						left;
	margin-left:				30px;
	margin-right:				30px;
	width:						540px;
}

.askTopLeft
{
	background-image:			url('./images/ask_top_left.png');
	float:						left;
	height:						30px;
	width:						30px;
}

.askTopRight
{
	background-image:			url('./images/ask_top_right.png');
	float:						right;
	height:						30px;
	width:						30px;
}

.askBotLeft
{
	background-image:			url('./images/ask_bot_left.png');
	clear:						left;
	float:						left;
	height:						30px;
	width:						30px;
}

.askBotRight
{
	background-image:			url('./images/ask_bot_right.png');
	float:						right;
	height:						30px;
	width:						30px;
}

.askButton
{
	background-image:			url('./images/ask_button.png');
	border:						0px;
	clear:						left;
	cursor:						pointer;
	float:						left;
	height:						23px;
	margin-top:					3px;
	padding:					2px;
	width:						51px;
}

.askInput
{
	border:						1px solid #a7a6a4;
	clear:						left;
	color:						#aaa;
	float:						left;
	font-size:					20px;
	margin-bottom:				10px;
	width:						250px;
}

.askText
{
	border:						1px solid #a7a6a4;
	float:						left;
	font-family:				sans-serif;
	font-size:					20px;
	height:						120px;
	margin-bottom:				10px;
	width:						500px;
}

.askRecaptcha
{
	clear:						both;
	float:						left;
	margin-bottom:				10px;
}



/* Great Sites */
.greatSites
{
	background-color:			#A8AF82;
	color:						#000;
	float:						left;
	margin-left:				50px;
	margin-top:					10px;
	width:						500px;
}

.greatSites .top
{
	float:						left;
	width:						100%;
}

.greatSites .top .left
{
	background-image:			url('./images/great_sites_box.png');
	background-position:		top left;
	float:						left;
	height:						22px;
	width:						22px;
}

.greatSites .top .right
{
	background-image:			url('./images/great_sites_box.png');
	background-position:		top right;
	float:						right;
	height:						22px;
	width:						22px;
}

.greatSites .top img
{
	margin-top:					10px;
}

.greatSites .bot
{
	float:						left;
	width:						100%;
}

.greatSites .bot .left
{
	background-image:			url('./images/great_sites_box.png');
	background-position:		bottom left;
	float:						left;
	height:						22px;
	width:						22px;
}

.greatSites .bot .right
{
	background-image:			url('./images/great_sites_box.png');
	background-position:		bottom right;
	float:						right;
	height:						22px;
	width:						22px;
}

.greatSites .content
{
	float:						left;
	margin-bottom:				5px;
	margin-top:					5px;
	width:						100%;
}

.greatSites .content .left
{
	border-right:				1px dashed #fff;
	border-top:					1px dashed #fff;
	float:						left;
	width:						249px;
}

.greatSites .content .right
{
	border-top:					1px dashed #fff;
	float:						right;
	width:						50%;
}

.greatSites .content .left .odd, .greatSites .content .right .odd
{
	background-color:			#CBCFB4;
	border-bottom:				1px dashed #fff;
	float:						left;
	height:						30px;
	padding-left:				2%;
	padding-right:				2%;
	width:						96%;
}

.greatSites .content .left .even, .greatSites .content .right .even
{
	background-color:			#6B6F53;
	border-bottom:				1px dashed #fff;
	border-bottom:				1px dashed #fff;
	color:						#fff;
	float:						left;
	height:						30px;
	padding-left:				2%;
	padding-right:				2%;
	width:						96%;
}

.greatSites .content .left .even a, .greatSites .content .right .even a
{
	color:						#eee;
	float:						left;
	font-weight:				bold;
	font-size:					16px;
	margin-top:					6px;
}

.greatSites .content .left .odd a, .greatSites .content .right .odd a
{
	color:						#333;
	float:						left;
	font-weight:				bold;
	font-size:					16px;
	margin-top:					6px;
}

#otherInfo
{
	float:						left;
	margin-left:				10px;
	margin-top:					20px;
}

.otherLocation
{
	font-weight:				bold;
	padding-right:				5px;
	text-align:					right;
}