/*** basic setup ***/

    * {
        margin: 0px;
        padding: 0px;
    }
    
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    a div {
        border: none;
    }

    a img {
    	border: none;
    }


/*** background ***/

    body {
        background-image: url("back.jpg");
        font-family: Verdana, Arial, sans-serif;
        font-size: 9pt;
    }

    #page {
        position: absolute;
        left: 50%;
        width: 900px;
        margin-left: -450px;
    }

    #page .ktb-shadow-inner {
        float: left;
        border-left: 1px solid rgb(220, 220, 220);
    }


/*** tabs ***/

    #tabs {
        float: left;
        width: 100%;
        overflow: hidden;

        background-color: rgb(203, 199, 201);
        padding-top: 3px;
    }

    #tabs .legend {
        display: none;
    }

    #tabs ul {
        list-style: none;
        padding-left: 8px;
    }

    #tabs ul li {
        float: left;
        margin-left: -5px;
    
        background: url("tabs-left.png") no-repeat left top;
        padding: 0 0 0 2px;
    }
    
    #tabs ul li a {
        display: block;

        background: url("tabs-right.png") no-repeat right top;
        padding: 12px 8px 3px 6px;
    
        color: gray;
    }

    #tabs ul li:hover,
    body.accueil #tabs ul li.accueil,
    body.communaute #tabs ul li.communaute,
    body.communes #tabs ul li.communes,
    body.competences #tabs ul li.competences,
    body.administration #tabs ul li.competences,
    body.dechets #shortcuts ul li.competences,
    body.service #shortcuts ul li.competences,
    body.resultats2005 #shortcuts ul li.competences,
    body.trier #shortcuts ul li.competences,
    body.eau #shortcuts ul li.competences,
    body.informations #shortcuts ul li.competences,
    body.organisation #shortcuts ul li.competences,
    body.personnel #shortcuts ul li.competences,
    body.chiffres #shortcuts ul li.competences,
    body.distribution #shortcuts ul li.competences,
    body.ecolojunior #shortcuts ul li.competences,
    body.sensibilisation #shortcuts ul li.competences,
    body.guide #shortcuts ul li.competences,
    body.quizz #shortcuts ul li.competences,
    body.info #shortcuts ul li.competences,
    body.sport #shortcuts ul li.competences,
    body.piscine #shortcuts ul li.competences,
    body.parc #shortcuts ul li.competences,
    body.publications #tabs ul li.publications {
        background-position: left -50px;

        position: relative;
        z-index: 99;
    }

    #tabs ul li a:hover,
    body.accueil #tabs ul li.accueil a,
    body.communaute #tabs ul li.communaute a,
    body.communes #tabs ul li.communes a,
    body.competences #tabs ul li.competences a,
    body.competences #tabs ul li.competences a,
    body.administration #tabs ul li.competences a,
    body.dechets #tabs ul li.competences a,
    body.service #tabs ul li.competences a,
    body.resultats2005 #tabs ul li.competences a,
    body.trier #tabs ul li.competences a,
    body.eau #tabs ul li.competences a,
    body.informations #tabs ul li.competences a,
    body.organisation #tabs ul li.competences a,
    body.personnel #tabs ul li.competences a,
    body.chiffres #tabs ul li.competences a,
    body.distribution #tabs ul li.competences a,
    body.ecolojunior #tabs ul li.competences a,
    body.sensibilisation #tabs ul li.competences a,
    body.guide #tabs ul li.competences a,
    body.quizz #tabs ul li.competences a,
    body.info #tabs ul li.competences a,
    body.sport #tabs ul li.competences a,
    body.piscine #tabs ul li.competences a,
    body.parc #tabs ul li.competences a,
    body.publications #tabs ul li.publications a {
        background-position: right -50px;
        padding: 7px 8px 8px 6px;
    
        text-decoration: none;
    }

    #tabs ul li.blog,
    #tabs ul li.markets,
    #tabs ul li.jobs {
        background-position: left -100px;
    }

    #tabs ul li.blog a,
    #tabs ul li.markets a,
    #tabs ul li.jobs a {
        background-position: right -100px;
        color: white;
    }

    #tabs ul li.blog:hover,
    #tabs ul li.markets:hover,
    #tabs ul li.jobs:hover,
    body.blog #tabs ul li.blog,
    body.markets #tabs ul li.markets,
    body.jobs #tabs ul li.jobs {
        background-position: left -150px;

        position: relative;
        z-index: 99;
    }

    #tabs ul li.blog a:hover,
    #tabs ul li.markets a:hover,
    #tabs ul li.jobs a:hover,
    body.blog #tabs ul li.blog a,
    body.markets #tabs ul li.markets a,
    body.jobs #tabs ul li.jobs a {
        background-position: right -150px;
        padding: 7px 8px 8px 6px;
    }

/*** banner ***/

    #banner {
        clear: both;
        background: url("banner.jpg") no-repeat left top;
        height: 100px;

        border-top: 2px solid white;
    }

    body.markets #banner {
        background-position: 0px -100px;
    }

    body.blog #banner {
        background-position: 0px -200px;
    }
    
     body.jobs #banner {
        background-position: 0px -300px;
    }


/*** shortcuts ***/

    #shortcuts {
        float: left;
        width: 100%;
        
        padding: 4px 0px 4px 0px;

        background-color: rgb(159, 193, 73);
        border-top: 2px solid white;
        color: rgb(68, 113, 40);
    }

    #shortcuts .legend {
        display: none;
    }

    #shortcuts ul {
        list-style: none;
        overflow: hidden;
    }

    #shortcuts li {
        float: left;
        margin-left: 20px;
    }

    #shortcuts li a {
        color: white;
    }

    #shortcuts li a div {
        float: left;
        width: 24px;
        height: 16px;
        vertical-align: middle;
        margin-right: 4px;
        
        background: transparent url("picto.jpg");
    }

    #shortcuts li a:hover,
    body.administration #shortcuts ul li.administration a,
    body.dechets #shortcuts ul li.dechets a,
    body.service #shortcuts ul li.dechets a,
    body.resultats2005 #shortcuts ul li.dechets a,
    body.trier #shortcuts ul li.dechets a,
    body.eau #shortcuts ul li.eau a,
    body.informations #shortcuts ul li.eau a,
    body.organisation #shortcuts ul li.eau a,
    body.personnel #shortcuts ul li.eau a,
    body.chiffres #shortcuts ul li.eau a,
    body.distribution #shortcuts ul li.eau a,
    body.ecolojunior #shortcuts ul li.ecolojunior a,
    body.sensibilisation #shortcuts ul li.ecolojunior a,
    body.guide #shortcuts ul li.ecolojunior a,
    body.quizz #shortcuts ul li.ecolojunior a,
    body.info #shortcuts ul li.ecolojunior a,
    body.sport #shortcuts ul li.sport a,
    body.piscine #shortcuts ul li.sport a,
    body.parc #shortcuts ul li.sport a {
        color: rgb(210, 242, 17);
        text-decoration: none;
    }

    #shortcuts ul li.administration a div {
        background-position: 0px 0px;
    }

    #shortcuts ul li.administration a:hover div,
    body.administration #shortcuts ul li.administration a div {
        background-position: 0px -16px;
    }

    #shortcuts ul li.dechets a div {
        background-position: -25px 0px;
    }

    #shortcuts ul li.dechets a:hover div,
    body.dechets #shortcuts ul li.dechets a div,
    body.service #shortcuts ul li.dechets a div,
    body.resultats2005 #shortcuts ul li.dechets a div,
    body.trier #shortcuts ul li.dechets a div {
        background-position: -25px -16px;
    }

    #shortcuts ul li.eau a div {
        background-position: -50px 0px;
    }

    #shortcuts ul li.eau a:hover div,
    body.eau #shortcuts ul li.eau a div,
    body.informations #shortcuts ul li.eau a div,
    body.organisation #shortcuts ul li.eau a div,
    body.personnel #shortcuts ul li.eau a div,
    body.chiffres #shortcuts ul li.eau a div,
    body.distribution #shortcuts ul li.eau a div {
        background-position: -50px -16px;
    }

    #shortcuts ul li.ecolojunior a div {
        background-position: -75px 0px;
    }

    #shortcuts ul li.ecolojunior a:hover div,
    body.ecolojunior #shortcuts ul li.ecolojunior a div,
    body.sensibilisation #shortcuts ul li.ecolojunior a div,
    body.guide #shortcuts ul li.ecolojunior a div,
    body.quizz #shortcuts ul li.ecolojunior a div,
    body.info #shortcuts ul li.ecolojunior a div {
        background-position: -75px -16px;
    }

    #shortcuts ul li.sport a div {
        background-position: -100px 0px;
    }

    #shortcuts ul li.sport a:hover div,
    body.sport #shortcuts ul li.sport a div,
    body.piscine #shortcuts ul li.sport a div,
    body.parc #shortcuts ul li.sport a div {
        background-position: -100px -16px;
    }


/*** footer ***/

    #footer {
        float: left;
        width: 100%;
        height: 50px;
        
        border-top: 2px solid white;
        background: url("footer.jpg") no-repeat left top;
        background-color: rgb(211, 209, 210);

        font-size: smaller;
    }
    
    #footer .legend {
        display: none;
    }

    #footer ul {
        position: absolute;
        right: 10px;
        line-height: 50px;

        list-style: none;
    }

    #footer ul li {
        float: left;
        margin-right: 1em;
    }
    
    #footer ul li a {
        display: block;
        
        color: gray;
    }

    #footer #credits {
        color: gray;
        line-height: 50px;
        margin-left: 30px;
    }

    #footer #credits a {
        color: gray;
        text-decoration: underline;
    }