/* CSS Document */

/* site wide common css (desktop+mobile) */

/* force scrollbars on OSX (affects safari) */
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
/* end force scrollbars */


/* ------------ COMMON PICTURE DISPLAY --------------*/

.jal-image-comments {
	padding-left:3px;
	padding-right:10px;
	padding-top:4px;
	color:#bbb;
	font-size:0.9em;
}

.jal-image-comments-expanded {
	position:absolute;
	bottom:0px;
	right:10px;
	left:10px;

	margin:10px;
	padding:10px;
	background-color:#333;
	box-shadow: 5px 5px 20px black;
	border:1px solid #222;
	font-size:1.1em;
	z-index:1001;
}

.jal-image-comments .status-field {
	font-size:0.9em;	
}

.jal-image-comments .status-field i {
	font-size:1.2em;	
}
	
.jal-image-comments .status-pending-icon {
	height:10px;
}

.jal-image-comments .comment-using-dropdown {
	float:right;
}

.jal-image-comments .comment-dropdown {
	display:inline;
}

.jal-image-comments .btn {
	padding-top:2px;
	padding-left:4px;
	padding-bottom:2px;
	padding-right:4px;
	font-size:0.9em;
	width:auto;
	margin-top:0;
	background-color: #ddd; /* or else shows dark on ios */
	color: #111;
}



.jal-image-comments .inner-comment-button {
	display:none;
}

.jal-image-comments .dropdown-menu {
	min-width:inherit;
}
	
.jal-image-comments .dropdown ul li {
	font-size:0.8em;
}

.jal-image-comments .message-field {
	clear:both;
}

.jal-image-comments .message-field-grayed-out {
	/* nothing right now - figure out better solution opacity: 0.4; */
}
	
.jal-image-comments .ui-input-text {
	margin:0;
}
	
.jal-image-comments textarea {
	resize:none;
	width:100%;
	border:1px solid #444;
	background-color: #ddd;
	margin-top: 3px;
	padding: 3px;
	min-height:40px;
	color:#111;
}


.jal-image-comments .comment-entry {
	border-top: 1px solid rgba(128,128,128,0.3);
	margin-top:5px;
	margin-right:10px;
	padding-top:3px;
	color:#bbb;
}

.jal-image-comments .close-button {
	cursor: pointer;
}

.jal-image-comments .sign-out-link {
	cursor: pointer;
}

.jal-image-comments .add-comment {
	float:right;
	margin-top:4px;
	margin-bottom:4px;
}

.jal-image-comments .chars-remaining {
}

.jal-image-comments .chars-remaining .number-field{
	color:#3C6;
}

.jal-image-comments .chars-remaining .number-field-red {
	color:#C00;
}

.jal-image-comments-expanded .comments-list {
	max-height:150px;
	overflow-y:auto;
}

/* target any mobile device =============== -> */

.jal-image-comments-expanded.jal-mobile {
	position:fixed;
	bottom:0;
	right:0;
	left:0;
	margin:0;
}

.jal-image-comments-expanded.jal-mobile .add-comment {
	margin-top:5px;
	margin-bottom:0px;
}

.jal-image-comments-expanded.jal-mobile .comment-using-dropdown {
	margin-bottom:2px;
}

.jal-image-comments-expanded.jal-mobile .comment-using-dropdown .dropdown-menu {
	font-size:1.1em;
}

	
.jal-image-comments-expanded.jal-mobile .comments-list {
	overflow-y:auto;
}
	
.jal-mobile.jal-image-comments-input-focused.jal-image-comments-expanded {
	padding:3px;
}

/* no comments list on mobile when virtual keyboard is up */
.jal-mobile.jal-image-comments-input-focused .comments-list {
	display:none;
}

.jal-only-highlight {
	color:#bb3333;
	font-weight:bold;
	font-style:italic;
}

/* target mobile devices with an especially narrow height (e.g. phones in landscape) */
@media all and (max-height: 161px) {
	
	.jal-mobile.jal-image-comments-input-focused.jal-image-comments-expanded {
		padding:0;
		top:0;
		height:100px;
	}
	
	/* with narrow verticla heights on mobile when virtual keyboard is up */
	.jal-mobile.jal-image-comments-input-focused textarea {
		height:100% !important;
		width:78%;
		display:inline;
		margin:0;
		padding:0;
	}

	.jal-mobile.jal-image-comments-input-focused .add-comment {
		display:none;
	}
	
	.jal-mobile.jal-image-comments-input-focused .chars-remaining {
		display:none;
	}
	
	.jal-mobile.jal-image-comments-input-focused .num-comments {
		display:none;
	}
	
	.jal-mobile.jal-image-comments-input-focused .comment-using-dropdown {
		display:none;
	}
	
	.jal-mobile.jal-image-comments-input-focused .inner-comment-button {
		display:inline;
		width:20%;
		height:100%;
	}
}

/* ------------ END COMMON PICTURE DISPLAY --------------*/


/* ------------ START COMMON PICTURE INFO WIDGET --------------*/

.jal-picture-info-label {
	color:rgb(111, 162, 202);
}

/* ------------ END COMMON PICTURE INFO WIDGET --------------*/