/* GENERAL ***************************/

body, table, input, select, textarea
{
    font                : 12px verdana, tahoma, arial, sans-serif;
    color               : #808080;
}

body
{
    margin              : 0;
    background          : #eee;
}

h1, h2, h3, h4, h5, h6
{
    margin              : 0;
    padding             : 0;
    color               : #df360b;
    font-family         : arial, trebuchet ms, verdana, sans-serif;
}

h2
{
    margin              : 18px 0 12px 0;
    font-size           : 1.6em;
}

html>body h2
{
    margin              : 10px 0 12px 0;
}

h3
{
    font-size           : 1.2em;
    color               : #909090;
}

form
{
    margin              : 0;
    padding             : 0;
}

fieldset
{
    border              : 1px solid #e0e0e0;
    background          : #f8f8f8;
    margin              : 0 0 10px 0;
    padding             : 5px 8px 8px 8px;
}

a
{
    color               : #808080;
    text-decoration     : none;
}

a:hover
{
    color               : #df360b;
    text-decoration     : underline;
}

a img
{
    border              : none;
}

a.date img
{
    border              : 1px solid #d0d0d0;
    background          : #e6e6e6;
    cursor              : pointer;
    padding             : 0;
    margin              : 0 0 3px 2px;
    vertical-align      : middle;
}

p
{
    text-align          : justify;
}

small
{
    font-size           : 0.9em;
}

input, textarea
{
    border              : 1px solid #d0d0d0;
}

input.button
{
    background          : #f3f3f3;
    color               : #808080;
    font-family         : verdana, sans-serif;
    font-size           : 8px;
    font-weight         : bold;
    text-transform      : uppercase;
    letter-spacing      : 0.4px;
    padding             : 2px;
}

input.radio, input.check
{
    border              : none;
}

div.google
{
    color               : #000;
    padding             : 8px;
    text-align          : center;
    background          : #fff;
    border-bottom       : 1px solid #505050;
    margin-bottom       : 10px;
}

.breaker
{
    clear               : both;
    font-size           : 0;
}

.oferta
{
    background          : #E12803;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 10px;
    -moz-border-radius  : 8px;
}

.novetat
{
    background          : #619DDC;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 10px;
    -moz-border-radius  : 8px;
}

/* APP LAYOUT ***************************/

#container
{
    width               : 787px;
    background          : #fff url(../img/bg.jpg) repeat-y;
    background-position : 2px 0;
    border              : 1px solid #bebebe;
    margin              : 15px auto 0 auto;
}

#header
{
    background          : #fff url(../img/top_bg.jpg) repeat-x bottom;
    height              : 126px;
    padding             : 0;
}

#headerLeft
{
    float               : left;
    border-right        : 1px solid #dedede;
    width               : 190px;
    height              : 122px;
    background          : #fff;
    margin-top          : 4px;
}

#headerLeft h1
{
    margin              : 10px 0 0 25px;
}

#headerRight
{
    float               : left;
    position            : relative;
    border-bottom       : 1px solid #909090;
    width               : 596px;
    height              : 122px;
    margin-top          : 4px;
}

#footer
{
    font-size           : 0.8em;
    width               : 787px;
    margin              : 3px auto 50px auto;
}

#footerLeft
{
    float               : left;
}

#footerRight
{
    float               : right;
}

#mainNav
{
    margin              : 15px 3px;
    font-family         : verdana, sans-serif;
}

html>body #mainNav
{
    margin              : 15px 5px;
}

#mainNav h3
{
    display             : none;
}

#mainNav ul
{
    list-style-type     : none;
    margin              : 0;
    padding             : 0;
    font-size           : 13px;
    font-weight         : normal;
    white-space         : nowrap;
}

#mainNav li
{
    display             : inline;
    padding             : 8px 20px 1px 4px;
    margin              : 0;
    border-top          : 7px solid #c6c6c6;
    border-right        : 1px solid #dedede;
}

#mainNav li a
{
    color               : #505050;
}

html>body #mainNav li
{
    padding-right       : 24px;
    margin              : 0 -2px;
}

#mainNav li.active
{
    border-top-color    : #909090;
}

#mainNav li.active a
{
    color               : #df360b;
}

#mainNav li:hover
{
    border-top-color    : #909090;
}

#telefonHeader
{
    position            : absolute;
    top                 : 65px;
    left                : 10px;
    background          : transparent url(../img/telefon.gif) no-repeat top left;
    width               : 224px;
    height              : 53px;
    border              : none;
}

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

#cistella
{
    position            : absolute;
    bottom              : 8px;
    right               : 10px;
    border              : 1px solid #dedede;
    background          : #fff;
    padding             : 5px;
    background          : #fff url(../img/cistella.jpg) no-repeat;
    background-position : 5px 8px;
    width               : 250px;
}

#cistella h3
{
    display             : none;
}

#cistella input.button
{
    width               : 90px;
    display             : block;
}

#commandVeureCistella
{
    margin-bottom       : 3px;
}

#cistellaLeft
{
    float               : left;
    margin              : 5px 10px 0 28px;
}

html>body #cistellaLeft
{
    margin-left         : 55px;
}

#cistellaPreu
{
    font-weight         : bold;
    font-size           : 1.4em;
}

#cistellaRight
{
    float               : left;
    padding             : 3px 2px 6px 0;
}

html>body #cistellaRight
{
    padding             : 3px 2px 3px 0;
}

#commandFinalitzarCistella, #commandFinish
{
    color               : #ae2300;
}

#navBar
{
    font-size           : 0.9em;
    text-align          : right;
    float               : right;
    margin-top          : 15px;
}

#navBar span
{
    font-weight         : bold;
}

#pager
{
}

#pagesList
{
    float               : right;
}

#pagerMsg
{
    float               : left;
}

#contents
{
    margin              : 0;
    padding             : 0;
    clear               : both;
}

#menu
{
    float               : left;
    width               : 188px;
    margin-left         : 1px;
    border-top          : 7px solid #909090;
}

html>body #menu
{
    margin-left         : 2px;
}

#cerca
{
    border              : none;
    border-bottom       : 2px solid #ebebeb;
    background          : #eceff0;
    padding             : 12px 0;
    text-align          : center;
}

#cerca #searchText
{
    width               : 115px;
}

#cerca h3
{
    display             : none;
}

#categories h3
{
    display             : none;
}

#categories ul
{
    list-style          : url(../img/bullet.gif) disc;
    margin              : 10px 0 0 0;
    padding             : 0;
}

#categories li
{
    border-bottom       : 1px solid #ebebeb;
    margin              : 0 20px 0 30px;
    padding             : 3px 0;
}

#categories li.active
{
    font-weight         : bold;
}

#client
{
    margin              : 10px 3px;
    padding             : 3px;
    border              : 1px solid #ebebeb;
    background          : #fff;
}

#client h3
{
    padding             : 2px;
    background          : #909090;
    text-transform      : uppercase;
    color               : #f0f0f0;
    font-weight         : normal;
    font-size           : 1em;
}

#client input
{
    width               : 112px;
}

#client input.button
{
    width               : auto;
}

#clientContents
{
    padding             : 5px;
    text-align          : right;
}

#clientContents div
{
    margin              : 5px 0;
}

#clientContents input.button
{
    margin-top          : 3px;
}

#main
{
    float               : left;
    width               : 575px;
    padding             : 10px 0 30px 10px;
}

div.errors
{
    text-align          : center;
    font-weight         : bold;
    color               : #ff0000;
}

#results
{
    border              : 1px solid #dedede;
    margin-bottom       : 10px;
    font-weight         : bold;
    padding             : 10px;
    text-align          : center;
    background          : #fbfadf;
}

p a
{
    color               : #3579eb;
    text-decoration     : underline;
}

div.clauOblidada a
{
    font-size           : 0.8em;
    color               : #3579eb;
    text-decoration     : underline;
}

/* MAIN PAGE ***************************/

#mainImage
{
    margin-bottom       : 15px;
}

div.mainProductes
{
}

div.mainProductes div.producte
{
    float               : left;
    border              : 1px solid #dfdfdf;
    width               : 272px;
    padding             : 5px;
    background          : #f8f8f8;
    text-align          : center;
    margin-bottom       : 8px;
}

div.mainProductes h2
{
    margin              :  0 0 6px 0;
}

div.mainProductes h2 span
{
    font-size           : 0.6em;
    font-weight         : normal;
}

div.mainProductes h2 span a
{
    color               : #df360b;
}


div.mainProductes div.producte small
{
    font-size           : 0.9em;
    color               : #a0a0a0;
}

div.mainProductes div.producte div.data
{
    float               : right;
    width               : 160px;
    height              : 73px;
    position            : relative;
}

div.mainProductes div.producte div.preus
{
    font-size           : 1.0em;
    text-align          : center;
    white-space         : nowrap;
}

.preuVell
{
    text-decoration     : line-through;
}

div.mainProductes div.producte img
{
    float               : left;
    margin-right        : 5px;
}

div.mainProductes div.producte h3
{
    text-align          : center;
    margin-bottom       : 5px;
}

div.mainProductes div.producte h3 a
{
    color               : #3579eb;
}

/* EMPRESA ***************************/

#empresa h3
{
    display             : none;
}

#empresa div.image_title
{
    margin-left         : auto;
    margin-right        : auto;
    background          : #fff url(../img/slogan_empresa.jpg);
    height              : 110px;
}

#empresa div.image_title img
{
    padding             : 3px;
}

#empresa div.image
{
    margin-left         : auto;
    margin-right        : auto;
}

#empresa div.image img
{
    padding             : 3px;
    border              : 1px solid #e3e3e3;
}

/* COMPTE CLIENT ***************************/

#clientContentsAuth
{
    text-align          : center;
    margin-top          : 10px;
}

#clientContentsAuth div.msg
{
    margin              : 10px;
    text-align          : center;
    font-size           : 0.8em;
    color               : #999;
}

#clientContentsAuth div.msg a
{
    color               : #3579eb;
    text-decoration     : underline;
}

/* PRODUCTES LIST, CISTELLA LIST ***************************/

form.list table
{
    width               : 100%;
    border-collapse     : collapse;
    margin-bottom       : 20px;
}

form.list td
{
    border              : 1px solid #e0e0e0;
    border-left         : none;
    border-right        : none;
    padding             : 5px 0;
}

form.list tr.odd, form.list tr.oddLast
{
    background          : #f6f6f6;
}

form.list tr.noItems td
{
    font-weight         : bold;
    padding             : 30px 0;
    text-align          : center;
}

form.list td.img
{
    width               : 10px;
    text-align          : center;
}

form.list img
{
    border              : 1px solid #d0d0d0;
}

form.list .nom
{
    text-align          : left;
    padding-left        : 10px;
}

form.list h3
{
    margin-bottom       : 3px;
}

form.list h3, form.list h3 a
{
    color               : #3579eb;
}

form.list .desc
{
    color               : #acacac;
}

form.list td.preus
{
    text-align          : center;
    padding             : 0 10px;
    white-space         : nowrap;
}

form.list td.quantitat
{
    text-align          : center;
    padding             : 0 10px;
    white-space         : nowrap;
}

form.list td.quantitat label
{
    font-size           : 0.9em;
}

form.list td.quantitat input
{
    text-align          : center;
}

form.list td.quantitat input.button
{
    padding             : 2px 10px;
    margin-top          : 5px;
}

html>body form.list td.quantitat input.button
{
    padding             : 2px 20px;
}

form.list div.detall
{
    margin-bottom       : 5px;
}

form.list td.subtotal
{
    padding             : 0 10px;
    text-align          : right;
}

form.list tfoot td
{
    border              : none;
}

form.list tfoot td.total
{
    text-align          : right;
    font-weight         : bold;
    padding-right       : 20px;
}

form.list tfoot td.quantitat, form.list tfoot td.subtotal
{
    border-top          : 4px solid #d0d0d0;
}

div.buttons
{
    text-align          : right;
}

div.buttons input
{
    width               : 130px;
}

html>body div.buttons input
{
    width               : auto;
}

/* PRODUCTES VIEW ***************************/

form.view
{
    border              : 1px solid #e0e0e0;
    padding             : 5px;
}

form.view div.img
{
    float               : left;
    width               : 234px;
}

form.view div.img img
{
    border              : 1px solid #d0d0d0;
}

form.view div.data
{
    float               : left;
    background          : #EBEFF0;
    border              : 1px solid #D2DDE1;
    width               : 215px;
    height              : 145px;
    margin              : 18px auto 0 60px;
    text-align          : center;
}

form.view div.detall
{
    margin              : 22px 0 5px 0;
    font-size           : 1.2em;
}

form.view div.preu
{
    font-size           : 1.2em;
}

form.view div.quantitat
{
    margin-top          : 15px;
}

form.view div.quantitat input
{
    text-align          : center;
}

form.view div.quantitat label
{
    font-size           : 0.9em;
}

form.view div.quantitat input.button
{
    padding             : 2px 10px;
    margin-top          : 5px;
}

html>body form.view div.quantitat input.button
{
    padding             : 2px 25px;
}

form.view div.desc
{
    margin              : 0 15px 10px 15px;
    text-align          : justify;
    color               : #a0a0a0;
}

form.view h3
{
    color               : #909090;
    margin              : 10px 0 8px 0;
}

#productesSimilars
{
    margin-top          : 35px;
}

/* LOGIN PAGE ***************************/

#login form
{
    float               : left;
}

#login div.float
{
    position            : relative;
    width               : 260px;
    border              : 1px solid #e0e0e0;
    padding             : 10px;
    height              : 165px;
}

#login h3
{
    color               : #909090;
    font-size           : 1.2em;
    font-weight         : bold;
    margin-top          : 5px;
    margin-bottom       : 5px;
}

#login div.buttons
{
    position            : absolute;
    bottom              : 10px;
    right               : 10px;
}

#login div.clauOblidada
{
    text-align          : center;
}

#loginFrmNouClient div.float
{
    margin-right        : 10px;
    background          : #f6f6f6;
}

#loginFrmClient div.float
{
}

#login div.field
{
    margin-top          : 5px;
    margin-right        : 55px;
    text-align          : right;
}

#login div.field label
{
}

#login div.field input
{
    width               : 125px;
}

#login input.button
{
    width               : 75px;
}

#login div.errors
{
    font-size           : 0.9em;
}

/* ELMEUCOMPTE PAGE ***************************/

#elMeuCompte div
{
    background-color    : #F4F4F4;
    border              : 1px solid #E0E0E0;
    margin              : 20px 0 0 0;
}

#elMeuCompte li
{
    padding             : 10px 25px 10px 0px;
}

#elMeuCompte ul
{
    list-style          : url(../img/bullet.gif) disc;
    /*margin-top          : 25px;*/
}

#elMeuCompte ul a
{
    color               : #3579eb;
    font-weight         : bold;
    text-decoration     : none;
}

#elMeuCompte p
{
    margin              : 0;
    padding             : 0;
    text-align          : justify;
}


/* COMANDES LIST PAGE ***************************/

form.search legend
{
    font-weight         : bold;
}

div.searchField
{
    float               : left;
    margin              : 0 0 0 3px;
}

div.searchField label
{
    font-weight         : normal;
}

#comandesList td
{
    font-size           : 0.9em;
    padding             : 5px;
    text-align          : center;
}

.en_proces
{
    background          : #FFBB1B;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 5px;
}

.en_repartiment
{
    background          : #ECD64A;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 5px;
}

.entregada
{
    background          : #10B74D;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 5px;
}

.cancelada
{
    background          : #FF0000;
    color               : #ffffff;
    font-size           : 0.8em;
    padding             : 0 5px;
}

/* COMANDES VIEW PAGE ***************************/

#comandesView table
{
    margin-bottom       : 0;
}

#comandesView td
{
    padding             : 5px;
}

#comandesView label
{
    font-size           : 1.2em;
    font-weight         : bold;
    color               : #909090;
}

#comandesView table.data
{
    width               : 100%;
    margin-bottom       : 25px;
    border-collapse     : collapse;
}

#comandesView table.data thead tr
{
    background          : #f0f0f0;
}

#comandesView table.data td, #comandesView table.data th
{
    text-align          : center;
    border              : 1px solid #e6e6e6;
}

#comandesView dl
{
    margin              : 0 0 20px 0;
}

#comandesView dd
{
    border              : 1px solid #e0e0e0;
    padding             : 6px;
    margin              : 5px 0 0 0;
}

/* CLIENTS ADD PAGE ***************************/

form.data table
{
    background          : #FFFFFF url(../img/form_bg.jpg) repeat-x;
    border-top          : 2px solid #ccc;
    border-collapse     : collapse;
    margin              : 10px 0 20px 0;
    padding             : 0;
    width               : 100%;
}

form.data th
{
    border-bottom       : 1px solid #dedede;
    color               : #666;
    margin              : 0;
    padding             : 6px 0 6px 15px;
    width               : 30%;
    text-align          : left;
    vertical-align      : top;
}

form.data td
{
    border-bottom       : 1px solid #dedede;
    margin              : 0;
    padding             : 6px 0 6px 6px;
    width               : 70%;
}

form.data div.error
{
    font-size           : 0.9em;
    font-weight         : bold;
    color               : #ff0000;
}

form.data a
{
    color               : #3579eb;
    text-decoration     : underline;
}

/* CONTACTA ***************************/

#dadesContacte
{
    margin              : 20px 0 30px 25px;
    float               : left;
}

#dadesContacte p
{
    text-align          : right;
}

#contacta td input, #contacta td select
{
    width               : 200px;
}

#contacta textarea
{
    width               : 375px;
}

#contacta div.image
{
    float               : left;
    margin-left         : 30px;
}

#contacta div.image img
{
    padding             : 3px;
    border              : 1px solid #e3e3e3;
}

/* CONDICIONS ***************************/

#condicions ul
{
    list-style          : square;
    margin              : 7px 25px 20px 0;
}

#condicions li
{
    text-align          : justify;
    padding             : 5px;
}

html>body #condicions li
{
    padding             : 2px;
}

#condicions ul a
{
    color               : #3579eb;
    text-decoration     : underline;
}

/* AJUDA ***************************/

#ajuda a
{
    color               : #3579eb;
    text-decoration     : underline;
}

#ajuda ul
{
    list-style          : url(../img/bullet.gif) disc;
}

#ajuda li
{
    margin-top          : 2px;
    padding             : 3px 0;
    text-align          : justify;
}

html>body #ajuda ul
{
    padding-left        : 35px;
}

html>body #ajuda li
{
    padding             : 2px;
}

#ajuda ul a
{
    color               : #808080;
    text-decoration     : none;
}

#ajuda ul a:hover
{
    color               : #df360b;
    text-decoration     : underline;
}

/* FUNCIONAMENT I FAQ ***************************/

#func-faq h3
{
    text-align          : justify;
}

#func-faq div.back
{
    margin-bottom       : 45px;
    text-align          : right;
}

#func-faq ul
{
    list-style          : square;
    margin              : 7px 20px 0px 0;
}

#func-faq li
{
    text-align          : justify;
    padding             : 5px;
}

#func-faq div.back a
{
    color               : #3579eb;
    text-decoration     : underline;
}

/* INFORMACIÓ LEGAL ***************************/

#informacioLegal h3
{
    margin-top          : 25px;
}

#informacioLegal p
{
    margin-left         : 15px;
}

#informacioLegal li
{
    padding             : 3px;
}

/* ZONES ***************************/

#zones div.regio
{
    margin-top          : 25px;
}

#zones div.data
{
    float               : right;
    margin              : 0 10px 0 20px;
    width               : 150px;
}

#zones div.data ol
{
}

#zones div.data li
{
    font-size           : 0.9em;
}

#zones div.mapa
{
    float               : right;
    width               : 370px;
    text-align          : right;
}

#zones div.mapa img
{
    border              : 1px solid #e3e3e3;
    padding             : 3px;
}


/* NOVA CLAU ***************************/

#novaClau th
{
    text-align          : right;
}

#novaClau th, #novaClau td
{
    padding             : 15px;
}