<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<meta name="author" content="phoeniixx" />
<meta name="viewport" content="user-scalable = yes"/>
<title>Sentra</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]-->
</head>
<body>
<div class="wrapper">
    <header>
        <div class="header-content">
            <div class="hleft">
                <h1 class="site-title"><a href="#">Sentra</a></h1>
            </div><!--hleft-->
            <div class="hright">
                <div class="login-box">
                    <ul>
                        <li class="member-login"><a href="javascript:void(0)"><span class="icon">icon</span>Member sign in</a></li>
                        <li class="join"><a href="javascript:void(0)"><span class="icon">icon</span>Join Sentra</a></li>
                    </ul>
                </div><!--login-box-->
            </div><!--hright-->    
        </div><!--header-content-->
    </header><!--header-->
    <div class="content-area">
        <div class="content">
            <div class="content-left">
                <nav class="navigation">
                    <ul>
                        <li><a href="javascript:void(0)"><span class="icon">icon</span>Home</a></li>
                        <li class="current"><a href="javascript:void(0)"><span class="icon">icon</span>Services</a></li>
                        <li><a href="javascript:void(0)"><span class="icon">icon</span>Publications</a></li>
                        <li><a href="javascript:void(0)"><span class="icon">icon</span>Career</a></li>
                        <li><a href="javascript:void(0)"><span class="icon">icon</span>About</a></li>
                        <li><a href="javascript:void(0)"><span class="icon">icon</span>Blog</a></li>
                    </ul>
                </nav>
            </div><!---content-left-->
            <div class="content-right">
                    <div class="circle-content">
                        <div class="entry">
                            <h2>Optics Design Engineer</h2>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
 inventore veritatis et quasi </p>
                        </div><!--entry-->
                    </div><!--circle-content-->
                    <nav class="tabnavi">
                        <ul>
                            <li><a href="javascript:void(0)"><span>hw</span></a></li>
                            <li class="current"><a href="javascript:void(0)"><span>od</span></a></li>
                            <li><a href="javascript:void(0)"><span>rf</span></a></li>
                            <li><a href="javascript:void(0)"><span>pwb</span></a></li>
                        </ul>
                    </nav>  
            </div><!--content-right-->
        </div><!--content-->
    </div><!--content-area-->
    <footer>
        <div class="footer-content">
            <div class="contact-detail">
                <p>SENTRAAB <br />Prelatgatan 8, 216 22 Limhamn</p>
                <p>info@sentra.se<br />Tel: 0760-195392 or 0706-416018</p>
            </div>
            <div class="copyright">Copyright &copy; 2012 sentra.se </div>
        </div><!--footer-content-->
    </footer><!--footer-->
</div><!--wrapper-->
</body>
</html>
        

*{margin:0; padding:0;}
body{ background: url(images/bodybg.jpg) repeat-x top center #f5f5f5; font-size:12px; color:#484848; font-family: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-------------------*/
.wrapper{}
header{width:100%; height:75px; float: left; background: url(images/headerbg.png) repeat-x;}
.header-content{width:990px; margin: 0 auto;}
.hleft{float: left; padding-left: 5px;}
.hleft .site-title{ background: url(images/site-titlebg.png); width:279px; height:51px; padding: 8px 0 0 11px ; margin-top: 15px;}
.hleft .site-title a{background: url(images/logo.png); color:#fff; width:224px; height:46px; display: block; text-indent: -9999px;}
.hright{float: right; padding-right: 24px;}
.login-box{background: url(images/sprite.png) no-repeat 0 -289px; width:201px; height:26px;}
.login-box ul{list-style: none; margin-left: 7px; padding-top: 3px;}
.login-box ul li{list-style: none; display: inline-block; font-size:11px;}
.login-box ul li a{color:#fff; word-spacing:-1px;}
.login-box ul li.member-login{ padding-right:20px;}
.login-box ul li.member-login .icon{ background: url(images/sprite.png) no-repeat -125px -99px; text-indent: -9999px; display: inline-block; width:15px; height:18px; vertical-align: middle; margin-right: 2px;}
.login-box ul li.join .icon{ background: url(images/sprite.png) no-repeat -148px -99px; text-indent: -9999px; display: inline-block; width:15px; height:18px; vertical-align: middle; margin-right: 8px;}
/*--------------------content-------------------*/
.content-area{width:100%; float: left;padding-bottom: 41px;}
.content{width:990px; margin: 0 auto; }
.content-left{float: left;}
.navigation ul{list-style: none; margin: 41px 0 0 21px;}
.navigation ul li{list-style: none;font-family: 'bebas_neueregular'; font-size:18px; text-transform: uppercase; margin-bottom: 7px;}
.navigation ul li .icon{background: url(images/sprite.png) no-repeat 0 0; width:53px; height:42px; display: inline-block; text-indent: -9999px; vertical-align: middle; margin-right: 4px;}
.navigation ul li a{color:#434343; letter-spacing: 1px;}
.navigation ul li a:hover .icon,.navigation ul li.current .icon{ background-position: -56px -50px;}
.navigation ul li.current a, .navigation ul li a:hover{color:#629900; text-decoration: none;}
.navigation ul li .icon{background-position: 0 -1px;}
.navigation ul li + li .icon{background-position: 0 -50px;}
.navigation ul li + li +li .icon{background-position: 0 -98px;}
.navigation ul li + li +li + li .icon{background-position: 0 -148px;}
.navigation ul li + li +li + li +li .icon{background-position: 0 -197px;}
.navigation ul li + li +li + li +li +li .icon{background-position: 0 -246px;}
.navigation ul li a:hover .icon{background-position: -56px -1px;}
.navigation ul li + li a:hover .icon{background-position: -56px -50px;}
.navigation ul li + li +li a:hover .icon{background-position: -56px -98px;}
.navigation ul li + li +li + li a:hover .icon{background-position: -56px -148px;}
.navigation ul li + li +li + li +li a:hover .icon{background-position: -56px -197px;}
.navigation ul li + li +li + li +li +li a:hover .icon{background-position: -56px -246px;}
.content-right{float: left;}
.circle-content{ background: url(images/bulb-bg.png) no-repeat; width: 628px; height:426px; float: left; margin: -22px 0 0 55px;}
.circle-content .entry{width:310px; height:94px; margin: 296px auto 0 auto; text-align: center;font-family: 'istok_webbold'; font-size: 10px; color: #2e2c2c;}
.circle-content .entry h2{font-family: 'nixie_oneregular'; font-size:20px; text-transform: uppercase; word-spacing: -2px; color:#595756; margin-bottom: 3px;}
.circle-content .entry p{padding:0 29px;line-height: 12px;}
.tabnavi{float: left;}
.tabnavi ul{list-style: none; margin: 89px 0 0 66px;}
.tabnavi ul li{list-style: none; font-size:20px; text-transform: uppercase;font-family: 'bebas_neueregular'; margin-bottom: 8px;}
.tabnavi ul li a{background: url(images/sprite.png) no-repeat -112px -1px; width:53px; height:41px; display: block; color:#fff; }
.tabnavi ul li a span{ width:41px; height:41px; float: right; text-align: center; line-height: 44px; letter-spacing: 2px; text-indent:-1px;}
.tabnavi ul li a:hover,.tabnavi ul li.current a{ background-position: -112px -50px;}
/*-------------------footer--------------------*/
footer{width:100%; float: left; height:48px; background: #3a3a3a;}
.footer-content{width:990px; margin: 0 auto; font-size:11px; color:#fff;}
.contact-detail{ float: left; padding: 11px 0 0 27px; line-height: 12px;}
.contact-detail p{display: inline-block; margin-right: 14px; word-spacing:-1px;}
.copyright{float: right;line-height: 44px; padding-right:25px; word-spacing:-2px;}