<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>PERFECT SMILE DENTAL CARE</title>
  <meta NAME="Author" CONTENT="PUT YOUR COMPANY INFO HERE">
  <meta name="keywords" content="PUT, YOUR, CLIENT'S, COMPANY, INFO, HERE">
  <meta name="description" content="PUT YOUR CLIENT'S COMPANY INFO HERE">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="220">
  <meta name="viewport" content="width=320">

  <link rel="stylesheet" type="text/css" href="css/global_style.css">
  <link rel="stylesheet" type="text/css" href="css/fontsheet.css">
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/mobile-switcher.js"></script>	
 </head>

<body  class="home">
<div><a class="logo" href="index.html"><img src="images/logo.png" alt="PERFECT SMILE DENTAL CARE" width="88" height="53" /></a> <a class="call callnow" href="javascript:;"><img src="images/call.png" alt="back" width="49" height="50" /></a></div>
<!-- image slider background --> <!--<mce:style type="text/css"><!  	/* rotator in-page placement */ 	div.rotator { 		/*position:relative;*/ 		height: 120px; 		width: 320px%; 		margin-right: auto; 	    margin-left: auto; 	}  	/* rotator css */ 	div.rotator ul li { 		/*float:left; */ 		position:absolute; 		list-style: none; 		width: 320px; 	}  	 div.rotator ul li.show { 		z-index:500; 	} -->
<p>--&gt;
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
	function theRotator() {
		//Set the opacity of all images to 0
		$('div.rotator ul li').css({opacity: 0.0});

		//Get the first image and display it (gets set to full opacity)
		$('div.rotator ul li:first').css({opacity: 1.0});

		//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

		setInterval('rotate()',6000);

	}

	function rotate() {
		//Get the first image
		var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

	    if ( current.length == 0 ) current = $('div.rotator ul li:first');

		//Get next image, when it reaches the end, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

		//Un-comment the 3 lines below to get the images in random order

		//var sibs = current.siblings();
	        //var rndNum = Math.floor(Math.random() * sibs.length );
	        //var next = $( sibs[ rndNum ] );


		//Set the fade in effect for the next image, the show class has higher z-index
		next.css({opacity: 0.0})
		.addClass('show')
		.animate({opacity: 1.0}, 1000);

		//Hide the current image
		current.animate({opacity: 0.0}, 1000)
		.removeClass('show');

	};



	$(document).ready(function() {
		//Load the slideshow
		theRotator();
		$('div.rotator').fadeIn(1000);
	    $('div.rotator ul li').fadeIn(1000); // tweek for IE
	});
// --></script>
</p>
<div class="rotator" style="width: 255px; height: 110px;">
<ul>
<li class="show featured1"> <img style="width: 255px;" src="images/img01.jpg" alt="" /></li>
<li class="featured2"> <img style="width: 255px;" src="images/img02.jpg" alt="" /></li>
<li class="featured3"> <img style="width: 255px;" src="images/img03.jpg" alt="" /></li>
<!--
<li class="featured4"> <img src="/assets/images/feature04_text.png" mce_src="/assets/images/feature04_text.png" width="300" height="110" /> </li>
--> 
</ul>
</div>
<div id="content">
<p align="center"><strong>For the Smile You Deserve!</strong></p>
<p align="center">We are equipped with all the skills and experience needed to deal with any dispute you may have.<strong>FREE 1 Hour Consultation</strong></p>
<a class="btn callnow" href="javascript:;">Tap here to CALL US now!</a>
<div id="home-nav">
<div class="item">
<div class="item-in">
<p><a class="ivalue" href="about_us.html">about us</a></p>
</div>
</div>
<div class="item">
<div class="item-in">
<p><a class="ivalue" href="products.html">products</a></p>
</div>
</div>
<div class="item">
<div class="item-in">
<p><a class="ivalue" href="services.html">services</a></p>
</div>
</div>
<div class="item">
<div class="item-in">
<p><a class="ivalue" href="contact.html">contact</a></p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-links">
<div id="social"><a title="Facebook" href="#"><img src="images/fb.png" alt="Facebook" width="29" height="36" /></a> <a title="Twitter" href="#"><img src="images/tweet.png" alt="Twitter" width="29" height="36" /></a> <a title="Youtube" href="#"><img src="images/youtube.png" alt="TouTube" width="29" height="36" /></a></div>
<p>&copy; 2012. Perfect Smile Dental Care. All Rights Reserved</p>
</div>
</div>
<div class="showcall"><img src="images/callnow.png" alt="" /></div>
<p>
<script type="text/javascript"><!--
    $(".emailnow").click(function(){
		$(".showemial").show();
		$(".showemial img").css("width",$(window).width()+24);
		$(".showemial img").css("height",$(window).height()+24);
		var screenTop = $(document).scrollTop();
		$(".showemial").css("top",screenTop);
		$('body').css('overflow','hidden') 
		$('body').css('overflow','hidden') 
    });
	
    $(".showemial img").click(function(){
    	$(".showemial").hide();
		$('body').css('overflow','auto')
		$('body').css('overflow','auto')
    });
    
    $(".callnow").click(function(){
		$(".showcall").show();
		$(".showcall img").css("width",$(window).width()+24);
		$(".showcall img").css("height",$(window).height()+24);
		var screenTop = $(document).scrollTop();
		$(".showcall").css("top",screenTop);
		$('body').css('overflow','hidden') 
		$('body').css('overflow','hidden') 
		
    });
	
    $(".showcall img").click(function(){
   	$(".showcall").hide();
	 $('body').css('overflow','auto')
	 $('body').css('overflow','auto')
    });
    
    $(".mapnow").click(function(){
    	$(".showmap").show();
		$(".showmap img").css("width",$(window).width()+24);
		$(".showmap img").css("height",$(window).height()+24);
		var screenTop = $(document).scrollTop();
		$(".showmap").css("top",screenTop);
		$('body').css('overflow','hidden') 
		$('body').css('overflow','hidden') 
    });
	
    $(".showmap img").click(function(){
   		$(".showmap").hide();
		$('body').css('overflow','auto')
		$('body').css('overflow','auto')
    });
// --></script>
</p>
</body>
</html>

</html>