body {
    background: #555555;
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-family: Tahoma;
    color: #dddddd;
    background-image: url("/static/public/fondu.png");
    background-repeat: repeat-x;
}
#logo {
    position: absolute;
    top: 0px;
    left: 16px;
    z-index: 100;
}
#titreLogo {
    position: absolute;
    top: 7px;
    left: 700px;
    z-index: 100;
}
#medaille {
    position: absolute;
    top: 55px;
    left: 53px;
    z-index: 100;
}
.barreTitre {
    font-family: Georgia;
    height: 5px;
    width: 100%;

    position: absolute;
    color: #99ddff;
    padding-left: 80px;
    font-size: 20px;
    z-index: 10;
}
.titleText {
    float: left;
    font-size: 20px;
}
.subtitle {
    float: left;
    font-size: 10px;
}
.barreOptions {
    height: 61px;
    /*width: 900px;*/
    width: 830px;
    position: absolute;
    float: left;
    left: 0px;
    padding-left: 120px;
    top: 26px;
    font-size: 11px;
    z-index: 10;
}

#blocOParam {
    text-align: center;
}
#contentBlocOParam {
    margin-top: -3px;
    text-align: center;
}
#blocOObst {
    text-align: center;
}
#contentBlocOObst {
    margin-top: -3px;
    text-align: center;
}
#blocOTrj {
    text-align: center;
}
#contentBlocOTrj {
    margin-top: -3px;
    text-align: center;
}
#blocOCon {
    text-align: center;
}
#contentBlocOCon {
    margin-top: -3px;
    text-align: center;
}
#blocOCou {
    text-align: center;
}
#contentBlocOColor {
    margin-top: -3px;
    text-align: center;
}
#blocOSav {
    text-align: center;
}
#contentBlocOSav {
    margin-top: -3px;
    text-align: center;
}
#blocOImp {
    text-align: center;
}
#contentBlocOImp {
    margin-top: -3px;
    text-align: center;
}
#blocOLangue {
    text-align: center;
}
#contentBlocOLangue {
    margin-top: -3px;
    text-align: center;
}
.blocOptions:hover,
.blocOptionsSel {
    color: #99ddff;
    border-left: solid #444444 1px;
    border-right: solid #444444 1px;
    border-top: solid #444444 1px;
    float: left;
    position: relative;
    height: 55px;
    margin-top: -5px;
    padding-top: 5px;
    width: 85px;
    background-image: -webkit-linear-gradient(top, #aaaaaa 0%, #727272 100%);
    background-image: -moz-linear-gradient(top, #aaaaaa 0%, #727272 100%);
    background-image: -ms-linear-gradient(top, #aaaaaa 0%, #727272 100%);
    background-image: -o-linear-gradient(top, #aaaaaa 0%, #727272 100%);
    background-image: linear-gradient(top, #aaaaaa 0%, #727272 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA',endColorstr='#777777', GradientType=0);
}
.blocOptions {
    border-left: solid #444444 1px;
    border-right: solid #444444 1px;
    border-top: solid #444444 1px;
    float: left;
    position: relative;
    height: 55px;
    width: 85px;
    padding-top: 5px;
    background-image: -webkit-linear-gradient(top, #888888 0%, #555555 100%);
    background-image: -moz-linear-gradient(top, #888888 0%, #555555 100%);
    background-image: -ms-linear-gradient(top, #888888 0%, #555555 100%);
    background-image: -o-linear-gradient(top, #888888 0%, #555555 100%);
    background-image: linear-gradient(top, #888888 0%, #555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#888888', GradientType=0);
}
.barreInfo {
    height: 30px;
    width: 900px;
    background: #777777;
    position: absolute;
    float: left;
    left: 0px;
    top: 58px;
    z-index: 12;
    padding-left: 120px;
    background-image: -webkit-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -moz-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -ms-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -o-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: linear-gradient(top, #777777 0%, #555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#727272', GradientType=0);
}
.barreOutil {
    position: absolute;
    bottom: 0px;
    top: 88px;
    width: 120px;
    left: 0px;
    background: #777777;
    height: 600px;
    z-index: 8;

    background-image: -webkit-linear-gradient(
        right top,
        #555555 0%,
        #727272 100%
    );
    background-image: -moz-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: -ms-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: -o-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: linear-gradient(right top, #555555 0%, #727272 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#555555', GradientType=1);
}

#barreOutilCache {
    position: absolute;
    bottom: 0px;
    top: 88px;
    width: 15px;
    left: 95px;
    background: #777777;

    z-index: 8;

    color: white;
    background-image: -webkit-linear-gradient(
        right top,
        #555555 0%,
        #727272 100%
    );
    background-image: -moz-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: -ms-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: -o-linear-gradient(right top, #555555 0%, #727272 100%);
    background-image: linear-gradient(right top, #555555 0%, #727272 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#555555', GradientType=1);
}

#barreTitreCache {
    height: 15px;
    width: 100%;
    background: #777777;
    position: absolute;
    float: left;
    left: 0px;
    top: 88px;
    z-index: 1000;
    background-image: -webkit-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -moz-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -ms-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: -o-linear-gradient(top, #777777 0%, #555555 100%);
    background-image: linear-gradient(top, #777777 0%, #555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#727272', GradientType=0);
}

.blocOutil {
    margin: 5px;
}

.blocInfo {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: solid #444444 1px;
    float: top;
    position: relative;
}

.blocInfo:hover {
    background: #999999;
}
.titreBloc {
    width: 100%;
    float: top;
    text-align: center;
    border-top: solid #444444 1px;
}
.contenu {
    position: relative;
    float: left;
}

.boutonOutil {
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    color: white;
    font-size: 10px;
    background: #999999;
    border: solid #444444 1px;
    /*text-decoration: none;*/
    margin: 1px;
    height: 50px;
    width: 50px;
}
.ligneBarreOutil {
    width: 100%;
}
.checkboxTable {
    float: left;
    text-align: left;
}
.boutonOutil:hover {
    border: solid #99ddff 1px;
}
.haie {
    background-image: url("/static/public/icons/obstacles/jump.png");
}
.poubelle {
    background-image: url("/static/public/icons/trash.png");
    background-repeat: no-repeat;
}
.num {
    background-image: url("/static/public/icons/numbers/num1.png");
    background-repeat: no-repeat;
}
.num2 {
    background-image: url("/static/public/icons/numbers/num2.png");
    background-repeat: no-repeat;
}
.num3 {
    background-image: url("/static/public/icons/numbers/num3.png");
    background-repeat: no-repeat;
}

.oxer {
    background-image: url("/static/public/icons/obstacles/double-jump.png");
}

.mur {
    background-image: url("/static/public/icons/obstacles/wall.png");
}

.longueur {
    background-image: url("/static/public/icons/obstacles/long-jump.png");
}
.table {
    background-image: url("/static/public/icons/obstacles/table.png");
}
.tunnel {
    background-image: url("/static/public/icons/obstacles/tunnel.png");
}
.tunnel3 {
    background-image: url("/static/public/icons/obstacles/tunnel3.png");
}
.cho {
    background-image: url("/static/public/icons/obstacles/sock.png");
}
.slalom {
    background-image: url("/static/public/icons/obstacles/slalom.png");
}
.slalom6 {
    background-image: url("/static/public/icons/obstacles/slalom6.png");
}
.pne {
    background-image: url("/static/public/icons/obstacles/tire.png");
}
.pal {
    background-image: url("/static/public/icons/obstacles/A.png");
}
.bal {
    background-image: url("/static/public/icons/obstacles/balance.png");
}
.pas {
    background-image: url("/static/public/icons/obstacles/run.png");
}

.zoomP {
    background-image: url("/static/public/icons/zoom/plus.png");
    background-repeat: no-repeat;
    background-position: center;
}
.zoomM {
    background-image: url("/static/public/icons/zoom/minus.png");
    background-repeat: no-repeat;
    background-position: center;
}
.newTrj {
	background-image: url("/static/public/icons/newtrj.png");
    background-repeat: no-repeat;
    background-position: center;
}
.dMilieu {
    background-image: url("/static/public/icons/driver/mr.png");
    background-repeat: no-repeat;
}
.gMilieu {
    background-image: url("/static/public/icons/driver/ml.png");
    background-repeat: no-repeat;
}
.dLong {
    background-image: url("/static/public/icons/driver/lr.png");
    background-repeat: no-repeat;
}
.gLong {
    background-image: url("/static/public/icons/driver/ll.png");
    background-repeat: no-repeat;
}
.dAvant {
    background-image: url("/static/public/icons/driver/fr.png");
    background-repeat: no-repeat;
}
.gAvant {
    background-image: url("/static/public/icons/driver/fl.png");
    background-repeat: no-repeat;
}
.neutre {
    background-image: url("/static/public/icons/driver/neutral.png");
    background-repeat: no-repeat;
}
.chien {
    background-image: url("/static/public/icons/driver/dog.png");
    background-repeat: no-repeat;
}

option {
    font-size: 12px;
    font-family: Tahoma;
    background-color: #666666;
    border: solid #444444 1px;
    color: #dddddd;
}
select {
    font-size: 12px;
    font-family: Tahoma;
    background-color: #666666;
    border: solid #444444 1px;
    color: #dddddd;
    width: 105px;
}
input {
    font-size: 12px;
    font-family: Tahoma;
}

input[type="text"] {
    background-color: #666666;
    border: solid #111111 1px;
    color: #dddddd;
    float: left;
    position: relative;
    width: 100px;
    margin-bottom: 3px;
}
.ligneCheckboxTable:hover {
    background-color: grey;
}
.txtOption {
    font-size: 10px;
    font-family: Tahoma;
    float: top;
    position: relative;
    padding-left: 4px;
    padding-right: 4px;
}
.txtCheckbox {
    float: left;
    text-align: left;
}
.boutonImage {
    font-size: 10px;
    font-family: Tahoma;
    float: top;
    position: relative;
    width: 100%;
    padding: 4px;
    margin-top: 4px;
}
.txtFb {
    background-color: #ccc;
    padding: 5px;
    margin: 5px;
    border: solid #444444 1px;
    color: #dddddd;
}
#blocInfoLangueFr {
    display: none;
}
#blocInfoLanguePt {
    display: none;
	}
#blocInfoLangueEn {
    display: none;
}
#blocInfoLangueEs {
    display: none;
}
#blocInfoLangueDe {
    display: none;
}
#blocInfoLangueIt {
    display: none;
}
#blocInfoLanguePl {
    display: none;
}
#blocInfoLangueCt {
    display: none;
}
#blocInfoLangueJp {
    display: none;
}
#blocInfoLangueSe {
    display: none;
}
#blocInfoLangueFi {
    display: none;
}
#blocInfoLangueDa {
    display: none;
}
#blocInfoLangueNo {
    display: none;
}

#blocInfoLangueHu {
    display: none;
}
#blocInfoLangueRu {
    display: none;
}
#blocInfoColor {
    display: none;
}

#blocInfoColorPerso {
    display: none;
}

#blocInfoTraj {
    display: none;
}

#blocInfoParam {
    display: none;
}

#blocInfoDim2 {
    display: none;
}

#blocInfoDim1 {
    display: none;
}
#blocInfoSauvegarde {
    display: none;
}
#blocInfoCon {
    display: none;
}

.noStyle {
    margin: 0;
    padding: 0;
    float: left;
    display: block;
}

#contentCanvas {
    position: absolute;
    top: 90px;
    left: 120px;
    z-index: 340;
    /*padding-top: 90px;
    padding-left: 120px;*/
}

#canvas {
    background: #ffffff;
    z-index: 350;
}
.imageExport {
    position: absolute;
    left: 0px;
    top: 0px;

    visibility: visible;
    z-index: 200;
}
#canvasimg {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 40px;
    z-index: 1000;
}
.imageNotExport {
    display: none;
}
.fondExport {
    color: white;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: visible;
    /* z-index: 400; */
    z-index: 150;
}
.fondNoExport {
    visibility: hidden;
}

.exempleCouleur {
    width: 20px;
    height: 15px;
    background-color: white;
    float: left;
    display: block;
    position: relative;
    margin-left: 6px;
    margin-right: 6px;
}

#texte {
    position: relative;
    float: left;
}

.colorSample {
    width: 20px;
    height: 15px;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    border: solid black 1px;
}
.miniColorSample {
    width: 10px;
    height: 15px;
    float: left;
}
#color-white, #color-white-2 {
    background-color: rgba(255, 255, 255, 1);
}
#color-blue, #color-blue-2 {
    background-color: rgba(211, 228, 240, 1);
}
#color-green, #color-green-2 {
    background-color: rgba(204, 255, 204, 1);
}

#color-blueObst {
    background-color: rgba(34, 170, 255, 1);
}
#color-redObst {
    background-color: rgba(204, 51, 0, 1);
}
#color-greyObst {
    background-color: rgba(221, 221, 221, 1);
}
#color-black {
    background-color: rgba(30, 30, 30, 1);
}
#color-pink {
    background-color: rgba(249, 141, 228, 1);
}
#color-grey-con {
    background-color: rgba(221, 221, 221, 1);
}
#color-red-con {
    background-color: rgba(204, 51, 0, 1);
}
#color-blue-con {
    background-color: rgba(34, 170, 255, 1);
}

#outils {
    display: block;
}

#contentCanvas-col1 {
	float:left;
}

#contentCanvas-col2 {
    /* position: absolute; */
    /* top: 0px; */
    /* left: 870px; */
    /* z-index: 340; */
	width: 150px;
	/*border: 1px solid white;*/
	padding-left:10px;
	overflow: hidden;
}