/* Style sheet for sticky note feature. Read the comments in the code to find
out why the choices
*/

/* Sticky note should be moved wherever on the page */
body {
	position: relative;
}

.sticky-note-wrapper {
	width: 309px;
	height: 329px;
	background-image: url('/resources/img/sticky-note/sticky-note.png');
	background-repeat: no-repeat;
	position: absolute;
	z-index: 500;
	top: 375px;
	left: 750px;
	margin-top: 15px;
}

.sticky-note-wrapper a {
	color: black;
}

/* Some rotation is applied to the container so thet the text which inherits
to follow the lines on the image */
.sticky-note-container {
	transform: rotate(-6deg);
	-ms-transform:rotate(-6deg);
    -webkit-transform:rotate(-6deg);
	padding-left: 34px;
}

/* Here are some custom styles for the text on the sticky note. They control
the position for one and two lines of text on a row respectively */
.sticky-note-content-one-liner-1 {
	margin-top: 92px;
}

.sticky-note-content-one-liner-2 {
	margin-top: 40px;
}

.sticky-note-content-one-liner-3 {
	margin-top: 36px;
}


.sticky-note-content-two-liner-1 {
	margin-top: 72px;
}

.sticky-note-content-two-liner-2 {
	margin-top: -8px;
}

.sticky-note-content-two-liner-3 {
	margin-top: 25px;
}

.sticky-note-content-title {
	font-size:1.2em;
}

.sticky-note-close {
	float: right;
	margin-right: 60px;
	margin-top: 25px;
	cursor: pointer;
}

/* There are usually two sticky notes on a page, one is for desktop and
and draggable and the other one is for mobile and static.
Based on the width of the screen, one is hidden and the other one is vissible.
Other miscelaneous adaptations were made for mobiles */
@media (max-width: 768px) {
	#sticky-note-1 {
		display: none;
	}
	
	.sticky-note-container {
		max-width: 255px;	
	}
	
	#sticky-note-mobile {
		display: block;
		top: 0px;
		left: 0px;
		position: inherit;
	}
	
	.sticky-note-content-two-liner-1 {
		margin-top: 0;
		padding-top: 72px;
		overflow: auto;
	}
	
	.sticky-note-content-one-liner-1 {
		margin-top: 0;
		padding-top: 92px;
	}
	
	.sticky-note-close {
		overflow: auto;
		margin-right: 45px;
	}

}

@media (min-width: 769px) {
	#sticky-note-1 {
		display: block;
	}
	
	#sticky-note-mobile {
		display: none;	
	}
}

/* Temporary fix for current announcements */
.sticky-note-container {
	max-width: 255px;	
}

.sticky-note-content-two-liner-1 {
	margin-top: 63px;
}

@media (max-width: 768px) {
		.sticky-note-content-two-liner-1 {
		margin-top: -7px;
		padding-top: 66px;
	}
}