/*

CONTENTS
00.80 - Gridiculous - Control max-width on line 103
01.00 - Text and Bigwrap
	01.10 - Font Menu
02.00 - Header
02.50 - Hero
03.00 - Results Rows
03.10 - Chapter Text
04.00 - Nav
04.10 - Sticky Stuff
	04.20 - Sticky Toolbar
	04.30 - Sticky Word Counter
	04.40 - Sticky Save Button
04.50 - Clearing Element
05.00 - Buttons and Login Wrap
05.05 - Links
05.07 - Header Sign-in Button
05.10 - Word Counter
06.00 - Style Form Inputs and Turn off Default Webkit Styling
	06.10 - Standard Input Widths
	06.15 - .exportarea
	06.20 - .writingarea and .readingarea
	06.25 - .exportarea and .readingarea corners


Z-INDEX LIST
20 - .fixed class that gets added to .stickytoolbar when scrolling

KEY
Really Big Screens	= [--]
Medium Screens		= [-]
Small Screens		= []
Landscape			= _ 
Portrait			= |

*/


/* ==================== 00.80 - Gridiculous */
/*
 * Gridiculous
 *
 * A responsive grid boilerplate that takes you all the way from 1200px on down to 320px.
 *
 * created by c.bavota
 * released under GPL v2
 *
 * March 4th, 2013
 */

/* =Normalize.css v2.1.0 by Nicolas Gallagher - http://necolas.github.com/normalize.css/
-------------------------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:0.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

/* =Clearfix by Nicolas Gallagher
-------------------------------------------------------------- */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}

/* =Gridiculous
-------------------------------------------------------------- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
body{font-size:100%;line-height:1.6875}
.grid{margin:0 auto;max-width:100%;width:100%} /* GO - default max-width:1200px */
img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}
.wfull{width:100%;max-width:100%}
.w320{max-width:320px}
.w640{max-width:640px}
.w960{max-width:960px}
.row{width:100%;margin-bottom:20px}
.row .row{width:auto;margin:0 -20px}
.c1{width:8.33%}
.c2{width:16.66%}
.c3{width:25%}
.c4{width:33.33%}
.c5{width:41.66%}
.c6{width:50%}
.c7{width:58.33%}
.c8{width:66.66%}
.c9{width:75%}
.c10{width:83.33%}
.c11{width:91.66%}
.c12{width:100%}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{min-height:1px;float:left;padding-left:20px;padding-right:20px;position:relative}
.s1{margin-left:8.33%}
.s2{margin-left:16.66%}
.s3{margin-left:25%}
.s4{margin-left:33.33%}
.s5{margin-left:41.66%}
.s6{margin-left:50%}
.s7{margin-left:58.33%}
.s8{margin-left:66.66%}
.s9{margin-left:75%}
.s10{margin-left:83.33%}
.s11{margin-left:91.66%}
.end{float:right!important}


/* ==================== 01.00 - Text and Bigwrap */
/*
TEXT STYLE GUIDE
Offer this Old English as an alternate typeface in editor.
font-family: 'IM Fell English', Georgia, Times, serif;
.lato { font-family: 'Lato', Helvetica, Arial, sans-serif; }

All body text:		Source Sans Pro
h1 headings only:	Lato uppercase
h2 sub headings:	Source Sans Pro
In-app h5 headings: Varela Round
*/

body {
	background-color: #f5f5f5; /* white smoke - .inlinewordcounter background-color corresponds */
	font-size: 1.2em;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.index1 body { background-color: transparent; }

p {
	/* color: #777777; */
	font-weight: 400;
	font-size: 1.2em;
	margin: 0 0 20px 0;
}

/* ========== 01.10 - Font Menu */
.eb-garamond { font-family: 'EB Garamond', Georgia, Times, serif; }
.eb-garamond.chaptertitle, .eb-garamond.chaptertext { font-size: 110% !important; line-height: 1.6875 !important; }
.im-fell-english { font-family: 'IM Fell English', Georgia, Times, serif; }
.im-fell-english.chaptertitle, .im-fell-english.chaptertext { font-size: 110% !important; line-height: 1.6875 !important; }
.source-sans-pro { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; }
.varela-round { font-family: 'Varela Round', Helvetica, Arial, sans-serif; }
.vollkorn { font-family: 'Vollkorn', Georgia, Times, serif; }
.vollkorn.chaptertitle, .vollkorn.chaptertext { font-size: 110% !important; line-height: 1.6875 !important; }

strong { font-weight: 700; } /* regular is 400 */
em { font-style: italic; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; }

h1 { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; }
h5, h7 { font-family: 'Varela Round', 'Source Sans Pro', Helvetica, Arial, sans-serif; }
h2, h3, h4, h6 { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; }
h6 {font-weight: 400; }

h1 {
	font-size: 30px; /* 50px */
	line-height: 44px;
	margin: 0 0 6px 0; /* 0 0 10px 0 */
	padding: 0;
}

h2, h3, h4, h5 {
	font-weight: 400;
	font-size: 40px;
	line-height: 44px;
	margin: 6px 0 6px 0;
	padding: 0;
}

h2 { font-size: 2em; line-height: 1em; margin-bottom: 16px; }
h3 { font-size: 3em; line-height: 1.25em; }
h5 {
	font-size: 32px;
	line-height: 36px;
	color: #000000;
	/* text shadow - h offset, v offset, blur radius, (rgb color values, opacity) */
	text-shadow: 1px 1px 1px rgba(255,255,255,1.0);
} /* Varela Round - default 30px/34px */
h6 {
	font-size: 1.1em;
	line-height: 1.5em;
	color: #777777;
	margin-top: 0;
	margin-bottom: 6px;
}

h7 {
	font-size: 1.1em;
	line-height: 1.2em;
	color: #000000;
	/* text shadow - h offset, v offset, blur radius, (rgb color values, opacity) */
	text-shadow: 1px 1px 1px rgba(255,255,255,1.0);
} /* Varela Round - default 30px/34px */

.editor { margin-top: 30px; } /* adds space above heading on chapter edit page */

.home-margin { margin: 0 0 0 0; text-align: right; }
.homehead {
	color: #ffffff;
	font-size: 52px;
	line-height: 54px;
	margin: -20px 0 10px 0;
	/* text shadow - h offset, v offset, blur radius, (rgb color values, opacity) */
	text-shadow: -2px 2px 50px rgba(0,0,0,1.0);
	text-transform: uppercase;
	font-weight: normal;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.homesubhead {
	text-align: right;
	color: #ffffff;
	font-size: 23px;
	line-height: 27px;
	margin: 10px 0 22px 0;
}

.homeboxhead {
	font-size: 1.5em;
	line-height: 1em;
	color: #777777;	
}

.bigwrap { margin-bottom: 20px; }
.big { font-size: 1.2em; }

.small { font-size: 13px; }

.caption { font-size: 14px; }

.quote {
font-size: 30px;
font-style: italic;
}

.thirsty {
	letter-spacing: 0;
	margin: 0 0 0 0;
	padding: 0;
	font-family: 'ThirstyRoughRegOne', Arial;
}


/* ==================== 02.00 - Header */
.header {
	height: 48px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #333333; /* original #3d3d3d */
	text-align: left;
	/* colorzilla gradient */
	/*background: #616161;*/ /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYxNjE2MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYTFhMWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #616161 0%, #1a1a1a 100%);*/ /* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161), color-stop(100%,#1a1a1a));*/ /* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top,  #616161 0%,#1a1a1a 100%);*/ /* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top,  #616161 0%,#1a1a1a 100%);*/ /* Opera 11.10+ */
	/*background: -ms-linear-gradient(top,  #616161 0%,#1a1a1a 100%);*/ /* IE10+ */
	/*background: linear-gradient(to bottom,  #616161 0%,#1a1a1a 100%);*/ /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#1a1a1a',GradientType=0 );*/ /* IE6-8 */
} /* margin: 0 0 0 8% */

.header img { margin: 8px 6px 0 20px; } /* margin: 8px 20px 0 20px; left margin should match .stickytoolbar - this overrides gridiculous and allows header image to align left */

.headericon { width: 214px; } /* 30px width for live logotype */


/* ==================== 02.50 - Hero */
.hero-wrap { margin: 0 0 0 0; padding: 0; }
.hero-slider { margin: 0; padding: 0; border: 0; }

.box {
	margin-top: 200px;
	background-color: #ffffff;
	/* rounded corners */
	border-radius:			8px; 
	-moz-border-radius:		8px;
	-webkit-border-radius:	8px;
	/* drop shadow */
	/* h offset, v offset, optional blur radius, optional spread distance (rgb color values, opacity) optional inset */
	/*-moz-box-shadow: 	1px 1px 4px 1px rgba(0,0,0,.25);
	-webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,.25);
	box-shadow: 		1px 1px 4px 1px rgba(0,0,0,.25);*/
}


/* ==================== 02.60 - Hero List */
.index1 { 
  background: url(images/bg-index1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center -30px;      /* center the image - default center top */
  background-size: cover;           /* default: cover - cover the entire window */
}

.index2 {
  background: url(images/bg-index2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center top;      /* center the image - default center top */
  background-size: cover;           /* default: cover - cover the entire window */
  padding-top: 120px;
  padding-bottom: 120px;
  color: #ffffff;
  font-size: 50px;
  text-align: center;
  /* text shadow - h offset, v offset, blur radius, (rgb color values, opacity) */
  /* text-shadow: -2px 2px 50px rgba(0,0,0,1.0); */
}


/* ==================== 03.00 - Results Rows */
.hikibox {
	padding: 20px 0 20px 0;
	border-bottom: 1px solid #d6d6d6;
	text-align: left;
}

.hikiboxtop { margin-top: 20px; border-top: 1px solid #d6d6d6; }

.hikirule { border-bottom: 1px dashed #a5a5a5; margin: 10px 0 10px 0; }
.exporthikirule { border-bottom: 1px dashed #a5a5a5; margin: 70px 0 70px 0; }


/* ==================== 03.10 - Chapter Text */
.chaptertext, .chaptertitle { font-size: 100%; line-height: 1.6875; }


/* ==================== 04.00 - Nav */
.navbar {
	text-align: center;
	padding: 24px 0 20px 0; /* top and bottom margin default 20px; */
}

.navbareditor {
	text-align: center;
	padding: 21px 0 10px 0; /* this is for chapter-editor.php page only */
}

.nav {
	margin-right: 20px;
	float: left;
}

.navend {
	margin-right: 0;
}


/* ==================== 04.10 - Sticky Stuff */
/* ========== 04.20 - build sticky toolbar */
/* default state before scrolling */
.stickytoolbar {
	position: fixed;
	z-index: 20;
	top: 75px; left: 20px; /* left margin should match .header img */
	padding: 0 0 10px 0;
	width: 120px;
}

/* this class is added to .stickytoolbar after user scrolls to a certain point */
.fixed {
	position: fixed;
	z-index: 20;
	top: 75px; left: 20px;
	width: 120px;
}

/* ========== 04.30 - build sticky word counter wrapper */
/* default state before scrolling */
.stickywordcounter {
	position: fixed;
	z-index: 20;
	top: 230px; left: 0; /* left margin should match .header img */
	background-color: #666666;
	color: #ffffff;
	width: 145px; /* 162px */
	height: 28px;
	padding-left: 20px;
	visibility: visible;
	/* style top right border radius */
	border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-right-radius: 6px;
	/* style bottom right border radius */
	border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

/* style .stickywordcounter form input to blend in with .stickywordcounter */
.stickywc {
	padding: 4px 4px 4px 8px;
	background-color: #666666;
	color: #ffffff;
	border: none;
}

/* this class is added to .stickywordcounter after user scrolls to a certain point */
.wordcounterfixed {
	position: fixed;
	z-index: 20;
	top: 230px; left: 0;
	background-color: #666666;
	color: #ffffff;
	width: 145px; /* 162px */
	height: 28px;
	padding-left: 20px;
	visibility: visible;
	/* style top right border radius */
	border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	-webkit-border-top-right-radius: 6px;
	/* style bottom right border radius */
	border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

/* ========== 04.40 - build sticky save button wrapper - see .minibtn for actual button styling */
/* default state before scrolling */
.stickysavebutton {
	position: fixed;
	z-index: 20;
	top: 278px; left: 0; /* left margin should match .header img */
	/* background-color: #666666; */
	color: #ffffff;
	width: 162px;
	height: 28px;
	padding-left: 20px;
	visibility: visible;
}

/* style .stickywordcounter form input to blend in with .stickywordcounter */
.stickysb {
	padding: 4px 4px 4px 8px;
	background-color: #666666;
	color: #ffffff;
	border: none;
}

/* this class is added to .stickywordcounter after user scrolls to a certain point */
.savebuttonfixed {
	position: fixed;
	z-index: 20;
	top: 278px; left: 0;
	background-color: none;
	color: #ffffff;
	width: 162px;
	height: 28px;
	padding-left: 20px;
	visibility: visible;
}

/* control font size on sticky elements */
.stickywordcounter, .stickywc, .wordcounterfixed .stickysavebutton, .stickysb, .savebuttonfixed {
	font-size: 16px;
}


/* ==================== 04.50 - Clearing Element */
.clear {
	clear: both;	
}


/* ==================== 05.00 - Buttons and Login Wrap */
a.btn, input.btn {
	color: #ffffff;
	display: inline-block;
	font-weight: 400;
	font-size: 22px;
	padding: 4px 18px 4px 18px;
	background-color: #94b748; /* green: #94b748 - red: #d64d31; */
	/* outline: 1px solid #cc3300; */
	/* round corners */
	border-radius:			8px; 
	-moz-border-radius:		8px;
	-webkit-border-radius:	8px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.shadowbtn {
	/* drop shadow */
	/* h offset, v offset, optional blur radius, optional spread distance (rgb color values, opacity) optional inset */
	-moz-box-shadow: 	1px 1px 4px 1px rgba(0,0,0,.25);
	-webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,.25);
	box-shadow: 		1px 1px 4px 1px rgba(0,0,0,.25);
	/* inset option
	-moz-box-shadow: 	1px 1px 4px 1px rgba(0,0,0,.25), inset 0 0 8px 1px rgba(218,214,194,0.40);
	-webkit-box-shadow: 1px 1px 4px 1px rgba(0,0,0,.25), inset 0 0 8px 1px rgba(218,214,194,0.40);
	box-shadow: 		1px 1px 4px 1px rgba(0,0,0,.25), inset 0 0 8px 1px rgba(218,214,194,0.40);
	*/
}

a.btn:focus, a.btn:hover, a.btn:active, input.btn:focus, input.btn:hover, input.btn:active { outline: none; }
a.btn:link, a.btn:visited, input.btn:link, input.btn:visited { background-color: #94b748; color: #ffffff; text-decoration: none; font-weight: normal; }
a.btn:hover, a.btn:active, input.btn:hover, input.btn:active { background-color: #7b7b7b; color: #ffffff; text-decoration: none; font-weight: normal; } /* light green: #a9d251 */

/* .minibtn is used specifically for the sticky toolbar and save controls */
a.minibtn, input.minibtn {
	color: #ffffff;
	display: inline-block;
	font-weight: 400;
	/* font-size: 12px; */
	padding: 5px 14px 6px 14px; /* 5px 14px 6px 14px */
	background-color: #94b748; /* green: #94b748 - red: #d64d31; */
	text-transform: none;
	/* outline: 1px solid #cc3300; */
	/* round corners */
	border-radius:			3px; 
	-moz-border-radius:		3px;
	-webkit-border-radius:	3px;
}

a.minibtn:focus, a.minibtn:hover, a.minibtn:active, input.minibtn:focus, input.minibtn:hover, input.minibtn:active { outline: none; }
a.minibtn:link, a.minibtn:visited, input.minibtn:link, input.minibtn:visited { background-color: #94b748; color: #ffffff; text-decoration: none; font-weight: normal; }
a.minibtn:hover, a.minibtn:active, input.minibtn:hover, input.minibtn:active { background-color: #7b7b7b; color: #ffffff; text-decoration: none; font-weight: normal; }

/* .minibtn2 is used generally across the site */
a.minibtn2, input.minibtn2 {
	color: #ffffff;
	display: inline-block;
	font-weight: 400;
	/* font-size: 12px; */
	padding: 5px 14px 4px 14px; /* 5px 14px 6px 14px */
	background-color: #94b748; /* green: #94b748 - red: #d64d31; */
	text-transform: none;
	/* outline: 1px solid #cc3300; */
	/* round corners */
	border-radius:			3px; 
	-moz-border-radius:		3px;
	-webkit-border-radius:	3px;
}

a.minibtn2:focus, a.minibtn2:hover, a.minibtn2:active, input.minibtn2:focus, input.minibtn2:hover, input.minibtn2:active { outline: none; }
a.minibtn2:link, a.minibtn2:visited, input.minibtn2:link, input.minibtn2:visited { background-color: #94b748; color: #ffffff; text-decoration: none; font-weight: normal; }
a.minibtn2:hover, a.minibtn2:active, input.minibtn2:hover, input.minibtn2:active { background-color: #7b7b7b; color: #ffffff; text-decoration: none; font-weight: normal; }

.login-wrap {
	width: auto;
	padding: 0 0 36px 0;
	text-align: right;
	padding-top: 108px;
	margin-right: 80px;
}


/* ==================== 05.05 - Links */

a:focus, a:hover, a:active { outline: none; }
a:link, a:visited { color: #94b748; text-decoration: none; font-weight: normal; }
a:hover, a:active { color: #7b7b7b; text-decoration: none; font-weight: normal; }

.bookname { display: block; padding: 20px 0px 20px 10px; }
a.bookname:focus, a.bookname:hover, a.bookname:active { outline: none; }
a.bookname:link, a.bookname:visited {
	color: #000000;
	text-decoration: none;
	font-weight: normal;
}

a.bookname:hover, a.bookname:active {
	color: #6b6b6b;
	background-color: #e3e3e3;
	text-decoration: none;
	font-weight: normal;
	-webkit-tap-highlight-color: rgba(227,227,227,1); /* remove gray highlight on tap in mobile Safari part B -- part A in home.php */
}


/* ==================== 05.07 - Header Sign-in button */
a.hdr-sign-in-button {
	color: #ffffff;
	display: inline-block;
	font-weight: 400;
	font-size: 14px;
	float: right;
	padding: 4px 14px 4px 14px; /* 5px 14px 6px 14px */
	background-color: #5c5c5c;
	text-transform: uppercase;
	margin: 8px 20px 0 0;
	/* round corners */
	border-radius:			3px; 
	-moz-border-radius:		3px;
	-webkit-border-radius:	3px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

a.hdr-sign-in-button:focus, a.hdr-sign-in-button:hover, a.hdr-sign-in-button:active { outline: none; }
a.hdr-sign-in-button:link, a.hdr-sign-in-button:visited { background-color: #5c5c5c; color: #ffffff; }
a.hdr-sign-in-button:hover, a.hdr-sign-in-button:active { background-color: #7b7b7b; color: #ffffff; }


/* ==================== 05.10 - Word Counter */
 .wordcounter { margin-right: 10px; }
 .inlinewordcounter  { margin-right: 10px; color: #000000; background-color: #f5f5f5; border: 0; margin: 0; padding: 0; font-weight: bold; }


/* ==================== 06.00 - Style Form Inputs and Turn off Default Webkit Styling */
/* get rid of ugly submit button styling */
input.btn { padding: 9px 18px 10px 18px; margin: 12px 0 0 0; border: none; }

input, textarea, .expanding {
	width: auto;
	padding: 8px 10px 8px 10px;
	margin: 0 0 12px 0;
	/*font-size: 1em;*/ /* original 15px */
	color: #000000; /* gray: #777777; */
	border: 1px solid #d6d6d6;
	/* rounded corners */
	border-radius:			8px; 
	-moz-border-radius:		8px;
	-webkit-border-radius:	8px;
	/* turn off webkit styling */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* drop shadow */
	/* h offset, v offset, optional blur radius, optional spread distance (rgb color values, opacity) optional inset */
	/* -moz-box-shadow: 	inset 1px 1px 5px 1px rgba(0,0,0,0.20);
	-webkit-box-shadow: inset 1px 1px 5px 1px rgba(0,0,0,0.20);
	box-shadow: 		inset 1px 1px 5px 1px rgba(0,0,0,0.20); */
}

select { color: #777777; }

input[type=submit] {
	/* turn off webkit styling */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.lhinput {
	width: 254px;
	margin-bottom: 12px;
}

.lhinput-last {
	margin-bottom: 0;	
}

textarea {
	outline: none;
	resize: none;
}

.textareatopmargin { margin-top: -14px; }


/* ========== 06.10 - Standard Input Widths */
.form-wrapper, .message-wrapper {
	width: auto; /* 254px */
	margin-top: 40px;	
}

.default-input {
	width: 100%; /* default width 254px */
	color: #666666;
}

.default-input-last {
	width: 100%;
	margin-bottom: 0;	
}


/* ========== 06.15 - .exportarea */
.exportarea {
	width: auto;
	padding: 8px 10px 8px 10px;
	margin: 40px 0 12px 0;
	/*font-size: 1em;*/ /* original 15px */
	color: #000000; /* gray: #777777; */
	border: 1px solid #d6d6d6;
	/* turn off webkit styling */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;	
}


/* ========== 06.20 - .writingarea and .readingarea */
.writingarea {
	padding: 16px 20px 16px 20px;
	background-color: #ffffff;
}

.readingarea {
	padding: 16px 20px 16px 20px;
	border: 1px solid #d6d6d6;
	background-color: #ffffff;
	margin: 40px 0 0 0;
}

/* ========== 06.25 - .exportarea and .readingarea corners */
/* rounded corners */
.exportarea, .readingarea {
	border-radius:			8px; 
	-moz-border-radius:		8px;
	-webkit-border-radius:	8px;
}
	

/* =Media query for 960 Screens - sets nested grids to 100%
-------------------------------------------------------------- */
/* default gridiculous: @media only screen and (max-width:960px){ */
/* MEDIUM SCREENS */
@media only screen and (max-width: 1279px) and (min-width: 768px) {
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12{width:100%;margin-bottom:20px}
.row .row > div:last-child{margin-bottom:0 !important}
}

/* = = = = = = custom overrides */
.header {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: left;
} /* margin: 0 0 0 8% */

/* .header img { margin-left: 0; } */ /* this overrides gridiculous and allows header image to align left */


/* =Media query for iPad and tablets
-------------------------------------------------------------- */
/* default gridiculous: @media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){ */
/* [] [] [] ==================== SMALL SCREENS */
@media only screen and (max-width: 767px) {
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{width:100%;margin-right:0;margin-left:0;margin-bottom:20px}
c4 { margin: 0; outline: 3px solid #cc3300; }

/* = = = = = = custom overrides */

/* [] [] [] ==================== 01.00 - Text and Bigwrap */
body { font-size: 1em; }

h1 {
	font-size: 30px; /* 40px */
	margin: 0 0 0 0;
	padding: 0;
}

h5 { font-size: 24px; line-height: 28px; } /* Varela Round default 22px/26px } */

.home-margin { text-align: center; }
.homehead {
	color: #ffffff;
	font-size: 30px;
	line-height: 34px;
	margin: -20px 0 40px 3px;
}

.homesubhead {
	color: #ffffff;
	font-size: 15px;
	line-height: 19px;
	margin: -30px 0 20px 3px;
}

.editor { margin-top: 0; } /* adds space above heading on chapter edit page */

.index2 h2 {
	font-size: 1em;
	/* text shadow - h offset, v offset, blur radius, (rgb color values, opacity) */
	text-shadow: none; /* -2px 2px 50px rgba(0,0,0,1.0); */	
}

.homeboxhead { margin-top: -10px; }

h6 { margin-bottom: 70px; }

.quote {
font-size: 22px;
line-height: 26px;
font-style: italic;
}


/* [] [] [] ==================== 02.00 - Header */
.header img { margin: 8px 6px 0 14px; } /* width: 50px; margin: 8px 10px 0 14px; this overrides gridiculous and allows header image to align left */

.headericon { width: 194px; } /* live logotype width: 30px */


/* [] [] [] ==================== 02.60 - Hero List */
.index1 { 
  background: url(images/bg-index1-small2.jpg) no-repeat center center fixed; /* default bg-index1-small.jpg */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center 46px;      /* 64px center the image */
  background-size: 100%;           /* 640x960 - default: cover - cover the entire window */
}

.index2 { 
  background: url(images/bg-index2-small.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center 64px;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 80px;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
}


/* [] [] [] ==================== 04.00 - Nav */
.navbar {
	text-align: center;
	padding: 0 0 10px 0; /* top margin default 24px - bottom margin default 20px; */
}

.navbareditor {
	text-align: center;
	padding: 21px 0 10px 0; /* this is for chapter-editor.php page only */
}


/* [] [] [] ==================== 04.10 - Sticky Stuff */

/* [] [] [] ========== 04.20 - Sticky Toolbar */
/* default state before scrolling */
.stickytoolbar {
	position: relative;
	z-index: 20;
	top: 0; left: 0; /* left margin should match .header img */
	padding: 0 0 0 0;
	width: 100%; /* 320px - this is the gray line beneath the sticky toolbar */
}

/* this class is added to .stickytoolbar after user scrolls to a certain point */
.fixed {
	position: fixed;
	z-index: 20;
	top: -72px; left: 0; /* NAV EDIT ONE: -16px shows icons, -72px hides icons - corresponds with .wordcounterfixed, .savebuttonfixed */
	padding-left: 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #d6d6d6; /* this matches form element borders */
	width: 100%; /* 320px - this is the gray line beneath the .stickytoolbar icons */
}

/* [] [] [] ========== 04.30 - Sticky Word Counter */
/* default state before scrolling */
.stickywordcounter {
	position: fixed;
	z-index: 20;
	top: 120px; left: 0; /* left margin should match .header img */
	background-color: #666666;
	width: 120px;
	visibility: hidden;
	/* style top right border radius */
	border-top-right-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	/* style bottom right border radius */
	border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

/* style .stickywordcounter form input to blend in with .stickywordcounter */
.stickywc {
	padding: 4px 4px 4px 8px;
	background-color: #666666;
	color: #ffffff;
	border: none;
}

/* this class is added to .stickytoolbar after user scrolls to a certain point */
.wordcounterfixed {
	position: fixed;
	z-index: 20;
	top: 0; left: 0; /* NAV EDIT TWO: 56px shows below icons, 0px shows in place of icons - corresponds with .fixed, .savebuttonfixed */
	background-color: #666666;
	color: #ffffff;
	width: 162px;
	height: 28px;
	padding-left: 20px;
	visibility: visible;
	/* style top right border radius */
	border-top-right-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	/* style bottom right border radius */
	border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-webkit-border-bottom-right-radius: 6px;
}

/* [] [] [] ========== 04.40 - build sticky save button wrapper - see .minibtn for actual button styling */
/* default state before scrolling */
.stickysavebutton {
	position: fixed;
	z-index: 20;
	top: 278px; left: 0; /* left margin should match .header img */
	/* background-color: #666666; */
	color: #ffffff;
	width: 162px;
	height: 28px;
	padding-left: 20px;
	visibility: hidden;
}

/* style .stickywordcounter form input to blend in with .stickywordcounter */
.stickysb {
	padding: 4px 4px 4px 8px;
	background-color: #666666;
	color: #ffffff;
	border: none;
}

/* this class is added to .stickywordcounter after user scrolls to a certain point */
.savebuttonfixed {
	position: fixed;
	z-index: 20;
	top: 0; left: 142px; /* NAV EDIT THREE: 56px shows below icons, 0px shows in place of icons - corresponds with .fixed, .wordcounterfixed */
	background-color: #666666;
	color: #ffffff;
	width: 100%; /* 178px - this is width of dark gray behind .stickysavebutton */
	height: 28px;
	padding-left: 12%; /* 20px - space to left of .stickysavebutton */
	visibility: visible;
}

/* control font size on sticky elements */
.stickywordcounter, .stickywc, .wordcounterfixed .stickysavebutton, .stickysb, .savebuttonfixed {
	font-size: 15px;
}


/* [] [] [] ==================== 05.00 - Buttons and Login Wrap */
a.minibtn, input.minibtn {
	/* round corners */
	/* style top right border radius */
	border-top-right-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	/* style top left border radius */
	border-top-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	/* style bottom right border radius */
	border-bottom-right-radius: 3;
	-moz-border-radius-bottomright: 3;
	-webkit-border-bottom-right-radius: 3;
	/* style bottom left border radius */
	border-bottom-left-radius: 3;
	-moz-border-radius-bottomleft: 3;
	-webkit-border-bottom-left-radius: 3;
}

.login-wrap {
	width: auto;
	padding: 14px 0 14px 0;
	text-align: center;
	padding-top: 200px;
	margin-right: 0;
}


/* [] [] [] ========== 05.07 - Header Sign-in button */
a.hdr-sign-in-button {
	margin: 8px 10px 0 0;
}


/* [] [] [] ========== 06.10 - Standard Input Widths */
.form-wrapper {
	width: 100%; /* width: 254px; */
	margin-top: 10px;	
}

/* [] [] [] ========== 06.20 - .writingarea Padding */
.writingarea { padding: 8px 10px 8px 10px; }

}

/* = = = = = = custom overrides */
.header { margin-bottom: 0; }
.box { margin-top: 0; }

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
h3 { font-size: 24px; line-height: 28px; }
/* h5 { font-size: 22px; line-height: 26px; } */
	
}