/* -----------------------------------------
## Notes
1. Look at iHijabi mobile site for inspiration.
2. Try smaller header sizes for mobile-devices.
3. Make a better menu for smaller devices.

##Important notes
4. change the colour of paragraphs darker
5. change the colour of block quotes darker

## Foundation has a pagination class you can use for the article comments
------------------------------------------*/

/* -----------------------------------------
## Foundation Resets
------------------------------------------*/
/* -----------------------------------------
## anchor links [a tags]
----------------------------------------- */
a {
	color: #0B7A96;
	text-decoration: none;
}
a:visited {
	color: #0B3698;
}
a:hover {
	color: #0066FF;
	text-decoration: underline;
}
/* -----------------------------------------
## paragraphs
----------------------------------------- */
p {
	color: #484848;
	font-size: 16px;
}
p.group, .group p {
	margin: 0;
}
p.group:last-child, .group p:last-child {
	margin: 0 0 14px;
}
/* -----------------------------------------
## headings
----------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	color: #505050;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 14px 0 14px;
	padding: 0;
}
h1 {
	font-size: 220%;
}
h2 {
	font-size: 200%;
}
h3 {
	font-size: 180%;
}
h4 {
	font-size: 160%;
}
h5 {
	font-size: 140%;
}
h6 {
	font-size: 120%;
}
/* -----------------------------------------
## headings for small devices
----------------------------------------- */
@media only screen and (max-width: 766px) {
	h1 {
		font-size: 160%;
	}
	h2 {
		font-size: 145%;
	}
	h3 {
		font-size: 130%;
	}
	h4 {
		font-size: 115%;
	}
	h5 {
		font-size: 100%;
	}
	h6 {
		font-size: 100%;
	}
}
/* -----------------------------------------
## heading links
----------------------------------------- */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, #branding a {
    color: #FF3333;/*novascotia salmon*/
	transition: color 0.5s;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: #FF3333;/*novascotia salmon*/
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	color: #BE2625;/*strawberry*/
    text-decoration: underline;
}
/* -----------------------------------------
## heading with description
----------------------------------------- */
h1 + .description, h2 + .description, h3 + .description {
	margin: -10px 0 4px;
}
.description {
	font-size: 100%;
	font-style: italic;
	font-weight: bold;
}
.panel h1, .panel h1 + .description {
	margin: 0;
}
/* -----------------------------------------
## .nav-bar reset
----------------------------------------- */
.nav-bar {
	background: none;
	border: none;
	height: auto;
	margin: 0;
	padding: 0;
}
.nav-bar li, .nav-bar li:first-child, .nav-bar li:last-child {
	border: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}
.nav-bar li a {
	color: #000;
	line-height: 34px; /* Take into consideration borders when using line-height.
	 					* Because if you have 40px line-height and 2px border the
	 					* overall height of the ul.nav-bar will be 42px.
						*/
}
.nav-bar li:hover {
	background: #333;
}
.nav-bar li:hover a {
	color: #FFF;
}
/* -----------------------------------------
## .sub-nav
----------------------------------------- */
dl.sub-nav {
	height: auto;
	margin: 0;
	padding: 5px 0;
}
dl.sub-nav dd a {
	border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
dl.sub-nav dd.active a {
	border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
}
/* -----------------------------------------
## .breadcrumbs
----------------------------------------- */
ul.breadcrumbs {
	border: 1px solid #e9e9e9;
	border-width: 1px;
	border-radius: 0 0 2px 2px;
	-o-border-radius: 0 0 2px 2px;
	-ms-border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	-webkit-border-radius: 0 0 2px 2px;
	margin: 0;
	padding: 3px 30px;
}
ul.breadcrumbs li a {
	color: #8D38C9;
}
ul.breadcrumbs li.current a {
	color: #AAA;
	cursor: pointer;
	font-weight: bold;
	text-decoration: underline;
}
ul.breadcrumbs li a:hover {
	color: #6C2DC7;
}
ul.breadcrumbs li:before {
	color: #AAA;
	content: "»";
}
/* -----------------------------------------
## .has-tip
----------------------------------------- */
.has-tip {
	border: 0 dotted #333;
	cursor: help;
	font-weight: normal;
}
a.has-tip {
	cursor: pointer;
}
span.has-tip {
	border-width: 0 0 1px 0;
	font-weight: bold;
}
.has-tip:hover {
	border: none;
	color: #6C2DC7;
}
/* -----------------------------------------
## .button
----------------------------------------- */
a.button {
	color: #FFF;
}
/* -----------------------------------------
## the orb #orb, my orbit implimentation
------------------------------------------*/
#orb {
	background: #F2F2F2;
	border: 1px solid #DDD;
	margin-top: 14px;
}
#orb { background: url(/images/orb/spinner.gif) center center #f4f4f4 no-repeat; height: 300px; background-size: 32px 32px; }
#orb img, #orb div { display: none; background: #F2F2F2; }

#orb.orbit { background: none; }
#orb.orbit img { display: block; }
/* show directional nav on hover */
.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
/* -----------------------------------------
## container, header, footer
----------------------------------------- */
#container {
	background: #FFF;
	margin: auto;
}
header {
	background: #FFF;
}
footer {
	background: #FFF;
	color: #444;
	font-size: 12px;
	margin-top: 14px;
}
footer p {
	font-size: 12px;
}
/* -----------------------------------------
## Mobile stuff, navigation, branding etc.
----------------------------------------- */
#mobile {
	min-height: 48px;
}
#mobile-nav section ul, #mobile .fixed  {
	border-color: #BE2625;
	border-style: solid;
	border-width: 0;
}
#mobile-nav section ul {
	border-top-width: 3px;
}
#mobile .fixed {
	border-bottom-width: 3px;
}
#mobile-nav section ul {
	text-align: center;
}
#mobile-branding {
	background: transparent url('/images/i/bismillah.png') no-repeat 20px center;
	-webkit-background-size: auto 47px;
	background-size: auto 40px;
	padding-left: 65px;
}
.no-js #mobile {
	display: none !important;
}
.no-js #non-mobile {
	display: block !important;
}
/* -----------------------------------------
## content
----------------------------------------- */
#content .panel {
	margin-top: 14px;
	margin-bottom: 14px;
}
/* -----------------------------------------
## date and time box .dateTime
----------------------------------------- */
.dateTime {
	color: #FFF;
	display: block;
	float: right;
	font-family: Verdana, sans-serif;
	margin-right: 14px;
	margin-bottom: 7px;
	overflow: hidden;
	text-align: center;
	width: 63px;
}
.dateTime u {
	background: #BE2625;
	border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	display: block;
	font-size: 40px;
	font-weight: bold;
	line-height: 30px;
	padding: 6px 0 4px;
	text-decoration: none;
}
.dateTime b {
	background: #BE2625;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	display: block;
	font-weight: normal;
	font-size: 23px;
	line-height: 23px;
	text-transform: uppercase;
	padding: 0 4px 2px;
}
.dateTime i {
	background: #FF8C00;
	border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	display: block;
	font-style: normal;
	font-size: 20px;
	line-height: 20px;
	margin: 0;
	padding: 0 4px 6px;
}
.dateTime em {
	background: #BE2625;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	display: block;
	font-style: normal;
	font-weight: bold;
	margin-top: 7px;
	padding: 7px 0;
}
/* -----------------------------------------
## comments and .dateTime
----------------------------------------- */
.comment .dateTime {
	float: none;
	margin: 0;
	padding: 0;
	width: 56px;
}
.comment .dateTime u {
	background: transparent;
	color: #444;
	font-size: 23px;
	line-height: 18px;
	padding: 0;
}
.comment .dateTime b {
	background: transparent;
	color: #444;
	font-size: 15px;
	line-height: 15px;
	padding: 0;
}
.comment .dateTime i {
	background: transparent;
	color: #444;
	font-size: 12px;
	line-height: 12px;
	padding: 0;
}
.comment .dateTime em {
	background: transparent;
	color: #444;
	font-size: 11px;
	font-weight: normal;
	padding: 0;
}
.comment img {
	display: block;
	max-width: 56px;
	max-height: 56px;
	border: 1px solid #DDD;
	margin: 0 0 11px;
}
.comment {
	padding: 14px;
	overflow: auto;/* fix float clearing */
	margin-bottom: 28px;
	box-shadow: -6px 0 8px #999;
	position: relative;
}
.comment .reply {
	position: absolute;
	bottom: 14px;
	right: 14px;
}
.comment .reply .button {
	background: #F05558;
	border-color: #782A2C;
}
.comment .reply .button:hover {
	background: #A83B3E;
}
.comment .reply .button:before {
	content: "« ";
}
.comment .options {
	position: absolute;
	bottom: 14px;
	left: 84px;
	font-size: 12px;
	line-height: 24px;
}
.msgContainer {
	background: #FFC;
	margin-left: 43px;
	border: 2px solid #F05558;
	border-radius: 0 4px 4px 4px;
	min-height: 108px;
}
.details {
	float: left;
	width: 55px;
}
.comment .name {
	padding: 14px;
	font-weight: bold;
	padding-bottom: 7px;
	margin-left: 55px;
}
.comment .name:after {
	content: " said:";
}
.comment .message {
	padding: 0 28px 28px;
	font: 14px/17px ;
	margin-left: 55px;
	line-height: 145%;
	font-style: italic;
	text-align: justify;
}
/* fake box to catch out spammer bots, hidden from humans */
.commentUR {
	display: none;
}
.postbuttons {
	text-align: right;
}
.bar {
	border-color: #F05558;
	border-width: 3px;
}
@media only screen and (max-width: 766px) {
	.dateTime {
		border-radius: 0;
		color: #333;
		display:  block;
		float: none;
		font-weight: bold;
		margin: 0 0 15px 15px;
		max-width: none;
		overflow: visible;
		padding: 0;
		text-align: left;
		width: auto;
	}
	.dateTime u, .dateTime b, .dateTime i {
		background: transparent;
		border-radius: 0;
		color: #333;
		display: inline;
		height: auto;
		font-weight: bold;
		font-style: normal;
		font-size: 13px;
		font-family: inherit;
		line-height: 16px;
		margin: 0;
		max-width: none;
		padding: 0;
		text-transform: none;
		white-space: normal;
		width: auto;
	}
	.dateTime:before {
		color: #333;
		content: "» posted on ";
		font-weight: bold;
	}
}
/* -----------------------------------------
## .story, .full-article
----------------------------------------- */
.story {
	border-top: 1px solid #D9D9D9;
}
.story p {
    max-width: 470px;
}
.story:first-child {
	border-top: 0;
	border-top: none;
}
.full-article p {
	max-width: 470px;
}
/* -----------------------------------------
## search box
----------------------------------------- */
#cse-search-box .button {
	background-color: #FF3333;/*novascotia salmon*/;
	border-color: #BE2625;
}
#cse-search-box .button:hover {
	background-color: #BE2625;
}
#q {
	border-color: #e9e9e9 !important;
	border-radius: 4px 0 0 4px;
	border-width: 1px 0 1px 1px !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
#search-button {
	background: #990505;
	border-color: #e9e9e9;
	border-width: 1px 1px 1px 0;
	border-radius: 0 4px 4px 0;
	-o-border-radius: 0 4px 4px 0;
	-ms-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}
#search-button:hover {
	background: #df1010;
}
/* -----------------------------------------
## .sub-nav (theme changer)
----------------------------------------- */
dl.sub-nav dt {
	color: #FFF;
}
dl.sub-nav a {
	color: #FFF;
}
dl.sub-nav dd.active a {
	background: #282828;
}
dl.sub-nav dd a:hover {
	color: #E1E1E1;
}
/* -----------------------------------------
## primary navigation (#primary-nav)
----------------------------------------- */
#primary-nav {
	border: none; /* really make sure border is gone */
	border-bottom: 7px solid #f05558;
	margin-top: 10px;
	overflow: hidden; /* for borders of li/a elements to round off too */
	padding-bottom: 3px;
	text-align: center;
}
#primary-nav li {
	display: inline; /* to center the navigation */
	float: none; /* to center the navigation */
	padding: 0 7px;
}
#primary-nav li a {
	border-radius: 2px; /* if you change this, remember to change the browser specifics */
	color: #555;
	display: inline-block; /* to center the navigation */
	padding: 0 7px;
	min-height: 25px; /* incase height is not there, white text will come up on hover, this should be a fall back to prevent white on white text */
	font-weight: bold;

	transition: color 0.1s, background 0.5s;
	-o-transition: color 0.1s, background 0.5s;
	-moz-transition: color 0.1s, background 0.5s;
	-webkit-transition: color 0.1s, background 0.5s;

	/* browser specifics border-radius */
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#primary-nav li a:hover {
	background: #f05558;
	color: #fff;
}
#primary-nav li:hover {
	background: none;
}
#featured-link, #featured-link a {
	color: gold;
	font: italic 13px/13px "Arial Narrow", Arial, Verdana, Helvetica;
	margin: 0;
	text-align: center;
}
/* -----------------------------------------
## secondary navigation (#secondary-nav)
----------------------------------------- */
#secondary-nav {
	background: none;
	border: none;
	border-top: 7px solid #f05558;
	padding-top: 3px;
	text-align: center;
}
#secondary-nav li {
	float: none;
	display: inline;
}
#secondary-nav li a {
	color: #444;
	display: inline-block;
	font-weight: bold;

	border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#secondary-nav li a:hover {
	background: #f05558;
	color: #fff;
}
/* -----------------------------------------
## list of Quran reciters (.reciters-list)
----------------------------------------- */

/* -----------------------------------------
## - special list because it creates columns
## - for example:
##		_________________
##		|li 1	|li 2	|
##		|li 3	|li 4	|
##		|li 5	|li 6	|
##		|li 7	|li 8	|
##		|li 9	|li 10	|
##		|li 11	|li 12	|
##		|_______|_______|
----------------------------------------- */
ul.reciters-list {
	list-style: none;
	overflow: auto;/* to clear the float */
	width: 100%;
}
ul.reciters-list li {
	font-size: 15px;
	margin: 0 0 7px;
	padding: 0;
}
ul.reciters-list li a {
	text-decoration: none;
}
ul.reciters-list li:before {
	content: "» ";
	font-size: 18px;
}
ul.reciters-list li a:hover {
	text-decoration: underline;
}
ul.reciters-list li:last-child {
	margin-bottom: 0;
}
@media only screen and (min-width: 767px) {
	ul.reciters-list li {
		display: block;
		float: left;
		min-width: 50%;
		max-width: 50%;
	}
	ul.single-column {
		overflow: visible; /* because there are no floats anymore */
	}
	ul.single-column li {
		max-width: 100%;
		float: none;
		display: list-item;
	}
}
/* -----------------------------------------
## widget-box
----------------------------------------- */
.widget-box {
	background: #111;
	min-height: 250px;
	border: 1px solid #555;
	border: 0;
	overflow: hidden;
	border-radius: 4px;
}
.widget-box p {
	font-size: 13px;
	margin: 0 0 14px;
	color: #F05558;
}
.widget-box .title {
	color: #DDD;
	height: 30px;
	background: #191919;
	font-family: "Segoe UI";
	margin: 0;
	padding: 0 13px;
}
.widget-box h1, .widget-box h2, .widget-box h3, .widget-box h4, .widget-box h5, .widget-box h6 {
	font-size: 14px;
	line-height: 30px;
	font-weight: normal;
	margin: 0;
}
.widget-box .reciters-list li {
}
.widget-box .reciters-list li:before {
}
.widget-box .reciters-list li a {
	max-width: 280px;
	padding: 4px;
}
.widget-box h1, .widget-box h2, .widget-box h3, .widget-box h4, .widget-box h5, .widget-box h6 {
	display: inline;
	font-weight: bold;
}
.widget-box {
	background: #FFF5CC;
	border: 1px solid #F05558;
	padding: 0 14px;
}
.widget-box .title {
	background: #F05558;
	color: #FFF5CC;
	font-weight: bold;
	margin-left: -14px;
	width: 100%;
	padding-right: 28px;
	box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
.widget-box h1, .widget-box h2, .widget-box h3, .widget-box h4, .widget-box h5, .widget-box h6 {
	color: #FFF5CC;
	font-weight: bold;
}
.widget-box .reciters-list li {
    color: #F05558;
    font-weight: bold;
}
.widget-box .reciters-list li a {
	color: #F05558;
}
.widget-box .reciters-list li a:hover {
	cursor: pointer;
	background: none;
}
/* -----------------------------------------
## .widget-box with no padding
----------------------------------------- */
.widget-box.no-padding {
	padding: 0;
}
.widget-box.no-padding .title {
	margin: 0;
}
.widget-box.no-padding p {
	padding: 0 14px;
}
.widget-box.no-padding .reciters-list {
	padding: 0 14px;
}
/* -----------------------------------------
## list of Quran mp3 (.quranTable)
----------------------------------------- */
.quranTable {
	width: 100%;
	background: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	border: none;
	margin: 0;
}
.quranTable tr, .quranTable td {
	padding: 0;
}
.quranTable td {
	font-weight: bold;
	padding: 7px 0;
}
.quranTable td:first-child {
	padding-left: 14px;
}
.quranTable tr:nth-child(even) { background: #FC9; }
.quranTable a {
	color: #9C1C1F;
}
.quranTable a:visited {
	color: #65090B;
}
.quranTable tr td:last-child {
	text-align: right;
	padding-right: 12px;
}
/* -----------------------------------------
## sidebar
----------------------------------------- */
#sidebar {
	margin-top: 14px;
}
#sidebar .section {
	margin-bottom: 14px;
}
/* -----------------------------------------
## .sidenav
----------------------------------------- */
ul.sidenav {
	color: #009ACD;
	list-style: none;
}
ul.sidenav li:before {
	color: #009ACD;
	content: "» ";
	font-size: 18px;
}
ul.sidenav a {	
	color: #009ACD;
}
/* -----------------------------------------
## sidebar widget-box
----------------------------------------- */
#sidebar .widget-box {
	background: #F2F2F2;
	border-color: #DDD;
	border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	margin-bottom: 14px;
	padding: 0;
	padding-left: 7px;
}
#sidebar .widget-box .title {
	background: #DDD;
}
#sidebar .widget-box h1, #sidebar .widget-box h2, #sidebar .widget-box h3, #sidebar .widget-box h4, #sidebar .widget-box h5, #sidebar .widget-box h6{
	color: #505050;
}
#sidebar .widget-box .reciters-list li, #sidebar .widget-box .reciters-list li a {
	color: #009ACD;
	font-weight: normal;
}

/* -----------------------------------------
## sidebar panel and widget-box
----------------------------------------- */
#sidebar .panel, #sidebar .widget-box {
	border-color: #DDD;
	border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
/* -----------------------------------------
## social icons
----------------------------------------- */
.social-icons {
	text-align: justify;
	width: 100%;
}
.center-spread.social-icons {
	text-align: center;
}
.center-spread.social-icons img {
	margin: 0 14px;
}
.justify.social-icons:after {
	content: "";
	display: inline-block;
	width: 100%;
}
.fbk-like-box {
	background: #F2F2F2;
	border: 1px solid #DDD;
	border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 7px;
}
/* -----------------------------------------
## .news-items
----------------------------------------- */
.news-items h5 {
	margin-top: 0;
}
@media only screen and (max-width: 766px) {
	.news-items .panel {
		margin: auto;
		max-width: 200px;
		text-align: center;
	}
	.news-items .panel p {
		margin: 0;
		max-width: 160px;
	}
	.news-items .panel img {
		min-height: 160px;
		min-width: 160px;
		max-height: 160px;
		max-width: 160px;
	}
	.news-items .panel a.button {
		width: auto;
	}
}
@media only screen and (min-width: 767px) {
	.news-items .panel {
		min-height: 120px;
		overflow: auto;
	}
	.news-items .panel p {
		padding: 0;
	}
	.news-items .panel img {
		float: left;
		margin-right: 5px;
		max-height: 120px;
		max-width: 120px;
	}
	.news-items .panel p:first-child {
		margin: 0;
		max-height: 120px;
		max-width: 120px;
		padding: 0;
	}
}
/* -----------------------------------------
## advertising .advert
----------------------------------------- */
.advert {
	text-align: center;
}
header.advert {
	margin: auto;
	padding: 14px 0;
	border-bottom: 1px solid #DDD;
	max-width: 960px;
}
p.advert-section, .advert-section {
	text-align: center;
	margin: 14px 0;
}
#content .widget-box {
	margin-top: 14px;
}
/* -----------------------------------------
## Branding
----------------------------------------- */
#branding {
	color: #f05558;
	background: #FFF url('/images/i/bismillah.png') no-repeat center 10px;
	padding-top: 104px;
	text-align: center;
	font: bold normal 29px/32px "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
	font-style: none;
	text-transform: uppercase;
	text-decoration: none;
}
#branding a {
	color: #F05558;
	text-decoration: none;
}
#branding a:hover {
	color: #FF3333;
}
/* -----------------------------------------
## Small Screens
----------------------------------------- */
@media only screen and (max-width: 766px) {
	#branding {
		text-align: center;
	}
}
/* -----------------------------------------
## Copyrights
----------------------------------------- */
#copy {
	text-align: center;
}
#copy p {
	color: #666;
	font: 12px/17px arial, verdana, helvetica;
}
/* -----------------------------------------
## book tiles (book-tile)
----------------------------------------- */
.book-tile {
	display: inline-block;
	text-align: center;
	margin: 14px 0 0;
	margin-right: 0;
	width: 32%;
	box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	vertical-align: top;
}
.book-tile .synopsis p {
	display: none;
	max-height: 131px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.book-tile h2 {
	font-size: 15px;
	margin: 0 0 5px;
}
.book-tile .multilink {
	font-size: 12px;
	margin: 0;
}
.book-tile .multilink a:before {
	color: #999;
	content: " | ";
}.book-tile .multilink a:first-child:before {content: none;}
.book-tile .author {
	font-size: 12px;
	font-style: italic;
	margin: 0;
}
.book-tile, .book-tile h2, .book-tile p, .book-tile .author, .book-tile .multilink {
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
.book-tile .author a:before {
	color: orange;
	content: "› ";
	font-size: 15px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none !important;
}
.book-tile .thumbnail {
	height: 170px;
	overflow: hidden;
}
.book-tile .thumbnail img {
	border: 0;
	max-height: 160px;
}
.book-tile section.thumbnail img {
	margin: auto;
}
.book-tile .download {
	background: #F05558;
	border-radius: 1px;
	color: #F2F2F2;
	display: block;
	font: bold 12px Helvetica, Arial, Verdana;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.5s;
	width: 100%;
}
.book-tile .download:hover {
	background: #BE2625;
}
@media only screen and (max-width: 447px) {
	.book-tile {
		border-top: 1px solid #DDD;
		display: block;
		width: 100%;
		margin: 22px 0;
		padding: 22px 0 0;
	}.book-tile:first-child{border-top: none;padding-top:0;}

	.book-tile h2 {
		font-size: 17px;
		margin: 14px 0;
	}
	.book-tile .author {
		font-size: 17px;
		font-style: normal;
		margin: 14px 0;
	}
}
/* -----------------------------------------
## Download Now button (.download-now)
----------------------------------------- */
.widget-box p.lead {
	margin-top: 14px;
}
.download {
	background: #5DA423 url(/images/i/save.png) no-repeat 10px 2px;
	background-size: 14px 14px;
	border-color: #396516;
	padding-left: 33px !important;
}
.download:hover, .download:active , .download:focus{
	background-color: #457A1A;
}
*.no-margin, .no-margin {
	margin: 0 !important;
}
*.no-padding, .no-padding {
	padding: 0 !important;
}