<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>London Fog</title>
 
<style type="text/css" media="screen">
    @import url("public/css/main.css");
</style>
 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="public/css/ie6.css" /><![endif]-->
 
<script type="text/javascript" src="./public/js/jquery.js"></script>
<script type="text/javascript" src="./public/js/main.js"></script>
 
</head>
<body>
    <!-- Page -->
    <div id="page">
 
        <!-- Header -->
        <div class="header">
        	<a href="#"><img src="public/images/logotype/logo.gif" alt="London Fog" class="logo" /></a>
        	<div class="top-block">
                <p id="tag-line">&nbsp;</p>
        	</div>
        	<div class="top-menu">
        		<p class="top-p"><a href="#"><img src="public/images/titles/my-account.gif" alt="My Account" /></a> | <a href="#"><img src="public/images/titles/shopping-bag.gif" alt="Shopping Bag" /></a></p>
        	</div>
        </div>
        <div class="main-menu-block">
        	<ul id="main-menu">
        		<li><a href="#" class="mens">MENS</a></li>
        		<li><a href="#" class="womens selected">WOMENS</a></li>
        		<li><a href="#" class="kids">KIDS</a></li>
        		<li><a href="#" class="accessories">ACCESSORIES</a></li>
        		<li><a href="#" class="luggage">LUGGAGE</a></li>
        		<li><a href="#" class="the-world">THE WORLD OF LONDON FOG</a></li>
        	</ul>
        	<form action="#">
        		<div class="search-form">
        			<input type="text" value="SEARCH" onblur="if(this.value == '') this.value = 'SEARCH'" onfocus="if(this.value == 'SEARCH') this.value = ''" class="in-text" />
        			<input type="submit" value="" class="ok-button" />
        		</div>
        	</form>
        </div>
 
        <!-- Content -->
        <div class="content">
        	<div class="left-menu">
        		<ul>
        			<li><a href="#" class="womens-l select">WOMENS</a>
        				<ul>
        					<li><a href="#" class="sel">Coats</a></li>
        					<li><a href="#">Accessories</a></li>
        				</ul>
        			</li>
        			<li><a href="#" class="mens-l">MENS</a>
        				<ul>
        					<li><a href="#">Coats</a></li>
        					<li><a href="#">Accessories</a></li>
        				</ul>
        			</li>
        			<li><a href="#" class="kids-l">KIDS</a>
        				<ul>
        					<li><a href="#">Coats</a></li>
        				</ul>
        			</li>
        			<li><a href="#" class="accessories-l">ACCESSORIES</a></li>
        			<li><a href="#" class="luggage-l">LUGGAGE</a></li>
        		</ul>
        	</div>
        	<div class="lef-block">
        		<div class="left-top right-top">
        			<p><a href="#" class="next"><img src="public/images/icons/icon-next.gif" alt="" /></a>
        			<a href="#">view all</a> &nbsp;&nbsp;&nbsp;<a href="#">1</a> &nbsp;|&nbsp; <a href="#">2</a></p>
        		</div>
        		<div class="left-top">
        			<p><a href="#">women's</a> | <a href="#">coats</a></p>
        		</div>
        		<div class="products-block">
                    <div class="right-prod">
                        <div id="preview-original-img"><img src="public/images/products/product-1-big.jpg" alt="" /></div>
                        <p id="preview-info"><a href="#">London Fog Faux Silk <br />Trench Coat</a> <br />$ 499.00</p>
        			</div>
        			<div class="left-prod">
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-1-big.jpg">
                                <img src="public/images/products/product-1.jpg" alt="" />
                                <span class="preview-more-info">London Fog Faux Silk <br />Trench Coat <br />$ 499.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Faux Silk <br />Trench Coat</a>
	        			</div>
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-2-big.jpg">
                                <img src="public/images/products/product-2.jpg" alt="" />
                                <span class="preview-more-info">London Fog Fit &amp; <br />Flare Satin Trench <br />$ 580.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Fit &amp; <br />Flare Satin Trench</a>
	        			</div>
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-3-big.jpg">
                                <img src="public/images/products/product-3.jpg" alt="" />
                                <span class="preview-more-info">London Fog Anorak <br />Trench Coat <br />$ 541.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Anorak</a>
	        			</div>
	        		</div>
	        		<div class="left-prod top-left-prod">
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-4-big.jpg">
                                <img src="public/images/products/product-4.jpg" alt="" />
                                <span class="preview-more-info">London Fog Faux Silk <br />Trench Coat <br />$ 320.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Faux Silk <br />Trench Coat</a>
	        			</div>
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-5-big.jpg">
                                <img src="public/images/products/product-5.jpg" alt="" />
                                <span class="preview-more-info">London Fog Fit &amp; <br />Flare Satin Trench<br />$ 799.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Fit &amp; <br />Flare Satin Trench</a>
	        			</div>
	        			<div class="prod-box">
                            <a class="preview-thumbnail" href="#" rel="public/images/products/product-6-big.jpg">
                                <img src="public/images/products/product-6.jpg" alt="" />
                                <span class="preview-more-info">London Fog Anorak <br />Trench Coat <br />$ 559.00</span>
                            </a>
	        				<a href="#" class="link-img">London Fog Anorak</a>
	        			</div>
        			</div>
 
        		</div>
        	</div>
        </div>
 
        <!-- Footer -->
        <div class="footer">
        	<div class="footer-form">
        		<form action="#">
        		<div>
        			<input type="text" value="Enter your email for special offers" onblur="if(this.value == '') this.value = 'Enter your email for special offers'" onfocus="if(this.value == 'Enter your email for special offers') this.value = ''" class="in-text" />
        			<input type="submit" value="" class="go-button" />
        		</div>
        	</form>
        	</div>
        	<p>1800.888.8888  |  <a href="#">Contact Us</a>  |  <a href="#">Help</a>  |  <a href="#">Track Order</a>  |  <a href="#">Shipping Rates</a>  |  <a href="#">Gift Certificates</a></p>
        	<p>&copy;2008 ICONIX BRAND GROUP, INC  |  <a href="#">Terms</a>  |  <a href="#">Privacy Policy</a></p>
        	<div class="relax"></div>
        </div>
    </div>
</body>
</html>
/*  Tags Declaration  */
BODY {
    margin: 0;
    padding: 0;
    text-align: center;
    background: url("../images/backgrounds/bg-body.gif") repeat left top;
	font-family: Arial, Helvetica, sans-serif;
}
A {text-decoration: none;}
A:HOVER {text-decoration: underline;}
IMG {border: none;}
 
.relax{
	clear: both;
	height: 0;
	line-height: 0%;
	font-size: 0;
}
 
/*  Page  */
#page {
    margin: auto;
    text-align: left;
	width: 1004px;
}
 
/*  Header  */
.header {
    float: left;
    width: 100%;
	height: 139px;
	background: url("../images/backgrounds/bg-header.jpg") no-repeat left top;
}
.header IMG.logo {
	margin: 39px 0 0 19px;
	float: left;
	display: inline;
}
.header P.top-p {
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
}
.top-menu {
	width: 200px;
	float: right;
	text-align: right;
	margin: 10px 6px 0 0;
	display: inline;
}
.top-block {
	width: 370px;
	float: left;
	display: inline;
	margin: 50px 0 0 90px;
}
.top-block P#tag-line {
	padding: 0px;
	margin: 0px;
	font-size: 32px;
	color: #FFFFFF;
	font-family: "Times New Roman", Times, serif;
}
.main-menu-block {
	width: 1003px;
	float: left;
	background: #146EAF;
	height: 26px;
	border-left: 1px solid #000000;
}
UL#main-menu {
	padding: 0px;
	margin: 0px;
	list-style: none;
	float: left;
	margin-top: 8px;
}
UL#main-menu LI {
	display: inline;
    margin-left: 37px;
	float: left;
}
UL#main-menu LI A {
	display: block;
	text-indent: -3000em;
	height: 10px;
	font-size: 1px;
	line-height: 0px;
}
UL#main-menu LI A:HOVER {background-position: 0px -10px !important;}
UL#main-menu LI A.mens {background: url("../images/menu/mens.gif") no-repeat left top; width: 36px;}
UL#main-menu LI A.womens {background: url("../images/menu/womens.gif") no-repeat left top; width: 61px;}
UL#main-menu LI A.kids {background: url("../images/menu/kids.gif") no-repeat left top; width: 27px;}
UL#main-menu LI A.accessories {background: url("../images/menu/accessories.gif") no-repeat left top; width: 86px;}
UL#main-menu LI A.luggage {background: url("../images/menu/luggage.gif") no-repeat left top; width: 63px;}
UL#main-menu LI A.the-world {background: url("../images/menu/the-world.gif") no-repeat left top; width: 200px;}
UL#main-menu LI A.womens.selected {background: url("../images/menu/womens.gif") no-repeat left bottom;}
.search-form {
	float: right;
	margin: 3px 6px 0 0;
	display: inline;
}
INPUT.in-text {
    width: 220px;
	height: 15px;
	background: #000000;
	color: #FFFFFF;
	border: none;
	font-size: 11px;
	display: block;
	padding-top: 2px;
	float: left;
	padding-left: 7px;
}
INPUT.ok-button {
	width: 27px;
	height: 18px;
	background: url("../images/buttons/ok-button.gif") no-repeat left top;
	cursor: pointer;
	margin-left: 4px;
	display: inline;
	float: left;
	border: none;
}
 
/*  Content  */
.content {
    float: left;
    width: 1002px;
	background: #FFFFFF;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}
.left-menu {
	width: 110px;
	float: left;
	display: inline;
	margin: 40px 0 0 50px;
}
.left-menu UL {
	padding: 0px;
	margin: 0px;
	list-style: none;
	width: 100%;
}
.left-menu UL LI {
	width: 100%;
	border-top: 1px dotted #000000;
	margin-top: 8px;
}
.left-menu UL LI A {
	display: block;
	text-indent: -500em;
	height: 12px;
	margin-top: 7px;
	font-size: 1px;
	line-height: 0px;
}
.left-menu UL LI A:HOVER {background-position: 0px 0px !important;}
.left-menu UL LI A.womens-l {background: url("../images/menu/womens-l.gif") no-repeat left bottom; width: 65px;}
.left-menu UL LI A.mens-l {background: url("../images/menu/mens-l.gif") no-repeat left bottom; width: 38px;}
.left-menu UL LI A.kids-l {background: url("../images/menu/kids-l.gif") no-repeat left bottom; width: 31px;}
.left-menu UL LI A.accessories-l {background: url("../images/menu/accessories-l.gif") no-repeat left bottom; width: 91px;}
.left-menu UL LI A.luggage-l {background: url("../images/menu/luggage-l.gif") no-repeat left bottom; width: 68px;}
.left-menu UL LI A.womens-l.select {background: url("../images/menu/womens-l.gif") no-repeat left top;}
.left-menu UL LI UL LI {border: none; margin-top: 0px !important;}
.left-menu UL LI UL LI A {
	font-size: 10px;
    line-height: 100%;
	margin-top: 10px !important;
	color: #231F20;
	text-indent: 0em;
	text-transform: uppercase;
	margin-left: 17px;
	padding: 0 2px 2px 2px;
    display: inline;
}
.left-menu UL LI UL LI A:HOVER,.left-menu UL LI UL LI A.sel {
	background: #0f6bad;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
.lef-block {
	width: 778px;
	float: right;
	margin-top: 16px;
	padding-bottom: 65px;
}
.left-top {
	float: left;
	width: 150px;
	margin-left: 6px;
	display: inline;
}
.left-top P {
	padding: 0px;
	margin: 0px;
	font-size: 11px;
	line-height: 11px;
	color: #231F20;
}
.left-top P A {color: #231F20;}
.left-top P A:HOVER {color: #0f6bad; text-decoration: none;}
.left-top.right-top {
	float: right;
	text-align: right;
	margin-left: 0px;
}
A.next {float: right; margin: 1px 6px 0 11px; display: inline;}
.products-block {
	width: 100%;
	float: left;
	margin-top: 12px;
}
.prod-box {
	width: 145px;
	float: left;
	display: inline;
	margin: 0 1px 0 0;
	line-height: 0px;
	font-size: 1px;
}
.prod-box A.link-img {
	font-size: 9px !important;
	color: #89A289;
	text-transform: uppercase;
	margin-left: 7px;
	display: block;
	line-height: 11px !important;
	margin-top: 4px;
}
.prod-box A.link-img:HOVER {text-decoration: none; color: #000000;}
.left-prod {
	float: left;
	width: 438px;
}
.left-prod.top-left-prod {margin-top: 24px;}
.right-prod {float: right;}
.right-prod P {
	padding: 0px;
	margin: 0px;
	text-align: center;
	font-size: 12px;
	color: #202020;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 13px;
}
.right-prod P A {color: #89A289; font-size: 11px;}
.right-prod P A:HOVER {color: #000000; text-decoration: none;}
.left-top.left-top-long {width: 270px;}
.right-prod.left-right-prod {
    float: left; margin-top: 12px;
    width: 100%;
}
.right-prod.left-right-prod IMG {float: left;}
.right-prod.left-right-prod IMG.mini {margin: 1px 1px 0 0;}
.left-prod.last-prod {
	width: 145px;
	float: right;
}
.prod-box.first-prod-box {margin-top: 13px; margin-right: 0px;}
.prod-box.second-prod-box {margin-top: 24px; margin-right: 0px;}
IMG.may {margin-left: 1px;}
.left-part {
	width: 340px;
	float: left;
}
.right-part {
	float: right;
	line-height: 0px;
	font-size: 1px;
    width: 160px;
}
.center-part {
	width: 261px;
	float: left;
	display: inline;
	margin-left: 15px;
}
.center-part P {
	padding: 0px;
	margin: 0px;
	font-size: 11px;
	color: #A79398;
}
.center-part P A {color: #A79398;}
.center-part P A:HOVER {color: #000000; text-decoration: none;}
.center-part H1 {
	padding: 0px;
	font-size: 12px;
	color: #231F20;
	line-height: 43px;
	text-transform: uppercase;
	line-height: 14px;
	margin: 7px 0 0 10px;
	padding-bottom: 18px;
}
.center-part P.with-border {
	border-top: 1px dotted #000000;
	border-bottom: 1px dotted #000000;
	display: block;
	margin-top: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 7px;
}
.center-part P.l-m {margin-left: 10px;}
.center-part IMG.add-to-bag {margin-top: -15px;}
.center-part P.price {font-size: 14px; font-weight: bold; margin: 8px 0 0 6px;}
.about-block {
	width: 235px;
	float: left;
	margin-left: 10px;
	display: inline;
}
.about-block UL {
	padding: 0px;
	margin: 0px;
	list-style: none;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-left: 7px;
}
.about-block UL LI {
	float: left;
	background: url("../images/icons/icon-list.gif") no-repeat left center;
	padding-left: 11px;
	width: 100%;
	line-height: 18px;
}
.center-part P STRONG {text-transform: uppercase; font-size: 10px;}
.center-part P SPAN {color: #4F4D4D; font-weight: bold;}
.sel-block {
	width: 100%;
	float: left;
	background: #F3F2F2;
	margin-top: 12px;
	padding-bottom: 14px;
}
.sel-content {
	width: 227px;
	float: left;
	display: inline;
	margin: 14px 0 0 14px;
}
.links-line {
	width: 100%;
	float: left;
	margin: 5px 0 0 5px;
	display: inline;
	padding-bottom: 15px;
}
.links-line IMG {
	float: left;
	margin-right: 8px;
	display: inline;
}
.links-line.size-link IMG {margin-right: 2px;}
.b-links {
	float: left;
	margin-top: 22px;
}
/*  Footer  */
.footer {
    float: left;
    width: 100%;
	margin-top: 9px;
}
.footer P {
	padding: 0px;
	margin: 0px;
	line-height: 20px;
	font-size: 10px;
	text-transform: uppercase;
	margin-left: 3px;
}
.footer P A {color: #000000;}
.footer P A:HOVER {color: #0f6bad; text-decoration: none;}
.footer-form {float: right; margin-right: 3px; display: inline;}
INPUT.go-button {
	width: 18px;
	height: 17px;
	background: url("../images/buttons/go-button.gif") no-repeat left top;
	cursor: pointer;
	margin-left: 4px;
	display: inline;
	float: left;
	border: none;
}
#preview-original-img {
    width: 340px;
    height: 342px;
    overflow: hidden;
}
SPAN.preview-more-info {
    display: none !important;
}