@import url('jqModal.css');
@import url('fancybox.css');  

/* ----------------------------- LAYOUT ---------------------------- */
html {background:#000}
body {background:#000;font:12px 'Trebuchet MS', Verdana, sans-serif; color:#000; text-align:center}
#wrapper {width:900px;margin:0 auto;overflow:auto;}
#header {background:url('../img/top.jpg') no-repeat;height:160px;text-align:right}
#main {background:#fff url('../img/background.png') repeat-y; font-size:14px; overflow:auto; width:100%}
#content {background:#d1e2e9; float:left; width:550px; padding-bottom:50px; text-align:left;position:relative;overflow:auto}
#footer {padding:10px 0; font-size:11px}

#sponsors {text-align:center;float:left;width:150px}
#colab {text-align:center;padding:10px}
#mapa_parades {position:relative}
.parada {display:none;position:absolute;top:20px;left:20px}

/* ----------------------------- GLOBAL ---------------------------- */
.putRight {float:right;margin-left:50px;}
.putLeft {float:left; margin-right:50px;}
.clearfix {float:none;overflow:auto;clear:left;}
.clearfix_total {float:none;clear:both;width:86%;overflow:auto}
.hidden {display:none}
.maxsize {width:95%;margin:0 auto}
.totalcolumn {clear:both; float:none}

.toggler {cursor:pointer}
.centered {text-align:center; display:block; margin:0 auto}

.bi_part {width:49%;float:left;margin:0}
.tri_part {width:31%;float:left;text-align:left;margin:5px}

.success {
    display:block;
    background:#ccf7ca url('../img/icons/tick-circle.png') no-repeat 5px center;
    border:1px solid #117101;
    color:#117101;
    margin:5px;
    padding:5px 25px;
    font-size:11px;
}
.alert {
    display:block;
    background:#fcfd9c url('../img/icons/exclamation.png') no-repeat 5px center;
    border:1px solid #f3a000;
    color:#f3a000;
    margin:5px;
    padding:5px 25px;
    font-size:11px;
}
.error, em.form_error {
        display:block;
        background:#ffd3d3 url('../img/icons/cross-circle.png') no-repeat 5px center;
        border:1px solid #e80101;
        color:#e80101;
        margin:5px;
        padding:5px 25px;
        font-size:11px;
}

.info {
    display:block;
    background:#c6d9ff url('../img/icons/information.png') no-repeat 5px center;
    border:1px solid #003aaf;
    color:#003aaf;
    margin:5px;
    padding:5px 25px;
    font-size:11px;
}

/* ----------------------------- TEXT ---------------------------- */
p {margin:15px;text-align:justify}
#footer p {color:#fff;text-align:center; margin:5px}

h1 {margin:10px 20px 20px; font-size:20px; color:#222; letter-spacing:10px}
h2 {background:#000; padding:4px 10px; font-size:16px; color:#fff; clear:both; font-weight:bold}
h3 {background: #5ba9ed; padding:2px 10px; font-size:15px; border-top:1px solid #fff; border-bottom:1px solid #fff}

/* ----------------------------- LINKS ---------------------------- */
a {color:#000;font-weight:bold;text-decoration:none;outline:0}
a:hover {text-decoration:underline}
#header a {margin:1px 14px;}
#footer a {color:#fff}

/* ----------------------------- LISTS ---------------------------- */

ul {margin:15px 35px; overflow:auto}
ul li {margin:5px 0}
ul li ul {display:none; margin:0 10px; border-left:1px solid #999; padding:0 10px}
ul li ul li {margin-top:10px; margin-bottom:0}

#menu {
        width:150px;
        overflow:auto;
        float:left;
        margin:10px 25px !important;
        margin-left:12px;
        list-style-image: none;
}
#menu li { margin:5px 0; overflow:auto; text-align:center}
#menu li a {background:url('../img/menu_back.gif') no-repeat; color:#fff; font-size:18px; line-height:25px; display:block; width:150px}
#menu a:hover {background:url('../img/menu_back_hover.gif') no-repeat; text-decoration:none}


#pags {margin:50px 30px}
#pags li { float:left;margin:1px;list-style:none;border:1px solid #999; padding:3px 0;font-size:11px}
#pags a {padding:3px 8px;background:#fff;color:#fff; color:#000;background:#fff}
#pags a:hover {text-decoration:none;background:#000;color:#fff}
#pags .pag_active {padding:3px 8px;color:#000;border:0;font-weight:bold}

#dades {}
#dades li {float:left;margin:5px 0; width:49%}

/* ------------------------------ FROMS ---------------------------- */
form {overflow:auto;margin:0 auto}
form p {float:left;width:270px; margin:10px}
label {display:block; float:left; width:100px; text-align:right; padding-right:10px; line-height:12px}
label span {color:#999}
input[type="submit"], .mybutton {padding:5px 10px; color:#fff; background:#000;border:0; cursor:pointer}
textarea {width:310px}
textarea.dif {margin:0 10px; width:auto}

/* ----------------------------- IMAGES ---------------------------- */
img {border:0}
#mapa {padding:0 5px;position:absolute;right:15px;z-index:10}
#mapa:hover {text-decoration:none}
#mapa > img {width:300px}
#mapa > span > img {position:absolute; top:50%; left:50%; background:url(../img/transp.png); border:1px solid #000;padding:10px; display:none}
#mapa:hover > span > img {display:inline}


/* GALERIA ---------------------*/
#pics {margin:10px; padding:1px 25px; overflow:auto}
#pics li {margin:3px 6px; padding: 0; float:left; position:relative}
#pics li a img {border:1px solid #222; height:100px; width:100px}
#pics li img:hover { border:1px solid #777}
.title {
        background:#000;
        color:#FFF;
        padding:2px 10px;
        position:absolute;
        top:0px;
        left:0px;
        opacity:.7;
}
/* fi galeria ----------------*/

#sponsors img {
        max-width:130px;
        width:auto !important;
        width:120px;
        max-height:100px;
        margin:10px 0
}
#colab img {height:60px;margin:20px}