html, body {
    font-family: Arial;
    background: #FFFFFF;
    min-height: 100%;
}

#bd {
    background: rgb(240, 247, 248);
    border-right: 1px solid #113958;
    border-left: 1px solid #113958;
    min-height: 400px;
}

#hd {
    background: #FFFFFF;
    border-bottom: 1px solid #113958;
}

#ft {
    background: #FFFFFF;
    border-top: 1px solid #113958;
    text-align: center;
}

#logo a {
    font-family: sans-serif;
    text-decoration: none;
    color: #702200;
    font-weight: bold;
}

h1 {
    text-decoration: none;
    color: #702200;
    font-size: 197%;
    margin: 5px 5px 5px 0px;
}

h2 {
    text-decoration: none;
    color: #702200;
    font-size: 138.5%;
    margin: 3px 3px 3px 0px;
}

h2 a {
    text-decoration: none;
    color: #702200;
}

h3 {
    text-decoration: none;
    color: #702200;
    font-size: 116%;
    margin: 1px 1px 1px 0px;
}

.h4 {
    font-weight: bold;
    color: #702200;
}

p {
    margin-bottom: 10px;
    color: #113;
}

p.abstract {
    font-size: 123.1%;
    letter-spacing: +1px;
    word-spacing: +2px;
    line-height: 120%;
}

ol,ul,dl {
    margin-left: 2em;
    color: #113;
}

ol li {
    list-style: decimal outside;
    color: #113;
}

ul li {
    list-style: disc outside;
    color: #113;
}

#abstract {
    float: left;
    margin-left: 10px;
    width: 40%;
}

#intro_player {
    float: left;
}

#audience {
    margin-top: 20px;
    width: 100%;
    float: left;
}

#a_teacher {
    float: left;
    width: 32%;
}

#a_pdp {
    float: left;
    border-left: 1px solid #113958;
    border-right: 1px solid #113958;
    padding-left: 5px;
    width: 32%;
}

#a_researcher {
    float: left;
    width: 32%;
    padding-left: 5px;
}

#menu-container, #menu-container-task {
    border-left: 1px solid #113958;
}

/* Menu container should have an auto width with maximum of half of available width and a minimum of one fourth of
   available width. */
#menu-container-task{
    width: auto;
    max-width: 50%;
    min-width: 25%;
}

/* The description should take 100% width wherever available. */
#yui-b-task{
    width: auto;
}

#menu {
    padding: 20px;
}

#doc4 {
    width: 95%;
}

#doc3 {
    margin:auto;
}

#bd, #ft {
    padding: 10px;
}

form {
    margin-top: 20px;
}

form table td {
    padding-bottom: 3px;
}

#maintabs ul {
    margin: 0px;
    padding: 0px;
}
#maintabs {
    margin: 0;
    padding: 0px 0px 0px 15px;
    position: relative;
}
#maintabs li {
    font-size: 131%;
    list-style: none;
    margin: 0;
    display: inline;
}
#maintabs li a {
    padding: 0px 10px;
    margin-left: 3px;
    margin-right: 3px;
    border-top: 1px solid #113958;
    border-right: 1px solid #113958;
    border-left: 1px solid #113958;
    text-decoration: none;
    background: rgb(220, 227, 228);
    border-bottom: 1px solid rgb(220, 227, 228);
}
#maintabs li a:link { color: #000; }
#maintabs li a:visited { color: #000; }
#maintabs li a:hover {
    background: rgb(240, 247, 248);
    border-bottom: 3px solid rgb(240, 247, 248);
}
#maintabs li.current a
{
    background: rgb(240, 247, 248);
    border-bottom: 3px solid rgb(240, 247, 248);
}

#play {
    border: 0px solid black;
    padding: 5px;
    margin: 5px;
    width: 800px;
    zoom: 1;
}

#play:after { 
    display: block; 
    clear: both; 
    visibility: hidden; 
    content: '.'; 
    height: 0;
}

#play ul {
    border: 1px solid black;
    margin: 10px;
    width: 376px;
    height: 300px;
    float: left;
    padding: 0;
    zoom: 1;
    position: relative;
    overflow: auto;
}

.play_header {
    border: 0px solid black;
    margin-left: 10px;
    margin-right: 10px;
    margin-top : 0px;
    margin-bottom: 0px;
    width: 376px;
    height: 17px;
    float: left;
    padding: 0;
    text-align: center;
    zoom: 1;
    position: relative;
    overflow: auto;
    color: #702200;
    font-size: 116%;
}

#play ul li {
    background-image: none;
    list-style-type: none;
    padding: 5px;
    margin: 2px;
    cursor: move;
    zoom: 1;
    position: relative;
}

#play ul li.list1 {
    background-color: #8DD5E7;
    border: 1px solid #004C6D;
}

#play ul li.list2 {
    background-color: #EDFF9F;
    border: 1px solid #CDCDCD;
}

#playDisabled {
    border: 0px solid black;
    padding: 5px;
    margin: 5px;
    width: 800px;
    zoom: 1;
}

#playDisabled:after { 
    display: block; 
    clear: both; 
    visibility: hidden; 
    content: '.'; 
    height: 0;
}

#playDisabled ul {
    border: 1px solid black;
    margin: 10px;
    width: 376px;
    height: 300px;
    float: left;
    padding: 0;
    zoom: 1;
    position: relative;
    overflow: auto;
}

#playDisabled ul li {
    background-image: none;
    list-style-type: none;
    padding: 5px;
    margin: 2px;
    cursor: move;
    zoom: 1;
    position: relative;
}

#playDisabled ul li.list1 {
    background-color: #AAAAAA;
    border: 1px solid #004C6D;
}

#playDisabled ul li.list2 {
    background-color: #AAAAAA;
    border: 1px solid #CDCDCD;
}

/* seb form style */
.label label {
    font-weight: bold;
}

label {
    font-weight: bold;
}

span.error-message {
    color: red;
    font-weight: bold;
}

div.hidden {
    visibility: hidden;
}

.user_name {
    color: blue;
    font-style: italic;
}




/* Flash message. */
#flash {
    background: #ffc;
    padding: 5px;
    border: 1px dotted #000;
    margin-bottom: 20px;
}
#flash p { margin: 0px; padding: 0px; }


/* Start page */
#status_chart {
    float: right;
    background: #ffc;
    border: 1px solid #113958;
}

#messages {
    float: clear;
    background: #ffc;
    border: 1px solid #113958;
    padding: 5px;
    padding-top: 10px;
    margin-top: 20px;
}

.message {
    border-top: 1px dotted #113958;
    margin-top: 10px;
    padding-top: 10px;
}

.status_icon {
    margin-right: 10px;
}

/* Response page */

div#clip_navigation {
    float: right;
    font-size: 85%;
    font-style: italic;
}

div#video_description {
    width: 90%;
    margin: 10px;
}

div#video_player {
    margin: 10px;
    float: left;
}

div#video_response {
    margin: 10px;
    width: 400px;
    float: right;
}

.response_textarea {
    width: 100%;
    height: 140px;
}

ol#video_selection {
    margin-left: 0px;
}
ol#video_selection li {
    list-style: none;
}

#video_description label {
    text-decoration: underline;
}

#video_response label {
    text-decoration: underline;
}

#choices label {
    font-weight: normal;
    text-decoration: none;
}


#video_response table .required {
    display: none;
}

#video_response .description td {
    padding-bottom: 15px;
}

#head-nav {
    float: right;
}

.pipe ul {
    margin-left: 0px;
    padding-left: 0px;
    display: inline;
}

.pipe ul li {
    margin-left: 0px;
    padding: 3px 15px;
    border-left: 1px solid #113958;
    list-style: none;
    display: inline;
}

.pipe ul li.first {
    margin-left: 0px;
    padding-left: 0px;
    border-left: none;
    list-style: none;
    display: inline;
}

.pipe ul li a {
    text-decoration: none;
    color: #113958;
}
.pipe ul li a:link {
}
.pipe ul li a:visited {
}
.pipe ul li a:hover {
    text-decoration: underline;
}
.pipe ul li a:current {
}

.imgbutton:active {
    background-color: rgb(237, 244, 245);
    transform: translateY(1px);
}

pre {
    background-color: white;
    padding: 15px 15px;
}

/* Calendar stuff -- move to separate css file... */


    /* Clear calendar's float, using dialog inbuilt form element */
    #container .bd form {
        clear:left;
    }

    /* Have calendar squeeze upto bd bounding box */
    #container .bd {
        padding:0;
    }

    #container .hd {
        text-align:left;
    }

    /* Center buttons in the footer */
    #container .ft .button-group {
        text-align:center;
    }

    /* Prevent border-collapse:collapse from bleeding through in IE6, IE7 */
    #container_c.yui-overlay-hidden table {
        *display:none;
    }

    /* Remove calendar's border and set padding in ems instead of px, so we can specify an width in ems for the container */
    #cal {
        border:none;
        padding:1em;
    }

    /* Datefield look/feel */
    .datefield {
        position:relative;
        white-space:nowrap;
        width:15em;
        padding:5px;
    }

    .datefield input,
    .datefield button,
    .datefield label  {
        vertical-align:middle;
    }

    .datefield label  {
        font-weight:bold;
    }

    .datefield input  {
        width:6em;
    }

    .datefield button  {
        padding:0 5px 0 5px;
        margin-left:2px;
    }

    .datefield button img {
        padding:0;
        margin:0;
        vertical-align:middle;
    }

    #RubricsHelpNavigationTop
    {
        float:right;
    }

    #RubricsHelpNavigationBot
    {
        float:right;
    }

    .tdWithMargin
    {
        margin:0;
        padding:5px;
    }

    table.BorderedTable {
        border-width: 1px;
        border-spacing: 4px;
        border-style: outset;
        border-color: black;
        border-collapse: separate;
        background-color: inherit;
        width: 100%;
    }

    td.SpaciousTableCell {
        margin: 2px;
        padding: 2px;
    }

    table.BorderedTable td.label {
        width: 10%;
    }

    table.two_column_select td {
        vertical-align: top;
        margin-top: 0;
        text-align: center;
        padding: 2px 20px 2px 0px;
    }

    .select_box_options_heading {
        font-size: 16px;
        color: #702200;
    }

    .response_box_header_right_justified_text {
        float: right;
        text-align: right;
    }