body {font: 14px/20px Arial,Helvetica,sans-serif;}
body .ui-widget input,body .ui-widget select,body .ui-widget textarea,body .ui-widget {color: #363636;}
h1, h2, h3, h4 {margin-bottom: 10px; color: #363636;}
h1 {line-height: 30px;}
html>body .sortable li { height: 1em; line-height: 1em; }
a.status-filter {font-size: 12px;color: #444;margin: 2px 0 10px 0;display: inline-block;}

input {margin:2px;}
/* allow long elective unit codes in training plan */
#electiveunits .ui-state-default span:nth-of-type(2) {display:inline-block;width:120px;overflow:hidden;white-space:nowrap}

/* Buttons */
input[type=submit], input[type=button] {-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px; -khtml-border-radius: 4px; padding: 6px 12px; font-size: 13px;cursor: pointer; background-color:#ddd; border: 1px solid rgba(0,0,0,.2); text-shadow: 1px 1px 0 rgba(255,255,255,.3); }
.soft-link input[type="button"] {
    background: none;
    border: none;
    display: inline;
    font: inherit;
    margin: 0;
    padding: 0;
    outline: none;
    outline-offset: 0;
    cursor: pointer;
    text-decoration: underline;
}
.default-list ul {
    line-height:1.5;
}
.default-list ul {
   list-style-type: disc;
   list-style-position: inside;
}
.default-list ol {
   list-style-type: decimal;
   list-style-position: inside;
}
.default-list ul ul, ol ul {
   list-style-type: circle;
   list-style-position: inside;
   margin-left: 15px;
}
.default-list ol ol, ul ol {
   list-style-type: lower-latin;
   list-style-position: inside;
   margin-left: 15px;
}

/* Navigation */
#loginHeading {text-align: center; margin: 0 70px 30px 370px; color: #dc3e29; font-size:38px; font-weight: bold; line-height:52px; display: block; }
#loginHeading:after {content: 'My Profiling';}
#top-nav a {color:#ddd;}

/* Main */
#main div.select2-container, #main div.select2-drop, #main div.select2-search, #main div.select2-search #main div.select2-results *{font-size: 12px; line-height:18px;}
#main div.select2-container {margin: 1px 0 3px; min-width: 140px; }
#main a.select2-container {height: 22px;}
.post {/*background:yellow;*/box-sizing: border-box; position:relative;z-index:0;padding:0;/* width:940px; */}
.col-full {width:960px;}

/* Specific */
#newUserForm  .form-table, #editUserForm .form-table {min-width: 400px;}
#loginCirle {display:block; width:400px; height:400px; float:left;margin:0 50px; z-index:5; background:#dc3e29; border-radius:400px;position:relative;top:-20px;}
#interestForm{position:absolute;width:400px; font-size:14px; color:#fff; font-weight:bold;top:50px;}
#interestForm .forgotten-link {color:#fff !important; font-size: 12px;}
#interestForm #loginname {text-align: center; margin: 0 0 15px 0;}
#interestForm #loginpassword {text-align: center; margin: 0 0 5px 0;}
#interestForm .learnmore {margin:2px 0 15px 0 !important; font-size: 13px;}
#interestForm .learnmore a {color:#fff !important; text-decoration: underline;}
#footer{padding:20px 0 20px 0;}
#direction input {width:100%; margin-top:2px;}
#direction { overflow-x: hidden; }
#paste-pc-area,#paste-subpc-area {width:330px; height:150px;}
#template-links, #transition-links {margin:5px 0 0; font-size: 12px;}
#favourite {float:right; margin-top:5px;}
#unapprovedSupervisorEntries, #unapprovedTrainerEntries {overflow-x: hidden;}
#supervisorEntriesContainer, #trainerEntriesContainer {width:9999999px; position:relative; }
#entryDialogContainer #loading {height:auto; margin-top:10px; position: static; width: 100%; padding: 0;}
#approveButtons {width:100%; text-align: center;}
#approveButtons input {margin:5px; width:100px;}
#tp-charts {margin:10px 0 10px 0;}
#total-hours { float: right; }
#new-comment-dialog #comment-text {display: block; height:75px; margin: 0 0 10px 0; width:430px;}
#new-comment-dialog .notify-group {float:left; margin:0 10px 0 0; /*width: 135px;*/}
#loading { position:absolute; text-align:center; padding-top:100px; z-index: 1000; background-color: white; height: 375px; width: 734px; font-size: 11px;}
#activity-chart-container { display:none; }
#activity-chart-container #activity-chart-title { color:#444;/*position: absolute;*/ margin: -17px 0 0 0; font-size: 14px; font-weight: bold; line-height: 22px; }
#charts #chart1, #charts #chart2, #charts #chart3 {display: inline-block;zoom:1; *display:inline; width:369px;}
#charts #chart4 {width:741px;}
#progress-canvas {border-top:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #666;border-left:1px solid #666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background:#f5f5f5 url('../images/category-bg.jpg'); padding:10px; margin:0 0 10px;}
#progress-canvas .week, #progress-canvas .total-activities, #progress-canvas .total-hours {float:left; font-weight: bold;}
#progress-canvas .week .week-date {border:1px solid transparent; padding:5px 10px; }
#progress-canvas .week .week-date:hover {border:1px solid #AAA; background-color:#fff;}
#progress-canvas .week .week-date-datepicker {width:0; height:0; padding:0}
#progress-canvas .total-activities, #progress-canvas .total-hours {margin:0 0 0 20px;}
#progress-canvas .more {float:right; font-weight: bold;}
#progress-canvas .more:hover {color:#de3e29;}
#entry-canvas {border-top:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #666;border-left:1px solid #666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; min-height:100px; background: #f5f5f5 url('../images/category-bg.jpg'); padding:10px 0;}
#entry-canvas h1 {color:#444545; font-size: 18px; margin: 3px 0px 0px 10px;}
#entry-canvas h2 {color:#444545; font-size: 18px; margin:0;}
#entry-canvas .ui-effects-wrapper {float: right; }

.activity-dialog { margin: 0 auto; max-width: 700px; min-width: 250px; width: 95% !important; left: 0 !important; right: 0 !important;overflow:visible;}

#activity-details label, #edit-activity-details label {white-space: nowrap;}
#activity-details .section-wrapper, #edit-activity-details .section-wrapper {border-top:1px solid #ccc;width:auto;text-align:left;clear:both;}
#activity-details .section, #edit-activity-details .section {width:inherit;}

#notes {position:relative;float:right;}
#notes-info {display: none; position: absolute; background: #eee; border:1px solid #ddd; color:#333; font-size: 11px; width:100px; padding:5px; white-space: normal; z-index: 9001; top: -20px; right: 70px;}
.notes-info ul {list-style-type: disc; margin-left: 10px;}
#activity-details #notes-text, #edit-activity-details #edit-notes-text {position: absolute; z-index: 9000; right: 5px; padding: 5px; top:25px; background: #fff; border:1px solid #888; font-size: 10px; overflow: hidden; width: 300px;}

/*#activity-details #button-container,#edit-activity-details #edit-button-container{clear:both;text-align:left;}*/

/*#edit-activity-details #edit-button-container #edit-delete-button {float: left;}*/

#activity-details,#edit-activity-details {overflow-x: hidden; overflow-y: hidden; position:relative;padding: 0.5em 1em 40px;}
#activity-details #hours,#edit-activity-details #edit-hours, #activity-details #minutes,#edit-activity-details #edit-minutes {width:20px; height:16px; padding:3px; text-align: right;}
#activity-details #job,#edit-activity-details #edit-job {height:16px; padding:3px;}
#activity-details #job,#edit-activity-details #edit-job {width:80px;}
#activity-details #job-list, #edit-activity-details #edit-job-list {position: absolute; z-index: 9000; margin: 5px 0px 0px 66px; text-overflow: ellipsis; overflow-x: hidden; padding: 5px; background: #fff; border:1px solid #888; width:150px;}
#activity-details #job-list .job-item, #edit-activity-details #edit-job-list .job-item {border-bottom:1px solid #ddd; padding:3px; min-height: 17px; }
#activity-details #job-list .job-item:hover, #edit-activity-details #edit-job-list .job-item:hover {background:#eee;}
#activity-details #notes-textarea, #edit-activity-details #edit-notes-textarea {width:285px; height:75px; font-size: 12px; margin: 0 !important; position: static; }
#activity-details .input-missed,#edit-activity-details .input-missed {border-color:red;}
#activity-details table,#edit-activity-details table {width:100%; border-bottom:1px solid #bbb; margin:0 auto;}
#activity-details td,#edit-activity-details td {padding:0 10px 5px 0; white-space: nowrap; text-align: left;}
#activity-details td:last-child,#edit-activity-details td:last-child {padding-right:0; width: 100%;}
#activity-details .qq-upload-button, #edit-activity-details .qq-upload-button {padding:4px 0; margin: 5px 0 0 0; width: auto;}
#activity-details .qq-upload-list, #edit-activity-details .qq-upload-list {list-style-type: none; margin:5px; /*width:175px; overflow-x: hidden; text-overflow: ellipsis;*/}
#competencyConfirmationDialog #button-container { margin-top:10px; }
#competencyConfirmationDialog #button-container input { float:right; }
#pc-details .pc,#edit-pc-details .pc {font-size: 10px; line-height: 10px;}
#pc-details .pc-container, #edit-pc-details .pc-container {padding: 0 0 5px; display: block;}
#pc-details,#edit-pc-details {margin: 5px 0 0 0;}
#generic-container,#edit-generic-container {margin:5px auto 0; max-width: 700px; width:100%;}
#generic-container .activity,#edit-generic-container .activity {width:90px; margin: 5px 10px 0;}
#generic-container .activity-image,#edit-generic-container .activity-image {width:90px; height:90px; padding:60px 5px 0 0; border-width:3px; text-align: right; box-shadow: 0 0 0 #666;-webkit-box-shadow: 0 0 0 #666;-moz-box-shadow: 0 0 0 #666;}
#generic-container .activity-image-selected,#edit-generic-container .activity-image-selected {border:3px solid #2fc327;}
#generic-container .activity-title,#edit-generic-container .activity-title { font-size: 10px;}
#generic-container .activity-title-selected,#edit-generic-container .activity-title-selected {color:#2fc327;}
#progress-canvas .activity {display: inline-block;zoom:1; *display:inline; text-align: left; vertical-align: top;  line-height: 13px; width: 190px; font-weight: normal;}
#progress-canvas .activity-image {width:80px; height:80px; padding:20px 0 0 0; border-width:3px; float:left;box-shadow: 0 0 0px #666;-webkit-box-shadow: 0 0 0px #666;-moz-box-shadow: 0 0 0px #666; display: inline-block;zoom:1; *display:inline; margin:10px 10px 10px 0;}
#progress-canvas .activity-info, #progress-canvas .activity-title { display: block;text-align: left; }
#progress-canvas .activity-title {font-weight: bold; padding: 12px 0px 0px; }
#progress-canvas .activity-info { padding: 5px 0px 0px;}
#progress-canvas .ui-effects-wrapper {overflow: hidden;}
#bottom-buttons {float:right; margin:10px 0 0 0;}
#send-notifications {margin:10px 0 0 0; float:right;}
#notifications-info {background:#fafafa; border:1px solid #ddd; padding:5px 5px 5px 10px; float:right; font-size:11px; min-height: 60px; }
#notifications-info table {border:0;}
#notifications-info table td {border:0; vertical-align: middle; padding:0 5px 0 0;}

.ui-widget-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.ui-dialog {-webkit-box-shadow: #444 0px 0px 10px;-moz-box-shadow: #444 0px 0px 10px;box-shadow: #444 0px 0px 10px;}
span.ui-icon {height: 14px; display: inline-block; zoom:1; *display:inline; background-image: url("../../../../../myprofiling/lib/jquery-ui-1.10.4/css/smoothness/images/ui-icons_888888_256x240.png");}

.help {position:relative;}
.help-text {border-radius: 10px;position: absolute; z-index: 99; background-color: #efefef; border: 1px solid #999; padding:5px; width:200px; font-size: 12px; font-family: arial; font-weight: normal;text-align:left;box-shadow:3px 3px 3px #999;line-height:1.5;}


.form-table tr td:first-child {padding: 2px 10px 0 0; vertical-align: baseline; width:none;}
.form-table tr td:first-child table {min-width: 400px;}
.form-table tr td:first-child table td:nth-child(2) { min-width: 200px;}
.form-table td {min-height:30px; min-width:100px;}
/*.form-table td strong {display: inline-block; padding-top:12px;}*/
.form-table td input[type="radio"]:first-child {display:inline-block; margin-top:12px;}

.two-cols tr td:first-child { border-right: 1px dotted #ccc; padding-right: 20px; }
.two-cols tr td table tr td:first-child { border-right: 0; }
.two-cols tr td:last-child { padding-left: 20px; }
.two-cols tr td table tr td:last-child { padding-left: 0px; }

.three-cols tr td:first-child {  border-left: 0; padding-left: 0px; }
.three-cols tr td { border-left: 1px dotted #ccc; padding: 0 10px; }
.three-cols tr td:last-child { padding-right: 0px; }

.list-table {width:100%; padding: 0; margin:0; border-spacing: 0;}
.list-table td {border-bottom:1px solid #ddd; padding:5px; text-align: left; line-height: 16px; vertical-align: middle;}
.list-table .alt0:hover,.list-table .alt1:hover {background: #ddd; cursor: pointer;}
.list-table th {text-align: left; padding:5px;}
.list-table th img {padding-bottom: 2px !important;}
.list-table .alt0, .list-table .alt2 {background: #fff;}
.list-table .alt1, .list-table .alt3 {background: #f5f5f5;}
.list-table .td-title {font-weight: bold;}
.list-table .td-width {width:100px;}
.list-table .actions-column {text-align: center;}
.list-table-2 th {text-align: left; padding:5px 0 0 0;}

.mobileApps {float:left; width:350px; margin:20px 0 0 0; padding:0;}
.mobileApps img {border: solid 1px #CCC;}
.bug input {border:0;}

.results-list { border: 1px solid #ddd; padding:5px; background:#fff;}
.results-list li {padding:2px; margin:0 45px 0 0; border: 1px solid #fff;}
.results-list li img, .units-list li img {height:12px;}
.results-list .selected-unit {border:1px dotted #aaa; background:#eee;}
.units-list {list-style-type: disc; margin: 0 0 0 20px;}
.close-search-results {float: right; padding:10px;}

.label-col {width:150px;}
.deleteunit {float: right;position:absolute;}
.table-underline {border-bottom: 1px dotted #ccc; margin-bottom: 10px;}
.table-underline td {padding-bottom:10px;}
.wide-cell {width:330px;}
.error  {float:right; font-size: 10px; color:red;}

.sortable { list-style-type: none; margin: 0; padding: 0; width:180px; }
.sortable li { margin: 0 2px 2px 2px; padding: 5px; font-size: 13px; cursor: move; }
.sortable li span {vertical-align: top;}

.ui-state-highlight { line-height: 1.3; }
.border-highlight {border:1px solid #ffcc66;}
.clickable {cursor: pointer;}
.underlinable:hover {text-decoration: underline;}

.pagination {font-weight: bold; display:inline-block; margin: 2px 0; }
.pagination ul {margin:0; padding:0; display: inline;}
.pagination li {list-style-type: none; display: inline-block; padding-right: 10px; vertical-align: middle; }
.pagination li img { display: inline-block; vertical-align: sub; }
.pagination a{ text-decoration: none;}
.pagination a:hover,.selected{color:#444;}
.pagination img { display: inline-block; vertical-align: sub; }

.activity-image {border:1px solid #ccc; height:100px; width:100px; margin:2px;}
.small {font-size: 10px;}
.small-icon {height: 12px;}
.link-icon {position: absolute; margin-top: 1px;}
.indent-1 {padding-left: 10px;}
.indent-2 {padding-left: 20px;}
.profile-buttons {background-color:white;float: right; border:1px solid #ddd; padding:10px 0; width:220px; *width:250px; text-align: center !important; margin: 0 0 10px 0;}
.unit-buttons {float: right; width:220px; *width:250px; text-align: center; margin: 0 0 10px 0;}
input[type=button].profile-button,
input[type=button].unit-button,
button.profile-button,
button.unit-button {
    width:210px; text-align: center !important;padding-left:0;padding-right:0;
}
.unit-button.highlight { border-color: #FCEFA1; background: #FBF9EE; }
.unit-button.highlight:hover { background: #FBF8C9; }
.drop-down-title:hover {text-decoration: underline;}
.details-header {padding:3px 10px 3px 25px; width:250px;}
.details {width:227px; height:100%;}
.details td {font-size:small;}
.additional-details{width:auto; display:block;padding-bottom: 10px;}
.entry {display: block; zoom:1; vertical-align: top;}
.entry .entry-task { clear:both; padding: 2px 5px 5px; border: 1px solid #ccc; }
.entry .entryDate {font-size:13px; font-weight: bold; margin-bottom:5px;}
.entry .print-link {float: right;}
.entry .print-link img {height:14px;}
.entry .activity {clear:both; width:90px; margin: 0px 10px 5px; }
.entry-task .activities-wrap {  }
.entry-task .task-name { font-size: 18px; font-weight: bold; line-height: 28px; }
.entry-task .notes-text {position: absolute; background: #fff; padding:8px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 1px 1px 4px rgba(0,0,0,.4); font-weight: normal; text-align: justify; font-size: 12px; width: 60%; max-width: 700px; z-index: 100;}
.entry .activity img {margin:0 auto 2px; height:80px; width: 80px;border: 1px solid #666;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
.entry p {margin:0 0 10px 0;}
.entry .activity .activity-image-plain {text-align: center; display: block; position: relative;}
.entry .activity .activity-image-plain .icon { cursor: pointer; margin: 0; height: auto; width: auto; bottom: 8px; right: 8px; position: absolute; border-radius: 0; }
.entry .activity .activity-title {font-weight: bold;}
.entry-task .activity-details {font-weight: normal; text-align: left; padding: 3px 3px 5px; display: block; font-size: 15px;}
.training-plan {width: 960px; border: 1px solid #ddd;}
.training-plan #tabs { box-sizing: border-box; background-color:white;/*height:auto;*/ border-right: 1px solid #ddd; width:180px; overflow-x: visible; /*overflow-y: auto;*/ margin: 0px; float:left;}
.training-plan #tabs .tab-heading {font-weight: bold;}
.training-plan #tabs li > span { box-sizing: border-box; display: block; width: 100%; height: 100%; text-overflow: ellipsis; white-space:nowrap; overflow: hidden; font-size: 13px; position: relative; }
.training-plan #tabs li .unit-type { position: absolute; right: 5px; font-weight: normal; }
.training-plan #tabs li span.hidden-title {display: none; font-size: 10px;}
.training-plan #tabs li {padding:1px 1px 1px 5px; height:22px; overflow: hidden; width: 100%; box-sizing: border-box;}
.training-plan .alt0:hover,.training-plan .alt1:hover {background: #ddd; cursor: pointer;}
.training-plan .alt0, .training-plan .alt0.tab-heading:hover {background: #fff;}
.training-plan .alt1, .training-plan .alt1.tab-heading:hover {background: #eee;}
.training-plan .current {background: #ddd url(../images/close.gif) 5px center no-repeat;}
.training-plan .current span.hidden-title { padding-left: 15px; width: 130px !important; background: #ddd url(../images/close.gif) 0 center no-repeat; }
.training-plan #unit-details { box-sizing: border-box; background-color:white; padding: 17px 5px 0 5px; width:780px; float: left; min-height: 480px;}

.training-plan #unit-uploads {border:1px solid #CCC; padding:10px; margin: 5px 11px 5px 1px;}

.training-plan .comments {max-height:200px; border:1px solid #CCC; overflow-y: auto; padding:10px; margin: 5px 11px 5px 1px;}
.training-plan .comments #new-comment {float: right;}
.training-plan .comments .list-table {margin-top: 10px;}
.training-plan .comments .list-table .comment-user {font-weight: bold; vertical-align: top; border-right: 1px dotted #CCC; white-space: nowrap; padding: 5px 10px 5px 5px; text-align: right;}
.training-plan .comments .list-table .comment-user .small {font-size: 11px; font-weight: normal;}
.training-plan .comments .list-table tr td:last-child {width: 100%; vertical-align: top; }
.category {width:110px; display: inline-block;zoom:1; *display:inline; margin:20px 18px 4px 21px; text-align: left; vertical-align: top; font-weight: bold; font-size: 12px; line-height: 13px;}
.activity, .category-container .subcategory {width:110px; display: inline-block;zoom:1; *display:inline; margin: 0px 18px 5px; text-align: left; vertical-align: top; font-weight: bold; font-size: 12px; line-height: 13px;}
.category .category-title,.activity .activity-title,.category-container .subcategory .activity-title, .subcategory-container .activity-title {display: block; text-align: center;}
.activity .activity-details { font-weight: normal; float: left;}
.category-image,.activity-image,.category-container .subcategory-image {box-sizing:border-box; height:100px; width:100px; display: block; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border:5px solid #444;cursor: pointer; margin:0 0 3px 0; text-align: center; padding-top:30px;box-shadow: 0 0 10px #666;-webkit-box-shadow: 0 0 10px #666;-moz-box-shadow: 0 0 10px #666; position: relative;}
.category-image:hover,.activity-image:hover,.category-container .subcategory-image:hover { border-color: #de3e29;box-shadow: 0 0 30px #666;-webkit-box-shadow: 0 0 30px #666;-moz-box-shadow: 0 0 30px #666;}
.category-image:active,.activity-image:active,.category-container .subcategory-image:active { border-color: #222;}
.category-image.category-contains-selected,.activity-image.activity-image-selected { border-color: #2fc327; }
.category-image .activity-count { display: none; position: absolute; right: 0; bottom: 0; background: #2fc327; width: 20px; height: 20px; padding-top: 5px; box-sizing: border-box; color: white; border-radius: 0 0 5px 0; }
.category-container .top-shadow, .subcategory-container .top-shadow {box-sizing:border-box; left: 0; right: 0; top:0; height:20px; background:url('../images/shadow-top.png'); position: absolute; }
.category-container .bottom-shadow, .subcategory-container .bottom-shadow {box-sizing:border-box; left: 0; right: 0; bottom:0; height:20px; background:url('../images/shadow-bottom.png'); position: absolute;}
.category-container, .subcategory-container {background: #b0b0b0 url('../images/activity-bg.jpg');box-sizing:border-box;border-top: 5px solid #444;border-bottom: 5px solid #444; float: right;padding: 10px 11px;width: 958px; position: relative; }
.subcategory-container {width: 100%; position: relative;}
.category-container p, .subcategory-container p {margin-bottom:10px; font-weight: bold;}
.activity-container {float: left;}
.category-arrow {width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid #444; }
.category-arrow-container{display: inline-block;zoom:1; *display:inline; text-align: center; width:100%;margin-top:-10px;}
.activity .activity-image-selected .accept-icon { background-color: #2fc327; box-sizing: border-box; border-radius: 0 0 5px; line-height: 24px; position: absolute; bottom: 0; right: 0; height: 26px; width: 26px; padding-top:5px; text-align: center; }
.section-wrapper {width:2000px;position:relative;}
.section {display:inline-block;zoom:1; *display:inline; width:590px; margin:0 10px 0 0; vertical-align: top;}
.training-plan #tabs li span .tick-placeholder, .training-plan #tabs li span .comment-placeholder {width:12px; height:auto; display:inline-block; zoom:1; *display:inline;}
.loading-image {margin:10px 0 0; text-align: center; width: 100%; display: block;}
.unit-buttons .loading-image, .profile-buttons .loading-image {margin:2px 0 0; padding:0; height:7px;}
.notify-header {font-weight: bold; display: block;}
.faqs h2 {font-size: 18px; color:#333; text-decoration: underline; margin: 15px 0 5px;}
.faqs .question {font-style: italic;}
.faqs .answer {margin: 5px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px dotted #ddd; }
.usernotes h2 {font-size: 18px; text-decoration: underline; margin: 15px 0 5px;}
.usernotes h3 {font-size: 16px; margin: 15px 0 5px;}
.usernotes p {margin:0 0 10px 0;}
.usernotes ul {margin:10px 0 10px 20px; list-style-type: disc;}
.usernotes ul li ul {list-style-type: circle;}
.usernotes ol {list-style-type: decimal; margin:10px 0 10px 20px;}

.wpsa-achieved {color: #8FBB00!important;}
.wpsa-denied {color: #eb0!important;}
.wpsa-request {color: #7af!important;}
.wpsa-item:hover{text-decoration: underline;}

.button-ticked { background:#66C74F; color: #fff; }
.empty-results { font-style: italic; font-size: smaller;}

table.zebra td{
    cursor: pointer;
}
table.zebra tr:nth-child(even){
   background-color: #fff;
}
table.zebra tr:nth-child(odd) {
   background-color: #f5f5f5;
}
table.zebra tr:hover > td {
    background-color: #f1f1f1;
}

input { padding: 7px; }

h1, h2, h3 {margin-bottom: 10px;}

.help {position:relative;}

#logo {float:none; text-align: center;}
#wrapper {background: url(../images/bg-texture.png) no-repeat 50% 0%;}

#top-nav a {color:#ddd;}
.nav .sf-sub-indicator { border-top: 6px solid; border-left: 4px solid transparent; border-right: 4px solid transparent; display: inline-block; }

/* Sticky Footer */
/* .nav .sf-sub-indicator {display: inline-block;zoom:1; *display:inline; height: 6px; position: static;} */

.form-table tr td:first-child {padding: 2px 10px 0 0; vertical-align: top;}
.form-table td {height:33px;}

.list-table {width:100%; padding: 0; margin:0; border-spacing: 0;}
.list-table td {border-bottom:1px solid #ddd; padding:5px; text-align: left; line-height: 16px; vertical-align: middle;}
.list-table .alt0:hover,.list-table .alt1:hover {background: #ddd; cursor: pointer;}
.list-table th {background-color: #eaeaea; text-align: left; padding:5px; text-shadow: 1px 1px 0 rgba(255,255,255,.5); vertical-align: middle; }
.list-table th img {padding-bottom: 2px !important;}
.list-table .alt0, .list-table .alt2 {background: #fff;}
.list-table .alt1, .list-table .alt3 {background: #f5f5f5;}
.list-table .td-title {font-weight: bold;}
.list-table .td-width {width:100px;}

.list-table .actions-column {text-align: center;}

.list-table-2 th {text-align: left; padding:5px 0 0 0;}

.results-list { border: 1px solid #ddd; padding:5px;}
.results-list li img, .units-list li img {height:12px;}
.units-list {list-style-type: disc; margin: 0 0 0 20px;}

.two-cols tr td:first-child { border-right: 1px dotted #ccc; padding-right: 20px; }
.two-cols tr td table tr td:first-child { border-right: 0; }
.two-cols tr td:last-child { padding-left: 20px; }
.two-cols tr td table tr td:last-child { padding-left: 0px; }

.three-cols tr td:first-child {  border-left: 0; padding-left: 0px; }
.three-cols tr td { border-left: 1px dotted #ccc; padding: 0 10px; }
.three-cols tr td:last-child { padding-right: 0px; }
.label-col {width:150px;}

.table-underline {border-bottom: 1px dotted #ccc; margin-bottom: 10px;}
.table-underline td {padding-bottom:10px;}
.wide-cell {width:330px;}
#paste-pc-area,#paste-subpc-area {width:330px; height:150px;}

.error  {float:right; font-size: 10px; color:red;}

.sortable { list-style-type: none; margin: 0; padding: 0; width:180px; }
.sortable li { margin: 0 2px 2px 2px; padding: 5px; font-size: 13px; cursor: move; }
html>body .sortable li { height: 13px; line-height: 13px; white-space:nowrap; overflow:hidden; }
.sortable li span {vertical-align: top;}
.border-highlight {border:1px solid #ffcc66;}

.clickable {cursor: pointer;}

.small {font-size: 10px;}
.small-icon {height: 12px;}
.link-icon {position: absolute; margin-top: 1px;}
.indent-1 {padding-left: 10px;}
.indent-2 {padding-left: 20px;}

/* Navigation */
.main-nav-selector small {color: grey; display: none;}
.mp span {color: red;}
.amp span {color: #0893CE;}
.rpl span {color: orange;}
.tpg span {color: #62c462;}
.main-nav-selector {display:inline-block;overflow-y:visible;position: relative;cursor:pointer;margin:0 28px;padding:5px;text-align: center;min-height: 200px;}
.main-nav-selector:after {line-height: 320px; content: "";background: rgba(255, 255, 255, 0.7);box-shadow: none;border-radius: 20px;height: 100%;position: absolute;width: 100%;left: 0px;top: 0px;}
.main-nav-selector.current:after,.main-nav-selector:hover:after {background: none;}
.main-nav-selector:active:after {background: none;}
.main-nav-selector img {width:100px;display:block;margin: 10px auto 0;border:5px solid #777;border-radius: 30px;padding: 10px;}
.main-nav-selector span {display:block;text-align:center;font-size:24px;font-weight: bolder;padding:5px;}
.nav-group {display:none;margin: 10px auto 0;border:1px solid #f5f5f5;box-shadow: 0 0 10px #777 inset;border-radius: 20px;padding: 10px; height: 50px;}
a.nav-item {display: table-cell;text-align:center;vertical-align: middle;min-width: 110px;height:100%; padding: 2px 0 2px; font-size:16px;box-shadow: 0 0 5px #777 inset;border:10px solid transparent;border-radius:20px;text-shadow: 1px 1px 2px white;}
a.nav-item:hover {text-decoration:none;}
a.nav-item[href]:hover {border-color: #f5f5f5;}
a.nav-item[href]:active {background:#ddd;box-shadow: 0 0 5px #333 inset;}
a.nav-item[href] {color:black;}

.login-container {
display: block;
text-align: center;
margin: 12px;
}
#loginButton {
    color: #555;
}
.login-as {
    display: inline-block;
    vertical-align: middle;
}

.middle { display: inline-block; vertical-align: middle; }

.qual_complete_title {font-size:12px;}
#qualcompletebar {display:block;position:relative;height:16px;background:#ccc;border-radius:3px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);}
#qualcompletebar .start {background:#2fc327;position:absolute; top:0; bottom:0; border-radius:3px;}
#qualcompletebar span {position:absolute;left:0; top:0; line-height: 16px; bottom: 0; right:0; text-align:center; font-size:11px; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }

.esa_complete_title {font-size:12px;}
#wpsacompletebar {display:block;position:relative;height:16px;background:#ccc;border-radius:3px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);}
#wpsacompletebar .start {background:#62a6bc;position:absolute; top:0; bottom:0; border-radius:3px;}
#wpsacompletebar span {position:absolute;left:0; top:0; line-height: 16px; bottom: 0; right:0; text-align:center; font-size:11px; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }

.unit-status {padding:6px 0;}
a.summative, a.formative {color:black;}
.summative, .formative, .checklist, .cluster-checklist, .uploads {padding:6px 3px;}
.summative:hover, .formative:hover, .checklist:hover, .cluster-checklist:hover, .uploads:hover {color:#000;text-decoration:underline;}
.checklist-display, .summative-display {margin:0;vertical-align:middle;}
img.checklist-display, img.summative-display, img.form-display {opacity:0.4}
.checklist-display:hover, .summative-display:hover {opacity:1}
.summative.opened, .summative.available, .form.available, .cluster_assessments.opened, .cluster_assessments.available, .checklist.available, .cluster_checklists.available {color: #7af!important;}
.summative.marking,.cluster_assessments.marking, .checklist.trainer-checklist.available, .cluster_checklists.trainer-checklist.available {color: #eb0!important;}
.summative.satisfactory, .summative.completed-satisfactory, .cluster_assessments.completed-satisfactory {color: #8FBB00!important;}
.summative.unsatisfactory, .summative.completed-unsatisfactory, .cluster_assessments.unsatisfactory, .cluster_assessments.completed-unsatisfactory {color: #a64d79!important;}
.summative.locked, .cluster_assessments.locked, .summative.closed, .cluster_assessments.closed {color: #a9a9a9!important;}
.summative.not-yet-available, .form.not-yet-available, .cluster_assessments.not-yet-available {color: #000;}
.form.not-yet-available { display: none; }
.checklist.marking, .form.marking, .cluster-checklist.marking, .cluster_checklists.marking {color: #eb0!important;}
.checklist.satisfactory, .form.satisfactory, .cluster-checklist.satisfactory, .cluster-checklist.completed-satisfactory, .cluster_checklists.satisfactory {color: #8FBB00!important;}
.checklist.unsatisfactory, .form.unsatisfactory, .cluster-checklist.unsatisfactory, .cluster-checklist.completed-unsatisfactory, .cluster_checklists.unsatisfactory {color: #a64d79!important;}
.checklist.student-edit, .form.student-edit, .cluster_checklists.student-edit {color: #77AAFF;}

.missing-notification {
    display:inline-block;
    width:16px;
    margin: 0 2px;
    vertical-align: middle;
}

.entry-icon-approval {
    background:#F4BE7A;
    border-radius: 100%;
    box-shadow: 0 0 0 1px #F4BE7A, 0 3px 2px rgba(255,255,255,.4) inset, 0 0 2px orange;
    color: #fefefe;
    display: inline-block;
    font-size: 10px;
    height: 16px;
    line-height: 16px;
    margin: 0 2px;
    width: 16px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    vertical-align: middle;
}
.entry-icon-no-approval {
    background:#BDBDBD;
    border-radius: 100%;
    box-shadow: 0 0 2px #ccc, -2px 3px 2px rgba(255,255,255,.3) inset;
    display: inline-block;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    vertical-align: middle;
}
.entry-icon-weeks-overdue {
    background: url(../images/core/octagon_frame.png) no-repeat center center;
    display: inline-block;
    color: #945713;
    font-size: 10px;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255,255,255,.3);
    vertical-align: middle;
}
.wpsa-outstanding,
.entry-icon-wpsa-outstanding {
    background:#7af;
    border-radius: 100%;
    box-shadow: 0 0 1px #ccc, -2px 3px 2px rgba(255,255,255,.3) inset;
    display: inline-block;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    vertical-align: middle;
}
.ssa-outstanding,
.entry-icon-ssa-outstanding {
    background:#def19c;
    border-radius: 100%;
    box-shadow: 0 0 1px #ccc, -2px 3px 2px rgba(255,255,255,.3) inset;
    display: inline-block;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    vertical-align: middle;
}

.rpl-status,
.entry-icon-rpl {
    background-color: darkorange;
    border-radius: 100%;
    box-shadow: 0 0 1px #ccc, -2px 3px 2px rgba(255,255,255,.3) inset;
    color: #fefefe;
    display: inline-block;
    font-size: 12px;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    vertical-align: middle;
}

.entry-icon {
    border-radius: 100%;
    box-shadow: 0 0 1px #ccc, -2px 3px 2px rgba(255,255,255,.3) inset;
    color: #fefefe;
    display: inline-block;
    font-size: 10px;
    margin: 0 2px;
    height: 16px;
    line-height: 16px;
    width: 16px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    vertical-align: middle;
}
.entry-icon.entry-icon-partial-approved-weeks {
    background-color: pink;
}

@media screen AND (max-width: 780px){
    .col-full,
    img,
    .post,
    #main.fullwidth,
    #footer .inner,
    #footer #credits,
    .category-container,
    .category-container .top-shadow,
    .category-container .bottom-shadow {
        box-sizing: border-box;
        max-width: 100%;
    }
    .category-container {
        padding: 4px 6px;
    }
    .activity-container {
        text-align: left;
    }
    .category-container .top-shadow,
    .category-container .bottom-shadow {
        margin-left: -6px;
    }
    .activity {
        margin: 0 8px 5px;
    }
    #header {
        padding-left: 4px;
        padding-right: 4px;
    }
    .post {
        padding: 4px;
        overflow: visible!important;
    }
}
@media screen AND (max-width: 550px){
    .top-logo {
        height: auto!important;
        line-height: normal!important;
        margin-bottom: 0!important;
        float: none!important;
    }
    .top-logo img {
        top: 0!important;
    }
    nav.center {
        margin: 10px 40px!important;
    }
    nav.main-nav small {
        display: block!important;
        font-size: 14px!important;
    }
    nav.center a {
        margin-bottom: 15px!important;
    }
    div.nav-description {
        display: none!important;
    }
    #header {
        text-align: center;
    }
    .nav-mobile-toggle {
        background-color: #000;
        border-radius: 4px;
        border: 2px solid #efefef;
        cursor: pointer;
        height: 22px;
        width: 30px;
        padding: 3px;
        position: fixed;
        z-index: 60;
        right: 5px;
        top: 5px;
        opacity: .6;
    }
    .nav-mobile-toggle:hover {
        background-color: #333;
    }
    .nav-mobile-toggle i {
        background-color: #efefef;
        border-radius: 2px;
        display: block;
        height: 3px;
        margin: 3px 2px 0;
    }
    #top-nav {
        background: rgba(0,0,0,.9);
        border-radius: 0!important;
        left: 100%;
        -moz-transition: left .5s;
        -webkit-transition: left .5s;
        transition: left .5s;
        position: fixed;
        top: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        z-index: 55;
        width: 100%;
    }
    .nav-mobile-active {
        left: 0!important;
    }
    #top-nav li {
        width: auto;
        float: none!important;
    }
    #top-nav .nav li ul {
        background: none;
        border-radius: 0!important;
        left: auto;
        position: relative;
        overflow: visible!important;
        z-index: 20!important;
        margin-left: 10px;
    }
    #top-nav .nav a {
        font-size: 14px;
    }
    #top-nav .nav li ul li a {
        width: auto;
    }
    #top-nav .nav li ul ul {
        margin: 0;
    }
    #main-nav {
        position: relative;
        margin-bottom: 0;
        z-index: 30;
    }
    #main-nav .nav > li {
        box-sizing: border-box;
        width: 50%;
    }
    /* PROFILE */
    .profile-buttons {
        width: auto;
        float: none;
    }
    #qual-complete-chart {
        float: none!important;
        margin-bottom: 5px!important;
    }
    #qualcompletebar {
        margin: 0 auto!important;
    }
    #wpsacompletebar {
        margin: 0 auto!important;
    }
    .unit-buttons {
        float: none!important;
        width: auto!important;
    }
    #activityChart > div {
        width: auto!important;
    }
}