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

    flora.css
	
	Presentational Sub-Layer for www.sensiblemonkey.com 
	Builds upon the file 'structure.css'
	
	Presentational Sub-Layer for 'index.html' can be found in the file 'idx.css'
	
	This file is still under construction.
	
	Laundry List for this iteration:
	  * Optimization:
	      - Remove redundant declarations of inherited properties
		  - Remove unused objects
		  - 'body#wide' and it's inheritors have redundant properties and could benefit 
		    from the creation of some uber-objects
		        *reconsider naming convention for 'body#wide' ands it's inheritors
				
	  * Cascade in 'body#services' section needs to be made more intuitive, it's 
	     currently a hack and the decimal 'em' model is broken there:
		    - Check parent nodes in the XHTML: an object is probably using an 
			  incorrect "font-size" property or has a parent that resides downstream 
			  in the cascade
			  (Update: it seems that body_wide is the source of the cascade trouble. 
			  See body#wide pop_underhead)
		 
	   * Comments, comments, comments
	   
	   
	
	Last Edited On: 11-23-08

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


	
/*  ##############################################################################
	
				Body-Specific
	
	#############################################################################*/

/*  ..............................................................................
	body id="mad"
	.............................................................................*/	
body#mad div.one {
	margin: 20px 4px 0px 10px; padding: 0px;
	/* margin: 20px 4px 7px 10px; padding:0px; */
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_mad.gif' ) -70px no-repeat;
	}
	body#mad div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_mad.gif' ) top left no-repeat;
	}
	body#mad div.one a:hover {
	background-image: none;
	}

body#mad div.two {
	margin: 0 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_two_mad.gif' ) -70px no-repeat;
	}
	body#mad div.two a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_two_mad.gif' ) top left no-repeat;
	}
	body#mad div.two a:hover {
	background-image: none;
	}

body#mad div.three {
	margin: 0 4px 0 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_three_mad.gif' ) -70px no-repeat;
	}
	body#mad div.three a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_three_mad.gif' ) top left no-repeat;
	}
	body#mad div.three a:hover {
	background-image: none;
	}

/*  ..............................................................................
	body id="kross"
	.............................................................................*/	
body#kross div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_kross.gif' ) -70px no-repeat;
	}
	body#kross div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_kross.gif' ) top left no-repeat;
	}
	body#kross div.one a:hover {
	background-image: none;
	}
body#kross #imgbar_one_hover_box p {
	font-weight: bold;
	padding: 0px 6px 0px 6px;
	}	

/*  ..............................................................................
	body id="evolve"
	.............................................................................*/	
body#evolve div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_evolve.gif' ) -70px no-repeat;
	}
	body#evolve div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_evolve.gif' ) top left no-repeat;
	}
	body#evolve div.one a:hover {
	background-image: none;
	}
	
body#evolve #imgbar_one_hover_box p {
	font-weight: bold;
	padding: 0px 6px 0px 6px;
	}


/*  ..............................................................................
	body id="horse"
	.............................................................................*/	
body#horse div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_horse.gif' ) -70px no-repeat;
	}
	body#horse div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_horse.gif' ) top left no-repeat;
	}
	body#horse div.one a:hover {
	background-image: none;
	}

#horsepic {
	position: absolute;
	left: 0px;
	top: 92px;
	margin: 0 0 0 -49px; padding:22px 10px 24px 10px;
	visibility: hidden;
	background-color: #cc9;
	}

/*  ..............................................................................
	body id="divorce"
	.............................................................................*/	
body#divorce div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_divorce.gif' ) -70px no-repeat;
	}
	body#divorce div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_divorce.gif' ) top left no-repeat;
	}
	body#divorce div.one a:hover {
	background-image: none;
	}

#divorcepic {
	position: absolute;
	left: 150px;
	top: 92px;
	margin: 0 0 0 -49px; padding:22px 10px 24px 10px;
	visibility: hidden;
	background-color: #cc9;
	}

/*  ..............................................................................
	body id="chemes"
	.............................................................................*/	
body#chemes div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_chemes.gif' ) -70px no-repeat;
	}
	body#chemes div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_chemes.gif' ) top left no-repeat;
	}
	body#chemes div.one a:hover {
	background-image: none;
	}

#chemespic {
	position: absolute;
	left: 192px;
	top: 92px;
	margin: 0 0 0 -49px; padding:14px 14px 14px 14px;
	visibility: hidden;
	background-color: #cc9;
	}

/*  ..............................................................................
	body id="proxy"
	.............................................................................*/
body#proxy div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../artc/imbb_one_brainiac.gif' ) -70px no-repeat;
	}
	body#proxy div.one a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../artc/imbb_one_brainiac.gif' ) top left no-repeat;
	}
	body#proxy div.one a:hover {
	background-image: none;
	}

body#proxy #imgbar_one_hover_box img {
	margin: 6px 0px 0px 0px;
	}

/*  ..............................................................................
	portfolio miscellaneous
	.............................................................................*/
div.main_content_image #phweet{
	display: block;
	text-align: center;
	border-top: 41px solid #ccc;
	border-right: 73px solid #ccc;
	border-bottom: 42px solid #ccc;
	border-left: 74px solid #ccc;
	background-color: #cc9;
	width: 134px;
	}
	
div.main_content_image #mixer{
	display: block;
	text-align: center;
	border-top: 56px solid #ff0;
	border-right: 19px solid #ff0;
	border-bottom: 56px solid #ff0;
	border-left: 18px solid #ff0;
	background-color: #ff0;
	width: 244px;
	}
	
/*  ..............................................................................
	butterfly
	.............................................................................*/
div.bf_change {
	position: absolute;
	top: 320px;
	left: -80px;
	margin: 0px 0px 0px 0px; padding:0px;
	width: 100px; height: 100px;
	background: url( '../art/bf_change.gif' ) top left	no-repeat;
	} 
	div.bf_change a {
	display: block;
	margin: 0px 0px 0px 0px; padding:0px;
	width:100%; height:100%;
	background: url( '../art/bf_change.gif' ) -100px no-repeat;
	}
	div.bf_change a:hover {
	background-image: none;
	}
	
#butterfly {
	float: left;
	margin: 0px 0px 0px 0px;
	}
	
/*  ..............................................................................
	body id="wide"
	.............................................................................*/
body#wide #content {
	position: absolute;
	top: 83px;
	left: 0px; 
	margin: 0px 0px 0px 0px; padding:0px;
	background-color: #fff;
	width: 554px;
	border-right: 1px solid #cc9;
	}
	
body#wide div.content_top {
	font-size: 1px;
	line-height: .1%;
	position: absolute;
	width: 423px;
	height: 121px;
	top: 0px;
	left: 131px;
	background-color: #cc9;
	}
	
body#wide div.pop_content_top {
	font-size: 1px;
	line-height: .1%;
	position: absolute;
	width: 423px;
	height: 121px;
	top: 0px;
	left: 131px;
	}
	
body#wide div.ev_content_top {
	font-size: 1px;
	line-height: .1%;
	position: absolute;
	width: 423px;
	height: 11px;
	top: 0px;
	left: 131px;
	}
	
body#wide #imagebar {
	visibility:hidden;
	}

body#wide #divbg {	
	visibility: hidden;
	left: 84px;
	}
	
body#wide div.main_content_image {
	position: absolute;
	top: 0px;
	left: 131px;
	margin: 15px 0px 0px 15px ; padding: 0px;
	border: none;
	width: 388px;
	}
	
body#wide hr {
	height: 1px;
	margin: 0px 0px 0px 20px; padding:0px;
	color: #cc9;
	}

body#wide .list_head
	{font-size: 2.4em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	color: #333;
	}
body#wide .underhead {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 24px 0px;
	padding: 0px 0px 0px 12px;
	color: #885;
	}	

body#wide div.body_copy {
	margin: 203px 0 100px 0; padding:0 0 0 141px;
	}
body#wide div.pop_body_copy {
	margin: 24px 0 100px 0; padding:0 0 0 141px;
	}
	
body#wide .cutline {
	font-size: 1em;
	display: block;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	color: #000;
	background-color: #eeb;
	text-align: left;
	margin: -4px 23px 0px 0px;
	padding: 12px;
	}
	body#wide .cutline a {
	text-decoration: underline;
	letter-spacing: 1px;
	}
	body#wide .cutline a:hover {
	text-decoration: none;
	letter-spacing: 1px;
	}

body#wide .pop_head {
    font-size: 2em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 0px 0px 0px; padding: 0px;
	color: #660;
	}
	
body#wide .pop_underhead {
	font-size: 1em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 20px 24px 0px;
	padding: 0px 0px 0px 12px;
	color: #885;
	}

body#wide div.pop_body_copy em {
	font-size: 1.4em;
	font-style: italic;
	letter-spacing: 1px;
	color: #774;
	}

body#wide div.pop_body_copy .cutline em {
	font-size: 1em;
	font-style: italic;
	letter-spacing: 1px;
	color: #330;
	}
	
.widelist_head {
	font-size: 2.7em;
	line-height: 120%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	letter-spacing: 1px;
	font-weight: lighter;
	font-style: normal;
	color: #666600;
	margin: 0px 2px 0px 0px;
	}
	
/*  ..............................................................................
	resume.html
	.............................................................................*/
body#wide div.resume {
	margin: 24px 0 100px 0; padding:0 0 0 141px;
	/* background: url( '../art/body_copy_bg.gif' ) top right	no-repeat; */
	}

body#wide div.resume .copy {
	margin: 0px 0px 24px 0px; padding:0px 24px 0px 32px;
	color: #000;
	}

body#wide div.resume .copy_head {
	display: block;
	font-size: 2.6em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 0px 0px 0px 20px; padding: 24px 0px 8px 0px;
	color: #555;
	}

body#wide div.resume hr {
	height: 1px;
	width: 360px;
	margin: 0px 0px 0px 20px; padding:0px;
	color: #aaa;
	}

body#wide div.resume .resume_head {
	display: block;
	font-size: 3em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 0px 0px 0px 20px; padding:0px;
	color: #552;
	}

body#wide div.resume .list_head {
	display: block;
	font-size: 1.4em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 12px 0px 0px -10px; padding:0px;
	color: #552;
	}

body#wide div.resume .bullet_head {
	display: block;
	font-size: 1.4em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 16px 0px 4px -10px; padding:0px 0px 0px 0px;
	color: #552;
	}

body#wide div.resume .list_sub_head {
	display: block;
	font-size: 1.2em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 12px 0px 3px 0px; padding:0px;
	color: #111;
	}

body#wide div.resume .dates {
	display: block; 
	font-size: 1em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin: 3px 0px 9px 0px; padding:0px;
	color: #666;
	}

body#wide div.resume img {
	margin: -6px 0px 0px 0px; padding:0px;
	}

/*  ..............................................................................
	body id="folio"
	.............................................................................*/	
body#folio div.content_top {	
	height: 10px;
	}

body#folio div.body_copy {
	margin: 23px 0 100px 0; padding:0px;
	}

body#folio div.main_content_image {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 9px 32px 0 18px ; padding:0px;
	border: 0px;
	width: 302px;
	}
	
body#folio .copy_head {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 24px 24px;
	color: #333333;
	}
	
body#folio .pop_head {
    font-size: 2em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 0px 0px 0px; padding: 0px;
	color: #660;
	}
	
body#folio .pop_underhead {
	font-size: 1.5em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 20px 24px 0px;
	padding: 0px 0px 0px 12px;
	color: #885;
	}

body#folio .list_head {
	font-size: 1.8em;
	line-height: 100%;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	color: #333;
	}

body#folio .list_head_quote {
	font-size: 1.2em;
	line-height: 100%;
	font-weight: normal;
	font-style: italic;
	letter-spacing: .5px;
	color: #333;
	}
	
body#folio .list_head_attrib {
	font-size: 1em;
	line-height: 100%;
	font-weight: normal;
	font-style: normal;
	float: right;
	letter-spacing: .5px;
	color: #333;
	}

/*  ..............................................................................
	body id="services"
	.............................................................................*/ 
body#services div.content_top {	
	height: 10px;
	}

body#services .body_copy {
	margin: 40px 0 100px 0; padding:0px;
	}

body#services .list_head {
	font-size: 2em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	color: #333;
	}

body#services .copy_subhead {
	font-size: 1.4em;
	line-height: 100%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	letter-spacing: .5px;
	margin:24px 0px 24px 0px;
	color: #333;
	}
	
body#services .copy_head {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 24px 24px;
	color: #333333;
	}
	
body#services .underhead {
	font-size: 1.8em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 24px 0px;
	padding: 0px 0px 0px 24px;
	color: #885;
	}
	
body#services div.body_copy em {
	font-size: 2em;
	font-style: italic;
	letter-spacing: 1px;
	color: #774;
	}
	
body#services pre
	{
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	padding: 24px 0px 0px 24px;
	color: #333;
	}
	
body#services .pop_head {
    font-size: 2em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 0px 0px 0px; padding: 0px;
	color: #660;
	}
	
body#services .pop_underhead em {
    display: block;
	font-size: 1em;
	line-height: 120%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 24px 44px;
	color: #885;
	}
	
body#services .list_head_emph {
    display: block;
	font-size: 1.6em;
	line-height: 110%;
	margin: -24px 0px -4px 30px;
	font-style: normal;
	font-weight: normal;
	color: #885;}
	
body#services .method {
    font-size: 1.4em;
	line-height: 150%;
	margin: 12px 28px 0px 56px;
	color: #333333;
	}
	
/*  ..............................................................................
	about.html
	.............................................................................*/
.wide_top_pic {
	float: right;
	margin: -12px -22px 9px 20px;
	}
	
#monkeypic {
	float: right;
	margin: -32px -28px 9px -4px;
	}

#content img.wide_leftbar_pic {
	float: left;
	margin: 9px 20px 9px -143px; padding: 0px;
	}
#content img.wide_leftbar_pic2 {
	float: left;
	margin: 9px 20px 9px -212px; padding: 0px;
	}
	
#myclients {
	height:700px;
	margin: -70px 0px 58px 0px; padding:0px;
	position: relative;
	}
	
.client_list {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 28px 50px 24px; padding: 0px;
	color: #555;
	}
div.clientlist01 { 
	float: left;
	margin:20px 0px 0px 0px;
	width: 200px;
	}
div.clientlist02 { 
	float: left;
	margin:20px 0px 0px 0px;
	width: 200px;
	}
	
	
/*  ..............................................................................
	brainiac page
	.............................................................................*/
body#wide p.brainiac {
	position: relative;
	top:24px;
	left: 0px;
	margin: 0px 48px 0px 36px; padding: 12px 0px 12px 0px;
	border: none;
	background-color: #c6c6fa;
	width: 329px;
	}
	body#wide p.brainiac img {
	margin: 0px 0px 0px 55px; padding: 0px;
	border: none;
	}

/*  ..............................................................................
	contact page ( start_proj.html )
	.............................................................................*/
body#wide div.contact_body_copy {
	margin: 24px 0px 100px 0px; padding:0 0 0 141px;
	}

.cont_nodent {
	display: block;
	font-size: 1.2em;
	line-height: 120%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	color: #885;
	text-align: left;
	margin-top: 6px;
	}
	
#mailform {
	text-align: left;
	margin: 0px 24px 0px 24px;
	}
	
/*  ..............................................................................
	thanks.html
	.............................................................................*/
body#thanks div.content_top {	
	height: 10px;
	}
	
.thanks_head {
	font-size: 2em;
	line-height: 120%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 0px 0px 0px 0px; padding: 0px;
	color: #660;
	}
	
.thanks_copy {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 22px 24px 0px 36px; padding: 0px;
	color: #333333;
	}
	
.thanks_map {
	font-size: 1.4em;
	line-height: 150%;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	margin: 32px 0px 0px 24px; padding: 0px;
	color: #333333;
	}