/*------------------------------------------------------------------------
# BROMO - Version 2.0 for Any Browsers e/ IE - Codephile Rekadaya Mandiri
# ------------------------------------------------------------------------
# Copyright (C) 2010 Bakrie Connectivity. All Rights Reserved.
# Author: Codephile Rekadaya Mandiri Team, Oh Yeaah Baby Let's Get It On!!
# Website:  http://www.codephile.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/

/*---GLOBALS-------------------------------------------
Default document font-size, font-family, and color
-------------------------------------------------------*/
*{
	/* Resetting the default styles of the page */
	margin:0;
	padding:0;
}

body 
{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;

	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	
	background: url(../images/bg.png) repeat;
	position: relative;
	height: auto;
}

/*-----------
SITE WRAPPER
-------------*/
.site-wrapper
{
	width: 100%;
	/*left: 0px;
	top: 0px;
	margin-top: auto;*/
	margin-left: 0px;
	margin-right: 0px;
	border: none;
	position: absolute;
}

/* -------
TOP MENU
---------*/
.search-wrapper
{
	top: 0px;
	height: 98px;
	position: fixed;
	width: 100%;
}

/* ---------
SEARCH MENU 
------------*/
#menu
{ 
	margin: 0px; 
	padding: 0px; 
	list-style: none;
    float: right;
}

#menu a 
{ 
	text-decoration: none; 
}

#menu > li 
{
	cursor: auto;
	float:left; 
	position: relative;
    padding:0px 0px;
}

#menu .logo 
{
	background: ; 
	padding: 0px;
    }

/* sub-menus*/
#menu ul 
{ 
	padding: 0px; 
	margin: 0px; 
	display: block; 
	display: inline;
}

#menu li ul 
{ 
	position: absolute; 
	left: -235px; 
	top: 38px; 
	width: 284px; 
	line-height: 33px;
    background-image: url(../images/text_area.png); 
		
	/* for IE */ 
	display: none; 
}

#menu li:hover ul 
{ 
	display:block;
}

#menu li ul li
{ 
	display:block; 
	margin: 5px 20px; 
	padding: 5px 0px;  
}

#menu li ul li:first-child 
{ 
	border-top: none; 
}

#menu li ul li a 
{ 
	display: block; 
}

/* search */

.searchContainer div 
{ 
	/*display: inline; 
	padding: 5px;*/
}

.searchContainer input[type="text"] 
{
	border: 1px;
	background-color: transparent;
	/*border-color:#000000;*/
	
}

.searchContainer img 
{ 
	vertical-align: middle;
} 
/*----
LOGO
------*/
.logo-wrapper
{
	position: absolute;
	width: 100%;
	height: 119px;
	margin-top: 52px;
}

/*--------------
SHELVES DISPLAY
---------------*/
.shelves-wrapper
{
	width: 100%;
	height: 976px;
	position: absolute;
}

/*------------
LAYOUT PANELS
------------*/
#panel-left
{
	width: 246px;
	float: left;
}

#panel-right
{
	width: 706px;
	float: right;
}

/*------------
SMALL SHELF 1
-------------*/
#content1
{
	width: 235px;
	height: 216px;
	margin: 217px 0px 0px 0px;
	position: absolute;
	background: url(../images/small_shelf_1.png) no-repeat;
}


.quickFlipSmall
{
	margin: 0px 0px 0px 23px;
	width: 189px;
	height: 150px;
	cursor: pointer;
}

.panel-a1
{
	background: url(../images/AHAtouch-button-for-web-189x150-pixel.JPG) no-repeat;
	z-index: 10;
}

.panel-a2
{
	background: url(../images/aha_touch_flip.jpg) no-repeat;
}

/*------------
SMALL SHELF 2
-------------*/
#content2
{
	width: 235px;
	height: 215px;
	margin: 444px 0px 0px 0px;	
	position: absolute;
	background: url(../images/small_shelf_2.png) no-repeat;
}

.panel-b1
{
	background: url(../images/AHAvibe-button-for-web-189x150-pixel.JPG) no-repeat;
	z-index: 10;
}

.panel-b2
{
	background: url(../images/aha_vibe_flip.jpg) no-repeat;
}

/*------------
SMALL SHELF 3
-------------*/
#content3
{
	width: 233px;
	height: 209px;
	margin: 667px 0px 0px 0px;
	position: absolute;
	background: url(../images/small_shelf_3.png) no-repeat;
}

.panel-c1
{
	background: url(../images/AHAlink-button-for-web-189x150-pixel.JPG) no-repeat;
	z-index: 10;
}

.panel-c2
{
	background: url(../images/aha_link_flip.jpg) no-repeat;
}



/*-------------


BIG SHELF 1
-------------*/
#big_content1
{
	width: 690px;
	height: 370px;
	margin: 58px 0px 0px 58px;
	position: absolute;
	background: url(../images/big_shelf_1.png) no-repeat;
}

.quickFlipBig-d
{
	margin-left: 44px;
	margin-top: 5px;
	width: 184px;
	height: 308px;
	cursor: pointer;
}

.quickFlipBig-e
{
	margin-left: 240px;
	margin-top: -308px;
	width: 411px;
	height: 308px;
	cursor: pointer;
}
	
.panel-d1
{
	background: url(../images/how_much_ori.gif) no-repeat;
	z-index: 10;
}

.panel-d2
{
	background: url(../images/how_much_flp.gif) no-repeat;
}

.panel-e1
{
	background: url(../images/super_deal_ori.gif) no-repeat;
	z-index: 10;
}

.panel-e2
{
	background: url(../images/super_deal_flp.gif) no-repeat;
}

/*-------------
BIG SHELF 2
-------------*/
#big_content2
{
	width: 690px;
	height: 282px;
	margin: 436px 0px 0px 58px;
	position: absolute;
	background: url(../images/big_shelf_2.png) no-repeat;
}

.quickFlipBig-f
{
	margin-left: 44px;
	margin-top: 3px;
	width: 291px;
	height: 221px;
	cursor: pointer;
}

.quickFlipBig-f1
{
	background: url("../images/Button-Small-PRJ-282x 222.jpg") no-repeat;
	z-index: 10;
	margin-left: 44px;
	margin-top: 3px;
	width: 291px;
	height: 221px;
	cursor: pointer;
}

.quickFlipBig-f1 a
{
	border: 0 px;
}

.quickFlipBig-g
{
	margin-left: 360px;
	margin-top: -221px;
	width: 282px;
	height: 222px;
	cursor: pointer;
}
	
.panel-f1
{
	background: url(../images/Button-OIB.jpg) no-repeat;
	z-index: 10;
}

.panel-f2
{
	background: url(../images/flip_aha_wish_list.jpg) no-repeat;
}

.panel-g1
{
	background: url(../images/Button_Paket_Unlimited_g1.jpg) no-repeat;
	/*background: url(../images/Button_web_reload.JPG) no-repeat;*/
	/*background: url(../images/chrome_ori.gif) no-repeat;*/

	z-index: 10;
}

.panel-g2
{	
	/*background: url(../images/chrome_flp.gif) no-repeat;*/
	background: url(../images/aha_unlimited_aha_flip.gif) no-repeat;
}


/*-------------
BIG SHELF 3
-------------*/
#big_content3
{
	width: 690px;
	height: 152px;
	margin: 740px 0px 0px 58px;
	position: absolute;
	background: url(../images/big_shelf_3.png) no-repeat;
}

.quickFlipBig-h
{
	margin-left: 44px;
	margin-top: 0px;
	width: 290px;
	height: 80px;
	cursor: pointer;
}

.quickFlipBig-i
{
	margin-left: 360px;
	margin-top: -80px;
	width: 285px;
	height: 81px;
	cursor: pointer;
}
	
.panel-h1
{
	background: url(../images/headline_ori.gif) no-repeat;
	z-index: 10;
}

.panel-h2
{
	background: url(../images/headline_flp.gif) no-repeat;
}

.panel-i1
{
	background: url(../images/Homepage-button-mini-Online-Delivery.JPG) no-repeat;
	z-index: 10;
}

.panel-i2
{
	background: url(../images/pengen_punya_flp.gif) no-repeat;
}

/*---------
FLOAT MENU
------------*/
#site-body-container {}
 
#site-bottom-bar {
	background-image: url(../images/footer_main_menu.png);
	bottom: 0px;
	height: 105px ;
	position: fixed;
	width: 100%;
	z-index: 1000 ;
	}

#site-bottom-bar-frame {
	height: 105px ;
	margin: 0px 0px 0px 0px ;
	/*position: relative ;*/
	}

#site-bottom-bar-content {
	padding: 0px 0px 0px 0px ;
	}
  
/* --------
MAIN MENU 
-----------*/
ul#mainmenu{
/*width: 711px;*/
margin: -10px 0px 0px 60px;
list-style: none;
clear: both;
/*width: 1145px;*/
width:940px;
}

#mainmenu li{ overflow: hidden; text-indent: -9999px; display: inline; float:left;}

#mainmenu li a{ background: url(../images/btn_main_menu2.png); width: 100%; height: 100%; display: block;}

/* Home Button */
#mainmenu li.home{ width: 99px; height: 100px;}
#mainmenu li.home a{ background-position: 0px 0px; }
#mainmenu li.home a:hover{ background-position: 0px -105px; }
#mainmenu li.home a.selected{ background-position: 0px 105px; }

/* Products Button */
#mainmenu li.products{ width: 93px; height: 105px;}
#mainmenu li.products a{ background-position: -98px 0px; }
#mainmenu li.products a:hover{ background-position: -98px -105px; }
#mainmenu li.products a.selected{ background-position: -98px 105px; }

/* Tariff Button */
#mainmenu li.programadvisor{ width: 86px; height: 105px;}
#mainmenu li.programadvisor a{ background-position: -191px 0px; }
#mainmenu li.programadvisor a:hover{ background-position: -191px -105px; }
#mainmenu li.programadvisor a.selected{ background-position: -191px -105px; }

/* Coverage Button */
#mainmenu li.coverage{ width: 100px; height: 105px;}
#mainmenu li.coverage a{ background-position: -280px 0px; }
#mainmenu li.coverage a:hover{ background-position: -280px -105px; }
#mainmenu li.coverage a.selected{ background-position: -280px 105px; }

/* Supports Button */
#mainmenu li.supports{ width: 98px; height: 105px;}
#mainmenu li.supports a{ background-position: -380px 0px; }
#mainmenu li.supports a:hover{ background-position: -380px -105px; }
#mainmenu li.supports a.selected{ background-position: -380px 105px; }

/* Customer Login Button */
#mainmenu li.customer_login{ width: 145px; height: 105px;}
#mainmenu li.customer_login a{ background-position: -480px 0px; }
#mainmenu li.customer_login a:hover{ background-position: -480px -105px; }
#mainmenu li.customer_login a.selected{ background-position: -480px 105px; }

/* Business Solution Button */
#mainmenu li.aha_oib{ width: 170px; height: 109px;}
#mainmenu li.aha_oib a{ background-position: -631px 0px; }
#mainmenu li.aha_oib a:hover{ background-position: -631px -107px; }
#mainmenu li.aha_oib a.selected{ background-position: -631px 107px; }

/*Voucher Reload*/
#mainmenu li.reload_voucher{ width: 145px; height: 109px;}
#mainmenu li.reload_voucher a{ background-position: -810px 0px; }
#mainmenu li.reload_voucher a:hover{ background-position: -810px -107px; }
#mainmenu li.reload_voucher a.selected{ background-position: -810px 107px; }

/* Grid Button -621px*/
#mainmenu li.grid{ width: 43px; height: 105px;}
#mainmenu li.grid a{ background-position: -956px 0px; }
#mainmenu li.grid a:hover{ background-position: -956 -105px; }
#mainmenu li.grid a.selected{ background-position: -956x 105px; }

/* List Button -664px*/
#mainmenu li.list{ width: 46px; height: 105px;}
#mainmenu li.list a{ background-position: -999px 0px; }
#mainmenu li.list a:hover{ background-position: -999px -105px; }
#mainmenu li.list a.selected{ background-position: -999px 105px; }

/* --------
MAIN MENU 
-----------*/
ul#mainmenucust{
/*width: 711px;*/
margin: -10px 0px 0px 60px;
list-style: none;
clear: both;
/*width: 1145px;*/
width:940px;
}

#mainmenucust li{ overflow: hidden; text-indent: -9999px; display: inline; float:left;}

#mainmenucust li a{ background: url(../images/btn_main_menu_custarea.png); width: 100%; height: 100%; display: block;}

/* Home Button */
#mainmenucust li.home{ width: 99px; height: 105px;}
#mainmenucust li.home a{ background-position: 0px 0px; }
#mainmenucust li.home a:hover{ background-position: 0px -105px; }
#mainmenucust li.home a.selected{ background-position: 0px 105px; }

/* Products Button */
#mainmenucust li.products{ width: 93px; height: 105px;}
#mainmenucust li.products a{ background-position: -98px 0px; }
#mainmenucust li.products a:hover{ background-position: -98px -105px; }
#mainmenucust li.products a.selected{ background-position: -98px 105px; }

/* Tariff Button */
#mainmenucust li.programadvisor{ width: 86px; height: 105px;}
#mainmenucust li.programadvisor a{ background-position: -191px 0px; }
#mainmenucust li.programadvisor a:hover{ background-position: -191px -105px; }
#mainmenucust li.programadvisor a.selected{ background-position: -191px -105px; }

/* Coverage Button */
#mainmenucust li.coverage{ width: 100px; height: 105px;}
#mainmenucust li.coverage a{ background-position: -280px 0px; }
#mainmenucust li.coverage a:hover{ background-position: -280px -105px; }
#mainmenucust li.coverage a.selected{ background-position: -280px 105px; }

/* Supports Button */
#mainmenucust li.supports{ width: 98px; height: 105px;}
#mainmenucust li.supports a{ background-position: -380px 0px; }
#mainmenucust li.supports a:hover{ background-position: -380px -105px; }
#mainmenucust li.supports a.selected{ background-position: -380px 105px; }

/* Customer Login Button */
#mainmenucust li.customer_area{ width: 145px; height: 105px;}
#mainmenucust li.customer_area a{ background-position: -480px 0px; }
#mainmenucust li.customer_area a:hover{ background-position: -480px -105px; }
#mainmenucust li.customer_area a.selected{ background-position: -480px 105px; }

/* Business Solution Button */
#mainmenucust li.aha_oib{ width: 170px; height: 109px;}
#mainmenucust li.aha_oib a{ background-position: -631px 0px; }
#mainmenucust li.aha_oib a:hover{ background-position: -631px -107px; }
#mainmenucust li.aha_oib a.selected{ background-position: -631px 107px; }

/*Voucher Reload*/
#mainmenucust li.reload_voucher{ width: 145px; height: 109px;}
#mainmenucust li.reload_voucher a{ background-position: -810px 0px; }
#mainmenucust li.reload_voucher a:hover{ background-position: -810px -107px; }
#mainmenucust li.reload_voucher a.selected{ background-position: -810px 107px; }

/* Grid Button -621px*/
#mainmenucust li.grid{ width: 43px; height: 105px;}
#mainmenucust li.grid a{ background-position: -956px 0px; }
#mainmenucust li.grid a:hover{ background-position: -956px -105px; }
#mainmenucust li.grid a.selected{ background-position: -956px 105px; }

/* List Button -664px*/
#mainmenucust li.list{ width: 46px; height: 105px;}
#mainmenucust li.list a{ background-position: -999px 0px; }
#mainmenucust li.list a:hover{ background-position: -999px -105px; }
#mainmenucust li.list a.selected{ background-position: -999px 105px; }