@import "compass/css3/border-radius";
@import "base";
@import "compass/reset";

// Metaframes SCSS

@-webkit-keyframes growHeight {
  to { 
    max-height: 100%;
    opacity: 1;
	padding-bottom: 1em;
  }
}

@-moz-keyframes growHeight {
  to { 
    max-height: 100%;
    opacity: 1;
	padding-bottom: 1em;
  }
}

@keyframes growHeight {
  to { 
    max-height: 100%;
    opacity: 1;
	padding-bottom: 1em;
  }
}


// Note anchor

body {
//	counter-reset: notesCounter;
	font-family: Arial, Helvetica, san-serif;

	.hide 
	{
	display: none;
	}

.notes-anchor 
{
width: 45px;
height: 36px;
display: block;
@include button-gradient;
cursor: pointer;
position: absolute;
@include border-radius(50px);
z-index: 95;
color: #fff;
box-shadow: 1px 3px 7px 0 #333;
font-weight: 600;
margin-top: -10px;
margin-left: -10px;
text-align: center;
padding: 10px 0 0 0 !important;

	figure 
	{
	// counter-increment: notesCounter;
	font-size: 26px;
	line-height: 100%;

		&:before 
		{
		// content: counter(notesCounter);
		}
	}
}

// Main panel
.notes 
{
width: 300px;
position: fixed;
z-index: 99;
top: 0;
background: $notes-panel;
border-left: 10px solid #00b7ea;
opacity: .98;
height: 100%;
color: #fff;
padding: 15px;
overflow: auto;
right: -330px;
	
	// Grey Title
	h1 { @include main-tytle-style; }

	// Blue Title
	h2 { @include sub-title-style; }

	// Note listing

	.note-holder 
	{
	padding-bottom: 25px;
	width: 95%;
	}

	.note-count 
	{
	width: 20px;
	height: 24px;
	display: block;
	float: left;
	@include border-radius(24px);
	@include button-gradient;
	z-index: 95;
	color: #fff;
	box-shadow: 0 0px 15px 0 #333;
	font-weight: 600;
	text-align: center;
	padding: 5px 5px 0px 5px;
	margin-right: 10px;
	top: -5px;
	position: relative;

	}
	span 
	{
	color: #fff;
	}

	#noteBox 
	{
	margin-top: 20px;
	}

		.note-body 
		{
		display: block;
		font-family: Arial, Helvetica, san-serif;
		display: block;
		line-height: 1.4em;
		padding-left: 45px;
		}
}

// "View notes" Tab

.notes-tab 
{
	position: fixed;
	z-index: 99;
	background-color: #00b7ea;
	display: block;
	width: 25px;
	padding-top: 10px;
	padding-left: 10px;
	top: 50%;
	right: 10px;
	@include border-left-radius(10px);
	height: 70px;
	background-image: url(../images/notes-v.png);
	background-position: 15px 17px;
	background-repeat: no-repeat;
	color: #fff;
	text-decoration: none;
}

h2.mf-comments-header {
	padding-bottom: 0px;
}

#metaframe-form {
	font-size: .9em;
    padding-bottom: 1em;
    input[type=text], textarea {
		font-size: 1.2em;
		font-family: Arial, Helvetica, san-serif;
        width: 95%;
		border: 2px solid #ccc;
		box-shadow: inset 0 1px 3px #ddd;
		padding: .5em .6em;
		margin-bottom: .2em;

		&:focus {
			border-color: $blue-title;
		}
    }
	textarea {
		height: 10em;
	}
    input[type=submit] {
        color: #fff;
		font-size: 1em;
        background-color: $blue-title;
        padding: .6em 1em;
		border: 1px solid $blue-title;
		border-radius: 5px;
        &:active {
            border: 1px solid #fff;
        }
    }
	.shift-enter-submit {
		padding-left: 1em;
		color: #999696;
	}
    &.error {
        input[type=text], textarea {
            border-color: #d13636;
        }
    }
}
#metaframe-form-error {
    color: #d13636;
    height: 1em;
    font-size: 1em;
}

.mf-comments {
	-webkit-transition: all 2s ease;
	transition: all 2s ease;
	position: relative;
	line-height: 1.4em;
	margin-bottom: 2em;

    div {
		/*padding-top: 1em;*/
		/*padding-bottom: 1em;*/ 
		max-height: 0;
		opacity: 0;
		-webkit-animation: growHeight 0.5s ease forwards;
		-moz-animation: growHeight 0.5s ease forwards;
		animation: growHeight 0.5s ease forwards;
		line-height: 1.4em;

        span.mf-comment {
            font-size: 1em;
			display: block;
        }
        span.mf-comment-user {
            font-size: .8em;
            color: #999696;
        }
        span.mf-comment-timestamp {
            font-size: .8em;
			padding-left: 1em;
			color: #999696;
        }

    }
}

// Media querie to push notes to bottom of page below 700px

	@media screen and (max-width: $notes) 
	{
		// Main panel

		.bottom { right: auto !important;}

		.notes
		{
			width: 100%;
			height: 300px;
			bottom: -330px;
			right: auto;
			overflow: auto;
			top: auto;
			border-top: 10px solid #00b7ea;
			border-left: none;
		}

		// "View notes" Tab

		.notes-tab 
		{
		width: 100px;
		height: 5px;
		bottom: 10px;
		background-image: url(../images/notes-h.png);
		background-position: 25px 15px;
		left: 40%;
		text-align: center;
		padding: 15px 0 10px 0;
		top: auto;
		border-bottom-left-radius: 0 !important;
		@include border-top-radius(10px);
		right: auto;
		}

		#metaframe-form {
		    input[type=text], textarea {
		        width: 85%;
			}
		}
	} 


	// ScrollBar colors

	::-webkit-scrollbar {
	    width: 12px;
	}
	 
	// Track 
	::-webkit-scrollbar-track 
	{
	-webkit-box-shadow: inset 0 0 6px #333; 
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}
	 
	// Handle 
	::-webkit-scrollbar-thumb 
	{
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #666; 
	}
	::-webkit-scrollbar-thumb:window-inactive 
	{
	background: #CCC; 
	}
}

.lt-ie9 {
	.mf-comments {

		div {
			max-height: 100%;
			padding-bottom: 1em;
		}
	}
}

