#body_container
{
    width: 760px;
    margin: 0 auto;
}
/*--------Header-------*/
.top
{
    height: 4.5em;
    position: relative;
    margin: 0 auto 3px auto;
}
.top span
{
    height: 100%;
    left: 75%;
    top: 0;
    padding: 0 0 0 2%;
    position: absolute;
}
.logo
{
    height: 2.8em;
    top: 0.5em;
    position: absolute;
    left: 15px;
    padding: 0.1em 0 0.2em;
}
.top_home
{
    height: 2em;
    top: 0;
    width: 15%;
    padding: 0 1.5% 0 0;
    position: absolute;
    right: 25.5%;
}
.header_menu
{
    margin: 3px auto;
    padding: 0.8em 0 1em 20px;
    position: relative;
    background: #608FC8 url('images/bg-nav.png') no-repeat scroll 0 0;
}
.header_menu div /*rightbar*/
{
    padding: 0.8em 0 1em;
    position: absolute;
    right: 0;
    top: 0;
    width: 25%;
    background: #4B6CB5 url('images/bg-nav-side.png') no-repeat scroll right top;
    text-indent: -32767px;
}
/*-------Main Container--------*/
#main_container, #home_container
{
    min-height: 200px;
    margin: 3px auto 0 auto;
    padding: 15px;
    position: relative;
    width: 728px;
    border: 1px solid #818181;
    overflow: hidden;
}
#main_container
{
    background: transparent url('images/bg-three-column-main.png') repeat-y scroll 0 0;
}
.poster_home
{
    background: #608FC8 none repeat scroll 0 0;
    margin: 3px auto 0 auto;
    position: relative;
}
.page_title
{
    margin: 2px auto 0 auto;
    padding: 0.5em 20px 0.7em;
    position: relative;
    width: 720px;
}
/*-------main: home page-----------*/
#home_container
{
    background: transparent url('images/bg-content-side.png') repeat-y scroll right center;
}
#home_body
{
    float: left;
    width: 540px;
}
#home_body ul
{
    margin: 20px 0 0;
    padding: 0;
}
#home_body li
{
    float: left;
    width: 30%;
    margin-right:2%;
}
#home_sidebar
{
    float: right;
    width: 160px;
}
/*-------main: content page----*/
#left_sidebar
{
    float: left;
}
#right_sidebar
{
    float: right;
}
#left_sidebar, #right_sidebar
{
    width: 160px;
}
#main_body
{
    float: left;
    margin-left: 25px;
    width: 355px;
}
/*-------Footer-------------------*/
div.copyright
{
    background: #608FC8 url('images/bg-nav.png') no-repeat scroll left bottom;
    margin: 3px auto 0 auto;
    padding: 0.8em 0 1em 20px;
    position: relative;
    width: 740px;
}
div.copyright div
{
    background: #4B6CB5 url('images/bg-nav-side.png') no-repeat scroll right bottom;
    padding: 0.8em 0 1em;
    position: absolute;
    right: 0;
    top: 0;
    width: 25%;
    text-indent: -32767px;
}
div.footer_menu
{
    margin: 1em auto 0 15px;
    padding: 0.1em 0 2em;
    position: relative;
    width: 740px;
}



/* S3 Slider */
#s3slider {
   width: 500px; /* important to be same as image width */
   height: 200px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 500px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}