/* 
#############################
CSS Document For hpgue v.1
By Aidil Muladha
#############################
*/
#cicak { width:972px; height:138px; position:absolute; top:322px; margin:0; padding:0; right:0; left:0; bottom:0; z-index:-9999px; visibility:hidden; }
#hideDiv {
	width:747px;
	height:100%;
	z-index:9999;
	position:absolute;
	margin:auto;
	padding:0;
	right:0;
	left:0;
	bottom:0;
	top:150px;
	}
body
	{
	margin:0;
	padding:0 0 50px 0;
	font:12px Arial, Helvetica, sans-serif;
	}
.clear
	{
	clear:both;
	margin:0;
	padding:0;
	}
.clearfix
	{
	clear:both;
	padding:0;
	margin:0;
	line-height:1px;
	font-size:-1px;
	}		
form
	{
	margin:0;
	padding:0;
	}
#container
	{
	width:973px;
	margin:0 auto 0 auto;
	padding:0;
	position:relative;
	padding:0;
	}
.header
	{
	width:973px;
	margin:0;
	padding:0;
	}
.header-l
	{
	width: 224px;
	height: 111px;
	float: left;
	text-align: left;
	margin:0;
	padding: 0;
	}
.header-l h1{
	background: url(../images/logos.png)  no-repeat;
	padding: 0px;
	margin: 0px;
	width: 224px;
}
* html .header-l h1
	{
	azimuth: expression(
    this.pngSet?
      this.pngSet=true : 
        (this.nodeName == "IMG" ? 
          (this.src.toLowerCase().indexOf('.png')>-1 ? 
            (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                this.src = "../images/transparent.gif") :
            '') :          
          (this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
            (this.origBg = (this.origBg) ? 
              this.origBg :             
              this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
              this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
              this.runtimeStyle.backgroundImage = "none") :
            ''
        ), this.pngSet=true
  );
}	
.header-l h1 span{
	text-indent: -999em;
	display: block;
	width: 224px;
}

.header-l h1 a{
	text-decoration: none;
	display: block;
	height: 111px;
	width: 224px;
}
.header-r
	{
	margin:10px 0 0 0 ;
	padding:0;
	width:665px;
	height:83px;
	float:right;
	}
#menu
	{
	margin:3px 0 0 0;
	padding:0;
	font:11px Arial, Helvetica, sans-serif;
	}
#menu ul
	{
	display:inline;
	padding:0;
	list-style:none;
	margin:0;
	}
#menu li
	{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	}
#menu li a
	{
	margin:5px;
	padding:10px 10px 8px 10px;
	list-style:none;
	display:block;
	float:left;
	text-decoration:none;
	color:#666666;
	font-weight:bold;
	}
#menu li a:hover
	{
	color:#999999;
	text-decoration:none;
	}						
#banner
	{
	width:973px;
	overflow:hidden;
	margin:0 0 8px 0;
	padding:10px 4px 0 0;
	}
#banner2
	{
	width:973px;
	overflow:hidden;
	margin:0 0 8px 0;
	}	
.banner-container
	{
	width:224px;
	height:143px;
	padding:5px;
	border:1px solid #e9e9e9;
	background:#FFFFFF url(../images/bg-banner.gif) repeat-x top left;
	float:left;
	margin:0 3px 0 2px;
	}
.banner-container-2
	{
	width:467px;
	height:143px;
	padding:5px;
	border:1px solid #e9e9e9;
	background:#FFFFFF url(../images/bg-banner.gif) repeat-x top left;
	float:left;
	margin:0 3px 0 2px;
	}	
.banner-container-full
	{
	width:963px;
	padding:5px;
	border:1px solid #e9e9e9;
	background:#FFFFFF url(../images/bg-banner.gif) repeat-x top left;
	float:left;
	}	
#content
	{
	973px;
	overflow:hidden;
	margin:0;
	padding:10px 0 0 0;
	}
.s-c
	{
	padding:5px;
	margin:auto;
	}		
.search-r
	{
	margin:0;
	padding:10px 0 0 0;
	float:right;
	color:#333333;
	}
.search-r input
	{
	background:#FFFFFF;
	color:#333333;
	}		
#c-left
	{
	width:301px;
	margin:0 19px 0 0;
	padding:0;
	float:left;
	}
#c-right2
	{
	width:653px;
	float:right;
	margin:0;
	padding:0;
	}	
#c-left2
	{
	width:319px;
	float:left;
	margin:0;
	padding:0;
	}
#c-right
	{
	width:319px;
	float:right;
	margin:0;
	padding:0;
	}
.news  {
	width:100%;
	margin:1px 0 5px 0;
	padding:2px 0 4px 0;
	font:11px/1.1em Verdana, Arial, Helvetica, sans-serif;
	border-top:none;
	border-bottom:1px solid #ececec;
	color:#999999;
	}
.news a  {
	text-decoration:none;
	}
.news p  {
	margin:0;
	padding:4px 0;
	}
.news h2
	{
	background:none;
	padding:0;
	margin:0 0 5px 0;
	font:12px/1.1em Arial, Helvetica, sans-serif;
	color:#006d9b;
	font-weight:bold;
	clear:both;
	display:block;
	}
.news h2 a
	{
	text-decoration:none;
	}
.frame-3
	{
	background:#FFFFFF url(../images/center-frame3.gif) repeat-y top center;
	padding:0;
	margin:0 0 5px 0;
	width:653px;
	color:#333333;
	}
.top-corner3
	{
	width:653px;
	height:9px;
	background:url(../images/top-frame3.gif) no-repeat top center;
	}
.center-corner3
	{
	width:643px;
	margin:auto;
	padding:0;
	}
.bottom-corner3
	{	
	width:653px;
	height:9px;
	padding:0;
	margin:0;
	background:url(../images/bottom-frame3.gif) no-repeat top center;
	}							
.frame-1
	{
	background:#FFFFFF url(../images/center-frame1.gif) repeat-y top center;
	padding:0;
	margin:0 0 5px 0;
	width:301px;
	color:#333333;
	}
.top-corner1
	{
	width:301px;
	height:9px;
	background:url(../images/top-frame1.gif) no-repeat top center;
	}
.center-corner1
	{
	width:291px;
	margin:auto;
	padding:0;
	}
.center-corner1 h1, .center-corner2 h1, .center-corner3 h1
	{
	font:14px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
	margin:0 0 10px 0;
	padding:5px 5px 5px 30px;
	}			
.bottom-corner1
	{	
	width:301px;
	height:9px;
	padding:0;
	margin:0;
	background:url(../images/bottom-frame1.gif) no-repeat top center;
	}		

.frame-2
	{
	background:#FFFFFF url(../images/center-frame2.gif) repeat-y top center;
	padding:0;
	margin:0 0 15px 0;
	width:317px;
	color:#333333;
	}
.top-corner2
	{
	width:317px;
	height:9px;
	background:url(../images/top-frame2.gif) no-repeat top center;
	}
.center-corner2
	{
	width:307px;
	margin:auto;
	padding:0;
	}
			
.bottom-corner2
	{	
	width:317px;
	height:9px;
	padding:0;
	margin:0;
	background:url(../images/bottom-frame2.gif) no-repeat top center;
	}
/*video*/

.frame-vid
	{
	background:#000000 url(../images/vid-bg.gif) repeat-y top center;
	padding:0;
	margin:0 0 15px 0;
	width:314px;
	color:#333333;
	}
.top-vid
	{
	width:314px;
	height:46px;
	background:#000000 url(../images/header-vid.gif) no-repeat top center;
	}
.center-vid
	{
	width:307px;
	margin:auto;
	padding:0;
	}
			
.bottom-vid
	{	
	width:314px;
	height:8px;
	padding:0;
	margin:0;
	background:url(../images/footer-vid.gif) no-repeat top center;
	}		
/*
=================
ringtone
=================
*/
div.ringtone  {
	width:100%;
	margin:1px 0 5px 0;
	padding:2px 0 4px 0;
	font:11px/1.1em Verdana, Arial, Helvetica, sans-serif;
	border-top:none;
	border-bottom:1px solid #ececec;
	color:#999999;
	}
.ringtone-tittle
	{
	width:40%;
	text-align:left;
	float:left;
	margin:0 1% 0 0;
	}
.ringtone-artist
	{
	width:40%;
	text-align:left;
	float:left;
	margin:0 3% 0 0;
	}
.ringtone-artist a
	{
	text-decoration:none;
	font-weight:bold;
	}
.ringtone-artist a:hover
	{
	text-decoration:none;
	color:#000000;
	}
.ringtone-listed
	{
	width:5%;
	text-align:center;
	float:left;
	}
.ringtone-donwload
	{
	width:5%;
	text-align:center;
	float:right;
	}
a.listent{
	display: block;
	text-indent: -10000px;
	background: url(../images/listent.gif) no-repeat;
	width: 16px;
	height: 14px;
	margin: 0 5px 0 0;
	text-align:center;
}
a.downl{
	display: block;
	text-indent: -10000px;
	background: url(../images/download.gif) no-repeat;
	width: 12px;
	height: 12px;
	margin: 0 5px 0 0;
	text-align:center;
}									
.infobank-more a {
	padding:2px 4px 2px 4px;
	margin:5px 0 0 0;
	width:29px;
	background:#FFFFFF;
	border:1px solid #cdcdcd;
	float:right;
	display:block;
	text-decoration:none;
	}
.infobank-more a:hover
	{
	color:#006d9b;
	text-decoration:none;
	}
/*
=================
Walpaper and game
=================
*/

div.picture  {
	width:100%;
	margin:1px 0 5px 0;
	padding:2px 0 4px 0;
	font:11px/1.1em Verdana, Arial, Helvetica, sans-serif;
	border-top:none;
	border-bottom:1px solid #cdcdcd;
	}
.picture-thumbnail
	{
	width:20%;
	text-align:left;
	float:left;
	margin:0 1% 0 0;
	}
.picture-tittle
	{
	width:60%;
	text-align:left;
	float:left;
	margin:0 3% 0 0;
	}

.picture-tittle a:hover
	{
	text-decoration:none;
	color:#000000;
	}
.picture-preview
	{
	width:5%;
	text-align:center;
	float:left;
	}
.picture-donwload
	{
	width:5%;
	text-align:center;
	float:right;
	}
a.preview{
	display: block;
	text-indent: -10000px;
	background: url(../images/zoom.gif) no-repeat;
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
	text-align:center;
}

/*
=================
OP and PIC
=================
*/

div.op {
	width:100%;
	margin:1px 0 5px 0;
	padding:2px 0 4px 0;
	font:11px/1.1em Verdana, Arial, Helvetica, sans-serif;
	border-top:none;
	border-bottom:1px solid #cdcdcd;
	}
.op-thumbnail
	{
	width:30%;
	text-align:left;
	float:left;
	margin:0 1% 0 0;
	}
.op-tittle
	{
	width:50%;
	text-align:left;
	float:left;
	margin:0 3% 0 0;
	}

.op-tittle a:hover
	{
	text-decoration:none;
	color:#000000;
	}
.op-preview
	{
	width:5%;
	text-align:center;
	float:left;
	}
.op-donwload
	{
	width:5%;
	text-align:center;
	float:right;
	}
a.preview{
	display: block;
	text-indent: -10000px;
	background: url(../images/zoom.gif) no-repeat;
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
	text-align:center;
}

/* Tool tip */

.tooltip{
position:absolute;
left:-2000px;
background:url(../images/panah-atas.gif) no-repeat left top;
padding:5px 0 0 0;
display:inline;
font:11px Arial, Helvetica, sans-serif;
}

.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#00aff0;
padding:4px 7px;
}

/*
#####################
Facebook style
#####################
*/
.f_container
	{
	font:12px Arial, Helvetica, sans-serif;
	color:#666666;
	margin:0;
	padding:0;
	}
.f_container a
	{
	color:#0099cf;
	text-decoration:none;
	}
.f_container p
	{
	margin:0;
	padding:2px;
	}
.f_container h1
	{
	font:12px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background:#5fca00 url(../images/p-re.gif) repeat-x top left;
	padding:5px 0 5px 8px;
	font-weight:bold;
	text-transform:uppercase;
	margin:0;
	}
.f_container h2
	{
	font:12px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background:#333333;
	padding:5px 0 5px 8px;
	font-weight:bold;
	text-transform:uppercase;
	margin:0;
	}	
.f-c
	{
	margin:0 0 8px 0;
	padding:4px;
	border-bottom:1px solid #eaeaea;
	}
.f-part
	{
	width:20%;
	padding:2px;
	float:left;
	}
.f-code
	{
	width:70%;
	padding:2px;
	float:left;
	}
.f-codes
	{
	color:#990000;
	font-weight:bold;
	}
	
.footer-f
	{
	background:#e3e3e3 url(../images/footer-bg.gif) repeat-x top left;
	padding:20px;
	border-bottom:1px solid #d9d9d9;
	border-left:1px solid #d9d9d9;
	border-right:1px solid #d9d9d9;
	margin:0;
	color:#aaaaaa;
	text-align:center;
	}
.numb
	{
	padding:10px;
	margin:0;
	}
.numb ul
	{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	}	
.numb li
	{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	}	
.numb li a
	{
	padding:3px;
	margin:0 2px 0 0;
	display:inline;
	background:#c3c3c3;
	border:1px solid #a1a1a1;
	color:#333333;
	text-decoration:none;
	font-weight:bold;
	float:left;
	}	
.ban_s { width:973px; height:50px; margin:auto; padding:0; }
#bottomframe {
	text-align: center;
	padding:0;
	margin:auto;
	width: 973px;
	height: 50px;
	position: fixed !important;
	position: absolute;
	z-index:1000;
	
}
/* Chatbox hpgue */
.chatbox
{
	width:641px;
	padding:5px;
	border:1px solid #e9e9e9;
	background:#FFFFFF url(../images/bg-chatbox.gif);
	float:right;
	margin:0 0 10px 0;
}
.chat-logo
	{
	width:213px; height:46px; float:left; display:block; text-indent:-999px; background:url(../images/chatbox.gif) no-repeat center; }	
.chat-text
	{
	width:330px;
	padding:6px 0 0 92px;
	margin:8px 0 0 0;
	height:22px;
	float:right;
	background:#f0f0f0 url(../images/hpgueinfo.gif) no-repeat left center;
	border:1px solid #e1e1e1;
	font-size:10px;
	color:#333333;
	}
.chat-text a { color:#2cb6d7; text-decoration:none; }	
.chat-text ul, .subs-box ul
	{
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	}
.chat-text li, .subs-box li
	{
	margin:0;
	width:310px;
	padding:0;
	list-style:none;
	position:absolute;top:0;left:0;
	}
.chat-shout
	{
	margin:0;
	padding:0;
	}	
	

/* Subs */
.subs-box { padding:3px 0 0 0; margin:0; font:11px Arial, Helvetica, sans-serif; color:#000000; }	
.subs-box img { border:1px solid #000000; margin:0; padding:0; }
.subs-box h2 { font:12px Arial, Helvetica, sans-serif; color:#000000; margin:0; padding:0; font-weight:bold; display:block; }
.subs-box span { display:block; font:14px Arial, Helvetica, sans-serif; color:#bd3000; font-weight:bold; margin:0; padding:0; }