Trubee
Design
Html
Css

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: Trubee ::</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
img, #first-half-left ul li, .startNowmid .icon1, .startNowmid .icon2, .startNowmid .icon3, .startNowmid .icon4{
    behavior:url("iepngfix.htc");
}
</style>
<script type="text/javascript" src="js/column.js"></script>
</head>

<body>

<!--Header Starts -->
      <div id="header-holder">
             <div id="header">

                     <img src="images/logo.png" alt="Trubee" title="Trubee" id="logo" />
                     <!--top navigation starts -->
                            <ul>
                                   <li><span title="Submit a Request">Submit a Request</span></li>
                                   <li><a href="#" title="Check Status">Check Status</a></li>
                                   <li><a href="#" title="How it Works">How it Works</a></li>
                            </ul>
                     <!--top navigation ends -->
              </div>
       </div>
<!--Header Ends -->

<!--Content Starts -->
      <div id="content-holder">
            <div id="content">
                 <div id="content-top">&nbsp;</div>
                      <div id="content-mid">
                           <!--first half starts -->
                                 <div id="first-half">
                                        <div id="first-half-left">
                                              <h1><span>Get matched to local prescreened</span> Computer repair experts &amp; website developers</h1>
                                              <p><span>Supported cities:</span> Portland, City 2, City3</p>
                                              <ul>
                                                   <li class="one">Tell us about your needs</li>
                                                   <li class="two">Get matched to up to two experts in your area</li>
                                                   <li class="three noborder">Tell us about your needs</li>
                                              </ul>
                                              <br class="spacer" />
                                        </div>
                                   <div id="first-half-right">
                                        <ul>
                                             <li><span>Reliable –</span> prescreened, references checked,</li>
                                             <li><span>Save time –</span> we do the work, match right skills</li>
                                             <li><span>Simple and fast –</span> submit and get contacted within 2 hrs</li>
                                             <li><span>Local sustainability –</span> your money stays in your neighborhood hrs</li>
                                        </ul>
                                   </div>
                                 <br class="spacer" />
                              </div>
                         <!--first half ends -->
                         <!--second half starts -->
                                     <div id="second-half">
                                         <div id="second-half-left">
                                              <!--Default step starts -->
                                                   <div>
                                                       <h2>

                                                           <span class="startNowleft"></span>

                                                           <span class="startNowmid"><span class="icon4">&nbsp;</span>

                                                           <span class="bigtxt">Start Now</span><br class="spacer" />
                                                           <span class="comment"></span></span><span class="startNowright"></span>
                                                           <br class="spacer" />

                                                       </h2>
                                              <!--orange div start -->
                                                   <div style="margin:40px 0 0 0;">
                                                        <span class="orangTop">&nbsp;</span>
                                                             <!-- div start -->
                                                                <div class="orang_bg">
                                                                     <!--computers div start -->
                                                                <div class="orang_bg_common float_left">
                                                            <!--inner div start -->
                                                       <div class="white_bg" id="leftpanel">
                                                               <h2 class="headText">Computers</h2>
                                                              <ul>
                                                                    <li>

                                                                           <a href="#">

                                                                                  <span class="boldtxt">Hardware</span>

                                                                                  <span class="smltxt">repair, installation, replacement</span>

                                                                           </a>

                                                                    </li>
                                                                    <li>
                                                                           <a href="#">
                                                                                  <span class="boldtxt">Virus, Malware, Popup</span>
                                                                                  <span class="smltxt">removal, prevention, parental control</span>
                                                                           </a>
                                                                    </li>

                                                                    <li>
                                                                           <a href="#">
                                                                                  <span class="boldtxt">Software and operating system</span>
                                                                                  <span class="smltxt">hangs, slow, installation</span>
                                                                           </a>
                                                                    </li>

                                                                    <li>
                                                                           <a href="#" class="other">
                                                                                  <span class="boldtxt">Data Backup and recovery</span>
                                                                                  <span class="smltxt">Hard drive crash, password recovery, backup solution</span>
                                                                           </a>
                                                                    </li>

                                                                    <li>
                                                                           <a href="#">
                                                                                  <span class="boldtxt">Networking</span>
                                                                                  <span class="smltxt">setup, troubleshooting, wireless, wiredn</span>
                                                                           </a>
                                                                    </li>

                                                                    <li class="nobotmar">
                                                                           <a href="#">
                                                                                  <span class="boldtxt">Training</span>
                                                                                  <span class="smltxt">hardware, software, email,</span>
                                                                           </a>
                                                                    </li>
                                                              </ul>
                                                        </div>
                                                    <!--inner div end -->
                                                        <span class="whiteBot"></span>
                                                             </div>
                                                                  <!--computer div end -->
                                                                  <!--Websites div start -->
                                                                        <div class="orang_bg_common float_right">
                                                                        <!--inner div start -->
                                                                              <div class="white_bg" id="rightpanel">
                                                                                   <h2 class="headText">Websites</h2>
                                                                                   <ul>
                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">Dynamic website</span>
                                                                                                  <span class="smltxt">scripting, user interface, database</span>
                                                                                              </a>
                                                                                         </li>

                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">
Frameworks</span>
                                                                                                  <span class="smltxt">
wordpress, Joomla, Mambo, Drupal</span>
                                                                                              </a>
                                                                                         </li>

                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">
</span>
                                                                                                  <span class="smltxt">
</span>
                                                                                              </a>
                                                                                         </li>

                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">
Hosting support</span>
                                                                                                  <span class="smltxt">
site setup, webmaster</span>
                                                                                              </a>
                                                                                         </li>

                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">
</span>
                                                                                                  <span class="smltxt">
</span>
                                                                                              </a>
                                                                                         </li>

                                                                                         <li>
                                                                                              <a href="#">
                                                                                                  <span class="boldtxt">
Web marketing</span>
                                                                                                  <span class="smltxt">
Search engine optimization, branding</span>
                                                                                              </a>
                                                                                            </li>

                                                                                         <li>
                                                                                     </div>
                                                                                  <!--inner div end -->
                                                                                     <span class="whiteBot"></span>
                                                                                         </div>
                                                                                             <!--Websites div end -->
                                                                                                 <br class="spacer" />
                                                                                                      </div>

                                                                                                          </div>
                                                                                                              <!--div end -->
                                                                                                            <span class="orangeBot">&nbsp;</span>
                                                                                                       <!--orange div end -->
                                                                                                   </div>
                                                                                               <!--Default step end -->
                                                                                           </div>
                                                                                                <!--right part start -->
                                                                                                    <div id="second-half-right">
                                                                                                         <h2 class="testimonials">Testimonials</h2>
                                                                                                              <!--testimonial part start -->
                                                                                                                 <div class="testBox">
                                                                                                                      <span class="testBox_top"></span>
                                                                                                                           <!--inner div start -->
                                                                                                                      <div class="testBoxInner">
                                                                                                                           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                                                                                      </div>
                                                                                                                      <!--inner div end -->
                                                                                                                 <div class="testBox_bot">
                                                                                                                      <p class="testItalicText"><span>Peter North </span>CEO, North Systems</p>
                                                                                                                 </div>
                                                                                                             </div>
                                                                                                         <div class="testBox">
                                                                                                      <span class="testBox_top"></span>
                                                                                                          <!--inner div start -->
                                                                                                              <div class="testBoxInner">
                                                                                                                  <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.<br />

                                                                                                                  </p>
                                                                                                              </div>
                                                                                                          <!--inner div end -->
                                                                                                              <div class="testBox_bot">
                                                                                                                   <p class="testItalicText"><span>lara Croft</span>Director, Movie Makers</p>
                                                                                                              </div>
                                                                                                         </div>
                                                                                                             <!--testimonial part end -->
                                                                                                                  <h2 class="tags">Tags</h2>
                                                                                                                  <p class="tagsText">
                                                                                                                  <a href="#" class="black_text">custom logo design</a>

                                                                                                                  <a href="#" class="font18">Online Branding</a>

                                                                                                                  <a href="#" class="font18"> Custom Web Design</a>

                                                                                                                  <a href="#" class="black_text">accesible web design</a>

                                                                                                                  <a href="#">Joomla theme design</a>

                                                                                                                  <a href="#">Wordpress theme design</a>

                                                                                                                  <a href="#" class="black_text">Flash design</a>

                                                                                                                  <a href="#" class="blackfont18">osCommerce theme</a>

                                                                                                                  <a href="#">layout Web 2.0 </a>
                                                                                                                  </p>

                                                                                                           </div>
                                                                                                                  <!--right part end -->
                                                                                                                      <br class="spacer" />
                                                                                                                          </div>
                                                                                                                              <!--second half ends -->
                                                                                                                              <!--news part start -->
                                                                                                                          <div id="newsPart">
                                                                                                                              <!--left part start -->
                                                                                                                              <div id="newsPartLeft">
                                                                                                                              <!--gradiant div start -->
                                                                                                                           <div class="newsLeftBg">
                                                                                                                        <h2 class="newsIcon">News, views, help and more</h2>
                                                                                                                    <ul class="newsList">
                                                                                                                        <li>
                                                                                                                            <a href="#">AT&amp;T planning on iPhone sale without contract - (3/20)</a>
                                                                                                                            <span><strong>7</strong>Jan’ 09</span>

                                                                                                                        </li>

                                                                                                                        <li>
                                                                                                                            <a href="#">Mac Mini refresh comes in with better graphics (3/3)</a>
                                                                                                                            <span><strong>8</strong>Jan’ 09</span>

                                                                                                                        </li>

                                                                                                                        <li>
                                                                                                                            <a href="#">More news on e-readers - Magazine and News readers now </a>
                                                                                                                            <span><strong>9</strong>Jan’ 09</span>

                                                                                                                        </li>

                                                                                                                        <li>
                                                                                                                            <a href="#">Mac Mini refresh comes in with better graphics (3/3)</a>
                                                                                                                            <span><strong>10</strong>Jan’ 09</span>

                                                                                                                        </li>
                                                                                                                    </ul>
                                                                                                                    <p class="newRead"><a href="#"></a></p>
                                                                                                           </div>
                                                                                                                <!--gradiant div end -->
                                                                                                                   </div>
                                                                                                                      <!--left part end -->
                                                                                                                      <!--right part start -->
                                                                                                                   <div id="newsPartRight">
                                                                                                                      <a href="#"><img src="images/tech_banner.gif" alt="" /></a>

                                                                                                                   </div>
                                                                                                                      <!--right part end -->
                                                                                                                      <br class="spacer" />
                                                                                                                   </div>
                                                                                                                      <!--news part end -->
                                                                                                                      <!--bottom part start -->
                                                                                                                         <div class="bottomPart">
                                                                                                                            <div class="bottomInner">
                                                                                                                               <!--left part start -->
                                                                                                                                  <div class="bottom_left">
                                                                                                                                      <div class="bottom_leftInner">
                                                                                                                                          <h2>Major cities we support now</h2>
                                                                                                                                          <ul>
                                                                                                                                              <li><a href="#">Portland</a></li>
                                                                                                                                          </ul>
                                                                                                                                       </div>
                                                                                                                                       <span class="bottom_left_bot"></span>
                                                                                                                                  </div>
                                                                                                                                  <!--left part end -->
                                                                                                                                  <!--mid part start -->
                                                                                                                                      <div id="city_mid">
                                                                                                                                      <h2 class="cityComming">Cities coming soon</h2>
                                                                                                                                      <ul>
                                                                                                                                          <li><a href="#">Seatle</a></li>
                                                                                                                                      </ul>
                                                                                                                                      <form method="post" action="#">
                                                                                                                                      <h2>Get notified by email</h2>
                                                                                                                                      <div>
                                                                                                                                           <input type="text" name="email" value="email" class="textbox" />
                                                                                                                                           <input type="text" name="zip" value="Zip" class="textbox" />
                                                                                                                                           <input type="submit" name="submit" value="" class="submit" />
                                                                                                                                      </div>
                                                                                                                                      </form>
                                                                                                                                  </div>
                                                                                                                              <!--mid part end -->
                                                                                                                                  <!--right part start -->
                                                                                                                                       <div id="cityright">
                                                                                                                                             <a href="#"><img src="images/hightQuality.gif" alt="" /></a>
                                                                                                                                             <p class="join"><a href="#">Join the network now</a></p>
                                                                                                                                      </div>
                                                                                                                                  <!--right part end -->
                                                                                                                                       <br class="spacer" />
                                                                                                                                            </div>
                                                                                                                                       <span class="bottom_bot">&nbsp;</span>
                                                                                                                                  </div>
                                                                                                                                       <!--bottom part end -->
                                                                                                                                  </div>
                                                                                                                                       <div id="content-bot">&nbsp;</div>
                                                                                                                                  </div>
                                                                                                                           </div>
                                                                                                                           <!--Content Ends -->
</body>
</html>

 

@charset "utf-8";
/* ==============General CSS Document Starts============== */


body{
    padding:0 0 10px 0;
    margin:0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

 

div,ul,p,h1,h2,h3,form,input {
    padding:0;
    margin:0;
}


a {
    outline:none;
}

 

ul {
    list-style:none;
}

 

.spacer {
    line-height:0;
    font-size:0;
    clear:both;
    padding:0;
    margin:0;
}
/* ==============General CSS Document Ends============== */

 

/* ==============Header CSS Document Starts============== */
#header-holder {
    background:url(../images/header-bg.jpg) repeat-x 0 0;
}

 

#header {
    position:relative;
    margin:0 auto;
    width:1001px;
    height:139px;
}

 

#logo {
    position:absolute;
    left:49px;
    top:36px;
}

 

/*top navigation starts*/
#header ul {
    position:absolute;
    top:96px;
    left:318px;
}

 

#header ul li {
    float:left;
    width:auto;
    margin:0 5px 0 0;
}

 

#header ul li a {
    background:url(../images/top-nav-bg.gif) no-repeat 0 0;
    width:172px;
    line-height:43px;
    display:block;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    background-color:inherit;
    text-decoration:none;
    text-align:center;
}

 

#header ul li a:hover {
    background:url(../images/top-nav-hov-bg.gif) no-repeat 0 0;
    color:#000;
    background-color:inherit;
}

 

#header ul li span {
    background:url(../images/top-nav-hov-bg.gif) no-repeat 0 0;
    width:172px;
    line-height:43px;
    display:block;
    font-size:16px;
    font-weight:bold;
    color:#000;
    background-color:inherit;
    text-align:center;
}
/*top navigation ends*/

/* ==============Header CSS Document Ends============== */

 

/* ==============Content CSS Document Starts============ */

#content-holder {
    background:url(../images/content-bg.jpg) repeat-x 0 0;
}

 

#content {
    margin:0 auto;
    width:1001px;
    padding:9px 0 0;
}

 

#content-top {
    background:url(../images/content-top-curve-bg.gif) no-repeat 0 0;
    height:27px;
}

 

#content-bot {
    background:url(../images/content-bot-curve-bg.gif) no-repeat 0 0;
    height:27px;
}

 

#content-mid{
    background:url(../images/content-mid-bg.gif) repeat-x 0 0 #fff;
    border-right:1px solid #a7a7a7;
    border-left:1px solid #a7a7a7;
    padding:0 10px 0 37px;
    width:952px;
    color:#464444;
}

 

/*first half starts*/

#content-mid #first-half #first-half-left {
    width:540px;
    float:left;
}

 

#first-half-left h1 {
    font:normal 24px/30px "Tahoma", Arial, Helvetica, sans-serif;
    color:#282828;
    background-color:inherit;
}

 

#first-half-left h1 span {
    font:normal 35px/30px "HelveticaNeue Cond", Arial, Helvetica, sans-serif;
    color:#FE8500;
    display:block;
    background-color:inherit;
    padding:0 0 5px;
}

 

#first-half-left p {
    font-size:18px;
    padding:5px 0 0;
    color:#282828;
    background-color:inherit;
}

 

#first-half-left p span {
    font-size:22px;
    color:#574602;
    background-color:inherit;
}

 

#first-half-left ul {
    margin:22px 0 0;
    font-family:"Tahoma", Arial, Helvetica, sans-serif;
}

 

#first-half-left ul li {
    float:left;
    padding:11px 0 0 52px;
    margin:0 9px 0 0;
    width:114px;
    color:#464444;
    background-color:inherit;
    height:48px;
    font-size:12px;
    line-height:14px;
    border-right:1px solid #CECDCD;
}

 

#first-half-left ul li.one {
    background:url(../images/icon1.png) no-repeat 0 0;
}

 

#first-half-left ul li.two {
    background:url(../images/icon2.png) no-repeat 0 0;
}

 

#first-half-left ul li.three {
    background:url(../images/icon3.png) no-repeat 0 0;
}

 

#first-half-left ul li.noltoad {
    padding:11px 9px 0 0;
}

 

#first-half-left ul li.noborder {
    border-right:none;
}

 

#content-mid #first-half #first-half-right {
    width:410px;
    float:left;
    padding:32px 0 0;
}

 

#first-half-right ul li {
    background:url(../images/arrow1.gif) no-repeat 0 3px;
    font-size:13px;
    color:#747473;
    padding:0 0 19px 17px;
    background-color:inherit;
    line-height:10px;
}

 

#first-half-right ul li span {
    font-size:14px;
    color:#000;
    background-color:inherit;
    font-weight:bold;
}
/*first half ends*/

/*second half starts*/

#second-half {
padding:31px 0 0;
}

 

#second-half-left {
width:662px;
float:left;
}

 

.startNowleft{
    background:url(../images/start_lt_bg.gif) no-repeat 0 0;
    width:33px;
    height:73px;
    display:block;
    float:left;
}

 

.startNowmid{
    background:url(../images/start_mid_bg.gif) repeat-x 0 0;
    width:auto;
    font-size:26px;
    display:block;
    float:left;
    line-height:50px;
    padding:0 0 18px;
    font-weight:normal;
    color:#fff;
    background-color:inherit;
    position:relative;
}

.startNowmid .smalltxt{
    font-size:14px;
    line-height:14px;
    padding:0;
    margin:0;
    color:#fff;
    background-color:inherit;
    position:absolute;
    top:43px;
    left:55px;
    width:auto;
}

.startNowmid .bigtxt{
    font-size:26px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
     width:auto;
    display:block;
    float:left;
    padding:7px 0 0;

}

.startNowmid .icon1{
    background:url(../images/icon_home.png) no-repeat 0 0;
    padding:0 10px 0 0;
    display:block;
    float:left;
    width:43px;
    height:55px;
    margin:11px 0 0;
}

 

.startNowmid .icon2{
    background:url(../images/icon_home1.png) no-repeat 0 0;
    padding:0 10px 0 0;
    display:block;
    float:left;
    width:43px;
    height:55px;
    margin:11px 0 0;
}

.startNowmid .icon3{
    background:url(../images/icon_thank.png) no-repeat 0 0;
    padding:0 10px 0 0;
    display:block;
    float:left;
    width:49px;
    height:55px;
    margin:11px 0 0;
}

 

.startNowmid .icon4{
    background:url(../images/icon_start.png) no-repeat 0 0;
    padding:0 10px 0 0;
    display:block;
    float:left;
    width:22px;
    height:55px;
    margin:11px 0 0;
}

.startNowmid .comment{
    background:url(../images/heading_bot.gif) repeat-x 0 0;
    position:absolute;
    top:72px;
    left:4px;
    display:block;
    width:51px;
    height:32px;
}

.startNowright{
    background:url(../images/start_rt_bg.gif) no-repeat 0 0 #000;
    width:33px;
    height:73px;
    display:block;
    float:left;
    color:#010101;
}

/*-------------orang div start------*/
.orangTop{
    background:url(../images/orange_top.gif) no-repeat 0 0;
    height:9px;
    display:block;
    font-size:0;
    line-height:0;
}

.orangeBot{
    background:url(../images/orange_bot.gif) no-repeat left bottom;
    height:10px;
    display:block;
    font-size:0;
    line-height:0;
}

.orang_bg{
    background:url(../images/orange_bg.gif) repeat-x 0 0 #f6e4ac;
    padding:0 11px 0 9px;
    width:640px;
    color:#000;
    border-left:#d27d00 1px solid;
    border-right:#d27d00 1px solid;
}

.float_left{
    float:left;
    width:auto;
}


.float_right{
    width:auto;
    float:right;
}
/*----------orange sub div start----------*/
.orang_bg_common{
    width:312px;
    background:url(../images/white_top.gif) no-repeat 0 0;
    padding:12px 0 0 0;
}

.white_bg{
    background:url(../images/white_bg.gif) repeat-x left bottom #fff;
    color:#000;
    border-right:#cfcfcf 1px solid;
    border-left:#cfcfcf 1px solid;
}

.white_bg h2.headText{
    text-align:center;
    font:normal 30px/30px "HelveticaNeue MediumCond", Arial, Helvetica, sans-serif;
}

.white_bg ul{
    list-style-type:none;
    padding:18px 0 15px 0;
    margin:0 0 0 23px;
    font-size:0;
    line-height:0;
}

.white_bg ul li{
    background:url(../images/service_icon.gif) no-repeat 0 4px;
    padding:0 0 0 22px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    display:block;
    margin:0 0 15px 0;
}

.white_bg ul li a{
    text-decoration:none;
    display:block;
    padding:3px 0 7px 10px;
    width:249px;
}

.white_bg ul li a.other{
    text-decoration:none;
    display:block;
    padding:3px 0 7px 10px;
    width:249px;
}

.white_bg ul li a span.boldtxt{
    color:#574602;
    display:block;
    background-color:inherit;
    font-size:14px;
    text-align:left;
    font-weight:bold;
    margin:0;
    padding:0;
    line-height:21px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
}

.white_bg ul li a span.smltxt{
    display:block;
    font-size:12px;
    line-height:18px;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    color:#000;
    padding:0 10px 0 0;
    background-color:inherit;
}

.white_bg ul li a:hover{
    background:url(../images/start_now_link_hov.png) no-repeat 0 0;
}

.white_bg ul li a.other:hover{
    background:url(../images/start_now_link_hov1.png) no-repeat 0 0;
}

.nobotmar{
    margin-bottom:0 !important;
}

.whiteBot{
    background:url(../images/white_bot.gif) no-repeat left bottom;
    height:10px;
    display:block;
    font-size:0;
    line-height:0;
}

/*-------------------right part start-----------*/
#second-half-right {
    width:195px;
    float:left;
    padding:30px 0 0 49px;
}

 

.testimonials{
    background:url(../images/testimonials_icon.gif) no-repeat 0 0;
    padding:0 0 0 33px;
    font:normal 20px/24px "HelveticaNeue MediumCond", Arial, Helvetica, sans-serif;
    margin:0 0 12px 0;
}

.testBox{
    width:195px;
}

.testBox_top{
    background:url(../images/testi_command_box_top.gif) no-repeat 0 0;
    height:10px;
    display:block;
    font-size:0;
    line-height:0;
}


.testBoxInner{
    background:url(../images/testi_command_box_bg.gif) repeat-x 0 0 #fdfdfd;
    color:#3e3e3e;
    border-left:#7e7e7e 1px solid;
    border-right:#7e7e7e 1px solid;
    padding:0 5px 0 9px;
}

.testBoxInner p{
    font-size:11px;
    line-height:16px;
}

.testBox_bot{
    background:url(../images/testi_command_box_bot.gif) no-repeat 0 0;
    padding:15px 0 19px 0 ;
}

.testItalicText{
    font-size:11px;
    line-height:16px;
    color:#3e3e3e;
    background-color:inherit;
    font-style:italic;
    font-weight:bold;
}


.testItalicText span{
    color:#8d7411;
    background-color:inherit;
    display:block;
}

.tags{
    background:url(../images/trag_icon.gif) no-repeat 0 0;
    padding:0 0 0 32px;
    font:normal 20px/24px "HelveticaNeue MediumCond", Arial, Helvetica, sans-serif;
    margin:0 0 10px 0;
}

.tagsText{
    font-size:14px;
}

.tagsText a{
    text-decoration:none;
    color:#454343;
    background-color:inherit;
}

.tagsText a:hover{
    color:#8d7411;
    background-color:inherit;
}

.black_text{
    color:#000000;
    background-color:inherit;
}

.font18{
    font-size:18px;
}


.blackfont18{
    font-size:18px;
    color:#000;
    background-color:inherit;
}

/*second half ends*/

/*inner white div starts*/
.ineWhttopCurve {
    background:url(../images/lt_panel_top_wht_bg.gif) no-repeat 0 0;
    height:10px;
}

 

.ineWhtmidCurve {
    background:url(../images/lt_panel_mid_wht_bg.gif) repeat-x 0 0 #ededed;
    border-left:1px solid #cfcfcf;
    border-right:1px solid #cfcfcf;
    color:#000;
    padding:7px 34px 0;
    width:570px;
}

 

.ineWhtmidCurve .qustholder {
    padding:15px 0 0;
}

 

.ineWhtmidCurve form {
    font-family:Georgia, "Times New Roman", Times, serif;
}

 

.ineWhtmidCurve form h3{
    font:normal 24px/14px "HelveticaNeue MediumCond", Arial, Helvetica, sans-serif;
    padding:13px 0 33px;
}

 

.ineWhtmidCurve form label{
    display:block;
    float:left;
    width:170px;
    color:#574602;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    background-color:inherit;
    font-size:15px;
    line-height:22px;
    padding:0 0 18px;
}

 

.ineWhtmidCurve form label span.star{
    color:#ff0000;
    background-color:inherit;
    font-size:16px;
    font-weight:bold;
}

 

.ineWhtmidCurve form input{
    float:left;
    height:18px;
    padding:3px;
    width:303px;
    border:1px solid #d9d9d9;
    margin:0 0 18px;
}

 

.ineWhtmidCurve form .nodashes{
    float:right;
    height:18px;
    width:75px;
    font-size:12px;
    padding:5px 0 0;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    color:#666;
    background-color:inherit;
}

 

.ineWhtmidCurve form select.time, .ineWhtmidCurve form select.day{
    float:left;
    width:132px;
    height:24px;
    padding:0 0 0 3px;
    border:1px solid #d9d9d9;
    font-size:12px;
    margin:0 10px 18px 0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

 

.ineWhtmidCurve form select.day {
    width:77px;
}

 

.ineWhtmidCurve form div.privacy {
    width:99px;
    font:normal 16px /*"HelveticaNeue MediumCond", */Arial, Helvetica, sans-serif;
    float:left;
    padding:6px 0 0;
}

 

.ineWhtmidCurve form div.privacy a {
    color:#0851c0;
    background-color:inherit;
}

 

.ineWhtmidCurve form div.privacy a:hover {
    text-decoration:none;
}

 

.ineWhtmidCurve form a.laststep {
    background:url(../images/btn_last_step.gif) no-repeat 0 0;
    width:170px;
    height:32px;
    line-height:32px;
    text-decoration:none;
    color:#000;
    background-color:inherit;
    border:0;
    display:block;
    float:right;
    text-align:center;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:14px;
}

 

.ineWhtmidCurve form a.laststep:hover {
    color:#6a3406;
    background-color:inherit;
}

 

.ineWhtmidCurve form .left {
    width:432px;
    float:left;
    font-size:16px;
}

 

.ineWhtmidCurve form .left .question {
    float:left;
    width:18px;
    display:block;
    font-weight:bold;
}

 

.ineWhtmidCurve form .left .questxt {
    float:left;
    width:400px;
    display:block;
    color:#574602;
    background-color:inherit;
    font-weight:bold;
    padding:0 0 0 6px;
    font-style:italic;
}

 

.ineWhtmidCurve form .right {
    width:134px;
    float:left;
}

 

.ineWhtmidCurve form select {
    width:134px;
    font-size:12px;
}

 

.ineWhtbotCurve {
    background:url(../images/lt_panel_bot_wht_bg.gif) no-repeat 0 0;
    height:10px;
}

 

.thankbox {
    padding:0;
}

 

.thankbox h3 {
    color:#574602;
    background-color:inherit;
    font-size:30px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight:normal;
    padding:0 0 10px;
}

 

.thankbox .clockholder {
    margin:0 auto;
    width:103px;
}

 

.thankbox h4 {
    color:#000000;
    background-color:inherit;
    font-size:16px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight:normal;
    padding:10px 0 0;
    margin:0;
    line-height:12px;
}

 

/*inner white div ends*/

/*inner green div starts*/

.greenBoxholder {
    padding:25px 0 0;
    width:569px;
}

 

.greenBoxtop {
    background:url(../images/lt_panel_top_grn_bg.gif) no-repeat 0 0;
    height:9px;
}

 

.greenBoxmid {
    background:url(../images/lt_panel_mid_grn_bg.gif) repeat-x 0 0 #e9f2cb;
    border-left:1px solid #bce08a;
    border-right:1px solid #bce08a;
    padding:0 11px;
    color:#000;
}

 

.greenBoxmid .midtextholder {
    width:490px;
    margin:0 auto;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    text-align:center;
}

 

.greenBoxmid .midtextholder p {
    font-size:14px;
    color:#000;
    background-color:inherit;
    line-height:18px;
    padding:0 0 5px;
    text-align:left;
}

 

.greenBoxmid .midtextholder p.big, .greenBoxmid .midtextholder p.small {
    font-size:16px;
    color:#000;
    background-color:inherit;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    padding:5px 0 0;
}

 

.greenBoxmid .midtextholder p.small {
    font-size:14px;
    line-height:16px;
    padding:0;
}

 

.greenBoxmid .midtextholder ul {
    padding:17px 0;
    text-align:left;
}

 

.greenBoxmid .midtextholder ul li {
    font-size:16px;
    color:#000;
    background-color:inherit;
    padding:0 0 4px;
}

 

.truebeeholder {
    width:75px;
    float:left;
}

 

.arrowholder {
    width:330px;
    float:left;
    text-align:center;
}

 

.youwholder {
    width:83px;
    float:left;
}

 

a.bottomlink {
    display:block;
    width:128px;
    color:#000;
    background-color:inherit;
    font-size:14px;
    text-decoration:none;
    margin:0 auto 10px;
}

 

a.bottomlink span.left {
    background:url(../images/bot-btn-lt.gif) no-repeat 0 0;
    width:14px;
    height:25px;
    float:left;
}

 

a.bottomlink span.right {
    background:url(../images/bot-btn-rt.gif) no-repeat 0 0;
    width:14px;
    height:25px;
    float:left;
}

 

a.bottomlink span.middle {
    background:url(../images/bot-btn-mid.gif) repeat-x 0 0;
    width:99px;
    line-height:25px;
    height:25px;
    float:left;
}

 

a.bottomlink:hover {
    color:#6a3406;
    background-color:inherit;
}

 

.notsatisfied {
    width:170px;
    margin:0 auto;
}

 

.notsatisfied p {
    font-weight:bold;
    text-align:center !important;
    font-size:12px !important;
}

 

.notsatisfied ul {
    width:185px;
}

 

.notsatisfied ul li {
    float:left;
    width:auto;
    padding:0 9px 2px !important;
    border-right:1px solid #000;
    font-size:11px !important;
    line-height:11px;
}

 

.notsatisfied ul li.noborder {
    border-right:none;
}

 

.notsatisfied ul li a {
    color:#467dd0;
    background-color:inherit;
    line-height:12px;
}

 

.notsatisfied ul li a:hover {
    text-decoration:none;
}

 

.greenBoxmid textarea {
    width:542px;
    border:1px solid #77805c;
    overflow:hidden;
    height:105px;
    font-size:13px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

 

.greenBoxbot {
    background:url(../images/lt_panel_bot_grn_bg.gif) no-repeat 0 0;
    height:9px;
}

 

.submitGoholder {
    margin:0 auto;
    width:120px;
    border:0;
}

 

input.submitGo {
    background:url(../images/submit_done.gif) no-repeat 0 0;
    width:102px !important;
    height:28px !important;
    margin:5px 0 0 !important;
    border:0 !important;
    font-size:16px;
    font-weight:normal;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    cursor:pointer;

}
/*inner green div ends*/

/*--------------news part start----------------*/
#newsPart{
    width:952px;
    padding:35px 0 0 0;
}

/*----------news part left part start-----------------*/
#newsPartLeft{
    width:556px;
    float:left;
    background:url(../images/news_top.gif) no-repeat 0 0;
    padding:10px 0 0 0;
}


.newsLeftBg{
    background:url(../images/news_left_bg.gif) repeat-x 0 0 #fff;
    color:#0a0809;
    padding:0 5px 0 14px;
}

.newsIcon{
    background:url(../images/news_icon.gif) no-repeat 0 4px;
    padding:0 0 0 27px;
    font:normal 24px/24px "HelveticaNeue MediumCond", Arial, Helvetica, sans-serif;
    margin:0 0 7px 0;
}

.newsLeftBg ul.newsList{
    list-style-type:none;
    padding:0;
    font-size:0;
    line-height:0;
    margin:0 0 0 4px;
}


.newsLeftBg ul.newsList li{
    height:30px;
    background:url(../images/dot_line.gif) repeat-x left bottom;
    width:516px;
    display:block;
    padding:0 13px 0 5px;
    margin:0 0 2px 0;
}

.newsLeftBg ul.newsList li a{
    float:left;
    width:auto;
    background:url(../images/news_arrow.gif) no-repeat 0 9px;
    padding:0 0 0 18px;
    font:normal 16px/25px Tahoma, Arial, Helvetica, sans-serif !important;
    color:#5f5f5f;
    background-color:inherit;
    height:25px;
}

.newsLeftBg ul.newsList li a:hover{
    text-decoration:none;
}


.newsLeftBg ul.newsList li span{
    float:right;
    color:#8d7411;
    line-height:30px;
    font-size:12px;
    background-color:inherit;
    text-align:right;
    width:auto;
}


.newsLeftBg ul.newsList li span strong{
    font-size:14px;
}


.newRead{
    padding:13px 0 0 438px;
}

.newRead a{
    background:url(../images/read_more.gif) no-repeat 0 0;
    width:92px;
    height:21px;
    display:block;
    text-decoration:none;
    font-size:0;
    text-indent:-22222px;
}

.newRead a:hover{
    background:url(../images/read_more_h.gif) no-repeat 0 0;
}
/*----------news part left part start-----------------*/
#newsPartRight{
    width:383px;
    float:right;
}


#newsPartRight img{
    border:none;
}

/*---------------bottom part start----------*/

.bottomPart{
    background:url(../images/bottom_top.gif) no-repeat 0 0 #e3e3e3;
    padding:27px 0 0 0;
    width:924px;
    margin:27px auto 0;
    color:#000;
}

.bottom_bot{
    background:url(../images/bottom_bot.gif) no-repeat 0 0;
    height:27px;
    font-size:0;
    line-height:0;
    display:block;
    width:924px;
}

.bottomInner{
    width:876px;
    margin:0 auto;
}

/*--------------left part start----------*/
.bottom_left{
    width:200px;
    float:left;
    background:url(../images/city_protal_top.gif) no-repeat 0 0;
    padding:13px 0 0 0;
    margin:0 23px 0 0;
}

.bottom_left_bot{
    background:url(../images/city_protal_bot.gif) no-repeat left bottom;
    height:13px;
    display:block;
    font-size:0;
    line-height:0;
}

.bottom_leftInner{
    background:url(../images/city_protal_inner_bg.gif) repeat-x 0 0 #e5e5e5;
    color:#5f5f5f;
    border-left:#a7a6a6 1px solid;
    border-right:#a7a6a6 1px solid;
    padding:0 0 0 12px;
}

.bottom_leftInner h2{
    font:normal 14px/16px Tahoma, Arial, Helvetica, sans-serif !important;
    margin:0 0 5px 0;
}

.bottom_leftInner ul{
    list-style-type:none;
    padding:0 0 57px 10px;
}

.bottom_leftInner ul li{
    background:url(../images/city_arrow.gif) no-repeat 0 8px;
    padding:0 0 0 18px;
}


.bottom_leftInner ul li a{
    color:#000000;
    background-color:inherit;
    font:normal 12px/16px Tahoma, Arial, Helvetica, sans-serif !important;
}

.bottom_leftInner ul li a:hover{
    text-decoration:none;
}


/*--------------mid part start---------*/

#city_mid{
    background:url(../images/city_comming_bg.gif) no-repeat 0 0;
    width:378px;
    height:113px;
    float:left;
    padding:12px 12px 0 28px;
}

#city_mid h2.cityComming{
    color:#8c7662;
    background-color:inherit;
    font:normal 18px/18px Tahoma, Arial, Helvetica, sans-serif !important;
}

 

#city_mid ul{
    list-style-type:none;
    padding:0 0 0 10px;
}

#city_mid ul li{
    background:url(../images/city_arrow1.gif) no-repeat 0 10px;
    padding:0 0 0 18px;
}


#city_mid ul li a{
    color:#514030 !important;
    background-color:inherit;
    font-size:14px !important;
    line-height:16px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important;
}

#city_mid ul li a:hover{
    text-decoration:none;
}

#city_mid form{
    padding:0 0 0 130px;
    width:248px;
    margin:0;
}


#city_mid form h2{
    font-size:13px;
    color:#555554;
    background-color:inherit;
    line-height:20px;
    margin:0 0 5px 0;
}

#city_mid form div{
    height:24px;
    width:244px;
}


#city_mid form div input.textbox{
    width:78px;
    border:#6e6b6b 1px solid;
    height:20px;
    float:left;
    margin:0 3px 0 0;
    padding:0 0 0 7px;
}

#city_mid form div input.submit{
    background:url(../images/submit.gif) no-repeat 0 0;
    width:54px;
    height:24px;
    border:none;
    cursor:pointer;
    float:right;
}

/*----------------right part start---------*/
#cityright{
    width:190px;
    float:right;
    background:url(../images/hight_quality_bg.gif) no-repeat 0 0;
    height:93px;
    padding:32px 12px 0 10px;
}

#cityright img{
    border:none;
    display:block;
    font-size:0;
    margin:0 0 8px 0;
}


.join{
    display:block;
    text-align:center;
}

.join a{
    color:#0851c0;
    background-color:inherit;
    font:normal 14px/16px "Trebuchet MS", Arial, Helvetica, sans-serif !important;
}

.join a:hover{
    text-decoration:none;
}
/* ==============Content CSS Document Ends============== */

/* ==============Footer CSS Document Starts============== */
#footer {
    margin:13px auto 0;
    width:1001px;
    background:#EAE8E8;
    color:#555554;
    padding:15px 0;
}


/*footer navigation starts*/
#footer ul {
    margin:0 auto;
    width:543px;
}

 

#footer ul li {
    float:left;
    width:auto;
    padding:0 18px;
}

 

#footer ul li a {
    font-size:12px;
    text-decoration:none;
    background:#EAE8E8;
    color:#555554;
}

 

#footer ul li a:hover {
    text-decoration:underline;
}
/*footer navigation ends*/
/* ==============Footer CSS Document Ends============== */