/*
 * Custom styles for the index page
 * =======================================================
 * This css file contains color codes and background-images
 * of elements defined in outline.css, and index specific
 * styles (if any)
 */

/* 
 * basic container, custom image and background color
 * for each productgroup (like razz, b-live) and 
 * page types (service, index, cart)
 */
#Wrapper {
    background-image:url(img/bg_home.jpg);
    background-color:#0F0F0F;
}

/* 
 * The logo (bat)
 */
#Logo {
    background-image:url(img/service_logo.gif);
}

/* 
 * Batshop text
 */
#Logo h1 a {
    background-image:url(img/batshop_home.jpg);
}

/* 
 * Headline Cart
 */
#Cart h2, #Cart a {
    background-image:url(img/warenkorb_home.jpg);
}

#Cart a:hover {
    background-image:url(img/warenkorb_home_h.jpg);
}

/* 
 * Cart icon
 */
#Cart {
    background-image:url(img/warenkorb_home.gif);
}

/* 
 * Main navigation elements
 */
#home a {
    background-image:url(img/home_home.gif);
}

#bacardi a {
    background-image:url(img/home_bacardi.gif);
}

#bacardi a:hover {
    background-image:url(img/home_bacardi_h.gif);
}

#b-live a {
    background-image:url(img/home_b-live.gif);
}

#b-live a:hover {
    background-image:url(img/home_b-live_h.gif);
}

#razz a {
    background-image:url(img/home_razz.gif);
}

#razz a:hover {
    background-image:url(img/home_razz_h.gif);
}

#mojito a {
    background-image:url(img/home_mojito.gif);
}

#mojito a:hover {
    background-image:url(img/home_mojito_h.gif);
}


/* SPECIFIC STYLES ----------------------- */

/* 
 * Coupon image and position
 */
#Coupon {
    display:block;
    position:absolute;
    top:450px;
    background-image:url(img/gutscheinteaserrazz.gif);
    background-repeat:no-repeat;
    height:149px;
    width:310px;
}

#Coupon span {
    display:none;
}

#Main {
    position:relative;
    width:998px;
    overflow:hidden;
    height:600px;
}

/* 
 * The search form (additional content
 * on the right hand side)
 */
#Search {
    position:absolute;
    right:0;
    height:64px;
    top:450px;
    background-image:url(img/suche_bg_home.gif);
    background-repeat:no-repeat;
    padding:3px 0 14px 0;
    width:250px;
}

#Search label {
    
    display:block;
    margin:0 0 0 16px;
    width:83px;
    height:29px;
    overflow:hidden;
    background-image:url(img/suche_label.gif);
    background-repeat:no-repeat;
}

/*
 netscape sets all input elements to block, even hidden ones!
 therefore we have to specified the one we want to display via id
*/
#searchstr {
    display:block;
    float:left;
    font-size:11px;
    width:138px;
    margin-left:16px;
}

#Search p,#Search fieldset {
    float:left;
}

#SearchSubmit {
    margin-top:27px;
    border:0;
    background-color:transparent;
    background-image:url(img/suche_arrow.gif);
    background-repeat:no-repeat;
    overflow:hidden;
    width:29px;
    height:21px;
}

#Katalog {
    background-image:url(img/katalog_home.gif);
}

/*
 CSS für Flash Container
*/

#flashcontainer {
    position:relative;
	margin: 0px;
	padding: 0px;
	border: 0px;	
	width: 999px;
	height: 450px;	
}

#flashcontainer a span {
    display:none;
}

#fashion_teaser {		
    display:block;
	position: absolute;
	margin-left: 56px;
	margin-top: 22px;
	width: 195px;
	height: 407px;
    background-image:url(img/bacardi_fashion_rollout.jpg);	
    background-repeat:no-repeat;
}

#fashion_teaser:hover {	
    background-image:url(img/bacardi_fashion_rollover.jpg) !important;	
}

#blive_teaser {	
    display:block;
	position: absolute;
	margin-left: 254px;
	margin-top: 22px;
	width: 234px;
	height: 407px;
    background-image:url(img/blive_rollout.jpg);	
    background-repeat:no-repeat;
}

#blive_teaser:hover {	
    background-image:url(img/blive_rollover.jpg) !important;	
}

#razz_teaser {	
    display:block;
	position: absolute;
	margin-left: 493px;
	margin-top: 22px;
	width: 215px;
	height: 407px;
    background-image:url(img/razz_rollout.jpg);	
    background-repeat:no-repeat;
}

#razz_teaser:hover {	
    background-image:url(img/razz_rollover.jpg) !important;	
}

#mojito_teaser {
    display:block;
	position: absolute;
	margin-left: 752px;
	margin-top: 22px;
	width: 203px;
	height: 407px;
    background-image:url(img/mojito_rollout.jpg);	
    background-repeat:no-repeat;
}

#mojito_teaser:hover {
    background-image:url(img/mojito_rollover.jpg) !important;
}