html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}
body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    height: 100%;
    width: 100%;
    background-color: #dbdfdf;
}

#container {
    width: 958px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    margin-bottom: 40px;
    background-color: #dbdfdf;
}

/* header */
#header {
    background-image: url(header-ablelink.png);
    width: 958px;
    height: 158px;
    background-repeat: no-repeat;
    position: relative;
}
#header h1 { display: none; }
#header input.searchbox { 
    color: #000000;
    background: #FFFFFF;
    border: 0px solid #FFFFFF;
    position: absolute;
    top: 90px;
    left: 776px;
    width: 140px;
    height: 18px;
} 
#header button.searchicon { 
    position: absolute;
    border: 0px;
    top: 87px;
    left: 922px;
    width: 25px;
    height: 26px;
    background: transparent;
    background-image: url(icon-search.png);
}
#header ul {
    list-style-type: none;
    display: inline;
    border: 0px;
    margin: 0px;
     padding: 0px;
    position: absolute;
    top: 81px;
    left: 195px;
}
#header li {
    display: inline;
    float: left;
    border: 0px;
    margin: 0px;
    padding: 0px;
} 
#header img {
    border: 0px;
    margin: 0px;
    padding: 0px;
} 
#header a {
    border: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
}
#header a.home { background-image: url(icon-home.png); width: 101px; height: 39px }
#header a.login { background-image: url(icon-login.png); width: 89px; height: 39px; }
#header a.logout { background-image: url(icon-logout.png); width: 102px; height: 39px; }
#header a.unreviewed { background-image: url(icon-unreviewed.png); width: 147px; height: 39px; }
#header a.users { background-image: url(icon-users.png); width: 84px; height: 39px; }
#header a.settings { background-image: url(icon-settings.png); width: 119px; height: 39px; }
#header a.tagsearch {
    background-image: url(icon-tagsearch-ablelink.png);
    position: absolute;
    left: 792px;
    top: 120px;
    width: 65px;
    height: 19px;
}
#header a.advancedsearch {
    background-image: url(icon-advancedsearch-ablelink.png);
    position: absolute;
    left: 859px;
    top: 120px;
    width: 93px;
    height: 19px;
}
#header button span, 
#header a span { display: none; }

/* body & contents */
#body {
    background-image: url(body-ablelink.png);
    width: 958px;
    background-repeat: repeat-y;
}
#contents {
    padding-top: 5px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 1px;
}


/* title */
#title {
    background-image: url(title-ablelink.png);
    background-repeat: no-repeat;
    width: 958px;
    height: 33px;
}
#title a, #title span, #title h3 {
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    position: relative;
    top: 7px;
    left: 30px;
    margin: 0;
    padding: 0;
}
#title a:link.current {
    color: #6C272A;
}
#title a:link {
    color: #000000;
    text-decoration: none;
}
#title a:visited {
    color: #000000;
    text-decoration: none;
}
#title a:active {
    color: #000000;
    text-decoration: none;
}
#title a:hover {
    color: #6C272A;
    text-decoration: none;
}
    
/* footer */
#footer {
    background-image: url(footer-ablelink.png);
    width: 958px;
    height: 25px;
    background-repeat: no-repeat;
}    

/* actions */
.actions {
    margin-top: 1ex;
    text-align: center;
    background-color: #EEEEEE;
    padding-top: 10px;
}
/* listings */
.listing {
    width: 800px;
    overflow: auto;
}
.listing .category {
}
.listing .task {
}
.listing .model {
    float: left;
    width: 200px;
    height: 200px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: block;
    position: relative;
}
.listing .model img {
    width: 150px;
    height: 150px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 8px;
    display: block;
    position: absolute;
}
.listing .model a.title {
    width: 200px;
    height: 175px;
    outline: none;
    display: block;
    position: relative;
    vertical-align: bottom;
    font-weight: bold;
    color: black;
    
}
.listing .model a.title span {
       display: block;
    text-align: center;
    width: 200px;
    bottom: 0px;
    position: absolute;
} 
.listing .model ul.tools {
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    width: 200px;
    font-size: 80%;
    height: 25px;
    position: absolute;
    text-align: center;
    list-style-type: none;
    list-style-position: inside;
    vertical-align: top;
    
}
.listing .model ul.tools li {
    display: inline;
    padding-right: 0.5em;
}
.listing .model ul.tools li a {
    color: grey;
}

/* aims player */
div.component div.player {
    margin-top: -30px;
}
div.player {
    /* margin-top: -30px;*/
    background-image: url(playerbg.png);
    background-repeat:no-repeat;
    width: 800px;
    height: 500px;
}
.player .step .title {
    font-size: 1em;
    position: absolute;
    margin-top: 404px;
    width: 400px;
    text-align: center;
    margin-left: 173px;
}

.player .left span {
    position: absolute;
    width: 400px;
    height: 305px;    
    margin-left: 173px;
    margin-top: 53px;
    background-color: black;
    overflow: hidden;
    }
.player .left img {
    height: 305px;    
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    

.player .left embed {
    position: absolute;
    width: 400px;
    height: 305px;    
    margin-left: 173px;
    margin-top: 55px;
    }

.player .step .view .left object {
    position: absolute;
    width: 400px;
    height: 305px;
    margin-left: 173px;
    margin-top: 55px;
    }

.player .right{
    position: absolute;
    width: 400px;
    height: 40px;
    position: absolute;
    color: #000000;
    font-size: 1em;
    text-align: center;
    margin-left: 173px;
    margin-top: 404px;
    visibility: hidden;
    }
    
    
.player .buttons {
    position: relative;
}

.player .buttons .next {
    border: none;
    background-image: url(next.png);
    background-repeat:no-repeat;
    width: 87px;
    height: 251px;
    display:inline-block;
    overflow:hidden;
    left: 606px;
    /* bottom aligns with bottom of tv, top: 129px;*/
    top: 70px;
}
.player .buttons .next span {
    visibility: hidden;
}
.player .buttons .done {
    border: none;
    background-image: url(done.png);
    background-repeat:no-repeat;
    width: 87px;
    height: 251px;
    display:inline-block;
    overflow:hidden;
    left: 606px;
    /* bottom aligns with bottom of tv, top: 129px;*/
    top: 70px;
}
.player .buttons .done span {
    visibility: hidden;
}
.player .buttons .back {
    background-image: url(back.png);
    background-repeat:no-repeat;
    width: 87px;
    height: 251px;
    border: none;
    /* bottom aligns with bottom of tv, top: 129px;*/
    top: 70px;
    left: 62px;
    display:inline-block;
    overflow:hidden;
}
.player .buttons .back span {
    visibility: hidden;
}
.player .buttons .replay {
    border: none;
    background-image: url(replay.png);
    background-repeat:no-repeat;
    width: 115px;
    height: 80px;
    display:inline-block;
    overflow:hidden;
    top: 381px;
    left: 68px;
}
.player .buttons .replay span {
    visibility: hidden;
}
.player .buttons .stop {
    border: none;
    background-image: url(stop.png);
    background-repeat:no-repeat;
    width: 115px;
    height: 80px;
    display:inline-block;
    overflow:hidden;
    top: 381px;
    left: 606px;
}
.player .buttons .replay span {
    visibility: hidden;
}
.player .buttons .restart {
    visibility: hidden;
}
.player .buttons .download {
    visibility: hidden;
}
.player .buttons a {
    background-color: none;
    margin-right: 1em;
    text-decoration: none;
    position:absolute;
}
.player .buttons a:active {
    border: 1px inset;
}

/*choices */
.player .choice h1 {
    visibility: hidden;
}
.player .choice .view {
    width: 420px;
    height: 400px;
    margin-left: 165px;
}

.player .choice .view .left {
    width: 210px;
    height: 305px;
    float: left;
    display: inline;
    position: relative;

}
.player .choice .view .left img {
    width: 200px;
    height: 152px;
}

.player .choice .view .right {
    width: 210px;
    height: 305px;
    float: left;
    margin-top: 0px;
    display: inline;
    position: relative;
}
.player .choice .view .right img {
    width: 200px;
    height: 152px;

}



/* magritte forms */
.magritte tr th {
    text-align: right;
    vertical-align: top;
    font-weight: normal;
}
.magritte tr.group th {
    text-align: left;
    padding-top: 1em;
    font-weight: bold;
    border-bottom: 1px solid #bbb;
}
.magritte td.required:after {
    color: red;
    content: "*";
    vertical-align: top;
}
.magritte .buttons {
    margin-top: 1em;
}
.errors {
    color: red;
}