/* 
----------------------------------------
CLEARWAY MORTGAGE - MAIN STYLES
AUTHOR:  Starlab Design / Tommie Cranker
UPDATED: April 2008
----------------------------------------*/

/* COLORS
   #125a7e - dark blue
   #EBF4FA - light blue
   #3185c8 - med blue
   #60A348 - med green
   #007253 - dark green
   #47af57 - green
*/

/*
----------------------------------------
GLOBAL RESET
Courtesy of Eric Meyer - meyerweb.com
----------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100% }

:focus { outline: 0 }

/*
----------------------------------------
BODY STYLES
----------------------------------------*/

body 
	{ margin: 10px 0px; font-family: Arial, Helvetica, sans-serif; background: url(../imgs/body_bg_grad.gif) repeat-x top #fff }

/*
----------------------------------------
GLOBAL LINK STYLES
----------------------------------------*/

a          { font-family: Arial, Helvetica, sans-serif; text-decoration: none }
a:link     { color: #2d8cbb }
a:visited  { color: #2d8cbb }
a:hover    { color: #125a7e }

a.gr-arrow 
	{ padding: 5px 0px 0px 15px; font-weight: bold; font-size: 11px }
	
a.gr-arrow:link, a.gr-arrow:visited 
	{ background: url(../imgs/bul_arrow.gif) no-repeat top left }
	
a.gr-arrow:hover 
	{ text-decoration: underline }

/*
----------------------------------------
GLOBAL TYPOGRAPHY STYLES
----------------------------------------*/

h1, h2, h3, h4       
	{ font-weight: normal; font-family: Arial, Helvetica, sans-serif; line-height: normal }

.arial    { font-family: Arial, Helvetica, sans-serif }
.trebucet { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif }
.verdana  { font-family: Verdana, Arial, Helvetica, sans-serif }

/*
----------------------------------------
GLOBAL TYPOGRAPHY STYLES - COLOR
----------------------------------------*/

.white      { color: #fff }
.black      { color: #000 }
.green      { color: #47af57 }
.dark-green { color: #007253 }
.dark-blue  { color: #1d4e77 }

/*
----------------------------------------
GLOBAL TYPOGRAPHY STYLES - SIZE
----------------------------------------*/

.x-small { font-size: 10px }
.small   { font-size: 12px }
.medium  { font-size: 14px }
.large   { font-size: 18px }


/*
----------------------------------------
LAYOUT CONTAINERS
----------------------------------------*/

#page-container 
	{ margin: 0 auto; width: 940px; background: #f0f0f0 }
	  

/*---HEADER-----------------------------*/

#header       
	{ margin: 0 auto; width: 940px; height: 100px; background: url(../imgs/header_bg.png) no-repeat bottom center }
	
	#header-left  
		{ margin-right: 20px; width: 460px; height: 100px; float: left }
		
	#header-right 
		{ width: 460px; height: 100px; font-family: Verdana, Arial, Helvetica, sans-serif; float: left }
		
		#certs
			{ padding: 20px 30px 0px 0px; width: 170px; float: right; text-align: right }
		
		#phone-box
			{ padding-top: 22px; margin-right: 10px; width: 180px; float: right; text-align: center }
			
			#phone-box span.telnum
				{ color: #007253; font: bold 16px Arial, Helvetica, sans-serif }
				
			#phone-box p                 
		    	{ font-size: 10px; color: #666; line-height: 1.5 }
				
		
/*---MAIN NAVIGATION--------------------*/

#nav          
	{ margin: 0 auto 1px auto; width: 940px; height: 34px; border-bottom: 2px solid #1E5C7B; 
	  background: url(../imgs/nav_bot_border.gif) repeat-x bottom  }
	
	#navlist              
		{ width: 940px; font-size: 13px;  float: left }
	
		#navlist li           
			{ list-style: none; display: inline; float: left }
				
			#navlist li a         
				{ float: left }
			
			#navlist li a:link, #navlist li a:visited     
				{ padding: 11px 20px 0px 20px; height: 23px; font-weight: bold; color: #fff;  
				  background: url(../imgs/nav_inset_bg.gif) no-repeat bottom right }
			
			#navlist li a:hover, #navlist li a#active 
				{ background: url(../imgs/nav_inset_hover.gif) no-repeat bottom right   }
			
#infobar
	{ margin: 0 auto 1px auto; width: 940px; height: 2px; background: #1E5C7B }
	
	#infobar p
		{ font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #fff }
				  

/*---MAIN CONTENT-----------------------------------------------------------------------------------------*/

#main-content-container 
	{ padding: 0px 1px 10px 1px; width: 716px; float: left; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1;      background: #fff }

#pic-contain
	{ width: 716px; height: 200px; border-bottom: 1px solid #fff; float: left }
	
	#pics                   
		{ width: 460px; height: 200px; float: left }
		
	#apply
		{ padding-left: 10px; width: 246px; height: 200px; float: left; background: url(../imgs/apply_bot.gif) no-repeat top left }
			
		#apply h1
			{ padding: 10px 0px 5px 0px; font-weight: bold; font-size: 20px; color: #0c3b52; border-bottom: 1px solid #0c3b52 }
					
		#checks
			{ font-size: 12px; color: #F3F9F1; list-style-type: none; float: left }
			
			#checks li
				{ margin: 4px 0px; padding: 2px 0px 0px 25px; background: url(../imgs/check.png) no-repeat top left }
						
		#apply a
			{ margin: 130px 0px 0px 10px; width: 190px; height: 40px; float: left; 
			  background: url(../imgs/apply_but.png) no-repeat }
					  
		#apply a:hover
			{ background: url(../imgs/apply_but_hover.png) no-repeat }
						
#main-text-head
	{ width: 716px; border-bottom: 1px solid #fff; float: left }
	
	#main-text-head h1           
		{ padding: 20px 0px 10px 20px; font-size: 24px; color: #47af57 }		


#main-text              
	{ padding: 10px 20px; width: 676px; float: left; border-top: 1px solid #d1d1d1 }
	
	#main-text h2
		{ font-weight: bold; font-size: 16px; color: #007253 }
	
	#main-text p
		{ margin: 10px 0px; font-size: 14px; color: #333; line-height: 1.5 }
			
		#main-text ul
			{ font-size: 14px; color: #333; list-style-type: circle;  }
			
			#main-text ul.default
				{ padding: 0px 0px 10px 20px }
		
		#benefits
			{ margin: 10px; font-size: 14px; color: #333; list-style-type: none }
			
			#benefits li
				{ margin-bottom: 10px; padding: 0px 0px 0px 20px; list-style-type: none; line-height: 1.5;
				  background: url(../imgs/ben-check.gif) no-repeat top left }
				  
		.sitemapLinks
			{ padding: 5px 0px 10px 20px; list-style-type: none }
			
			.sitemapLinks li
				{ list-style-type: none }
		
	#sub-section-wrap         
		{ padding: 10px 10px 0px 10px; width: 696px; float: left; border-top: 1px solid #d1d1d1 }
		
		#sub-section-wrap h2
			{ padding: 10px 0px 5px 0px; font-weight: bold; font-size: 14px; color: #007253 }
			
		
		
		.sub-section
			{ padding-left: 160px; width: 302px; height: 130px; float: left; border: 1px solid #d1d1d1 }
			
		#rates         
			{ margin-right: 10px; width: 222px; float: left;  
			  background: /*url(../imgs/subsec_bg.gif) repeat-x top*/ #fff }
			  
			#rates h2
				{ padding: 4px 10px; font-weight: normal; font-size: 12px; color: #fff; background: #2d8cbb }
				
			/*#rates h4 
				{ padding: 4px 10px; width: 202px; font-weight: normal; font-size: 12px; color: #fff; float: left; background: #2d8cbb }*/
				
				span.rdate
					{ font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif }
			
			#rates p
				{ padding: 5px 0px 5px 10px; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333 }
			
			#ratelist
				{ margin-bottom: 10px; padding: 0px 1px; width: 218px; list-style-type: none; float: left; border: 1px solid #d1d1d1; 
				  border-top: none }
				
				#ratelist li
					{ width: 218px; padding: 3px 0px; float: left }
					
					#ratelist li.odd
						{ background: #f5f5f5 }
					
					#ratelist li p.rate
						{ width: 75px; padding: 6px 0px 0px 10px; font-weight: bold; font-size: 14px; color: #333333; float: left }
						
					#ratelist li p.type
						{ width: 110px; padding: 4px 5px 4px 7px; font-size: 10px; color: #333333; border-left: 1px solid #d1d1d1;                          float: left }
			  
		#refi                   
			{ margin-bottom: 10px; background: url(../imgs/refi_bg.gif) no-repeat top left }
			
			#refi p
				{ padding: 0px 20px 10px 0px; font-size: 12px; line-height: 1.5; color: #666666 }
				
		#purchase                   
			{ background: url(../imgs/pur_bg.gif) no-repeat top left }
			
			#purchase p               
				{ padding: 0px 20px 10px 0px; font-size: 12px; line-height: 1.5; color: #666666 }
			
			
	#main-bot
		{ margin: 0 auto; width: 940px }
		
		#main-bot h4
			{ margin-bottom: 5px; padding-bottom: 3px; font-size: 14px; color: #666; border-bottom: 1px dotted #666 }
		
		#company
			{ padding: 10px 0px; width: 197px; float: left }
			
			#company h4
				{ margin-bottom: 8px }
			
			#company p
				{ font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666; line-height: 1.3 }
		
		#partner
			{ margin-bottom: 10px; width: 220px; float: left; border: 1px solid #d1d1d1; border-top: none }
			
			#partner h4
				{ padding: 4px 10px; font-weight: normal; font-size: 12px; color: #fff; background: #2d8cbb }
				  
			#partner p   
				{ padding: 10px }
				
			#partner img
				{ padding-left: 10px }
				
			#partner a { font-size: 12px }


/*---RIGHT SIDE CONTENT-------------------*/

#sidebar-wrap
	{ margin-bottom: 10px; padding: 0px 10px; width: 200px; float: left; background: /*url(../imgs/sidebar_top_bg.gif) no-repeat top left #cae5fe*/ }
	
	#sidebar                
		{ padding-top: 10px; width: 200px; float: left }
	
		#sidebar h2
			{ padding: 4px 10px; font-size: 12px; color: #fff;  background: /*url(../imgs/blue_head.gif) repeat-x bottom*/ #2d8cbb  }
			
		#chat                   
			{ margin-bottom: 10px; padding: 10px 0px 10px 0px; width: 198px; height: 60px; text-align: center; float: left; border: 1px solid #d1d1d1;
			   background: url(../imgs/chat_bg.gif) no-repeat top left #fff  }
			
			#chat h3
				{ margin-bottom: 5px; font-weight: bold; font-size: 14px; color: #47af57 }
				
			#chat p                 
				{ padding-top: 5px; font-size: 11px; color: #fff; line-height: 1.5 }
			  
		#popular
			{ margin-bottom: 10px; width: 200px; float: left;  
			  background: /*url(../imgs/subsec_bg.gif) repeat-x top*/ #fff } 
		
			#poplinks               
				{ padding: 5px 0px 5px 10px; width: 188px; font-size: 11px; list-style-type: none; float: left;
				  border: 1px solid #d1d1d1; border-top: none }
			
				#poplinks li            
					{ padding: 5px 0px 5px 15px; width: 173px; background: url(../imgs/bul_arrow.gif) no-repeat top left }
					
					#poplinks li a
						{ font-weight: bold }
						
					#poplinks li a:hover
						{ text-decoration: underline }
				
		#quick-mod     
			{ width: 200px; float: left;  
			  background: /*url(../imgs/subsec_bg.gif) repeat-x top*/ #fff }
			
			#quick-mod p   
				{ line-height: 1.5 }
				
#security
	{ width: 200px; float: left; background: #fff }
	
	#security p
		{ margin: 5px 0px; padding: 0px 10px; font-size: 11px; color: #666; line-height: 1.5 }
				
					
/*---FOOTER-----------------------------*/



	#footer      
		{ width: 940px; height: 45px; clear: both; border-top: 1px solid #d1d1d1; background: url(../imgs/footer_bg.gif) no-repeat bottom center }

		#copyright   
			{ padding: 5px 0px 10px 10px; width: 540px; float: left }
			
			#copyright p 
				{ font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666; line-height: 1.5 }

		#bot-nav                    
			{ padding: 5px 0px; width: 310px; float: right }
			
			#bot-navlist                
				{ float: left }
				
				#bot-navlist li             
					{ list-style: none; display: inline }
					
					#bot-navlist li a           
						{ padding: 0px 5px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; border-right: 1px solid #666; float: left }
						
					#bot-navlist li a:link, #bot-navlist li a:visited      
						{ color: #666 }
   
					#bot-navlist li a:hover     
						{ color: #d1d1d1; text-decoration: underline }
						
					#bot-navlist li a.no-border 
						{ border-right: none }

/*
----------------------------------------
FORMS	
----------------------------------------*/

/*---ONLINE APPLICATION-----------------*/

#main-app-contain
	{ width: 716px; float: left; border-top: 1px solid #d1d1d1; background: #f5f5f5 }

	#steps-contain
		{ width: 118px; float: left }
	
		#steps
			{ width: 118px; font-weight: bold; font-size: 14px; color: #ccc; list-style-type: none; float: left }
		
			#steps li
				{ padding: 10px; width: 98px; float: left }
				
			#steps li.current-step
				{ color: #fff; background: #2d8cbb }

	#application
		{ padding: 10px; width: 577px; float: left; border-left: 1px solid #d1d1d1; background: #fff }
	
		form.apply
			{ width: 577px; font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; float: left }
		
			form.apply fieldset
				{ width: 577px; float: left }
			
				form.apply fieldset h3
					{ padding: 10px; font-weight: bold; font-size: 16px; color: #333; border-bottom: 1px solid #d1d1d1 }
			
				div.sec-contain
					{ padding: 10px 0px 0px 10px; width: 567px; float: left }
				
					form.apply fieldset ul
						{ list-style-type: none; float: left }
			
					form.apply fieldset ul.left, form.apply fieldset ul.mid
				    	{ margin-right: 20px; width: 169px; float: left }
					
					form.apply fieldset ul.right
						{ width: 169px; float: left }
						
					form.apply fieldset ul.normal
						{ width: 567px }
						
					form.apply fieldset ul.normal li
						{ width: 567px }
						
						form.apply fieldset ul.normal li label
						{ width: 567px }
				
					form.apply fieldset ul li
						{ margin-bottom: 10px; width: 169px; float: left }
						
						form.apply fieldset ul li label
							{ padding-bottom: 2px; width: 169px; float: left; font-weight: bold; font-size: 12px }
							
							form.apply fieldset ul li label.default
								{ color: #666 }
							
						form.apply fieldset ul li input
							{ padding: 3px; width: 161px; float: left; border: 1px solid #d1d1d1 }
							
						form.apply fieldset ul li select
							{ padding: 1px; width: 165px; float: left; border: 1px solid #d1d1d1 }
				
			div.single
				{ padding: 10px 20px; width: 537px; float: left; background: #F9FBFD }
				
			div.single label.labelError
				{ font-weight: bold; font-size: 12px; color: #FF0000 }
				
			div.button
				{ padding: 10px 20px; width: 537px; clear: both; background: #d7e5f2 }
					
				input.send
					{  }
				
label.default
	{ font-weight: bold; font-size: 12px; color: #666 }
.labelError
	{ color: #FF0000 }
div#topformerror
	{ padding: 5px 0px 5px 20px; width: 557px; float: left; border-top: 1px solid #fff; background: #FFE0E0 }
div#topformerror span
	{ font-weight: bold; font-size: 12px; color: #FF0000 }
	
p.success
	{ font-size: 14px; color: #333; padding: 10px 10px 250px 10px; line-height: 1.5 }


/*---QUICK CONTACT----------------------*/

form.contact             
	{ width: 178px; padding: 10px 10px 5px 10px; float: left; border: 1px solid #d1d1d1; border-top: none }
	
form.contact fieldset, form.contact p, form.contact ol, form.contact li    
	{ width: 178px; float: left }
	
form.contact p
	{  padding-bottom: 5px; font-size: 11px; color: #666; line-height: 1.5 }
	
form.contact fieldset ol
	{ list-style: none }

form.contact li          
	{ margin: 5px 0px }
	
form.contact label       
	{ padding: 3px 0px; width: 40px; color: #666; font: bold 10px Verdana, Arial, Helvetica, sans-serif; float: left; 
	  text-align: right }
	  
form.contact input.input 
	{ margin-left: 5px; padding: 3px; width: 100px; border: 1px solid #ccc }
	
.qc-submit                 
	{ margin-left: 45px; width: 80px; height: 25px }
	
	
#contact-content              
	{ padding: 10px 20px; width: 676px; float: left; border-top: 1px solid #d1d1d1 }


#contactForm
	{ margin-top: 10px; width: 338px; float: left; background: #f5f5f5 }
	
	form.main-contact
		{ padding: 20px; width: 298px; float: left }
		
		form.main-contact p
			{ margin-bottom: 10px; font-weight: bold; font-size: 14px; color: #007253 }
		
		form.main-contact fieldset    
			{ border: 0px }
			
			form.main-contact li          
				{ margin: 5px 0; list-style: none }
				
				form.main-contact li label       
					{ padding: 3px 0; width: 70px; color: #666; font: bold 12px Verdana, Arial, Helvetica, sans-serif; 
					  float: left }
					  
				form.main-contact li input.input 
					{ margin-left: 5px; padding: 3px; width: 120px; border: 1px solid #ccc }
					
				form.main-contact input.sub-but 
					{ margin-left: 75px }
					
				form.main-contact li textarea 
					{ margin-left: 5px; padding: 3px; border: 1px solid #ccc }
					
					
#locations
	{ margin-top: 10px; padding-left: 20px; width: 318px; float: left }
	
	#locations span.thecity
		{ padding-bottom: 5px; width: 318px; font-weight: bold; font-size: 14px; color: #007253; float: left; border-bottom: 1px solid #d1d1d1 }
		
	#locations span.theoffice
		{ padding: 10px; width: 139px; float: left; font-size: 12px; color: #333 }
		
#directory
	{ margin-top: 10px; width: 674px; float: left; border: 1px solid #d1d1d1 }
	
	#contactList
		{ margin: 0px; padding: 0px; width: 672px; float: left; list-style-type: none; border-left: 1px solid #fff;
		  border-right: 1px solid #fff }
		
			#contactList li
				{ margin: 0px; padding: 0px; width: 672px; float: left; list-style-type: none }
			
			#contactList li.evenrow
				{ background: #f5f5f5 }
				
			#contactList li span.contactListHead
				{ padding: 10px 0px 10px 10px; width: 662px; font-weight: bold; font-size: 14px; color: #333; float: left }
				
			#contactList li span.officeName
				{ padding: 5px 0px 5px 10px; width: 662px; font-weight: bold; font-size: 14px; color: #fff; float: left; 
				  background: #2d8cbb }
				
				#contactList li span.empName
					{ padding: 5px 0px 5px 10px; width: 286px; font-size: 14px; color: #333; float: left }
					
				#contactList li span.empMail
					{ padding: 5px 0px; width: 346px; font-size: 12px; float: left }
					
form.calc
	{ padding: 20px; width: 320px; float: left; background: #f8f8f8 }
	
	form.calc fieldset
		{ width: 320px; float: left }
		
		form.calc legend
			{ padding-bottom: 5px; font-weight: bold; font-size: 14px; color: #333; width: 320px; 
			   float: left }
			  
		form.calc ul
			{ padding: 10px 0px; width: 320px; float: left; list-style-type: none; border-top: 1px solid #d1d1d1; }
			
			form.calc ul li
				{ margin: 5px 0px; width: 320px; float: left; list-style-type: none }
				
				form.calc ul li label
					{ width: 180px; font-size: 12px; font-weight: bold; color: #666; text-align: right; float: left }
				
				form.calc ul li input.input
					{ margin-left: 2px; padding: 3px; float: left }
					

#map
	{ margin: 40px auto 0 auto; width: 640px; height: 500px; border: 10px solid #fff; background: #fff }