<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<meta name="author" content="phoeniixx" />
<meta name="viewport" content="user-scalable = yes"/>
<title>3-Web Host</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="fonts/stylesheet.css" type="text/css" rel="stylesheet" />       
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>    
<script type="text/javascript">    
    $(document).ready(function(){     
    $('.extn').click(function () {    
    $(".selectoption").slideToggle("fast");        
    return false;
    });
    
    $('.selectoption li').click(function () {    
    $(".selectoption").slideUp("fast");
    $dval = $(this).text();
    //alert($dval);
    $('.extn').text($dval);
    return false;
    });
    });
</script>
</head>
<body>
<div class="wrapper">
    <header>
        <div class="header-content">
            <h1 class="site-title"><a href="javascript:void(0)">3-web-host</a></h1>
            <form class="loginform">
                <p><input type="text" class="input_txt" value="username:" /><input type="password" class="input_txt" value="password" /><input type="submit" value="" class="lgn-btn" /></p>
                <p><span class="crt-accnt spn-link"><a href="javascript:void(0)">Create Account</a></span><span class="frgt-pass spn-link"><a href="javascript:void(0)">forget password?</a></span></p>
            </form>
        </div><!--header-content-->
    </header><!--header-->    
    <div class="content-area">
        <div class="content">
            <div class="search-domain">
                <form class="searchform">
                    <h2>Start your domain search here...</h2>
                    <div class="srchtxt-box">
                        <div class="srchtxt-spn">
                            <input type="text" value="" class="input_txt2" />
                        </div><!--srchtxt-spn-->
                        <div class="srchext-spn">
                            <span id="extn" class="extn">.com</span> 
                            <ul class="selectoption">
                                <li>.com</li>
                                <li>.net</li>
                                <li>.in</li>
                            </ul>
                        </div><!--srchext-spn-->                        
                    </div><!--srchtxt-box-->                    
                    <div class="srchbtn-box">
                        <div class="srchbtn-spn">
                            <input type="submit" value="" class="go-btn"  />
                        </div><!--srchbtn-spn-->                                     
                    </div><!--srchbtn-box-->                    
                </form>
            </div><!--search-domain-->
            <div class="services">
                <ul>
                    <li><a href="javascript:void(0)">Hosting</a></li>
                    <li><a href="javascript:void(0)">Domain</a></li>
                    <li><a href="javascript:void(0)">Support</a></li>
                </ul>
            </div><!--services-->
            <div class="contact-text">
                <p class="call-us">Call us now at: <cite>1-880-888-9797</cite> for your free support consultation</p>
                <ul class="follow">
                    <li>follow us:</li>
                    <li class="twitter"><a href="javascript:void(0)">Twitter</a></li>
                    <li class="facebook"><a href="javascript:void(0)">Facebook</a></li>
                    <li class="youtube"><a href="javascript:void(0)">You Tube</a></li>
                    <li class="rss"><a href="javascript:void(0)">RSS</a></li>
                </ul>
            </div><!--contact-text-->
        </div><!--content-->
    </div><!--content-area-->
    <footer>
        <div class="footer-content">
            <p class="copyright">&copy; 2010-2012 b-webhost.com </p>
            <ul class="footer-links">
                <li><a href="javascript:void(0)">Terms of Services</a></li>
                <li><a href="javascript:void(0)">Acceptable Use Policy</a></li>
                <li><a href="javascript:void(0)">Privacy Policy</a></li>
            </ul>
        </div><!--footer-content-->    
    </footer><!--footer-->        
</div><!--wrapper-->
</body>
</html>
        

*{margin:0; padding:0;}
body{ font-size:12px; color:#484848; font-family:arial, helvetica, sen-serif; background: #E9E9E9;}
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-------------------*/
.wrapper{width:100%; float: left;}
header{background: url(images/headerbg.jpg) repeat-x; width:100%; height:128px; float: left; border-bottom:2px solid #202123;}
.header-content{width:902px; margin: 0 auto;}
.site-title{float: left; margin: 39px 0 0 0;}
.site-title a{ background: url(images/logo.png) no-repeat; width:267px; height:46px; display: block; text-indent: -9999px;}
.loginform{background: url(images/sprite.png) no-repeat; width:399px; height:50px; padding:15px 0 0 21px; float: right; margin-right: 12px;}
.loginform p{margin: 0;}
.input_txt{background: url(images/sprite.png) -1px -74px no-repeat;width:109px; height:23px; padding: 0 15px; line-height: 23px; border: 0 none; color:#a7a7a7;vertical-align: middle; font-size: 11px;}
.input_txt:focus{color:#f6f6f6;}
input[type="text"].input_txt{margin-right: 7px;}
input[type="password"].input_txt{margin-right: 10px;}
.lgn-btn{background: url(images/sprite.png) -143px -74px no-repeat;width:80px; height:24px; border: 0 none; cursor: pointer; vertical-align: middle;}
form .spn-link{display: inline-block; width:139px; text-align: right; margin-right: 7px; color:#7f7f7f; font-size: 10px;}
.spn-link a{color:#7f7f7f;}
/*--------------------content-------------------*/
.content-area{width:100%; float: left;}
.content{width:884px; height: 539px; padding:0 9px; margin: 0 auto;background: url(images/map.jpg) top center no-repeat;}
.search-domain{width:100%; float: left; margin-bottom: 59px;}
.searchform{ margin:72px 0 0 103px;}
.searchform h2{background: url(images/start-domain-text.png) no-repeat 14px 0;font-family: 'fanwooditalic',serif;color:#747474; font-size: 29px; line-height: 33px; text-shadow: 1px 1px 0 #fff; font-weight: 400; padding-left: 14px; text-indent: -9999px;}
.srchtxt-box{width:548px; height:50px; padding:15px 0 0 15px; float: left; background: url(images/sprite.png) no-repeat 0 -101px; margin-right: 9px;}
.srchtxt-spn{width:402px; height:22px;padding:7px 10px 6px 10px;background: url(images/sprite.png) no-repeat 0 -168px; display: inline-block;vertical-align: middle; margin-right: 6px;}
.srchext-spn{width:82px; height:22px;padding: 7px 8px 6px 13px; background: url(images/sprite.png) no-repeat -432px -168px; display: inline-block; vertical-align: middle; position: relative;}
.input_txt2{width:402px; height:22px;  border: 0 none;font-size: 22px;font-family: 'fanwooditalic'; background: none; color: #484848;}
.extn { background: url("images/drop-icon.jpg") no-repeat scroll right center transparent; display: block; font-family: 'fanwooditalic';font-size: 22px; padding-right: 20px; line-height: 100%;}
.selectoption {background-color: #EEEEEE;left: 5px; list-style: none outside none; margin: 0; position: absolute; width: 93px; top: 33px; display: none;}
.selectoption li{list-style: none; font-size: 22px;font-family: 'fanwooditalic'; padding:0 5px;}
.selectoption li:hover{ background: #515151; color:#fff;}
.srchbtn-box{width:71px; height:55px; padding: 10px 0 0 10px; float: left; background: url(images/sprite.png) no-repeat -420px 0;}
.go-btn{width:62px; height:46px; border:0 none; cursor: pointer; display: block;background: url(images/sprite.png) no-repeat -502px 0;}
.services{width:100%; float: left; margin-bottom: 6px;}
.services ul{list-style: none; margin-left: 134px;}
.services ul li{list-style: none; background: url(images/bubble.png);width:162px; height: 261px; float: left; text-align: center; margin: 0; text-indent: -7px;}
.services ul li + li{margin:0 59px; text-indent: 0;}
.services ul li + li + li{margin: 0; text-indent: -4px;}
.services ul li a{list-style: none; color: #fff; font-size: 27px;font-family: 'fanwooditalic'; display: block; margin-top: 61px;}
.services ul li a:hover{text-decoration: none;}
.contact-text{width:100%; height:43px; float: left;background: url(images/contact-txtbg.png);}
.call-us{ float: left; line-height: 45px; font-size: 16px;font-family: 'crimsonsemibold_italic'; font-style:italic; padding-left: 30px; text-shadow:1px 1px 0 #E7E7E7;}
.call-us cite{font-size:18px;font-family: 'crimsonbold_italic'; margin:0 5px 0 6px;}
.follow{float: right; list-style: none; margin: 8px 16px 0 0;}
.follow li{float: left;list-style: none; line-height: 31px; font-size:16px; margin-right: 8px;font-family: 'crimsonsemibold_italic';text-shadow:1px 1px 0 #E7E7E7; word-spacing: 2px;}
.follow li a{background: url(images/sprite.png) no-repeat -227px -66px;width:31px; height:31px; display: block; text-indent: -9999px;}
.follow li.twitter a{ background-position: -227px -66px;}
.follow li.facebook a{ background-position: -266px -66px;}
.follow li.youtube a{ background-position: -304px -66px;}
.follow li.rss a{ background-position: -343px -66px;}
/*-------------------footer--------------------*/
footer{width:100%; float: left; background: url(images/headerbg.jpg) repeat-x; height:37px; border-top: 2px solid #202123; }
.footer-content{width:884px; margin: 0 auto; line-height: 37px;color:#a7a7a7;font-family: 'crimsonsemibold_italic'; font-size: 14px;}
.copyright{padding-left:6px; float: left; margin-top: -2px;}
.footer-links{list-style: none; float: right; margin: -2px 5px 0 0;}
.footer-links li{ float: left; list-style: none;color:#a7a7a7;}
.footer-links li + li{word-spacing: 1px;}
.footer-links li + li + li{ word-spacing: 0;}
.footer-links li:before{content: "|"; padding: 0 3px;}
.footer-links li + li:before{padding:0 4px;}
.footer-links li + li + li:before{padding:0 3px}
.footer-links li:first-child:before{content:"";}
.footer-links li a{color:#a7a7a7;}