/*--------------------------------------------------------------------------
 Clic 
 ----------------------------------------------------------------------------
 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
 -------------------------------------------------------------------*/
body {
	background: url(../img/background.jpg) no-repeat fixed #ffffff;
}

#body{
  position:relative;
}

#wrapper {
  background: #ffffff;
  margin: 0px;
  margin-right:auto;
  margin-left:auto;
  width:994px;
}

#wrapperFoot {
    min-height: 58px;
    height: auto !important;
    height: 58px;
    position: relative;
    background: #000000;
	border-top: 1px solid #ffffff;
    clear: both;
}

#header {
  width: 994px;
  height: 335px;
  position: relative;
  background: url(../img/barra-top-black.gif) repeat-x;
}
		#cardsAccept {
			width: 170px;
			height: 70px;
			position: relative;
			left: 13px;
			background: url(../img/cardsAccept.png) no-repeat top center;		
		}


/*** BUSCADOR ***/

#barraBuscador{
	z-index:888;
}


#barraBuscador form.buscador select{
	padding: 6px;
	border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 0 4px #CCCCCC inset;
	width: 320px;
  margin:10px auto;
  font-size: 12pt;
  display:block;
}


#barraBuscador .busqueda {
  background: #ffffff;
  border: 1px solid #646473;
  overflow: hidden;
  padding: 0px;
  width: 340px;
  margin:0px auto;
  font-size: 12pt;
}


	
#barraBuscador .busqueda input#s {
    border: 1px solid white;
    float: left;
    font-size: 13px;
    padding: 5px 5px;
   
      width: 258px;
     
    /*margin-left:4px;
    margin-top:4px;
    height:15px;*/
    
    
    
}



:focus { outline: 0 none;}

#barraBuscador .busqueda input#searchsubmit, .buttonBlue, .submit input {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;   
    border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color #0094C7;
    border-style: none none none solid;
    border-width: medium medium medium 1px;
    color: #ffffff;
    float: right;
    font-size: 12pt;
    font-weight: bold;
    padding: 6px;
    cursor: pointer;
    background:none repeat scroll 0 0 #0094C7;
    border-left:none;
}

#barraBuscador .busqueda input#searchsubmit:hover, a:hover .buttonBlue, .submit input:hover  {
   background:none repeat scroll 0 0 #FF9B02;
   border-left:none;
}

 .submit input {
  float:none;
  margin:0px auto;
  text-align:center;
 }


/* =Layout343
 -------------------------------------------------------------------*/
/* Header
 -------------------------------------------------------------------*/
a#logo {
	display:block;
	width: 186px;
  height: 182px;
  background: url(../img/logo-daflow.png) no-repeat top ;
  top: 69px;
  left: 29px;
	position:absolute;
	z-index: 99;
}
a#logo h1 span {display:none}

#mensaje {
	position:absolute;
	top:170px;
	left:187px;
	width:310px;
	font-size:13pt;
	background:  url(../img/separador-mensaje.png) no-repeat bottom;
	z-index:1;
	padding-bottom:14px;
}

#fraseTienda{
	display:block;
	width: 87px;
    height: 66px;
    background: url(../img/frase-tienda.png) no-repeat top ;
    top: 50px;
    left: -10px;
	position:absolute;
	z-index:89;
}

/* quicklinks */
#quickLinks {
  position: absolute;
  height: 23px;
  width: 42px;
  top: 250px;
	left: 63px;
	z-index: 999;
	
}

/* quicklinks */
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 {
    position: absolute;
}

#quickLinks a {
    display: block;
    width: 25px;
    height: 22px;
}

#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.home a {
    background: url(../img/home-over.gif) 0px -22px  no-repeat;
}

#quickLinks li.home a:hover {
    background: url(../img/home-over.gif) 0px 0px #0094C7 no-repeat;
}

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

#quickLinks li.contact a:hover {
    background: url(../img/contacto-over.gif) 0px 0px #00A84A no-repeat;
}

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

#quickLinks li.siteMap a:hover {
    background: url(../img/mapa-sitio-over.gif) 0px 0px #000000 no-repeat;
}
/* =quicklinks */





/***** -60 --- NAV BAR  ****/

ul.menu {
	width: auto;
	position: absolute;
	top: 28px;
    right:10px;
	/*height: 33px;*/
	z-index: 999999;


  
}
ul.menu, ul.menu li{
    margin: 0px;
    padding: 0px;
    z-index: 25;
	list-style-type: none;
	
}
ul#menu li * {
  color:#ffffff;
  text-transform: uppercase;
  font-weight: bold;
}
ul#menu li {
 list-style: none;
 list-style-type: none;
 list-style-image: none;
 display: inline-block;
 position:relative;
 padding:0px 0px;
 background: none;
}
ul.menu li a h1  {
	 margin:0px;
	 padding:0px 10px;
}
ul.menu a {
	 list-style: none;
	 padding:6px;
	 transition: all 1s;
}

ul.menu a:hover {
	background:#0094C7;

}
ul#menu li ul {
   background:#000000 ;
   margin-top:-14px;
   border-radius: 0px 0px 5px 5px;  
  -moz-border-radius: 0px 0px 5px 5px;  
  -webkit-border-radius: 0px 0px 5px 5px;  
   padding:10px;
}

 ul#menu.sf-menu li li {
  background: url('../js/superfish/images/bullet-level-1.gif')no-repeat .05em .4em;
  padding-left:10px;
}



 

 
/* =Header
 ------------------------------------------------------------------*/
/* Body
 ------------------------------------------------------------------*/
#contentHeader {
  min-height: 30px;
	height:auto !important;
	height: 30px;
  background: #000000;
    /*position: relative;*/
}

#contentHeader * {
  color: #ffffff;
}

#contenido, .contenido {
    /*width:60%;*/
    /*position: relative;*/
    padding-bottom: 10px;
    text-align: justify;
    min-height: 400px;
    height: auto !important;
    height: 400px;
    /*border:1px solid;*/
    padding: 0px 8px 15px 8px;
   
}

#barraLeft {
  width: 347px;
  /*float: right;*/
	padding-bottom:20px;
  position:absolute;
  right:0px;
	
}

#areaCentral {
  width: 632px;
  float: left;
  /* alto minimo */
  min-height: 400px;
  height: auto !important;
  height: 400px;
  text-align: justify;
	
	/*position:relative;*/
	z-index:800;
	
}





/* 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
 ------------------------------------------------------------------*/
#footerWrapper {
	width:994px;
	margin:0px auto;
}



#footer {
	position:relative;
	width:986px; 
	margin:0px auto;
	background: #2A2A2A;
	font-size: 9pt !important;
  text-align: center;
  clear: both;
	color:#FFFFFF;
	padding:20px 0px;
  min-height:90px;
  height:auto !important;
  height:90px;
}

#footerContent div, #footerContent h3  {
    display: none;
}

#footerAux {
	background: url(../img/footer-bottom.png) no-repeat;
	width:994px;
	margin:0px auto;
	height:33px;
  font-size: 8pt;
  text-align: right;
  padding-top:5px;

}
.clicLink {
  padding-right:15px;
}

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

#footer * {
	color:#ffffff;
	
	font-size: 10pt;
}
#footer strong {
	color: #ffffff;
}




ul#footerLinks { width:790px; margin:10px auto 5px auto; }
ul#footerLinks li { float:left; }

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

#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;
}
/** Cuadros **/ 
 .square { 
	width:337px;
	min-height: 148px;
    height: auto !important;
    height: 148px;
	color:#ffffff !important;
 }
 
 
 
 .squareBody { 
	 background: url(../img/cuadro-bg.png) no-repeat ;
	 min-height: 148px;
    height: auto !important;
    height: 148px;
 	padding: 15px 15px 5px 15px;
	
 }
 
 .ligaSquare { 
 	display:block;
	width:337px;
	height:40px;
	background: url(../img/cuadro-bottom.png) bottom no-repeat;
 }
 
 .ligaSquare span{ 
 	display:none;
 }

ul#serviciosInicio{
	width:700px;
	background:none;
	padding:0px;
	margin:0px;
}

ul#serviciosInicio li {
	float:left;
	width:350px;
	background:none;
	list-style-image:none;
	padding:0px;
	margin:0px;
}
/*Estilos para secciones colapsables*/
.show{
	display:true;
}
.hide{
	display:none;
	
}

#formatoTabla { width:700px; margin-left:auto; margin-right:auto; margin-top:10px;}

/** Elmentos Portafolio **/
ul.portafolio, ul.portafolio li{
	padding:0px;
	margin:0px;
	background:none;
	list-style-image:none;
	 width: 662px;
}
ul.portafolio li { margin-bottom:20px;}
.marcoPortafolio { width: 660px; border:1px solid #9D9D9D; height:259px; position:relative; background: url(../img/portafolio/marco-portafolio.png) left top no-repeat; }
/*.marcoPortafolio { width: 660px; border:1px solid #FF0000; height:309px; position:relative; background: url(../img/portafolio/marco-portafolio.png) left top no-repeat; }*/
/*.marcoPortafolio img { position:absolute; width:660px; height:259px; top:49px; left:1px;}*/
.descripcionPortafolio { width:90%; padding-top:10px; margin-right:auto; margin-left:auto;}
.descripcionPortafolio div { padding:5px 10px 5px 10px;  }
.descripcionPortafolio h2 { color: #004C24; font-size:11pt;}

img.imgBody { background:#616161; border:1px solid #ffffff;  }
.vcard { display:none; }


/** Menu Lateral **/ 
#menuLateral {
	background: white;
	
}


#menuLateral h2#catalogoDeProductos{
	text-align:center;
	padding:8px;
}
#menuLateral h2 {
	
}

#menuLateral h3{
	
}

#menuLateral li.top-cat{
	color:#ff0000;
	background:  url(../img/bullet-menu.png) no-repeat .1em .7em;
	margin:0px;
	padding:0px;
	padding:5px 5px 5px 12px;
	border-top:1px solid #E3E3E3;
	border-bottom:1px solid #E3E3E3;
	text-shadow: 0.05em 0.05em #FFF;
	color:#FFFFFF;
}


ul.subMenu {
	margin: 4px 5px 4px 10px;	
}


ul.subMenu  li{
	color:#ff0000;
	background: url(../img/bullet-sub-menu.png) no-repeat .1em .3em;
	margin-left:10px;
	padding-left:12px;
}

	/** Ayuda **/
	
div#ayudaEnLineaTel {
  position:absolute;
	left: 10px;
	width: 390px;
  top:6px;
	z-index: 9;
	text-align: left;
	/*background: url(../img/ayudaenlinea-bg2.png) no-repeat;*/
  }
div#comoComprar {
	width: 130px;
	height: 57px;
	position: absolute;
	right: 599px;
	z-index: 25;
	top: 262px;
}
ul#ListaDeTelefonos { margin:0px;}
ul#ListaDeTelefonos li{
	color: white;
	font-size: 11pt;
	letter-spacing: -0.02em;
	font-weight: normal;
	float: left;
	background: none;
	/*text-shadow: 0 0 3px black;*/
	padding-left:5px;
}

div#comoComprar a {  display:block; width:130px; height:57px; background: url(../img/como-comprar-bg2.png) no-repeat;}
div#comoComprar span {display: none;}
  
 h1#titleAyudaEnLinea {
    font-size: 15pt;
    position: absolute;
    right: 45px;
    text-align: center;
    top: 12px;
    width: 310px;
	color: #fff;
	/*text-shadow: 0 0 2px black;*/
  }
    h1#titleAyudaEnLineaTel {
	font-size: 16px;
   color: #fff;	
   text-align:center;
	}
 
    h1#titleHorarioAtencion{
    font-size: 10pt;
    top: 0px;
	color: black;
	letter-spacing: -0.02em;
	
  }
  div#horariosGuia{
    position:absolute;	
    left: 498px;
	z-index: 9;
	/*background: url(../img/ayudaenlinea-bg.png) no-repeat;*/
	top: 17px;
	border: 2px solid white;
	background: #f0f9ff;
	background: -moz-linear-gradient(top,  #f0f9ff 0%, #99d7ff 47%, #6bc8ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#99d7ff), color-stop(100%,#6bc8ff));
	background: -webkit-linear-gradient(top,  #f0f9ff 0%,#99d7ff 47%,#6bc8ff 100%);
	background: -o-linear-gradient(top,  #f0f9ff 0%,#99d7ff 47%,#6bc8ff 100%);
	background: -ms-linear-gradient(top,  #f0f9ff 0%,#99d7ff 47%,#6bc8ff 100%);
	background: linear-gradient(to bottom,  #f0f9ff 0%,#99d7ff 47%,#6bc8ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#6bc8ff',GradientType=0 );
	padding: 4px;
  }
  
  
  div#ayudaEnLinea{
    position:absolute;
	width: 382px;
	height: 75px;	
    right: 10px;
	z-index: 9;
	/*background: url(../img/ayudaenlinea-bg.png) no-repeat;*/
	top: 0px
  }
  
  


  h2#twitterBox  span { display:none; }
  
  h2#twitterBox { position:absolute;  width:140px; height:56px;  top:10px;  right:10px; margin:0px;  padding:0px; }
  h2#twitterBox a {  display:block; width:140px; height:56px; background: url(../img/twitter-tienda-clic.png) no-repeat;}
  
  div#messengerBox { position:absolute;  width:102px; height:34px;  top:11px;  left:25px; margin:0px;  padding:0px; }
  img#messengerIcon {
    display: block;
    height: 56px;
    left: -15px;
    position: absolute;
    top: -12px;
    width: 43px;
    z-index: 8552;
  }

#bannerBody {
	width: 785px;
	height: 268px;
  	position: absolute;
	top: 58px;
	right:0px;
	
}

#bannerArea { width:723px; margin:0px auto; height:252px; position:absolute; top:0px; left:62px; z-index:10;}
div.imageBanner {width:375px;  height:252px; position:absolute; top:0px; left:0px; }

#seccionTitle {	

}

/*COLLAPSED SECTIONS*/

#preg1 ,#preg2 ,#preg3 ,#preg4 ,#preg5 ,#preg6 {
	width: 920px;
	display: none;
}
/*#preg1 ,#preg2 ,#preg3 ,#preg4 ,#preg5 ,#preg6, b{
	padding: 10px 30px 10px 50px;
	text-align: justify;
}*/
img.colapsa{
    margin-left: 10px;
}
.preguntas {
	color: #000;
    text-decoration: none;
	font-weight: bold;
}
.preguntas:hover {
	text-decoration: underline;
}
.resps {
	font-weight: normal!important;
	padding: 0px;
	margin-left: -2px;
}
#endeachfaq {
	width: 994px;
	height: 20px;
	background: url(../img/faqs-bg.png) no-repeat;
}
#endfaqs {
	width: 994px;
	height: 20px;
	background: none;
}
/************FIN SECCION FAQS**************/



/***********SECCION PAQUETES***************/

div#detallePaquetes { 
	width:994px;
	padding: 0px;
}
#plat ,#gold ,#silver {
	display: none;
}
#fantasia ,#ilusion ,#ensueno {
	display: none;
}
#medida {
	display: none;
}
/*************************PAGINAS CON CONTENIDO*******************/
#terms {
	margin: 0;
	padding: 0 20px 0 0;
}
#terms h3 {
	margin: 0;
	padding: 0;
}
#terms h2 {
	font-size: 15px;
	margin-bottom: 20px;
}
#terms p {
	font-size: 12px;
	text-align: justify;
	margin-bottom: 15px;
}
#terms span {
	font-size: 11px;
	text-align: justify;
	color: #030;
}
#terms span:hover {
	text-decoration: underline;
}

ul#faqs { margin:0px; } 

ul#faqs ul { margin:0px; }


/*** UBICACION **/

div#mapa { 
		width: 600px; 
		margin:0px auto; 
		border:2px solid #157B15;
	}
 
 .desarrolloWeb a, .desarrolloWeb a:visited,  .desarrolloWeb a:hover {  color:#000000 !important; font-size:12px;}
 #badgeShopMania { display:block; width:112px; margin:0px auto; margin-top:20px;}
 

div.fb-like { position:absolute; top:44px; right:280px; z-index:100;}
div.tweet-this { position:absolute; top:144px; right:287px; z-index:100;}
table#paypalTable { position:absolute; bottom:5px; left:20px; z-index:100;}


/**** FORMS ***/
/*-------------------------------------------------------------------------
 Clic 
 ---------------------------------------------------------------------------
 File: forms.css
 
 Gerardo Gonzalez Flores
 --> gerardo AT clic DOT com DOT mx <--
 ---------------------------------------------------------------------------
 CSS style for html forms
 Estilos generales para los formularios utilizados
 --------------------------------------------------------------------------*/
.textoPequeno {
    font-size: 10px;
    text-align: center;
}

.admin {
    width: 550px;
    /*border:1px solid;*/
}

.admin label, .view label {
    display: block;
    width: 150px;
    float: left;
    text-align: right;
    padding-right: 2px;
}

.view label {
    font-weight: bold;
}

.converter label {
    width: 110px;
}

.formItem {
    padding-top: 1px;
    padding-bottom: 1px;
    clear: both;
}
#formaLogin .input input{
	width:200px;	
}
.formItem input, .formItem textarea {
    width: 270px;
}

.formItem input.radio, input.checkbox {
    width: auto;
}

.converter .formItem input {
    width: 100px;
}

.formItem select {
    width: 150px;
}

.submit {
    text-align: center;
   
  
}
/* Formularios de contacto */
.forma, #contacto .formItem input,#contacto textarea {
    width: 400px;
	margin-bottom: 12px;
	padding: 5px;
	border: 2px solid #DADADA;
	border-radius: 5px;
	font-size: 15px;
	/*box-shadow: 1px 1px 2px #333;*/
}

#contacto div.textoPequeno {
  margin-bottom:10px;
}

#contacto .submit input {
    width:auto;
    font-size:10pt;
}

.atencion {
  color: red;
	font-size: 90%;
  font-weight: bold;


}

fieldset {
    border: 1px solid #ccc;
    margin-top: 5px;
    padding: 10px 20px;
    /*width:80%;*/
}

fieldset legend {
    color: #343468;
    font-size: 110%;
    font-weight: bold;
    padding: 5px;
}

form#charters .formItem label {
    width: 180px;
}

form#charters .comments label {
    float: none;
    width: auto;
	text-align:left;
}

form#charters .comments textarea {
    width: 98%
}


/* Titles
------------------------------------------------------------*/
 h1, h2, h3, h4, h5 {
 	margin:0px;
	padding:0px;
	font-size:10pt;
 }

 h1.title span { font-size:14pt;}
 
 
 


.titleQuotation, .titleSideBar, h1.title,  h2.title {
  color:#FFFFFF;
  font-size:14pt;
  text-align: left;
  background: #000000;
  
  padding:5px 0px 5px 15px;
  
}



 
 h1.view span { font-size:14pt;}
 
 h1.view, h2.view{
	width: 690px;
	/*height: 94px;*/
	/*background: url(../img/view-bg.png) no-repeat;*/
	margin-bottom: 10px;
	padding: 10px;
	font-style: italic;
	background-color: #F5F5F1;
	border-radius: 10px;
 }
 
  h2.title { height:19px;}
 
 .square h1.title{
	width:100%;
	height:25px;
	padding:0px;
	margin:0px;
 }
 


 h2.sub{
	width:auto;
	height:17px;
	margin-bottom:5px;
 
 }
 
 h2.subMap {
	  background: url(../img/bullet1.jpg) no-repeat .1em .3em;
	  padding-left:15px;
 }
 
 h3 {
	 /* background: url(../img/bullet2.jpg) no-repeat .1em .3em;*/
	  padding-left:15px;
 }
 
 h3.subCatalog { 
	background: url('../img/app/flechaBgEnd.gif') no-repeat 10px 50%; 
	padding-left:35px;
	margin-top:3px;
}



.brandDescription {
    clear: both;
    margin: 0 auto;
    padding-bottom: 17px;
    width: 690px;
  }

.itemLateral {
  margin-bottom:10px;
}

#footer .logoDaflowBw {
  width:500px;
  height:108px;
  background: url('../img/logo-daflow-bw.png') no-repeat; 
  position:absolute;
  top:10px;
  left:10px;
  padding-left:120px;
  text-align:left;
  padding-top:10px;
  
}

#footer .logoDaflowBw, #footer .logoDaflowBw * {
  font-size:11pt;
  font-style: italic;
}

#footer .logoDaflowBw #direccion {
  font-size:10pt;
  font-style: normal;
  padding-top:10px;
}


#footer .logoDaflowBw strong {
  font-style: normal;
}

#datosTel {
  display:block;
  clear:both;
  width:280px;
  position:absolute;
  right:10px;
  bottom:10px;
  text-align:left;
}



.btnList li { background:none;}

.imgDa {
  display:block;
  border:4px solid #00A84A;
  margin-bottom:10px;
}
.whats *, .fb * {
	color: #ffffff;
}

.whats, .fb { 
	
	position:absolute;
	display:inline-block;
	width:auto;
	right:20px;
	top:6px;

}
.fb * {
	color: #ffffff;
	font-weight: bold;
}
.fb {
	right:250px;

}

.whats { display:inline-block;}

.fb:before{
	content:"";
	
	width: 25px;
	height:25px;
	background: url('../img/fb.png') no-repeat center;
	position: absolute;
    left: -30px;
    top: -5px;

}

.whats:before{
	content:"";
	
	width: 25px;
	height:25px;
	background: url('../img/whats.png') no-repeat center;
	position: absolute;
    left: -30px;
    top: -5px;
}

#datosTel .whats,
#datosTel .fb {
	top:-40px;
}