/*

Tog's scrappy working file.
Page-specific stuff that doesn't really belong anywhere else

*/






.workshop-book-entry{
	text-align:left;
	padding:30px 20px;
	display:inline-block;
	width:90%;
	min-width:300px;
}
.workshop-book-entry .book-name{
	font-family:PT Serif;
	font-size:1.4em;
	text-decoration:none;
	display:inline-block;
	padding-bottom:10px;
}
.workshop-book-entry .book-author{
	font-family:PT Serif;
	font-size:1.1em;
	text-decoration:none;
	color:#808080;
	display:block;
	padding-bottom:5px;
}
.workshop-book-entry .book-desc{
	font-family:PT Serif;
	font-style:oblique;
	color:#4d4d4d;
	width:100%;
}
.workshop-book-entry .book-icon{
	display:inline-block;
	vertical-align:middle;
	padding:0 20px;
	margin-bottom:-10px;
	width:130px;
}
.workshop-book-entry .book-spacer{
	width:50px; display:table-cell
}




.workshop-update-entry{
	text-align:left;
	display:inline-block;
	width:90%;
	min-width:300px;
	margin-bottom:30px;
}
.workshop-update-entry .update-title{
	font-size:1.3em;
}
.workshop-update-entry .update-date{
	font-size:0.75em;
}


.workshop-critique-entry,
.bookpage-critique-entry{
	text-align:left;
	display:inline-block;
	width:350px;
	margin:10px;
	margin-bottom:30px;
	background:white;
	border:solid 1px rgba(0,0,0,0.2);
	padding:10px;
	vertical-align:top;

	display:inline-block; width:40%; min-width:300px; padding:10px; border:1px solid rgba(0,0,0,0.1); box-shadow:0 2px 5px rgba(0,0,0,0.1); background:white; vertical-align:top;
}
.workshop-critique-entry .critique-title,
.bookpage-critique-entry .critique-title{
	font-size:1.2em;
	color:black;
	font-style:oblique;
	font-family:PT Serif;
	vertical-align:middle;
	display:inline-block;
	padding:10px;
}

.workshop-critique-entry .critique-spec,
.bookpage-critique-entry .critique-spec{
	padding-left:20px;
}

.workshop-critique-entry .buttons-panel,
.bookpage-critique-entry .buttons-panel{
	width:auto;
}



.workshop-published-entry{
	text-align:left;
	display:inline-block;
	width:90%;
	min-width:300px;
	margin-bottom:30px;
	background:#f3f3f3;
	border:solid 1px rgba(0,0,0,0.2);
	border-radius:5px;
	padding:10px;
}
.workshop-published-entry .published-title{
	font-size:1.2em;
	color:black;
	font-style:oblique;
	font-family:PT Serif;
	vertical-align:middle;
	display:inline-block;
	padding:10px;
}

.workshop-published-entry .published-spec{
	padding-left:20px;
}




.book-page .cover1{
	display:inline-block; width:40%; min-width:300px; min-height:500px; padding:80px 30px 10px 30px; border:1px solid rgba(0,0,0,0.1); box-shadow:0 2px 5px rgba(0,0,0,0.1); background:white; vertical-align:top;
}
.book-page .cover2{
	display:inline-block; width:40%; min-width:300px; padding:20px 30px 10px 30px; border:1px solid rgba(0,0,0,0.1); background:#f3f3f3; vertical-align:top;
}
.book-page .book-title,
.book-page .book-title-edit,
.book-review .book-title{
	font-family:PT Serif;
	font-size:1.7em;
	line-height:1.3;
	text-decoration:none;
	display:inline-block;
	padding-bottom:20px;
	color:black;
	display:inline-block;
	/text-align:left;
}
.book-page .book-author
/*.book-review .book-author*/{
	font-family:PT Serif;
	font-size:1.1em;
	text-decoration:none;
	color:#808080;
	display:block;
	padding-bottom:5px;
}
.book-page .book-desc,
.book-page .book-desc-edit{
	font-family:PT Serif;
	font-style:oblique;
	color:#4d4d4d;
	width:90%;
	min-width:200px;
	text-align:left;
	/font-size:1.1em;
	display:inline-block;
}
.book-page .book-synopsis,
.book-page .book-synopsis-edit,
.book-review .message-section{
	font-family:PT Serif;
	font-style:oblique;
	color:#777;
	width:100%;
	text-align:left;
	font-size:0.9em;
}







.app-icon{
	margin:20px; padding:10px; position:relative;
}
.app-icon:hover{
	background:rgba(0,0,0,0.05);
	border-radius:5px;
}
.app-icon-buttons{
	right:20px; top:30px;
	position: absolute;
}


/* Know Thyself stuff */
.rendered-interview{
	display:inline-block;
	text-align:left;
	width:80%;
	min-width:300px;
}
.interview-question{
	text-align:left;
	padding: 20px;
	display:inline-block;
	width:80%;
	min-width:300px;
}
.interview-question .question,
.rendered-interview-question .question{
	font-style:oblique;
	font-size:1.1em;
	color:black;
}
.interview-question .answer{
	box-sizing:border-box;
	width:100%;
	padding:10px;
}


.simple-app-title,
input.simple-app-title{
	width:60%;
	min-width:300px;
	font-size:1.2em;
}


/* Scrawl */

#scrawl .scrawl-wordcount,
#scrawl .scrawl-timer{
	display:inline-block;
	font-family:PT Serif;
	color:black;
	font-size:1.4em;
	vertical-align:middle;
	padding-right:10px;
	line-height:70px;
}

#scrawl .about-to-explode .scrawl-timer{
	color:red;
}



.scrawl-document{
	border:none; background:none; min-height:500px; display:block; padding:60px; font-size:1.1em; font-family:PT Serif; text-align:left; outline:none;
}

.scrawl-document[editor_width=page]{
	min-width:300px;
	max-width:820px;
}
.scrawl-document[editor_width=full]{
	min-width:300px;
	width:100%;
}
.scrawl-document[editor_width=column]{
	min-width:300px;
	max-width:520px;
}


.scrawl-document h2{
	padding:20px 0;
	margin:0;
	margin-top:100px;
	text-align:left;
	color:#333;
	font-size:2em;
	line-height:1.8em;
}
.scrawl-document h2:after{
	content:'';
	width:100%;
	display:block;
	border-bottom:1px solid rgba(0,0,0,0.2);
	margin-bottom:20px;
	padding-top:20px;
}

.scrawl-document strong{
	font-weight:bold;
}
.scrawl-document em{
	font-style:italic;
}
.scrawl-document sup{
	font-size:0.7em;
	top:-0.5em;
	position: relative;
}
.scrawl-document sub{
	font-size:0.7em;
	top:0.5em;
	position: relative;
}



.chapters-list h2{
	padding:10px; margin:0; text-align:left;
	font-size:1.3em; color:#555;
	cursor:pointer;
}
.chapters-list h2:hover{
	opacity:0.8;
}

.game-bars{
	text-align:left;
	display: block;
	clear: both;
	margin: -15px;
	margin-right:0;
	padding-top:5px;
}
.slow-bar{
	width:0;
	height:10px;
	background:rgba(0,0,0,0.9);
}
.fast-bar{
	width:0;
	height:10px;
	background:rgba(0,0,0,0.2);
}


.taskmaster-icon{
	display:inline-block;
	background:url('../img/hourglass inkblot small.png') center center;
	background-size: 60px 70px;
	height:70px;
	width:60px;
}
.about-to-explode .taskmaster-icon{
	background:url('../img/hourglass inkblot small red.png') center center;
	background-size: 60px 70px;
	height:70px;
	width:60px;
}
.screaming .taskmaster-icon{
	background:url('../img/hourglass inkblot small white.png') center center;
	background-size: 60px 70px;
	height:70px;
	width:60px;
}

.app-menu.screaming{
	background:red;
}



/* tinymce is an obnoxious little shit and thinks it knows better than we do how it should be styled. */
#mceu_13{
	position: fixed !important;
	bottom: 0 !important;
	background: #eee;
	width:100%;
	max-width:1023px;
}
.mce-edit-focus{
	outline: none !important;
}









/* timeline */
/.character{
	display:inline-block;
	padding:3px; margin:3px;
}
/.events{
	width:80%; min-width:300px;
	text-align:left; display:inline-block;
}
.event{
	padding:5px; margin:5px; border:1px solid rgba(0,0,0,0.1); border-radius:5px;
}

.timeline-popup{
	position:absolute;
}

.people{
    fill:red;
}

.timeline-popup#create-panel{
	position:absolute;
	text-align:left;
	max-width:300px;
	border:1px solid rgba(0,0,0,0.3);
    border-radius:5px;
    padding:5px;
    background:rgba(255,255,255,0.95);
	box-shadow: 0 3px 3px rgba(0,0,0,0.05);
	z-index:99999;
}
.timeline-popup#create-panel *{
	width:140px;
	margin:2px;
}

#timeline-prompt{
	position:absolute;
	margin:20px;
	font-size:1.9em;
	color:rgba(0,0,0,0.2);
	pointer-events:none;
}

.timeline-people{
	display:table;
	position:absolute;
    text-align:left;
	border:1px solid rgba(0,0,0,0.3);
    border-radius:25px;
    padding:5px 15px;
    background:rgba(255,255,255,0.95);
	box-shadow: 0 3px 3px rgba(0,0,0,0.05);
	cursor:pointer;

}
.timeline-event{
	position:absolute;
	display:table;
	text-align:left;
	max-width:300px;
	min-width:100px;
	border:1px solid rgba(0,0,0,0.3);
	border-radius:5px;
	padding:5px;
	background:rgba(255,255,255,0.95);
	box-shadow: 0 3px 3px rgba(0,0,0,0.05);
	cursor:pointer;

	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	width: -ms-max-content; /* Chrome */
}
.event-txt{
    text-align:left;
	display:inline-block;
}

.link{
    /stroke:black; fill:none;
}

.timeline-colour{
    height:36px; width:36px; border-radius:18px; background:black;
	border:none;
	vertical-align:middle;
	display:inline-block;
	margin:3px;
}
.timeline-colour:hover{
	border:2px solid black;
}
#person-colours{
	text-align:center;
}

.timeline-btn {
	font-size:1.5em;
	display:inline-block;
	vertical-align:middle; text-align:center;
	cursor:pointer;
	height:24px; width:24px; border-radius:12px;
}
.timeline-btn:hover{
	background:rgba(0,0,0,0.2);
}

.connect-to{
	display:none;
}
.connect-available .connect-to{
    display:inline-block;
}
.connect-available .connect{
    display:none;
}
.connect-available .edit{
	display:none;
}

.connect-pending .connect,
.connect-pending .connect-to{
    display:none;
}

.person-evt-link{
	cursor:pointer;
}
.person-evt-link:hover{
	opacity:0.8;
}





/* writing page */
#user-book-page .book-title{
	color:black;
	font-family:PT Serif;
	font-size:1.6em;
	padding:20px;
}

#user-book-page [contenteditable]{
	border: 1px solid rgba(0,0,0,0.2);
	border-radius:5px;
}
#user-book-page [contenteditable]:focus{
	box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
}


h3{
	margin:20px;
	border-bottom:1px solid #333;
	padding:20px;
	font-size:1.5em;
	display:inline-block;
	text-align:left;
	width:80%;
	min-width:300px;
}

.arrow{
	display:inline-block;
	position: relative;
	background: #333;
	width:100%;
	border-top:3px solid #333;
	margin-bottom:20px;
	margin-top:20px;
}
.arrow:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 51, 51, 0);
	border-bottom-color: #333;
	border-width: 20px;
	margin-left: -20px;
}


.dashboard-day-placeholder{
	width:80px; height:200px; display:inline-block;
}
.dashboard-day{
	width:80px; height:200px;  padding:10px; display:inline-block; text-align:center; vertical-align:bottom;
	font-family:PT Serif; font-style:oblique; font-weight:bold;
	margin-bottom:150px;
}
.dashboard-day[emblem=green]{
	color:green;
}
.dashboard-day[emblem=silver]{
	color:silver;
}
.dashboard-day[emblem=gold]{
	color:gold;
}
.dashboard-day[emblem=red]{
	color:red;
}



.dashboard-day .event-icon{
	height:80px;
}
.dashboard-day .emblem{
	height:40px; width:40px; border-radius:20px; margin:10px; display:inline-block;
	position:relative; margin-top:150px;
}
.dashboard-day .date{
	position:absolute;
	height:40px; width:40px; border-radius:20px; background:#333; color:white; vertical-align:middle;
	line-height:40px;
	font-family:PT Serif; font-weight:bold; font-size:20px;
}
.dashboard-day[emblem=green] .date{
	background:rgba(2,255,0,1);
}
.dashboard-day[emblem=silver] .date{
	background:silver;
}
.dashboard-day[emblem=gold] .date{
	background:gold;
}
.dashboard-day[emblem=red] .date{
	background:red;
}
.dashboard-day[emblem=grey] .date{
	background:rgba(0,0,0,0.1);
	color:#aaa;
}
.dashboard-day[day_type=day_off] .date{
	background:rgba(0,0,0,0.1);
	color:#aaa;
}

.dashboard-day[day_type=finished] .date{
	background:gold;
}


.dashboard-day .target-bars{
	position:absolute;
	bottom:20px;
	width:40px;
}
.dashboard-day .target-bars .base-target{
	background:rgba(2,255,0,1); opacity:0.4;
}
.dashboard-day .target-bars .silver-target{
	background:silver; opacity:0.3;
}
.dashboard-day .target-bars .gold-target{
	background:gold; opacity:0.6;
}
.dashboard-day .target-bars .wordcount{
	background:#333; position:absolute; bottom:0; width:40px;  border-radius:3px;
}
.dashboard-day[emblem=green] .target-bars .wordcount{
	background:rgba(2,255,0,1); position:absolute; bottom:0; width:40px;
}
.dashboard-day[emblem=silver] .target-bars .wordcount{
	background:silver; position:absolute; bottom:0; width:40px;
}
.dashboard-day[emblem=gold] .target-bars .wordcount{
	background:gold; position:absolute; bottom:0; width:40px;
}

.dashboard-day .target-bars .deadline-target{
	background:#333; width:19px; position:absolute; right:0; bottom:0;  border-radius:3px;
}
.dashboard-day .target-bars .deadline-wordcount{
	background:#333; width:19px; position:absolute; left:0; bottom:0;  border-radius:3px;
}
.dashboard-day[result=missed] .target-bars .deadline-wordcount{
	background:red;
}
.dashboard-day[result=passed] .target-bars .deadline-wordcount{
	background:rgba(2,255,0,1);;
}

.status-section{
	font-family:PT Serif; font-style:oblique; padding:20px; margin:20px 60px;
	border:1px solid rgba(0,0,0,0.1);
	border-left:0; border-right:0;
}



.calendar-month{
	width:100%; max-width:630px; display:inline-block; margin-bottom:50px; position:relative;
}
.calendar-month h4{
	font-family:PT Serif; text-align:center; font-size:1.3em; color:#aaa; padding:20px;
}
.calendar-month .cal-next{
	position:absolute; right:5px; top:5px;
}
.calendar-month .cal-prev{
	position:absolute; left:5px; top:5px;
}
.calendar-day-name{
	width:90px; display:inline-block; font-family:PT Serif; font-style:oblique;
	text-align:center;  vertical-align:bottom;
}
.calendar-day, .calendar-empty-day{
	 display:inline-block; text-align:center; vertical-align:bottom;
	font-family:PT Serif; font-style:oblique; font-weight:bold;
	border:1px solid rgba(0,0,0,0.05);
	position:relative;
}

.calendar-day .event-icon-mobile{
	display:inline-block;
	vertical-align: middle;
	position: relative;
	text-align: center;
}
.calendar-day .date-info{
	display:inline-block; color:#333; padding:10px 5px;
}

.calendar-day[emblem=green]{
	color:green;
}
.calendar-day[emblem=silver]{
	color:silver;
}
.calendar-day[emblem=gold]{
	color:gold;
}
.calendar-day[emblem=red]{
	color:red;
}




.calendar-day .day-progress{
	position:absolute;
	bottom:2px; width:100%; text-align:center;
	font-family:PT Serif; font-weight:bold; font-size:16px;
}
.calendar-day .emblem{
	height:40px; width:40px; border-radius:20px; margin-top:15px; display:inline-block;
	/position:relative; color:white; background:#333; text-align:center;
}
.calendar-day[type=future] .emblem{
	 background:rgba(0,0,0,0.4);
}
.calendar-day[emblem=green] .emblem{
	background:rgba(2,255,0,1);
}
.calendar-day[emblem=silver] .emblem{
	background:silver;
}
.calendar-day[emblem=gold] .emblem{
	background:gold;
}
.calendar-day[emblem=red] .emblem{
	background:red;
}
.calendar-day[emblem=grey] .emblem{
	background:rgba(0,0,0,0.1);
	color:#aaa;
}
.calendar-day[day_type=day_off] .emblem{
	background:rgba(0,0,0,0.1);
	color:#aaa;
}
.calendar-day .date{
	vertical-align:middle; line-height:40px; width:100%;
}
.calendar-day[type=future]{
	color:#aaa;
}
.calendar-day[day_type=finished] .emblem{
	background:gold;
	color:#333;
}

.calendar-section{
	width:80%;
	min-width:300px;
	text-align:left;
	display:inline-block;
}
.calendar-day .event-string{
	display:inline-block;
}
.calendar-day .wide .event-string{
	position: absolute;
	bottom: -1px;
	width: 100%;
	display:block;
}
.calendar-day:hover{
	background:rgba(255,255,255,0.9);
	cursor:pointer;
}

.red-text{
	color:red;
	text-shadow: 0 0 5px rgba(255,0,0,0.5);
}
.red{
	background:red;
}
.green-text{
	color:rgba(2,255,0,1);
	text-shadow: 0 0 5px rgba(0,255,0,0.5);
}
.green{
	background:green;
}

.silver-text{
	color:#f5f5f5;
	text-shadow: 0 0 5px rgba(200,200,200,0.5);
}
.silver{
	background:silver;
}

.gold-text{
	color:gold;
	text-shadow: 0 0 5px gold;
}
.gold{
	background:gold;
}



@media screen and (min-width:1024px){
	.calendar-day,.calendar-empty-day{
		width:90px; height:90px;
	}
}

@media screen and (max-width:1024px){
	.calendar-day-name, .calendar-empty-day{ display:none; }
	.calendar-day{
		width:100%; text-align:left; vertical-align:middle;
	}
	.calendar-day .emblem *{
		position:relative; display:inline-block; text-align:left; width:auto;
	}
	.calendar-day .day-progress{
		position:relative; width:auto; text-align:left; display:inline-block; bottom:auto;
	}
}






.calendar-flyout{
	position:absolute;
	background: white;
	border:1px solid #333;
	z-index:999;
	width:300px;
	border-radius: 0 0 20px 20px;
	box-shadow:0 2px 20px rgba(0,0,0,0.1);
}
.calendar-flyout:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 51, 51, 0);
	border-bottom-color: #333;
	border-width: 10px;
	margin-left: -10px;
}
.calendar-flyout .date{
	color:white;
	background:#333;
	text-align:center;
	padding:5px;
	font-style:oblique;
	font-family: PT Serif;
	font-size:1.2em;
}
.calendar-flyout .content{
	padding:10px; text-align:center;
}

.calendar-flyout button{
	width:80%;
}


.update-section{
	width:80%;
	min-width:300px;
	display:inline-block;
}




.buttons-panel{
	padding: 5px 15px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 3px;
	margin: 2px;
	text-align: left;
	width: 80%;
	min-width: 200px;
	display: inline-block;
	background: rgba(0,0,0,0.05);
}

/* this is so awesome! thank you random internet stranger */
[contenteditable=true]:empty:not(:focus):before{
	content:attr(placeholder);
	/font-style:oblique;
	opacity:0.6;
	cursor:text;
}
[contenteditable=true]:focus:before{
	box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
}



.day-flyout{
	position:absolute;
	background: #333;
	border:1px solid #333;
	z-index:999;
	box-shadow:0 2px 20px rgba(0,0,0,0.1);
	color:white;
	text-shadow: 0 0 5px rgba(255,255,255,0.5);
	padding:10px;
	font-family:PT Serif;
	font-style:oblique;
	text-align:center;
	pointer-events:none;
}
.day-flyout:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: #333;
	border-width: 10px;
	margin-left: -10px;
}




/* editing */
.selected-excerpt-text,
.scrawl-document .selected-excerpt-text{
	color:red;
}
.excerpt-bobble{
	height:26px; width:26px; border-radius:13px; background:#ddd; position:absolute;
}
.selected-excerpt-text .excerpt-bobble-start{
	background:rgba(255,0,0,0.3);
}
.selected-excerpt-text .excerpt-bobble-end{
	background:rgba(0,0,255,0.3);
}
.excerpt-manuscript .excerpt-bobble-start{
	left:-30px;
}
.excerpt-manuscript .excerpt-bobble-end{
	right:-20px;
}
.excerpt-chapters .excerpt-bobble-start{
	left:10px;
}
.excerpt-chapters .excerpt-bobble-end{
	right:10px;
}
.excerpt-start .excerpt-bobble-start{
	background:red;
}
.excerpt-end .excerpt-bobble-end{
	background:blue;
}
.excerpt-chapters h2{
	margin:0;
	margin-left:30px;
	padding:20px;
	text-align:left;
	color:#333;
}
.create-excerpt-panel{
	display:inline-block;
}



/* app common */

.book-section{
	text-align:center;
	vertical-align:middle;
	padding:20px;
}
.book-section .book-title{
	font-family:PT Serif;
	font-size:1.5em;
	text-decoration:none;
	color:black;
	width:100%;
	vertical-align:middle;
}
.book-section .book-link{
	float:right;
	vertical-align:middle;
	display:inline-block;
}

/* there has got to be a smarter way to do this kind of thing. */
@media screen and (min-width:1024px){
	.book-section .book-link{ margin-top:-5px;}
}

@media screen and (min-width:450px) and (max-width:1024px){
	.book-section .book-link{ margin-top:-10px;}
}

@media screen and (max-width:450px){
	.book-section .book-link{ margin-top:-15px;}
}




.error-line{
	color:red;
}










/* CRITIQUE */
#critique .critique-section{
	margin:20px;
	padding: 20px;
	text-align: left;
	width:60%;
	display:inline-block;
	border: 1px solid rgba(0,0,0,0.2);
	/border-radius: 5px;
	/box-shadow:0 0 25px rgba(0,0,0,0.1) inset;
	/background: rgba(0,0,0,0.1);
	box-shadow:0 3px 5px rgba(0,0,0,0.05);
}
.slanty-text{
	font-family:PT Sans;
	font-style:oblique;
	color:#4d4d4d;
	width:100%;
	text-align:left;
	font-size:0.9em;
}

.book-review{
	position:relative;
	text-align:left;
	border-top:1px solid #aaa;
	padding:20px;
}
.book-review:nth-child(odd){
	background:rgba(0,0,0,0.05);
}
.book-review .delete-review{
	position:absolute;
	top:5px; right:5px;
}
.book-review .message-section{
	margin:0 20px;
	margin-bottom:5px;
}
.book-review .book-author{
	margin-left:40px;
}
.critique-quote{
	position:absolute;
}
.critique-quote-line{
	position:absolute; height:1px; width:1px;
	z-index:999;
	opacity:0.5;
	cursor:pointer;
	border-style:solid;
}
.critique-quote-line.horiz{
	border-bottom-width:2px;
}
.critique-quote-line.vert{
	border-left-width:5px;
}
.critique-quote.active-quote .critique-quote-line{
	border-color:red;
}

.critique-quote-panel{
	position:fixed;
	right:0; top:0; bottom:0;
	background:#efefef;
	z-index:999999;
	display:none;
	border-left:3px solid #333;
}
#commentsArrow{
	position:absolute;
	height:40px;
	width: 20px;
	left: -20px;
	z-index:4;
}
#commentText{
	padding:10px;
	text-align:center;
	font-family:PT Serif;
	font-style:oblique;
}
.commentsWindowButton{
	position:relative;
	display: table-cell;
	float:left;
	width:52px;
	height:52px;
	margin:1px;
	text-align:center;
	vertical-align:middle;
	background: #333;
	color:white;
}
.commentsWindowButton > p{

	display:inline-block;
	vertical-align:middle;
	line-height:52px;
}
.commentsWindowNumber{
	position:relative;
	display: table-cell;
	float:left;
	width:52px;
	height:52px;
	margin:1px;
	text-align:center;
	vertical-align:middle;
	background: #333;
	color:white;
}
.commentsWindowNumber > p{
	font-size:24px;
	display:inline-block;
	vertical-align:middle;
	line-height:52px;
}
.commentsWindowButton:hover{
	background: #444;
}
/*
.commentsWindowButton.user-owns,
.commentsWindowNumber.user-owns{
	background: #373e8b;
}
.commentsWindowButton.user-owns:hover,
.commentsWindowNumber.user-owns:hover{
	background: #424ca9;
}*/
.green.commentsWindowButton.user-owns,
.green.commentsWindowNumber.user-owns{
	background: green;
}
.green.commentsWindowButton.user-owns:hover{
	background: #22aa22;
}
.orange.commentsWindowButton.user-owns,
.orange.commentsWindowNumber.user-owns{
	background: #e82;
}
.orange.commentsWindowButton.user-owns:hover{
	background: #f93;
}

.commentsWindowButton.disabled{
	background: #aaa;
}
.commentsWindowButton.disabled:hover{
	background: #ccc;
}
.critique-quote-comment{
	position:relative;
	text-align:left;
	border-top:1px solid #aaa;
	padding:10px;
}
.critique-quote-comment:nth-child(odd){
	background:rgba(0,0,0,0.05);
}
.critique-quote-comment .delete{
	position:absolute;
	top:5px; right:5px;
}





























/* normal pages */




/* home */
.fadein{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,eeeeee+100&0.31+1,0.53+24,1+96 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.31) 0%, rgba(255,255,255,0.31) 1%, rgba(251,251,251,0.53) 24%, rgba(239,239,239,1) 96%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.31) 0%,rgba(255,255,255,0.31) 1%,rgba(251,251,251,0.53) 24%,rgba(239,239,239,1) 96%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.31) 0%,rgba(255,255,255,0.31) 1%,rgba(251,251,251,0.53) 24%,rgba(239,239,239,1) 96%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

}
.fadein a{
	padding:20px;
}
.fadein a:hover{
	color:white;
	text-shadow: 0 0 5px white;
}


/* start writing */
.sections-menu > div{
	display:inline-block;
	vertical-align:bottom;
	opacity:0.5;
	cursor:pointer;
}
.sections-menu > div.active{
	opacity:1;
}
.sections-menu img{
	vertical-align:middle;
	width:100px;
	margin:10px;
}
.sections-menu img:hover{
	opacity:0.7;
}


/* subscriptions: */
.plan-card{
	width:20%;
	min-width:200px;
	display:inline-block;
	border:1px solid rgba(0,0,0,0.2);
	border-radius:5px;
	margin:5px;
	margin-top:20px;
	vertical-align:top;
	box-shadow:0 3px 5px rgba(0,0,0,0.1);
	text-align:center;
}
.plan-card .current-plan{
	display:none;
}
.plan-card.current .current-plan{
	display:inline-block;
	border:1px solid rgba(0,0,0,0.4);
	border-radius:5px;
	padding:10px 35px;
	margin:5px;
	background:grey;
	color:white;
	font-weight:bold;
	pointer-events:none;
}

.plan-card[plan=free] .current-plan{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.plan-card[plan=gold] .current-plan{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100;Orange+3D+%235 */
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}
.plan-card[plan=silver] .current-plan{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
.plan-card[plan=basic] .current-plan{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9dd53a+0,a1d54f+50,80c217+51,7cbc0a+100;Green+Gloss+%231 */
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}



.buy-subscription{
	border:1px solid rgba(0,0,0,0.4);
	border-radius:5px;
	padding:10px 35px;
	margin:5px;
	background:#3097de;
	color:white;
	font-weight:bold;
	outline:none;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,107eed+100 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top,  #4096ee 0%, #107eed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #4096ee 0%,#107eed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #4096ee 0%,#107eed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#107eed',GradientType=0 ); /* IE6-9 */


}
.buy-subscription:hover{
	background:#6ec4ff;
	color:white;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,54a3ee+50,3690f0+51,1e69de+100;Blue+Gloss+%233 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

}
.buy-subscription:active{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100;Blue+Gloss+%232 */
background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

}

.plan-card.current .buy-subscription{
	display:none;
}


.plan-card li{
	padding:3px;
	text-align:left;
}
.subscription-plan-comparisons-btn{
	font-size:0.8em;
}
.subscription-plan-comparisons{
	border:1px solid rgba(0,0,0,0.2);
	border-radius:3px;
	font-size:0.8em;
	line-height:1.4;
	padding:3px;
	height:180px;
}
.subscription-plan-comparisons li{
	padding:0;
}

.plan-title-card{
	background:rgba(0,0,0,0.03);
	box-shadow:0 0 20px rgba(0,0,0,0.1) inset;
}
.plan-title{
	font-size:1.4em;
	font-weight:bold;
	padding:10px;
	padding-top:30px;
}
.plan-expo{
	background:#666;
	color:white;
	padding:15px;
	min-height:150px;
	text-align:center;
	font-family:PT Serif;
	font-style:oblique;
}
.plan-expo p{
	vertical-align:middle;
}
.plan-usage{
	background:rgba(0,0,0,0.05);
	padding:10px;
	padding-top:20px;
	font-size:0.8em;
	line-height:1.3;
	min-height:200px;
}











.button{
	vertical-align:middle;
	background:#333333;
	color:white;
	font-family:PT Serif;
	font-style:normal;
	font-size: 1em;
	text-transform: uppercase;
	text-decoration:none;
	padding: 40px 40px;
	margin: 40px 10px;
	outline: 2px solid white;
	outline-offset: -7px;
	display:inline-block;
	width:auto;
	min-width:20px;
	min-height:20px;
	cursor: pointer; cursor: hand;
	/*box-shadow: 0 5px 5px -2px rgba(0,0,0,0.4); fucking firefox */
	-webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
	-moz-filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
	-ms-filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
	-o-filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f4f4f+0,333333+100 */
background: #4f4f4f; /* Old browsers */
background: -moz-linear-gradient(top,  #4f4f4f 0%, #333333 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #4f4f4f 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #4f4f4f 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#333333',GradientType=0 ); /* IE6-9 */


}
.button:hover{
	background:#444444;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,4f4f4f+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606060+1,494949+100 */
background: #606060; /* Old browsers */
background: -moz-linear-gradient(top,  #606060 1%, #494949 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #606060 1%,#494949 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #606060 1%,#494949 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#494949',GradientType=0 ); /* IE6-9 */


	color:white;
}
.button:active{
	background:#222222;
}
.button.disabled{
	opacity:0.5;
}
.button.disabled:hover{
	background:#333333;
	color:white;
}
.button.disabled:active{
	background:#333333;
	color:white;
}