What are the CSS classes used in the HTML pages?

There are several CSS classes used to style the workout HTML pages. The base class definitions are below, you may over-ride any of them to create the look you want. This technique works best when embedding an HTML page within another page. That is, you need to have a place to put your CSS class over-rides, SugarWOD doesn't host them for you.

Some tips:

• If your changes aren't visible, try adding !important 
• To hide an element, use display:none. For example, to hide the "track" name:

.sugarwod_track {
   display:none;
}

The classes used are:

• sugarwod_container - div that wraps everything else
• sugarwod_day_container - div that wraps each day
• sugarwod_track_container - div that wraps each track (within a day)
• sugarwod_workout_container - div that wraps each workout (within a track)
• sugarwod_date - the date of the workout
• sugarwod_track - the track name (e.g. "Workout of the Day")
• sugarwod_title - the title of the workout
• sugarwod_description - the workout description
• sugarwod_score_type - the scoring type (e.g. "REPS")

The base class definitions:

<style>

    .sugarwod_container {
        margin: 0;
        padding: 0;

        font-family: sans-serif;
        font-size: 18px;
    }

    .sugarwod_day_container {
        margin: 1em 0 1em 0;
        padding: 0;
    }

    .sugarwod_track_container {
        margin: 0;
        padding: 0;
    }

    .sugarwod_workout_container {
        margin: 0 0 0.5em 0;
        padding: 0.25em;
        background-color: #F5F5F5;
        border-radius: 3px;
    }

    .sugarwod_date {
        margin: 1em 0;
        color: #424242;
        font-family: monospace;
        text-transform: uppercase;
    }

    .sugarwod_track {
        color: #757575;
        font-size: 14px;
        text-transform: uppercase;
    }

    .sugarwod_title {
        color: #2196F3;
        font-size: 18px;
    }

    .sugarwod_result_type {
        margin-left: 0.25em;
        color: #757575;
        font-size: 14px;
        text-transform: uppercase;
    }

    .sugarwod_description {
        color: #757575;
        font-size: 14px;
        font-family: monospace;
    }

</style>