/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;
background: url(/images/slider_bg.png) no-repeat;
}
.slide_con {
width: 413px !important;
height: 311px !important;
overflow: hidden;
position: absolute;
top: 38px;
left: 45px;
}
.custom-item{
width: 413px !important;
height: 311px !important;
position: relative;
}
.slider-box{
left: 0;
overflow: hidden;
position: absolute;
top: 0;
}
.slider-box .slider-item{
border: none;
float: left;
z-index: 1;
text-align: left;
position: relative;
}
.slider-item img {
width: 413px;
height: 311px;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}
.color_w {
position: absolute;
z-index: 2;
bottom: 10px;
left: 30px;
width: 360px;
height: 58px;
oveflow: hidden;
color: #fff;
text-align: right;
}
.color_b {
position: absolute;
z-index: 2;
bottom: 10px;
left: 30px;
width: 360px;
height: 58px;
oveflow: hidden;
color: #191817;
}
.slider-item h3 {
font-size:24px;
font-weight: normal;
}
.mes_slide {
}
.slider-nav,
.slider-control {
bottom: 10px;
overflow: hidden;
padding: 7px 10px;
position: absolute;
z-index: 10;
}
.slider-nav {
right: 10px;
}
.slider-nav a:link, .slider-nav a:visited, .slider-nav a:active {
float: left;
display: block;
margin: 0 5px;
outline: none;
width: 8px;
height: 8px;
}
.slider-nav a:hover{}
.slider-nav a.slider-nav-focus{}
.slider-control {
left: 10px;
}
.slider-control a:link, .slider-control a:visited, .slider-control a:active {
}
.slider-control a:hover {
}
.slider-play, .slider-stop {
display: block;
float: left;
margin: 0 5px;
outline: none;
}
.slider-play {
width: 0;
height: 0;
}
.slider-stop {
height: 8px;
width: 7px;
}
.slider-arrow {
display:block !important;
outline: none;
position: absolute;
z-index: 10;
}
.slider-prev, .slider-next {
height: 53px;
top: 45%;
width: 53px;
}
.slider-prev{
background: url(/images/slider_arrow.png) left top no-repeat;
left: -105px;
}
.slider-next{
background: url(/images/slider_arrow.png) right top no-repeat;
right: -105px;
}
.slider-up, .slider-down {
}
.slider-up {
}
.slider-down {
}
.slide_info {
width: 615px;
margin: 0 auto;
font-style: italic;
color: #777777;
line-height: 19px;
position: relative;
margin: 50px 0 40px 0;
}
#mn3 a {
font-size:12px !important;
}
#header #second_line #menu ul li:hover .umn-ml {
background:url(/images/menu_c.png) repeat;
}
#header #second_line #menu ul li:hover .umn-mc {
background:url(/images/menu_l.png) no-repeat left top;
}
#header #second_line #menu ul li:hover .umn-mr {
background:url(/images/menu_r.png) no-repeat right top;

/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;
background: url(/images/slider_bg.png) no-repeat;
}

<div id="slider1" class="slider"><div class="slide_con">
  <div class="slider-box">

  <div class="slider-item custom-item">
  <img src="/images/slide1.jpg" alt="" />
  <div class="color_w">
  <h3>Web Developmet</h3>
  <span class="mes_slide">Lorem ipsum dolor sit amet, consectetur adipiscing eli</span>
  </div>
  </div>

  <div class="slider-item custom-item">
  <img src="/images/slide2.jpg" alt="" />
  </div>

  <div class="slider-item custom-item">
  <img src="/images/slide3.jpg" alt="" />
  <div class="color_w">
  <h3>Communication</h3>
  <span class="mes_slide">Lorem ipsum dolor sit amet, consectetur adipiscing eli</span>
  </div>
  </div>
   
  </div><!--/slider-box-->
  </div>
  <a href="#" class="slider-arrow slider-prev"></a>
  <a href="#" class="slider-arrow slider-next"></a>
  </div><!--/slider-->
  <div class=""><clear></div>

  <div class="slide_info">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/>
  Nulla vitae velit consectetur leo pretium hendrerit bibendum quis ipsum. Ut nunc lectus, posuere et ornare ut, ultri
  </div>

  <div id="middle">
  <div class="wrap">
  <div id="image">
  <img src="images/image.png" />
  </div>
  <div id="description">
  <h2>A little about me</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae velit consectetur leo pretium hendrerit bibendum quis ipsum. Ut nunc lectus, posuere et ornare ut, ultricies non elit. Morbi et dolor urna, id dapibus turpis. </p>
  <p>Aenean mauris lacus, vestibulum in semper sed, porta at mauris. Morbi venenatis dolor nec lacus elementum a aliquet nisl scelerisque. Duis vel ornare tortor. Phasellus tortor mi, rutrum dapibus sollicitudin non, ullamcorper vitae erat. Vestibulum euismod condimentum volutpat. Nunc ac rhoncus massa. Suspendisse pellentesque eros velit. </p>
  </div>
  </div>
  </div><!--/middle-->

$GLOBAL_BFOOTER$
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="/js/jquery.slider.js"></script>
<script type="text/javascript">
$(function () {
  $("#slider1").slider({
  autoPlay: true,
  interval: 10000,
  speed: 305,
  width: 413,
  height: 311
  });
});
</script>
<script type="text/javascript">//]]></script>
</body>
</html>

/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;