*
{
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}


html
{
	height: 100%;
}


body
{
	background: hsl(0, 0%, 100%);
	font-family: 'open_sansregular', sans-serif;
	font-size: 1em;
	color: hsl(0, 0%, 0%);
	height: 100%;
}


/*::selection
{
	background: hsl(0, 0%, 0%);
	color: hsl(0, 0%, 100%);
}


::-moz-selection
{
	background: hsl(0, 0%, 0%);
	color: hsl(0, 0%, 100%);
}*/


#container
{
	min-height: 100%;
	position: relative;
	overflow: auto;
	background: hsl(0, 0%, 93%);
}


body header
{
	color: hsl(0, 0%, 100%);
	background: hsl(0, 0%, 5%);
}


body header #banner
{

}


body header #banner h1 a
{
	color: #fff;
	margin: 0;
	padding: 0.3em 0 0.2em 1em;
	font-size: 1em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


body header #banner h1 a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
}


body header #banner #logo
{
	float: left;
	margin: -1.5em 1.5em 0 0;
}


body header h2, body header h1
{
	color: #fff;
	margin: 0;
	padding: 0.3em 0 0.2em 0;
	font-size: 2em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


body header h2 a, body header h1 a
{
	color: #fff;
}


body header h2 a:hover, body header h1 a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
}


body header h1 a.selected
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
}


#tagline
{
	font-size: 1.3em;
	font-family: 'open_sanssemibold', sans-serif;
}


h1, h2, h3, h4
{
	color: hsl(0, 0%, 30%);
}


h1
{
	margin: 0 0 0.5em 0.2em;
	font-size: 3em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


h2
{
	margin: 0 0 20px 0;
	font-size: 2.5em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


h3
{
	margin-top: 0;
}


h3 a
{
	color: hsl(0, 0%, 15%);
	margin-top: 0;
}


a
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
}


a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: underline;
}


p
{
	margin-bottom: 0.5em;
}


p strong, li strong
{
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
}


dl
{
	margin-left: 2em;
}


dt
{
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
	margin-bottom: 0.3em;
}


dd
{
	margin-bottom: 1.2em;
}


abbr
{
	cursor: help;
}


.small-text
{
	font-size: 0.9em;
	color: hsl(0, 0%, 30%);
}


.lock-text
{
	clear: both;
	display: block;
	text-align: right;
	padding-top: 0.6em;
}


.empty-list
{
	text-align: center;
	font-style: italic;
	font-size: 1.2em;
	color: hsl(0, 0%, 35%);
}



/*  User Menu  */

ul#user-menu
{
	float: right;
	font-size: 1.2em;
	padding: 0.5em 0.5em 0.4em 0;
    margin-top: 0.1em;
}


ul#user-menu li
{
	list-style: none;
	float: left;
}


ul#user-menu li a
{
	padding: 0.3em 0.5em 0.3em 0.5em;
	margin: 0 0 0 0.3em;
}


ul#user-menu li a:hover
{
	background: hsl(36, 100%, 50%);
	text-decoration: none;
	color: hsl(0, 0%, 100%);
}


ul#user-menu li a.last
{
	margin: 0 10px 0 0;
}


ul#user-menu li a.join
{
	color: #FFFFFF;
	background: hsl(107, 100%, 33%);
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 0.9em;
	font-family: open_sanssemibold;
}


ul#user-menu li a.join:hover
{
	background: hsl(107, 100%, 40%);
}


ul#user-menu li a img.avatar
{
	position: absolute;
	top: 0;
	right: 0;
	border-left: 3px solid hsl(0, 0%, 5%);
}


ul#user-menu li a:hover img.avatar
{
	border-left: 3px solid hsl(36, 100%, 50%);
}



/*  External Links  */

#ext-links
{
	clear: right;
	margin-top: 2.3em;
	width: 50%;
	float: right;
}

#ext-links a
{
	padding: 3px 4px 3px 4px;
	float: right;
	display: block;
	font-size: 0.8em;
}


#ext-links a:hover
{
	background: hsl(36, 100%, 50%);
	text-decoration: none;
	color: hsl(0, 0%, 100%);
}



/*  Forms  */


label
{
	font-family: 'open_sanssemibold', sans-serif;
	color: hsl(0, 0%, 30%);
	line-height: 2.5em;
	font-size: 1.4em;
}

#paymentform p
{
	margin-bottom: 1.5em;
}


input[type="submit"]
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0.5em 0.3em 0.5em;
	background: hsl(0, 0%, 20%);
}


input[type="submit"]:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}


input:not([type="submit"]):not([type="file"])
{
	padding: 0.5em 0.8em 0.5em 0.8em;
	color: hsl(0, 0%, 20%);
	border: 1px solid hsl(0, 0%, 20%);
	margin: 0 0 0.4em 0;
	width: 500px;
	text-align: center;
	font-size: 1.2em;
	font-family: 'open_sansregular', sans-serif;
}


input:not([type="submit"]):not([type="file"]):focus, input:not([type="submit"]):not([type="file"]):hover
{
	border: 1px solid hsl(36, 100%, 50%);
}


input#avatar-clear_id
{
	width: auto;
}


img.captcha
{
	vertical-align: middle;
}


#upload-book
{
	margin: 2em 0 1em 0;
}


#upload-book label
{
	display: none;
}


#upload-book label:hover
{
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 20%);
	cursor: pointer;
}


#upload-book input[type="file"], #upload-book select
{
	background: hsl(0, 0%, 100%);
	padding: 1em;
	margin: 0.5em 0 -0.45em 0;
	color: hsl(0, 0%, 20%);
	border: 1px dashed hsl(0, 0%, 20%);
	text-overflow: ellipsis;
	font-size: 1.2em;
	width: 50%;
}


#upload-book select
{
	text-align: center;
}


#upload-book input[type="file"]:hover, #upload-book input[type="file"]:focus, , #upload-book select:focus, , #upload-book select:hover
{
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 20%);
	border: 1px solid hsl(36, 100%, 50%);
	cursor: pointer;
}


#upload-book input[type="submit"]
{
	width: 50%;
	font-size: 2em;
	margin-top: 0;
}


.form-page
{
	text-align: center;
}


.form-page img
{
	margin: 1em 0;
}



/*  Main menu  */

ul#main-menu
{
	font-size: 1.4em;
	background: hsl(0, 0%, 10%);
	/*padding: 0.3em 0.3em 0 0.3em;*/
	overflow: auto;
	list-style-type: none;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}


ul#main-menu li
{
	flex-grow: 1;
}


ul#main-menu li a
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0.5em 0.4em 0.5em;
	background: hsl(0, 0%, 20%);
	display: block;
	border-right: 1px solid hsl(0, 0%, 10%);
	border-bottom: 1px solid hsl(0, 0%, 10%);
	width: 100%;
	text-align: center;
}


ul#main-menu li a.selected, ul#main-menu li a:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
}


#search-menu
{
	padding-left: 1em;
	float: right;
	border-bottom: 1px solid hsl(0, 0%, 10%);
    width: 100%;
}


#search-menu input#id_q
{
	font-size: inherit;
	border: 1px solid hsl(0, 0%, 100%);
	padding: 0.3em;
	float: left;
	margin: 0;
    width: 80%;
}


#search-menu input#id_q:focus, #search-menu input#id_q:hover
{
	border: 1px solid hsl(36, 100%, 50%);
}


#search-menu input[type="submit"]
{
	padding: 0.4em 0.5em 0.45em 0.5em;
	font-size: inherit;
    width: 20%;
}


#search-menu input[type="submit"]:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}



/*  Page  */

#page
{
	padding-bottom: 120px;   /* Height of the footer */
	overflow: auto;
}


#content
{
	padding: 2em 1.5em 4em 1.5em;
	overflow: auto;
	background: hsl(0, 0%, 100%);
}


#content.home
{
	padding: 0;
}


#content.listing
{
	background: none;
}



/* Article  */

.blog-entry
{
	text-align: center;
}

img.blog-banner
{
	margin: 8em 0 0 0;
	padding: 5px;
    border: 1px solid hsl(0, 0%, 87%);
    border-radius: 5px;
    box-shadow: 2px 2px 3px hsl(0, 0%, 85%);
	
}


.blog-entry h2.blog-title
{
	margin-top: 0.5em;
}


.blog
{
	font-size: 1.3em;
}


.article
{
	width: 60%;
	margin: 0 auto 0 auto;
	padding: 2em 4em 4em 4em !important;
}


.article header
{
	margin: 0.4em 0 3em 0;
	text-align: center;
	background: none;
}


.article header h1
{
	font-size: 3.5em;
	color: 	hsl(0, 0%, 30%);
	line-height: 1.1em;
}


.article header p
{
	font-size: 1.2em;
	color: hsl(0, 0%, 35%);
	margin-top: 0.8em;
	font-family: 'open_sanssemibold', sans-serif;
}

.article .date
{
	font-size: 0.9em;
	color: hsl(0, 0%, 30%);
	text-align: center;
	display: block;
	margin: 0 0 1em 0;
	font-style: italic;
}


.blog-entry .date
{
	color: hsl(0, 0%, 30%);
	font-style: italic;
	margin: -1em 0 0 0;
	display: block;
	font-size: 0.9em;
}


.article img.wide
{
    margin: 1em auto 1em auto;
    padding: 5px;
    border: 1px solid hsl(0, 0%, 87%);
    border-radius: 5px;
    box-shadow: 2px 2px 3px hsl(0, 0%, 85%);
    display: block;
}


.article blockquote
{
	margin: 1.5em 1em 2em 2em;
	font-size: 1.1rem;
	font-style: italic;
	font-family: 'Times New Roman', serif;
}


.article h2
{
	font-size: 2.5em;
	margin: 1em 0 0.3em 0;
	line-height: 1.3em;
}


.article h3
{
	font-size: 1.8em;
	margin: 0.6em 0 0.3em 0;
	font-family: open_sanssemibold;
	font-weight: normal;
}


.article h4
{
	font-size: 1.5em;
	margin: 0.6em 0 0.3em 0;
	font-family: open_sanssemibold;
	font-weight: normal;
}


.article p
{
	margin-bottom: 1.5em;
	line-height: 1.6em;
}


.article ul, .article ol
{
	margin: 1em 0 1.2em 2em;
}


.article ul li, .article ol li
{
	margin: 0 0 1.1em 0;
}


.article #roadmap .fa-check
{
	color: hsl(107, 100%, 33%);
	padding-left: 0.5em;
}


.article ul#roadmap li.done
{
	list-style-image: url('/static/images/tick.png');
}


ul.notifications li
{
	width: 100%;
	padding: 0.5em 1em;
	font-size: 1.2em;
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 15%);
	text-align: center;
	list-style: none;
	border-bottom: 1px solid hsl(0, 0%, 10%);
}


ul.notifications li.readanebookweek
{
	background: /*hsl(107, 100%, 33%)*/ url('/static/images/banner/banner-4-notification.png') no-repeat center center;
	background-size: cover;
	padding: 1em;
	font-size: 1.4em;
	/*text-shadow: 0 0 5px hsl(0, 100%, 100%);*/
}


ul.notifications li.readanebookweek a
{
	color: hsl(107, 100%, 33%);
	text-decoration: underline;
}


ul.notifications li.readanebookweek a:hover
{
	text-decoration: none;
}


.article p a, .article li a
{
	border-bottom: 2px solid hsl(36, 100%, 50%);
	text-decoration: none;
	color: hsl(0, 0%, 0%);
}

.article p a:hover, .article li a:hover
{
	border-bottom: none;
	text-decoration: none;
	color: hsl(36, 100%, 50%);
}


/*  Sharing Buttons  */

#sharing-bar
{
	margin: 3em 0 2em 0;
}


a.mastodon-button
{
	background: hsl(223, 16%, 32%);
	border: none;
	color: hsl(0, 100%, 100%);
	text-align: center;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-radius: 5px;
	display: block;
	width: 150px;
	margin: 1em auto;
}


a.mastodon-button:hover
{
	background: hsl(223, 16%, 25%);
	text-decoration: none;
}


a.mastodon-button img
{
	vertical-align: middle;
	margin-right: 0.3em;
}


a.tweet-button, a.facebook-button
{
	border: none;
	color: hsl(0, 100%, 100%);
	text-align: center;
	padding: 0.5em 1em;
	border-radius: 5px;
	font-size: 0.8em;
	font-family: open_sanssemibold;
}


#book-page a.tweet-button, #book-page a.facebook-button
{
	margin: 3em 0 0 0;
}


a.tweet-button
{
	background: hsl(206, 82%, 64%);
}


a.tweet-button:hover
{
	background: hsl(206, 82%, 53%);
	text-decoration: none;
}


a.facebook-button
{
	background: hsl(221, 44%, 42%);
}


a.facebook-button:hover
{
	background: hsl(221, 44%, 31%);
	text-decoration: none;
}


a.tweet-button .fa, a.facebook-button .fa
{
	vertical-align: middle;
	margin: 0 0.3em 0 0.2em;
	font-size: 1.8em;
}


a.tweet-button.discuss
{
    width: 300px;
}


a.tweet-button.follow
{
    width: 220px;
}


#footer-promo
{
	font-size: 0.9em;
	text-align: center;
	clear: both;
	margin-top: 5em;
}



/*  Library Menu  */

#library-menu
{
	background: hsl(0, 0%, 20%);
    font-size: 0.9em;
    overflow: auto;
}


#library-menu img.avatar
{
	float: left;
}


#library-menu h1
{
	color: hsl(0, 0%, 100%);
	font-size: 2em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 0.6em 0 0 0.7em;
    float: left;
}


#library-menu .activity-link
{
	float: right;
	/*font-size: 0.5em;
	margin-left: 0.5em;
	font-family: open_sansregular;*/
}


#library-menu ul
{
    clear: left;
	list-style-type: none;
	border-top: 1px solid hsl(0, 0%, 10%);
	display: flex;
    align-items: stretch; /* Default */
	flex-wrap: wrap;
}


#library-menu ul li
{
	flex-grow: 1;
}


#library-menu ul li a
{
	display: block;
	border-right: 1px solid hsl(0, 0%, 20%);
	border-bottom: 1px solid hsl(0, 0%, 20%);
	padding: 0.5em 0.5em 0.8em 1em;
	background: hsl(0, 0%, 30%);
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	font-family: 'open_sanssemibold', sans-serif;
	width: 100%;
}


#library-menu ul li a .fa
{
	padding-right: 0.4em;
	color: hsl(0, 0%, 60%);
}


#library-menu ul li a.selected, #library-menu ul li a:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
}


#library-menu ul li a:hover .fa
{
	padding-right: 0.4em;
	color: hsl(0, 0%, 10%);
}


#library-menu ul li a.spacer
{
	margin-left: 2em;
}


#library-menu ul li a .book-count
{
	color: hsl(0, 0%, 70%);
	font-family: 'open_sans', sans-serif;
	font-style: italic;
	display: block;
}

#library-menu ul li a:hover .book-count, #library-menu ul li a.selected .book-count
{
	color: hsl(0, 0%, 10%);
}

ul#tools
{
	clear: none;
	float: right;
	width: auto;
	padding: 0 1em 0 0;
	border-top: 1px solid hsl(0, 0%, 20%);
	border-bottom: 1px solid hsl(0, 0%, 20%);
}


ul#tools li
{
	text-align: center;
}


ul#tools li a
{
	padding: 0.9em 0.2em 0.3em 1em;
	text-align: center;
	background: hsl(0, 0%, 20%);
	height: 100%;
}


ul#tools li a:hover
{
	color: hsl(36, 100%, 50%);
	background: hsl(0, 0%, 20%);
}


ul#tools li a:hover .fa
{
	color: hsl(36, 100%, 50%);
}

/*
ul#tools li a.private
{
	background: hsl(0, 98%, 36%);
	color: #fff;
}


ul#tools li a.private .fa
{
	color: #fff;
}


ul#tools li a.private:hover
{
	background: hsl(0, 95%, 47%);
}


ul#tools li a.private:hover .fa
{
	color: #fff;
}
*/


/*  Log-in & Join page  */

#login-join-screen
{
	width: 80%;
	margin: 0 auto 0 auto;
}


#login-box, #join-box
{
	float: left;
	width: 50%;
	padding: 1em;
}

#login-box
{
	text-align: center;
}


.error
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 4px;
}


#login-box .error, form#paymentForm .error, 
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 3px;
}


#login-box input[type="submit"], input[type="submit"]#update-details 
{
	font-size: 1.4em;
    padding: 0.4em 3em 0.4em 3em;
    margin-top: 1em;
}


#login-box input:not([type="submit"]), form#paymentForm input:not([type="submit"])
{
	width: 80%;
}



#join-box
{
	/*background: hsl(107, 100%, 33%);
	color: hsl(0, 0%, 100%);
	border-radius: 5px;*/
}


#join-box h1
{
	/*color: hsl(0, 0%, 100%);*/
	text-align: center;
}


#join-box ul, #join-form-box ul
{
	margin: 1em 0 1.2em 2em;
	list-style-image: url('/static/images/tick.png');
	text-align: left;
}


#join-box ul li, #join-form-box ul li
{
	margin-bottom: 0.3em;
	padding-top: 3px;
	padding: 0 0 0.5em 0.2em;
}


#join-box p
{
    text-align: center;
	font-size: 1.2em;
}


#join-form-box
{
	border: 1px solid hsl(0, 0%, 70%);
	border-radius: 5px;
	box-shadow: 0 1px 6px rgba(0,0,0,.20),0 3px 6px rgba(0,0,0,.20);
	padding: 2em 1em 4em 1em;
	width: 500px;
	margin: 0 auto 0 auto;
}


#join-form-box #id_slug
{
	width: auto;
	text-align: left;
	padding-left: 0.2em;
	margin-left: 0.2em;
}


.dayagainstdrm
{
	background: hsl(0, 0%, 97%);
	border-radius: 10px;
	padding: 1em;
	margin: 0 0 2em 0;
}


.dayagainstdrm h2
{
	font-family: open_sanssemibold;
	color: hsl(0, 0%, 30%);
}


.cost
{
	font-size: 2.3em;
	padding: 0 2px;
	color: hsl(107, 100%, 33%);
	font-family: open_sanssemibold;
}


#paymentForm p
{
	margin-bottom: 1.5em;
}


a.join-button, button.join-button, input[type="submit"].join-button
{
	text-align: center;
	display: block;
	padding: 10px;
	background: hsl(107, 100%, 33%);
	color: #FFFFFF;
	border-radius: 3px;
	width: 260px;
	font-size: 1em;
	margin: 0 auto 0 auto;
	text-shadow: none;
	cursor: pointer;
	text-transform: uppercase;
	font-family: open_sanssemibold;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


a.join-button span
{
	font-size: 0.7em;
	font-family: open_sansregular;
	text-transform: none;
}


button.join-button
{
	margin-top: 2em;
}


a.join-button:hover, button.join-button:hover, input[type="submit"].join-button:hover, #landing-banner .cta a.join-button:hover
{
	background: hsl(107, 100%, 40%);
	color: #FFFFFF;
	text-decoration: none;
}


a.join-link, .article p a.join-link
{
	text-align: center;
	display: block;
	padding: 4px 8px;
	color: #FFFFFF;
	background: hsl(107, 100%, 33%);
	border-radius: 5px;
	width: 300px;
	font-size: 1.2em;
	margin: 1em auto 0.5em auto;
	border: none;
}


p.join-link-text
{
	font-size: 0.8em;
	color: hsl(0, 0%, 20%);
	text-align: center;
}


a.join-link:hover, .article p a.join-link:hover
{
	background: hsl(107, 100%, 40%);
	text-decoration: none;
}


button.join-card
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0.5em 0.3em 0.5em;
	background: hsl(0, 0%, 20%);
	margin: 2em 0 0 0;
}


button.join-card:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}


.join-list
{
	width: 80%;
	margin: 1.5em auto 0 auto;
	text-align: left;
	column-count: 2;
	column-width: 200px;
}


.join-list ul
{
	margin-left: 1em;
	list-style-image: url('/static/images/tick.png');
}


.join-list ul li
{
	padding: 0 0 0.5em 0.2em;
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


.help
{
	font-size: 0.85em;
	font-style: italic;
	color: hsl(0, 0%, 20%);
}


/*  Library/User Pages  */

#book-list
{
	margin-top: 1.5em;
	text-align: center;
	/*background: hsl(0, 0%, 96%);*/
	/*padding: 3em 2em;*/
}


#user-list
{
	/*margin-top: 1.5em;*/
	text-align: center;
}


/*  User List  */

.user-box
{
	width: 360px;
	height: 200px;
	margin: 0 0 1em 0.8em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	display: block;
	font-size: 1.1em;
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 35%);
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	border-radius: 4px;
}


.user-box img.avatar
{
	float: left;
	margin-right: 1em;
	border-radius: 4px 0 4px 0;
}

.user-box h3
{
	font-weight: normal;
	font-family: open_sanssemibold;
	font-size: 1.5em;
	margin-top: 0.2em;
}


.user-box h4
{
	font-size: 1.2em;
	font-weight: normal;
	font-family: open_sanssemibold;
	text-align: center;
	padding: 0 0 0.2em 0;
}


.book-preview-list
{
	clear: both;
	width: 100%;
	overflow: hidden;
	padding: 0 1em 1em 1em; 
	text-align: center;
}


.not-reading
{
	padding-top: 3.5em; 
	font-style: italic;
}


.book-preview
{
	display: inline-block;
	position: relative;
	z-index: 100;
	display: inline-block;
	vertical-align: top;
}


.book-preview a img
{
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


.book-preview a:hover img
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


/*  Library - Previous/Next */

#next, #previous
{
	display: block;
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 10%);
	position: fixed;
	font-size: 1.2em;
	font-weight: normal;
	bottom: 130px;
	z-index: 200;
	/*box-shadow: 0px 10px 8px -5px hsla(0, 0%, 0%, 0.4);*/
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
	font-family: 'open_sanssemibold', sans-serif;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 4px;
}


#next
{
	float: right;
	right: 15px;
	
}


#previous
{
	float: left;
	left: 15px;
}


#previous:hover, #next:hover
{
	background: hsl(36, 100%, 60%);
	text-decoration: none;
}



/*  Book Card  */

a.book
{
	width: 360px;
	height: 150px;
	margin: 0 0 1em 0.8em;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	display: block;
	font-size: 1.1em;
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 35%);
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	border-radius: 4px;
}


a.book:hover
{
	background: hsl(0, 0%, 96%);
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


/*.book .book-text
{
	padding: 0.8em 1em 1em 0;
}


.book a
{
	color: hsl(0, 0%, 30%);
	text-decoration: none;
}


.book a:hover
{
	color: hsl(36, 100%, 50%);
}
*/

/*.book .book-detail
{
	padding: 0 0 0.5em 0;
}*/


.book .fa-lock
{
	color: hsl(0, 0%, 80%);
	display: block;
	float: right;
	padding: 0.2em;
}


.book .fa-star
{
	color: hsl(0, 0%, 80%);
	display: block;
	float: right;
	padding: 0.2em;
}


.book .fa-thumbs-up
{
	color: hsl(0, 0%, 80%);
	display: block;
	float: right;
	padding: 0.2em;
}


.book .read-next
{
	display: block;
	float: right;
	padding: 0.2em 0.4em 0.2em 0.4em;
	font-size: 0.7em;
	color: hsl(0, 0%, 70%);
	font-family: 'open_sanssemibold';
}


.book .fa-caret-right
{
	padding-left: 0.2em;
	font-size: 1.3em;
	vertical-align: bottom;
}


.book h3
{
	font-size: 1.1em;
	line-height: 1.15em;
	margin: 0.8em 0.4em 0.3em 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
}


.book img
{
	float: left;
	margin-right: 0.8em;
	border-radius: 4px 0 0 4px;
}


.book .book-format
{
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.2em 0.4em 0.2em 0.4em;
	background:  hsl(0, 0%, 70%);
	color: hsl(0, 0%, 100%);
	font-size: 0.7em;
}


.book .book-status
{
	display: block;
	position: absolute;
	bottom: 0;
	left: 100px;
	padding: 0.2em 0.4em 0.2em 1em;
	color: hsl(0, 0%, 60%);
	font-size: 0.8em;
}


/*  Alternative Style

.book .book-status
{
    display: block;
    position: absolute;
    bottom: 0;
    padding: 0.2em 0.4em 0.2em 9.2em;
    color: hsl(0, 0%, 100%);
    font-size: 0.8em;
    background: hsla(0, 0%, 70.2%, 0.8);
    width: 100%;
    z-index: -10;
}

*/

.recommendation-text
{
	margin: 0 0 3em 0;
}


a.book.recommended
{
	height: 530px;
}


a.book.recommended img
{
	border-radius: 4px 0 0 0;
}



a.book.recommended h4
{
	font-size: 1.1em;
	line-height: 1.15em;
	font-weight: normal;
	text-align: center;
	font-family: 'open_sanssemibold', sans-serif;
	clear: both;
	padding: 2em 1em 0em 1em;
}


a.book.recommended p
{
	font-size: 0.85em;
	clear: both;
	padding: 0 1em;
	text-align: left;
}


a.book.recommended .book-status
{
	left: 0;
}


.book-blank
{
	border: 4px dashed hsl(0, 0%, 86%);
	border-radius: 5px;
	color: hsl(0, 0%, 86%);
	width: 360px;
	height: 150px;
	margin: 0 0 1em 0.8em;
	display: block;
	font-size: 1.1em;
	position: relative;
	z-index: 100;
	display: inline-block;
	text-align: center;
	/*vertical-align: top;*/
}


.book-blank .blank-content
{
	font-size: 6em;
	font-family: 'open_sanssemibold';
}



/*  Book Page  */

#book-page
{
	margin-top: 2em;
	width: 100%;
}


#book-page #book-lock
{
	float: right;
	text-align: center;
	clear: right;
	margin-top: 1em;
}


#book-page #book-lock a
{
	background: hsl(0, 0%, 40%);
	color: hsl(0, 0%, 100%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
}


#book-page #book-lock div
{
	font-size: 0.8em;
	clear: right;
	color: hsl(0, 0%, 40%);
	float: right;
}


#book-page #book-lock a:hover
{
	text-decoration: none;
	background: hsl(36, 100%, 50%);
}


#book-page #favourite a
{
	background: hsl(0, 0%, 40%);
	color: hsl(0, 0%, 100%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
}


#book-page #favourite .disabled
{
	background: hsl(0, 0%, 80%);
	color: hsl(0, 0%, 20%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	float: right;
	cursor: not-allowed;
}


#book-page #favourite a:hover
{
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 10%);
	text-decoration: none;
}


/*#book-page #favourite  a:hover
{
	text-decoration: none;
	background: transparent;
	border: 2px solid #ff9900;
	color: #ff9900;
}*/


#book-page #image-block
{
	width: 30%;
	min-width: 215px;
	float: left;
}


#book-page img#cover
{
	padding: 5px;
	background: hsl(0, 0%, 100%);
	border: 1px solid hsl(0, 0%, 80%);
	box-shadow: 0px 0px 5px hsl(0, 0%, 80%);
	width: 100%;
	margin: 0 auto 0 auto;
	max-width: 270px;
	display: block;
}


#book-page #detail-block
{
	float: left;
	margin: 0.5em 0 0 0;
	padding: 0 3em 0 2.5em;
	width: 70%;
}


#book-page h1
{
	color: hsl(0, 0%, 30%);
	margin: 0.2em 0 0.2em 0;
	font-size: 3em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.3em;
}


#book-page h2
{
	color: hsl(0, 0%, 40%);
	font-family: 'open_sanssemibold', sans-serif;
	font-size: 1.5em;
}


#book-page h3
{
	margin: 1em 0 0.8em 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
}


#book-page #description
{
	color: hsl(0, 0%, 30%);
	font-size: 1.2em;
	line-height: 1.4em;
	margin: 2em 0 1em 0;
	clear: both;
}


#book-page #book-details
{
	display: block;
	margin: 2em 0 0 0;
	width: 100%;
	text-align: center;
}


#book-page #book-details ul
{
	list-style: none;
	font-size: 0.9em;
}


#book-page #book-details ul li
{
	margin-bottom: 0.6em;
	color: hsl(0, 0%, 30%);
}


#book-page #icons
{
	margin: 2em 0 0 0;
	font-size: 1.3em;
	color: hsl(0, 0%, 30%);
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: left;
}


#book-page #icons span
{
	text-align: center;
	padding: 0.5em 1.5em 0.5em 0;
}


#book-page #icons span.disabled
{
	color: hsl(0, 0%, 60%);
}


/*#book-page #icons .unlock, .book .unlock
{
	color: hsl(0, 100%, 40%);
}
*/

p.locked
{
	color: hsl(0, 0%, 50%);
	font-style: italic;
	padding-top: 0.5em;
}


#book-page #bookshop
{
    margin: 5em auto 1em auto;
	text-align: center;
	border: 1px solid hsl(0, 0%, 85%);
	border-radius: 4px;
	width: 500px;
	padding: 0.5em 2em 0.5em 2em;
	background: hsl(0, 0%, 98%);
}


#book-page #bookshop img
{
	width: 50px;
	float: left;
	opacity: 0.7;
}


#book-page #bookshop h3
{
	text-align: center;
	margin: 0.8em 0 0.8em 0;
	font-size: 1em;
}


#book-page a.bookshop
{
	text-decoration: underline;
}


#book-page a.bookshop:hover
{
	color: hsl(36, 100%, 50%);
    text-decoration: none;
}


#book-page #status-change
{
	margin: 5em 0 5em 0;
	width: 100%;
	text-align: center;
}


#book-page #status-change h3
{
	margin: 1.2em 0 0.2em 0;
}


#book-page #status-change textarea
{
	border: 1px dashed hsl(0, 0%, 0%);
	padding: 1em;
	font-family: 'open_sansregular', sans-serif;
	width: 500px;
	background: #fff url(/static/images/recommendation-background.png) center center no-repeat;
}


#book-page #status-change select
{
	background: hsl(0, 0%, 100%);
	padding: 0.5em 0.8em 0.5em 0.8em;
	color: hsl(0, 0%, 20%);
	border: 1px dashed hsl(0, 0%, 20%);
	margin: 0 0 0.4em 0;
	width: 500px;
	text-align: center;
	font-size: 1.2em;
	font-family: 'open_sansregular', sans-serif;
}


#book-page #status-change select:hover, #book-page #status-change select:focus, #book-page #status-change textarea:focus, #book-page #status-change textarea:hover
{
	background: hsl(0, 0%, 100%);
	color: hsl(0, 0%, 20%);
	border: 1px solid hsl(36, 100%, 50%);
}

#book-page #status-change input[type="submit"]
{
	width: 500px;
	margin: 0.6em auto 0 auto;
	font-size: 1.2em;
	padding: 0.5em;
	font-family: 'open_sanssemibold', sans-serif;
}


#book-page a.download
{
	background: hsl(36, 100%, 50%);
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0 0.4em 0.8em;
	border-radius: 2px;
	height: 50px;
	text-align: center;
}


#book-page a.download span
{
	font-size: 0.7em;
	font-style: italic;
}


#book-page a.download:hover
{
	background: hsl(36, 100%, 62%);
	text-decoration: none;
}


#book-page #recommendation
{
    margin: 5em auto 1em auto;
	text-align: center;
	border: 1px solid hsl(0, 0%, 85%);
	border-radius: 4px;
	width: 500px;
	padding: 1.5em 2em 3em 2em;
	background: hsl(0, 0%, 98%);
}


#book-page #recommendation #recommendation-body
{
	color: hsl(0, 0%, 20%);
	text-align: left;
}


#promo-box
{
	padding: 2em 1em 2em 1em;
	text-align: center;
	float: left;
	clear: both;
	background: url('/static/images/banner/coffee-and-reader-banner.jpg') no-repeat center center;
	background-size: cover;
	width: 100%;
	box-shadow: 0 -1px 10px hsl(0, 0%, 80%);
	color: hsl(0, 0%, 100%);
	text-shadow: 0 0 4px hsl(0, 0%, 0%);
}


#promo-box h2
{
	margin: 0.2em 0 0.2em 0;
	color: hsl(0, 0%, 100%);
}


a.action-negative
{
	color: hsl(0, 100%, 50%);
	font-size: 1.1em;
	text-decoration: underline;
	text-align: center;
	font-family: 'open_sanssemibold';
}


a.action-negative:hover
{
	/*color: hsl(0, 98%, 45%);*/
	background: hsl(0, 99%, 36%);
	color: hsl(0, 0%, 100%);
	text-decoration: none;
	padding: 0.2em 0.5em;
}


input[type="submit"].button-negative
{
	background: hsl(0, 99%, 36%);
	padding: 0.5em 0.8em;
	color: hsl(0, 0%, 100%);
	font-weight: bold;
	font-size: 1.3em;
	margin: 1em;
}


input[type="submit"].button-negative:hover
{
	background: hsl(0, 100%, 50%);
	color: hsl(0, 0%, 100%);
}


/*  Search  */

#search-page
{

}


.search-form
{
	text-align: center;
}


.search-form input:not([type="submit"]):not([type="file"])
{
	font-size: 2em;
	width: 350px;
}


.search-form select
{
	background: hsl(0, 0%, 100%);
	padding: 0.3em 0.8em 0.3em 0.8em;
	color: hsl(0, 0%, 20%);
	border: 2px solid hsl(0, 0%, 20%);
	margin: 0 1em 0;
	font-size: 1.2em;
	width: 350px;
}


.search-form input[type="submit"]
{
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    padding: 0.3em 0.5em 0.3em 0.5em;
    background: hsl(0, 0%, 20%);
	width: 350px;
	font-size: 2em;
	margin: 1em 0 1.5em 0;
}


.search-form input[type="submit"]:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}



/*  Home page views  */


.more-list
{
	text-align: center;
	font-size: 1.4em;
	font-family: open_sanssemibold;
}


#latest-activity, #promo-logged-out
{
	width: 50%;
	padding: 0 1em 0 1em;
	float: left;
}


#latest-public-activity.feed-column h3
{
    font-size: 0.9em;
    line-height: 1.4em;
}


#latest-public-activity.logged-in
{
    width: 50%;
    float: left;
}


#promo-logged-out ul
{
	margin: 1em 0 1.2em 3em;
	line-height: 1.7em;
}


#promo-logged-out h3
{
	font-size: 1.6em;
	margin: 0.5em 0 0.1em 0;
	font-weight: normal;
	font-family: 'open_sanssemibold', sans-serif;
}


#currently-reading, #favourite-books, #recommended-books
{
	background: hsl(0, 0%, 93%);
	padding: 4em 0 0 0;
	width: 100%;
	float: left;
}


#recommended-books
{
	padding-bottom: 3em;
}


#currently-reading
{
	text-align: center;
}


#currently-reading h2, #currently-reading p
{
	text-align: center;
}


#latest-public-activity p
{
	margin-bottom: 1em;
	font-size: 1.2em;
	color: hsl(0, 0%, 30%)
}


#recommended-books p.intro, #favourite-books p.intro, #currently-reading p.intro
{
	font-size: 1.4em;
	margin: 0 0 1em 0;
	padding: 0;
	color: hsl(0, 0%, 30%);
}


.listing p.intro
{
	font-size: 1.4em;
	margin: 0 0 1em 0;
	padding: 0;
	color: hsl(0, 0%, 30%);
	text-align: center;
}


.feed-column
{
	width: 33%;
	float: left;
	padding: 0 2em 0 2em;
	margin: 2em 0 4em 0;
    min-width: 370px;
}


.feed-column h2
{
	text-align:center;
	margin-bottom: 1em;
}


.feed-column ul
{
	list-style: none;
}


.feed-column ul li
{
	margin: 0 0 3em 0;
}


.feed-column ul li h3
{
	/*margin-bottom: 0.3em;*/
}


.feed-column ul li h3 a
{
	font-size: 1.5em;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: hsl(36, 100%, 50%);
}


.feed-column ul li a img
{
	margin: 1em 0;
}


.feed-column ul li p
{
	color: hsl(0, 0%, 10%);
	margin: 0.5em 0 0.5em 0;
}


.feed-column ul li .date
{
	color: hsl(0, 0%, 20%);
	font-size: 0.9em;
	font-style: italic;
}


#latest-bookshops h3
{
	text-align: center;
}


#latest-news
{
	text-align: center;
}


#latest-news ul li img
{
	width: 100%;
}



/*  Landing  */

#landing-banner
{
	overflow: auto;
	padding: 0.5em 2.5em 0.6em 2.5em;
	text-shadow: 0px 0px 4px hsl(0, 0%, 0%);
	background: linear-gradient( rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) );
	box-shadow: 0 2px 10px hsl(0, 0%, 60%);
	margin: 0 0 2em 0;
}


#landing-banner h1
{
	font-size: 1.5em;
	font-family: 'open_sanssemibold', sans-serif;
	font-weight: normal;
	line-height: 1.5em;
	margin: 0;
	color: hsl(0, 100%, 100%);
}


#landing-banner h2
{
	font-size: 1.1em;
	font-family: 'open_sansregular', sans-serif;
	margin: 0;
	font-weight: normal;
	color: hsl(0, 100%, 100%);
}


#landing-banner #landing-text
{
	width: 66%;
	float: left;
}


#landing-banner img.drm-free
{
	opacity: 0.5;
	float: right;
}


#upload-count
{
	text-align: center;
	color: hsl(0, 0%, 30%);
	line-height: 1em;
	margin: 0 auto 1em auto;
	padding: 0 0 0.5em 0;
	border-bottom: 4px solid hsla(36, 100%, 50%, 0.75);
	text-transform: uppercase;
	font-family: open_sansregular;
	width: 50%;
}


#upload-count strong
{
	font-family: 'ExoDemiBold';
	font-weight: normal;
	font-size: 2em;
	line-height: 1.5em;
}


#landing-banner .cta
{
	float: right;
	width: 33%;
	text-align: center;
	padding-top: 0.1em;
}


img.more-image
{
  display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}


.image-box
{
	width: 50%;
}


#left
{
	float: left;
}


#right
{
	float: right;
	clear: right;
}


p.promo-questions
{
	font-size: 1.6em;
	font-family: 'open_sanssemibold', sans-serif;
	margin-bottom: 0.8em;
	color: hsl(0, 0%, 20%);
}


.landing-panel
{
	/*background: hsl(0, 0%,97%);*/
	color: hsl(0, 0%, 30%);
    padding: 2em 0 2em 8em;
    width: 50%;
    text-align: center;
}


.landing-panel h2
{
	margin: 1em 0 0.5em 0;
}


.landing-panel h3
{
	line-height: 1.7em;
	margin-bottom: 1em;
  font-size: 1.8em;
	text-align: center;
	color: hsl(0, 0%, 40%);
	font-family: open_sanssemibold;
}


.landing-panel p
{
	font-size: 1.3em;
	margin: 0 auto 1em auto;
	color: hsl(0, 0%, 30%);
	line-height: 1.6em;
}


ul#benefits
{
	font-size: 1.2em;
	margin: 0 auto 6em auto;
	list-style: none;
	clear: both;
	width: 100%;
	text-align: center;
	padding-top: 2em;
}


ul#benefits li
{
	margin: 1em 0 1em 0;
	color: hsl(0, 0%, 30%);
	font-size: 1em;
	width: 48%;
	padding: 0.5em 0.8em;
	vertical-align: top;
	position: relative;
	display: inline-block;
	text-align: center;
}


ul#benefits li .fa
{
	font-size: 3em;
	width: 1.1em;
	/*color: hsl(0, 0%, 80%);*/
	color: hsla(41.6, 100%, 49.8%, 0.6);
	text-align: center;
	float: none;
	display: inline;
}



/*  Features
===================*/

#feature-box
{
	width: 100%;
	height: 400px;
	margin: 0 0 2.5em 0;
	padding: 0 2em 0 2.3em;
}

#feature-box h2, #feature-box p
{
	color: hsl(0, 100%, 100%);
	text-shadow: 0 0 4px hsl(0, 0%, 0%);
}


#feature-box h2
{
	margin: 0;
}


#feature-box h3
{
	background: hsl(0, 100%, 35%);
	padding: 0.3em 1em 0.4em 1em;
	position: absolute;
	right: 0;
	top: 1.1em;
	color: hsl(0, 100%, 100%);
	font-family: open_sanssemibold;
	font-weight: normal;
	font-size: 1em;
}


#feature-box h3 .fa
{
	padding-right: 0.4em;
}


#feature-box p
{
	font-size: 1.4em;
	margin: 0;
}


#feature-box div
{
	position: absolute;
	bottom: 2em;
	padding-right: 2em;
}


#feature-1, #feature-2, #feature-3
{
	float: left;
	text-decoration: none;
	color: hsl(0, 100%, 100%);
	position: relative;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


#feature-1:hover, #feature-2:hover, #feature-3:hover
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


#feature-1
{
	padding: 2em;
	width: 61%;
	background: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0),
	  rgba(0, 0, 0, 1)
    ),url('/static/images/features/babylon-steel-feature.jpg') no-repeat center center;
	background-size: cover;
	height: 100%;
}


#feature-1 h2
{
	font-size: 4em;
	padding-bottom: 1em;
}


#feature-1 h2 span
{
	font-size: 0.7em;
}


#feature-2, #feature-3
{
	width: 38%;
	padding: 1.5em;
}


#feature-2
{
	background: linear-gradient(
	rgba(0, 0, 0, 0.0), 
	rgba(0, 0, 0, 0.0), 
	rgba(0, 0, 0, 0.8) 
	),url('/static/images/features/drivethrufiction.png') no-repeat center center;
	background-size: cover;
	height: 100%;
	margin: 0 0 0.5em 0.5em;
}


#feature-3
{
	background: linear-gradient(
	rgba(0, 0, 0, 0.0),
	rgba(0, 0, 0, 0.7) 
	),url('/static/images/features/favourites-features.jpg') no-repeat center center;
	background-size: cover;
	height: 28%;
	margin: 0 0 0 0.5em;
}


#feature-box #feature-3 div
{
	bottom: 1em;
}


#feature-box #feature-3 h2
{
	font-size: 2em;
	line-height: 1.3em;
}




.landing-panel .fa
{
	font-size: 0.5em;
	/*float: left;*/
	margin-right: 0.4em;
	color: hsl(36, 100%, 50%);
	vertical-align: middle;
}


.landing-panel .testimonial
{
	text-align: center;
}

.landing-panel .testimonial p
{
	font-style: italic;
    font-size: 1.4em;
    padding: 2em;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.5em;
	width: 33%;
	float: left;
}


.landing-panel .testimonial .fa
{
	font-size: 1.5em;
	margin: 0 0.3em 0 0.3em;
    color: hsla(36, 100%, 50%, 0.3);
}


#launch-alert ul
{
	text-align: left;
	margin: 2em 0 3em 3em;
	list-style: none;
}


#launch-alert ul li
{
	margin-bottom: 0.5em;
}


#launch-alert input[type="text"]
{
	font-size: 2em;
	width: 80%;
	padding: 0.5em 0.8em 0.5em 0.8em;
	margin: 0;
	text-align: center;
	font-family: 'ExoDemiBold', Helvetica, Arial, sans-serif;
	font-style: italic;
	color: hsl(0, 0%, 40%);
	background: transparent;
}


#launch-alert input[type="text"]:focus
{
	color: hsl(0, 0%, 20%);
}



#launch-alert input[type="submit"]
{
	font-size: 2em;
	width: 80%;
	padding: 0.5em 0.8em 0.5em 0.8em;
	margin: 0;
	text-align: center;
}


#launch-alert ul li a
{
	color: #000;
	text-decoration: underline;
}


#launch-alert ul li a:hover
{
	color: #000;
	text-decoration: none;
}



a.find-out-more
{
	color: #FFFFFF;
	font-size: 1.4em;
	font-family: 'open_sanssemibold', sans-serif;
	text-decoration: none;
	text-shadow: none;
	padding: 6px 10px 6px 10px;
	text-align: center;
	border: 4px solid hsl(36, 100%, 50%);
	text-shadow: 0 0 4px hsl(0, 0%, 0%);
	float: left;
	margin: 0 1em 1em 0;
}


a.find-out-more:hover
{
	background: hsl(36, 100%, 50%);
	color: #FFFFFF;
	text-shadow: none;
}


a.add-to-wishlist
{
	color: #FFFFFF;
	font-size: 1.4em;
	font-family: 'open_sanssemibold', sans-serif;
	text-decoration: none;
	text-shadow: none;
	padding: 6px 10px 6px 10px;
	text-align: center;
	border: 4px solid hsl(36, 100%, 50%);
	text-shadow: 0 0 4px hsl(0, 0%, 0%);
	float: left;
}


a.add-to-wishlist:hover
{
	background: hsl(36, 100%, 50%);
	color: #FFFFFF;
	text-shadow: none;
}



p.newsletter
{
    text-align: center;
    padding-top: 2em;
    margin-bottom: 6em;
}


p.newsletter a
{

	color: hsl(36, 100%, 50%);
	font-size: 1.4em;
	font-family: 'open_sanssemibold', sans-serif;
	margin: 1em 0 0 0;
	text-decoration: none;
	padding: 6px 10px 6px 10px;
	text-align: center;
}


p.newsletter a:hover
{
    text-decoration: underline;
	color: hsl(36, 100%, 50%);
}


a.log-in
{

	background: hsl(36, 100%, 50%);
	color: #FFFFFF;
	display: block;
	font-size: 1.4em;
	width: 100%;
	font-family: 'open_sanssemibold', sans-serif;
	margin: 1em 0 0 0;
	text-decoration: none;
	text-shadow: none;
	border-radius: 3px;
	padding: 6px 10px 6px 10px;
	text-align: center;
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}


a.log-in:hover
{
	background: hsl(36, 100%, 60%);
	color: #FFFFFF;
}


p.no-credit-card
{
	background: hsl(0, 0%, 94.9%);
	padding: 0.5em;
	border-radius: 4px;
	font-size: 1.2em;
}



/*  Activity List */

a.refresh
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.4em 0.5em 0.4em 0.5em;
	background: hsl(0, 0%, 30%);
	font-family: 'open_sanssemibold', sans-serif;
	font-size: 1.1em;
}

a.refresh:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
}


a.refresh .fa
{
	padding-right: 0.4em;
	color: hsl(0, 0%, 60%);
}

a.refresh:hover .fa
{
	padding-right: 0.4em;
	color: hsl(0, 0%, 10%);
}



ul#activity-list
{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	color: hsl(0, 0%, 35%);
}


ul#activity-list li
{
	width: 100%;
	margin: 0 0 0.8em 0;
	float: left;
	clear: left;
	/*box-shadow: 0 1px 6px rgba(0,0,0,.12),0 3px 6px rgba(0,0,0,.12);*/
	display: block;
	background-color: transparent;
	box-sizing: border-box;
	border-bottom: 3px dotted hsl(0, 0%, 85%);
	padding-bottom: 1em;
}


ul#activity-list li .activity-entry-wrapper
{
	width: 40%;
	margin: 0 auto;
}


ul#activity-list .book-detail
{
	padding: 0 0 0.5em 0;
}


ul#activity-list li a
{
	color: hsl(35.5, 99.1%, 45.5%);
	text-decoration: none;
}


ul#activity-list li a:hover
{
	color: hsl(35.5, 99.1%, 60%);
}


ul#activity-list a.activity-cover img
{
	margin: 0 0.8em 0 0;
	border: none;
	float: left;
	background: url('/img/library-placeholder.png') no-repeat;
	background-size: 100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


ul#activity-list a.activity-cover:hover img
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


ul#activity-list .activity-text
{
	padding: 0;
}


ul#activity-list li h3
{
	font-size: 1.5em;
	line-height: 1.15em;
	font-weight: normal;
	margin: 0.3em 0.4em 0.2em 0;
	font-family: 'open_sansbold', sans-serif;
}


ul#activity-list .activity-user, ul#activity-list .activity-title
{
	font-family: 'open_sanssemibold', sans-serif;
	/*text-decoration: underline;
	-moz-text-decoration-color: hsl(36, 100%, 50%);
	text-decoration-color: hsl(36, 100%, 50%);*/
}


ul#activity-list .activity-author, ul#activity-list .activity-status, ul#activity-list .activity-date
{
	font-family: 'open_sanssemibold', sans-serif;
}



/*  Error Quotes  */

.error-quote
{
	width: 80%;
	margin: 0 auto 0 auto;
	text-align: center;
}


.error-quote blockquote
{
	font-size: 3em;
	font-family: 'Times New Roman', serif;
	margin: 2em 0 1em 0;
}


.error-quote p.author
{
	text-align: right;
	font-family: 'Times New Roman', serif;
	font-style: italic;
	font-size: 2em;
}


/*  Error List  */

#join-box ul.errorlist li, #join-form-box ul.errorlist li
{
	background-color: hsl(0, 100%, 35%);
	color: hsl(0, 100%, 100%);
	padding: 0.3em 0.5em;
	border-radius: 3px;
    text-align: center;
    list-style-image: none;
    list-style: none;
}


/*  Footer  */

footer
{
	background: hsl(220, 7%, 8%);
	padding: 2em 1em 1.5em 1em;
	margin-top: 5em;
	width: 100%;
	height: 120px;
	font-size: 0.7em;
	color: hsl(0, 0%, 40%);
	float: left;
	clear: both;
	position:absolute;
	bottom:0;
}


footer a
{
	color: hsl(0, 0%, 70%);
	text-decoration: none;
}


footer a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: underline;
}


footer #menu
{
	float: right;
	text-align: right;
}


footer p
{
	margin: 0;
}



/*  Upload Widget  */

#widget-box
{
	width: 100%;
	height: 100%;
}


#widget-box a img
{
	vertical-align: middle;
	width: 25px;
	margin-right: 3px;
}


#widget-box a
{
	text-decoration: underline;
}


#widget-box a:hover
{
	color: hsl(36, 100%, 50%);
	text-decoration: none;
	cursor: pointer;
}


#widget-box .success
{
	text-align: center;
	padding: 3px 0 2px 0;
	background: hsl(36, 100%, 50%);
	color:  hsl(0, 0%, 20%);
	height: 25px;
}


#widget-box .success a
{
	color:  hsl(0, 0%, 20%);
	text-decoration: underline;
	font-weight: bold;
}


#widget-box .success a:hover
{
	color:  hsl(0, 0%, 20%);
	text-decoration: none;
}



#upload-widget-button
{
	text-decoration: none;
	color: hsl(0, 0%, 100%);
	padding: 0.3em 0.5em 0.3em 0.5em;
	background: hsl(0, 0%, 20%);
	width: 100%;
	height: 100%;
}


#upload-widget-button:hover
{
	color: hsl(0, 0%, 10%);
	background: hsl(36, 100%, 50%);
	cursor: pointer;
}



/*  Upload Page   */

.format-mention
{
	font-family: exobold;
	font-size: 1.5rem;
}



/*  Upload Loading Spinner  */

.ripple {
	display: none;
}

.ripple.display{
	display: block;
	margin: 60px auto 60px auto;
}

.ripple.display.widget{}



/* ================================== */


@media all and (max-width: 1120px)
{

    .feed-column
	{
		width: 50%;
	}

    
    #latest-public-activity.feed-column
    {
        clear: left;
        margin: 3em auto 0 auto;
        float: none;
    }



}


/* ================================== */


@media all and (max-width: 870px)
{
	ul#user-menu
	{
		font-size: 1.2em;
		padding: 1em 0.5em 1.5em 0;
		margin: 0 auto 0 auto;
		float: none;
		text-align: center;
		width: 100%;
	}
	
	ul#user-menu li
	{
		float: none;
		vertical-align: top;
		position: relative;
		display: inline-block;
	}

	user-menu img.avatar
	{
		display: none;
	}

	#ext-links
	{
		width: 100%;
		margin: 1em 0 1em 0;
		float: none;
	}

	#logo
	{
		display: none;
	}
	
	body header #banner h1
	{
		text-align: center;
	}
	
	body header #banner h1 a
	{
		margin-bottom: 0.5em;
		padding: 0;
		text-align: center;
	}

	body header h1
	{
		clear: both;
	}

    #search-menu
    {
	    padding-left: 0;
    }


	#landing
	{
		width: 100%;
		padding: 0;
	}

	#launch-alert
	{
		width: 100%;
	}

	#launch-alert ul
	{
		list-style: none;
		text-align: center;
	}

	#landing-banner
	{
		margin: 0;
		text-align: center;
		box-shadow: none;
	}

	#landing-banner #landing-text
	{
		width: 100%;
		padding: 0;
	}

	#landing-banner .cta
	{
		width: 100%;
		padding: 1em 0 0 0;
		margin: 0;
		text-align: center;
	}

	#upload-count
	{
		width: 100%;
		padding-top: 1em;
		overflow: auto;
	}

	#landing-banner h1
	{
		font-size: 2em;
	}
	
	#landing-banner h2
	{
		font-size: 1.2em;
	}

	.image-box
	{
		width: 100%;
	}

	img.more-image
	{
		width: 100%;
	}

	#promo-logged-out
	{
		width: 100%;
	}

	.landing-panel
	{
		width: 100%;
        padding: 2em;
	}

	.landing-panel h2
	{
		text-align: center;
	}

	.landing-panel .fa
	{
		display: none;
	}

	.landing-panel .testimonial .fa
	{
		display: block;
	}
	
	.landing-panel .testimonial
	{
		width: 100%;
	}
	
	.landing-panel .testimonial p
	{
		width: 100%;
		padding: 0;
	}

	.landing-panel ul
	{
		text-align: center;
	}

	.landing-panel ul li::before {
	  content: "";
	}
	
	#feature-box
	{
		height: unset;
		padding: 0;
	}

	#feature-box div
	{
		position: unset;
		word-wrap: break-word;
	}

	#feature-1, #feature-2, #feature-3
	{
		float: left;
		width: 100%;
		border: 0;
		margin: 0;
	}
	
	#feature-box h2
	{
		font-size: 2em;
	}
	
	#feature-2, #feature-3
	{
		margin-top: 8px;
	}
	
	#feature-1 div
	{
		padding: 2.5em 0 0 0;
	}
	
	#feature-2 div, #feature-3 div
	{
		padding: 0;
	}

	ul#benefits
	{
		width: 100%;
	}

	ul#benefits li
	{
		width: 100%;
		height: auto;
		text-align: center;
	}

	ul#benefits li .fa
	{
		float: none;
		display: inline;
		text-align: center;
	}



	/*  Feed Columns
	===================*/

	#latest-public-activity
	{
		width: 100%;
		margin-top: 3em;
	}

	#latest-public-activity h2, #latest-activity h2
	{
		text-align: center;
	}


    #latest-public-activity.logged-in
    {
        width: 100%;
    }

	#currently-reading
	{
		margin-top: 1em;
	}
	
	#currently-reading, #favourite-books, #recommended-books
	{
		padding: 4em 1.5em 0 1.5em;
	}
	
	.feed-column
	{
		width: 100%;
		min-width: unset;
	}

	.feed-column ul li a img
	{
		float: none;
		margin: 0 0 1em 0;
	}

    #latest-news
    {
        text-align: center;
    }

	#latest-activity
	{
		width: 100%;
	}

	#latest-activity, #latest-public-activity, #promo-logged-out
	{
		padding: 0;
	}

	#library-menu
	{
		padding: 0;
	}

	#library-menu h1
	{
		margin: 0.5em;
		text-align: center;
		float: none
	}
	
	#library-menu ul
	{
		
	}
	
	#library-menu ul li a
	{
		font-size: 1em;
	}
	
	#library-menu ul li a .book-count
	{
		display: inline;
	}

	#library-menu ul li a.spacer
    {
		margin-left: 0;
        margin-top: 4px;
	}
	
	ul#tools
	{
		clear: both;
		float: none;
		width: 100%;
		padding: 0;
		height: auto;
	}
	
	ul#tools li
	{
		width: 100%;
	}
	
	ul#tools li a
	{
		width: 100%;
		height: auto;
		font-size: inherit;
		padding: 0.4em 0.5em 0.4em 0.5em;
	}

	a.book, .book-blank, .user-box
	{
		width: 100%;
		margin-left: 0;
	}

	#page
	{
		padding-bottom: 190px;
	}

	#login-join-screen
	{
		width: 100%;
		margin: 0;
	}

	#login-box, #join-box
	{
		float: none;
		width: 100%;
		padding: 0;
	}

	#login-box
	{
		margin-bottom: 3em;
	}

	#join-form-box
	{
		width: 100%;
		border: none;
		box-shadow: none;
	}

	#book-page #image-block, #book-page #detail-block, #book-page #detail-block #book-details, #book-page #detail-block #status-change
	{
		width: 100%;
		border: none;
		padding: 0;
		text-align: center;
	}

	a.tweet-button
	{
		margin: 3em auto 0 auto;
	}
	
	#book-page a.tweet-button
	{
		margin: 3em auto 0 auto;
	}
	
	#book-page h1
	{
		font-size: 2.5em;
	}
	
	#book-page h2
	{
		font-size: 1em;
	}

	#book-page .description
	{
		text-align: left;
	}

	#book-page #icons
	{
		justify-content: center;
	}

	#book-page #detail-block #status-change
	{
		margin-bottom: 3em;
	}

	#book-page #detail-block h1, #book-page #detail-block h2
	{
		text-align: center;
	}

	#book-page #detail-block a.download
	{
		float: none;
		margin: 2em auto 0 auto;
		width: 100%;
		border-radius: 0;
	}

	#book-page #detail-block #book-lock
	{
		float: none;
		margin: 2em auto 0 auto;
	}

	#book-page #detail-block #book-lock a
	{
		float: none;
	}

	#book-page #favourite
	{
		float: none;
		margin: 2em auto 0 auto;
	}

	#book-page #favourite a, #book-page #favourite .disabled
	{
		float: none;
	}

	#book-page #status-change #recommendation-body, #book-page #recommendation, #book-page #bookshop
	{
		width: 100%;
		min-width: unset;
	}

	#book-page #status-change textarea
	{
		width: 100%;
	}

	#book-page #status-change select
	{

		width: 100%;
	}

	#book-page #status-change input[type="submit"]
	{
		width: 100%;
	}

	.lock-text
	{
		text-align: center;
	}

	.form-page img
	{
		max-width: 100%;
	}

	#upload-book input[type="file"], #upload-book input[type="submit"]
	{
		width: 100%;
	}
	
	.blog-entry img.blog-banner
	{
		width: 100%;
	}

	.blog-entry img.blog-banner
	{
		width: 100%;
	}

	.article
	{
		width: 100%;
	}


	.article header h1
	{
		font-size: 2.5em;
	}


	.article h2
	{
		font-size: 2em;
		text-align: center;
	}


	.article img
	{
		float: none;
		margin: 1em auto 1em auto;
		width: 100%
	}
	
	
	/*  Activity
	=============*/
	
	ul#activity-list li .activity-entry-wrapper
	{
		width: 100%;
		margin: 0;
	}


	
	/*  Search
	=============*/
	
	input:not([type="submit"]):not([type="file"])
	{
		font-size: 1em;
		width: 100%;
	}
	
	.search-form select
	{
		font-size: 1em;
		width: 100%;
		margin: 0;
	}
	
	
	/*  Footer
	=============*/

	footer
	{
		height: 190px;
		padding-top: 1em;
		overflow: auto;
	}

	footer #menu
	{
		width: 100%;
		text-align: center;
		margin-bottom: 2em;
	}

	footer #footer-content
	{
		text-align: center;
	}

}