/*------------------------------------------------------------------------
# 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
-------------------------------------------------------*/

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

/*-----------
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
{
	top: 0px;
	position: absolute;
	width: 100%;
	
}

.shelves-content
{
	width: 830px;
	height: 204px;
	list-style: none;
	clear: both;
	margin: 40px 0px 0px 125px; /* posisi shelf di layar */
	padding: 0px 0px 0px 18px; /* posisi products terhadap background */
	background: url(../images/big_shelf_list1.png) no-repeat;
}

.shelves-content li
{
	width: 780px;
	height: 150px;
	float: left; 
	overflow: hidden; 
	text-indent: -9999px; 
	display: inline;	
}

.shelves-content li a
{
	background-position: 0px 0px;
	width: 780px;
	height: 150px;
	display: block;	
}

ul#shelf1
{
	margin: 61px 0px 0px 125px; /* posisi shelf di layar */
}

#shelf1 li a { background: url(../images/homepage_list_1.gif); }
	
#shelf2 li a { background: url(../images/homepage_list_2.gif); }
	
#shelf3 li a { background: url(../images/homepage_list_3.gif); }
	
#shelf4 li a { background: url(../images/homepage_list_4.gif); }
	
#shelf5 li a { background: url(../images/homepage_list_5.gif);}
	
#shelf6 li a { background: url(../images/homepage_list_6.gif); }

#shelf7 li a { background: url(../images/homepage_list_7.gif); }
	
#shelf8 li a { background: url(../images/homepage_list_8.gif);}
	
ul#shelf9
{
	margin: 61px 0px 100px 125px; /* posisi shelf di layar */
}

#shelf9 li a 
{
	background: url(../images/homepage_list_9.gif);
}
	
/*---------
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;
}

#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;
}

#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; }