/*
<!-- A collection of web search results in the search control -->
<div class="gsc-results gsc-webResult">  
	<!-- A single web result in the search control -->  
	<div class="gsc-result gsc-webResult">    
		<!-- A single web result, full structure defined below -->    
		<div class="gs-result gs-webResult">
		</div>
	</div>
	...
</div>


The following fragment of HTML illustrates the structure of a Web Search result's .html property. 
The purpose of this skeleton is to show you the major structural components so that you can alter 
the styling and display of a result. 
For instance, if you want to supress the "snippet", a CSS rule 
of #mycontrol .gs-webResult .gs-snippet { display : none; } would do the trick. 

<div class="gs-result gs-webResult">  
<!-- Note, a.gs-title can have embedded HTML  
// so make sure to account for this in your rules.  
// For instance, to change the title color to red,  
// use a rule like this:  
// a.gs-title, a.gs-title * { color : red; }  
-->  
	<div class="gs-title">    
		<a class="gs-title"></a>  
	</div>  
	<div class="gs-snippet"></div>  

	<!-- The default CSS rule has the -short URL visible and   
	// the -long URL hidden.   
	//   
	// If you want to reverse this, use a rule like:   
	// #mycontrol .gs-webResult .gs-visibleUrl-short { display:none; }   
	// #mycontrol .gs-webResult .gs-visibleUrl-long { display:block; }  
	-->  
	<div class="gs-visibleUrl gs-visibleUrl-short"></div>  
	<div class="gs-visibleUrl gs-visibleUrl-long"></div>

</div>
*/

#searchForm
{
	max-width:600px;
}
#searchForm input.gsc-input 
{
	text-align:left;
	padding : 2px;
	color : #333333;
	border-color : #333333;
}
#searchForm gsc-clear-button
{
	display:none;
}

.gs-webResult a.gs-title, .gs-webResult a.gs-title * { color : red; }  
.gs-webResult .gs-visibleUrl .gs-visibleUrl-short { display:block; color:Maroon;}   
.gs-webResult .gs-visibleUrl .gs-visibleUrl-long { display:block; color:Purple;}