@charset "utf-8";
/* CSS Document */
body{
	margin:0;
	padding:0;
	background-color:#222222;
	font-family:Arial, Geneva, sans-serif;
	font-size:14px;
	color:#000000;
}

a {
	color:#FFFFFF;
	text-decoration:none;
}

a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}

a:visited{
	color:#FFFFFF;
	text-decoration:none;
}

a img{
	border:none;
	text-decoration:none;
}

.blacklink {
	color:#000000;
}
.blacklink a{
	color:#000000;
	text-decoration:none;
}
.blacklink a:hover{
	color:#000000;
	text-decoration:underline;
}

.blue			{ color:#3399cc; }
.black			{ color:#000000; }
.red			{ color:#F00; }
.white			{ color:#FFFFFF; }
h2				{ font-size:12px;font-weight:normal}
h1				{ font-size:16px; display:inline;  font-weight:bold; text-align:right;}
h3				{ font-size:25px; display:inline;  margin:0px; font-weight:normal;}
.resultfont			{ font-size:20px; display:inline;  font-weight:normal; margin-left: 15px;}
.center			{text-align:center;}
.bold			{font-weight:bold;}
form {margin:0; padding:0;}
ol {margin-top:10px;}

.textbox { 
	width:222px;
	height:28px;
	background:url(images/inputbox.gif) no-repeat;
	font-weight:bold; 
	font-size:23px;
	color:#000000;
	text-align: left; 
} 

#pagewrapper{
	width:820px;
	margin:20px auto;
}

#container{
	margin:0px auto 0;
	width:820px;
	background-color:#000000;
}

#containercut{
	margin:0px auto 0;
	width:820px;
	background-color:#222222;
}

#header{
	width:820px;
	height:179px;
	background:url(images/newheadbg.png) no-repeat;
}

#left_side{
	float:left;
	width:372px;
}

#logo{
	width:372px;
	height:179px;
}
#right_side{
	float:left;
	width:448px;
	#padding-top:10px;
}
#headfullbox{

}
#headfullboxindex{
	padding-top:20px;
}


#headfullboxtrack{
	margin:20px auto 0;
	width:826px;
	margin-top:30px;
	margin-bottom:30px;
}
#headtrack{
	width:826px;
	height:58px;
	background:url(images/headtrack.png) no-repeat;
}
#bottomtrack{
	width:826px;
	height:415px;
	background:url(images/bgtrack.png) no-repeat;
}


#fullboxbg{
	width:820px;
	height:265px;
}

#headhit{
	width:820px;
	height:307px;
	padding-top:40px;
}


#ringhit{
	width:380px;
	height:200px;
	float:left;
	margin-right:5px!important;    
	margin-left:25px!important; 
	margin-left:12px;
	padding-top:70px;
	padding-left:10px;
	background:url(images/ringhit2.png) no-repeat;
}
#ringlast{
	width:380px;
	height:200px;
	float:left;
	margin-left:5px!important;  
	padding-top:70px;
	padding-left:10px;
	background:url(images/ringlast2.png) no-repeat;
}

#logocreate{
	width: 900px;
	height:55px;
}
#logocreateindex{
	width: 820px;
	height:55px;
	margin-top:30px;
	margin-bottom:15px;
}

#clearboth{
	clear:both;
}
#processbox{
	width:820px;
	height:416px;
	background:url(images/bgprocess.png) no-repeat;
}
#playmusic{
	width:820px;
}
#playmusicleft{
	width:236px;
	float:left;
	padding:15px;
}
#playmusiclefttop{
width:236px;
height:59px;
background:url(images/ringtonehitsmall.png) no-repeat;
}
#playmusicleftadmin{
width:236px;
height:59px;
background:url(images/admin.png) no-repeat;
}
#playmusicleftbottom{
width:236px;
height:322px;
background:url(images/bgringtonehitsmall.png) no-repeat;
}


#playmusicright{
	width:541px;
	float:left;
	margin-top:20px!important;     /* Fx อ่านบรรทัดนี้ เพราะมี !important */
	margin-top:30px;            /* IE6 อ่านบรรทัดนี้ เพราะไม่สน !important อ่านบรรทัดล่างสุด ตามกฎปกติ*/
}
#playmusicrightbg{
	width:541px;
	height:363px;
	background:url(images/bgnewplaymusic.png) no-repeat;

}
#playmusicrightbgcontent{
	width:541px;
	height:762px;
	background:url(images/newbgsa.png) no-repeat;

}

#boxstep1{
	width:234px;
	height:322px;
	float:left;
	margin:10px;
	margin-left:30px!important;     /* Fx อ่านบรรทัดนี้ เพราะมี !important */
	margin-left:15px;            /* IE6 อ่านบรรทัดนี้ เพราะไม่สน !important อ่านบรรทัดล่างสุด ตามกฎปกติ*/
	
	
	margin-top:20px;
}
#boxstep1lo{
	width:234px;
	height:33px;
}
#boxstep1btn{
	width:234px;
	height:59px;
	background:url(images/lostep1.png) no-repeat;
}
#boxstep1bg{
	width:234px;
	height:230px;
	background:url(images/bgstep1.png) no-repeat;
}
#boxstep2{
	width:234px;
	height:322px;
	float:left;
	margin:20px;
}
#boxstep2lo{
	width:234px;
	height:33px;
}
#boxstep2btn{
	width:234px;
	height:59px;
	background:url(images/lostep2.png) no-repeat;
}
#boxstep2bg{
	width:234px;
	height:230px;
	background:url(images/bgstep2.png) no-repeat;
}
#boxstep3{
	width:234px;
	height:322px;
	float:left;
	margin:10px;
	margin-top:20px;	
}
#boxstep3lo{
	width:234px;
	height:33px;
}
#boxstep3btn{
	width:234px;
	height:59px;
	background:url(images/lostep3.png) no-repeat;
}
#boxstep3bg{
	width:234px;
	height:230px;
	background:url(images/bgstep3.png) no-repeat;
}
#content{
	width:843px;
}
#mainapp{
	width:500px;
	height:400px;
}
#footer{
	width: 820px;
	height:55px;
	margin-top:30px;
}