/* LLEGENDA *********************/

#zones div.right div.llegenda fieldset
{
    background          : #f3f3f3;
}

div.llegenda a
{
    color               : #6b6b6b;
}

div.llegenda a:hover, div.llegenda a.hover
{
    background          : #999;
    color               : #fff;
}

div.llegenda a:hover span.circle, .hover span.circle
{
    background          : transparent url("../img/markers/marker-circle-hover.png") no-repeat;
}

div.llegenda td
{
    padding             : 3px 4px;
}

div.llegenda ul
{
    list-style-type     : none;
    margin              : 0;
    padding             : 0;
}

div.llegenda li, div.llegenda fieldset li
{
    padding             : 4px 0;
}

span.color
{
    display             : block;
    border              : 1px solid #ccc;
    height              : 12px;
    float               : left;
    width               : 12px;
    vertical-align      : middle;
    text-align          : center;
}

#cpsView span.color
{
    margin-right        : 8px;
}

span.color img
{
    margin              : 1px;
    vertical-align      : baseline;
}

span.circle
{
    display             : block;
    float               : left;
    width               : 16px;
    height              : 16px;
    color               : #000;
    text-align          : center;
    font-size           : 11px;
    font-family         : arial, sans-serif;
    letter-spacing      : 0.007em;
    margin-right        : 8px;
    text-decoration     : none;
}

span.modernitzacio
{
    background          : transparent url("../img/markers/marker-regadiu-circle-modernitzacio.png") no-repeat;
}

span.existent
{
    background          : transparent url("../img/markers/marker-regadiu-circle-existent.png") no-repeat;
}

span.nova
{
    background          : transparent url("../img/markers/marker-regadiu-circle-nova.png") no-repeat;
}

span.en-projecte
{
    background          : transparent url("../img/markers/marker-cp-circle-en-projecte.png") no-repeat;
}

span.en-promocio
{
    background          : transparent url("../img/markers/marker-cp-circle-en-promocio.png") no-repeat;
}

span.fi-projecte
{
    background          : transparent url("../img/markers/marker-cp-circle-fi-projecte.png") no-repeat;
}

span.redactant-bases
{
    background          : transparent url("../img/markers/marker-cp-circle-redactant-bases.png") no-repeat;
}

span.espais-muntanya-interior
{
    background          : transparent url("../img/markers/marker-zepa-circle-espais-muntanya-interior.png") no-repeat;
}

span.espais-prepirineu
{
    background          : transparent url("../img/markers/marker-zepa-circle-espais-prepirineu.png") no-repeat;
}

span.espais-plana-agricola
{
    background          : transparent url("../img/markers/marker-zepa-circle-espais-plana-agricola.png") no-repeat;
}

/* GMAPS ************************/

p.legend
{
    border              : 1px solid #ccc;
    text-align          : center;
    margin              : 0 0 10px 0;
    padding             : 4px 0;
    width               : 454px;
}

p.legend img
{
    padding             : 0 0 2px 0;
    vertical-align      : middle;
    margin              : 0 0 0 12px ;
}

p.legend img.first
{
    margin-left         : 0;
}

#gmap
{
    width               : 454px;
    height              : 454px;
    border              : 1px solid #ccc;
    margin-bottom       : 10px;
    background          : #99B3CC;
}

.markerLabel
{
    width               : 20px;
    height              : 32px;
    background          : transparent;
    color               : #000;
    text-align          : center;
    font-size           : 11px;
    font-family         : arial, sans-serif;
    letter-spacing      : 0.007em;
    margin-top          : 2px;
}

.markerInfo
{
    width               : 250px;
}

.markerInfo .foto
{
    float               : left;
    margin              : 0 10px 5px 0;
}

.markerInfo .foto a:hover
{
    background          : transparent;
}

.markerInfo .dadesSec
{
    font-size           : 0.8em;
    color               : #b0b0b0;
    margin-top          : 3px;
}

.markerInfo .dadesSec a
{
    color               : #008BB2;
}

.markerInfo .dadesSec a:hover
{
    background          : #008BB2;
    color               : #fff;
}

.markerInfo .more
{
    position            : static;
    text-align          : right;
    margin              : 0;
    padding             : 0 0 10px 0;
}

.loading
{
    color               : #fff;
    font-weight         : bold;
    padding             : 15px 40px;
    background          : transparent url(../img/loading.gif) no-repeat 15px 15px;
}

.loading img
{
    vertical-align      : middle;
}