body {
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
}


.button-center {
    text-align:center;
}

.text-center {
    text-align:center;
    padding: 15px 0;
}

a.button {
    background-color: #2db1ed;
    border: medium none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    max-width:300px;
    padding: 15px 0;
    display:inline-block;
}

a.button.wide {
    width: 100%;
}

.corners {
    border-radius: 5px 5px 5px 5px;
}

.customSelect {
    background-color: #FFFFFF;
    color: #000000;
    margin: 0 0 10px;
    padding: 6px 0 6px 10px;
    width: 100%;
    border: 1px solid #C4C4C4;
    background-image: url("images/dropdown.png");
    background-position: 100% 0;
    background-repeat: no-repeat;
}

.custom-input {
    border: 1px solid #C4C4C4;
    border-collapse: collapse;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
    margin: 0 0 10px;
    padding: 6px 0 6px 10px;
    width: 100%;
}

.action-buttons {
    margin: 15px 0;
}


@media only screen {
    .page-container {
        margin: 0 auto;
        max-width: 960px;
        width: 100%;
    }


    .add-button {
        text-align: center;
    }

    .content-holder {
        background-color:#e5e5e5;
        padding:8px;
    }

    .content {
        background-color:#fff;
        border:solid 1px #000;
        border-radius:5px;
        width:100%;
    }

    .content p {
        padding-left:5px;
    }

    .content p span.label {
        display:inline-block;
        font-weight:bold;
        width:150px;
    }

    .content p span.value {
        display:inline-block;
        font-weight:normal;
    }

    .action-holder {
        background-color:#838383;
        padding:8px;
    }

    .actions {
        background-color:#fff;
        border:solid 1px #000;
        border-radius:5px;
        width:100%;
    }

    .actions a.action-button {
        margin:5px;
        border-bottom:dotted #838383 1px;
        display:block;
        color:#2db1ed;
        font-weight:bold;
        cursor: pointer;
        padding: 15px 0;
        text-decoration:none;
    }

    .actions a.action-button:last-child {
        border-bottom:none;
    }

    .actions input:last-child {
        border-bottom:none;
    }

    #booking-list dl {
        margin:5px;
        border-bottom:dotted #838383 1px;
        color:#838383;
    }

        #booking-list dl:last-child {
            border-bottom:none;
        }

    #booking-list .booking dd {
        margin:0;
    }

        #booking-list .booking {
            width:100%;
        }

        #booking-list .booking .date {
            width:100%;
            font-size:1.5em;
        }

        #booking-list .booking .time {
            width:100%;
            font-size:1.2em;
        }

        #booking-list .booking .activity {
            width:100%;
            font-size:1em;
        }

        #booking-list .booking .status {
            width:100%;
            font-size:0.7em;
        }

        #booking-list .booking .cancel {
            width:100%;
            font-size:0.7em;
            padding-bottom:5px;
        }

        #cancelBooking-Holder .selector,
        #booking .selector {
            margin:5px;
            border-bottom:dotted #838383 1px;
            color:#838383;
            height:40px;
        }

        #cancelBooking-Holder .selector:last-child
        #booking .selector:last-child {
            border-bottom:none;
        }

        #booking .selector input {
            padding: 5px;
            float: left;
            margin: 5px 5px 5px 0;
        }

        #booking .selector img.ui-datepicker-trigger {
            float: left;
            margin-top: 2px;
        }

        #booking .selector select {
            padding:5px;
        }

        #sessions div.session-item {
            padding-left:5px;
            padding-top:5px;
            padding-bottom:5px;
            margin: 15px 0;
        }

        #sessions div.session-item div {
            margin:0;
        }

        #sessions div.session-item .session-name {
            width:100%;
            font-size:1.5em;
        }

        #sessions div.session-item .session-time {
            width:100%;
            font-size:1em;
        }

        #sessions div.session-item .book-now {
            width:100%;
            font-size:1em;
        }

        #sessions div.old {
            background-color:#ebe9e9;
            color:#c6c2c2;
        }

        #sessions div.not-available {
            background-color:#ffd1d1;
        }
        #sessions div.available {
            background-color:#d1ffd1;
        }

        #sessions div.book-now {
            padding:0;
        }

        #availability div.availability-Item {
            padding-left:5px;
            padding-top:5px;
            padding-bottom:5px;
            margin: 15px 0;
        }

        #availability div.availability-Item div.date {
            width:100%;
            font-size:1.5em;
        }

        #availability div.availability-Item div.availability {
            width:100%;
            font-size:1em;
        }

    #availability div.bookable {
        background-color:#d1ffd1;
    }

    #availability div.not-bookable {
        background-color:#ffd1d1;
    }
}

@media only screen and (min-width: 40.0625em) {
    .add-button {
        text-align: left;
    }

    #booking-list .booking {
        content: " ";
        display: table;
    }

    #booking-list .booking .date {
        width: 15%;
        font-size: 1em;
        display:table-cell;
    }

    #booking-list .booking .time {
        width: 15%;
        font-size: 1em;
        display:table-cell;
    }

    #booking-list .booking .activity {
        width: 30%;
        font-size: 1em;
        display:table-cell;
    }

    #booking-list .booking .status {
        width: 30%;
        font-size: 1em;
        display:table-cell;
    }

    #booking-list .booking .cancel {
        width: 10%;
        font-size: 1em;
        display:table-cell;
        padding-bottom:0;
    }

    #sessions .session-info {
        clear:both;
        float:none;
    }

    #sessions .session-info .session-detail {
        float:left;
        width:50%;
    }

    #sessions .session-info .booking {
        float:right;
        width:50%;
    }
    #sessions .session-info:before,
    #sessions .session-info:after {
        content: " ";
        display: table;
    }
    #sessions .session-info:after {
        clear:both;
    }
    
}