#detail {

}

#detail h3 {
    font-size: 125%;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
}

#detail h4 {
    font-size: 110%;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
}

/*
    INTRO
*/
#detail div.intro {
    background: #000;
}

#detail div.intro img {
    max-height: 600px;

    margin: 0 auto;
    display: block;
}

/*
    PARTNERS
*/
#detail div.partners {
    min-height: 30px;

    padding: 1em;

    text-align: center;
    background: #000;

}

#detail div.partners div {
    width: 1px;
    height: 30px;

    display: inline-block;

    margin-left: .5em;

    background: url("../image/home/intro/20th/logos.jpg") no-repeat;
    background-size: 930px 30px;
    background-position: 0 0;
}

#detail div.partners div.p01 { width: 73px;  background-position: 0 0; }
#detail div.partners div.p02 { width: 57px;  background-position: -73px 0; }
#detail div.partners div.p03 { width: 70px;  background-position: -129px 0; }
#detail div.partners div.p04 { width: 57px;  background-position: -200px 0; }
#detail div.partners div.p05 { width: 75px;  background-position: -260px 0; }
#detail div.partners div.p06 { width: 29px;  background-position: -336px 0; }
#detail div.partners div.p07 { width: 85px;  background-position: -366px 0; }
#detail div.partners div.p08 { width: 30px;  background-position: -454px 0; }
#detail div.partners div.p09 { width: 30px;  background-position: -488px 0; }
#detail div.partners div.p10 { width: 30px;  background-position: -520px 0; }
#detail div.partners div.p11 { width: 50px;  background-position: -552px 0; }
#detail div.partners div.p12 { width: 94px;  background-position: -604px 0; }
#detail div.partners div.p13 { width: 68px;  background-position: -706px 0; }
#detail div.partners div.p14 { width: 62px;  background-position: -777px 0; }
#detail div.partners div.p15 { width: 90px;  background-position: -840px 0; }

/*
    HEADER
*/
#detail div.header {
    padding: 2em 1em 1em;
}

#detail div.header h2 {
    font-size: 150%;
    font-weight: 400;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
}

/*
    DESCRIPTION
*/
#detail div.description {
    padding: 1em;
}

#detail div.description p {
    line-height: 1.4em;

    font-size: 85%;
    text-align: center;
}

/*
    DATES
*/
#detail div.dates {
    padding: 1em;

    background: #e8e8e8;
}

#detail div.dates p {
    text-align: center;
}

#detail div.dates h3 + p {
    margin-top: 1em;
}

/*
    LECTURERS
*/
#detail div.lecturers {
    padding: 1em;
}

#detail div.lecturers ul {
    margin-top: 1em;
}

#detail div.lecturers ul li {
    text-align: center;
    font-size: 85%;
}

#detail div.lecturers ul li + li {
    margin-top: .8em;
}

/*
    LOCATION
*/
#detail div.location {
    background: #e8e8e8;
}

#detail div.location div.wrap {
    padding: 1em;
}

#detail div.location p {
    max-width: 280px;

    margin: 1em auto 0;

    font-size: 85%;
}

#eventMap {
    height: 350px;

    background: #999;
}

/*
    PRICES
*/
#detail div.prices {
    padding: 1em;
}

#detail div.prices ul {
    width: 200px;

    margin: 1em auto 0;
}

#detail div.prices ul li {
    font-size: 85%;
}

#detail div.prices ul li + li {
    margin-top: .8em;
}

#detail div.prices ul li strong {
    margin-left: 2em;
}


/*
    REGISTRATION
*/
#detail div.registration {
    padding: 1em;
}

#detail div.registration div.notAvailable {
    max-width: 600px;

    margin: 2em auto 0;
    padding: 1em 2em;
    box-sizing: border-box;

    border: 1px solid #ccc;
    background: #ddd;
    text-align: center;
}

#detail div.registration div.registered {
    max-width: 600px;

    margin: 2em auto 0;
    padding: 1em 2em;
    box-sizing: border-box;
    display: none;

    border: 1px solid #2d974c;
    background: #acffaf;
    text-align: center;
}

#detail div.registration div.notAvailable p {
    text-align: center;
}

#detail div.registration form {
    margin: 1em 0 0;
    padding: 1em;
    display: none; /* hidden till initialization */

    background: #e8e8e8;
}

#detail div.registration form h4 {
    margin-bottom: .7em;
}

#detail div.registration form h4.gap {
    margin-top: 1em;
}

#detail div.registration div.company {
    display: none;
}

#detail div.registration form p {
    font-size: 85%;
}

#detail div.registration form p + p,
#detail div.registration form p + div,
#detail div.registration form div + p,
#detail div.registration form div + div { margin-top: .8em; }

#detail div.registration form label.t {
    display: block;

    text-transform: uppercase;
}

#detail div.registration form label.invalid {
    color: #f00;
}

#detail div.registration form input[type="text"] {
    width: 100%;

    padding: .3em .4em;
    box-sizing: border-box;

    border: 1px dotted #aaa;
}

#detail div.registration form input[type="text"].empty { background: #faffcb; }
#detail div.registration form input[type="text"].invalid { background: #ffbac2; }

#detail div.registration form p.info {
    font-size: 70%;
    color: #777;
    text-align: center;
    text-transform: uppercase;
}

#detail div.registration form div.client input.company { margin-left: 1em; }

#detail div.registration form div.participants input.firstName {
    width: 35% !important;

    box-sizing: border-box;
}

#detail div.registration form div.participants input.lastName {
    width: 54% !important;

    margin-left: 1%;
    box-sizing: border-box;
}

#detail div.registration form div.participants input[type='button'] {
    width: 9%;

    margin-left: 1%;
    padding: .3em .4em;
    box-sizing: border-box;

    font-size: 85%;
    border: 1px solid #aaa;
    background: #ccc;
}

#detail div.registration form div.participants input[type='button']:disabled {
    background: #ddd;
    border: 1px solid #ccc;
}

#detail div.registration form div.participants p.add a {
    color: #662d91;
    text-decoration: none;
}

#detail div.agreement p label a {
    color: #662d91;
    text-decoration: none;
}

#detail div.registration form div.buttons p {
    margin-top: 2em;

    text-align: center;
}

#detail div.registration form div.buttons p input {
    padding: .4em 1em;
    border: 1px solid #aaa;
    background: #ccc;
}

#detail div.registration form div.buttons p input:disabled {
    color: #aaa;
    background: #ddd;
    border: 1px solid #ccc;
}

/*
    SCHEDULE
*/
#detail div.schedule a img {
    width: 100%;
}


/*
    TERMS
 */
#detail div.terms {
    padding: 1em;

    display: none;
}

#detail div.terms p {
    max-width: 700px;
    line-height: 1.4em;

    margin: 1em auto;

    text-align: justify;
}

#detail div.terms ol {
    max-width: 700px;

    margin: 2em auto 0;
}

#detail div.terms ol li {
    line-height: 1.4em;

    margin-left: 1em;

    text-align: justify;
}

#detail div.terms ol li + li {
    margin-top: .6em;
}


@media only screen and (min-width: 25em) {
    #detail div.registration form {
        max-width: 390px;

        margin-right: auto;
        margin-left: auto;
    }

    #detail div.registration form label.t {
        width: 70px;

        display: inline-block;
    }

    #detail div.registration form input[type="text"] {
        width: 280px;
    }
}

@media only screen and (min-width: 48em) {
    #detail div.header h2 { font-size: 180%; }

    #detail div.description p { font-size: 95%; }

    #detail div.dates p { font-size: 95%; }

    #detail div.lecturers ul li { font-size: 95%; }

    #detail h3 { font-size: 140%; }
    #detail div.location p { font-size: 95%; }

    #detail div.prices ul { width: 230px; }
    #detail div.prices ul li { font-size: 95%; }

    #detail div.registration form p { font-size: 95%; }
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.1),
only screen and (min-device-pixel-ratio: 1.1) {
    #detail div.partners div { background-image: url("../image/home/intro/20th/logos@2x.jpg"); }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.1),
only screen and (min-device-pixel-ratio: 2.1) {
    #detail div.partners div { background-image: url("../image/home/intro/20th/logos@3x.jpg"); }
}