/* main CSS Document */
/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
	height:100%;
} 

body {
	line-height: 1;
	color: black;
	background: #feb400;
	font-family: Verdana,Arial, Helvetica, sans-serif;
}
ol, ul {list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
}

/* end reset styles */

/* clearing technique */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles ......*/

p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}
a img,img{border:none;display:block;}
a{
	text-decoration:none;
	color:#666;
}
a:hover {color:Red; text-decoration:underline;}

h1,h2,h3,h4,h5,h6{
	font-weight:bold;
}
h1{font-size:130%}/* 26px */
h2{font-size:182%}/* 24px */
h3{font-size:167%}/* 22px */
h4{font-size:152%}/* 20px */
h5{font-size:136%}/* 18px */
h6{font-size:122%}/* 16px */

body{
	height:100%;
	min-width:  780px;
	font-size: 13px; 
	text-align:center;/* for ie5.+*/
}


#outer{
	margin:auto;
	text-align: left;


}

#header, #quote{
   height:  129px;
}
#header, #quote{
   height:  129px;
}
  
#header{ 
	background: url(../images/logobg.jpg) repeat-x 0 0;
	position: relative;
	z-index: 100;
}

#logo, #logo a em{
	height:  44px;
	width:  264px;
	position: absolute;
	overflow: hidden;
	top: 20px;
	left: 15px;
	z-index: 1;
}	

#logo a em{
	cursor:pointer;
	left:0;
	top:0;
}

#quote{
	background: #0000ff  url(../images/quotebg.jpg) repeat-x 0 0;
	margin:  0 0 0 256px;
	z-index: 2;
}

#tabletop{
	height:  29px;
	width:  257px;
	background: url(../images/tabletop.jpg) no-repeat 0 0;
	position: absolute;
	bottom: 0px;
}		

#quote divider{
	height:  129px;
	width: 92px;
}

#quoteline imgspacer{
	width: 650px;
	float: left;
}

#quoteline {
	position: relative;
	color: white;
	font-weight: bold;
    width: 80%;
    margin: -100px 0 0 85px;

}

#ngaythang {
	float: right;
	top: 62px;
	right: 0px;
	position: absolute;
	color: white;
}

#main, #leftcol, #content
{ 	min-height: 500px;
	height: 73%;}

#main { 	background: url(../images/leftcolbg.jpg) repeat-y 0 0;
}


#leftcol, #mucluc, #leftColGradient{
	background: url(../images/leftcolbg.jpg) repeat-y 0 0;
	width: 217px;
	float: left;
	
}
#mucluc{
	background: #000120 url(../images/indexbg.jpg) no-repeat 0 0;
	height: 242px;
	top: 0px;
	left: 0px;
}

#indexTable{
	width: 150px;
	margin: 18px 18px 18px 22px;
	border-collapse: collapse;
}

#leftColGradient{
	background: url(../images/indexbg2.jpg) repeat-x 0 0;
	height: 116px;
	position: relative;
	top: 0px;
	left: 0px;

}
#leftColGradient img{ float:right}

#footer{
	background: url(../images/footerbg.jpg) repeat-x 0 0;
	height: 98px;
	clear: both;
}	

#copyrightText
{   font-size: 80%;
	position: relative;
	margin-top: -30px;
}

#copyright{
	background:  url(../images/footerbg2.jpg) no-repeat 0 0;
	height:  98px;
	font-size: 80%;
	color: #666;
}

#contact
{padding: 20px 0 0 30px;
}

#maincol{
	margin: 0 0 0 217px;
	padding-top: 5px;
	background: white;
	text-align:  left;
	min-height: 625px;
}
#maincol img{
	float: left;
}

#outer, #wrapper{
	min-width:  800px;
	
	
}
#multi-level {height:30px; position:absolute; z-index:999;top: 92px; left: 300px; width: 450px}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; }

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative; z-index: 100}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; z-index: 100}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:21px;}
.menu li.top a span {position:absolute;  top:0; z-index:0; font-size:10px; position:absolute; z-index: 100} /* move the link text off screen */

.menu li a span { visibility:hidden; }


/* pre-load the hover images into the lists */
.menu li.p1 {width:100px; background:url(../images/trangdau.gif) no-repeat;}
.menu li.p2 {width:100px; background:url(../images/thanhnhac.gif) no-repeat;}
.menu li.p3 {width:90px; background:url(../images/luubut.gif) no-repeat;}
.menu li.p4 {width:90px; background:url(../images/noiket.gif) no-repeat;}


/* set up the normal unhovered images in the links */
.menu li a#home {width:100px; background:url(../images/trangdau.gif) no-repeat;}
.menu li a#thanhnhac {width:90px; background:url(../images/thanhnhac.gif) no-repeat;}
.menu li a#luubut {width:90px; background:url(../images/luubut.gif) no-repeat;}
.menu li a#noiket {width:92px; background:url(../images/noiket.gif) no-repeat;}


/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#home:hover, .menu li:hover a#home,
.menu li a#thanhnhac:hover, .menu li:hover a#thanhnhac,
.menu li a#luubut:hover, .menu li:hover a#luubut,
.menu li a#noiket:hover, .menu li:hover a#noiket
{background-position:bottom left;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:0; top:20px; background: #fff; padding:0; border:1px solid #888; white-space:nowrap; width:130px; height:auto;}
.menu :hover ul.sub li   {display:block; height:20px; position:relative; float:left; width:130px; border-bottom: solid black 1px; font-size: 105%; font-weight: bold; color:#666; z-index:500}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:130px; line-height:20px; text-indent:5px; color:#666; text-decoration:none; border:1px solid #fff; border-width:0;}

.menu :hover ul.sub li a.fly {background:  url(../images/arr_blue_2.gif)  105px 7px no-repeat; }
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(../images/arr_blue_2.gif) 105px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(../images/arr_blue_2.gif) 105px 7px no-repeat; color:#fff;} 

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:130px; top: -1px; background: #fff; padding:0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto;}
 
 
 .topborder {
	font-family: Verdana;
	font-size: 102%;
	font-weight: bold;
	color: #666666;
	text-align: center;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-color: #CCCCCC;

}
.bottomborder {
	font-family: Verdana;
	font-size: 101%;
	font-weight: bold;
	color: #666666;
	text-align: center;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}


#newSongList
{	width: 48%;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	float: left;
	clear: right;
}
#newSongTitle
{	width: 99%;
	background: #f8f8f8;
	padding: 3px;
	font-weight: bold;
	font-size: 96%;
	color: #666;
	clear: right;
}


#top10
{
	width: 48%;
	float: right;
}

.index
{	
	font-weight: bold;
	color: #666;
	text-align: center;
}

.pager a:hover{color: Red; text-decoration: underline; }
.pager a:active {color:Maroon;}
.pager a:visited{color:Blue;}


/* searchbox */
div.searchbox {
	width: 120px;
	height: 18px;
	padding: 0px;
	margin-right: 20px;
	position: absolute;
	right: 0px;
	top: 92px;
	background: url(../images/searchbox_bg.png) 0 0 no-repeat; /* ie6png:crop */
}

div.searchbox:hover  {
	background: url(../images/searchbox_bg.png) 0 -18px no-repeat;
}

div.searchbox:hover input {
	color: #000000;
}

div.searchbox input:focus {
	color: #000000;
}

div.searchbox input.searchfield {
	width: 84px;
	height: 15px;
	padding: 3px 0px 0px 0px;
	border: none;
	outline: none;
	background: none;
	float: left;
	color: #646464;
	font-size: 11px;
}

div.searchbox input.search-magnifier,
div.searchbox input.search-close  {
	width: 18px;
	height: 18px;
	padding: 0px;
	border: none;
	float: left;
	cursor: pointer;
	line-height: 0px;
}

div.searchbox input.search-magnifier {
	background: url(../images/magnifier_icon.png) 0 0 no-repeat;

}

div.searchbox input.search-close {
	background: url(../images/close_icon.png) 0 0 no-repeat;
}

div.searchbox button.search-loader {
	background: url(../images/loader_icon.gif) 0 0 no-repeat;
}

#leftcol, #content
{
	position: relative;
}

#calendar
{
	margin-top: 30px;
	margin-left: 7px;
	position: relative;
}

#lichPhungVu
{
	color: maroon;
	font-weight: bold;
	font-size: 103%;
	text-align: center;
	margin-bottom: 5px;
}

.hideBtn {position:absolute;left: -999px;}

div.default div.yoo-accordion {
	padding: 1px;
	border: 1px solid #C8C8C8;
}

.accordionHeader{
	height: 30px;
	background: url(../images/item_header.png) 0 0 repeat-x;
	line-height: 30px;
	text-indent: 10px;
	font-size: 112%;
	font-weight: bold;
	cursor: pointer;
	color: #666666;
}

.accordionHeader:hover {
	height: 30px;
	background: url(../images/item_header.png) 0 -30px repeat-x;
}


.accordionHeaderSelected{
	background: url(../images/item_header.png) 0 -30px repeat-x;
	height: 30px;
	line-height: 30px;
	text-indent: 10px;
	font-size: 112%;
	font-weight: bold;
	cursor: pointer;
	color: maroon;
}

div.MyAccordion dt:hover.toggler, div.MyAccordion dt.sfhover {
	background: url(../images/item_header.png) 0 -30px repeat-x;
}
.article 
{
	font-family: Verdana,Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 200;
	padding: 10px 20px 10px 20px;
	border-bottom: 1px solid #E6E6E6;
	color: #666;
	line-height: 18px;
}

.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
    opacity:0.7;
}


/* login */
span.default span.yoo-login span.login {
	width: 135px;
	margin: auto;

}

span.default span.yoo-login span.login .username, 
span.default span.yoo-login span.login .password {
	padding-bottom: 1px;
}

span.default span.yoo-login span.login .username input, span.default span.yoo-login span.login .password input {
	width: 105px;
	height: 16px;
	padding: 4px 0px 0px 30px;
	border: none;
	outline: none;
	color: #646464;
	font-size: 75%;
}

span.default span.yoo-login span.login .username input {
	background: url(../images/username_bg.png) 0 0 no-repeat;
}

span.default span.yoo-login span.login .password input {
	background: url(../images/password_bg.png) 0 0 no-repeat;
}

span.default span.yoo-login span.login .username input:hover, span.default span.yoo-login span.login .username input.sfhover {
	background: url(../images/username_bg.png) 0 -20px no-repeat;
	color: #000000;
}

span.default span.yoo-login span.login .password input:hover, span.default span.yoo-login span.login .password input.sfhover {
	background: url(../images/password_bg.png) 0 -20px no-repeat;
	color: #000000;
}

span.default span.yoo-login span.login .username input:focus, span.default span.yoo-login span.login .username input.sffocus {
	background: url(../images/username_bg.png) 0 -20px no-repeat;
	color: #000000;
}

span.default span.yoo-login span.login .password input:focus, span.default span.yoo-login span.login .password input.sffocus {
	background: url(../images/password_bg.png) 0 -20px no-repeat;
	color: #000000;
}