/*--------------------------------------------------------------------------
 Clic 2008
 ----------------------------------------------------------------------------
 File: layout.css
 Gerardo Gonzalez Flores
gerardo AT clic DOT com DOT mx <--
 ---------------------------------------------------------------------------
 CSS Layout styles for the web site.
 Layout CSS para el sitio.
 --------------------------------------------------------------------------*/
/* Layout
 -------------------------------------------------------------------*/
html { 	background:  url(../img/html-bg.jpg) top left;} /* es correcto? */
body {
    /*background: #003366 url(../img/page-body-bg.jpg) repeat-x top left;*/
	background:  url(../img/bg-page.jpg) repeat-x top left;
}


#wrapper {
    width: 774px;
    position: relative;
    margin-left: -387px;
    left: 50%;
    background-image: none;
	background:  url(../img/body-bg.png) repeat-y 0px 17px;
	azimuth: expression(
		this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "../img/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
	);
	
}

#wrapperFoot {
   
    min-height: 58px;
    height: auto !important;
    height: 58px;
    position: relative;
    /*background: #001F3E;*/
    clear: both;
}



#header {
    background: url(../img/header_bg.jpg) no-repeat top;
    width: 774px;
    height: 185px;
	position:relative;
}

#body {
    /*background: url(../img/body-bg.png) repeat-y scroll;*/
	
}


/* =Layout343
 -------------------------------------------------------------------*/
/* Header
 -------------------------------------------------------------------*/
#logo {
	width: 263px;
    height: 71px;
    background: url(../img/provacaciones-fcqs-agencia-de-viajes-logotipo.jpg) no-repeat top ;
    top: 50px;
    left: 6px;
	position:absolute;
}
#logo span {display:none}
#banner {
    width: 495px;
    height: 156px;
    background: url(../img/fondo-banner.jpg) no-repeat top;
    top: 0px;
    left: 275px;
	position:absolute;
}
/*
td.logo {
    width: 250px;
    position: relative;
}

td.bannerBody {
    padding-top: 2px;
}
*/
#menuArea {
    height: 28px;
    width: 766px;
    background: url(../img/menu/menu-bg.jpg) no-repeat top;
    position: absolute;
    top: 156px;
	left:4px;
}

#menu {
    height: 28px;
    /*
	min-width: 543px;
	width: auto !important;
	width: 543px;
    position: relative;
	*/
    /*border:1px solid;*/
}

#quickLinks {
    position: absolute;
    height: 23px;
    width: 42px;
    top:  127px;
    left: 40px;
    /*border:1px solid;*/
}

ul#quickLinks, ul#quickLinks li {
    padding: 0px;
    margin: 0px
}

#quickLinks li {
    list-style: none;
    background: none;
}

#quickLinks li.home, #quickLinks li.contact, #quickLinks li.siteMap,  #quickLinks li.messenger {
    position: absolute;
}

#quickLinks a {
    display: block;
    width: 45px;
    height: 23px;
}
/* #quickLinks a:hover { background: url(../img/home.gif) 50% 50% no-repeat #ff0000} */
#quickLinks a span {
    display: none;
}

#quickLinks li.home {
    left: 0px;
    top: 0px;
}

#quickLinks li.contact {
    left: 45px;
    top: 0px;
}

#quickLinks li.siteMap {
    left: 90px;
    top: 0px;
}

#quickLinks li.messenger {
    left: 135px;
    top: 0px;
}

#quickLinks li.home a {
    background: url(../img/home-over.gif) 50% 50% #FFFFFF no-repeat;
}

#quickLinks li.home a:hover {
    background: url(../img/home.gif) 50% 50% #0056A1 no-repeat;
}

#quickLinks li.contact a {
    height: 23px;
    background: url(../img/contacto-over.gif) #FFFFFF 50% 50% no-repeat;
}

#quickLinks li.contact a:hover {
    background: url(../img/contacto.gif) 50% 50% #0056A1 no-repeat;
}

#quickLinks li.siteMap a {
    height: 23px;
    background: url(../img/mapa-sitio-over.gif) #FFFFFF 50% 50% no-repeat;
}

#quickLinks li.siteMap a:hover {
    background: url(../img/mapa-sitio.gif) 50% 50% #0056A1 no-repeat;
}

#quickLinks li.messenger a {
    background: url(../img/messenger-over.gif) 50% 50% #FFFFFF no-repeat;
}

#quickLinks li.messenger a:hover {
    background: url(../img/messenger.gif) 50% 50% #0056A1 no-repeat;
}

/* =Header
 ------------------------------------------------------------------*/
/* Body
 ------------------------------------------------------------------*/
#contentHeader {
   
    height: 35px;
	padding-bottom:10px;
    /*position: relative;*/
}

#contenido, .contenido {
    /*width:60%;*/
    /*position: relative;*/
    padding-bottom: 10px;
    text-align: justify;
    min-height: 400px;
    height: auto !important;
    height: 400px;
    /*border:1px solid;*/
    padding-left: 15px;
    padding-right: 15px;
}
/* Le ponemos el fondo a la paginacion */
#paginacion {
    margin-top: 0px;
    padding-bottom: 5px;
    background: url(../img/content_bg.jpg) repeat-y top;
}
/* =Body
 ------------------------------------------------------------------*/
/* Footer
 ------------------------------------------------------------------*/

#footer {
	position:relative;
}
#footerContent div, #footerContent h3  {
    display: none;
}


#footer {
    width: 774px;
    position: relative;
    margin-left: -387px;
    left: 50%;
    font-size: 9pt !important;
    text-align: center;
    min-height: 70px;
    height: auto !important;
    height: 70px;
    clear: both;
	
}

#footerContent{
    width: 774px;
    height: 100px;
    padding-top: 5px;
	 background: url(../img/footer.png) no-repeat bottom;
	 azimuth: expression(
		this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "../img/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
	);
}
#footer *,
#footer table#datosContacto *,
#footer table#datosTelefonos *{
	color:#FFFFFF;
	font-size:8pt;
	
}

#footer table#datosContacto th,
#footer table#datosTelefonos th
{
	font-weight:bold;
	text-align:right;
	vertical-align:top;
	text-transform:none;
}

#footer table#datosContacto td,
#footer table#datosTelefonos td {
	text-align:left;
	vertical-align:top;
	padding-left:3px;

}
#footer table#datosContacto{
	width:350px;
}

#footer table#datosTelefonos{
	width:300px;
}
table#datosContacto th {
	width:60px;
}
table#datosTelefonos th {
	width:106px;
}
#messenger { width:560px; color:#ffffff; position:absolute; top:5px; left:50px; text-align:left;}
table#datosContacto{position:absolute; top:38px; left:45px; text-transform:none !important;}
table#datosTelefonos{position:absolute; top:38px; left:430px; text-transform:none !important;}

#footerFood {
    /* background: url(../img/footer_food_bg.jpg) top no-repeat;*/
    height: 11px;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 8pt;
    color: #000000;
    width: 765px;
    position: relative;
    margin-left: -387px;
    left: 50%;
}

#footerFood * {
    font-size: 8pt;
	color: #000000;

}

#footerFood a {
    color: #000000;
}

#footerFood a:hover {
    color: #000000;
}
/* URL de pie de página de CLIC*/
#clic {
    position: relative;
}

#clicUrl {
    position: absolute;
    right: 5px;
    top: 1px;
    color: #000000;
    text-decoration: none;
    display: block;
}

#clicUrl h3 {
    background: none;
    font-weight: normal;
    font-size: 7pt;
}
/* =Footer
 -------------------------------------------------------------------*/
.message {
    padding: 10px;
    margin-top: 35px;
    background: #FFDEDE;
    width: 338px;
    text-align: center;
    border: 1px solid #FF7F7F;
}

#flashMessage {
    background: #FFDEDE;
    border: 1px solid #FF7F7F;
    /*height:20px;*/
    padding: 3px;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
	margin-bottom:10px;
	margin-top:5px;
	z-index:1;
}

/** Menu de la aplicacion */
ul#menu, ul#menu li {
    padding: 0px;
    margin: 0px;
}

/*ul#menu li a span {
    display: none;
}*/
ul#menu {
	margin-left:10px;
	margin-right:auto;
}
ul#menu li {
    list-style: none;
    background: none;
    float: left;
}

ul#menu li a {
    display: block;
    height: 23px; 
	padding: 5px 10px 0px 10px;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	
    /*border:1px solid;
    background: #ff0000;*/
}

ul#menu li.separador {
    background: url(../img/menu/separador.gif) no-repeat 50% 50%;
    height: 28px;
    width: 2px;
	
    /*padding: 0px 10px 0px 10px*/
}
/** Se puede aplicar estilos especificos a cada uno de lo elementos del menu */


ul#menu li a
{
    /*background: url(../img/menu/inicio-sprites.jpg) 0px -35px no-repeat;*/
   	min-width:auto;
	width: auto !important;
	width: 65px;
	
	/*border:1px solid;
	background: #FF9900;*/
}




ul#menu li ul.sub li a { padding-top: 0px}

ul#menu li a:hover
{
    background: #002588;
    /*background: url(../img/menu/inicio-sprites.jpg) 0px 0px no-repeat;*/
}


/* Esto es para los submenus anidados */
ul#menu li ul.sub {
    z-index: 9999;
    margin: 0px;
    padding: 5px;
    padding-left: 10px;
    border: 1px #000066 solid;
	border-top: 1px #002588 solid;
    position: absolute;
    width: auto;
    color: #FFFFFF;
    text-align: left;
}

ul#menu ul.sub li a span { display:block;}

ul#menu ul.sub li a {
    min-height: 5px;
    height: auto !important;
    height: 5px;
    color: #FFFFFF;
	text-align:left;
	padding-left:8px;
	z-index: 99999;
	min-width:60px;
	width: auto !important;
	width: 60px;
	
}
ul#menu ul.sub li{
	background: url(../img/bullet.gif) -1px .33em no-repeat;
}

ul#menu ul.sub li a:hover {
   	min-width:60px;
	width: auto !important;
	width: 60px;
    /*color: #E4E4E4;*/
	text-decoration:underline;
	background: url(../img/bullet.gif) -1px .33em no-repeat;
}

ul#menu li ul.sub li {
    display: block;
    float: none;
}

ul#menu li ul.sub {
    background: #002588;
}


/* Elemento para permitir edicion directa */
div.editItem {width:150px; margin-left:auto;}

/** Ajustamos anchos del area para IE6 */ 
#servicios a.menuLink{ _width:136px;}
#destinos  a.menuLink{ _width:116px;}
#paquetes  a.menuLink{ _width:125px;}

/** Layout Home **/
#barraLeft {
    width: 184px;
    float: left;
	margin-left:1px; 
	
}

#areaCentral {
    width: 584px;
    float: left;
    /* alto minimo */
    min-height: 400px;
    height: auto !important;
    height: 400px;
    text-align: justify;
}

#areaCentral #contenido { padding:0px;}
#meebo { margin-left:4px;}
#sideArea {
	margin-left:4px; 
	margin-top:5px; 
	width:181px; 
	background: url(../img/side-bg.jpg) repeat-y;
}
#sideArea div.header { 
	background: url(../img/side-top.jpg) top no-repeat; 
}
#sideArea div.cuerpo { 
	background: url(../img/side-bottom.jpg) bottom no-repeat; 
	
	padding: 0px 8px 20px 5px }

#messengerFrame {
	width:500px;
	margin-left:auto;
	margin-right:auto;
}