@charset "UTF-8";
/* CSS Document */

/* 
Theme Name: Mrs Doolittle's Pet Hotel
Theme URL: http://doolittlepethotel.com/
Description: WP Site Design by David Cole
Author: David Cole
Author URI: http://davidrcole.com
Version: 1.0
*/




/*				Resets and General Styles		*/
* { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; font-weight: normal }

body { background: #84a844 url(images/new_page_background.png) top repeat-x; font-family: Trebuchet, "Gill Sans", Calibri, sans-serif; font-size: 87.5%; line-height: 1.423em; color: #000 }
	html>body { font-size: 13px }

a { text-decoration: underline; color: inherit }
a:hover { text-decoration: underline }
	
.clear { clear: both }
	
	
.container { width: 960px; margin: 0 auto }
	
	
	
#header_wrapper { width: 100%; height: 142px; background: #f2f6db }
#header { padding-top: 20px }
	#logo { width: 274px; float: left }
	#header_info { width: 40%; float: right; margin-right: 10px; color: #000; font-size: 1.071em; text-align: right; z-index: 999 }
		#header_info a { color: #000 }
			#header_info a:hover { color: #6c773c }
		#header_info p { margin-bottom: 1.423em; float: right; clear: both }
		#header_info p.phone { font-size: 1.286em }
		#header_info .email { font-size: 0.778em }
	
	#header p.slogan { width: 700px; margin-top: 0.427em; font-family: Museo, Trebuchet, "Gill Sans", Calibri, sans-serif; color: #000; font-size: 3.429em; line-height: 1.25em }	
	
#pets { width: 100%; height: 270px }
	
#fixed_header { width: 100%; height: 248px; background: url(images/fixed_header.jpg) top center no-repeat }



#menu { position: relative; margin-top: 1.423em }

#menu a { display: block; height: 78px; float: left; margin-top: -10px; background: url(images/menu.png) no-repeat; text-indent: -9999px }
	#menu a.home { background-position: 0px 0px; width: 136px }
		#menu a.home:hover { background-position: 0px -78px; width: 136px }
	#menu a.our_story { background-position: -137px 0px; width: 176px }
		#menu a.our_story:hover { background-position: -137px -78px; width: 176px }
	#menu a.photos { background-position: -312px 0px; width: 124px }
		#menu a.photos:hover { background-position: -312px -78px; width: 124px }
	#menu a.divider { background-position: -436px 0px; width: 87px }
	#menu a.services { background-position: -523px 0px; width: 128px }
		#menu a.services:hover { background-position: -523px -78px; width: 128px }
	#menu a.policies { background-position: -651px 0px; width: 127px }
		#menu a.policies:hover { background-position: -651px -78px; width: 127px }
	#menu a.contact { background-position: -778px 0px; width: 182px }
		#menu a.contact:hover { background-position: -778px -78px; width: 182px }
	





#hello { width: 884px; height: 544px; clear: both; background: url(images/hello_background.png) bottom right no-repeat;  color: #563c07 }
	#hello > img { float: left; width: 302; height: 393px }
	#hello_content { float: left; width: 550px; padding-top: 150px }
	#hello p { text-indent: 20px; font-size: 1.143em; line-height: 1.5em }
	#hello p.salutation { text-indent: 0; font-size: 1.5em }
	#hello p > img { margin: 0.75em 0 }
	
	#hello div.actions { clear: both; margin-left: 300px }
	#hello div.actions a { display: block; height: 47px; float: left; background: url(images/actions.png) no-repeat; text-indent: -9999px }
		#hello div.actions a.one { background-position: 0px 0px; width: 163px }
			#hello div.actions a.one:hover { background-position: 0px -47px; width: 163px }
		#hello div.actions a.divider { background-position: -163px 0px; width: 56px }
		#hello div.actions a.two { background-position: -219px 0px; width: 182px }
			#hello div.actions a.two:hover { background-position: -219px -47px; width: 182px }
		#hello div.actions a.three { background-position: -458px 0px; width: 104px }
			#hello div.actions a.three:hover { background-position: -458px -47px; width: 104px }
	







#our_story { clear: both; position: relative; top: 3em; width: 818px; height: 606px; margin: 0 auto; padding-left: 60px; background: url(images/our_story_background.png) top left no-repeat; color: #563c07 }
	#our_story img { float: right; width: 384px; height: 496px; margin-left: 20px }
	#our_story_content { padding: 90px 0 0 0px; height: 406px; overflow: hidden }
	#our_story p { text-indent: 20px; font-size: 1.143em; line-height: 1.5em }
	
	#our_story #dog_tag { margin-left: 15px; width: 301px; height: 110px; background: url(images/our_story_dog_tag.jpg) no-repeat }
		#our_story #dog_tag a { display: block; width: 301px; height: 110px; text-indent: -9999px }





#photos { clear: both; width: 960px; margin: 0 auto; padding-top: 3em }
	#photos img.thumb { border: 5px #9cab57 solid; margin: 0 30px 3em 0 }

	#check_out_our_services { position: relative; float: right; text-align: right; width: 600px; margin-top: -70px; z-index: 9 }





#services_header { clear: both; position: relative; top: 35px; width: 961px; margin: 0 auto; background: url(images/services_header.png); height: 95px }
#services_content { clear: both; margin: 0 auto; position: relative; top: 14px; width: 861px; padding: 0 50px 2.846em; background: url(images/services_background.png) top no-repeat; color: #563c07 }
	#services_content h2 { width: 255px; height: 34px; margin-left: -20px; margin-top: 1em; padding: 7px 20px; background: url(images/contact_blue_background.png) top left no-repeat; font-size: 1.428em; color: #ffffff }
	#services_content strong { color: #000; font-weight: bold }
	#services_content p { margin-bottom: 1.423em; font-size: 1.143em }
		#services_content .footnote { font-size: 0.857em; line-height: 1.333em }
	#services_content a { color: #000 }
	
	#services_content .left_column { width: 460px; float: left }
	#services_content .right_column { float: right; width: 335px }
	
	




#policies_header { clear: both; position: relative; top: 35px; width: 961px; margin: 0 auto; background: url(images/policies_header.png); height: 95px }
#policies_content { clear: both; margin: 0 auto; position: relative; top: 14px; width: 861px; padding: 0 50px 2.846em; background: url(images/services_background.png) top no-repeat; color: #563c07 }
	#policies_content h2 { width: 255px; height: 34px; margin-left: -20px; margin-top: 1em; padding: 7px 20px; background: url(images/contact_blue_background.png) top left no-repeat; font-size: 1.428em; color: #ffffff }
	#policies_content strong { color: #000; font-weight: bold }
	#policies_content p { margin-bottom: 1.423em; font-size: 1.143em }
		#policies_content .footnote { font-size: 0.857em; line-height: 1.333em }
	#policies_content a { color: #000 }
	
	#policies_content .left_column { width: 460px; float: left }
	#policies_content .right_column { float: right; width: 335px }







#contact { width: 335px; height: 497px; clear: both; position: relative; top: 3em; margin: 0 auto; background: url(images/contact_background.jpg) top left no-repeat; padding: 90px 575px 10px 50px }
	#contact p { margin-bottom: 1.5em; font-size: 1.143em; line-height: 1.5em }
		#contact p.phone { width: 255px; height: 34px; margin-left: -20px; padding: 7px 20px; background: url(images/contact_blue_background.png) top left no-repeat; font-size: 1.428em; color: #ffffff }
	span.label { font-weight: bold; color: #4a3813 }
	








#footer { background: url(images/footer_dots.png) top center no-repeat; margin-top: 2.134em; margin-bottom: 2.134em; padding-top: 4.268em; text-align: center; font-size: 0.929em }	
	#footer p.credit { font-size: 1.077em }
		#footer p a:hover { color: #47601b }
		#footer p.credit a { font-weight: bold }

	#footer #animation { margin-top: 1.423em }
	
	
	
	



/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}