body {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 400;
	background: #f5f5f5;
	min-height: 100%;
}

#content:focus{outline:none;}

.farcry-header-environment {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 1;
	z-index: 1001;
}

.farcry-header-environment-label {
	display: inline-block;
	overflow: hidden;
	font-size: 13px;
	font-weight: bold;
	vertical-align: top;
	background: #aaaaaa;
	color: white;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	max-height: 2px;
	padding: 2px 12px;
	line-height: 2;
}

.farcry-header-environment-label:hover {
	max-height: none;
	padding: 7px 12px;
	line-height: 1;
}

/* these are also in webtop.css */
.responsive-inline-frame {
  max-width: 1200px; 
  margin-right: auto;
}
.responsive-inline-frame-xlarge {
  max-width: 1800px; 
}
.responsive-inline-frame-inner {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 75%; /* 75% for 4:3 aspect ratio       56.25 for 16x9 aspect ratio   e.g 9 is what percentage of 16? */
  height: 0;
}
.responsive-inline-frame-inner-16-9 {
  padding-top: 56.25%; /* 75% for 4:3 aspect ratio       56.25 for 16x9 aspect ratio   e.g 9 is what percentage of 16? */
}
.responsive-inline-frame-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.playable-container, .downloadable-container  {
  position: relative;
}   

.playable-container span.fa {
  color: #FFF;
  opacity: 0.50;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%,-50%);
}   

.downloadable-container span.fa {
  position: absolute;
  top: 110%;
  left: 100%;
  transform: translate(-110%, -110%);
  -webkit-transform:translate(-110%,-110%);
}   

.playable-container:hover span.fa, .downloadable-container:hover span.fa {
	padding-bottom:5px;
	opacity: 0.90;
}   

/* webskin tracer jquery-ui */
.ui-front {
	z-index:1010;
}


a:focus, a:hover {
	text-decoration: none;
}

.gritter-item a {
	color: #fff;
	text-decoration: underline;
}
  
.controls input.fc-datepicker {
	max-width: 205px;
	min-width: 208px;
}

    
.painscale .btn-default:focus, .painscale .btn-default:hover {
	background-color: transparent; 
}
.painscale .btn-default.active:hover, .painscale .btn-default.active:focus {
	background-color: #d4d4d4;
}


    
.btn, .popover {
	font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-weight: 400;
}

.btn-lg {
	font-weight: 500;
}

.error {
	color: #c00
}

.success {
	color: #360
}

.highlight {
	color: #26568D
}

.subdued {
	color: #999
}

.disabled {
	color: #708090
}

.btn[disabled] {
   	pointer-events: auto !important;
}

/*********
 logo block
 *********/
.logo {
	border-bottom: 1px solid #cccccc;
	color: #ebebeb;
	margin-bottom: -80px;
	overflow: hidden;
	/*  padding: 40px 0 110px; */
	position: relative;
	-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -3;
	background: no-repeat;
	background-size: cover;
	background-color: #fff;
}

.logo .btn {
	font-size: 20px;
	font-weight: 300;
	padding: 11px 30px;
}

.logo .inner {
	padding: 40px 0 110px;
	min-height: 80px;
}

.programmeBody .logo .inner {
	padding: 0px 0 80px;
	min-height: 20px;
}

.logo .inner.black {
	background-image: url(/webtop/css/images/bg-mask-dot.png);
}

.logo-hero {
	text-align: center;
}

.h3, .h4, .h5, .h6, h3, h4, h5, h6 {
	line-height: 1.42857143;
}

h1 {
	font-weight: 600;
	letter-spacing: -0.03em;
}

h2, h3 {
	font-weight: 600;
	letter-spacing: -0.02em;
}

h5 {
	font-size: 16px;
}

.logo h1 {
	font-family: "Roboto", "Source Sans Pro", Helvetica, Arial, sans-serif;
	color: #ffffff;
	letter-spacing: auto;
	font-weight: 400;
	font-size: 46px;
}

.logo h1:last-child, .logo h1.last-child {
	margin-bottom: 30px;
}

.logo a {
	color: #ffffff;
	text-decoration: none;
}

.logo p {
	font-size: 26px;
	font-weight: 100;
	line-height: 1.25;
	margin-bottom: 15px;
}
/*
.logo > img {
  min-height:100%;
  min-width:100%;
  position:absolute;
    top:0;
    left:0;
  z-index:-3;
}
*/
#todayBubbles .alert {
	min-height: 75px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#bubbles .alert {
	min-height: 75px;
	margin-top: 10px;
	margin-bottom: 10px;
	/*
	margin-right: 30px;
	margin-left: 30px;
*/
}

.alert-primary { /* blue box - like highlightBoxonYellow */
  color: #fff;
  background-color: #347999;
  border-color: #e3e3e3;
}

.alert-info .badge {
	background-color: #31708f;
	vertical-align: inherit;
}
/*********
 main
 *********/
.main {
	background: #ffffff;
	margin: 0 auto;
	padding: 0 0 30px 0;
	position: relative;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
body#tinymce {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

/*
.main .row {
  position:relative;
    margin-right: 0px;
    margin-left: 0px;
}
*/
.main .section {
	padding-top: 30px;
}

.main .section:first-child {
	padding-top: 0px;
}

.main .section .carousel {
	margin-top: 20px;
}

.main .section:first-child .page-header {
	margin: 10px 0 10px;
	/*
*/
	/* bootstrap: 40px 0 20px */
	padding-bottom: 0px;
	/*
*/
	/* bootstrap: 9px */
}

/* can't use #tab-pane-today as it needs to be relevant for modals */
.activityDefHolder .page-header, .ssqHolder .page-header {
	margin: 0px;
}

.activityDefHolder .page-header h2, .ssqHolder  .page-header h2 {
	margin: 15px auto 15px;
	/*
	min-height: 50px;
    max-width: 70%;
*/
	text-align: center;
	opacity: 0.8;
}

.main .breadcrumb:first-child {
	margin-top: 30px;
}

.main .breadcrumb+.section {
	padding-top: 10px;
}

/*********
 footer
 *********/
.footer {
	color: #a7a9aa;
	font-size: 9pt
	/*
  margin:60px 0px 50px 0px;
*/
}

.footer .btn-default {
	color: #999;
}
#myJiraIssueCollectorTrigger {
}

.footer p {
	margin-bottom: 0;
}

.footer .main {
	padding-top: 30px;
	padding-bottom: 30px;
}

.footer .footer-logo {
	margin-top: 20px;
}

.footer .footer-logo a {
	position: relative;
	top: -2px;
	left: 1px;
}

/*********
 carousel
 *********/
/*
.carousel img {
  width:100%;
}
.carousel-caption a,
.carousel-caption p {
  color:#dddddd;
}
*/
.carousel-control.right, .carousel-control.left {
	background-image: none;
}

.carousel-control {
	width: 10%;
	font-size: 100px;
}

.carousel-caption {
	padding-left: 12px;
	padding-right: 12px;
	background-color: rgba(0, 0, 0, .8);
}

.carousel-caption a {
	color: #ffffff;
	text-decoration: none;
}

/*********
 nav
 *********/
/*

.navbar .nav > li {
  position:relative;
}
.navbar .nav > li .caret {
  border-top-color:#555555;
  border-bottom-color:#555555;
  margin-top:8px;
}
.navbar .nav > li:hover .caret {
  border-top-color:#000000;
  border-bottom-color:#000000;
}
.navbar .nav > li > ul {
  display:none;
  margin:0 !important;
}
.navbar .nav > li:hover > ul.dropdown-menu {
  display:block;
}

  .nav-collapse.collapse {
	float:none !important;
  }
*/
.brand {
	padding: 10px 15px 20px 0px !important;
	min-height: 100px;
}

.nav-stacked>li, .nav-stacked>li+li {
	margin-top: 0px;
	margin-left: 0;
}

.nav>li>a, .responsive-tabs.nav-tabs>li>a {
	color: #666666;
	background: #fff;
}

.responsive-tabs.nav-tabs>li.responsive-tab>a.disabled {
	color: #d3d3d3;
}

.nav>li>a {
	border: 1px solid #fff;
	padding-right: 12px;
	padding-left: 12px;
}

.nav>li.sign-in, .nav>li.sign-out {
	border-left: 2px solid #cedadb;
	color: #333;
}

.nav>li.my-account {
	color: #333;
}
.nav>li.my-account a:before {
	display: inline-block;
    font: normal normal normal 18px/1.6 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f2bd";
    margin-right: 5px;
	opacity: 1;
	float:left;
}

.nav>li:hover>a {
	background: #eee;
	color: #555555;
}

.nav>li.active>a, .nav>li.active>a:focus, .nav>li.active>a:hover {
	color: #555;
	cursor: default;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.225);
	-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.225);
	box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.225);
	border-bottom: 1px solid transparent;
}

.navbar {
	margin-bottom: 0px;
}

.siteBody .navbar {
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 
}



.navbar-toggle {
	border: 1px solid #cccccc;
	background-color: #fff;
}

.navbar-toggle .icon-bar {
	background-color: #999999;
}


.navbar-right .dropdown-menu {
    left: 0;
    right: auto;
}

ul {
   -webkit-padding-start: 20px;	
}


/*
.navbar .btn-navbar {
  padding:6px 10px 8px;
  margin: 18px 15px 8px 0px;
}

.navbar-fixed-top .navbar-inner {
  border-bottom:1px solid #ccc \9;
  margin-bottom:-1px \9;
}
.navbar-search .search-query {
  line-height:20px \9;
}
*/

/*
.navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555555;text-decoration:none;background-color:#e5e5e5;
-webkit-box-shadow:inset 0 3px 8px rgba(0, 0, 0, 0.125);-moz-box-shadow:inset 0 3px 8px rgba(0, 0, 0, 0.125);box-shadow:inset 0 3px 8px rgba(0, 0, 0, 0.125);
background-image:-moz-linear-gradient(top, #e5e5e5, #ffffff);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#e5e5e5), to(#ffffff));background-image:-webkit-linear-gradient(top, #e5e5e5, #ffffff);background-image:-o-linear-gradient(top, #e5e5e5, #ffffff);background-image:linear-gradient(to bottom, #e5e5e5, #ffffff);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffffffff', GradientType=0);
}
*/

/*********
 side nav
 *********/
/*
.nav-side .nav {
  background:#ffffff;
  margin:0;
  padding:0;
  width:220px;
}
.nav-side .nav > li.active > a {
  background:#0088cc !important;
  color:#ffffff !important;
}
.nav-side .nav [class^="icon-"] {
  margin-right:5px;
  opacity:0.3;
}
.nav-side .nav a:hover [class^="icon-"] {
  opacity:0.6;
}
.nav-side .nav .active [class^="icon-"] {
  opacity:1 !important;
}
.nav-side .nav ul {
  border-top:1px solid #ffffff;
  border-right:1px solid #dddddd;
  border-left:1px solid #dddddd;
  list-style:none;
  margin:-1px 0 0;
}
.nav-side .nav ul ul {
  border:none;
}
.nav-side .nav ul li > a {
  display:block;
  padding:8px 12px 8px 24px;
}
.nav-side .nav ul li > a:hover {
  background:#eeeeee;
  text-decoration:none;
}
.nav-side .nav ul > li.active > a {
  background:#dddddd;
  color:#000000;
}
.nav-side .nav ul ul > li.active > a {
  background:#eeeeee;
}
.nav-side .nav ul ul ul > li.active > a {
  background:#f5f5f5;
}
.nav-side .nav ul ul > li > a {
  padding-left:36px;
}
.nav-side .nav ul ul ul > li > a {
  padding-left:48px;
}
*/

/*********
 teaser
 *********/
.teaser .thumbnail {
	float: left;
	height: 100px;
	margin: 0px 15px 10px 0px;
	width: 100px;
}

.teaser .thumbnail i {
	display: block;
	height: 100px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.teaser .thumbnail img {
	width: 100%;
}

.teaser .thumbnail+.teaser-content {
	margin-left: 130px;
}

/*********
 misc
 *********/
/* affix */
.nav-side.affix {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/*    top:70px; */
	bottom: auto;
}

.nav-side.affix-bottom {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	position: absolute;
	top: auto;
	bottom: 30px;
}

.btn-bottom-align {
	padding-top: 40px;
}

.btn-bottom-align .btn {
	position: absolute;
	bottom: 10px;
}

.icon-tooltip {
	background-image: url(images/icons/icons-white.png);
	margin-top: -1px;
}

.img-holder {
	margin-bottom: 20px;
}

.img-holder img {
	min-width: 100%;
}

.thumbnail-avatar {
	float: left;
	height: 30px;
	margin: 10px 0;
	width: 30px;
}

.thumbnail-avatar+h5 {
	margin-left: 50px;
}

.thumbnail-avatar ~ p {
	clear: both;
}

.well-mini {
	padding: 8px 0;
}

.well-mini .nav-list .divider {
	margin: 5px -15px;
	*margin: 0 0 10px;
}

.error {
	color: #fff !important;
	background-color: #d9534f !important;
	padding: 3px;
	display: table;
}

/*********
 forms
 *********/
a.btn-download {
    color: #555;
}

.btn .fa {
	margin: 0 6px 0 -6px;
	text-shadow: none;
}

a.btn-lg .fa {
	margin: 0 8px 0 -6px;
	text-shadow: none;
}


.btn-group-xs>.btn .fa, .btn-xs .fa {
	margin: 0 2px 0 -2px;
}

.btn-group-xs>.btn, .btn-xs {
    font-size: 9pt
}

.btn .fa.only-icon {
	margin: 0 -2px 0 -2px;
}


.form-inline .form-control {
	margin-right: 10px;
}

.helpsection {
	opacity: 0.8
}
.helpsection:before {
	display: inline-block;
    font: normal normal normal 14px/1.2 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f05a";
    margin-right: 5px;
	opacity: 0.5;
	float:left;
}
.help-block {
	opacity: 0.75;
}


.btn-main-right, .btn-main-left {
	/*
    position: absolute;
    top: 0px;
*/
	/*
	z-index: 1030; 
*/
	/* higher than mp-modal (1020) (bootstrap modal: 1050) */
	/*	background-color: #46797a; 
	border: none; 
	font-size: 48px;
*/
	/*    
	padding: 10px; 
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
*/
	
}

.btn-main-right .fa-close {
	/*	font-size: 40px; */
	
}

.btn-main-right.active.focus, .btn-main-right.active:focus,
	.btn-main-right.active:hover, .btn-main-right:active.focus,
	.btn-main-right:active:focus, .btn-main-right:active:hover,
	.btn-main-right.focus, .btn-main-right:focus, .btn-main-right:hover,
	.btn-main-right[disabled]:hover, .btn-main-right:active,
	.btn-main-right:visited, .btn-main-left.active.focus, .btn-main-left.active:focus,
	.btn-main-left.active:hover, .btn-main-left:active.focus,
	.btn-main-left:active:focus, .btn-main-left:active:hover,
	.btn-main-left.focus, .btn-main-left:focus, .btn-main-left:hover,
	.btn-main-left[disabled]:hover, .btn-main-left:active, .btn-main-left:visited
	{
	/*
	background-color: #46797a; 
	border: none; 
*/
	
}

.btn-main-right {
	/*
	margin-left: 30px; 
    right: 0px;
*/
	
}

.btn-main-left {
	margin-right: 30px;
	left: 0px;
	position: absolute;
	top: 0px;
	z-index: 1080;
	/* higher than mp-modal (1020) (bootstrap modal: 1050) */
}

.btn-assignment, .btn-assignment, .btn-assignment.active.focus,
	.btn-assignment.active:focus, .btn-assignment.active:hover,
	.btn-assignment:active.focus, .btn-assignment:active:focus,
	.btn-assignment:active:hover, .btn-assignment.focus, .btn-assignment:focus,
	.btn-assignment:hover, .btn-assignment[disabled]:hover, .btn-assignment:active,
	.btn-assignment:visited, .btn-assignment.active.focus, .btn-assignment.active:focus,
	.btn-assignment.active:hover, .btn-assignment:active.focus,
	.btn-assignment:active:focus, .btn-assignment:active:hover,
	.btn-assignment.focus, .btn-assignment:focus, .btn-assignment:hover,
	.btn-assignment[disabled]:hover, .btn-assignment:active,
	.btn-assignment:visited {
	/*
	background: #fcf8e3;
    color: #8a6d3b;
*/
	
}

/*********
 for typography examples only.
 *********/
.the-icons {
	list-style: none;
	margin: 0 0 20px;
}

.the-icons li {
	float: left;
	line-height: 25px;
	width: 25%;
}

.well-transparent {
	background: transparent;
}

.well-white {
	background-color: #fff;
}

.well address:last-child, .well address.last-child, .well blockquote:last-child,
	.well blockquote.last-child, .well ol:last-child, .well ol.last-child,
	.well p:last-child, .well p.last-child, .well table:last-child, .well table.last-child,
	.well ul:last-child, .well ul.last-child, .well .alert:last-child,
	.well .alert.last-child {
	margin-bottom: 0;
}

.well h2:first-child, .well h3:first-child {
	margin-top: 0px;
} 

.rating-disabled {
	cursor: default;
}

.rating-xxs {
    font-size: 1.5em;
}

.jw-tab-focus:focus {
	outline: none;
}

.modal-header .close, .alert .close, .popover .close {
	font-size: 36px;
	opacity: 0.6;
	margin-top: -10px;
}

#bubbles .alert button.close {
	display: none;
}

.modal-header .close {
	font-size: 46px;
}

.modal-header.empty {
	padding: 0 0 10px 0;
	border-bottom: none;
}

.modalBody {
	background: #ffffff;
}

.modal-dialog.modal-lg {
	max-width: 1300px;
	/*
    width: auto;
	margin: auto;
	padding:20px;
*/
}

#fc-modal-content.main, .modalBody.main {
	padding: 0 0 0px 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.modalBody>.row {
	margin-left: 0px;
	margin-right: 0px;
}

.modal-backdrop {
	z-index: 1010; /* low enough for all */
}

#mpModal.modal {
	z-index: 1020; /* lower than buttons (1030) (bootstrap modal: 1050) */
}

#mpModal .modal-dialog.modal-lg {
	padding: 0px;
}

#mpModal .modal-dialog {
	/*
    padding: 0px;
	margin-top: 128px;
	margin-top:25%
*/
	
}

#mpModal .modal-content {
	/*
	background-color: #fff;	
	background: none;	
	background-color: transparent;	
	border: none;
	box-shadow:none;
	webkit-box-shadow:none;
*/
	
}

#mpModal .modal-body {
	padding-top: 0px;
}

#mpModal .modal-header {
	padding-bottom: 5px;
	border-bottom: none;
}

#mpModal.fade {
	
}

.popover {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	z-index: 2000;
	max-width: 500px;
}

.popover-title {
	min-width: 120px;
	font-size: 16px;
	padding: 8px 14px 0px 14px;
	border-bottom: none;
}

.popover-content {
	
}
.popover-content ul {
	margin-top: 10px;
}

.popover .close {
	font-size: 32px;
	opacity: 0.5;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -5px;
	display: none;
}

.displayInteractHolder .popover .close {
	display: block;
}

/* DO NOT USE APOSTROPHES IN COMMENTS !!!!!!!!! */
.main .well.sliderHolder {
	background-color: transparent;
	padding: 10px;
}

/* overrides jquery.loadmask.css */
.masked-relative {
	position: inherit !important;
}

body.masked-relative {
	position: relative !important;
	/* margin-right: 17px; */
}

.SSQformwrap {
	max-width: 900px;
}

.tab-content li {
	margin-bottom: 8px;
}

.form-inline .form-group.list {
	margin-right: 30px;
}

.ajaxmaskicon {
	
}

.ajaxmaskicon.faces {
	
}

/* overrides fc-bootstrap-accessibility.css */
div.active:focus {
    outline: none;
}

td.objectadmin-actions {
	max-width: 200px;
}

/*********
 responsive
 *********/
@media ( min-width : 0px) {
	.SSQ .col-md-3, .SSQ .col-md-9 {
		padding-left: 0px;
		padding-right: 0px;
	}
}

@media ( min-width : 480px) {
	.form-inline .form-group {
		display: inline-block;
		width: auto;
		vertical-align: middle;
	}
	.form-inline .form-group.longchar {
		display: inherit;
	}
	.form-inline .form-group.mySlider {
		display: inherit;
	}
}

@media ( min-width : 768px) {
	.navbar-right ~.navbar-right {
		margin-right: -15px;
	}
	.form-inline .form-group {
		margin-bottom: 15px;
	}
	.form-inline .form-group.mySlider {
		display: inherit;
	}
	.form-inline .checkbox, .form-inline .radio {
		margin-top: 10px;
	}
	.SSQ .col-md-3, .SSQ .col-md-9 {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media ( min-width : 992px) {
	.SSQ .col-md-3 {
		width: auto;
		float: none;
	}

	.SSQ .col-md-9 {
		width: 100%;
	}

	.SSQ .control-group.mySlider > .col-md-3 {
		width: 25%;
		float: left;
	}
	.SSQ .control-group.mySlider > .col-md-9 {
		width: 75%;
	}



	.programmeBody .container {
		max-width: 970px;
	}
	.programmeBody .main {
		max-width: 970px;
		border-radius: 6px;
	}
	.form-inline .form-group.longchar { /*display:-webkit-box;*/
		
	}
	.form-inline .form-group.longchar .controls { /*min-width:100%;*/
		
	}
}

@media ( min-width :1200px) {
	.siteBody .container {
		width: 970px;
	}
	.siteBody .main {
		width: 970px;
		border-radius: 6px;
	}
}

@media ( max-width : 991px) {
	.container {
		/*		width: auto; */
		
	}
	/* CHANGE NAV COLLAPSE BREAKPOINT */
	.navbar-header {
		float: none;
	}
	.navbar-left, .navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-nav {
		float: none !important;
		border: 1px solid #eee;
		margin: 7.5px 0px;
	}
	.navbar-nav>li {
		float: none;
	}
	.nav>li.active>a, .nav>li.active>a:focus, .nav>li.active>a:hover {
		border-bottom: 1px solid #ddd;
	}
	.collapse.in {
		display: block !important;
	}

	.logo {
		margin-bottom: -1px;
		/*    padding:30px 0; */
	}
	.logo .inner {
		padding: 30px 0 30px;
	}
	.programmeBody .logo {
		margin-bottom: -1px;
	}
	.programmeBody .logo .inner {
		padding: 0px 0 0px;
	}
	.logo h1:last-child, .logo h1.last-child {
		margin-bottom: 20px;
	}
	.navbar-fixed-top {
		margin-bottom: 0;
	}
	.nav-side.affix, .nav-side.affix-bottom {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
		position: static;
	}
}

@media ( max-width : 767px) {
	.form-horizontal .form-group {
		margin-left: 0px !important;
	}
	.well .col-xs-12 address:last-child, .well .col-sm-12 address.last-child,
		.well .col-xs-12 blockquote:last-child, .well .col-sm-12 blockquote.last-child,
		.well .col-xs-12 ol:last-child, .well .col-sm-12 ol.last-child, .well .col-xs-12 p:last-child,
		.well .col-sm-12 p.last-child, .well .col-xs-12 table:last-child,
		.well .col-sm-12 table.last-child, .well .col-xs-12 ul:last-child,
		.well .col-sm-12 ul.last-child, .well .col-xs-12 .alert:last-child,
		.well .col-sm-12 .alert.last-child {
		margin-bottom: 15px;
	}
	body.masked-relative {
		margin-right: 0px;
	}

	/* can't use #tab-pane-today as it needs to be relevant for modals */
	.activityDefHolder .page-header h2 {
		font-size: 18pt;
	}
	.modal-title {
		font-size: 16pt;
	}
	#mpModal .modal-body {
		padding: 10px;
		padding-top: 0px;
	}
	#mpModal .modal-header {
		padding: 10px;
		padding-bottom: 5px;
	}
	.brand {
		padding-left: 15px !important;
	}
	.main {
		width: 100%;
	}
	.logo>.container, .main>.container {
		padding: 0 15px;
	}
	.btn-bottom-align {
		margin-bottom: 20px;
		padding-top: 10px;
	}
	.btn-bottom-align .btn {
		position: static;
	}
	.carousel-caption {
		position: relative;
		margin-top: 30px;
		padding-top: 10px;
		padding-bottom: 10px;
		right: 0;
		left: 0;
		bottom: 0;
	}
/*
	.btn+.btn, a.btn+a.btn {
		margin-bottom:15px;
	}
*/
}

@media ( max-width :480px) {
	/* can't use #tab-pane-today as it needs to be relevant for modals */
	.activityDefHolder .page-header h2 {
		font-size: 14pt;
	}
	.modal-title {
		font-size: 12pt;
		line-height: 1.8;
	}
	#mpModal .modal-body {
		padding: 5px;
		padding-top: 0px;
	}
	#mpModal .modal-header {
		padding: 5px;
		padding-bottom: 5px;
	}

	/*
.main .row {
    margin-right: -15px;
    margin-left: -15px;
}
*/
	.brand {
		min-height: 90px;
	}
	.brand img {
		max-width: 260px;
	}
	h1 {
		font-size: 30px;
	}
	.logo h1 {
		font-size: 28px;
	}
	.logo p {
		font-size: 18px;
	}
	.carousel-control {
		top: 35px;
	}
	/*zzzZilvester 07/11/2016 thumbnails are only 100px wide - they look awful when stretched to 280px!
  .teaser .thumbnail {
    float:none;
    width:auto;
  }
  .teaser .thumbnail img {
    min-height:100%;
    position:absolute;
      top:-100%;
  }
*/
	.teaser .thumbnail+.teaser-content {
		margin-left: 0;
	}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
		.table>thead>tr>td, .table>thead>tr>th {
		max-width: 11em !important;
		overflow: hidden;
	}
	
}

@media ( max-width :370px) {
	.brand {
		min-height: 75px;
	}
	.brand img {
		max-width: 230px;
		max-height: 55px;
	}
	#gritter-notice-wrapper {
		right: 3%;
	}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
		.table>thead>tr>td, .table>thead>tr>th {
		padding: 5px;
		max-width: 8em !important;
		overflow: hidden;
	}
	.table {
		zoom: 0.85;
	}
	.modal-dialog {
		margin: 5px;
	}
}

.table-responsive {
	border: 1px solid #ddd;
}

/* override [at]media */
#activityformwrap {
	margin-bottom: 50px;
}

#activityformwrap .buttonHolder {
	display: block;
}

.main-default, .main-assignment, main-cuepoint {
	width: auto;
}

.modal-open {
	position: fixed !important;
	width: 100%;
	overflow: hidden !important;
	-webkit-overflow-scrolling: initial;
}

.modal {
	overflow: hidden !important;
	-webkit-overflow-scrolling: initial;
}

#fcModal .modal-body {
	overflow: auto !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	/*
    overflow: hidden !important;
	-webkit-overflow-scrolling: initial;
	-webkit-overflow-scrolling: touch;
*/
	width: auto;
	min-height: 100px;
	position: relative;
	border: 0;
	padding: 0;
	background: 0;
	zoom: 1;
}

#mp-modal-dialog.modal-lg {
	max-width: none;
	width: auto;
	/*
	margin-left: 17px;
	margin-right: 17px;
*/
	margin-left: auto;
	margin-right: auto;
}

@media ( min-width :1200px) {
	#mp-modal-dialog.modal-lg {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*zzzZilvester 08/11/2016 FINALLY fixed the iOS button in an iframe of a modal positioned 500+?px off bottom of visble screen when initially rendered - on click of button modal merely scrolls to top and nothing else happens!
assuming the element is unable to recieve the box-shadow on :active due to it's being so far off the planet when initially drawn!
*/
.modalBody .btn:active, .modalBody .btn.active {
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	/*
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
*/
}


.webtop .modal-dialog.modal-lg {
	max-width: 1500px;
	width: auto;
	margin: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.mce-container {
	padding-left: 15px;
	padding-right: 15px;
}


.navbar-collapse.in {
    overflow-y: visible;
}


#favourites a {
	display: inline-block;
}

#favourites .favourited {
	padding-right: 2px;
	display: inline-block;
}

#favourites .favourited.active {
	color: #ffff00;
}

#favourites .favourites-toggle {
	padding-left: 2px;
	display: inline-block;
}

#favourites .dropdown-menu .none {
	font-weight: normal;
	color: #333333;
	filter: none;
	padding: 1px 16px;
}

#favourites .dropdown-menu a {
	display: block;
}

.dropdown-menu-2 {
	-webkit-padding-start: 0px;
	padding-left: 0px;
}
.dropdown-menu-2 > li > a {
    text-decoration: none;
    outline: 0;
    padding: 1px 20px;
    display: block;
    clear: both;
    font-weight: 400;
    white-space: nowrap;
}
.dropdown-menu-2>.active>a, .dropdown-menu-2>.active>a:focus, .dropdown-menu-2>.active>a:hover {
    color: #fff;
    background-color: #337ab7;
}
.nav>li:hover>a.favourited {
    color: #ee0033;
}

.dropdown-menu {
	padding: 0px 0px 5px 0px;
}
.dropdown-menu>li>a {
	padding: 5px 20px;
}