@charset "iso-8859-1";

/* ELEMENTS COMUNS
------------------------------------------------------------------------*/
body {
margin:0;
padding:0;
background-color:#FFF;
font:normal 12px Verdana, Geneva, sans-serif;
color:#000;
text-align:center; /*si no ho poso IE 5.5 no centrara el container*/
}

a:link {
text-decoration:underline;
color:#008000;
}

a:visited {
text-decoration:underline;
color:#008000;
}

a:hover {
text-decoration:none;
color:#66b366;
}

a:active {
text-decoration:underline;
color:#66b366;
}


/* ESTRUCTURA
------------------------------------------------------------------------*/
#container {
width:952px; /*954 amb borders*/
margin:0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
background-color:#fff;
}

#top {
width:100%;
height:29px;
font-size:9px;
background:url(../logos/bg_top.gif) repeat-x;
}

#top a {text-decoration:none;}
#top a:hover {color:#fff;}

#topLeft {
float:left;
height:29px;
margin:0;
text-align:left;
padding:0 0 0 24px;
line-height:24px;
}

#topRight {
float:right;
height:29px;
margin:0;
text-align:right;
padding:0 14px 0 10px;
font-weight:bold;
background:url(../logos/separador.gif) left 6px no-repeat;
line-height:24px;
}

#header {
width:924px;
height:115px; /*116 amb border-bottom*/
margin:0 auto;
border-bottom:1px solid #fff;
}

#header img {
float:left;
border:0;
}

#enclose {
width:924px;
margin:0 auto;
text-align:left; /*anulem el text centrat del body*/
}

#columnLeft {
float:left;
width:293px;
margin:0 0 27px 0;
}

#serveis {
width:293px;
height:25px;
padding-left:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
line-height:23px;
color:#fff;
background:url(../logos/bg_serveis_esp.gif) no-repeat;
}

#columnRight {
float:right;
width:615px;
margin:0;
background:url(../logos/bg_ombra_menu.gif) left 26px repeat-x;
}

#columnRight p {
line-height:15px;
text-align:justify;
}

#columnRight ul {text-align:justify;}

#footer {
width:100%;
height:29px;
margin-top:30px;
font-size:9px;
background:url(../logos/bg_footer.gif) repeat-x;
line-height:29px;
}

#footer a {text-decoration:none;}
#footer a:hover {color:#fff;}


/* MENU PRINCIPAL
------------------------------------------------------------------------*/
#navcontainer ul {
width:100%;
height:25px;
margin:0;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
line-height:23px;
text-align:center;
background:url(../logos/bg_menu.gif) #008000;
}

#navcontainer ul li {
display:inline;
padding:0;
background:url(../logos/separador_menu.gif) right 1px no-repeat;
}

#navcontainer ul li a {
padding:0 12px;
color:#fff;
text-decoration:none;
}

#navcontainer ul li a:hover {color:yellow;}
#navcontainer ul li a:active {color:#66b366;}

#navcontainer ul li a img {
width:11px;
height:11px;
margin-top:5px;
border:0;
}


/* MENU SECUNDARI
------------------------------------------------------------------------*/
#navcontainerSec {
margin-top:27px;
}

#navSec {
list-style:none;
margin:0;
padding:0;
width:293px;
}

/* Opcions */
#navSec li {
margin-bottom:24px;
padding-left:27px;
padding-top:2px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
background:url(../logos/bg_menusec_bullet.gif) no-repeat;
}

#navSec li a {
display:block;
text-decoration:none;
}

#navSec li a:link {color:#fff;}
#navSec li a:visited {color:#fff;}
#navSec li a:hover {color:yellow;}
#navSec li a:active {color:#66b366;}

/* Sub-opcions */
#navSec li ul {
list-style:none;
margin-top:4px;
padding:0;
}

#navSec li ul li {
width:245px; /*evito que el filet arribi fins al final*/
margin:0;
padding-top:4px;
padding-left:8px;
font-weight:normal;
background:url(../logos/ico_fletxa_menusec.gif) no-repeat left 10px;
border-bottom:1px dotted #008000;
}

/*Faig que el link sigui actiu per tota l'amplada del div (IE)*/
#navSec li ul li a  {
display:block;
width:100%;
}

html>body #navSec li ul li a  {width:auto;} /*Arregla problema amb IE5/Mac i Netscape/Mozilla*/

#navSec li ul li a:link {color:#008000;}
#navSec li ul li a:visited {color:#008000;}
#navSec li ul li a:hover {color:#000;}
#navSec li ul li a:active {color:#66b366;}


/* HEADINGS
------------------------------------------------------------------------*/
h1 {
height:33px;
margin:20px 0 5px;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:normal;
border-bottom:3px solid #008000;
}

h2 {
margin:15px 0 5px 0;
padding:0 0 0 25px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
background:url(../logos/ico_h2.gif) left 3px no-repeat;
}

h3 {
margin:20px 0 10px 0;
padding:0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
}


/* ALTRES
------------------------------------------------------------------------*/
.link_email {
background:url(../logos/ico_email.gif) left 2px no-repeat;
padding-left:16px;
}

.link_top {
width:40px; /*li restem els 10px del padding (50-10=40)*/
height:14px;
margin:20px 0;
padding:0 0 0 10px;
font-size:9px;
background:url(../logos/ico_fletxa_top.gif) 3px 5px no-repeat #008000;
}

.link_top a:link {color:#fff; text-decoration:none;}
.link_top a:visited {color:#fff; text-decoration:none;}
.link_top a:hover {color:yellow; text-decoration:none;}
.link_top a:active {color:#66b366; text-decoration:none;}

.link_back {
width:35px; /*li restem els 10px del padding (45-10=35)*/
height:14px;
margin:20px 0;
padding:0 0 0 10px;
font-size:9px;
background:url(../logos/ico_fletxa_back.gif) 3px 5px no-repeat #008000;
}

.link_back a:link {color:#fff; text-decoration:none;}
.link_back a:visited {color:#fff; text-decoration:none;}
.link_back a:hover {color:yellow; text-decoration:none;}
.link_back a:active {color:#66b366; text-decoration:none;}

.separa {
background:url(../logos/separador.gif) 5px 0 no-repeat;
padding-left:14px;
}

#iso {
width:293px;
text-align:center; /*img height + img border-top + img margin-top */
background-color:#fff;
overflow:hidden;
}

#iso img {
width:293px;
height:134px;
margin-top:16px;
margin-bottom:16px;
border-top:3px solid #008000;
}


/* MENU GALERIA
------------------------------------------------------------------------*/
.navGaleria {
float:left;
margin:0 5px 5px 0;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
white-space:nowrap;
}

.navGaleria #active {
padding:1px 5px;
color:#fff;
background-color:#000;
}

.navGaleria a { padding:1px 5px; }

.navGaleria a:link, .navGaleria a:visited {
color:#fff;
background-color:#008000;
text-decoration:none;
}

.navGaleria a:hover {
color:#fff;
background-color:#66b366;
text-decoration:none;
}


/* FORMS + BOTONS
------------------------------------------------------------------------*/
.field {
font:normal 11px Verdana, Geneva, sans-serif;
border:1px solid #777;
padding:2px;
}

.botoWrapper {
width:605px; /*615-10(padding)=605*/
height:27px;
margin-top:25px;
padding:5px;
border-top:1px dotted #008000;
background-color:#eee;
}

.boto {
float:left;
width:150px;
height:25px;
margin-right:10px;
font:normal 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:23px; /*centro text verticalment*/
color:#fff;
text-align:center;
border:1px solid #fff;
background:url(../logos/bg_boto.gif) repeat-x #000;
/*cursor:pointer;*/
}

.boto a {
display:block;
width:100%;
}

.boto a:link {text-decoration:none; color:#fff;}
.boto a:visited {text-decoration:none; color:#fff;}
.boto a:hover {text-decoration:none; color:yellow;}
.boto a:active {text-decoration:none; color:#999;}

.buttonTextBox {
    background-color: #F2F2F2;
    border-bottom: 1px dotted #999999;
    border-top: 1px dotted #999999;
    clear: both;
    margin-bottom: 20px;
    padding: 10px 0;
    text-align: center;
}
.noneClear {
    clear: none;
}
.buttonText {
    margin: 0 auto;
}
.buttonText {
    background-color: #008000;
    border: 1px solid #999999;
    color: #FFFFFF;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    line-height: 39px;
    margin: 15px 0;
    overflow: hidden;
    padding: 1px;
    width: 260px;
}



#menu-icon {
	display: hidden;
	width: 37px;
	height: 37px;
	background:  url(/img/menu.png) center;
}
a:hover#menu-icon {
	/*background-color: #CCC;*/
	border-radius: 4px 4px 0 0;
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	body {
		background-image:none;
	}
	#columnRight {
	  width: 98%;
	  margin: 0;
	  position: absolute;
	  top: 111px;
	  padding-left:4px;
	  left: 0px;
	  overflow: hidden;
	}
	#fotofija{
		width:98% !important;
	}
	#etiqueta, #promos,#carrito_sup,#iso,#serveis,#navheader,#footer,#logosotros, #topLeft span,#navcontainerindex{
		display:none !important;
	}
	#navcontainercontecto{
		margin-left:inherit !important;
	}
	#slider {
		width: 99% !important;
		height:inherit !important;
	}
	#navcontainerSec {
		margin-top:inherit !important;
	}
	
	#printagaleria{
		width:100% !important;
	}
	#wrapper {
		position:relative;
		width:100%;
		margin:0 auto;
		text-align:left; /*anulo text centrat body*/
		margin-top: -12px;
	}
	.field, textarea {
		width: 214px;
	}
	#fresasdentales, #containerfresas{
		width:98% !important;
	}
	#cesta {
	  position: fixed;
	  right: 10px;
	  top: 118px;
	}
	#botolistacompra, #botovaciarcarrito, #botovercarrito{
		height:22px;
	}
	
	#utils {
	  left: 252px !important;
	  z-index: 1000 !important;
	  top: 0px !important;
	  width: 140px !important;
	  height: 112px !important;
	  line-height: 13px !important;
	  position: fixed;
	}
	#buscador {
	  font: bold 14px Arial,Helvetica,sans-serif;
	  height: 35px;
	  overflow: hidden;
	  position: absolute;
	  right: -10px;
	  top: 78px;
	  width: 371px;
	}
	#botobuscar{
		width:57px;
		margin-left:-9px;
	}
	#botocomprar{
		width: 76px;
	}
	#campunitats {
	  width: 25px !important;
	  height: 19px !important;
	}
	#header{
		position: fixed;
		height:109px !important;
		z-index: 19990;
		background-color:#FFF;
		top: 0px;
		left: 0px;
	}
	#navcontainer{
		z-index:19999;
		width: 100%;
	}
	#nav-top{
		top:114px;
	}
	#innercontainer{
		width:100%;
	}
	#topRight {
	  position: fixed;
	  top: 59px;
	  right: -9px;
	}
	#enclose {
	  width: 100%;
	}
	.buttonText{
		width: 85% !important;
	}
	#top{
		top: 83px;
		position: fixed;
		z-index: 99998;
	    left: 0px;
	}
	#navcontainer{
		position:fixed;
	}
	#logo {
	  width: 169px;
	  text-align: left;
	  position: fixed;
	  z-index: 999;
	  top: 2px;
	  left: 45px;
	}
	#logo img{
		width:100%;
		height:inherit;
	}
	#logo span {
		margin-left: 45px;
	}
	#logo .cloud{
		display: none;
		height:1px;
	}
	#login{
		display:none;
	}
	#formlogin {
	  width: 135px;
	  height: 20px;
	  padding-left: 2px;
	}
	#formpasswd {
	  width: 100px;
	  height: 20px;
	  margin-top: 5px;
	  padding-left: 10px;
	}
	#loginbutton{
		width:10px;
	}
	#header{
		width:100%;
		height:145px;
		overflow:hidden;
	}
	#container {
		top:129px !important;
		width:100%;
	}
	#content{
		float:left;
		width:98%;
		padding-left:3px;
		overflow:hidden;
		top: 138px;
	}
	#content p {
	  line-height: 17px;
	  font-size: 13px;
	  width: 100%;
	}
	#footer{
		width:98%;
		overflow:hidden;
	}
	h1 {
		font-size:24px;
		padding-top: 21px;
		width: 94%;
	}
	h2, h3 {
		width: 94%;
	}
	#producto {
		width:100%;
		overflow:hidden;
	}
	#navcontainerSec {
	  position: fixed;
	  top: 4px;
	  left: 5px;
	  z-index: 99999;
	  width: initial;
	  height: inherit !important;
	}
	#menu-icon {
		display:inline-block;
	}
	
	#navcontainerSec ul, #navcontainerSec:active ul {
		display: none;
	}
	#navcontainerSec:hover ul, #navcontainerSec:hover {
		display: block;
		background-color:#FFF;
		width: inherit;;
	}
	#navcontainerSec h2 {
		display: none;
	}
}