/* 
    Document   : style
    Created on : May 10, 2010, 10:13:39 AM
    Author     : Khanhbd
    Description:
        Purpose of the stylesheet follows.
*/

/** global styles **/
body {
    font: 13px/16px Verdana, Arial, Helvetica, sans-serif;
    color: #AAA;
    background-color: #444444;
    margin-top: 20px;
}
#page-wrapper { 
    position:relative;
    width:990px;
    text-align:left;
    background-color: #444444;;
    /*border: solid 12px #FFFFFF;*/
    margin: 0 auto;

}
a, a:link, a:visited {
    color: #338f21;
    text-decoration: none;
}
a:hover, a:focus {
    color: #6191C5;
    text-decoration: underline;
}
a:active, a.active {
    color: #fff;
}
h1.title, h1.title a, h1.title a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #6191C5;
    font-size: 200%;
    margin:0;
    line-height:normal;
}
h1, h1 a, h1 a:hover {
    font: 20px/20px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    margin: 0;
}
h2, h3 {
    font: 18px/18px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    margin: 2px 0 0 0;
    padding: 2px 5px;
    border: dashed 1px #FFFFFF;
}
h2 a, h2 a:hover, .block h3, .block h3 a {
    font: 18px/22px Arial, Helvetica, sans-serif;
    color: #FFFFFF !important;
    margin: 0;
    padding: 0;
}
#sidebar-left-region h2,
#sidebar-left-region h3,
#sidebar-right-region h2,
#sidebar-right-region h3 {
    font: 16px/16px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    margin: 0;
    padding: 20px 0 0 0;
    border: none;
}
h4, h5, h6 {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
/** header styles **/
#header-wrapper {
    position: relative;
    display: block;
    height: 60px;
    background-color: #444444;
}
#header-region {
    /*clear: both;*/
}
#logo {
    float: left;
    width: 224px;
    margin: 0 10px;
    /*padding: 8px 12px;
    boder: 10px solid #FFFFFF;
    background-color: #6699CC;*/
}
#primary-links {
    clear:right;
    text-align: right;
    font: 14px Verdana, Arial;
    padding-top: 35px;
}
#primary-links ul {
    padding:0;
    margin:0;
    list-style:none;
    float: right;
}
#primary-links ul .last{
    border:0;
}
#primary-links ul li {
    display:inline;
    float: right;
    border-left: 1px solid #ababab;
    margin: 0px;
    padding: 0px;

}
#primary-links ul li a{
    padding: 10px 20px;
    color: #7b7b7b;
    text-decoration: none;

}
 #primary-links a.active
 {
     color: #ffffff;
}
#primary-links ul li a.active{

    text-decoration: none;
    color: #ffffff;

}
#primary-links ul li a:hover{
    color: #fff;
    text-decoration: none;
    /*background:  url(images/bg-menu-hover-item.png) repeat-x ;*/
}
#primary-links ul li a.active:hover{
    color: #ffffff;
    text-decoration: none;
    /*background:  url(images/bg-menu-hover-item.png) repeat-x ;*/
}

/** content area styles **/
#main-wrapper{
    position: relative;
    width:auto;
    height: 100%;
    padding:0 0 0px 0;
    margin: 0px 8px 0 0;
    overflow: hidden;
    
}

.content-title{
    color: #6f6f6f;
}
.no-sidebars #content {
    padding: 10px 10px 5px 0px;
    position: relative;
    text-align: justify;
}
.sidebar-left #content {
    width: 780px;
    padding: 10px 0 5px 0px;
    position: relative;
    float:left;
    text-align: justify;
}
.sidebar-right #content {
    width: 850px;
    padding:10px 0px 5px 0px;
    position: relative;
    float:left;
    text-align: justify;

}
.two-sidebars #content {
    width: 650px;
    padding:0px 10px 5px 0px;
    position: relative;
    float:left;
    text-align: justify;
}
/** sidebar styles **/
#sidebar-left-region{
    position:relative;
    float:left;
    width:150px;
    padding: 0 0 0 10px;

}

#sidebar-right-region{
 
    position:relative;
    float:right;
    width:110px;
    padding: 0 10px 0 0;
  
}
/** footer styles **/
#footer-region {
    position:relative;
    width: auto;
    margin: auto;
    clear:both;
    /*border-top:7px solid #FFFFFF;*/
}
#feed-icons {
    float:right;
    padding: 8px;
}
#footer-text-left{
    position:relative;
    display: block;
    float:left;
    color: #4c4c4c;
    margin-left: 30px;
}
#footer-text-left h1 {
    font: 13px/18px Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
    color: #4c4c4c;
}
#footer-text-left h2 {
    display: block;
    color: #4c4c4c;
    font: 11px/11px Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#footer-text-right{

    float: right;
    color: #4c4c4c;
    margin-right: 30px;
    text-align: right;
    padding-top: 50px;
}
#footer-text-right h1 {
    display: block;
    color: #4c4c4c;
    font: 11px/11px Arial, Helvetica, sans-serif;

}
#footer-text-right h2 {
    display: block;
    color: #4c4c4c;
    font: 11px/11px Arial, Helvetica, sans-serif;
    margin-top: 20px;
    margin-bottom: 5px;
}
#block-header{
    background: url(images/bg-block-header.png) no-repeat;
    font: bold 12px/16px Arial, Helvetica, sans-serif ;
    height: 22px;
    padding: 4px 0 0px 40px;
    color: #fff;
    margin-top: 0px;
    clear: both;
}
#block-header a{
    color: #fff;
    text-decoration: none;
}
#block-header a:hover{
    color: #fff;
    text-decoration: underline;
}

#block-header-left{
    background: url(images/bg-block-header-left.png) no-repeat;
    font: bold 12px/16px Arial, Helvetica, sans-serif ;
    height: 22px;
    padding: 4px 0 0px 40px;
    color: #fff;
    margin-top: 10px;
    margin-left: 30px;
}
#block-header-line{
    background: url(images/bg-block-header-line.png) repeat-x;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 0;
    height: 1px;
}
#region-header-line{
    background: url(images/bg-line-header.png) repeat-x;
    padding: 0;
    margin-top: 8px;

    border: 0;
    font-size: 0;
    height: 6px;
    width:100%;
    overflow: hidden;
}
#block-content{
    background-color: #444;
    font: 11px Arial, Helvetica, sans-serif;
    color: #696969;
    padding: 0;
    margin: 0;
    border: 0;
}
#block-right{
    position: absolute;
    top: 390px;
    left: 640px;
    width: 305px;
    /*height: 100%;
    background-color: red;*/
}

#block-right-header{
    background: url(images/bg-block-right-header.png) no-repeat;
    font: bold 15px/55px Arial, Helvetica, sans-serif ;
    height: 44px;
    color: #fff;
    text-align: center;
}
#block-right-content{
    background: transparent url(images/bg-block-right-body.png) repeat-y;
    font: 11px Arial, Helvetica, sans-serif;
    color: #696969;
    padding:10px 0px 10px 20px;
    border: 0;
    margin: 0;
}
#block-right-content-no-bg{

    font: 11px Arial, Helvetica, sans-serif;
    color: #696969;
    padding:10px 0px 10px 20px;
    border: 0;
    margin: 0;
    min-height: 383px;
}
#block-right-footer{
    background: transparent url(images/bg-block-right-footer.png) repeat-y;
    font-size: 0px;
    border: 0;
    height: 7px;
    padding: 0;
    margin: 0;
}
/** doi tac **/
#doi_tac{
    position: relative;
    display: block;
    margin: 10px 15px 10px 10px;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 10px;
}
#don_vi_thanh_vien{
    position: relative;
    display: block;
    padding: 5px 10px;
    background-color: #f5f5f5;
    overflow: hidden;
    z-index: 0;
}
#don_vi_thanh_vien #left{
    float: left;
    width: 117px;
    text-align: left;
}
#don_vi_thanh_vien #right{
    clear: right;
}

#node-content{
    color: #474747;
    margin: 10px;
}


/** Admin Style **/
/* Tabs */
ul.primary {
    border-bottom: solid 1px #18324B;
}
ul.secondary {
    border-bottom: solid 1px #18324B;
}

ul.primary li a {
    background-color:#6699CC;
}
ul.secondary li {
    margin-bottom: 5px;
}
/* Region: content */
#content-region-both table {
    width: 530px;
}
table thead {
    color: #FFFFFF;
}
table tbody tr.odd,
table tbody tr.odd td.menu-disabled{
    background: #cccccc;
    border-bottom: solid 1px #336699;
}
table tbody tr.even,
table tbody tr.even td.menu-disabled{
    background: #fff;
    border-bottom: solid 1px #336699;
}
table tr td.region{
    font-weight: normal;
    color:#FFFFFF;
    background: #6699CC;
}
ul.secondary li.active a.active {
    border-bottom: solid 1px #18324B;
}



/* Block Right */
.vertical {
	background-color:#444;
	/* required settings */
	position:relative;
	overflow:hidden;

	/* vertical scrollers have typically larger height than width */
	height: 300px;
	width: 110px;
        max-height: 300px;
        margin: 10px 0;
}

/* root element for scrollable items */
#items_right {
	position:absolute;

	/* this time we have very large space for height */
	height:20000em;
	PADDING: 0px;
	font:13px/20px Arial;
	width:110px;
}
/* the action buttons above the scrollable */
#items_right {
	padding:0px;
	margin:0px;
}


#items_right a {
    margin:5px 0;
    display: block;
	cursor:pointer;
	color:#7b7b7b;
	text-decoration:none;
}

#items_right a:hover,#items_right a.active {
	text-decoration:none;
	color:#fff;
}

/* prev, next, prevPage and nextPage buttons */
a.browse_right {
	display:block;
	width:23px;
	height:12px;
	margin:5px 0px;
	cursor:pointer;
	font-size:1px;
}

/* top */
a.top { margin-top: 50px; background: center url(images/arrow_top.png) no-repeat}
a.top:hover {  }
a.top:active {  }


/* bottom */
a.bottom { background: center url(images/arrow_bottom.png) no-repeat}
a.bottom:hover {  }
a.bottom:active  { }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;
       
}
a.browse_content {
	display:block;
	width:30px;
	height:360px;
	float:left;
	margin:50px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right	{ background: center url(images/arrow_right.png) no-repeat}
a.right:hover{  }
a.right:active {  }


/* left */
a.left{ background: center url(images/arrow_left.png) no-repeat}
a.left:hover {  }
a.left:active	{ }


/* Block Content*/
.horizontal {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 720px;
	height:400px;
        margin-top: 50px;
	/* custom decorations */
	/*border:1px solid #ccc;*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
#items_content {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

#items_content div {
	float:left;
}

/* single scrollable item */
.scrollable img {
	float:left;
	/*margin:20px 5px 20px 21px;*/
	margin: 10px;
	background-color:#fff;
	/*padding:2px;*/
	/*border:1px solid #ccc;*/

	width:702px;
	height:382px;
        /*
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
        */
}



/* this makes it possible to add next button beside scrollable */
.horizontal {
	float:left;
}


/******************************/
#content_images{
    background: url(images/bg_content.png) no-repeat;
    width: 841px;
    height: 507px;
    display: block;
    padding: 0;
    margin: 0;
    background-color: #fff;
}
#looklogo_footer{
    font: 13px Arial;
    margin-left: 20px;
}
#follow_us{
	font: 13px/20px Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    margin-top:15px;
	margin-bottom:7px;
}
#follow_us_detail{
	font: 13px/16px Arial, Helvetica, sans-serif;
    color: #7b7b7b;
    width: 113px;
    margin-top:7px;
}
#follow_us_detail a,  
#follow_us_detail a:link, 
#follow_us_detail a:visited,  
#follow_us_detail a:active{
	text-decoration:none;
	color: #7b7b7b;
}
#follow_us_detail a:hover,
#follow_us_detail a:focus{
	text-decoration:none;
	color: #fff;
}