/* General styling */

.messages textarea:focus, .messages input:focus {
	outline: 0px;
}

/* Content Styling */

body#p1-6-6 { padding-top: 60px; }
#p1-6-6 #main_content { margin: 0; }

.messages {
	margin: 0 auto;
	height: 420px;
	height: calc( 100% - 60px );
}
	.message_title {
		display: none;
		margin: 10px 0;
		text-align: center; }

		.message_title h1 {
			margin: 0;
			font-size: 25px;
			font-size: 2.5rem; }

		.pen_new_message {
			display: inline-block;
			border: 1px solid #f60000;
			border-radius: 20px;
			padding: 10px 20px;
			font-size: 15px;
			color: #f60000;
			margin: 10px 0; }

			.pen_new_message:hover {
				text-decoration: none;
			}
	.my_messages {
		list-style-type: none;
		width: 100%;
		border: 1px solid #e8e8e8;
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
	}
		.message_list {
			float: left;
			width: 100%;
		}
			.message_header {
				padding:15px 15px 15px 10px;
				border-bottom: 1px solid #e5e0e0;
				background: #ffffff;
				position: relative;
				background: #f8f8f8;
			}

			.message_header .mobile_new_message {
				float: left;
				width: 39px;
				height: 39px;
				background: #f60000;
				border-radius: 50%;
				margin-right: 20px; }

				.message_header h4, .message_header h4 a {
					color: #999;
					font-size: 15px;
					font-size: 1.5rem;
					float: left;
					line-height: 39px;
				}
				.inbox_nav {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
				}
					
				
				.avatar {
					width: 50px;
					height: 50px;
					float: left;
					margin: 0 10px 0 0;
				}
					.avatar img {
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				.message_subject {
					float: left;
					width: 70%;
				}
					.message_subject p {
						margin: 0;
					}
					.unreadCount {
						font-size: 12px;
						font-size: 1.2rem;
						margin: 5px 0 0 0;
					}

				.messages_list {
					overflow: auto;
				}
				
				.message_list li {
					padding: 20px 10px 20px 15px;
					font-size: 15px;
					font-size: 1.5rem;
					color: #999;
					border-bottom: 1px solid #e5e0e0;
					cursor: pointer;
				}
				.message_list li.read {
					background: #f8f5f5;
				}
				.message_list li.selected {
					-webkit-box-shadow:inset 0 0 10px 2px #e9e6e6;
					box-shadow:inset 0 0 10px 2px #e9e6e6;
				}
				.message_list li:hover {
					-webkit-box-shadow:inset 0 0 10px 2px #e9e6e6;
					box-shadow:inset 0 0 10px 2px #e9e6e6;
				}
					.message_list li a {
						color: #999;
					}
					.message_list li .time {
						float: right;
						font-size: 13px;
						font-size: 1.3rem;
					}
				.message_list li:first-child {
					border-top: 1px solid #e5e0e0;
				}
				.message_list li.unread, .message_list li.reply_unread {
					background: #ffffff;
					-webkit-box-shadow:inset 5px 0 0 0 #f60000;
					box-shadow:inset 5px 0 0 0 #f60000;
				}
					
				
			.inbox_nav li:first-child {
				border-top: 0px solid #fff;
			}
			.inbox_nav .dropdown {
				display: none;
				background: #efebec;
				border-right: 1px solid #e5e0e0;
				border-left: 1px solid #e5e0e0;
				border-bottom: 1px solid #e5e0e0;
			}
			.inbox_nav li {
				border-bottom: 0;
				font-size: 13px;
				line-height: 39px;
				padding: 17px 35px 15px 15px;
				position: relative;
			}
			.inbox_nav li:hover {
				-webkit-box-shadow: none;
				box-shadow: none;
				background: #f9f5f6;
			}
			.inbox_nav li a:hover {
				text-decoration: none;
			}
			.inbox_nav:hover .dropdown {
				display: block;
			}
			.inbox_nav li span {
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #e0e0e0;
				height: 0;
				width: 0;
				position: absolute; 
				top: 33px ;
				right: 16px;
			}
			
			
			.send_search {
				text-indent: -10000px;
			}
			.search_messages  .search {
				display: block;
				background: #fff;
				padding: 12px 30px;
				height: 20px;
			}
			.search_messages .search input[type="text"] {
				width: 75%;
				background: #fff;
				height: auto;
				text-align: left;
				border: none;
				font-size: 15px;
				font-size: 1.5rem;
				color: #d8d0d0;
				padding: 0;
			}
			.search_messages .search input[type="submit"] {
				width: 18px;
				height: 18px;
				margin: 0;
				line-height: normal;
				padding: 0;
				border: none;
				border-radius: 0;
				background-color: transparent;
				background-position: -216px -15px;
			}
				
		.message_details {
			float: left;
			width: 100%;
			color: #999;
			display: none;
		}
			.conversation_header {
				margin:0;
				font-size: 15px;
				font-size: 1.5rem;
				font-weight: normal;
			}

				.conversation_header .convo_with { display: none; }
				.conversation_header .convo_with span {
					font-weight: bold;
				}
				.conversation_header a {
					float: left;
					color: #999;
				}
				.conversation_header a:hover {
					text-decoration: none;
					opacity: 0.5;
				}
			.message_details .hide {
				display: none;
			}
			.msg_output {
				position: relative;
				border-left: 1px solid #e5e0e0;
			}

			.new_message_form .send_to {
				height: 30px; 
				font-size: 14px;
				font-size: 1.4rem; }

			.new_message_form #reply_msg { 
				height: 100px;
				width: 95%; }

			.msg_time_line { position: relative; }

			.msg_output ul {
				background: #fff;
				height: 460px;
				overflow: auto;
			}
			.msg_output ul li {
				overflow: hidden;
				padding: 10px 20px;
				font-size: 15px;
				font-size: 1.5rem;
			}
			.msg_time_line p {
				float:left;
				width: 88%;
				margin: 0 0 5px 0;
			}
			.msg_time_line .msgInfo {
				width: 75%;
			}
			.msg_time_line .msgContent {
				clear: left;
				width: 80%;
				margin: 0 0 5px 50px;
			}

			.msg_time_line li .time {
				
				font-size: 13px;
				font-size: 1.3rem;
			}
			.msg_time_line .avatar {
				width: 40px;
				height: 40px;
			}
			.reply_box {
				padding: 10px;
				background: #f7f7f7;
				border-top: 1px solid #e5e0e0;
			}
				.reply_message {
					background: #ffffff;
				}
					.reply_message textarea, #reply_msg {
						width:66%;
						background: #fff;
						padding:2%;
						border: 0px;
						font-size: 15px;
						font-size: 1.5rem;
						min-height: 45px;
					}
					.reply_message  input[type="submit"] {
						float: right;
						margin-top: 10px;
						margin-right: 10px;
						margin-bottom: 10px;
						width: 25%;
						padding: 0;
					}
		.send_message {
			float: left;
			width: 100%;
			color: #999;
		}	

		.send_message .errorList {
			font-size: 14px;
			font-size: 1.4rem;
			color: #f60000;
			font-weight: bold;
			padding: 5px;
		}

			.send_message fieldset {
				padding: 10px 0 0 20px;	
				border-bottom: 0px solid #fff;
				margin-bottom: 10px;
			}
			.sendingto {
			}
				.send_message fieldset label {
					font-size: 14px;
					font-size: 1.4rem;
					margin: 0 10px 0 0;
				}
				.send_message fieldset input {
					border: 0px;
					background: #ffffff;
					text-align: left;
				}
				.send_message fieldset input:focus {
					outline: 0px;
				}
				.send_msg {
					float: right;
					margin-top: 15px;
					margin-right: 15px;
					margin-bottom: 15px;
				}
				.penpal_autocomplete ul {
					max-height: 140px;
				}
				.penpal_autocomplete .ui-menu-item a {
					font-size: 14px;
					font-size: 1.4rem;
					margin-bottom: 0;
				}
				.penpal_autocomplete a {
					font-size: 14px;
					font-size: 1.4rem;
					padding: 0;
					width: 75%;
					margin-bottom: 10px;
					background: #ffffff;
					text-align: left;
					display: inline-block;
					color: #999;
				}
				
/* Notifications */
.user_alerts {
	/*position: relative;*/
}
	.notification_bubble, .message_bubble {
		position: absolute;
		top: 70px;
		background: #c6b6b6;
		-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
		-webkit-border-top-left-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-moz-border-radius-topright: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 10px;
		width: 250px;
	}
	.notification_bubble {
		right: 20px;
		display: none; }

	.message_bubble {
		right: 20px;
		display: none;
	}
		.notification_arrow {
			background: url('/images/bubble-arrow.png') no-repeat;
			height: 15px;
			width: 28px;
			position: absolute;
			top: -15px;
			left: 58%;
		}
		.notification_bubble ul, .message_bubble ul {
			height: 300px;
			overflow: hidden;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
			.notification_bubble ul  li .avatar, .message_bubble ul  li .avatar {
				width: 40px;
				height: 40px;
			}
			.notification_bubble ul  li p {
				margin: 0 0 0 56px;
				font-size: 13px;
				font-size: 1.3rem;
			}
		.view_all_notifications {
			background-color: #efebec;
			width: 100%;
			font-size: 13px;
			font-size: 1.3rem;
			color: #999999;
			padding: 10px 0;
			display: block;
			text-align: center;
		}
		.notification_bubble .update_list li {
			border-bottom: 1px solid #d7d7d7;
		}
		.notification_bubble .update_list .noUpdates { 
			font-size: 13px;
			font-size: 1.3rem;
			color: #999;
			cursor: default; }
		
	.bubble_open {
		display: block;
	}
		.message_bubble ul li {
			cursor: pointer;
			padding: 20px;
			border-bottom: 1px solid #d7d7d7;
			background: #f5f1f0;
		}
		.message_bubble ul li.unread {
			background: #ffffff;
		}
		.message_bubble ul  li p {
			font-size: 13px;
			font-size: 1.3rem;
			color: #999;
		}
		.message_bubble ul  li a {
			color: #999;
		}
		.message_arrow {
			background: url('/images/bubble-arrow.png') no-repeat;
			height: 15px;
			width: 28px;
			position: absolute;
			top: -15px;
			left: 74%;
		}
		.message_bubble ul li .time {
			padding: 5px 0 0 0;
			font-size: 13px;
			font-size: 1.3rem;
			color: #999;
		}
		.message_bubble .no-messages {
			font-size: 13px;
			font-size: 1.3rem;
			color: #999;
			cursor: default; }



/*scroll bar*/


/* send notifications */
.userMessage {
  display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 96%;
	padding: 0 2%;
	height: 42px;
	background: #d5e7b5;
	z-index: 50000;
	border-bottom: 1px solid #999;
	color: #899f61;
}
	.userMessage p {
		float: left;
		line-height: 40px;
		padding: 0 0 0 10px;
		color: #899f61;
		font-size: 12px;
		margin: 0;
	}

		.userMessage p a {
			color: #899f61;
		}



/* calendar */

.full_calendar {
	text-align:center;
	font-size: 18px;
	font-size: 1.8rem;
	color: #f60000;
}

.pickmeup {
  background: transparent;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: none;
  position: absolute;
  margin-top: 75px; }
  .pickmeup * {
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .pickmeup .pmu-instance {
    display: inline-block;
    height: 50%;
    padding: 20px;
    text-align: center;
    width: 475px; }
    .pickmeup .pmu-instance .pmu-button {
      color: #f60000;
      cursor: pointer;
      outline: none;
      text-decoration: none; }
    .pickmeup .pmu-instance .pmu-today {
      background: #f60000;
      color: #fff; }
    .pickmeup .pmu-instance .pmu-button:hover {
      opacity: 0.5; }
    .pickmeup .pmu-instance .pmu-not-in-month {
      color: #f59292;
			opacity: 0.5; }
    .pickmeup .pmu-instance .pmu-disabled,
    .pickmeup .pmu-instance .pmu-disabled:hover {
      color: #333333;
      cursor: default; }
    .pickmeup .pmu-instance .pmu-selected {
      background: #f60000;
      color: #ffffff; }
    .pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {
      background: #f60000; }
    .pickmeup .pmu-instance .next_calendar_arrows {
      color: #f60000;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      line-height: 2em; }
      .pickmeup .pmu-instance .next_calendar_arrows *:first-child :hover {
        color: #88c5eb; }
      .pickmeup .pmu-instance .next_calendar_arrows .pmu-prev,
      .pickmeup .pmu-instance .next_calendar_arrows .pmu-next {
        display: none;
        height: 80px;
        width: 25px; }
      .pickmeup .pmu-instance .next_calendar_arrows .pmu-month {
        width: 14em; }
    .pickmeup .pmu-instance .pmu-years *,
    .pickmeup .pmu-instance .pmu-months * {
      display: inline-block;
      line-height: 3.6em;
      width: 3.5em; }
    .pickmeup .pmu-instance .pmu-day-of-week {
      color: #f60000;
      cursor: default;
			padding: 20px 0 5px 0; }
    .pickmeup .pmu-instance .pmu-day-of-week *,
    .pickmeup .pmu-instance .pmu-days * {
      display: inline-block;
      line-height: 62px;
      width: 62px; }
    .pickmeup .pmu-instance .pmu-day-of-week * {
      line-height: 1.8em; }
  .pickmeup .pmu-instance:first-child .pmu-prev,
  .pickmeup .pmu-instance:last-child .pmu-next {
    display: block; }
  .pickmeup .pmu-instance:first-child .pmu-month,
  .pickmeup .pmu-instance:last-child .pmu-month {
    width: 13em;
		font-size: 18px;
		font-size: 1.8rem; }
  .pickmeup .pmu-instance:first-child:last-child .pmu-month {
    width: 100%;
		font-size: 26px;
		font-size: 2.6rem; }
  .pickmeup:not(.pmu-view-days) .pmu-days, .pickmeup:not(.pmu-view-days) .pmu-day-of-week, .pickmeup:not(.pmu-view-months) .pmu-months, .pickmeup:not(.pmu-view-years) .pmu-years {
    display: none; }
	.pmu-days .pmu-button {
		border-left: 1px solid #f60000;
		border-top: 1px solid #f60000;
	}
	.pmu-days {
		border-bottom: 1px solid #f60000;
		border-right: 1px solid #f60000;
		background-color: #ffffff;
		background-color: rgba(255,255,255,0.7);
	}
	.pmu-day-of-week {
		font-size: 15px;
		font-size: 1.5rem;
	}
	.pmu-prev {
		position: absolute;
		top: 46%;
		left: -60px;
		background-position: -900px -145px;
	}
	.pmu-next {
		position: absolute;
		top: 46%;
		right: -60px;
		background-position: -950px -145px;
	}
	
	
	
/* other bits */
.journal_date_bar li.selected {
	background: #f60000;
	position: relative;
}
	.journal_date_bar li a.selected { 
		color: #fff;
	}
	.journal_date_bar {
		background: #f7f7f7;
		padding: 0 0 6px 0;
	}
	.bar_inner .month_select {
		background: #eeebeb;
	}
	
	

@media screen and (min-width: 480px) {
	

	.message_title h1 { float: left; }

	.pen_new_message { float: right; }

	.user_alerts { position: relative; }

	.message_subject {
		width: 75%;
	}
	
	.notification_bubble { right: -35px; }
	.message_bubble { right: -35px; }
	
}

@media screen and (min-width: 769px) {


body#p1-6-6 { padding-top: 110px; }

	.messages {
		margin: 0 auto 50px auto;
	}

	.message_header { background: #fff; }
	.message_header .mobile_new_message { display: none; }
	.message_header h4, .message_header h4 a { line-height: normal; }

	.message_title { display: block; }

	.message_title h1 { 
		font-size: 45px;
		font-size: 4.5rem; }

	.msg_time_line li .time { 
		float: right; }

	.notification_bubble ul, .message_bubble ul {
		height: 360px;
	}

	.inbox_nav li { line-height: normal; }
	.inbox_nav li span { top: 23px; }

	.conversation_header .convo_with { display: block; }
	.conversation_header a { float: right; }

	.view_all_notifications { padding: 20px 0; }

	.month_select .selected span {
		position: absolute;
		left: 43% ;
		bottom: -4px;
	    border-left: 4px solid transparent;
	    border-right: 4px solid transparent;
	    border-top: 4px solid #f60000;
	    height: 0;
	    width: 0; }

	.message_list {
		height: 600px;
		width: 30%;
		display: block;
	}
	.message_details {
		width: 70%;
		display: block;
	}
	.send_message {
		width: 70%;
	}
	.avatar {
		width: 45px;
		height: 45px;
	}
	.message_subject {
		width: 68%;
	}
	.message_list li {
		font-size: 13px;
		font-size: 1.3rem;
	}
	.message_list li .time {
		font-size: 12px;
		font-size: 1.2rem;
	}
	.conversation_header a {
		display: none;
	}
	.message_header {
		height: 65px;
	}
	.message_header h4 {
		width: 100%;
	}
	.message_header .inbox_nav {
		width: 100%;
		top: 45px;
	}

	.notification_bubble, .message_bubble {
		top: 90px;
		right: -35px;
		width: 290px;
	}

	.notification_bubble { right: -20px; }

}

@media screen and (min-width: 980px) {
	.msg_time_line .msgInfo {
		width: 90%;
	}
	.msg_time_line .msgContent { width: 90%; }

	.messages {
		max-width: 980px;
	}
	.message_list li {
		font-size: 15px;
		font-size: 1.5rem;
	}
	.message_list li .time {
		font-size: 13px;
		font-size: 1.3rem;
	}
	.message_list .inbox_nav li {
		font-size: 13px;
		font-size: 1.3rem;
	}
	.avatar {
		width: 60px;
		height: 60px;
		float: left;
		margin: 0 10px 0 0;
	}
	.message_header {
		height: auto;
	}
	.message_header h4 {
		width: auto;
	}
	.message_header .inbox_nav {
		width: auto;
		top: 0;
	}
	.notification_bubble {
		left: -5px;
	}
	.message_bubble { left: 54px; }
	.message_notification {
		right: 0;
	}
	.notification_arrow, .message_arrow { left: 23px; }
		
}