<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<meta name="author" content="phoeniixx" />
<meta name="viewport" content="user-scalable = yes"/>
<title>Product Pay</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="fonts/stylesheet.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'/>
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
    <header>
        <div class="header-content">
            <h1 class="site-title"><a href="javascript:void(0)">Product Pay</a></h1>
            <div class="hright"> 
                <div class="login-box">
                    <div class="login_dv">
                        <ul>
                            <li><a href="javascript:void(0)">Log In</a></li>
                            <li><a href="javascript:void(0)">Sign Up</a></li>
                        </ul>
                    </div>
                </div><!--login-box-->
                <nav class="navigation">
                    <ul>
                        <li><a href="javascript:void(0)">Home</a></li>
                        <li class="current"><a href="javascript:void(0)">Vendors</a></li>
                        <li><a href="javascript:void(0)">Affiliates</a></li>
                        <li><a href="javascript:void(0)">Market Place</a></li>
                        <li><a href="javascript:void(0)">Top Offers</a></li>
                        <li><a href="javascript:void(0)">Support</a></li>
                    </ul>
                </nav><!--navigation-->
            </div><!--right-->
        </div><!--header-content-->
    </header><!--header-->    
    <div class="content-area">
        <div class="content">
            <div class="introduce">
                <h2><span class="text1">Reach Out to over</span> <span class="text2">100 Million</span> <span class="text3">globalcustomers</span></h2>
            </div>            
            <div class="widget-area">
                <div class="widget-dv">
                    <div class="widget first">
                        <div class="thumb">
                            <span class="thumb-text">Sell Online</span>
                            <img src="images/thumb1.jpg" alt="" />    
                        </div>
                        <div class="widget-entry">
                            <h3>Vendors</h3>
                            <p>Attract customers and accept payment for <br />your digital products online.<br /> Get your imagination rewarded</p>
                            <a href="javascript:void(0)" class="signup-btn">Sign up now</a>
                        </div>
                    </div><!--widget-->
                    <div class="widget second">
                        <div class="thumb">
                            <span class="thumb-text">Promote Online</span>
                            <img src="images/thumb2.png" alt="" />    
                        </div>
                        <div class="widget-entry">
                            <h3>Affiliate</h3>
                            <p>Find tens of thousands of digital products to  <br />promote online. <br /> Get your ambition rewarded</p>
                            <a href="javascript:void(0)" class="signup-btn">Sign up now</a>
                        </div>
                    </div><!--widget-->
                </div><!--widget-dv-->
            </div><!--widget-area-->
        </div>
    </div><!--content-area-->    
    <footer>
        <div class="footer-content">
            <div class="fleft">
                <ul class="footer-nav">
                    <li><a href="javascript:void(0)">Home</a></li>
                    <li class="current"><a href="javascript:void(0)">Vendors</a></li>
                    <li><a href="javascript:void(0)">Affiliates</a></li>
                    <li><a href="javascript:void(0)">Market Place</a></li>
                    <li><a href="javascript:void(0)">Top Offers</a></li>
                    <li><a href="javascript:void(0)">Support</a></li>
                </ul>
                <p class="copyright">Copyright &copy; 2013 ProductPay.com. All rights reserved. Terms &amp; Conditions</p>
            </div><!--fleft-->
            <div class="fright">
                <img src="images/payment-gateway.png" alt="" />
            </div><!--fright-->
        </div><!--footer-content-->
    </footer><!--footer-->        
</div><!--wrapper-->
</body>
</html>
        

*{margin:0; padding:0;}
body{ font-size:14px; color:#484848; font-family:Open Sans,arial, helvetica, sen-serif;}
h1{font-size:33px;}
p{ margin-bottom: 15px;}
ul{list-style: none; margin-left: 10px;}
li{list-style: disc;}
a{ text-decoration: none; outline: none;}
a:hover{ text-decoration: underline;}
/*---------------------header-------------------*/
header{width:100%; float: left; height:97px; border-bottom: 1px solid #c1c1c1;}
.header-content{width:995px; margin:0 auto}
.site-title{margin: 22px 0 0 9px ; float: left; }
.site-title a{ background: url(images/logo.png); width:324px; height:50px; display: block; text-indent: -9999px;}
.header-content .hright{float:right; padding-right:4px; width:650px;}
.login-box {}
.login_dv{ background: url(images/loginbg.png) no-repeat;width:132px; height:32px; float: right; margin-bottom: 15px; margin-right: 5px;}
.login_dv ul{list-style: none; margin: 0 0 0 6px;}
.login_dv ul li{list-style: none; float: left; background: url(images/bar.png) no-repeat left center; padding: 4px 8px 0 9px;}
.login_dv ul li a{color:#fff;}
.login_dv ul li:first-child{ background: none;}
.navigation{width:100%; float: left;}
.navigation ul {float: right;}
.navigation ul li{float: left; list-style: none; padding:0 0 4px 10px;}
.navigation ul li a{font-family: century gothic, open sans, myriad pro ; font-size:14px; text-transform: uppercase; color: #1a1a1a; display: block; line-height: 28px; padding:0 5px;}
.navigation ul li a:hover,.navigation ul li.current a{ background: url(images/menubg.jpg) no-repeat top center; text-decoration: none; color:#fff; border-radius: 5px;}
.navigation ul li:hover,.navigation ul li.current{background: url(images/nav-shadow.png) no-repeat bottom center;}
.navigation ul li + li{padding:0 0 4px 10px; word-spacing: 0;}
.navigation ul li + li + li {padding:0 0 4px 8px;word-spacing: 0;}
.navigation ul li + li + li + li {padding:0 0 4px 5px;word-spacing: 0;}
.navigation ul li + li + li + li + li{padding:0 0 4px 8px;word-spacing: 0;}
.navigation ul li + li + li + li + li + li{padding:0 0 4px 6px;word-spacing: 0;}
/*--------------------content-------------------*/
.content-area{background: url(images/contentbg.jpg) repeat-x #e2ecf4;width:100%;  float: left;border-bottom: 1px solid #c1c1c1;}
.content{background: url(images/content-bgimg.jpg) no-repeat  top center; width:995px;overflow: auto;  margin: 0 auto;}
.introduce{background: url(images/transbg.png) repeat  top center; margin: 90px 0 100px 11px; width:453px; height:155px; border-radius:5px;  text-align: center; float: left;}
.introduce h2{font-family: 'proxima_nova_rgregular'; font-weight: normal; font-size:28px; padding-top: 17px;}
.introduce h2 span{display: block;}
.introduce h2 span.text1{ text-indent:-10px;}
.introduce h2 span.text2{color:#1b356c; font-size:55px; font-weight:bold;font-family: 'proxima_nova_rgbold'; text-transform:uppercase; line-height: 54px; text-indent:-6px;}
.introduce h2 span.text3{line-height: 27px; text-indent:-10px;}
.widget-area{width:100%; height: 212px; float: left;background: url(images/widget-areabg.png) no-repeat  top center; margin-bottom: 30px;}
.widget-dv{width:953px; height:180px; padding: 10px 0; margin:6px 0 0 11px;}
.widget{color:#fff; float: left; border-left: 1px solid #1A3369;}
.widget.first{ padding: 19px 45px 0 25px;}
.widget:first-child{ border:0 none;}
.widget .thumb{ float: left; width:114px;}
.widget .thumb .thumb-text{ display: block; font-size:18px; margin: 12px 0 13px 8px;}
.widget-entry{ float: left; text-align: center; padding:0 13px;}
.widget-entry h3{ font-size:32px; line-height: 100%; text-transform: uppercase; margin: -2px 0 12px -10px;}
.widget-entry p{ padding:0 0; margin-bottom:8px; word-spacing: -2px;}
.signup-btn{background: url(images/signup-btn.png); width:140px; height:40px; display: inline-block; text-indent: -99999px; margin-left: -10px;}
.widget.second{ padding:19px 0 0 0;}
.widget.second .thumb{ float: left; width:166px;}
.widget.second .thumb .thumb-text{ margin: 12px 0 16px 24px;}
.widget.second .thumb img{ margin-left: 34px;}
.widget.second .widget-entry{ padding: 0  0 0 13px;}
.widget.second .widget-entry h3{margin: -2px 0 12px 10px;}
/*-------------------footer--------------------*/
footer{width:100%; height:200px; float: left;}
.footer-content{width:976px; padding:0 8px 0 11px ; margin: 0 auto; color:#636262;}
.fleft{float: left; padding-top: 42px;}
.fleft ul{list-style: none; margin: 0; font-family: century gothic, open sans; margin-bottom:6px;}
.fleft ul li{list-style: none; display: inline; text-transform: uppercase;}
.fleft ul li a{ color:#636262;}
.fleft ul li{padding-right:17px;}
.fleft ul li + li{padding-right:14px;}
.fleft ul li + li + li{padding-right:10px;}
.fleft ul li + li + li + li{padding-right:16px; word-spacing:-2px;}
.fleft ul li + li + li + li + li{padding-right:12px; word-spacing:1px;}
.fleft .copyright{font-family: arial, helvetica ; font-size:13px;}
.fright{float: right; padding-top: 27px;}