/* @group General */

/* @group Defaults */
body {
    font-size: 100%;
}
h1 {
    float: left;
    margin-right: 0.5em;
}
div.article {
    width: 78%;
    margin: 0 auto; padding: 0 1%;
    max-width: 70em;
}
div.primary {
    float: left; clear: none;
    width: 65%;
}
div.secondary {
    float: right; clear: none;
    width: 32%;
}
a.arrow,
form input[type="submit"] {
    width: auto;
    float: left;
}
div.column {
    width: 22%; float: left;
    margin-right: 3.6%;
}
div.column:last-child {
    margin-right: 0;
}
table {
    font-size: 0.875em;
}
/* @end Defaults */

/* @group Header */
div.section.header {
    margin-top: 40px; padding: 0;
    background: #CBCBCB; background: rgba(0,0,0,0.12);
    overflow: visible; height: 2.55em;
}
body.home div.section.header {
    margin-bottom: 30px;
}
div.section.header div.header-content {
    position: relative;
    width: 80%; margin: 0 auto;
    max-width: 71em;
}
a.logo {
    position: absolute;
    left: 0;
    ;
    width: 141px; height: 104px; margin: 0 0 -67px;
    background: url('/images/logos/ux-london-layout.png') 0 0 no-repeat;
}
a.logo img {
    display: none;
}
p.presented-by {
    display: block;
    float: left;
    margin: 5px 10px;
    text-transform: uppercase;
    font-size: 12px;
    position: relative;
    top: -25px;
}
ul.navigation {
    margin: 0 0 0 150px;
    font-size: 1.375em;
    background: none;
}
ul.navigation li {
    float: left;
    line-height: 1.1em;
    padding: 0.4em 0.8em;
}
ul.navigation li a {
    margin: -0.4em -0.8em; padding: 0.4em 0.8em;
}
ul.navigation li.home {
    display: block;
}
p.event {
    width: 80%; margin: 1em auto;
    max-width: 70em;
    position: static;
}
/* @end Header */
/* @group Elsewhere */
div.section.elsewhere {
    margin-bottom: 0;
    border-bottom: 1px dashed #C9C9C9;
}
div.section.elsewhere div.flickr li {
    float: left;
}
/* @end Elsewhere */

/* @group Footer */
div.section.footer {
    width: 78%; max-width: 70em;
    position: relative; z-index: 10;
    margin: -1.2em auto;
    overflow: visible;
}
div.section.footer ul {
    width: 100%;
    padding-left: 500px; margin-left: -500px;
}
div.section.footer ul li {
    float: left;
    margin-right: 3%;
}
/* @end Footer */

/* @group Clearleft */
div.section.clearleft {
    border-top: 1px dashed #C9C9C9;
    padding: 1em 0;
}
div.section.clearleft div.article {
    max-width: 86.5em;
}
div.section.clearleft h3 {
    margin-top: 2em;
}
div.section.clearleft h3,
div.section.clearleft p {
    margin-right: 200px;
}
div.section.clearleft img {
    margin-top: -100px;
}
/* @end Clearleft */

/* @end General */

/* @group Home Page */

/* @group Proposition */
div.prop h1 {
    float: left;
    width: 12em;
    font-size: 3.2em; line-height: 1em;
    margin-top: 2.5em;
}
div.prop-speaker {
    float: right;
}
div.prop-venue {
    float: left;
    width: 63.5%; height: 3.45em;
    font-size: 1.25em;
}
div.prop-venue a {
    width: auto;
    float: left;
    margin: 0 10px -20px;
}
div.prop-venue p {
    line-height: 1.25em;
    padding-top: 0.6666em;
}
div.prop-venue strong {
    font-size: 1.5em;
}
p.prop-register {
    display: block;
    width: 36%; margin: 0;
    float: right;
    text-transform: uppercase; color: #FFF; text-align: center;
}
p.prop-register span {
    display: block;
    height: 2em; padding-top: 1.12em;
    background-color: #ADC73F; font-size: 1.4em;
}
p.prop-register a {
    display: block;
    font-size: 1.75em;
    height: 2.05em; padding-top: 1.1em; padding-right: 20px;
    background: url('/images/general/register.png') 100% 50% no-repeat;
    font-size: 1.4em;
}
p.prop-register a:hover {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZUAAABsCAMAAACVb99sAAAABlBMVEX///////9VfPVsAAAAAnRSTlMAERwj7coAAAEhSURBVHja7d2BCcMwEATBU/9NuweBYDEzLSwhcSz97/DUbqjymipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkipJqiSpkqRKkio+K/he8RsMzyue7fE/2BFFFe9X8C7Se3uccXEeDGcnRVHFmXzcX3HXC/ci3SHGfXtRVDHHBTOPzAfDLD1zJzGjVRRVzP7GnHw7JbB/xa4i7PUSRRX7IrFb1R5i7Oy2356XpkrPVOmZKj1TpWeq9EyVnqnSM1V6pkrPVOmZKj1TpWeq/CXKBwtvn3kBE30UAAAAAElFTkSuQmCC'), url('/images/general/register.png') 100% 50% no-repeat;
}
p.prop-register a:link,
p.prop-register a:visited,
p.prop-register a:active,
p.prop-register a:hover,
p.prop-register a:focus {
    color: #FFF;
}
/* @end Proposition */

/* @group Proposition Transitions */

ul.rotate-list {
    bottom: -1em;
    left: 35%;
}
ul.rotate-list a {
    font-size: 50px;
}

/* @end Proposition Transitions */

/* @group Circle Heading */
h2.circle-heading {
    width: 2em; height: 1.5em;
    padding: 0.75em 0.5em;
    -webkit-border-radius: 1.5em; -moz-border-radius: 1.5em; border-radius: 1.5em;
}
h2.circle-heading em {
    font-size: 0.47727em;
}
h2.circle-heading em strong {
    font-size: 3.1429em;
}
div.speakers h2.circle-heading {
    float: left;
}
p.description {
    margin-left: 14em;
    margin-top: 0;
}
h2.circle-heading + p.description {
    margin-top: 6em;
}
/* @end Circle Heading */

/* @group Speaker List */
ul.speaker-list li {
    width: 16.6%;
    float: left;
}
ul.speaker-list li:nth-child(6n+1) {
    clear: left;
}
div.primary ul.speaker-list li {
    /* 4 across */
    width: 25%;
}
div.primary ul.speaker-list li:nth-child(4n+1) {
    clear: left;
}
div.primary ul.speaker-list li:nth-child(6n+1) {
    clear: none;
}
/* @end Speaker List */

/* @group Quotes */
blockquote.bubble {
    width: 46%; float: left;
}
blockquote cite {
    display: block;
}
blockquote cite img {
    float: left;
    margin-bottom: 2em;
}
/* @end Quotes */

/* @end Home Page */

/* @group Speaker Page */

div.detail {
    position: relative;
}
div.detail div.content-box {
    margin-right: 13.1em;
    min-height: 44em;
}
div.speaker.detail ul.speaker-list {
    float: right; width: 7.75em;
    position: absolute; top: 1em; right: 0;
    padding: 1em 0.5em;
}
div.speaker.detail ul.speaker-list li,
ul.schedule-list li {
    display: block; float: none;
    border-bottom: 1px dotted #ADD7DA;
}
div.speaker.detail ul.speaker-list li[rel="prev"],
div.speaker.detail ul.speaker-list li[rel="next"],
div.speaker.detail ul.speaker-list li.tba[rel="prev"],
div.speaker.detail ul.speaker-list li.tba[rel="next"] {
    display: block;
    max-width: none;
    float: none;
    text-align: left;
}
div.speaker.detail ul.speaker-list li[rel="prev"] a,
div.speaker.detail ul.speaker-list li[rel="next"] a {
    background: none;
    padding: 0.5em;
}
div.speaker.detail ul.speaker-list li:first-child {
    border-top: 1px dotted #ADD7DA;
}
ul.speaker-list li.current a {
    text-decoration: none;
}
ul.speaker-list li.current a:before,
ul.schedule-list li.current a:before {
    content: url('/images/general/active-speaker.png');
    position: absolute; left: -0.6em; z-index: 20;
    width: 15px; height: 26px;
}
ul.schedule-list li.current a:before {
    left: 0;
}
div.speaker.detail div.primary {
    width: 12em;
    overflow: visible;
}
div.speaker.detail div.secondary {
    margin-left: 13em; width: auto;
    float: none;
}
div.speaker.detail img {
    position: relative;
    margin-left: -43px;
    margin-top: 0.5em;
    max-width: none;
}
div.detail p.credit {
    position: absolute; left: 1.6em; bottom: 1.6em;
    margin: 0; padding: 0;
}
/* @end Speaker Page */

/* @group Programme Page */
ul.sessions {
    overflow: hidden;
}
ul.sessions em {
    position: absolute;
}
div.programme.detail div.content-box {
    min-height: 80em;
}
div.programme.detail img {
    float: left;
    margin-right: 1em;
    margin-bottom: 3em;
}

/* @group Day List */
ul.day-list {
    float: right;
    width: 8.75em;
    position: absolute;
    top: 1em;
    right: 0;
    font-size: 1.5em;
}
ul.day-list li.day {
    display: block;
    margin-bottom: 0.6666em;
}
ul.day-list li.day a.circle-day {
    display: block;
    font-size: 0.6em;
    padding: 1em;
}
ul.day-list li.day.current a.circle-day {
    position: relative; z-index: 10;
    background: #FFF;
    -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.1); -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.1); box-shadow: 1px 2px 1px rgba(0,0,0,0.1);
}
ul.day-list li.day a.circle-day span.circle {
    float: left;
    margin-right: 0.5em;
}
ul.day-list li.day a.circle-day span.type {
    display: block;
    font-size: 2.3em;
    text-transform: uppercase; line-height: 1em;
    color: #333;
}
ul.day-list li.day a.circle-day em {
    font-size: 13px;
    color: #666;
}
ul.day-list li.day ul.schedule-list {
    display: none;
    padding: 0;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}
ul.day-list li.day.current ul.schedule-list {
    display: block;
}
ul.schedule-list li:last-child {
    border-bottom: none;
}
/* @end Day List */

/* @group Conference Sessions */
div.session {
    float: none;
    margin-left: 8em;
    overflow: hidden;
    background-color: #EEE;
    padding: 0 0.5em;
    font-size: 0.8125em;
}
div.session div.primary {
    width: 62%;
}
div.session div.secondary {
    width: 36%;
}
/* @end Conference Sessions */

/* @group Workshop Sessions */
ul.sessions.workshop-sessions li {
    width: 23.5%; margin: 1em 0 0 2%; float: left;
}
ul.sessions.workshop-sessions li:first-child {
    margin-left: 0;
}
ul.sessions div.workshop {
    position: relative;
    border-left: none;
    border-top: 4px solid #CCC;
    border-bottom: 4px solid #CCC;
    background: none;
    padding: 0 0 2em;
    min-height: 15.5em;
}
@media all and (max-width: 1100px) {
    ul.sessions.workshop-sessions li {
        width: 100%;
        margin-left: 0;
        float: none;
    }
    ul.sessions div.workshop {
        min-height: 0;
    }
    
}
ul.sessions div.workshop h3 {
    font-size: 1.5em;
    margin: 0;
}
ul.sessions div.workshop h3 a {
    display: block;
    background-color: #F0F0F0;
    padding: 0.4em;
    margin-bottom: 0.25em;
}
ul.sessions div.workshop h3 a:hover,
ul.sessions div.workshop h3 a:focus {
    background-color: #E9E9E9;
}
ul.sessions div.workshop p {
    display: block;
    font-size: 0.8125em;
}
ul.sessions div.workshop img {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}
ul.sessions div.workshop p.bio {
    margin-top: 0;
}
ul.sessions div.workshop p.description {
    clear: left;
    font-size: 0.8125em;
}
ul.sessions div.workshop p.details {
    position: absolute;
    bottom: 0.4em;
}
/* @end Workshop Sessions */

/* @end Programme Page */

/* @group Sponsors Page */

div.sponsor-us div.primary {
    width: 16em;
}
div.sponsor-us div.secondary {
    float: none; margin-left: 17.5em;
    width: auto;
}
div.sponsor-us a.arrow {
    float: left;
}
ul.sponsors h2 {
    width: 11em;
    float: left;
}
ul.sponsors ul {
    margin-left: 24em;
}


/* @end Sponsors Page */

/* @group Venue Page */

ul.venue-images li {
    width: 31%; float: left;
}
div.content-box.map div.vcard {
    width: 30%;
    position: absolute;
    top: 2em; right: 2em;
}
#map {
    margin-right: 35%;
}

/* @end Venue Page */

/* @group Information Pages */

ul.info-nav {
    width: 20em;
    display: block;
    float: left;
    margin-right: 2em;
}
ul.info-nav li {
    font-size: 1.375em;
}
div.content-box.info {
    clear: none;
    width: auto;
}
/* @end Information Pages */

/* @group Media Queries */
@media all and (max-width: 86em) {
    div.prop h1 {
        width: 11.8em;
        font-size: 2.8em;
    }
}
@media all and (max-width: 76em) {
    div.prop h1 {
        width: 10em;
        font-size: 2.5em;
    }
    p.prop-register a {
        height: 2.8em; padding-top: 1.6em;
        font-size: 1em;
    }
    ul.navigation {
        font-size: 1.125em;
    }
    ul.navigation li {
        padding: 0.6em;
    }
    ul.navigation li a {
        margin: -0.6em; padding: 0.6em;
    }
}
@media all and (max-width: 62em) {
    a.logo {
        width: 71px; height: 60px;
        margin-top: 0;
        background: url('/images/logos/ux-london.png') 0 0 no-repeat;
    }
    ul.navigation {
        margin-left: 81px;
    }
    p.presented-by {
        display: none;
    }
    div.column {
        width: 47%; float: left;
        margin-right: 5%;
    }
    div.column:nth-child(2n) {
        margin-right: 0;
    }
    div.column:nth-child(2n+1) {
        clear: left;
    }
    div.prop h1 {
        font-size: 2em;
    }
    
    div.prop-speaker {
        width: 370px;
    }
    div.prop-venue {
        height: 4.3125em;
        font-size: 1em;
    }
    div.prop-venue p {
        line-height: 1.6em;
    }
    ul.speaker-list li {
        /* 4 across */
        width: 25%;
        float: left;    
    }
    ul.speaker-list li:nth-child(6n+1) {
        clear: none;
    }
    ul.speaker-list li:nth-child(4n+1) {
        clear: left;
    }
    div.primary ul.speaker-list li {
        /* 3 across */
        width: 33%;
    }
    div.primary ul.speaker-list li:nth-child(4n+1) {
        clear: none;
    }
    div.primary ul.speaker-list li:nth-child(3n+1) {
        clear: left;
    }
    div.speaker.detail div.primary {
        width: auto;
    }
    div.speaker.detail div.secondary {
        display: inline;
    }
    div.speaker.detail p.credit {
        position: static;
        margin: 0.5em 0;
    }
    div.speaker.detail h2 {
        margin-top: 0.5em;
    }
    div.speaker.detail p.description {
        clear: left;
    }
    div.speaker.detail img {
        margin-left: 0;
        margin-right: 1em;
    }
    ul.info-nav {
        float: none;
        width: 100%;
        margin-bottom: 1em;
    }
    table.ticket-table thead {
        display: none;
    }
    table.ticket-table,
    table.ticket-table tbody,
    table.ticket-table tr,
    table.ticket-table th,
    table.ticket-table td {
        display: block;
        height: auto;
    }
    table.ticket-table tr {
        border: 1px solid #DDD;
        margin-bottom: 1em;
    }
    table.ticket-table th,
    table.ticket-table td {
        overflow: hidden;
        border: none;
    }
    table.ticket-table th {
        border-bottom: 1px solid #BBB;
    }
    table.ticket-table tbody td:before {
        display: block;
        width: 8.5em;
        float: left;
    }
    table.ticket-table tbody td:nth-child(2):before {
        content: 'Price';
    }
    table.ticket-table tbody td:nth-child(3):before {
        content: 'Remaining';
    }
    table.ticket-table tbody td:nth-child(4):before {
        content: 'Dates available';
    }
    table.ticket-table tbody td:nth-child(5):before {
        content: 'Quantity';
    }
    table.ticket-table tbody td.na {
        display: none;
    }
}
/* @end Media Quieries */