/*-------------------------------------------
CSS for projectguide (Science Fair)
--------------------------------------------*/

/* "Back to Top" links */
div.sfpg_totop {
	float: right;
	padding-right: 10px;
	padding-top: 2px;
/*	font-size: 80%; */
	text-transform: uppercase;
	font-weight: bold;
}

div.sfpg_totop a, div.sfpg_totop a:active,
div.sfpg_totop a:visited {
	padding: 0px 0px 0px 18px;
	color:#669900;
	background: url("/div/images/projectguide/backtotop.gif") 0 0 no-repeat;
	text-decoration: none;
	border: none;
	text-align: left;
	}

div.sfpg_totop a:hover {
	background-position: -149px 0;
	color: #ff9934;
	border: none;
	text-align: left;
	text-decoration: underline;
	}

/* CET: Horizontal Navigation (Adopted from Suckerfish Dropdown Menu / A List Apart) */

ul#sfpg_menu {
	list-style: none;
	margin: 0;
	padding: 10px 0 10px 0;
/*	font-size: 75%; */
	font-size: 12px;
	border-top: solid 1px #ff9934;
	border-bottom: solid 1px #ff9934;
}

ul#sfpg_menu li {
	display: inline;
	margin-left: 2px;
}

ul#sfpg_menu li a:link{
	color: #c60;
	text-decoration: none;
}

ul#sfpg_menu li a:visited{
	text-decoration: none;
	color: #c60;
}

ul#sfpg_menu li a:hover{
	color: #c60;
	text-decoration: underline;
}

/* Rollover effect for "1. Getting Started" menu item */
li.sfpg_tlight a, li.sfpg_tlight a:active,
li.sfpg_tlight a:visited {
	padding: 4px 10px 2px 22px;
	background: url("/div/images/projectguide/trafficlightSmallv2.gif") 0 0 no-repeat;
	text-align: center;
	}

li.sfpg_tlight a:hover {
	background-position: -150px 0;
	text-align: center;
	}

/* Rollover effect for "2. Choosing a Topic" menu item */
li.sfpg_check a, li.sfpg_check a:active,
li.sfpg_check a:visited {
	padding: 4px 10px 2px 22px;
	background: url("/div/images/projectguide/checkSmallv2.gif") 0 0 no-repeat;
	text-align: center;
	}

li.sfpg_check a:hover {
	background-position: -151px 0;
	text-align: center;
	}

/* Rollover effect for "3. Completing the Project" menu item */
li.sfpg_beaker a, li.sfpg_beaker a:active,
li.sfpg_beaker a:visited {
	padding: 4px 10px 2px 22px;
	background: url("/div/images/projectguide/beakerSmallv2.gif") 0 0 no-repeat;
	text-align: center;
	}

li.sfpg_beaker a:hover {
	background-position: -200px 0;
	text-align: center;
	}

/* Rollover effect for "4. Displaying Your Project" menu item */
li.sfpg_easel a, li.sfpg_easel a:active,
li.sfpg_easel a:visited {
	padding: 4px 10px 2px 22px;
	background: url("/div/images/projectguide/easelSmallv2.gif") 0 0 no-repeat;
	text-align: center;
	}

li.sfpg_easel a:hover {
	background-position: -200px 0;
	text-align: center;
	}

/* "Need More Help" navigation */
div.sfpg_moreHelp {
	width: 90%;
	background-color: #fbf6e0;
	border: solid 1px #ff9934;
	margin: 10px 0 30px 30px;
	padding: 0;
}

div.sfpg_moreHelp h1 {
	text-align: center;
	margin: 0 0 0 10px;
	padding: 4px 0 0 0;
	display: inline;
	font-size: 12px;
	font-weight: bold;
	color: #cc6600;
	float: left;
}

div.sfpg_moreHelp ul {
	list-style: none;
	padding: 4px;
	margin: 0;
}

div.sfpg_moreHelp li {
/*	font-size: 75%; */
	font-size: 12px;
	margin: 0 20px 0 20px;
	display: inline;
	text-align: center;
}

div.sfpg_moreHelp li a:link{
	color: #c60;
	text-decoration: none;
}

div.sfpg_moreHelp li a:visited{
	text-decoration: none;
	color: #c60;
}

div.sfpg_moreHelp li a:hover{
	color: #c60;
	text-decoration: underline;
}

div.sfpg_moreHelp ul li:before {
	content: url("/div/images/projectguide/dot.gif");
}

h1.sfpg_h1 {
	color: #cc6600;
	text-align: center;
	font-size: 150%;
}

img.sfpg_img {
	float: left;
	border: 1px solid #cc6600;
	padding: 2px;
	margin: 0 10px 10px 0;
}

div.sfpg_goTo {
	float: right;
	margin: 10px;
	font-size: 90%;
}

div.sfpg_goTo a {
	font-weight: bold;
}

img.sfpg_banner {
	border: 0;
}

div#sfpg_hintsbox {
	 background-color: #FC6;
	 border: 1px solid #FFA500;
	 padding: 0.3em;
	 margin: 0.6em auto;
	 width: 80%;
}

div#sfpg_topicbox {
	 float: right;
	 text-align: left;
	 background-color: #FC6;
	 border: 1px solid #FFA500;
	 padding: 0.3em;
	 margin: 0.5em;
}