@import url("style/grp_btn_boy_girl_jpg.css");
@import url("style/grp_btn_gif.css");
@import url("style/grp_title_gif.css");

body {background:#024498;}
#container {width:899px;}
#leftcontent {margin-right:448px; height:632px; background:url("images/left.jpg") no-repeat right top;}
#rightcontent {margin-left:449px; height:632px; background:url("images/right.jpg") no-repeat left top;}
#logos, #tnc {top:580px; left:80px; width:760px; z-index:3;}
#logos {display:none;}
#disclaimer {width:100%;}

/* Title */
#title_image span {display:none;} /* For use Image title*/
#subtitle_image, #subtitle_image span {display:none;} /* For use Image subtitle*/

#title_image {width:899px; height:152px; top:0; left:0;}




#inputname {text-align:center;} #inputname input {border:1px solid #044798; height:35px;}
#inputphone {margin-top:70px;}

/* layout */
#image03 {width:190px; height:480px; top:152px; left:0; background:url("images/mainbg01.jpg");}
#image04 {width:520px; height:480px; top:152px; left:190px; background:url("images/mainbg02.jpg");}
#image05 {width:189px; height:480px; top:152px; left:710px; background:url("images/mainbg03.jpg");}
#image06 {width:190px; height:480px; top:152px; left:0; background:url("images/girl_off.jpg");}
#image07 {width:189px; height:480px; top:152px; left:710px; background:url("images/boy_off.jpg");}
#image06.on {background:url("images/girl_on.jpg");} /* Please use this "class=on" to turn on user select */
#image07.on {background:url("images/boy_on.jpg");} /* Please use this "class=on" to turn on user select */

/* BEGIN Asian photo for ID, MY, SG, TW */
.id_ID #image06, .en_ID #image06,
/*.ms_MY #image06, .en_MY #image06,*/
.en_SG #image06,
.zh_TW #image06 {background:url("images/girl_asian_off.jpg");}

.id_ID #image06.on, .en_ID #image06.on,
/*.ms_MY #image06.on, .en_MY #image06.on,*/
.en_SG #image06.on,
.zh_TW #image06.on {background:url("images/girl_asian_on.jpg");}

.id_ID #image07, .en_ID #image07,
.ms_MY #image07, .en_MY #image07,
.en_SG #image07,
.zh_TW #image07 {background:url("images/boy_asian_off.jpg");}

.id_ID #image07.on, .en_ID #image07.on,
.ms_MY #image07.on, .en_MY #image07.on,
.en_SG #image07.on,
.zh_TW #image07.on {background:url("images/boy_asian_on.jpg");}
/* END Asian photo for ID, MY, SG, TW */

#image08, #image09, #image11, #image12, #image13, #image14, #image15 {display:none;}
.imagestep_pre1 #image06, .imagestep_pre1 #image07 {display:none;}

/* for en_US bubble text -1, 2, 3*/
/*
#image10 {width:268px; height:102px; top:155px; left:440px;}
.imagestep2 #image10 {top:90px;}
.en_US .imagestep1 #image10, .en_US .imagestep2 #image10 {z-index:3; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/assets/51501/images/bubble_en_us.png' sizingMethod='scale');}
html>body.en_US .imagestep1 #image10, html>body.en_US .imagestep2 #image10 {background:url("images/bubble_en_us.png") no-repeat left top; filter:none;}
*/

/* Horoscope Landing new pre-step*/
#select_gender_txt {position:absolute; top:108px; left:255px; width:417px; height:44px; text-align:center; z-index:3;}
#select_gender_txt {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/assets/51501/images/gender_txtbg.png', sizingMethod='scale');}
html>body #select_gender_txt {background:url("images/gender_txtbg.png") no-repeat left top; filter:none;}

#select_gender_txt span {line-height:40px; font-size:26px; color:#FFFFFF;}
.de_AT #select_gender_txt span, .de_CH #select_gender_txt span, .de_DE #select_gender_txt span {font-size:19px;}
.fr_BE #select_gender_txt span, .fr_CA #select_gender_txt span, .fr_CH #select_gender_txt span, .fr_FR #select_gender_txt span, .fr_LU #select_gender_txt span {font-size:24px;}

#select_gender_btn {position:absolute; z-index:2; text-align:center; top:132px; left:160px; width:600px; height:420px;}
#select_gender_btn span {display:none;}
a#gender_guy  {width:308px; height:418px; float:left; position:absolute; left:292px; background:url("images/btn_guy.jpg") no-repeat left top;}
a#gender_girl {width:292px; height:418px; float:left; position:absolute; left:5px; top:1px; background:url("images/btn_girl.jpg") no-repeat left top;}

.imagestep_pre1 a:hover#gender_guy {background:url("images/btn_guy_over.jpg") no-repeat left top; border:none;}
.imagestep_pre1 a:hover#gender_girl {background:url("images/btn_girl_over.jpg") no-repeat right top; border:none;}


/* For Horoscoeop New prestep */
#select_sign_name {position:absolute; top:155px; left:190px; width:500px; padding:10px; height:390px; background:url("images/inputzone_bg.gif") no-repeat left top;}
.form_bg0 h2 {height:32px; margin:0 auto 0 20px; padding-left:28px; background:url("images/ico_1.gif") no-repeat left top;
font:normal 24px Verdana, Arial, Helvetica, sans-serif; color:#fff;}

#sign_question {padding:0 0 10px 40px; background: url("images/ico_2.gif") no-repeat left top; font:bold 24px Arial,Helvetica,sans-serif; color:#fff;}

/* For Sign Select*/
#select_sign {margin-left:10px;}
#select_sign h2 {margin:0 0 10px 0; padding-left:40px; background:url("images/ico_2.gif") no-repeat left top;
letter-spacing:-1px; font:bold 24px/35px Arial,Helvetica,sans-serif; color:#FFFFFF; }
#sign_icons a {float:left; padding:0 5px 5px 0; text-align:center; width:76px; height:111px; color:#8bc2f7;}

#sign_icons a h3 {display:none; margin:0 auto 0 auto; font-size:12px;}
#sign_icons a:hover, #sign_icons a:hover span {color:#FFFFFF;}
#sign_icons span {display:none; text-decoration:none; font-size:10px;color:#8bc2f7; letter-spacing:-1px;}

#sign01 {/* top:46px; left:20px;   */ background:url("images/sign_01_aries.jpg") no-repeat left top;} /*Aries (3/21-4/19)*/
#sign02 {/* top:46px; left:100px;  */ background:url("images/sign_02_taurus.jpg") no-repeat left top;} /*Taurus (4/20-5/20)*/
#sign03 {/* top:46px; left:180px;  */ background:url("images/sign_03_gemini.jpg") no-repeat left top;} /*Gemini (5/21-6/21)*/
#sign04 {/* top:46px; left:260px;  */ background:url("images/sign_04_cancer.jpg") no-repeat left top;} /*Cancer (6/22-7/22)*/
#sign05 {/* top:46px; left:340px;  */ background:url("images/sign_05_leo.jpg") no-repeat left top;} /*Leo (7/23-8/22)*/
#sign06 {/* top:46px; left:420px;  */ background:url("images/sign_06_virgo.jpg") no-repeat left top;} /*Virgo (8/22-9/22)*/
#sign07 {/* top:160px; left:20px;  */ background:url("images/sign_07_libra.jpg") no-repeat left top;} /*Libra (9/23-10/22)*/
#sign08 {/* top:160px; left:100px; */ background:url("images/sign_08_scorpio.jpg") no-repeat left top;} /*Scorpio (10/23-11/21)*/
#sign09 {/* top:160px; left:180px; */ background:url("images/sign_09_sagittarius.jpg") no-repeat left top;} /*Sagittarius (11/22-12/21)*/
#sign10 {/* top:160px; left:260px; */ background:url("images/sign_10_capricorn.jpg") no-repeat left top;} /*Capricorn (12/22-1/19)*/
#sign11 {/* top:160px; left:340px; */ background:url("images/sign_11_aquarius.jpg") no-repeat left top;} /*Aquarius (1/20-2/18)*/
#sign12 {/* top:160px; left:420px; */ background:url("images/sign_12_pisces.jpg") no-repeat left top;} /*Pisces (2/19-3/20)*/
:hover#sign01 {background-image:url("images/sign_01_aries_over.jpg");} /*Aries (3/21-4/19)*/
:hover#sign02 {background-image:url("images/sign_02_taurus_over.jpg");} /*Taurus (4/20-5/20)*/
:hover#sign03 {background-image:url("images/sign_03_gemini_over.jpg");} /*Gemini (5/21-6/21)*/
:hover#sign04 {background-image:url("images/sign_04_cancer_over.jpg");} /*Cancer (6/22-7/22)*/
:hover#sign05 {background-image:url("images/sign_05_leo_over.jpg");} /*Leo (7/23-8/22)*/
:hover#sign06 {background-image:url("images/sign_06_virgo_over.jpg");} /*Virgo (8/22-9/22)*/
:hover#sign07 {background-image:url("images/sign_07_libra_over.jpg");} /*Libra (9/23-10/22)*/
:hover#sign08 {background-image:url("images/sign_08_scorpio_over.jpg");} /*Scorpio (10/23-11/21)*/
:hover#sign09 {background-image:url("images/sign_09_sagittarius_over.jpg");} /*Sagittarius (11/22-12/21)*/
:hover#sign10 {background-image:url("images/sign_10_capricorn_over.jpg");} /*Capricorn (12/22-1/19)*/
:hover#sign11 {background-image:url("images/sign_11_aquarius_over.jpg");} /*Aquarius (1/20-2/18)*/
:hover#sign12 {background-image:url("images/sign_12_pisces_over.jpg");} /*Pisces (2/19-3/20)*/


/* for arrow_l and arrow_r */
.imagearrowl {width:17px; height:15px;} .imagearrowr {width:17px; height:15px;}
.form_bg1 .imagearrowl, .form_bg1 .imagearrowr {display:none;}
/* Alert */
#alert {margin-left:-90px;}
html>/*Not IE 7*/body #alert {margin-left:50px;}/*Modern browsers only (not IE 7) */
.form_bg1 #alert {margin-left:-90px;}
html>/*Not IE 7*/body .form_bg1 #alert {margin-left:-20px;}/*Modern browsers only (not IE 7) */
.form_bg1 #checkboxa {background-color:transparent;} .form_bg1 #alert {display:none;}
.form_bg2 #inputcheckbox {display:none;}

/* for submit button */
/* html page a,b,c */
.imagesubmit {display:block; margin:auto; border:0; width:237px; height:85px; background-image:url("images/submit_en_us.gif");}
html>body .imagesubmit {background-image:url("images/submit_en_us.gif");}
:hover.imagesubmit {background-position:0 85px;}

.imagestep3 .submit_link span {display:none;}
#quiz_results {margin-top:30px;}
#quiz_results h2 {font-size:20px; font-weight:bold;}
#quiz_results h3 {font-size:18px; font-weight:bold; margin-bottom:0;}
#quiz_results p {font-size:14px;}



/* Input zone and input field */
#inputzone {top:155px; left:190px; width:520px; height:390px; background:url("images/inputzone_bg.gif") no-repeat left top; filter:none;}
#inputzone.form_bg2 {background:url("images/inputzone_bg2.gif") no-repeat left top;}

.imagestep0 #inputzone {display:none;}
.form_bg1 {padding-top:10px;} .form_bg2 {padding-top:20px;}

input.phonearea,input.phoneprefix, input.phonesuffix, .password, .mobileTextField
 {color:#134779; background-color:#FFFFFF; width:80px; height:40px; border:2px solid #000000; font-size:30px;}
.mobileTextField {width:180px;}
#inputname #username {font-size:28px; width:260px; margin:5px 0 15px 0;}
#inputname {z-index:5;}
#username {z-index:6;}

#operatorlist {color:#000000;} /*Select Your Carrier*/
.form_bg1 #inputtext1 {padding-left:28px; font:Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#FFFFFF;}/*Enter Your Cell Phone Number */
.form_bg1 #inputtext1 {margin:0 auto 0 80px; width:400px; height:40px; font-size:17px; background:url("images/ico_3.gif") no-repeat left top; text-transform:none; font-weight:bold; letter-spacing:-1px;}

#countrycode, .hyphen {color:#FFFFFF;} /* (+44) */

#inputtext4 {color:#FFFFFF; margin-top:6px;} /* Funmobile has sent the 4-digit password in a text message to your cell phone. */
#inputtext5 {color:#FFFFFF;} /* Where should we send your ringtones */
.fstyle1 {color:#FFFFFF;} /* We are now sending you the PIN to :123-456-7890 */
.fstyle2 {color:#FFFFFF;} /* +44 1234567890 */
.fstyle3 {color:#FFFFFF; font-size:10px;} /* Please check your phone. Just enter the PIN below. */
.fstyle4 {color:#FFFFFF;}
.fstyle4a {color:#FFFFFF;} /*You should have received your password now.*/
.fstyle4b {color:#FFFFFF;} /* Enter the PIN below. Alternatively, you can */
.fstyle5 {color:#FFFFFF;} /* text YES to 71769 / Send the text with OK to 88838 */
.fstyle6 {color:#FCFF00;} /* Yes 71769 / OK 88838 */
.fstyle7 {color:#FFFFFF;} /* You will now receive instructions SMS from 88838 */

/* for oppc font style */
.fstyle8 {color:#000000;} /*right text*/
.fstyle9 {color:#000000;} /*right text "Reply"*/
.fstyle10 {color:#ce0000;} /*right text "YES"*/
.fstyle11 {color:#ffffff;} /*phone text "Reply"*/
.fstyle12 {color:#000099;} /*phone text "YES""*/
.fstyle13 {color:#000000;} /*Do not close this window!*/
#oppc_text2 span {background-color:#ffcc00;} /*Reply "YES" background color"*/
#oppc {margin-left:55px;}

.demo_steps_text {color:#FFFFFF;}
#term_text {color:#FFFFFF;} /* I've read the terms and conditions */
.chkbox_color_text,.chkbox_color_link {color:#FFFFFF;} /* check box text */
#disclaimer, a.unsub, a.blacklink {color:#FFFFFF; z-index:2;} /* T&C text */

#subtitle1, #subtitle2 {left:100px; width:700px; z-index:10;}

#pricing1 {text-align:center !important;}

/* BEGIN for title spanning two lines */
/**
 * see also 51217
 */
.de_AT #select_gender_txt,
.fr_CA #select_gender_txt,
.de_CH #select_gender_txt, .fr_CH #select_gender_txt, .it_CH #select_gender_txt,
.de_DE #select_gender_txt,
.et_EE #select_gender_txt,
.fr_FR #select_gender_txt,
.el_GR #select_gender_txt,
.hu_HU #select_gender_txt,
.hr_HR #select_gender_txt,
.lt_LT #select_gender_txt,
.fr_LU #select_gender_txt,
.nl_NL #select_gender_txt,
.pl_PL #select_gender_txt,
.pt_PT #select_gender_txt,
.sk_SK #select_gender_txt,
.sl_SI #select_gender_txt,
.zh_TW #select_gender_txt,
.uk_UA #select_gender_txt
 {top:535px; background:url("images/gender_txtbg_up.png") no-repeat left top; filter:none;}
/* END for title spanning two lines */

/* country specific */

/* For en_US FTC rule move up */
.en_US #container, .en_US #leftcontent, .en_US #rightcontent {margin-top:0;}
.en_US .form_bg1 {padding-top:20px;}
.en_US #logos, .en_US #tnc {top:520px;}
.en_US #subtitle1, .en_US #subtitle2 {top:98px; text-align:center; font:bold 16px Arial; color:#000000;}
.en_US .imagestep_pre1 #subtitle1 {top:93px;}
.en_US #select_gender_txt {top:113px;}
.en_US #inputzone_p1 {margin-top:100px;}
.en_US #inputzone_p2 {margin-top:25px;}
.en_US #inputphone {margin-top:20px;}
.en_US #subtitle_us_f, .en_US #subtitle_us_m {position:absolute; display:none; top:65px; left:0; width:180px; font:bold 16px Arial; text-align:justify;}
.en_US #subtitle_us_m {left:730px; width:190px;}
.en_US .op_31003 #subtitle_us_f, .en_US .op_31003 #subtitle_us_m {display:block;}

.en_CA #tnc, .en_CA #disclaimer, .en_CA #tnc a.unsub,
.fr_CA #tnc, .fr_CA #disclaimer, .fr_CA #tnc a.unsub {color: #5F86B1;}

.en_GB #subtitle1 {display:none; color:#000; right:40px; top:0;}
.en_GB .imagestep1 #subtitle1 {display:block;}
.en_GB #msisdn {font-size:36px; height:40px; width:240px;}

.en_CA #tnc {top:500px;}

.en_IE #subtitle1 {display:none; color:#000; right:40px; top:0;}
.en_IE .imagestep1 #subtitle1 {display:block;}
.en_IE #msisdn {font-size:36px; height:40px; width:240px;}

.en_ZA #subtitle1, .en_ZA #subtitle2 {display:none; color:#000; right:0; top:0;}
.en_ZA .imagestep1 #subtitle1 {display:block;}

.de_AT .imagestep1 #subtitle1, .de_AT #subtitle2 {display:block; left:100px;}

.de_CH #subtitle1, .de_CH #subtitle2 {display:block; left:100px;}
.fr_CH #subtitle1, .fr_CH #subtitle2 {display:block; left:100px;}
.it_CH #subtitle1, .it_CH #subtitle2 {display:block; left:100px;}

.cs_CZ #inputzone.form_bg2 {padding-top:40px;}

.el_GR .imagestep1 #subtitle1, .el_GR #subtitle2 {display:block; left:100px;}

.et_EE .imagestep1 #subtitle1, .et_EE #subtitle2 {display:block; left:100px;}

.hu_HU .imagestep1 #subtitle1, .hu_HU #subtitle2 {display:block; left:100px;}

.id_ID .imagestep1 #subtitle1, .id_ID #subtitle2 {display:block;}
.id_ID #logos {display:block;} .id_ID #tnc {margin-top:50px;}

.lt_LT .imagestep1 #subtitle1, .lt_LT #subtitle2 {display:block; left:100px;}
.lt_LT .imagestep2 .form_bg2 {padding-top:35px;}
.lt_LT #tnc {top:555px !important;}

.lv_LV .imagestep1 #subtitle1, .lv_LV #subtitle2 {display:block; left:100px;}
.lv_LV #logos {display:block;} .lv_LV #tnc {margin-top:60px;}

.nl_NL #subtitle1, .nl_NL #subtitle2 {top:123px; text-align:center;}

.sk_SK .imagestep1 #subtitle1, .sk_SK #subtitle2 {display:block; left:100px;}

.sl_SI .imagestep1 #subtitle1, .sl_SI #subtitle2 {display:block; left:100px;}

.zh_TW #subtitle1, .zh_TW #subtitle2 {font-size:12px;}