[TFUI] Re: [agile-testing] Unit Testing the Presentation Layer

Phlip <[email protected]> Fri, 12 Jun 2009 07:24:52 -0700
Newsgroups gmane.comp.programming.test-first-user-interfaces,gmane.comp.misc.agile.testing
Message-ID <[email protected]>
--9DiCJB1guhOZn0PMCYaMgRSgyggRtS93pdqA4kb
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit

Kaleb Pederson wrote:

> I'm a bit out of my realm as I'm usually strictly backend, but I'm going to delving into things like this very soon so I've been paying attention to these topics for a while now.
> 
> Still, I'm quite curious exactly what you mean by unit testing the presentation layer?
> 
> Does that imply that you're verifying what the HTML elements, CSS,and Ajax results are for given calls to the backend?  If so, why not test it at the backend level?

To add a new feature, you should generally add it at the business layer first. 
The goal will be that anything a user can do to the View, a unit test can do, 
generally the same way, to the business layer.

In the view, don't test the shiny things. Test that your template system has 
injected the correct variables. The tests help preserve these behaviors when you 
upgrade & refactor, including when you change the shiny things.

> If you're testing mainly what's going on at the front end, it seems like you could use pure HTML / Javascript to confirm that things act correctly using some mocked calls to the backend. I guess you could call it a mocked server, but I'm essentially thinking of a separate facade / interface that doesn't bother with round-trip calls to a server (even localhost).

JS only works correctly inside a browser. Tests should run under 10 seconds, 
from an unattended script. Browsers are not well tuned to be test targets.

Tests on JS should detect that the template systems have injected the correct 
data into them. I do this by parsing the JS into a lexical analysis, using 
"rkelly", then querying into the resulting parse tree to detect the variables.

> Of course, this doesn't take into account the rendering and cross-browser compatibility issues, but that's where Selenium Wati(r|n) and friends come into play.

TDD is not QA testing. At TDD time, we don't need to test that JS commands a 
browser correctly, we need to test that our business logic has commanded the JS 
correctly. Whether the JS works or not is a different issue.

If the tests constrain JS that does not work, only manual testing will detect a 
problem. Programmers should manually test before deploying. If you then upgrade 
the JS so it works, the tests should now constrain JS that works. This improves 
the odds you don't break the JS when you refactor something.

The systems like Watir that test through the browser are very important, but...

They have provided an entire generation of programmers with an easy entry into 
any kind of testing at all. Some projects use no unit tests whatsoever, and they 
slowly and painstakingly test everything - including the business logic - 
through the View. Some projects have unit tests on the business layers and not 
the View.

Of course these tests are better than nothing. Yet in the test food pyramid...

   http://c2.com/cgi/wiki?TestFoodPyramid

...a diet of only Watir tests would be like living only on ice cream and beer. 
It's fun at first, then the malnutrition begins...

-- 
   Phlip

--9DiCJB1guhOZn0PMCYaMgRSgyggRtS93pdqA4kb
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>




<body style="background-color: #ffffff;">

<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 470px; margin:0; padding:0 25px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->

    <div id="ygrp-text" >
            <!--~-|**|PrettyHtmlStart|**|-~-->
            <br><br>
      <!--~-|**|PrettyHtmlEnd|**|-~-->
      <p>Kaleb Pederson wrote:<br>
<br>
&gt; I'm a bit out of my realm as I'm usually strictly backend, but I'm going to delving into things like this very soon so I've been paying attention to these topics for a while now.<br>
&gt; <br>
&gt; Still, I'm quite curious exactly what you mean by unit testing the presentation layer?<br>
&gt; <br>
&gt; Does that imply that you're verifying what the HTML elements, CSS,and Ajax results are for given calls to the backend?  If so, why not test it at the backend level?<br>
<br>
To add a new feature, you should generally add it at the business layer first. <br>
The goal will be that anything a user can do to the View, a unit test can do, <br>
generally the same way, to the business layer.<br>
<br>
In the view, don't test the shiny things. Test that your template system has <br>
injected the correct variables. The tests help preserve these behaviors when you <br>
upgrade &amp; refactor, including when you change the shiny things.<br>
<br>
&gt; If you're testing mainly what's going on at the front end, it seems like you could use pure HTML / Javascript to confirm that things act correctly using some mocked calls to the backend. I guess you could call it a mocked server, but I'm essentially thinking of a separate facade / interface that doesn't bother with round-trip calls to a server (even localhost).<br>
<br>
JS only works correctly inside a browser. Tests should run under 10 seconds, <br>
from an unattended script. Browsers are not well tuned to be test targets.<br>
<br>
Tests on JS should detect that the template systems have injected the correct <br>
data into them. I do this by parsing the JS into a lexical analysis, using <br>
&quot;rkelly&quot;, then querying into the resulting parse tree to detect the variables.<br>
<br>
&gt; Of course, this doesn't take into account the rendering and cross-browser compatibility issues, but that's where Selenium Wati(r|n) and friends come into play.<br>
<br>
TDD is not QA testing. At TDD time, we don't need to test that JS commands a <br>
browser correctly, we need to test that our business logic has commanded the JS <br>
correctly. Whether the JS works or not is a different issue.<br>
<br>
If the tests constrain JS that does not work, only manual testing will detect a <br>
problem. Programmers should manually test before deploying. If you then upgrade <br>
the JS so it works, the tests should now constrain JS that works. This improves <br>
the odds you don't break the JS when you refactor something.<br>
<br>
The systems like Watir that test through the browser are very important, but...<br>
<br>
They have provided an entire generation of programmers with an easy entry into <br>
any kind of testing at all. Some projects use no unit tests whatsoever, and they <br>
slowly and painstakingly test everything - including the business logic - <br>
through the View. Some projects have unit tests on the business layers and not <br>
the View.<br>
<br>
Of course these tests are better than nothing. Yet in the test food pyramid...<br>
<br>
<a href="http://c2.com/cgi/wiki?TestFoodPyramid">http://c2.com/<wbr>cgi/wiki?<wbr>TestFoodPyramid</a><br>
<br>
...a diet of only Watir tests would be like living only on ice cream and beer. <br>
It's fun at first, then the malnutrition begins...<br>
<br>
-- <br>
   Phlip<br>
</p>
 

    </div>  

    <!--~-|**|PrettyHtmlStart|**|-~-->
    <div width="1" style="color: white; clear: both;">__._,_.___</div>

           
  
    
    <!-- Start the section with Message In topic -->
    <div id="ygrp-actbar" style="clear: both; margini-bottom: 25px; white-space:nowrap; color: #666; text-align: right;">
              <span class="left" style="float: left; white-space:nowrap;">
          <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/message/1043;_ylc=X3oDMTM0b24yYWY5BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwNDcEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMjQ0ODE2NzcwBHRwY0lkAzEwNDM-">
            Messages in this topic          </a> (<span class="bld" style="font-weight:bold;">5</span>)
        </span>
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJwNHRqdWZkBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwNDcEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMjQ0ODE2Nzcw?act=reply&messageNum=1047">
          <span class="bld" style="font-weight:bold;">
            Reply          </span> (via web post)
        </a>  | 
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJlZDNrdDlvBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTI0NDgxNjc3MA--" class="bld" style="font-weight:bold;">
          Start a new topic        </a>
          </div> 
    <!-------     Start Nav Bar  ------>
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-vitnav" style="padding-top: 10px; font-family: Verdana; font-size: 77%; margin: 0;">
                <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/messages;_ylc=X3oDMTJlb3JzMXBrBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTI0NDgxNjc3MA--">Messages</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/files;_ylc=X3oDMTJmYXMwaHVnBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2ZpbGVzBHN0aW1lAzEyNDQ4MTY3NzA-">Files</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/photos;_ylc=X3oDMTJlcmp1azBlBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3Bob3QEc3RpbWUDMTI0NDgxNjc3MA--">Photos</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/links;_ylc=X3oDMTJmbWF1cHV2BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2xpbmtzBHN0aW1lAzEyNDQ4MTY3NzA-">Links</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/database;_ylc=X3oDMTJjMDY4bmhyBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2RiBHN0aW1lAzEyNDQ4MTY3NzA-">Database</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/polls;_ylc=X3oDMTJmYjdsZTJiBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3BvbGxzBHN0aW1lAzEyNDQ4MTY3NzA-">Polls</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/members;_ylc=X3oDMTJlMDZwNXU1BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21icnMEc3RpbWUDMTI0NDgxNjc3MA--">Members</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/calendar;_ylc=X3oDMTJkaGQzaHZ2BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2NhbARzdGltZQMxMjQ0ODE2Nzcw">Calendar</a>  
    </div>  
    <!-- |**|end egp html banner|**| -->

                        <div id="ygrp-grft" style="font-family: Verdana; font-size: 77%; padding: 15px 0;">
          

        </div>
      
                  <div id="ygrp-mkp">
      <div id="hd">MARKETPLACE</div>
      <div id="ads">
                  <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
            <a href="http://us.ard.yahoo.com/SIG=14khdt7cq/M=733250.13450162.13535738.10835568/D=groups/S=1705007207:MKP1/Y=YAHOO/EXP=1244823970/L=/B=QtCbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=5754786/R=0/SIG=12eblfli8/*http://www.socialtrack.net/redir.aspx?CID=18601&AFID=43106&DID=81069&SID=350">I Make $350 per Day. Learn how I make 10k a month after I Got Fired!.</a>          </div>
                          <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                          <hr size=1 noshade>
                        <a href="http://us.ard.yahoo.com/SIG=14k0q7to9/M=733250.13450161.13535737.10835568/D=groups/S=1705007207:MKP1/Y=YAHOO/EXP=1244823970/L=/B=Q9CbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=5754783/R=0/SIG=12havo8bp/*http://www.socialtrack.net/redir.aspx?CID=24801&AFID=43106&DID=108590&SID=group">How Many Triangles? 92.6% of Americans Fail this Question!.</a>          </div>
                          <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                          <hr size=1 noshade>
                        <a href="http://us.ard.yahoo.com/SIG=14k3olhem/M=493064.12016295.13271503.10835568/D=groups/S=1705007207:MKP1/Y=YAHOO/EXP=1244823970/L=/B=RNCbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=5697381/R=0/SIG=11eaa5dke/*http://groups.yahoo.com/group/mompowergroup/">Mom Power: Discover the community of moms doing more for their families, for the world and for each other</a>          </div>
              </div>
    </div>
      
    <!-- yahoo logo -->
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-ft" style="font-family: verdana; font-size: 77%; border-top: 1px solid #666; padding: 5px 0;">
      <a href="http://groups.yahoo.com/;_ylc=X3oDMTJkcWw1cjdtBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMjQ0ODE2Nzcw">
      <img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/join;_ylc=X3oDMTJmOXRkZmRpBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzEyNDQ4MTY3NzA-">Change settings via the Web</a> (Yahoo! ID required) <br>
      Change settings via email: <a href="mailto:TestFirstUserInterfaces-digest-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:TestFirstUserInterfaces-traditional-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>

      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJkMWp2MTFtBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMjQ0ODE2Nzcw">
        Visit Your Group 
      </a> |
      <a href="http://docs.yahoo.com/info/terms/">
        Yahoo! Groups Terms of Use      </a> |
      <a href="mailto:TestFirstUserInterfaces-unsubscribe-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=">
        Unsubscribe      </a> 
    </div>     <!-- |**|end egp html banner|**| -->
  </div> <!-- ygrp-msg -->

  
  <!-- Sponsor -->
  <!-- |**|begin egp html banner|**| -->
  <div id="ygrp-sponsor" style="width:160px; float:right; clear:none; margin:0 0 25px 0; background: white;">
    <!-- Network content -->
    
<!-- Start Recommendations -->
<div id="ygrp-reco">
     </div>
<!-- End Recommendations -->

	    <!-- Start vitality -->
	    <div id="ygrp-vital" style="background-color: #e0ecee; margin-bottom: 20px; padding: 2px 0 8px 8px;">
	      		<div id="vithd" style="font-size: 77%; font-family: Verdana; font-weight: bold; color: #333; text-transform: uppercase;">Recent Activity</div>
		<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
		        <li style="clear: both; list-style-type: none; border: 1px solid #e0ecee;">
      <div class="ct" style="float: right; font-weight: bold; color: #ff7900; float: right; width: 2em; text-align:right; padding-right: .5em;"><span style="display:none">&nbsp;</span>2</div>
      <div class="cat" style="font-weight: bold;"><a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/members;_ylc=X3oDMTJmYTJjbGVnBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzEyNDQ4MTY3NzA-">New Members</a></div>
    </li>
  
		    
		    
		    
		    
		    
		</ul>
	      	      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJlbG9tcGhjBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTI0NDgxNjc3MA--">
		Visit Your Group	      </a>
	    </div> 
	    	    	      
	    <!-- Network content -->
	    	      <div style="background-color:#EEEEEE; margin-bottom:20px; padding:10px 8px;">    <div id="nc">
              <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Yahoo! Finance</div> 
<p><a href="http://us.ard.yahoo.com/SIG=14hgcq3um/M=493064.12016257.12445664.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1244823970/L=/B=RdCbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=4507179/R=0/SIG=12de4rskk/*http://us.rd.yahoo.com/evt=50284/*http://finance.yahoo.com/personal-finance">It's Now Personal</a></p> 
<p>Guides, news,</p> 
<p>advice & more.</p>                   </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">New web site?</div> 
<p><a href="http://us.ard.yahoo.com/SIG=14ha95u1e/M=493064.12016308.12445700.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1244823970/L=/B=RtCbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=3848642/R=0/SIG=131eshi2t/*http://searchmarketing.yahoo.com/arp/srchv2.php?o=US2004&cmp=Yahoo&ctv=Groups3&s=Y&s2=&s3=&b=50">Drive traffic now.</a></p> 
<p>Get your business</p> 
<p>on Yahoo! search.</p>                  </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <DIV id=hd1>Group Charity</DIV> 
<P><A href="http://us.ard.yahoo.com/SIG=14h0cdhr0/M=737447.13475021.13554044.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1244823970/L=/B=R9CbAUPDhC8-/J=1244816770739869/K=FeYnaVgsoime377fJgyO0w/A=5733767/R=0/SIG=110ovtbm6/*http://www.citizenschools.org/">Citizen Schools</A></P>
<P>Best after school</P>
<P>program in the US</P>                  </div>
          </div>
</div>
	    
	  </div> 	  <!-- |**|end egp html banner|**| -->
	  <div style="clear:both; color: #FFF; font-size:1px;">.</div>
	</div> 		  <img src="http://geo.yahoo.com/serv?s=97359714/grpId=8744704/grpspId=1705007207/msgId=1047/stime=1244816770/nc1=4507179/nc2=3848642/nc3=5733767" width="1" height="1"> <br>
	
	<div style="color: white; clear: both;">__,_._,___</div>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</body>
	<!--~-|**|PrettyHtmlStart|**|-~-->
	<head>
<style type="text/css">
<!--
#ygrp-mkp{
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 14px 0px;
  padding: 0px 14px;
}
#ygrp-mkp hr{
  border: 1px solid #d8d8d8;
}
#ygrp-mkp #hd{
  color: #628c2a;
  font-size: 85%;
  font-weight: bold;
  line-height: 122%;
  margin: 10px 0px;
}
#ygrp-mkp #ads{
  margin-bottom: 10px;
}
#ygrp-mkp .ad{
  padding: 0 0;
}
#ygrp-mkp .ad a{
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
	<head>
<style type="text/css">
<!--
#ygrp-sponsor #ygrp-lc{
  font-family: Arial;
}
#ygrp-sponsor #ygrp-lc #hd{
  margin: 10px 0px;
  font-weight: bold;
  font-size: 78%;
  line-height: 122%;
}
#ygrp-sponsor #ygrp-lc .ad{
  margin-bottom: 10px;
  padding: 0 0;
}
-->
</style>
</head>
	<head>
	<style type="text/css">
	<!--
	#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
	#ygrp-mlmsg table {font-size:inherit;font:100%;}
	#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
	#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
	#ygrp-mlmsg * {line-height:1.22em;}
	#ygrp-text{
	    font-family: Georgia;	
	}
	#ygrp-text p{
	    margin: 0 0 1em 0;
	}

	dd.last p a {
          font-family: Verdana;
          font-weight: bold;
	}

	#ygrp-vitnav{
		padding-top: 10px;
		font-family: Verdana;
		font-size: 77%;
		margin: 0;
	}
	#ygrp-vitnav a{
		padding: 0 1px;
	}
	#ygrp-mlmsg #logo{
	  padding-bottom: 10px;
	}

	#ygrp-reco {
	margin-bottom: 20px;
	padding: 0px;
	}
	#ygrp-reco #reco-head {
		font-weight: bold;
		color: #ff7900;
	}

	#reco-category{
        	font-size: 77%;
	}
	#reco-desc{
        	font-size: 77%;
	}

	#ygrp-vital a{
		text-decoration: none;
	}

	#ygrp-vital a:hover{
	  text-decoration: underline;
	}

	#ygrp-sponsor #ov ul{
		padding: 0 0 0 8px;
		margin: 0;
	}
	#ygrp-sponsor #ov li{
		list-style-type: square;
		padding: 6px 0;
		font-size: 77%;
	}
	#ygrp-sponsor #ov li a{
		text-decoration: none;
		font-size: 130%;
	}
	#ygrp-sponsor #nc{
	  background-color: #eee;
	  margin-bottom: 20px;
	  padding: 0 8px;
	}
	#ygrp-sponsor .ad{
		padding: 8px 0;
	}
	#ygrp-sponsor .ad #hd1{
		font-family: Arial;
		font-weight: bold;
		color: #628c2a;
		font-size: 100%;
		line-height: 122%;
	}
	#ygrp-sponsor .ad a{
		text-decoration: none;
	}
	#ygrp-sponsor .ad a:hover{
		text-decoration: underline;
	}
	#ygrp-sponsor .ad p{
		margin: 0;
		font-weight: normal;
		color: #000000;
	}
	o{font-size: 0; }
	.MsoNormal{
	   margin: 0 0 0 0;
	}
	#ygrp-text tt{
	  font-size: 120%;
	}
	blockquote{margin: 0 0 0 4px;}
	.replbq{margin:4}

dd.last p span {
  margin-right: 10px;
  font-family: Verdana;
  font-weight: bold;
}

dd.last p span.yshortcuts {
  margin-right: 0;
}

div.photo-title a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
    text-decoration: none;
}

div.file-title a,
div.file-title a:active,
div.file-title a:hover,
div.file-title a:visited {
    text-decoration: none;
}

#ygrp-msg p#attach-count {
    clear: both;
    padding: 15px 0 3px 0;
    overflow: hidden;
}

#ygrp-msg p#attach-count span {
    color: #1E66AE;
    font-weight: bold;
}

div#ygrp-mlmsg #ygrp-msg p a span.yshortcuts {
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
}

#ygrp-msg p a {
    font-family: Verdana;
    font-size: 10px;
}

#ygrp-mlmsg a {
    color: #1E66AE;
}

div.attach-table div div a {
    text-decoration: none;
}

div.attach-table {
    width: 400px;
}

	-->
	</style>
	</head>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</html><!--End group email -->


--9DiCJB1guhOZn0PMCYaMgRSgyggRtS93pdqA4kb--