Nico Tailored Therapies view live demo

Nico Tailored Therapies is a London based massage therapy company. Their website was to be ported to a back-end system so scalable, modular HTML and CSS was in order. We decided on writing XHTML and customized a few javascript plugins to make them blend in nicely with the rest of the site.

HTML Code

						
<!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>
		<!-- Basic Page Needs -->
		<title>Welcome | Nico Tailored Therapies</title>
		
		<meta content="text/html;charset=utf-8" http-equiv="content-type" />
    	<meta name="robots" content="noindex,nofollow"/>
    	
    	<!-- Stylesheets -->
		<link rel="stylesheet" href="style/screen.css" media="screen"/>
		<!--[if lt IE 8 ]><link rel="stylesheet" href="style/ie7.css"><![endif]-->	
		
		<!-- Scripts -->
		<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="js/jquery.tools.min.js"></script>
		<script type="text/javascript" src="js/make_dropdown.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
		<script type="text/javascript" src="js/ga.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {	
				setUpScrollable();
				setUpOverlayOnPageLoad();
			});
		</script>
		
		<!-- Favicons -->
		<link rel="shortcut icon" href="images/icons/favicon.ico"/>
		<link rel="apple-touch-icon" href="images/icons/apple-touch-icon.png"/>
		<link rel="apple-touch-icon" href="images/icons/apple-touch-icon-72x72.png"/>
		<link rel="apple-touch-icon" href="images/icons/apple-touch-icon-114x114.png"/>
	</head>

	<body>
		<div id="wrapper">
			
			<!-- PAGE HEADER -->
			<div id="header" class="clearfix">
				<h1>Nico Tailored Therapies</h1>					
				<a id="logo" href="#"><img src="images/logo.png" alt="Nico Tailored Therapies"/></a>
				
				<!-- CONTACT SECTION -->
				<div>
					<ul>
						<li><a href="#">Sign In</a></li>
						<li><a href="#">Register:</a></li>
						<li><a href="#">Call Back:</a></li>
						<li><a href="#">Book Online:</a></li>
					</ul>
					<ul>
						<li><a class="twitter"  href="#" target="_blank"></a></li>
						<li><a class="facebook" href="#" target="_blank"></a></li>
						<li><a class="linkedin" href="#" target="_blank"></a></li>
					</ul>
					
					<!-- SEARCH FORM -->
					<form id="searchform" action="#">
						<p>
							<a rel="#overlay" href="#">Make an appointment</a>
							<span>Call: 0208 819 6727</span>
						</p>	
						<p class="fieldwrap">
							<label for="searchform_searchtext" class="infield">Search by keyword</label>
							<input id="searchform_searchtext" name="searchform_searchtext" type="text" class="infield-label"/>
							<input type="submit" class="black" value=""/>
						</p>					
					</form>
					
					<!-- Container Element For The Dynamically Imported Content -->
					<a rel="#overlay" href="select-clinic-location.html" class="make-an-appointment"></a>
					<div id="overlay" class="overlayed-content">
						<a href="#" class="close exit"></a>
						<div class="inner"><div class="contentWrap"></div></div>
					</div>
				</div>
			</div>
			
			<!-- MAIN NAVIGATION ON ALL PAGES -->
			<div id="main-nav">
				<ul id="menubar">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Treatments</a>
						<ul>
							<li><a href="#">Deep Tissue Massage</a></li>
							<li><a href="#">Sports Massage Therapy</a></li>
							<li><a href="#">Aromatherapy Massage</a></li>
							<li><a href="#">Lymphatic Massage</a></li>
							<li><a href="#">Reflexology Therapy</a></li>
							<li><a href="#">Natural Facial Lift</a></li>
							<li><a href="#">Training With Nico</a></li>
							<li><a href="#">Nico Packages</a></li>
							<li><a href="#">Series of Treatments</a></li>
							<li><a href="#">Loyalty Points</a></li>
							<li><a href="#">Gift Certificate</a></li>
						</ul>
					</li>
					<li><a href="#">Book Online</a></li>
					<li><a href="#">Clinic Locations</a>
						<ul>
							<li><a href="#">Fenchurch Street</a></li>
							<li><a href="#">Tower Bridge</a></li>
							<li><a href="#">Knightsbridge</a></li>
						</ul>
					</li>
					<li><a href="#">Clients Say</a>
						<ul>
							<li><a href="#">Fenchurch Reviews</a></li>
							<li><a href="#">Tower Bridge Reviews</a></li>
							<li><a href="#">Knightsbridge Reviews</a></li>
						</ul>
					</li>
					<li><a href="#">News</a>
						<ul>
							<li><a href="#">Blog</a></li>
							<li><a href="#">Business News</a></li>
							<li><a href="#">Recent News Letters</a></li>
							<li><a href="#">Downloads</a></li>
						</ul>
					</li>
					<li><a href="#">Contact Us</a></li>
				</ul>
			</div>
			
			<!-- PRESENTATIONAL SLIDER -->
			<div id="intro" class="slider">
					<div class="slides">
						
						<!-- First Slide *Why Nico?* -->
						<div class="slide whitebg">
							<div class="intro-content">
								<h2>Massage Therapy & Reflexology for Health, Stress Relief and Rehabilitation</h2>					
								<p>Founder, Nico Austin is recognised as a pioneering practitioner and teacher of complementary therapies and 
									reflexology. Following years of extensive experience including primary therapist for professional sports 
									teams and consultant and lecturer for the NHS led her to the Nico Tailored Therapies vision: To tailor 
									therapies to the individual's needs and natural resources, in order to maximize the unique vitality within 
									every human being. </p>								
								<p class="buttons">
									<a href="#" class="button">Book Online</a>
									<a class="button" href="#">Request Call Back</a>
								</p>
							</div>
							<div class="intro-image">
								<img src="images/img1.png" alt="Massage Therapy & Reflexology"/>
							</div>
						</div>
						
						<!-- More code following the same markup as the previous <DIV> element -->
					</div>
					
					<div class="intro-tabs">
						<a href="#"><span>Why Nico?</span></a>
						<a href="#"><span>Deep Tissue Massage</span></a>
						<a href="#"><span>Sports Massage Therapy</span></a>
						<a href="#"><span>Aromatherapy Massage</span></a>
						<a href="#"><span>Lymphatic Massage</span></a>
						<a href="#"><span>Reflexology Therapy</span></a>
						<a href="#"><span>Natural Lift Facial Massage</span></a>
						<a href="#"><span>Training with Nico</span></a>
					</div>
			</div>
			
			<!-- PAGE MAIN CONTAINER -->
			<div id="container">
				
				<!-- PAGE MAIN CONTENT -->
				<div id="content">
					<div class="featured-articles">
						<div class="featured-article">
							<h4>Nico<br/>Packages</h4>
							<img src="images/nico-packages.jpg" alt="Nico Packages"/>
							<p>We offer professionally tailored packages that combine a selection of complementary 
								therapies into one inclusive session.</p>
							<a class="more" href="#">Read More</a>
						</div>	
						<div class="featured-article">
							<h4>Series of<br/>Treatments</h4>
							<img src="images/series-of-treatments.jpg" alt="Series of Treatments"/>
							<p>We can provide a more comprehensive course of treatments over a successive period 
								including Deep Tissue Massage, Sports Massage and Reflexology.</p>
							<a class="more" href="#">Read More</a>
						</div>
						<div class="featured-article last">
							<h4>Referral<br/>Program</h4>
							<img src="images/referral-program.jpg" alt="Referral Program"/>
							<p>Impressed? Why not spread the word? We�ll reward you with free treatments just for telling 
								other people how great you feel.</p>
							<a class="more" href="#">Read More</a>
						</div>	
						
						<!-- Clearing Floats After Every Third Item-->
						<div class="clear"></div>
						
						<div class="featured-article">
							<h4>Gift<br/>Certificate</h4>
							<img src="images/gift-certificate.jpg" alt="Gift Certificate"/>
							<p>Earn points towards a free treatment of your choice whether you book a 
								single therapy, package or series.</p>
							<a class="more" href="#">Read More</a>
						</div>
						
						<div class="featured-article">
							<h4>Loyalty<br/>Points</h4>
							<img src="images/loyalty-points.jpg" alt="Tailored Treatment Plans"/>
							<p>Our customers are the beating heart of our business and without them we would simply cease to be.</p>
							<a class="more" href="#">Read More</a>
						</div>		
						
						<div class="featured-article last">
							<h4>Therapist<br/>Wanted</h4>
							<img src="images/therapist-wanted.jpg" alt="Therapist Wanted"/>
							<p>At Nico Tailored Therapies we appreciate that when it comes to you and your body there can be no 
								one-size-fits-all approach. Proper care requires a personal, attentive and bespoke service. </p>
							<a class="more" href="#">Read More</a>
						</div>					
					</div>
										
					<h3>Stellar After-Care Services</h3>
					<p>At Nico Tailored Therapies the treatment doesn�t stop when you leave our clinic because we�re not 
						satisfied until you feel on top of the world. The complementary therapies we provide are supplemented 
						with a dutiful and conscientious after-care service.</p>
					<p>Our team of dedicated specialists appreciate that everyone is different which is why we promote an open 
						dialogue with our clients. Your feedback is central to our business ethos and by actually listening to the 
						opinions of the people who really matter, you, we can continue to grow and improve.</p>
					<p>As a client you are never far from our thoughts, which is why we like to keep in touch following one of our 
						massage therapy treatments or programs. On the 2nd day after the appointment we will contact you to ask how 
						you are feeling and whether or not you have experienced any discernible improvements. It is important for us 
						to know you have received a service that is professional, thoughtful and most of all that works. By 
						interpreting your feedback we are also able to recommend further sessions or a tailored treatment plan if your 
						condition requires it. Tell us in an open and informal way which therapies particularly worked for you, if you 
						were satisfied with the quality of our service or even if you have a preferred therapist. Here your thoughts 
						make all the difference...</p>					
					
					<div class="testimonials simple">
						<h3>Don�t just listen to us listen to our customers</h3>
						<ul class="testimonial-list">
							<li>
								<div class="author">
									<img class="author-image" src="images/johndoe.jpg" alt="Author Image"/>
									<span class="author-name">Vicki</span>
									<span class="rating five"></span>
								</div>
								<blockquote>
									<p>I had quite a lot of liposuction done during March 2010 (after saving for about 20 years!) and afterwards 
										I suffered with fluid retention quite badly. It made me groggy and really affected the way my body 
										looked.  My surgeon recommended lymphatic drainage massage and not knowing the first place to look I 
										resorted to google - which found me Nico. I had 5 sessions with Nico - it was very light and although 
										ached at times I know this was more to do with my internal healing than the actual massage.  At the end 
										I went back to see my surgeon. He was absolutely delighted with the results - the fluid lumpy bits had 
										all but disappeared and my skin tone was a million times better.  The sessions were also very useful for 
										keeping up my motivation for exercise and healthy eating as Nico does the same and certainly focused my
										concentration on these areas!! Combining exercise, massage and eating properly, I have lost a total of 
										1st 4 pounds and 27cm from all over my body. If that's not worth a massage then I don't know what is!!!</p>
								</blockquote>
							</li>
						</ul>
						<div class="actions">
							<a class="more" href="#">More Reviews</a>
						</div>
					</div>
				</div>
				
				<!-- PAGE SIDEBAR -->
				<div id="primary" class="sidebar">
					
					<!-- Clinic Locations Mod -->
					<div class="mod locations">
						<h4>Clinic Locations</h4>
						<img src="images/clinic-locations.jpg" class="featured" alt="Clinic Locations"/>
						<div class="mod-content">
							<a class="plus open-map-overlay" href="http://maps.google.co.uk/maps/ms?msid=216698081880252859511.0004b2e0170685b20f1b9&msa=0&hl=en&ie=UTF8&t=m&vpsrc=6&ll=51.50511,-0.12291&spn=0.053425,0.102825&z=13&output=embed" rel="#overlay">View Larger Map</a>
							<ul class="prettylist">
								<li><a href="#">A: Fenchurch Street</a></li>
								<li><a href="#">B: Tower Bridge</a></li>
								<li><a href="#">C: Knightsbridge</a></li>
							</ul>
						</div>
					</div>
					
					<!-- Book Online Mod -->
					<div class="mod book-online">
						<h4>Book Online</h4>
						<div class="mod-content">
							<img class="alignleft" src="images/book-online.jpg" alt="Book Online"/>
							<p>FAST SECURE ONLINE BOOKING SYSTEM</p>
							<a class="button" href="#">Book Now</a>
						</div>
					</div>
					
					<!-- Recent News Mod -->
					<div class="mod recent-news">
						<h4>
							<span>Recent News</span> 
							<a class="rss" href="#" title="Subscribe to our RSS feed"></a>
						</h4>
						<div class="mod-content">
							<ul class="prettylist">
								<li><a href="#">It's Been Proven, and It Works... </a></li>
								<li><a href="#">90% of Clients Choose Deep Tissue Massage</a></li>
								<li><a href="#">Be Healthier Before the Holidays - Not After!</a></li>
								<li><a href="#">Stress in The City</a></li>
								<li><a href="#">Charity Event Today at Bankside</a></li>
							</ul>
							<a class="more" href="#">More Articles</a>
						</div>
					</div>
					
					<!-- Nico On The Move Mod -->
					<div class="mod on-the-move">
						<h4>Nico on the move</h4>
						<div class="mod-content">
							<img class="featured" src="images/iphone-application.png" alt="Book Online"/>
							<p>DOWNLOAD OUR NEW IPHONE APPLICATION </p>
							<a class="button" href="#">Download App</a>
						</div>
					</div>
				</div>
			</div>
			
			
			<!-- PAGE CERTIFICATIONS -->
			<div id="certifications" class="clearfix">
				<div class="first block">
					<h3>Certifications/Associations</h3>
					<ul>
						<li><a class="ctha" href="#" target="_blank"></a></li>
						<li><a class="embody" href="#" target="_blank"></a></li>
					</ul>
				</div>
				<div class="second block">
					<ul>
						<li><a class="umbraco" href="#" target="_blank"></a></li>
						<li><a class="godaddy" href="#" target="_blank"></a></li>
						<li><a class="w3c-10" href="#" target="_blank"></a></li>
						<li><a class="w3c-11" href="#" target="_blank"></a></li>
					</ul>
				</div>
				<div class="third block">
					<ul>
						<li><a class="visa" href="#" target="_blank"></a></li>
						<li><a class="mastercard" href="#" target="_blank"></a></li>
					</ul>
				</div>
			</div>
			
			<!-- PAGE FOOTER -->
			<div id="footer">
				<div class="company-info">
					<img src="images/logo-white.png" alt="Nico Tailored Therapies"/>
					<p>© 2011. All Rights Reserved</p>
				</div>
				<div class="contact">
					<a class="button blackstar" href="#">Book Online</a>
					<a class="button blackstar" href="#">Contact Us</a>
				</div>
				<div class="navigation">
					<ul>
						<li><a href="#">Deep Tissue Massage</a></li>
						<li><a href="#">Sports Massage Therapy</a></li>
						<li><a href="#">Aromatherapy Massage</a></li>
						<li><a href="#">Reflexology Therapy</a></li>
						<li><a href="#">Natural Lift Facial Massage</a></li>
						<li><a href="#">Training with Nico</a></li>
					</ul>
					<ul>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Book Online</a></li>
						<li><a href="#">Clients Say</a></li>
						<li><a href="#">Terms & Conditions</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="#">Site Map</a></li>
					</ul>
				</div>
				<div class="social">
					<p>Follow us at</p>
					<ul>
						<li><a class="twitter" href="#" target="_blank"></a></li>
						<li><a class="facebook" href="#" target="_blank"></a></li>
						<li><a class="linkedin" href="#" target="_blank"></a></li>
						<li><a class="rss" href="#"></a></li>
					</ul>
				</div>
			</div>			
		</div>
	</body>
</html>
						
					

CSS Code

						
@charset "UTF-8";
/***
 * Main Stylesheet
 * ***/

/*** General Styling ***/
body {	
	font: normal 13px/1.3em 'Arial, Helvetica', sans-serif;
	background-color: #e9e9e9;
	color: #666666;
}

a { text-decoration: underline; color: #666; outline: none; }
a:hover { color: #bf1e2e; }
p { padding-bottom: 1.3em; }
em { font-style: normal; }
b { font-weight: bold; }
i { font-style: italic; }
span, li, td, dd, dl, dt { font-size: 13px; }

h1,h2,h3,h4,h5,h6 { line-height: 1em; font-family: Arial, Helvetica, sans-serif; }
h1,h2,h3,h4,h5,h6 { padding-bottom: 15px; }

h1 { font-family: 'Arial Black', Arial;	font-weight: 900; font-size: 24px; color: #000; }
h2 { font-size: 20px; font-weight: bold; color: #bf1e2e; }
h3 { font-size: 18px; color: #333; line-height: 1.3em; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-weight: bold; }


/*** Page Wrapper Styling ***/
div#wrapper {
	width: 1000px;
	margin: 0 auto;
	background-color: #fff;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 5px 0px #d0d0d0;
	-moz-box-shadow: 0px 0px 5px 0px #d0d0d0;
	box-shadow: 0px 0px 5px 0px #d0d0d0; 
}


/*** Header Styling ***/
div#header { padding: 19px 25px 15px; width: 950px; }
div#header a {	color: #929292; text-decoration: none; }
div#header a#logo { float: left; }
div#header h1 { text-indent: -9999px; line-height: 0; padding: 0; }

div#header>div {
	float: right;
	overflow: hidden;
	margin-top: 8px;
}

div#header>div>ul {
	float: left;
	text-align: right;
	margin-right: 18px;
}

div#header>div ul li { margin-bottom: 6px; }
div#header>div ul li a:hover { color: #bf1e2d; }

div#header>div ul+ul li a {
	background: url('images/social-icons.png') no-repeat left top;
	width: 25px;
	height: 25px;
	display: block;
}

div#header>div ul+ul li { margin-bottom: 4px; }
div#header>div ul+ul li a.twitter { background-position: 0 0; }
div#header>div ul+ul li a.twitter:hover { background-position: 0 -28px; }
div#header>div ul+ul li a.facebook { background-position: -27px 0; }
div#header>div ul+ul li a.facebook:hover { background-position: -27px -28px; }
div#header>div ul+ul li a.linkedin { background-position: -54px 0; }
div#header>div ul+ul li a.linkedin:hover { background-position: -54px -28px; }


/* Search form styling */
div#header>div form#searchform { float: left; }
div#header>div form#searchform a, div#header>div form#searchform span {
	font: normal 22px/1em 'Arial', sans-serif;
	text-transform: uppercase;
	display: block;
}

div#header>div form#searchform p { padding-bottom: 0; text-align: right; }
div#header>div form#searchform a { padding-bottom: 3px; letter-spacing: 0.02em; }
div#header>div form#searchform span, div#header>div form#searchform span a { 
	color: #bf1e2d; 
	font-family: 'Arial Black', Arial;
  	font-weight: 900;
	font-size: 24px;
	padding-bottom: 9px;
}

div#header>div form#searchform span a { display: inline; letter-spacing: 0; }

div#header>div form#searchform input { vertical-align: middle; }
div#header>div form#searchform input[type="text"] {	width: 228px; }


/*** Intro Section Styling ***/
div#intro { 
	position: relative; 
	margin-top: 3px;
	width: 1000px;
	background-color: #f5f5f5;
}


/* Intro Section Content */
div#intro h2 {
	line-height: 1.3em;
	font-size: 20px; 
	padding-bottom: 10px;
	color: #666;
	font-weight: normal;
}

div#intro h3 { font-size: 16px; }
div#intro p.buttons { padding-bottom: 0; }

div#intro div.intro-content {
	height: 318px;
	padding: 0 25px;
	overflow: hidden;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 100;
	width: 950px;
}

div#intro div.intro-image { 
	position: absolute; 
	right: 0; 
	top: 0;
	z-index: 10;
	background-color: #f5f5f5;
}

div#intro div.intro-image img { background-color: #f5f5f5; }

div#intro div.intro-content h2 { width: 675px; }
div#intro div.intro-content p, div#intro div.intro-content ul { width: 480px; }

/* Main Page Slide Navigation */
div#intro.slider, div#intro.slider div.slides, div#intro.slider div.slides div.image { height: 318px; }
div#intro.slider div.intro-content { height: 275px; }

div#intro.slider div.intro-tabs {
	width: 100%; 
	position: absolute; 
	bottom:0; 
	left: 0;
	z-index: 100;
}

div#intro div.intro-tabs a {  
	text-decoration: none; 
	display: table-cell; 
	padding-top: 10px;
}

div#intro div.intro-tabs a+a span { border-left: 1px solid #fff; }

div#intro div.intro-tabs a span {
	display: block; 
	color: #fff; 
	background-color: #939393; 
	padding: 0.4em 1em;
	text-align: center;
	font-size: 14px; 
	cursor: pointer;
}

div#intro div.intro-tabs a.current, div#intro div.intro-tabs a:hover { background: url('images/active-slide.png') no-repeat center top; }
div#intro div.intro-tabs a.current span, div#intro div.intro-tabs a:hover span { background-color: #666; }

div#intro div.intro-tabs a:hover { text-shadow: 1px 1px 1px #131313; }


/*** Main Page Slider ***/
/* container for slides */
.slides {
	position:relative;	
	float:left;	
	width: 1000px;
}

/* single slide */
.slides div.slide {
	display:none;
	position:absolute;
	width: 100%;
	top:0;
	left:0;	
}

.slides div.slide div.intro-content { filter:inherit;}


/*** Page Content Styling ***/
div#container {
	overflow: hidden;
	float: left;
	padding: 25px;
	width: 950px;
}

div#container div#content { width: 700px; margin-right: 15px; float: left;  }
div#container.layout1 div#content { width: 675px; margin-right: 25px; }
div#container.layout2 div#content { width: 610px; margin-right: 40px; }
div#container.layout2 div.sidebar { width: 300px; }

div#wrapper div.sidebar { width: 230px; float: right; }

div#container div#content p, div#container div#content ul, div#container div#content ol { padding-bottom: 1.3em; }
div#container div#content ol { margin-left: 25px; }


/*** Certifications Block Styling ***/
div#certifications { 
	border-top: 2px dotted #ccc; 
	float: none;
	clear: both;
	padding-top: 15px;
	margin: 0 25px;
}

div#certifications div.block { 
	float: left; 
	width: 295px; 
	text-align: center; 
}

div#certifications div.first { width: 255px; padding-right: 20px; }
div#certifications div.second { width: 360px; border-left: 2px dotted #ccc; border-right: 2px dotted #ccc; }
div#certifications div.third { width: 285px; padding-left: 20px; }

div#certifications div.block h3 { text-align: left; } 
div#certifications div.block li { display: inline-block; }

div#certifications div.block a {
	 background: url('images/certifications.png') no-repeat left center; 
	 display: inline-block; 
	 margin: 0 20px 10px 0; 
}

/* First Certifications Block */
div#certifications div.block a.ctha { width: 153px; height: 64px; background-position: 0 -2px; }
div#certifications div.block a.ctha:hover { background-position: 0 -75px; }
div#certifications div.block a.embody { width: 54px; height: 68px; background-position: -157px 0; }
div#certifications div.block a.embody:hover { background-position: -157px -73px; }

/* Second Certifications Block */
div#certifications div.block a.umbraco { width: 121px; height: 42px; background-position: -215px -13px; }
div#certifications div.block a.umbraco:hover { background-position: -215px -86px; }
div#certifications div.block a.godaddy { width: 165px; height: 42px; background-position: -342px -13px; }
div#certifications div.block a.godaddy:hover { background-position: -342px -86px; }
div#certifications div.block a.w3c-10 { width: 81px; height: 31px; background-position: -510px -18px; } 
div#certifications div.block a.w3c-10:hover { background-position: -510px -91px; }
div#certifications div.block a.w3c-11 { width: 81px; height: 31px; background-position: -595px -18px; } 
div#certifications div.block a.w3c-11:hover { background-position: -595px -91px; }
div#certifications div.block a.w3c-11 { width: 81px; height: 31px; background-position: -595px -18px; } 
div#certifications div.block a.w3c-11:hover { background-position: -595px -91px; }

/* Third Certifications Block */
div#certifications div.block a.visa { width: 277px; height: 43px; background-position: -681px -12px; } 
div#certifications div.block a.visa:hover { background-position: -681px -85px; }
div#certifications div.block a.mastercard { width: 210px; height: 28px; background-position: -962px -19px; } 
div#certifications div.block a.mastercard:hover { background-position: -962px -92px; }


/*** Page Footer Styling ***/
div#footer {
	background-color: #000;
	padding: 25px;
	overflow: hidden;
}

div#footer>div { float: left; }

div#footer div.company-info { text-align: center; margin-right: 20px;}
div#footer div.company-info p {
	color: #666;
	font-style: italic;
	padding-top: 10px;
}

div#footer div.contact {
	margin-right: 20px;
	padding-top: 20px; 
	width: 175px;
}

div#footer div.contact a.button { 
	box-shadow: none; 
	width: 95px;
	margin-bottom: 15px;
}

div#footer div.navigation { width: 410px; }
div#footer div.navigation ul { float: left; margin-right: 40px; }
div#footer div.navigation ul li { 
	background: url('images/redarrow-right.png') no-repeat left top; 
	padding-left: 20px;
	margin-bottom: 5px;
}
div#footer div.navigation ul li a { color: #fff;  text-decoration: none; }
div#footer div.navigation ul li a:hover { color: #ccc; }

div#footer div.social {
	font-size: 15px;
	color: #fff;
	width: 75px;
}

div#footer div.social p { padding: 0 15px 15px 0; }
div#footer div.social ul li { float: left; }
div#footer div.social ul li a { 
	background: url('images/social-icons.png') no-repeat left -48px;
	display: block;
	width: 30px; 
	height: 30px; 
	margin: 0 7px 7px 0; 
}

div#footer div.social ul li a.twitter  { background-position: -0 -90px; }
div#footer div.social ul li a.facebook { background-position: -32px -90px; }
div#footer div.social ul li a.linkedin { background-position: -63px -90px; }
div#footer div.social ul li a.rss { background-position: -94px -90px; }
div#footer div.social ul li a.twitter:hover  { background-position: -0 -57px; }
div#footer div.social ul li a.facebook:hover { background-position: -32px -57px; }
div#footer div.social ul li a.linkedin:hover { background-position: -63px -57px; }
div#footer div.social ul li a.rss:hover { background-position: -94px -57px; }
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale