/* N241 final Project submission - 'Mower Monkey',*/

/*by Julie Bravard, */

/*http://www.mowermonkey.com/virtualmonkey.html */

/* css released under Creative Commons License */

/* - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* All associated graphics copyright 2005, Julie Bravard */

/* Added: May 1, 2005 */





/*********************

     TYPOGRAPHY

*********************/

body {

	font-family: tahoma, arial, helvetica, sans-serif;

	font-size: x-small;

  	voice-family: "\"}\"";

  	voice-family: inherit;

  	font-size: small;

	}

	html>body {

  		font-size: small;

		}

	

#quickSummary  { 

	color: #ff0;

	font-size: 0.8em;

	font-weight: bold }



#quickSummary p {

	padding: 0 15px;

	}

	

acronym {

	cursor: help;

	}



/*********************

        LINKS

*********************/



a {

	white-space: nowrap;

	}



a:link  { 

	color: #0fc;

	font-weight: bold;

	text-decoration: none;

	padding: 0 1px;

	border: solid 1px #f2f4ee }

	

a:visited  { 

	color: #990;

	font-weight: bold;

	text-decoration: none }

	

a:hover  { 

	background: url(mmlink_background.gif) no-repeat;

	/*cool strips and whisps of white*/

	padding: 0 1px;

	border: solid 1px #776 }

	

a:active {

	font-weight: bold;

	text-decoration: none;

	}



/*********************

     ACCESSYPOO

*********************/



span.accesskey {

	font-weight: bold;

	text-decoration: underline;

	}



/**************************

     DO THE DIV - LAYOUT

**************************/



/*basics*/

body  { 

	background: #f2f4ee url(../mm/mmbackground2.gif) fixed;

	margin: 0;

	padding: 0 }

	

#container {

	position: relative;

	top: 0;

	left: 0;

	margin: 0;

	padding: 0;

	}

	

/***********

intro stuff

************/	

	

	#intro {

		position: relative;

		top: 0;

		left: 0;

		margin: 0;

		padding: 0;

		z-index: 1000;

		}

	

		#pageHeader {

			position: relative;

			top: 0;

			left: 0;

			margin: 0;

			padding: 0;

			background: #fff url(../mm/mmheaderBack.jpg) repeat-x top left; 

			/*this is the horizontal line bk*/

			height: 126px;

			width: 2100px;

			}

			

			#pageHeader h1 {       

				/*contains the mower monkey logo*/

				margin: 0;

				background: transparent url(../mm/mmheader.jpg) no-repeat; 

				/*lots of cute strips and whisps of white*/

				height: 126px;

				}

				

			#pageHeader h1 span {        

				/*get the text out of the way*/

				display: none;

				}

				

			#pageHeader h2 {       

				/*this text will be integrated into the pictoral header*/

				display: none;

				}

				

		#quickSummary {           

			/*runs along left side, includes mower monkey logo  and text below*/

			position: absolute;

			top: 126px;

			left: 0;

			background: transparent url(../mm/mmlogo.png) no-repeat top left; 

			/*original art work by me */

			width: 352px;

			padding-top: 301px;

			z-index: 500;

			}

							

							

		/**********************************************************************

		graphic backgrounds are applied to head, paragraphs, and last paragraph

		***********************************************************************/

		#preamble { 

			/*first of boxes, but different in document tree so separate css*/

			position: absolute;

			background: #f2f4ee;

			z-index: 1000;

			width: 257px;    

			/*all text boxes are 257px*/

			top: 126px;

			left: 370px;

			padding: 0;

			border: solid #998;    /*only for IE, overridden later*/

			border-width: 0px 1px 1px 1px; /*no top border*/

			}

		

		html>head:first-child+body #preamble {         

			/*gets out of the way for IE and opera 6*/

			background: transparent url(../mm/mmsectionBack_head.png) no-repeat top right; 

			/*TOP bk w.drop shadow*/

			border: 0;  

			/*need to override border in place*/

			}

			

		#preamble h3 {

			background: transparent url(../mm/mmtitle_preamble.jpg) no-repeat;  

			/*road to enlightenment text with grass shadow the left */

			margin: 0;

			padding: 0;

			height: 86px;

			}

			

		#preamble h3 span {

			display: none; 

			/*get text out of the way*/

			}

			

		#preamble p {

			margin: 0;

			padding: 5px 20px; 

			/*cant put background here or IE will see it*/

			}

		

		html>head:first-child+body #preamble p {     

			/*only seen by smart browsers that can do png transp*/

			background: transparent url(../mm/mmsectionBack_main.png) repeat-y;  

			/*thin repeated background*/

			}

			

		#preamble p.p3 {

			margin: 0;

			padding: 5px 20px 25px 20px;

			}

		

		html>head:first-child+body #preamble p.p3 {    

			/*selects last paragraph*/

			background: transparent url(../mm/mmsectionBack_foot.png) no-repeat bottom right;  

			/*footer background - blank with shadow*/

			}

		



/*************************************************

next four text boxes are under #supportingtext div

**************************************************/	

					

	#supportingText {

		position: relative;

		top: 0;

		left: 0;

		margin: 0;

		padding: 0;

		background: #fff url(../mm/mmbodyBack.jpg) repeat-x;  

		/*use it to get the faded pattern background positioned 

		-  thanks to squidfingers for pattern inspiration*/

		height: 301px;

		width: 2100px; 

		/*same width as header*/

		}

		

		#explanation, #participation, #benefits, #requirements, #history {

			border: solid #998; 

			/*border only for IE, will be overridden*/

			border-width: 0 1px 1px 1px;

			background: #f2f4ee;

			position: absolute;

			z-index: 1000;

			width: 257px;

			top: 0;

			padding: 0;

			}

		

		html>head:first-child+body #explanation, html>head:first-child+body #participation,

		html>head:first-child+body #history,

		html>head:first-child+body #benefits, html>head:first-child+body #requirements {

			background: transparent url(../mm/mmsectionBack_head.png) no-repeat top right; 

			/*override IE values*/

			border: 0;

			}

			

		#explanation {

			left: 680px;

			}		

		

		#explanation h3, #participation h3, #benefits h3, #history, #requirements h3 {

			margin: 0;

			padding: 0;

			height: 86px; 

			/*headers need defined height because of image replacement*/

			}

		

		#explanation h3 {

			background: transparent url(../mm/mmtitle_about.jpg) no-repeat;

			}

			

		#explanation h3 span, #participation h3 span, #requirements h3 span, #history h3 span, #benefits h3 span {

			display: none; 

			/*for some reason the negative margin didn't work here, so I used this*/

			}	

		

		#explanation p, #participation p, #benefits p, #history p, #requirements p {

			margin: 0;

			padding: 5px 20px; 

			/*need to apply to the p elements because of background image reqts*/

			}

		

		html>head:first-child+body #explanation p, html>head:first-child+body #participation p, 

		html>head:first-child+body #history,

		html>head:first-child+body #benefits p, html>head:first-child+body #requirements p {

			background: transparent url(../mm/mmsectionBack_main.png) repeat-y; 

			/*middle background light green with a bit of gray*/

			}

			

		#explanation p.p2, #participation p.p4, #history p.p4, #benefits p.p1, #requirements p.p5 {

			margin: 0;

			padding: 5px 20px 25px 20px;

			}

		

		html>head:first-child+body #explanation p.p2, html>head:first-child+body #participation p.p4,

		html>head:first-child+body #history p.p4,

		html>head:first-child+body #benefits p.p1, html>head:first-child+body #requirements p.p5 {

			background: transparent url(../mm/mmsectionBack_foot.png) no-repeat bottom right; 

			/*white image with shadow*/

			/*last p gets bottom*/

			}

			

		#participation {   

			left: 980px;

			}

			

		#participation h3 {

			background: transparent url(../mm/mmtitle_participation.jpg) no-repeat;

			/*participation text with grass shadow on the left */

			}

			

		#benefits {

			left: 1280px;

			}

			

		#benefits h3 {

			background: transparent url(../mm/mmtitle_benefits.jpg) no-repeat;

			/*benefits text with grass shadow on the left */

			}

			

		#requirements {

			left: 1580px;

			}

				

		#requirements h3 {

			background: transparent url(../mm/mmtitle_requirements.jpg) no-repeat;

			/*benefits text with grass shadow on the left */

			}

		

		#history {

			left: 380px;

			}	

			

		#history h3 {

			background: transparent url(../mm/mmtitle_history.jpg) no-repeat;

			/*benefits text with grass shadow on the left */

			}

			

/***********************************

footer stuff 

- footer will be on the side, 

floated, and consist of buttons 

for MOSE, boxes for IE

************************************/			

			

		#footer {

			position: absolute;

			background: transparent;

			z-index: 5000;

			width: 43px; 

			/*make sure floats go to next line*/

			top: 0px;

			left: 1880px;

			padding: 0;

			margin-top: 5px;

			}

			

		div#footer a {

			display: block; 

			/*for text positioning and link activation*/

			background: url(../mm/mmlink_background.gif) no-repeat; 

			/*green stripes and highlights*/

			/*standard link bk for all just for IE*/

			border: 1px solid #998;

			font-weight: normal;

			text-align: center;

			}

		

		html>head:first-child+body div#footer a { 

			/*buttons only for MOSE*/

			border: 0;

			padding-top: 15px; 

			background: url(../mm/mmfooter_back.png) no-repeat;

			/*small light green rounded box*/

			height: 26px;

			}

		

		html>head:first-child+body div#footer a:hover { 

			/*i'm lazy, i just used 2 images instead of pixy method*/

			background: url(../mm/mmfooter_back_hover.png) no-repeat;

			/*small as rounded box as above just much 

			lighter and bringter outside lines to make 

			look good for an over state kinda view*/

			border: 0;

			}

	

/*****************************

	link list...here we go...

*****************************/

			

	#linkList a:link, #linkList a:visited, #linkList a:hover, #linkList a:active {

		border: 0;

		padding: 0;

		margin: 0;

		}

		

		#linkList2 {

			position: absolute;

			top: 65px;

			left: 750px;

			z-index: 2000;

			height: 150px;

			margin: 0;

			padding: 0;

			width: 1350px;

			}

			

		#linkList2 a {

			border: 0;

			}

			

		#linkList2 #lselect li > a:first-child {

			display: block;

			}

			

		#linkList2 ul > li:last-child {

			border-bottom: 0;

			}

		

			

		#linkList2 {

			list-style-type: none;

			font-size: .7em;

			}	

			

		#linkList2 a {

			white-space: normal;

			}

			

		#linkList2 a:first-child {

			font-size: 1.3em;

			}

			

		#linkList2 li:hover {

			background: url(../mm/mmlink_background.gif) no-repeat;

			/*green stripes and highlights*/

			}

			

		#linkList2 li a:hover {

			text-decoration: underline;

			border: 0;

			background: transparent;

			}

		

		#linkList2 li {

			padding: 0 3px;

			border: 0;

			}

		

		html > body #linkList2 li {

			margin: 0;

			padding: 3px;

			border-bottom: 1px solid #887;

			}

			

			#lselect, #lfavorites, #lmonkeys, #lmowers {

				float: left;

				}

			

			#lselect h3, #lfavorites h3, #lmonkeys h3, #lmowers h3 {

				padding-top: 25px;

				float: left;

				display: block;

				height: 150px;

				}

			

			#lselect h3 span, #lfavorites h3 span, #lmonkeys h3 span, #lmowers h3 span {

				padding: 5px;

				position: relative;

				margin-bottom: 60px;

				top: -60px;

				color: #776;

				font-size: .5em;

				background: transparent url(../mm/mmdrop_ieBack.gif) no-repeat right;

				/*button with arrow pointing to the right*/

				border: 1px solid #776;

				padding-right: 25px;

				}

			

			#lselect ul, #lfavorites ul, #lmonkeys ul, #lmowers ul {

				float: left;

				position: relative;

				top: -45px;

				z-index: 3000;

				left: -15px;

				}

				

			

			

			html > body #lselect h3 {

				background: transparent url(../mm/mmdrop_lmayhem.png) no-repeat;

				/*button with word mayhem and arrow pointing down*/

				height: 36px;

				width: 153px;

				padding-top: 0;

				float: none;

				}

				

				html > body #lselect h3 span {

				display: none;

				}

				

			html > body #lselect ul {

				display: none;

				position: relative;

				top: 0;

				left: 0;

				}

				

			html > body #lselect:hover ul  { 

				background: url(../mm/mmdrop_background.png); 

				/*light greenbox*/

				list-style-type: none;

				display: block;

				margin: 5px;

				padding: 5px; 

				width: 128px;

				float: none;

				border: solid 1px #776 }

				

			html > body #lselect li {

				float: none;

				}

				

			#lselect ul {

				list-style-type: none;

				display: block;

				}	

				

				

			html > body #lfavorites h3 {

				background: transparent url(../mm/mmdrop_lmoney.png) no-repeat;

				/*button with word money and arrow pointing down*/

				height: 36px;

				width: 153px;

				padding-top: 0;

				float: none;

				}

				

			html > body #lfavorites h3 span {

				display: none;

				}

				

			html > body #lfavorites ul {

				display: none;

				position: relative;

				top: 0;

				left: 0;

				}

				

			html > body #lfavorites:hover ul   { 

				background: url(../mm/mmdrop_background.png);

				/*light green square*/

				list-style-type: none;

				display: block;

				margin: 5px;

				padding: 5px;

				width: 128px;

				float: none;

				border: solid 1px #093 }		

			

			html > body #lfavorites li {

				float: none;

				}

				

			#lfavorites ul {

				list-style-type: none;

				display: block;

				}

				

		

			

			html > body #monkeys h3 {

				background: transparent url(../mm/mmdrop_lmonkeys.png) no-repeat;

				/*button with word monkeys and arrow pointing down*/

				height: 36px;

				width: 153px;

				padding-top: 0;

				float: none;

				}

			

			html > body #lmonkeys h3 span {

				display: none;

				}

			

			html > body #lmonkeys ul {

				display: none;

				position: relative;

				top: 0;

				left: 0;

				}

			

			html > body #lmonkeys:hover ul  { 

				background: url(../mm/mmdrop_background.png);

				/*light green square*/

				list-style-type: none;

				display: block;

				margin: 5px;

				padding: 5px;

				width: 128px;

				float: none;

				border: solid 1px #776 }

			

			html > body #lmonkeys li {

				float: none;

				display: block;

				}

			

			#lmonkeys ul {

				list-style-type: none;

				}

				

			

			html > body #lmowers h3 {

				background: transparent url(../mm/mmdrop_lmowers.png) no-repeat;

				height: 36px;

				width: 153px;

				padding-top: 0;

				float: none;

				}

			

			html > body #lmower h3 span {

				display: none;

				}

			

			#lmowers ul {

				display: block;

				}

			

			html > body #lmowers ul {

				display: none;

				position: relative;

				top: 0;

				left: 0;

				}

			

			html > body #lmowers:hover ul  { 

				background: url(../mm/mmdrop_background.png);

				/*light green square*/

				list-style-type: none;

				display: block;

				margin: 5px;

				padding: 5px;

				width: 128px;

				float: none;

				border: solid 1px #776 }

			

			html > body #lmowers li {

				float: none;

				}

			

			#lmowers ul {

				list-style-type: none;

				}

				

#extraDiv1 {

	display: block;

	background: url(../mm/mmnoStandards.gif) fixed no-repeat;

	/*displays a warning graphic that the browser they visitor

	is using is sub par - and needs to move in to this millenium 

	and use mozilla*/

	position: absolute;

	top: 542px;

	left: 22px;

	width: 330px;

	height: 100px;

	}

	

#extraDiv2 {

	}	

	

html>body div#extraDiv1 {

	display: none;

	}

	

/*html > body #extraDiv1 span {

	display: none;

	}

	

/***************************************

 * so long and thanks for all the fish *

 *           ***********               *

 *     *    *           *              *  

 *     **  *        (.)  *             *

 *     ****               *            *

 *     ****     }        *             *

 *     **  *     }      *              *

 *     *    *   }      *               *

 *           **********                *

 ***************************************/