/*** custom css ***/

/* http://css-tricks.com/perfect-full-page-background-image/ */
html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	padding-top: 0px;
	font-size: 16px;
	font-family: "Open Sans",serif;
	background: transparent;
	color:#475B44;
}
.update {
  font-size: .6em;
  text-align:center;
  padding-top: 25px;
}

/************  CUSTOM LOGIN SCREEN STYLES ********************/
.container input, button {
  margin-top: 0px;
}
h1.faded {
  color: gray;
  font-size: 3.8em;
}
h2.faded {
  color: gray;
  font-size: 1.8em;
}
.text-lg {
  font-size: 1.6em;
}
.gray-bg {
  background-color: #f3f3f4;
}
.signin {
  max-width: 500px;
  margin: 100px auto 100px auto;
}
.signin input {
  font-size: 1.5em;
  height: 50px !important;
}

.signin-error {
  color:  #d1998f;
  font-size: 1.4em;
  margin-top: 20px;
  text-align: center;
}

a.logout:link, a.logout:visited, a.logout:active {
  color: #9E0000 !important;
  font-weight: bold;
}
a.logout:hover {
  color: red !important;

}

h1,h2,h3,h4, h5{
	color:#475B44;
}
.subhead{
	margin-left: 0px;
	color:red;
}

h1 {
	font-family: "Abel", Arial, sans-serif;
	font-weight: 400;
	font-size: 40px;
}
h4 {
	font-size: 22px; 
	color:#4F96B5;
}

h5 {
  font-size: 18px;
}

h3.colheader {
	margin-top: 0px;
}
.font-sm {
  font-size: 11px;
}

.required {
}

.required::after {
  content: "*";
  color: red;
  margin-left: 5px;
}

.calculated{
  color: green;
  font-weight: bold;
  border-color:green;
}

.manual{
  color: #ED4040;
  font-weight: bold;
  border-color:#ED4040;
}

.blue{
  color:#63AFD0;
}
.red {
  color: #ED4040;
}
.highlight{  
  font-weight: bold;
}

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

.alink {
  cursor: pointer;
}
#searchdocs{
	font-size: 1.6em !important;
  min-height: 50px;
}
.listing{
	margin-top: 35px;
}

.logo {
  /* background: url(../img/mmctuftslogo.jpg) no-repeat right center; */
  width:150px; 
  height:45px;
  display: block;
  float: left;
 }
 #lblCount{
 	display: none;
 	opacity: .8;
 	font-size: .8em;
 }
 .borderbox{
  border: solid 1px gray;
  padding:10px;
 }
.top-buffer-10{
	margin-top:10px;
}
.top-buffer-20{
	margin-top:20px;
}
.top-buffer-30{
	margin-top:30px;
}
.top-buffer-40{
	margin-top:40px;
}
.top-buffer-50{
	margin-top:50px;
}
.right-margin-10{
	margin-right:10px;
}
.right-margin-15{
	margin-right:15px;
}
.right-margin-20{
	margin-right:20px;
}
.bottom-margin-15{
	margin-bottom: 15px;
}
.bottom-margin-30{
  margin-bottom: 30px;
}
.m-left-10{
  margin-left:10px;
}
.m-left-20{
  margin-left:20px;
}

.text-small{
  font-size: 12px !important;
}

.glyphicon-link {
    font-size: 1.8em;
}

.btn-mega{
	font-size: 2.5em;
	margin-left: 15px;
	margin-right:15px;
}
.btn-mega a {
	color:#727272;
}
.btn-mega a:hover {
	color:#5B5B5B;
}

.bigModal{
   width:95%;
   margin:auto;
}

.ol-modal li {
  margin-bottom: 20px;
}


/****  404 page ****/
.frowny-face {
    color: #919191;
    font-size: 130px;
    line-height: 1.1;
    margin-bottom: 70px;
    margin-top: 90px;
    text-align: center;
}
/************ USER NOTIFICATION BANNER ****************/
.jumbotron.notification {
    padding-bottom: 28px;
    padding-top: 8px;
}
.notification {
   left: 180%;
   overflow: hidden;
   position: fixed;
   width: 400px;
   opacity: 0.9;
   z-index: 1050;
   transition: left 0.6s ease-out 0s;
   border:solid 8px #A65800;
}
 
.notification-centered {
   top: 50%;
   transform: translate(-50%, -50%);
}
.notification.in {
   left: 50%;
}
.login-label {
  text-align: left;
  padding-top: 20px;  
}
.navbar-brand {
    /* background: rgba(0, 0, 0, 0) url('../img/logo.png') no-repeat scroll left bottom;  */
    background: url('../img/logo.png');
    height: 60px;
    overflow: hidden;
    width: 300px;
    margin-top: 10px;
}

/***************  END BANNER  *******************/

/***********  menu css  *************************/
.container-full {
    padding: 0px 25px;
}

.navbar-brand {
    float: left;
    font-size: 30px;
    line-height: 20px;
    padding: 15px;
}

.navbar-default {
    background-color: #fff;
    border-bottom: 6px solid #a65800;
}

.navbar {
    margin-bottom: 20px;
    min-height: 50px;
    position: relative;
    z-index: 1000;
}
.navbar-default .navbar-nav > li > a {
    color: #a65800;
}
.navbar-nav > li > a {
    padding-bottom: 15px;
    /* padding-top: 40px; */
}
.navbar-nav > li > a {
    font-size: 16px;
}
.nav > li > a {
    display: block;
    position: relative;
} 
.activelink {
    background-color: #f7f7f7;
    border-bottom: 2px solid #a65800;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
  background-color: #EDEDED;
  border-bottom: solid 1px #FF3100;
  border-bottom: solid 1px #A65800;
  border-bottom-width:2px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  color:#FFF;
  color:#5D2001;
  background-color: transparent;
  background-color: #F7F7F7;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  /*color: #E2403D;*/
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #dddddd;
}

/*************  loading indicator *****************/
.loading{
    /*display:    none;*/
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../img/wait.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .wait_modal {
    display: block;
}
/***********************************************************/
/* Override B3 .panel adding a subtly transparent background */
.panel {
	background-color: rgba(255, 255, 255, 0.75);
}

.margin-base-vertical {
	margin: 20px 0;
}

#documents, #contact, #calendar {
	margin-bottom:350px;
}

#clear:hover{ 
	cursor: pointer;
	color:black;
	background-color: #DDDDDD;
}
.pageTitle{
	background-color: #F9F9F9;
	border:solid 1px #D8D8D8;
	-ms-filter: none;
	min-height: 100px;
}

footer {
	width:100%;
	height:100px;
	/*background:url(../img/mmc_tufts.jpg) no-repeat center;*/
	/*border-top: 1px solid #A65800;*/
}

footer img{
	margin: auto;
}

.secure{
	background: transparent url(../img/lock_icon2.png) center right no-repeat ;
	padding-right: 20px;
}

a[rel="video"] {
    background: transparent url(../img/youtube.png) center right no-repeat ;
    padding-right: 25px;
}
/****  collapsing sections ****/
.accHeader{
  background-attachment: scroll;
    background-clip: border-box;
    background-color: #63AFD0;
  background-position: 98% 45%;
  background-image: url("../img/open.gif");
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-top:10px;
}
.accHeader-small{
	background-attachment: scroll;
    background-clip: border-box;
    background-color: #66A3D2;
    background-color: #4F96B5;
    background-image: url("../img/arrow-square.gif");
    background-position: right -48px;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top:5px;
    margin-right:15px;
}

.accContent{
	padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    border:solid 1px #BFBFBF;
}
.subcontent{
	margin-right: 15px;
	margin-bottom: 10px;
}
.accHeader h2,h3{
	color:#FFF;
}

.accHeader-small h4{
	margin-left:5px;
	color: #fff;
}
.accHeader:hover {
	cursor: pointer;
}
.accHeader-small:hover {
	cursor: pointer;
}
.noarrow{background-image: none;}

.collapse{
	/*visibility: hidden;*/
}
.active {
  background-position: 98% 45%;
  background-image: url("../img/close.gif");
}
/*.active {background-position: right 16px; top: 10px;}*/

.active-small {background-position: right 8px;}

.activelink {
	border-bottom: solid 2px #A65800;
	background-color: #F7F7F7;
}


/********* resident photos *******/
.resident {
  display: inline-block;
	width:19%;
	height:20%;
	padding: 5px 5px;
	border: solid 2px #EFEFEF;
	margin-top: 10px;
	text-align: center;
	border-radius: 0px;
	/*background-color: #F0F1F0;*/
	vertical-align: top;		 
   	position: relative;
}
.resident p {
	line-height: 15px;
}
.resident:hover{
	border-color: #E8E8E8;
	border-width:2px;
}

.resphoto {
	border-radius: 3px;
	width:100%;
	height: 100%
   	overflow: hidden;
}

.resEmPhoto{
	width:100%;
	text-align: center;
	border:solid 1px red;
}


@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .resident {
      width: 100%;
      padding-bottom: 0%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .resident {
      width: 48%;
      padding-bottom: 0%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .resident {
      width: 32%;
      padding-bottom: 0%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .resident {
      width: 19%;
      padding-bottom: 5%;
   }
}