/*
CSS Credit: http://www.thetechspace.com/
*/
@font-face {
    font-family: "Zawgyi-One";
    src: url("type/Zawgyi-One.eot");
    src: local('‚ò∫'),
        url("type/Zawgyi-One.woff") format("woff"),
        url("type/Zawgyi-One.otf") format("opentype"),
        url('type/Zawgyi-One.ttf') format('truetype'),
        url("type/Zawgyi-One.svg#Zawgyi-One") format("svg");
    font-weight: normal;
    font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	color: #666;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif, 'Zawgyi-One';
	font-size: 12px;
	line-height: 1.4em; 
	background-color: #4d5558;
	background-repeat: repeat-x;
	background-position: top;
	background-image: url(../images/body.jpg);
}

a, a:link, a:visited { color: #f7941e; font-weight: normal; text-decoration: none }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif, 'Zawgyi-One'; font-weight: normal; color: #00aeef; }
h1 { font-size: 30px; margin: 0 0 30px; padding: 5px 0; line-height: 1.5em; }
h2 { font-size: 26px; margin: 0 0 1px; padding: 5px 0 10px; border-bottom: 1px solid #c0c0c0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 { font-size: 16px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 14px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; }

.clear { clear: both }
.h40 { height: 40px }

#wrapper {
	width: 100%;
	background: url(../images/body_top.jpg) center top no-repeat;
}

#header_wrapper {
	width: 100%;
	height: 210px;
	background: url(../images/menu_bg.png) repeat-x;
}

#menu {
	width: 960px;
	height: 47px;
	margin: 0 auto;
}

#menu ul {
	float: left;
	width: 600px;
	padding: 0;
	margin: 0;
	list-style: none;
}

#menu ul li{
	padding: 0;
	margin: 0;
	display: inline;
}

#menu ul li a{
	float: left;
	display: block;
	height: 39px;
	padding: 0 20px;
	margin-right: 1px;
	line-height: 39px;
	font-size: 14px;
	color: #fff;	
	text-align: center;
	text-decoration: none;
	outline: none;
	text-shadow: 1px 1px 1px #000
}

#menu li a:hover, #menu li .selected {
	color: #ffffff;
	text-shadow: 1px 1px 1px #333;
	background: url(../images/menu_hover.png) repeat-x
}

#login { float: right; margin-top: 10px }
#login a { color: #fff }
#social { float: right; margin: 8px 0 0 40px }
#social a { display: block; float: left; margin-left: 5px;}
#social a img{border: none;}


#header {
	width: 960px;
	height: 163px;
	margin: 0 auto;	
}

#site_title { margin-top: 70px  }
#site_title h1 { margin: 0; padding: 0 }
#site_title h1 a { display: block; margin: 0 auto; width: 486px; height: 88px; font-size: 12px; color: #999; text-indent: -10000px; background: url(../images/logo.png) no-repeat top left }

#main {
	position: relative;
	width: 940px;
	padding: 0 15px;
	margin: 0 auto;
	background: url(../images/content_middle.png) repeat-y
}

#main .top { position: absolute; width: 970px; height: 10px; top: -10px; left: 0; background: url(../images/content_top.png) }

#two_col_left { float: left; margin-right: 20px; width: 620px }
#content { float: left; margin-right: 20px; width: 460px }
#sidebar_narrow { float: left; margin-right: 20px; width: 140px }
#sidebar_big { float: left; width: 300px; margin-right: 0px; }
.sidebar_big_box { margin-bottom: 10px;}


#adsense_content_top { padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #ccc }
#adsense_content_top a { display: block; float: left; margin-right: 40px }

.sidebar_narrow_box { padding: 10px; background: #efefef; margin-bottom: 10px }
.sidebar_narrow_box h4 { color: #333; font-size: 14px; font-weight: 700; padding-bottom: 5px; margin-bottom: 5px; font-family: Georgia, "Times New Roman", Times, serif, 'Zawgyi-One'; }
.sidebar_list { padding: 0; margin: 0; list-style: none }
.sidebar_list li { padding: 0; margin: 0; color: #666 }
.sidebar_list li a { color: #666 }

.divider { border-bottom: 1px solid #ccc }

.music_list { margin: 0 0 40px; padding: 0; list-style: none}
.music_list li { padding: 7px 5px; margin: 0 0 1px;  background: #eee }
.music_list li.odd { background: #e6e6e6 }
.music_list li a {color: #666;}
.music_list li a:hover { color: #333; text-decoration: none }
/*.music_list li a.song, .music_list li span.song { padding-left: 25px; background: url(../images/note.png) center left no-repeat;  }
.music_list li a.male, .music_list li span.male { padding-left: 25px; background: url(../images/male-singer.png) center left no-repeat;  }
.music_list li a.female, .music_list li span.female { padding-left: 25px; background: url(../images/female-singer.png) center left no-repeat;  }
.music_list li a.group, .music_list li span.group { padding-left: 25px; background: url(../images/group-singer.png) center left no-repeat;  }
.playlist li { padding:  0;}*/

#album .music_list li a.loading, .music_list li a.loading { /*right: 50px; top: 3px;*/ background: url(../images/sm2/icon_loading_dots.gif) center no-repeat }
#album h1 a.button{ display: block; float: left; height: 20px; margin: 0 10px 0 0; width: 20px; border: none; text-decoration: none; }
#album h1 a.button:hover { border: none; text-decoration: none; }
#album h2 { font-size: 20px; margin-bottom: 1px }
#album img { 
    margin-bottom: 30px; 
    border: 1px solid #333; 
    padding: 5px;
    -webkit-box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3);
    box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3); 
}
#album .music_list { margin: 0; padding: 0; list-style: none }
#album .music_list li { /*padding: 10px 10px 10px 10px;*/ margin-bottom: 1px; position: relative; background: #e9e9e9 }
#album .music_list li.odd { background: #e6e6e6 }
#album .music_list li.playing { background: #998A8A; color: #fff; }
#album .music_list li.playing a { color: #e8e8e8;}
#album .music_list li.playing a:hover { color: #fff; }

#album .music_list li a.song, #album .music_list li span.song, .music_list li a.song { padding-left: 25px; background: url(../images/note.png) center left no-repeat;  }
#album .music_list li a.male, #album .music_list li span.male, .music_list li a.male { padding-left: 25px; background: url(../images/male-singer.png) center left no-repeat;  }
#album .music_list li a.female, #album .music_list li span.female, .music_list li a.female { padding-left: 25px; background: url(../images/female-singer.png) center left no-repeat;  }
#album .music_list li a.group, #album .music_list li span.group, .music_list li a.group { padding-left: 25px; background: url(../images/group-singer.png) center left no-repeat;  }
#album .music_list li a.button,.music_list li a.button {  display: block; float: right; width: 20px; height: 20px; margin-left: 5px;/*margin-top: 8px; margin-right: 5px; text-indent: -10000px; position: absolute;*/ }
#album .music_list li a.play, .music_list li a.play { /*right: 50px; top: 3px;*/ background: url(../images/sm2/360-button-play.png) center no-repeat }
#album .music_list li a.paused, .music_list li a.paused { /*right: 50px; top: 3px;*/ background: url(../images/sm2/360-button-play-light.png) center no-repeat }
#album .music_list li a.playing, .music_list li a.playing { /*right: 50px; top: 3px;*/ background: url(../images/sm2/360-button-pause-light.png) center no-repeat }
#album .music_list li a.loading, .music_list li a.loading, #album h1 a.loading { /*right: 50px; top: 3px;*/ background: url(../images/sm2/icon_loading_dots.gif) center no-repeat }
#album .music_list li a.download, .music_list li a.download { /*right: 5px; top: 3px;*/ background: url(../images/download.png) center  no-repeat}
#album .music_list li a.fav_off, .music_list li a.fav_off, #album h1 a.fav_off { /*right: 50px; top: 3px;*/ background: url(../images/fav_off.png) center no-repeat }
#album .music_list li a.fav_on, .music_list li a.fav_on, #album h1 a.fav_on { /*right: 50px; top: 3px;*/ background: url(../images/fav_on.png) center no-repeat }
/*#album .playlist li { padding:  0;}*/

#album h3 {
	font-size: 20px;
	padding-left: 50px;
	line-height: 32px;
	color: #00aeef;
	margin-bottom: 1px;
	border-bottom: 1px solid #ccc
}
#album h3.com_header {
	background: url(../images/comment.png) no-repeat left center;
}

#album h3.cwb_header {
	background: url(../images/leave_comment.png) no-repeat left center;
}

#album form { 
	padding: 10px;
	background: #e9e9e9;
}
#album form input {
	border: 1px solid #cfcfcf;
	margin-bottom: 15px;
}
#album form .comment_txtarea { 
	width: 99%;
	height: 150px;
	margin-bottom: 15px;
	border: 1px solid #cfcfcf;
	resize: none;
}

.comment_box {
	padding: 10px;
	margin-bottom: 1px;
	background: #e9e9e9;
	border-bottom: 1px solid #ccc
}

#album .comment_box img {
	float: left;
	width: 60px;
	border: 2px solid #fff;
	margin-bottom: 0
}
.comment_box .comment {
	float: right;
	width: 360px;
	font-size: 11px;
}
.comment_box .comment .author {
	font-size: 13px;
	color: #879d0f;
	margin-bottom: 5px;
}


.col_140 { width: 140px }
.col_300 { width: 300px }
.float_l { float: left }
.float_r { float: right }
.no_margin_right { margin-right: 0 }

/* Tab */
.hide { position: absolute; top: -9999px; left: -9999px; }

#artist_tab { background: #fff; border: 1px solid #eee; padding: 4px }

#artist_tab .nav { overflow: hidden; margin: 0; padding: 0; list-style: none }
#artist_tab .nav li { display: inline; padding: 0; }
#artist_tab .nav li.last { margin-right: 0; }
#artist_tab .nav li a { display: block; float: left; width: 70px; color: #666; text-shadow: 0 1px 1px #fff;  padding: 2px 0; margin-right: 1px; text-align: center; border: 0; text-decoration: none; margin-bottom: 1px; background: #f4f4f4 }
#artist_tab .nav li a:hover, #artist_tab ul li a.current { background-color: #889e0f; color: #fff; text-shadow: 1px 1px 1px #666 }
#artist_tab label.lab-radio-checkbox { vertical-align: middle; text-transform: none; font-weight: normal; margin-right: 10px }
#artist_tab select.age-group { width: 40px; margin-right: 15px }

#artist_list {padding: 0 0 0 30px;}
#artist_list li { float: left; width: 170px; margin: 0 20px 15px 0; list-style:none; padding: 0 0 0 23px;}
#artist_list li.male { background: url(../images/male-singer.png) no-repeat left;  }
#artist_list li.female { background: url(../images/female-singer.png) no-repeat left;  }
#artist_list .group {  background: url(../images/group-singer.png) no-repeat left;}

.list-wrap {
	display: block;
	padding: 10px;
	background: #f4f4f4
}


#footer {
	width: 960px;
	padding: 30px 0 10px 0;
	margin: 0 auto;
	text-align: center;
	background: url(../images/content_bottom.png) top center no-repeat
}

#footer a { color: #ccc }

.pagination { clear: both; display: block; margin-top: 10px; padding: 2px 0; }
.pagination a, .pagination a:link, .pagination a:visited, .pagination span.extend, .pagination span.disabled {
	padding: 1px 5px;
	border: 1px solid #ddd;
	background: #fff;
	text-align: center;
	margin: 2px;
	text-decoration: none;
	color: #666;
	font-size: 12px;
	display: inline-block;
}
.pagination a:hover, .pagination a:active { border: 1px solid #606f0b; color: #fff; font-size: 12px; background: #889e0f; }
.pagination span.pages { margin: 2px 10px 2px 2px; text-decoration: none; color: #666; font-size: 12px; display: inline-block; }
.pagination span.current { padding: 1px 5px; border: 1px solid #2f4003; text-align: center; margin: 2px; text-decoration: none; border: 1px solid #606f0b; color: #fff; font-size: 12px; background: #889e0f; }

.notification { 
	border-radius: 4px ;
	margin: 0 0 20px 0;
	background-position: 10px 11px !important;
	background-repeat: no-repeat !important;
	border: 1px solid;
	font-size: 13px;
	margin: 0 0 15px;
	position: relative;
	padding: 6px;
}

.error { background: #FFCECE; border: 1px solid #DF8F8F; color: #665252;}
.success {background: #D5FFCE; border-color: #9ADF8F; color: #556652;}
.login form { background: none repeat scroll 0 0 #E9E9E9; padding: 20px; }
.login form { 
    margin-bottom: 30px; 
    -webkit-box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3);
    box-shadow: 3px 3px 2px 1px rgba(100, 100, 100, 0.3); 
}
.login .field_name{width: 115px; float: left; text-align: right; margin: 0 20px 20px 0;}
.login .field_input{width: 270px; float: left; margin: 0 0 20px 0;}
.login .field_input input{width: 250px;}
.login .red {color: #FF0000;}