/**
   COMMON.WONKA.CSS
   
   Created by Rafael Vega on 2010-02-04.
   Copyright 2010 Studiocom. All rights reserved.
**/

/** RESET **/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
a{outline:0 none;}

/** Layout **/
body{background:#1A0B34;}
#bg_image{background:url('/img/background.jpg') top center no-repeat}
#container{width:980px;margin:0px auto;padding:0px;}
#content{margin:-35px auto 0px; position:relative;}
#Homepage #bg_image #container #content{margin:-15px auto 0px;} 
#Products #bg_image #container #content{margin:-45px auto 0px;} 
#VideoRoom #bg_image #container #content{margin:-30px auto 0px;} 
#Events #bg_image #container #content{margin:43px auto 0px;} 
#WhatsNew #bg_image #container #content{margin:-35px auto 0px;} 
#wonka_golden_ticket #bg_image #container #content{margin:45px auto 0px;} 

/** Typography **/
html{font-size:11px;}
body{color:#FFF;font-family:"Trebuchet MS", Helvetica, sans-serif;}
input{color:#946BC5;font-family:"Trebuchet MS", Helvetica, sans-serif; font-size:13px; letter-spacing:-1px;}
.validation_error, .validation_ok, .validation_info{font-size:12px; letter-spacing:-1px;}
p {margin:0 0 15px; line-height:1.0; color:#946BC5; font-size:14px;}
strong {color:#FFF;}
label{font-size:14px; letter-spacing:-1px;}
h1{font-size:18px; margin-bottom:15px; text-align:center;}
h2{font-size:14px; margin-bottom:15px; color:#FF6600;}

/** Util **/
span.go_away{position: absolute; left: -15000px}
.center{text-align:center;}
.clear{clear:both;}
.float_right{float:right;}
.align_right{text-align:right;}

/** Footer **/
#footer{
	height:94px;
	width:980px;
	background:url('/img/footer_bg.png') no-repeat;
	color:#946BC5;
	font-size:10px; 
	text-align:center;
	position:relative; bottom:60px;
	}
#Products #bg_image #container #footer{bottom:20px;} 
#Homepage #bg_image #container #footer{bottom:30px;} 
#wonka_golden_ticket #bg_image #container #footer{bottom:5px;}   
#Events #bg_image #container #footer {bottom:80px;}  
#Events #bg_image #container #footer p {color:#ffffff;}  
#Events #bg_image #container #footer p a {color:#ffffff;} 
#footer p{font-size:11px;}
#footer #footer_1{padding-top:29px;}
#footer #footer_2{margin-top:16px;}
#footer #truste{margin-bottom:30px;}
#footer_1 a{color:#946BC5; text-decoration:none;}
#footer_1 a:hover{color:#F6F;}

/** MENU **/
#header{position:relative; top:25px; z-index:1}
#header #menu{height:140px;width:466px;background:url('/img/menu_bg.png'); margin-left:40px;}
#main_menu{width:310px; position:absolute; top:66px; left:175px; line-height:1.0;}
#main_menu,#main_menu *{margin:0;padding:0;list-style:none;}
#hat_link{/*border:1px solid red;*/ width:135px; height:115px; display:block;}

/* first level elements */
#main_menu li:hover{visibility:inherit;}
#main_menu li{float:left;position:relative;margin-left:1px;height:34px;padding-top:11px}
#main_menu li:first-child{margin-left:0px;}
#main_menu li:hover{background:url('/img/arrow_down.png') top center no-repeat;}
#main_menu a{display:block;position:relative;}
#main_menu li a{height:19px;}

/* replace text in first level with images in sprite*/
#main_menu li a span{position: absolute; left: -15000px}
#main_menu_whats_good{width:75px;background:url('/img/menu_sprite.png') 3px 1px;}
li:hover #main_menu_whats_good{background-position:4px 38px;}
#main_menu_whats_happening{width:73px;background:url('/img/menu_sprite.png') 200px 1px;}
li:hover #main_menu_whats_happening{background-position:201px 38px;}
/*#main_menu_whats_new{width:62px;background:url('/img/menu_sprite.png') 0px 1px;}
li:hover #main_menu_whats_new{background-position:0px 22px;}*/
#main_menu_create{width:43px;background:url('/img/menu_sprite.png') 125px 1px;}
li:hover #main_menu_create{background-position:126px 38px;}
#main_menu_music{width:75px;background:url('/img/menu_sprite.png') 74px 1px;}
/*li:hover #main_menu_music{background-position:74px 19px;}*/

/* second level elements*/
#main_menu ul{position:absolute;top:-10000px;}
#main_menu li:hover ul, #main_menu li.sfHover ul{right:-8px;top:39px;z-index:99;}
#main_menu li li{height:12px; width:100%;  margin:0px 0px 4px 0px; padding:0px;}
#main_menu li li a{color:#FAFAFA; text-decoration:none; height:auto; text-align:right; padding:0px 12px 0px 0px; white-space:nowrap; padding-top:2px; padding-left:10px;}
#main_menu li li:hover{background:url('/img/arrow_left.png') 388px 1px no-repeat;}
#main_menu li li a strong{color:#B090C2}
#main_menu li ul {background-color:#5e2a88; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}


/** Login Form **/
#login{width:407px; height:57px; position:absolute; top:12px; right:40px; background:url('/img/login/login_form_bg.png');}
#login *{font-family:"Trebuchet MS", Helvetica, sans-serif;}
#login form{position:relative;}
#login #login_submit{position:absolute; top:28px; left:324px; width:55px; height:15px; background:url('/img/login/submit.png');}
#login #login_submit:hover, #login #login_submit:focus{background:url('/img/login/submit_hover.png'); outline:0 none; cursor:pointer;}
#login #login_register{display:block; position:absolute; top:44px; left:324px; width:47px; height:12px; background:url('/img/login/register.png');}
#login #login_register:hover, #login #login_register:focus{background:url('/img/login/register_hover.png'); cursor:pointer;}
#login #login_forgot_password{display:block; position:absolute; top:46px; left:227px; width:64px; height:9px; background:url('/img/login/forgot_password.png');}
#login #login_forgot_password:hover, #login #login_forgot_password:focus{background:url('/img/login/forgot_password_hover.png'); cursor:pointer;}
#login #login_remember_me{position:absolute; top:40px; left:86px;}
#login input.text{border:0px none; background:transparent; padding:0px; margin:0px; text-align:center; color:#FFF; width:128px; height:18px; font-size:11px;}
#login #login_email{position:absolute; top:25px; left:59px;}
#login #login_password{position:absolute; top:25px; left:192px;}
#login #login_password_label{position:absolute;top:26px;left:192px;width:128px;display:none;font-size:11px;letter-spacing:-1px;text-align:center;}
#login #login_wait{position:absolute; top:25px; left:328px; background: url('/img/login/wait.png');width: 41px;height: 20px;}
#login .login_error{position:absolute; left:74px; top:60px; width:250px; height:auto; background:none; margin:0px;}
#login .login_error p {color:#FF6600; font-size:11px; padding:0;}

#logged_in{width:282px; height:28px; position:absolute; top:26px; left:688px; background:url('/img/login/logged_in_bg.png');}
#logged_in #sign_out{width:65px; height:16px; position:absolute; top:29px; left:210px; background:url('/img/login/sign_out.png');}
#logged_in #sign_out:hover{background:url('/img/login/sign_out_hover.png');}
#logged_in #welcome{position:absolute; top:13px; left:96px; font-size:12px;}
#logged_in #user_name{color:#ddcae7;}

/** Generic Box **/
.generic_box{margin:15px auto; width:642px;}
.generic_box_top{width:642px;height:27px; background:url('/img/generic_box_top.png');}
.generic_box_middle{width:612px;min-height:385px; background:url('/img/generic_box_middle.png') no-repeat #23103e; padding:0px 15px 15px 15px;}
.generic_box_bottom{width:642px;height:26px; background:url('/img/generic_box_bottom.png');}

#swfContainer{ position:relative; width:100%; height:600px; margin-left:-9%;}

.socialButtons {position: absolute; z-index: 9888; top: 655px; left: 122px; overflow: hidden}
#Products .socialButtons {top: 665px;}
.FBLike {float: left;}
.twitterFollow {display: block; float: left; text-indent: -9999px; width: 25px; height: 24px; margin-right: 7px; background: transparent url(/img/btnTwitter.png) no-repeat 0 0}
#good_food{display:none}
#Homepage #good_food{display:block;cursor:pointer; width:162px;}

#nestle_logo {
	position:absolute;
	width:162px;
	height:30px;
}

#nestle_logo_rollover {
	position:absolute;
	width:162px;
	height:30px;
	display:none;
	z-index:10;
}

/** social icons **/
#social_icons{padding-right:auto; padding-left:550px; padding-top:10px; list-style-type:none;width:380px;}
.iconPadding{padding:1px;}
#logo_icon{float:left;}
#twitter_icon{width:21px; height:22px; float:left; padding-top:3px;}
#youtube_icon{width:22px; height:22px; float:left; padding-top:3px;}
#wonka_icon{width:23px; height:23px; float:left; padding-top:2px;}
#facebook_icon{width:22px; height:22px; float:left; padding-top:3px;}
#facebooklike_icon{width:100px; height:22px; float:left; padding-top:4px;}