@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0pt none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0pt;
    outline: 0pt none;
    padding: 0pt;
    vertical-align: baseline;
}

:focus {
    outline: 0 none;
}

body {
    color: #000000;
    line-height: 1.2em;
}

#uniLogo {
    left: 30px;
    position: absolute;
    top: 20px;
}

ul {
    list-style: none outside none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    font-weight: normal;
    text-align: left;
}

tr.greyRow {
    background-color: #E8E8E8;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/*.alignC {
    text-align: center;
}
*/

body {
    background-color: #fff;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
}

#container {
    background-repeat: repeat-y;
    margin: 0px auto;
    padding: 0;
    /*position: relative;*/
    text-align: left;
    width: 1004px;
}

#topLinks {
    margin: auto;
    padding-top: 40px;
}

#topLinks a {
    clear: right;
    padding-right: 10px;
}

#topHelp {
    border-right: 3px solid darkorchid;
    border-bottom: none;
}

#topTube {
    border-right: 3px solid orange;
    border-bottom: none;
}

#topBrowse {
    border-right: 3px solid hotpink;
    border-bottom: none;
}

#topHome {
    border-right: 3px solid limegreen;
    border-bottom: none;
}

@media (min-width: 1200px) {
    #container {
        width: 1200px;
    }

    #topLinks {
        padding-top: 60px
    }

    #topLinks a {
        clear: none;
        padding-bottom: 10px;
        padding-right: 0;
    }

    #topHelp {
        border-right: none;
        border-bottom: 3px solid darkorchid;
    }

    #topTube {
        border-right: none;
        border-bottom: 3px solid orange;
    }

    #topBrowse {
        border-right: none;
        border-bottom: 3px solid hotpink;
    }

    #topHome {
        border-right: none;
        border-bottom: 3px solid limegreen;
    }
}

* html #container {
    height: 100%;
}

.clear {
    clear: both;
}

#header {
    /*  background-image: url("../images/UniTube_01.png");
  background-repeat: no-repeat;
  height: 183px;
  width: 960px; */
}

#headerWrapper {

}

#headerWrapper a {
    position: absolute;
    text-transform: uppercase;
    color: #031f69;
}

#headerWrapper a:hover {
    color: #031f69;
}

/* CSS for skip navigation link - positioned top left */
#skipNavigation {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
}

/*.uniLogo {
    background-image: url("../images/university_web_logo.gif");
    height: 128px;
    left: 16px;
    position: absolute;
    top: 14px;
    width: 87px;
}
*/

/*.tubeLogo {
    background-image: url("../images/unitube_logo.png");
    height: 44px;
    left: 113px;
    position: absolute;
    top: 27px;
    width: 154px;
}

*/

.home {
    height: 36px;
    left: 271px;
    position: absolute;
    top: 59px;
    width: 64px;
}

.unitubasLink {
    height: 36px;
    left: 371px;
    position: absolute;
    top: 123px;
    width: 83px;
}

.uploadLink {
    height: 36px;
    left: 530px;
    position: absolute;
    top: 91px;
    width: 59px;
}

.albumsLink {
    height: 35px;
    left: 601px;
    position: absolute;
    top: 124px;
    width: 62px;
}

.topNavLinks {
    color: #031f69;
    font-size: 10px;
    height: 50px;
    position: absolute;
    right: 20px;
    text-align: right;
    top: 50px;
}

.topNavLinks a {
    font-size: 10px;
    color: #031f69;
}

.topNavLinks a:hover {
    color: #031f69;
}

.headerText {
    display: inline;
    float: right;
    margin-right: 280px;
    margin-top: 20px;
}

/*.loging {
    left: 784px;
    position: absolute;
    top: 63px;
    width: 83px;
}

*/

.registration {
    color: white;
    font-size: 12px;
    position: absolute;
    right: 20px;
    text-align: right;
    top: 20px;
    width: 230px;
}

.registration a {
    color: #031f69;
    font-size: 14px;
}

.mytube {
    height: 60px;
    left: 700px;
    line-height: 20px;
    position: relative;
    text-align: right;
    top: 50px;
    width: 230px;
}

.mytube a {
    font-size: 10px;
    margin-left: 10px;
}

.topLine {
    line-height: 20px;
    overflow: hidden;
    padding: 0;
    /*	padding-bottom: 10px;*/
}

div.topLine {

}

.sideBar {
    float: left;
    margin-left: 30px;
    margin-top: 30px;
    width: 50px;
}

.mainStage {

}

.ui-widget-header {
    border: none;
    background: none;
}

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

.mediaArea {
    width: 100%;
}

.mediaDisplay {
    float: left;
    margin-top: 40px;
    width: 630px;
}

.mediaDisplay2 {
    float: left;
    /*margin-top: 40px;*/
}

.mediaArea2 {
    clear: both;
    left: 22px;
    position: relative;
    width: 680px;
}

.mediaFiles {
    display: inline;
    float: left;
    height: 205px;
    margin: 0px 18px 0px 0px;
    width: 150px;
}

.mediaPicture {
    display: inline;
    float: left;
    height: 83px;
    margin: 0px 14px;
    text-align: center;
    width: 118px;
}

.mediaPicture img {
    border: 1px solid #006699;
    padding: 1px;
}

.infoBox {
    padding-left: 20px;
    float: right;
    overflow: hidden;
    width: 300px;
}

.search {
    margin: auto;
    height: 25px;
    margin-top: -6px;
    padding-bottom: 10px;
    width: 400px;
    /*margin-right:50px*/
    /*padding-right: 35px;*/
}

.searchText {
    width: 250px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #aaa;
    margin-right: 15px;
    font-size: 16px;
}

.searchOptions {
    float: left;
    font-size: 10px;
    height: 20px;
    margin-bottom: 15px;
    margin-right: 10px;
    text-align: right;
}

.upload {
    float: left;
    font-size: 15px;
    height: 23px;
    width: 40px;
}

.private {
    float: left;
    margin-left: 25px;
    margin-top: 5px;
}

.jumpMenu2 {
    margin: 10px auto;
}

.infoBox h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.info {
    clear: both;
}

.info p {
    padding-bottom: 10px;
}

div.clearMe {
    clear: both;
}

.footer {
    color: #777777;
    font-size: 10px;
    line-height: 10px;
    margin-bottom: 40px;
    padding-top: 20px;
    text-align: center;
    clear: left;
}

.lastPage {
    float: left;
    height: 20px;
    line-height: 20px;
    padding-left: 180px;
    width: 30px;
}

.nextPage {
    float: left;
    height: 20px;
}

div.pageNumber {
    clear: both;
    font-size: 14px;
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
}

div.pageNumber ul li {
    display: inline;
}

div.pageNumber ul li.current {
    font-weight: bold;
    text-decoration: underline;
}

.uniTubas {
    float: left;
    margin-top: 40px;
}

a {
    color: #031f69;
    font-size: small;
    text-decoration: none;
}

a:hover {
    color: #031f69;
}

.watching {
    line-height: 35px;
    overflow: hidden;
    padding-top: 25px;
}

.stage {
    padding-left: 0px;
    top: 30px;
    /*width: 850px;*/
}

.mediaBorder {
    border: 5px solid #006699;
    float: left;
    margin-bottom: 40px;
    margin-top: 20px;
    padding: 10px;
}

div.sociable {
    margin: 10px 0;
    display: inline-table;
    vertical-align: middle;
}

div.sociable ul {
    display: inline;
}

div.sociable li {
    display: inline;
    list-style-type: none;
}

div.sociable span,
div.socialble img {
    border: none;
    margin: 0 10px 0 0;
}

div.sociable .sociable-hovers:hover {
    opacity: 0.4;
}

div.sociable .sociable-hovers {
    opacity: 1;
}

table {
    margin-bottom: 20px;
}

.rss {
    height: 33px;
    width: 28px;
}

.mediaForAlbums {
    line-height: 35px;
    margin-left: 15px;
    overflow: hidden;
    width: 380px;
}

.jumpMenu3 {
    overflow: hidden;
    width: 150px;
}

.actionBtn {
    float: right;
    margin-right: 120px;
}

.mediaImg {
    width: 60px;
}

.checkAlbum {
    float: left;
    line-height: 60px;
}

.mymediaT {
    text-align: center;
}

th {
    font-weight: bold;
    padding-bottom: 5px;
    vertical-align: middle;
}

.blackBoard {
    clear: both;
    float: left;
    height: 28px;
    margin: 10px 30px 60px 0pt;
    width: 152px;
}

.tubeLog {
    background-image: url("../images/unitube_logo.png");
    clear: both;
    float: left;
    height: 44px;
    margin-left: -10px;
    width: 152px;
}

.inputT, .select {
    margin-bottom: 5px;
    width: 200px;
}

.editMediaT th {
    background-color: #99CCFF;
    color: #000000;
}

.thumbnail {
    width: 300px;
}

.albumMedia {
    min-height: 200px;
    overflow: auto;
    width: 150px;
}

.size {
    height: 30px;
    width: 490px;
}

td {
    vertical-align: top;
    text-align: left;
}

.hidden {
    display: none;
}

.user, .user_with_right_border {
    background-color: #F7F7EF;
    color: #031f69;
    padding: 1px 4px;
    text-decoration: none;
}

.user_with_right_border {
    border-right: 1px solid #03257D;
}

.user:hover, .user_with_right_border:hover {
    background-color: #03257D;
    color: #FFFFFF;
}

h1 {
    font-size: 26px;
    margin-top: 5px;
    color: #031f69;
    padding-bottom: 10px;
    line-height: 1.25;
}

h1 a img {
    vertical-align: middle;
}

h2 {
    font-size: 14px;
    font-weight: bold;
    padding: 1em 0pt;
}

p {
    color: #444444;
    padding: 0.5em 0pt;
}

.bold {
    font-weight: bold;
}

.mediaArea ol {
    list-style-position: inside;
    padding: 20px 0;
}

.mediaArea li {
    margin: 0.5em 0pt 1em 1em;
}

.mediaArea ul {
    list-style: square inside none;
}

.mediaArea ul ul {
    list-style: disc inside none;
}

.infoBox ul {
    list-style: square inside none;
}

.infoBox li {
    padding-left: 1em;
}

p.title {
    padding-bottom: 0.5em;
}

span.title {
    color: #444444;
    font-weight: bold;
}

strong {
    font-weight: bold;
}

div#status {
    width: 480px;
}

.navDiv {
    margin-bottom: 20px;
}

input.text {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #aaa;
    font-size: 16px;
}

.mediaBox {
    float: left;
    margin-bottom: 20px;
    width: 202px;
}

/* .mediaLine {
    border-bottom: 1px solid #CCCCCC;
    float: left;
    height: 40px;
    width: 15px;
}
*/

.mediacontent {
    overflow: hidden;
    background: #fff url(../images/boxesBg.png) repeat-x;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    float: left;
    height: 80px;
    width: 185px;
}

.mediaImage {
    background: none repeat scroll 0% 0% #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    height: 50px;
    margin: 10px auto auto 10px;
    padding: 5px;
    width: 60px;
}

.mediadetails {
    float: left;
    font-size: 11px;
    height: 50px;
    overflow: hidden;
    padding: 10px;
    width: 78px;
}

.mediaTitle {
    background: none repeat scroll 0% 0% #FFFFFF;
    /* border-bottom: 1px solid #CCCCCC; */
    color: #031f69;
    font-weight: bold;
    height: 40px;
    text-align: center;
    width: 202px;
}

.titleText {
    background: none repeat scroll 0% 0% #FFFFFF;
    /* border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC; */
    height: 20px;
    left: 30px;
    margin: 0pt;
    padding: 5px;
    position: relative;
    top: 25px;
    width: 140px;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-transform: uppercase;
}

#comments {
    clear: both;
    margin-right: 30px;
    padding-top: 60px;
}

#comments ul {
    background: none repeat scroll 0% 0% #EBF0F2;
    margin-top: 20px;
    padding-top: 0.1px;
}

#comments li {
    background: none repeat scroll 0% 0% #FFFFFF;
    border-top: 1px solid #CCCCCC;
    margin-top: 3px;
    padding: 10px 0pt 10px 10px;
}

#comments ul ul {
    margin-top: 10px;
    padding-top: 0px;
}

#comments ul ul li {
    border-top: 1px dashed #CCCCCC;
    margin-top: 0px;
    padding-left: 30px;
}

#comments li div {
    color: #CCCCCC;
    font-size: 9px;
}

#comments li div a {
    font-size: 9px;
}

#comments li div div {
    color: #333333;
    font-size: small;
    padding-top: 10px;
    width: 500px;
}

.commentLink {
    border-left: 2px solid #FF9933;
    float: right;
    padding-left: 5px;
}

.imageAlign {
    vertical-align: middle;
}

#comments li .commentForm, .commentForm {
    color: #FF9933;
    font-size: small;
    font-weight: bold;
    margin-top: 10px;
}

#editMedia td {
    padding: 10px 10px 10px 10px;
}

/** presentation slides */

div.slides_container {
    margin: 0 auto;
}

ul.pagination {
    background-color: white;
    text-align: center;
}

ul.pagination li {
    display: inline;
    margin: 2px;
}

ul.pagination li.current {
    font-weight: bold;
    text-decoration: underline;
}

div#user-lookup-form {
    text-align: left;
}

div#user-lookup-form div {
    margin: 1em;
}

/** start of presenter **/
div#slideList {
    background: none repeat scroll 0pt 0pt #333;
    border: 1px solid #555555;
    height: 260px;
    width: 455px;
    overflow: auto;
    padding: 10px;
}

div#slideList ul li a {
    padding: 1px 5px;
}

div#slideList ul li a.current {
    color: #fff;
}

div#slideList ul li {
    margin: 2px 0;
}

div#avpContainer {
    background: none repeat scroll #222222;
    border: 15px solid #222;
}

div#avpContainer h2 {
    color: #CCCCCC;
    font-size: 12px;
    padding: 5px 0;
}

div#avpContainer a {
    color: #031f69;
}

div#avpContainer a:hover {
    color: #fff;
}

div#leftColumn {
    color: #000000;
    float: left;
}

div#rightColumn {
    color: #000000;
    float: right;
}

div.slide {
    display: none;
}

span#current-time1, span#current-time2, span#current-slide {
    color: #CCCCCC;
    font-size: 10px;
}

#avpContainer div.info {
    margin-top: 5px;
    margin-bottom: 10px;
}

/** end of presenter **/

#userName {
    width: 200px;
}

/** share dialog */
#share-dialog {
    text-align: left;
}

#share-dialog ul {
    margin-bottom: 20px;
}

#share-dialog ul li {
    list-style: none;
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

#share-dialog ul li span.splitter {
    color: white;
}

/** jQuery validation error */
label.error {
    margin: 0 10px;
    color: red;
}

/** avp sync tool */

#actionButton {
    display: none;
}

#slidesSelector {
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

#slidesSelector ul {
    list-style: none;
}

#slidesSelector ul  li {
    float: left;
    display: inline;
    margin: 0 5px;
    border: 1px solid #fff;
    opacity: 0.75;
}

#slidesSelector ul  li:hover {
    border: 1px solid #0c0;
    opacity: 1.0;
}

#slidesSelector ul  li div.caption {
    margin-top: 10px;
}

.left {
    float: left;
}

.right {
    float: right;
}

#avContainer.mediaBorder {
    margin-top: 0;
    margin-bottom: 0;
}

/** time slider */
#slider-container {
    margin-top: 30px;
    margin-bottom: 20px;
}

/** start time and end time for presenter sync */
.startTime {
    position: relative;
    left: 0;
    top: -16px;
}

.endTime {
    position: relative;
    left: -18px;
    top: 25px;
}

/** inline edit box */
div.input input {
    border: none;
    background-color: #0d0;
}

.scroll-pane {
    overflow: auto;
    width: 100%;
    float: left;
}

.scroll-content {
    float: left;
}

.scroll-content-item {
    width: 200px;
    height: 210px;
    float: left;
    margin: 5px;
    border: 1px solid #fff;
    opacity: 0.75;
}

.scroll-content-item:hover {
    border: 1px solid #0c0;
    opacity: 1;
}

.currentSlide {
    color: #031f69;
    font-weight: bold;
    background-color: #f7b850;
    opacity: 1;
}

* html .scroll-content-item {
    display: inline;
}

div#helpInfo {
    width: 100%;
    text-align: center;
    font-weight: bold;
}

/** left side in view page */
div#left {
    width: 375px;
    float: left;
    margin-right: 10px;
}

div#right {
    float: left;
}

div.description {
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

div.moreOrFewer {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px #bbb dotted;
    text-align: center;
}

div.moreOrFewer a {
    padding: 3px;
}

div.moreOrFewer a:hover {
    border: 1px #bbb solid;
    background-color: #eee;
}

/** styles on stats page */

div.myOptions {
    margin-bottom: 16px;
}

/** disable link for current page */
div.myOptions a.currentPage {
    pointer-events: none;
    cursor: default;
    font-weight: bold;
}

tr.albumMediaList {
    background: #fff;
}

tr.placeHolder {
    background: #eee;
}

th.checkbox {
    width: 35px;
    vertical-align: baseline;
}

td p {
    padding: 0;
}

/** playlist styles */

div.media {
    text-align: center;
    vertical-align: middle;
}

/* put image in centre */
div.media img {
    margin: auto;
}

/* put video in centre */
div.media div {
    margin: auto;
}

div.playlistPlayer {
    float: left;
    background-color: black;
}

div.playlistNav {
    float: left;
}

div.playlistNav li {
    background-color: #eeeeee;
    margin: 2px;
    height: 50px;
}

div.playlistPlayer li.player {
}

span.thumbnail {
    width: 80px;
    height: 50px;
    overflow: hidden;
    float: left;
    background-color: white;
}

span.mediaDetail {
    display: inline-block;
    padding: 10px;
}

/** style for tabs on home page and search result page */
.ui-widget-content table a {
    color: #031f69;
}

.ui-widget-content table a:hover {
    color: #031f69;
}

#tabs.ui-widget-content {
    border: none;
}

.ui-tabs .ui-tabs-panel {
    padding: 1em 0 1em 1.4em;
}

span.timePast {
    font-size: small;
    float: right;
    color: #666;
    position: absolute;
    bottom: 5px;
    right: 0;
}

/* for display only one line information */
div.brief {
    height: 1.1em;
    overflow: hidden;
}

em {
    font-style: italic;
}

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.ui-widget {
    font-family: inherit !important;
}

.clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 26px;
}

.thumbnailTd {
    padding: 15px 15px 20px 0;
}

.borderTd {
    border-bottom: 1px solid #ccc;
}

.linkURL {
    width: 400px !important;
}

.editForm th {
    padding-right: 10px;
}

.ui-autocomplete {
    z-index: 200;
}

.profileTable th {
    padding-bottom: 25px;
}

._button {
    padding: 5px 8px;
    border-radius: 5px;
    border: 1px solid #aaa;
    background: #eee;
    font-size: 12px;
    line-height: 1.6;
    display: inline-block;
    vertical-align: top;
}