Portfolio

						
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TopazSchool</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
	<script type="text/javascript" src="js/inputs.js"></script>
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="js/cufon.js"></script>
	<script type="text/javascript" src="js/cufon-fonts.js"></script>
	<script type="text/javascript" src="js/cufon-settings.js"></script>
	<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css" media="all" /><![endif]-->
</head>
<body>
	<div id="wrapper">
		<div class="wrap-t"></div>
		<div class="wrap-c">
			<div class="page">
				<div id="header">
					<div class="container">
						<ul class="lang-list">
							<li>Language:</li>
							<li><a href="#">English</a></li>
							<li><a href="#">简体</a></li>
							<li><a href="#">繁體</a></li>
						</ul>
					</div>
					<h1 class="logo"><a href="#">TopazSchool</a></h1>
					<div class="container">
						<div class="cart-form">
							<form action="#">
								<fieldset>
									<label for="lb001"><a href="#">My cart</a></label>
									<div class="inp01">
										<input id="lb001" type="text" value="0" />
									</div>
									<input type="submit" value="Checkout" class="btn-check" />
								</fieldset>
							</form>
						</div>
					</div>
					<ul id="nav">
						<li><a href="#">Home</a></li>
						<li><a href="#">About Viki Booking</a></li>
						<li><a href="#">Videos</a></li>
						<li><a href="#">Documentation</a></li>
						<li><a href="#">Free Trial</a></li>
						<li><a href="#">Purchase</a></li>
						<li><a href="#">Compare</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</div>
				<div id="main">
					<div id="content">
						<div class="started-box">
							<h2>Topaz School</h2>
							<div class="box">
								<h3>Software</h3>
								<p>The most commonly used page in the software is the day sheet. This shows the bookings for the current day or any day which is selected. This view is showing the bookings by resources (columns which could be rooms, machines, golf bays).</p>
							</div>
							<a href="#" class="btn-start">Get Started</a>
						</div>
						<div class="text">
							<h3>Welcome to <a href="#">Topaz School</a></h3>
							<p>Viki Booking is front office booking software which makes managing bookings, room and staff availability fast and simple. We focus on producing quality software which is powerful yet easy to use.</p>
							<p>This is suitable for many types of business, <a href="#">click here to view all the available business types and to learn more about how this software can help you directly.</a></p>
						</div>
						<div class="topic">
							<table>
								<tr>
									<td class="td01"><strong>Salons</strong></td>
									<td class="td02"><div class="holder"><p>Spa, Beauty salon, Hair salons, Tanning salons, Gym, Weight Management Center or Nail Salon.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Sports</strong></td>
									<td class="td02"><div class="holder"><p>personal fitness training, gym, yoga, martial arts, tennis or squash courts, golf practice range with many tees for golfers to practice golf.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Room <br />Booking</strong></td>
									<td class="td02"><div class="holder"><p>Such as meeting rooms, library rooms, time slots for computer access or conference rooms.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Schools</strong></td>
									<td class="td02"><div class="holder"><p>Such as language teaching school, university facilities, music school, educational center or general school.  School which consults to schools by sending teachers to those schools.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Healthcare</strong></td>
									<td class="td02"><div class="holder"><p>Physicians, dentists, eye doctors, optometrists.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Events <br />Management </strong></td>
									<td class="td02"><div class="holder"><p>Such as conference, theme parks, churches, arenas, convention centers, ballparks, performing arts centers,  civic centers, conference centers.</p></div></td>
								</tr>
								<tr>
									<td class="td01"><strong>Others </strong></td>
									<td class="td02"><div class="holder"><p>such as photographers, veterinarians, pet grooming, workshops, portrait photography, driving lessons and testing, laboratories, personal trainer, barber or hairdresser, TV or dance Studios, rehearsal rooms, parking spaces, audio-visual equipment, employee assignments.</p></div></td>
								</tr>
							</table>
							<div class="info"><p>Viki Booking stores all data on our servers in the SaaS model giving a very low total cost of ownership our customers. You have zero investment in server platform hardware, zero investment in software licenses, zero investment in hardware and software upgrades, as these are included as part of the service. </p></div>
						</div><!--topic-->
					</div><!--content-->
					<div id="sidebar">
						<div class="login-form">
							<div class="holder">
								<div class="frame">
									<h3>User Login</h3>
									<div class="box">
										<div class="inp01"><input type="text" value="Username" /></div>
										<div class="inp01"><input type="password" value="Password" /></div>
										<div class="row">
											<input type="submit" value="Login" class="btn-login" />
											<a href="#">Lost your password?</a>
										</div>
										<a href="#" class="trial">Obtain Your 3 Month Free Trial</a>
									</div><!--box-->
								</div>
							</div>
						</div><!--login-form-->
						<div class="video-box">
							<h3>Let Me Introduce Viki Booking</h3>
							<div class="video">
								<img src="images/video01.jpg" alt="" width="233" height="162" />
							</div>
						</div>
						<div class="side-box">
							<div class="holder">
								<div class="frame">
									<h3>Latest News</h3>
									<ul>
										<li>
											<p>Friday 28th October, 2011</p>
											<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
										</li>
										<li>
											<p>Friday 28th October, 2011</p>
											<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
										</li>
										<li>
											<p>Friday 28th October, 2011</p>
											<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
										</li>
									</ul>
									<a href="#" class="more">READ MORE...</a>
								</div>
							</div>
						</div>
						<div class="facebook">
							<img src="images/facebook.gif" alt="" width="249" height="159" />
						</div>
					</div>
				</div><!--main-->
				<div id="footer">
					<div class="alignright">
						<div class="container">
							<ul>
								<li>Follow Us</li>
								<li><a href="#"><img src="images/ico01.gif" alt="" width="15" height="15" /></a></li>
								<li><a href="#"><img src="images/ico02.gif" alt="" width="15" height="15" /></a></li>
							</ul>
						</div>
						<p>© 2011 Topaz School. All rights reserved.</p>
					</div>
					<div class="holder">
						<ul>
							<li><a href="#">About Us</a></li>
							<li><a href="#">Events</a></li>
							<li><a href="#">Press</a></li>
						</ul>
						<ul>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Resources</a></li>
							<li><a href="#">Staff</a></li>
						</ul>
						<ul>
							<li><a href="#">Customer Service</a></li>
							<li><a href="#">Contact Us</a></li>
							<li><a href="#">Privacy</a></li>
						</ul>
						<ul>
							<li><a href="#">Terms of Use</a></li>
							<li><a href="#">Site Map</a></li>
							<li><a href="#">Website Feedback</a></li>
						</ul>
					</div>
				</div><!--footer-->
			</div><!--page-->
		</div>
		<div class="wrap-b"></div>
	</div><!--wrapper-->
</body>
</html>

						
                

#wrapper{
	width:988px;
	margin:0 auto;
	padding:6px 0 10px;
}
.wrap-t{
	background: url(../images/bg-wrapper-t.png) no-repeat;
	height:17px;
	overflow:hidden;
}
.wrap-b{
	background: url(../images/bg-wrapper-b.png) no-repeat;
	height:5px;
	overflow:hidden;
}
.wrap-c{
	background: url(../images/bg-wrapper.png) repeat-y;
	width:988px;
}
.wrap-c:after{
	content:"";
	display:block;
	clear:both;
}
.page{
	float:left;
	position:relative;
	width:980px;
	padding:0 4px;
	margin:-4px 0 0;
}
#header{
	background: url(../images/bg-header.gif) repeat-x 0 4px;
	height:156px;
	padding:0 13px 6px 0;
	font-size:12px;
}
.container{
	overflow:hidden;
}
.lang-list{
	float:right;
	margin:0 -8px 0 0;
	padding:0 0 30px;
	list-style:none;
	line-height:14px;
}
.lang-list li{
	float:left;
	background: url(../images/sep01.gif) no-repeat 100% 50%;
	color:#0075d1;
	padding:0 9px 0 8px;
}
.lang-list li:first-child{
	background:none;
}
.lang-list li a{
	color:#767676;
}
.logo{
	margin:0 0 3px 33px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(../images/logo.gif) no-repeat;
	width:234px;
	height:36px;
}
.logo a{
	display:block;
	height:100%;
}
.cart-form{
	line-height:18px;
	float:right;
}
.cart-form form,
.cart-form fieldset{
	border:0;
	padding:0;
	margin:0;
}
.cart-form label{
	float:left;
	padding:0 0 0 12px;
	background: url(../images/arrow01.gif) no-repeat 0 50%;
}
.cart-form .inp01{
	float:left;
	display:inline;
	background: url(../images/inp01.gif) no-repeat;
	width:37px;
	height:20px;
	margin:0 6px;
}
.cart-form .inp01 input{
	width:31px;
	height:14px;
	padding:3px;
	color:#000;
	background:none;
	border:0;
	text-align:center;
	float:left;
}
.cart-form .btn-check{
	float:left;
	background: url(../images/btn01.gif) no-repeat;
	width:66px;
	height:20px;
	text-align:center;
	color:#fff;
	border:0;
	cursor:pointer;
	padding:0 0 2px;
	letter-spacing:-1px;
}
#nav{
	margin:0;
	padding:20px 0 0;
	list-style:none;
	overflow:hidden;
	font-size:14px;
	line-height:20px;
}
#nav li{
	float:left;
	padding:0 12px 0 19px;
}