/***********************************
 * ESTILOS GENERALES HTML
 ***********************************/

html {height: 100%;}
body {margin: 0; padding: 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; color: #00447b; height: 100%;}
a {color: #17a3c9; text-decoration: none;}
a:hover {text-decoration: underline;}
img {border: 0; margin: 0; padding: 0;}
form {margin: 0;}
sup {line-height: 1pt; font-size: 0.7em;}

.clear {clear: both;}

/***************************
 * WRAPPER
 ***************************/

#wrapper {width: 980px; margin: 0 auto 0 auto;  min-height: 100%; height:auto !important; height: 100%; background: #c6ddf1;}

/***************************
 * HEADER
 ***************************/

#header {position: relative; height: 180px; background: #fff url(../img/bg_header.gif) repeat-x;}
#logo_biorepair {position: absolute; top: 35px; left: 30px}
#logo_coswell {position: absolute; top: 40px; right: 30px;}
#logo_m4 {position: absolute; top: 40px; right: 160px;}

/* MENU DE NAVEGACION */

#nav_menu_wrapper {background: #fff; position: absolute; bottom: 0; height: 23px; width: 100%;}
#nav_menu_wrapper a {background: url(../img/separador_menu_off_off.gif) top right no-repeat;}
#nav_menu_wrapper ul ul a {background: none;}
#nav_menu_wrapper li.last a {background: url(../img/separador_fin_menu.gif) top right no-repeat;}

/*************************************************
 * ESTILOS GENERALES CONTENIDO PRINCIPAL
 *************************************************/

.main_contents {background: #c6ddf1; padding: 30px; overflow: hidden;}
.main_contents ul {margin-left: 0; padding-left: 0; list-style: none;}
.main_contents li {background: url(../img/bullet.gif) no-repeat 0 5px; padding: 0 0 0 10px;}
.main_contents a {color: #ee1b22;}

/* headers */

.main_contents h1 {font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 30pt; font-weight: normal; color: #00447b; margin: 0 0 20px 0; line-height: 1em;}
.main_contents h2 {font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 14pt; font-weight: normal; color: #8ea4c6; margin: 0px 0 10px 0; line-height: 1em;}
.main_contents h3 {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; line-height: 1em; margin: 0; text-transform: uppercase;}
.main_contents h4 {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt;}
.main_contents h1.white {color: #fff;}
.main_contents h2.blue {color: #00447b;}
.main_contents h1 sup {line-height: 1pt; font-size: 0.3em;}
.main_contents h2 sup {line-height: 1pt; font-size: 0.4em;}
.main_contents h3 sup {line-height: 1pt; font-size: 0.5em;}

/* tables */

/* espaciados bloques texto */

.text_block {margin: 0 0 20px 0;}

/* mensajes y errores */

.error_box {width: 400px; border: 1px solid #EE382E; color: #EE382E; padding: 5px 10px 5px 10px; background: #ead2d2; margin: 0 0 20px 0;}
.message_box {width: 400px; border: 1px solid #00447B; color: #00447B; padding: 5px 10px 5px 10px; background: #A4BFEF; margin: 0 0 20px 0;}


/**************************************
 * PANEL LOGIN
 **************************************/

#right {width: 188px; float: right;}
#right img {margin: 0; border: 0; display: block;}
#right .panel_login h2 {background: #003d6c url(../img/bg_esquinas_panel_top.gif) no-repeat; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-transform: uppercase; color: #fff; padding: 8px; margin: 0;}
#right .login_form {border: 1px solid #003d6c; background: #7e94bb; padding: 8px;}
#right .login_form label {display: block; color: #fff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt;}
#right .login_form .input {margin: 0 0 5px 0;}
#right .login_form .input input {width: 168px; border: 1px solid #6279a1; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; font-weight: bold; color: #003d6c;}
#right .login_form .submit {text-align: right;}
#right .login_form .submit input {border: 0; background: none; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; text-transform: uppercase; color: #fff; padding: 0; position: relative; left: 3px; cursor: pointer;}
#right .login_form .submit input:hover {color: #003d6c;}
#right .panel_login .links {color: #fff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 8pt; padding: 3px 8px 5px 8px; background: #003d6c url(../img/bg_esquinas_panel_bottom.gif) no-repeat bottom left;}
#right .panel_login .links p {margin: 0;}
#right .panel_login .links a {color: #fff;}
#right .panel_login .links a:hover {text-decoration: underline;}
#right .panel_login, #right .panel_video, #right .panel_glosario {margin: 0 0 5px 0;}

/**************************************
 * ESTILOS ESPECIFICOS DE SECCION
 **************************************/

.main_contents #foto {width: 250px; float: left; margin: 0 30px 0 0;}
.main_contents #text {width: 430px; float: left;}

/* HOME *******************/

#home {min-height: 440px; height: auto !important; height: 440px;}
#home #text p {width: 400px;}

/* HISTORIA *******************/

/* PROF. NORBERTO ROVERI *******************/
#profesor-norberto-roveri #text {width: 630px; margin: 0 0 0 20px;}
#profesor-norberto-roveri .page {margin: 20px 0 20px 0;}
#profesor-norberto-roveri ul.nav {margin: 0 0 0 230px;}
#profesor-norberto-roveri ul.nav li {display: inline; background: none;}
#profesor-norberto-roveri ul.nav li.txt_current {position: relative; top: -5px;}

/* MECANISMO DE ACCION *******************/

#mecanismo-de-accion #text {width: 700px;}
#mecanismo-de-accion #video-mecanismo {width: 358px; height: 260px; float: right; margin: 10px 0 20px 20px;}

/* GLOSARIO VIRTUAL *******************/

#glosario-virtual {min-height: 440px; height: auto !important; height: 440px;}
#glosario-virtual #text {}
#glosario-virtual #animacion_diente {float: right;}
#glosario-virtual #text p, #glosario-virtual #text h1 {width: 270px;}
#glosario-virtual p.word {margin-bottom: 0;}
#glosario-virtual p.word a {color: #00447b; font-weight: bold;}
#glosario-virtual div.def p {margin: 0;}

/* PROTECCION TOTAL *******************/

#proteccion-total {min-height: 440px; height: auto !important; height: 440px;}
#proteccion-total #foto .footer {font-size: 8pt; text-align: center; margin: -40px 0 0 0;}
#proteccion-total #text {width: 380px;}

/* DIENTES SENSIBLES *******************/

#dientes-sensibles {min-height: 440px; height: auto !important; height: 440px;}
#dientes-sensibles #foto .footer {font-size: 8pt; text-align: center; margin: -40px 0 0 0;}

/* COLUTORIO *******************/

#colutorio {min-height: 440px; height: auto !important; height: 440px;}
#colutorio #foto .footer {font-size: 8pt; text-align: center; margin: -20px 0 0 0;}

/* EL ODONTOLOGO RESPONDE *******************/

#el-odontologo-responde #text .text {width: 420px;}
#el-odontologo-responde #text .query_form {width: 400px; margin: 20px 0 0 0;}
#el-odontologo-responde #text .query_form table {width: 420px; border-collapse: collapse;}
#el-odontologo-responde #text .query_form .form_header, #el-odontologo-responde #text .query_form .form_footer {background: #2e6296; color: #fff; font-size: 8pt; padding: 2px 5px 2px 5px;}
#el-odontologo-responde #text .query_form .form_header {font-weight: bold;}
#el-odontologo-responde #text .query_form .text_area {background: #fff; height: 120px; background: url(../img/foto_cborau.jpg) no-repeat;}
#el-odontologo-responde #text .query_form .text_area textarea {width: 307px; height: 100px; margin: 0 0 0 93px; border: 0; padding: 10px;}
#el-odontologo-responde #text .query_form .form_footer {position: relative;}
#el-odontologo-responde #text .query_form .submit {border: 0; background: none; font-size: 8pt; color: #fff; cursor: pointer; margin: -1px 0 0 0; padding: 0; position: absolute; left: 360px;}

/* PREGUNTAS FRECUENTES *******************/

#preguntas-frecuentes {min-height: 440px; height: auto !important; height: 440px;}
#preguntas-frecuentes p.question {font-size: 10pt; font-weight: bold; margin: 0 0 10px 0;}
#preguntas-frecuentes p.question a {color: #00447b;}

/* HIGIENE *******************/

#higiene p.question {font-size: 10pt; font-weight: bold; margin: 10px 0 10px 0;}
#higiene p.question a {color: #00447b;}

/* PRECAUCIONES *******************/

#precauciones h3 a {color: #00447b; font-weight: bold;}

/* CONTACTO *******************/

#contacto .form {margin-top: 30px;}
#contacto label {display: block; width: 59px; float:left; color: #00447b; font-weight: bold; padding: 2px 0 0 0;}
#contacto .input {margin: 0 0 10px 0;}
#contacto .input input,
#contacto textarea {width: 340px; border: 1px solid #a2c5e2;}
#contacto .input input#UserName {width: 130px; border: 1px solid #a2c5e2; float: left; margin: 0 20px 0 0;}
#contacto .input input#UserMail {width: 130px; border: 1px solid #a2c5e2;}
#contacto .message .message-message {padding: 0 0 0 80px; font-size: 8pt; color: #00447B;}
#contacto .submit {padding: 10px 0 0 0; text-align: center;}

/* REGISTRO *******************/

#registro {min-height: 440px; height: auto !important; height: 440px;}
#registro label {display: block; width: 80px; float:left; color: #00447b; font-weight: bold; padding: 2px 0 0 0;}
#registro .input {margin: 0 0 10px 0;}
#registro .input input {width: 340px; border: 1px solid #a2c5e2;}
#registro .input input#UserApellido1 {width: 125px; border: 1px solid #a2c5e2;}
#registro .input input#UserApellido2 {width: 125px; border: 1px solid #a2c5e2;}
#registro .input input#UserMail {width: 340px; border: 1px solid #a2c5e2;}
#registro .input select {width: 340px; border: 1px solid #a2c5e2;}
#registro .error_box {width: 400px; border: 1px solid #EE382E; color: #EE382E; padding: 10px; background: #ead2d2; margin: 0 0 20px 0;}
#registro .error .error-message {padding: 0 0 0 80px; font-size: 8pt; color: #EE382E;}
#registro .message_box {width: 400px; border: 1px solid #00447B; color: #00447B; padding: 10px; background: #A4BFEF; margin: 0 0 20px 0;}
#registro .message .message-message {padding: 0 0 0 80px; font-size: 8pt; color: #00447B;}
#registro .submit {padding: 10px 0 0 0; text-align: center;}

/**************************************
 * ESTILOS GENERALES FORMULARIOS
 **************************************/

.form .input {margin: 0 0 5px 0;}
.form label {display: block; font-weight: bold;}
.form .text input, .form .password input, .form textarea {border: 1px solid #1c97d3; font-family: Arial, Verdana, sans-serif; font-size: 9pt;}