Download raw (4.9 KB)

@import "styles.less";

@font-size: 20px;
@line-height: 25px;
@font: "centurycatalogue";
@width: 45em;

body {
    width: @width;
    margin: @line-height  auto;
    font-family: @font;
    font-size: @font-size;
}
div#main-header {
    margin: @line-height  0;
    h1 {
        font-family: 'alfphabetbipocatcondensed';
        font-size: 4.6em;
    }
    p {
        outline: 1px solid black;
        padding: 0.15em;
        padding-bottom: 0.5em;
        margin-top: -7px;
        margin-bottom: 12px;
        font-family: 'Career';
        font-size: 2.1em;
    }
    img {
        width: 500px;
    }
}

h2 {
    font-size: 6em;
    line-height: 0.85;
    letter-spacing: -3px;
    text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
    font-family: 'alfphabetbipocatcondensed';
    color: white;
    text-align: center;
}
h3 {
    font-family: 'alfphabetbipocatcondensed';
    margin-bottom: 1em;
}
p {
    line-height: @line-height;
}

div#steps {
    font-family: 'urw-grotesk-t';
    text-align: center;
    color: darkgray;


    div {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin: @line-height  0;
        height:  @line-height * 2;
        padding: @line-height / 2;
        width: @width / 2 - 1;
        float: left;
    }
    div + div {
        margin-left: 2em;
    }

    div.active {
        background-color: @color-B3;
        color: black;
    }
}

form {
    clear: both;
    line-height: 2.5 * @line-height;

    div {
        text-align: left;
    }
}

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
div.box {
    float: left;
    width: 50%;
    padding: @line-height ;

    div {
        display: flex;
        flex-wrap: wrap;
    }
    input, select {
        flex: 1;
        height: @line-height;
        position: relative;
        top: @font-size;
    }
}
.step-1.cooperation div.box:nth-of-type(1) {
    min-height: 550px;
}
div.box:nth-of-type(2) {
    border-bottom: 1px double black;
    border-left: 3px double black;
}
div.box:nth-of-type(3) {
    margin-top: 1px;
    border-left: 3px double black;
    border-top: 1px double black;
}
div.box:nth-of-type(2) {
    border-bottom: 0;
}


th {
    text-align: left;
}

label {
    font-family: 'alfphabetbipocatcondensed';
    margin-right: @line-height / 2;
    color: gray;
}

div.required label {
    color: black;
}

select {
    font-family: @font;
    font-size: @font-size - 2;
    background-color: white;
    border: 0;
    /*border-top: 1px solid black;*/
    border-bottom: 1px solid black;
    
    &:focus {
        border-top: 1px solid black;
        background-color: @color-B3;
    }
}

input {
    border: 0;
    border-bottom: 1px solid black;
    background-color: white; 
    font-family: @font;
    font-size: @font-size - 2;
    padding: 0 @line-height / 4 ;

    &:focus {
        background-color: @color-B3;
        border-top: 1px solid black;
    }

    &[type=submit] {
        font-family: 'alfphabetbipocatcondensed';
        font-size: @font-size;
        cursor: pointer;
        border-top: 1px solid black;

        &:hover {
            background-color: @color-A3;
        }
    }
}

button {
    border: 0;
    background-color: white; 
    font-family: 'urw-grotesk-t';
    cursor: pointer;
    background-color: @color-D1;
    padding: 1em;
    height: 48px;
    vertical-align: text-bottom;
    font-size: @font-size / 1.5;

    &:hover {
        background-color: @color-A3;
    }
}


div#nav {
    clear: both;
    width: 50%;
    float: left;
    text-align: center;
    margin-top: @line-height;
}

.step-1 div#confirm {
    margin-left: 50%;
}

div#confirm {
    width: 50%;
    float: left;
    text-align: center;

    input#prendre-part {
        font-family: 'urw-grotesk-t';
        margin: auto;
        margin-top: @line-height;
        background-color: @color-E3;
        margin: @line-height  0;
        height:  @line-height * 2;
        padding: @line-height / 2;
        width: 50%;
        clear: both;
        color: black;

        &:hover {
            background-color: @color-B3;
            color: black;
        }
    }
}

sup {
    font-size: 10px;
    vertical-align: 7px;
    line-height: 0;
    margin-left: 1px;
}

.errorlist {
    color: @color-C2;
    line-height: @line-height;
    flex: 1 100%;
}
.step-1 .errorlist {
    margin-bottom: -14px;
    margin-top: 20px;
}

#confirm-box {
    float: left;
    padding-top: 26px;
}

.declaration {
    margin-top: 1em;
    margin-left: 1em;
    padding-left: 1em;
    float: left;
    line-height: @line-height;
    border-left: 3px double black;
}

strong {
    border-bottom: 1px double black;
}

a, 
a:visited {
    text-decoration: none;
    color: @color-A2;

    &:hover {
        text-decoration: underline;
    }
}
a:visited {
    text-decoration: none;
    color: @color-A1;
}