﻿/* NORMALIZES Browers Styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0;outline:none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:collapse;border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,th,var { font-style:normal;font-weight:normal; }
ol,ul { list-style:none;}
caption,th { text-align:left;}
h1,h2,h3,h4,h5,h6 { font-size:100%;}
q:before,q:after { content:'';}
a { text-decoration: none; }
a img { border:0;} 
/* remember to define focus styles! */
:focus,:hover,:active { outline: none !important; -moz-user-focus:ignore; }

/****************************************/
/*** Classes for LOGIN page             */
/****************************************/

body {
	font:62.5% arial,verdana, helvetica ;
	color:#111;
	margin:0;
}	

a {color:#30336b;text-decoration:underline !important;}

a:visited {color:#30336b;}

a:hover{color:#FF9933;}

a.featured {font-weight:bold;}

a:link,
	a:visited,
	a:active{-moz-outline:none;}
	
h1 {
    font-size:1.8em;
    margin-top:10px;
    margin-bottom:10px;
    border-bottom:2px solid #cecece;
    font-family:Arial,Tahoma,Verdana;
}

h2 {
    font-size:13px;
    font-weight:bold;
    font-family:Arial, Verdana;
    margin-top:10px;
    margin-bottom:10px;
    border-bottom:1px solid #999;}

.clear {clear:both;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


h5 {
	text-align:left;
	font-size:1.5em;
	font-weight:bold;
	color:#30336b;
	margin:30px 0 30px 40px;
}

h5 strong {font-size:1.2em;}

#wrapper {
	width:1000px;
	margin:0 auto;	
}

#login {
	width:1000px;
	height:484px;
	background:url(http://www.internetophone.com/es/images/login/backgrounds/bg-login.jpg) no-repeat left top;
	margin:0 auto;
	position:relative;
	text-align:center;
	background-image: url(http://www.internetophone.com/es/images/login/backgrounds/bg-login.jpg);
}
#login h1 {
	position:absolute;
	left:50%;
	top:0;
	margin-left:-168px;
	text-indent:-9000em;
	width:364px;
	height:150px;
	margin-top:0;
	border:0;
}
div.start-tree {
	width:420px;
	height:294px;
	position:absolute;
	top:157px;
	left:286px;
}
div.start-tree h2 {
	border:0;
	color:#30336b;
	width:295px;
	font-size:1.6em;
	font-weight:500;
	margin:30px auto 0;
	line-height:1;
}
div.start-tree h2 big{
	font-size:1.2em;
	font-weight:bolder;
}
div.start-tree h3 {
	font-size:1.5em;
	color:#9BBFC6;
	width:323px;
	height:139px;
	margin:5px auto 0;
}

div.start-tree a.import-tree {
	margin-top:8px;
	font-size:1.3em;
	text-decoration:none !important;
	display:block
}
span.underline {
	text-decoration:underline;
	font-weight:bold;
}
div.what-is {
	position:absolute;
	width:229px;
	height:284px;
	left:40px;
	top:163px;
}

div.what-is h3 {
	font-size:1.7em;
	font-weight:500;
	color:#30336b;
	text-align:center;
	margin:30px auto 0;
	/*width:147px;*/
	height:200px;
}
div.what-is h3 big {
	font-size:1.3em;
	font-weight:900;

}
/*Agregado por ATBK*/
div.what-is Flash {
	width:90%;
	position:absolute;
	left:10px;
	top: 95px;
	height: 137px;
}


/***************** Forms Styles Login Start ****************/
input, select { font:12px Arial, Verdana, Tahoma;}
 
.watermarked, .watermark {
	color:#bbb;  
 }
#login input[type=text], #login input[type=password]{
	font-size:130%;
	font-family:arial;
	border:2px solid #B2CDD6 !important;
	padding:0 2px; 
}

input:focus, input:active {
	background-color: #ffc;
}

#login fieldset {
	border:0;
	margin:0;
	position:absolute;
	top:148px; 
	right:32px;
	width:250px;
	height:315px;
}

#login dl {
	margin:0 auto;
	padding:0;
	width:200px;
	text-align:center;
}

#login dt {
	margin-left:14px;
	color:#30336b;
	font-weight:bold;
	font-size:1.2em;
	text-align:left !important;
}
#login dd {min-height:24px;_height:24px;}
#login dt, #login dd {margin-bottom:2px;}
#login dd input[type=text],#login dd input[type=password] {margin-bottom:6px;} 
#login input.medium { width:165px;}

.ask-gender input { margin-right:6px;}

div.links  {width:390px;margin:0 auto;min-height:30px;_height:30px;color:#336699;text-align:center;}
div.links ul {display:inline;}
div.links li { display:inline;padding-right:10px;font-size:1.3em;}
div.links li.recommend {padding-right:0;}

.password-recover {
    background-color:#ffffcf;
	color: #333;
	border:2px solid #cecece;
	font-size:11px !important;
	padding-left:5px;
	margin-left:5px;
	width:250px; 
}

#login div a.btn { background:url(http://www.internetophone.com/es/images/login/buttons/buttons-login.gif) no-repeat}
div a.btn2 { background:url(http://www.internetophone.com/es/images/login/buttons/buttons-login.gif) no-repeat}

div a.btn2 {background-position:-130px 0}
div a.btn2:hover { background-position:-130px -50px !important;color:#30336b !important}

a.new-user { 
	width:182px;
	height:50px;
	line-height:50px;
	vertical-align:middle;
	margin:5px auto 0;
	text-align:center;
	border:0;
	cursor:pointer;
	display:block;
	font-size:1.4em;
	font-weight:bold;
	text-decoration:none !important;
	font-family:Arial, Verdana;
	outline:none;
}
#login div.start-tree a.btn {background-position:-130px 0}
#login div.start-tree a.btn:hover { background-position:-130px -50px !important;color:#30336b !important}

#login div.start-tree a.VerVideo {}
#login div.start-tree a.VerVideo:hover {}

#login div.start-tree a.new-user strong {font-size:1.3em;text-decoration:underline}
#login div.start-tree a.new-user big    {font-size:1.8em;font-weight:normal;margin-top:-5px;display:block;}

#login a.login {
	width:104px;
	height:36px;
	line-height:32px;
	vertical-align:middle;
	border:0;
	color:#30336b;	
	font-weight:bold;
	font-size:1.3em;
	cursor:pointer;
	display:block;
	text-align:center;
	margin:10px auto 0;
	text-decoration:none !important;
	font-family:Arial, Verdana;
}
#login div dd.enter a.btn {background-position:-312px 0}
#login div dd.enter a.btn:hover {background-position:-312px -36px;}
#login dd.enter { position:relative;width:100%;height:100%;overflow:hidden;}
#login img.spinner {position:absolute;right:23px;top:18px;}

/*************** Forms Styles Login Finish ***************/


/***************** Forms Styles New User ****************/

div.new_user_form { 
	width:375px;
	height:550px;		
	background:url(http://www.internetophone.com/es/images/login/backgrounds/bg-newuser.png) no-repeat left top;
	outline:none;
}
div.gedcom {
	width:375px;
	height:240px;		
	background:url(http://www.internetophone.com/es/images/login/backgrounds/bg-newuser-gedcom.png) no-repeat left top;
	outline:none;
}
div.gedcom p {
	font-size:1.7em; 
	font-weight:bolder;
	color:#476D80;
	text-align:center;
	margin-bottom:5px;
}
div.gedcom p.secure {
	color:#b17110;
	padding-left:30px;
	text-align:left;
	height:22px;
	margin-bottom:10px;
	font:normal 0.9em Tahoma, arial, helvetica;	
}
div.gedcom .start { 
	background:url(http://www.internetophone.com/es/images/login/buttons/btn-create-tree.png) no-repeat 0 -68px;
	outline:none;
	width:246px;
	height:68px;
	margin:0 auto;
	border:0; 
	clear:both;
	cursor:pointer;
	display:block;
	text-align:center;
	vertical-align:middle;
	line-height:68px;
	font-size:1.4em;
	padding-left:10px;
	text-decoration: none !important;
}

div.gedcom .start:hover { background-position:0 0;color:#456F7F !important;}
div.gedcom .start strong {font-size:1.5em;text-decoration:underline}

div.new_user_form fieldset { 
	font-size:1.1em; 
	color:#476D80;
	font-weight:bold;
	padding:15px 20px 20px;
} 

div.new_user_form p {
	font-size:1.7em; 
	font-weight:bolder;
	color:#476D80;
	text-align:center;
	margin-bottom:5px;
}
div.new_user_form p.secure {
	color:#b17110;
	padding-left:30px;
	text-align:left;
	height:22px;
	margin-bottom:10px;
	font:normal 0.9em Tahoma, arial, helvetica;	
}
div.new_user_form p.agreement,div.new_user_form p.agreement  {
	font:normal 0.9em Tahoma, arial, helvetica;
	color:#7F7F7F;
	margin-top:8px;
}
div.new_user_form p.agreement a:hover {color:#476D80;}
div.new_user_form fieldset legend {display:none;} 

div.new_user_form fieldset dd label { 
	width:85px; 
	vertical-align:middle;
	padding-left:18px;
	margin-left:8px;
}

div.new_user_form fieldset dt {
	clear:both;
	margin-bottom:5px;
}

div.new_user_form fieldset dd { 
    margin-bottom:10px;
	height:1%;
	padding-left:15px;
}

div.new_user_form fieldset dd.gender,
div.new_user_form fieldset dd.brothers,
div.new_user_form fieldset dd.children { 
	
	padding-left:30px;
}

div.new_user_form fieldset dd label.hide {
	display:none;
}
div.new_user_form fieldset input.extra-small, 
div.new_user_form fieldset dd label { float:left; }

div.new_user_form fieldset div.wrapper-value input {
	color:#456F7F;
	padding:2px;
	font-family:arial;
	font-weight:normal;
	font-size:1.1em;
}
div.new_user_form dd.gender input {
	height:20px;
	line-height:20px;
	vertical-align:middle;
	margin-left:5px;
}
 div.new_user_form dd.name-user input,  div.new_user_form dd.mail-user input, div.new_user_form dd.brothers input, div.new_user_form dd.children input {
	border:2px solid #B2CDD6 !important;
}
div.new_user_form dd.gender div.male, div.new_user_form dd.gender div.female {
	width:29%;float:left;
}
div.new_user_form dd.gender div.male {
	margin-right:20px;
}
div.new_user_form dd.brothers input.extra-small, 
div.new_user_form dd.children input.extra-small { 
	text-align:right;
	padding:1px 2px 1px 0;
}

div.new_user_form .start { 
	background:url(http://www.internetophone.com/es/images/login/buttons/btn-create-tree.png) no-repeat 0 -68px;
	outline:none;
	width:246px;
	height:68px;
	margin:0 auto;
	border:0; 
	clear:both;
	cursor:pointer;
	display:block;
	text-align:center;
	vertical-align:middle;
	line-height:68px;
	font-size:1.4em;
	padding-left:10px;
	text-decoration: none !important;
}

div.new_user_form .start:hover { background-position:0 0;color:#456F7F !important;}
div.new_user_form .start strong {font-size:1.5em;text-decoration:underline}

div.new_user_form .cancel { 
	display:block;
	width:60px;
	height:14px; 
	margin:0 auto !important;
	padding:0 !important;
	color:#456F7F;
	text-transform:lowercase;
	clear:both;
}

div.new_user_form .cancel:hover { color:#F38E32}

div.new_user_form .extra-small {
	width:16px;
}

.name-user div.wrapper-value, .mail-user div.wrapper-value {
	width:140px !important;
	float:left;
	margin:0;
	padding:0;
	display:inline;
}
.name-user div.wrapper-value input, .mail-user div.wrapper-value input{ float:left}

.mail-user div.wrapper-value, .mail-user div.wrapper-value input { width:200px !important;}

.female { color:#F58D34 }
.male 	{ color:#BCC838 }

div.new_user_form dd div { background:url(http://www.internetophone.com/es/images/icons/forms/start-tree.png) no-repeat;}
div.new_user_form dd.brothers div div, div.new_user_form dd.children div div  {background:none;}

.ask-gender .female {
	padding-left:10px;
	float:left;
	
}
.ask-gender .male {
	padding-left:10px;
	float:left;
	width:120px !important;
}
div.new_user_form dd.gender div.ask-gender div.female	{ background-position:0 0;}
div.new_user_form dd.gender div.ask-gender div.male		{ background-position:0 -34px;}

div.new_user_form dd.brothers div.female	{ background-position:0 -67px;}
div.new_user_form dd.brothers div.male		{ background-position:0 -104px;}

div.new_user_form dd.children div.female	{ background-position:0 -137px;}
div.new_user_form dd.children div.male		{ background-position:0 -172px;}


.brothers div.female label, .brothers div.male label,
.children div.male  label, .children div.female label {
	line-height:25px;
	vertical-align:middle;
	height:25px;
	float:left;
	text-align:left;
	padding-left:37px;
}

dd.brothers div.female , dd.brothers div.male ,
dd.children div.male , dd.children div.female  {
	position:relative;
	width:49%;
	float:left;
}
dd.brothers div.female input, dd.brothers div.male input, dd.children div.male  input, dd.children div.female input {
	position:absolute;
	left:18px;
	top:3px;
	margin:0;
}

div.new_user_form dd , div.new_user_form dt {margin:0;padding:0;}

div.new_user_form dd {overflow:hidden;}
div.create-tree {position:relative;float:left;width:100%;}
img.indicator {position:absolute;top:25px;right:30px;}

/* GEDCOM */ 
div.gedcom fieldset p {font-size:1.5em;font-weight:bold;}
div.gedcom dt {margin-left:15px;}
div.gedcom dd input {width:310px;}

/*************** Forms Styles New User Finish *****************/ 

/*****  PASSWORD RECOVERY *****/

.recoverpass {
    background-color:#fff;
    border:2px solid #30336b;
    padding:15px;
    font:1em Arial,verdana,helvetica;
    width: 390px; 
    height: 200px;
    text-align: left; 
	position:relative;
}
 
.recoverpass .btnsubmit {
	font-weight:normal;
	font-size:1.2em !important;
	text-align:center;
	margin:0 auto;
	width:80px;
}

.recoverpass table td.title {
	font:bold 1.8em Arial,verdana,helvetica !important;
	padding:5px 0 20px;
	color:#30336b;
	background:url(http://www.internetophone.com/es/images/icons/misc/recover-password.gif) no-repeat 10px 50%;
}
.recoverpass table td {
	font:bold 1.3em Arial,verdana,helvetica !important;
	padding:5px 0;
	text-align:center;
}
.recoverpass .instructions {
	margin-bottom:20px;
    font-size:1.5em;
    font-weight:bold;
    text-align:left;
}
.recoverpass input.bigger {width:380px !important}
.recoverpass span.close-window {
	display:block;
	position:absolute;
	right:6px;
	top:6px;
	cursor:pointer;
}
.recoverpass a.close-window {
	font-size:1.1em;
	position:absolute;
	right:115px;
	bottom:35px;
	display:inline;
}
/***   FIRST TIME FORM *****/

.firsttimepanel {
    background:#FFF;
    border:2px solid #30336b;
    font-size:1.8em;
    color:#333;
    font-family:Trebuchet MS, arail;
}
.firsttimepanel .head {
    font-size:1.8em !important;
    text-align:center;
    font-weight:bold;
}
.firsttimepanel .buttons {
    margin-top:10px;
    font-size:0.7em;
}

.firsttimepanel .passwordzone {
    margin-top:20px;    
    font-size:1em;
    text-align:center;
}   
.textbox {
    display:block;
    border:2px solid #b3cdd6;
    font-size:1.3em;
    height:25px;
    width:220px;
    margin-bottom:10px;
}
.firsttimepanel .passwordbox {
    font-size:0.9em;
}
.firsttimepanel .changepassword {
    margin:20px 0 15px 0;
    font-size:1.3em;
}
.firsttimepanel .password {
    padding:5px;
    background-color:#FFFF99;
}
.firsttimepanel .terms {
    font-size:1.2em;
}
.btnAccept {
    font-size:1.8em;
    height:35px;
}

.genderRequired {
	background-color: #ffff99 !important;
	
}
/****** View Tour ******/ 
#login div.what-is a.btn		 {background-position:0 0;}
#login div.what-is a.btn:hover {background-position: 0 -36px;color:#30336b !important}

a.view-tour {
	width:130px;
	height:36px;
	line-height:34px;
	vertical-align:middle;
	font-size:1.5em;
	font-weight:bold; 
	cursor:pointer;
	margin:10px auto 0;
	text-align:center;
	text-decoration:none !important;
	display:block;
}

a.view-tourVideo {
	width:200px;
	height:145px;
	line-height:0px;
	vertical-align:middle;
	font-size:1.5em;
	font-weight:bold; 
	cursor:pointer;
	margin:0px auto 0;
	text-align:center;
	text-decoration:none !important;
	display:block;
}


/****************************************/
/*** Classes for Suscribirse Box           ***/
/****************************************/



#Suscribirse {
	width:1000px;
	height:20px; /* original: 464px */
	 /*  background:url(http://www.internetophone.com/es/images/login/backgrounds/bg-login.jpg) no-repeat left top;*/
	 /*  background:url(http://www.internetophone.com/images/backgrounds/suscripcion.gif) repeat-x left top;*/
	margin:0 auto;
	position:relative;
	text-align:center;
	 /*  background-image: url(http://www.internetophone.com/es/images/login/backgrounds/bg-login.jpg);*/
}

#Suscribirse h1 {
	position:absolute;
	left:50%;
	top:0;
	margin-left:0px;
	text-indent:-9000em;
	width:364px;
	height:20px;  /* original: 150px */
	margin-top:0;
	border:0;
}

/*** Divs internos for Suscribirse Box           ***/

div.Suscribirse {
	position:absolute;
	width:100%;  /* original: 229px;*/
	height:20px; /* original: 284px */
	left:0px;
	top:0px;
}

div.Suscribirse {
	font-size:1.3em;
	font-weight:500;
	color:#30336b;
	text-align:center;
	margin:0px auto 0;
	/*width:147px;*/
	height:0px;
}





/****************************************/
/*** estilos for Cortinas           ***/
/****************************************/

#Cortina-VerVideo {
	font-size:1.3em;
	font-weight:500;
	color:#FAFAFC;
	text-align:center;
	margin:0px auto 0;
	/*width:147px;*/
	height:0px;
}




/****************************************/
/*** Classes for Footer Box           ***/
/****************************************/

#footer 
{
   font-size:1.2em;
   text-align:left;
   border-top:3px solid #164884;
   background:url(http://www.internetophone.com/es/images/backgrounds/bg-footer.gif) repeat-x left top;
   position:relative;
}


#footer .languages {
	font-size:1.2em;
	margin-top:10px;
	text-align:center;
}
 
#footerlt .copyright , #footer .footer-nav {
    font-size:1.2em;
    margin-top:0;
    margin-left:5px;
    padding-top:1px;
    color:#999;
    text-align:center;
}
#footer .footer-nav {
    margin-top:15px;
}
a.btn-help  {
	display:block;
	width:30px;
	height:28px;
	position:absolute;
	top:-15px;
	left:50%;
	margin-left:-15px;
	background:url(http://www.internetophone.com/es/images/buttons/btn-help.png) no-repeat left top;
}
a.btn-help:hover { background-position:0 -28px;}


/******************************/
/*** Modal Popups          ***/
/*****************************/
.modalBackground {
	background-color: #bbb;
	filter:alpha(opacity=70);
	opacity:0.7;}

.modalPopup-transparent {
    background-color:Transparent;
    border:0;
}

