/************************************************************************
 * What's Here: 
 *
 * 1. General HTML
 * 2. Icon defaults
 * 3. Foundation overrides
 * 4. Top navigation
 * 5. Masthead
 * 6. Bodycopy and sidebar
 * 7. Post/Posts
 * 8. Footer
 * 9. Media queries for non-mobile
 * 10. ProcessWire default classes
 *
 */

/************************************************************************
 * 1. General HTML
 *
 */

body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Lora', serif;
	line-height: 1.1em;
}


h3.search {
	font-size:1em;
	color:#cccccc;
}

.post h4 {
	font-size:1em;
	}

h1 + h4,
h1 + h5 {
	margin-top: -0.5em;
}

h5 {
	color: #444; 
}

blockquote {
	font-style: italic;
	background: #eee; 
	padding-top: 1em;
	padding-bottom: 1px; 
	border-left: 3px solid #ccc; 
}

a,
.side-nav li a,
a i.normal {
	color: #6dafe0;
	color: #66A1CC; 
	text-decoration: none;
	line-height: inherit;
}

a:hover, a:focus {
    color: #a7caeb; 
}

a.more {
	font-weight: bold; 
}

iframe {
	margin: 0 !important;
}

h6 {
	color: #cccccc;
}
	h6.ads-header {
		margin-bottom: 1em; 
	}	

.footerad {
	margin-bottom:1em;
}

/************************************************************************
 * 2. Icon defaults
 *
 */

[class*="social foundicon-"]:before { font-family: SocialFoundicons; }
[class*="general foundicon-"]:before { font-family: GeneralFoundicons; }
i.general, i.social { color: #EC1E26; }

.social-icons {
	font-size: 1.3em;
}

button, .button {
	background-color: #66a1cc;
	border-color: #66a1cc;
}

/************************************************************************
 * 3. Foundation overrides
 *
 */

.row {
	/* go a little wider than Foundation does by default */
	max-width: 90em;
}

.pagination li.current a {
	background: #6dafe0;
	color: white;
	font-weight: bold;
	cursor: default;
}

.pagination li {
	margin: 0;
}

.pagination li.current a:hover, .pagination li.current a:focus {
	background: #a7caeb;
}

.side-nav li a {
	display: block;
}
	.side-nav li .x {
		display: block;
	}
	.side-nav li .x a {
		display: inline; 
	}

/************************************************************************
 * 5. Masthead
 *
 */

#masthead {
	background-color: #fff;
}

#masthead p {
	margin: 0;
}

#logo {
	/* center logo */	
	display: block;
	margin: 0 auto 1em auto;
}

#search-query {
	/*font-size: 1em;*/
	width: 70%; 
	float: left; 
}
#search-submit {
	width: 20%; 
}


/************************************************************************
 * 6. Bodycopy and sidebar
 *
 */

#bodycopy h1:first-child {
	margin-top: 0;
}

#bodycopy ul, 
#bodycopy ol {
	padding-left: 2em;	
}

#bodycopy .noindent ul,
#bodycopy .noindent ol {
	padding-left: 0; 
}

#bodycopy ul.side-nav,
#bodycopy ul.sub-nav,
#bodycopy ul.nav {
	padding-left: 0;
	margin-left: 0; 
	list-style: none; 
}

#bodycopy ul.pagination {
	padding-left: 0; 
	font-size: 1.2em;
}

#content ul.nav {
	border-top: 1px solid #ddd; 
	padding-left: 0;
	margin-left: 0;
	list-style: none; 
}

	#content ul.nav li {
		border-bottom: 1px solid #ddd; 
		padding: 0.5em 0;
		font-weight: normal;
	}
		#content ul.nav li a {
			font-weight: bold; 
		}
		#content ul.nav li span.subtitle {
			float: right; 
			color: #999; 
		}
		#content ul.nav li span.stars {
			position: relative;
			top: -3px; 
		}

	#content ul.smaller {
		border: none; 
	}
		#content ul.smaller li {
			border: none; 
			border-top: 1px dotted #ddd; 
			padding: 0.5em 0 0.5em 0;
		}

#bodycopy .inlinead {
	display: block;
	margin: 0 auto 1em auto;
	float: none; 
}


#sidebar1 h5,
#sidebar1 h4 {
	margin-bottom: 0;
}
	#sidebar1 li,
	#sidebar2 .side-nav li,
	#bodycopy .sidebar .side-nav li,
	ul.nav li {
		border-bottom: 1px solid #ddd;
		padding-bottom: 0.25em;
		font-weight: bold;
	}

aside .ad {
	text-align: center;
	overflow: hidden; 
}
	aside .ad img {
		border: 1px solid #ccc; 	
	}

	.ad300 {
		/* hide panel styles when width is small */
		border: none;
		padding: 0;
		background: #fff; 
	}

.caption {
	/* note that div.caption should set a style attribute with the width or maxwidth */
	text-align: center; 
}
	.caption-text {
		display: block;
		color: #999; 
	}

span.inline-caption {
	color: #999; 
	font-size: 0.8em;
	font-style: italic; 
	display: block;
	padding: 0.5em 0 0.5em 1em;
        border-left: 1px dotted #ccc;

}

.TextformatterVideoEmbed,
iframe {
	clear: both; 
	margin: 1em 0;
}


/************************************************************************
 * 7. Post/Posts
 *
 */

.posts hr {
	margin: 2em 0 1.5em 0;
}

article img {
	/* border and shadow to images in articles */
	border: 1px solid #ddd; 
	padding: 3px; 
	box-shadow: 0 1px 2px #ddd;
}

article header { }

	article header h1 a, 
	article header h3 a {
		color: #222; 
	}
	article header h1,
	article header h3 {
		margin-bottom: 0.25em;
	}

	article header p {
		color: #999; 
	}
		p.meta {
			font-weight: bold; 
		}
		p.meta span.date,
		p.meta span.topic a {
			margin-right: 0.5em;
		}
		p.meta i {
			/* foundicon */
			position: relative;
			top: 2px; 
		}

		p.meta span.num-comments {
			white-space: nowrap; 
			display:none;
		}
		p.meta span.date,
		p.meta span.topic,
		p.meta span.num-comments {
		}
		p.meta span.author {
			display: block;
		}


.rating {
	line-height: 1em; 
}
	span.stars {
		display: block;
		width: 120px; 
		height: 20px; 
		position: relative; 
		font-size: 20px; 
		float: left;
	}
		span.stars .star,
		span.stars .half-star {
			width: 20px; 
			display: block;
			float: left; 
			margin-right: 2px; 
		}
		span.stars .stars-off,
		span.stars .stars-on {
			width: 120px; 
			height: 20px; 
			position: absolute; 
			left: 0;
			color: #ff9300; 
			color: #EC1E26; 
		}
		span.stars .stars-off {
			color: #ddd; 
		}

		span.stars .half-star {
			width: 10px; 
			overflow: hidden; 
		}

	.rating-value {
		color: #999; 
	}

.author-links {
	font-weight: bold; 
}

.post-full h2 {
	border-bottom: medium solid black;
    font-size: 1.4em;
}

.post-full h3 {
    font-size: 1.2em;
}

/************************************************************************
 * 8. Footer
 *
 */

footer {
	padding-top: 0.9em; 
	background-color: white;
}

	#copyright,
	.processwire {
		text-align: center; 
	}
	.processwire {
		padding-bottom: 2em; 
	}
	#pw {
		font-size: 1em; 
		font-weight: normal;
	}
	#pw a {
		font-weight: bold; 
	}



/************************************************************************
 * 10. ProcessWire default classes
 *
 * Alignment styles that are used by the InputfieldTinyMCE for 
 * positioning images in bodycopy. If you are using this field type, 
 * you may want to include these or similar styles in your site.
 *
 */
.align_left {
        float: left;
        margin: 0 1em 1em 0;
}

.align_right {
        float: right;
        margin: 0 0 1em 1em;
}

.align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

.posts .align_left {
	width: 25%; 
}
.posts .align_right {
	max-width: 210px;
	width: 29%; 
}

/**
 * WireFatalError is a class that ProcessWire will use to output
 * fatal errors in the design, but only if debug mode is on, or if
 * you are logged in as a superuser. 
 *
 */
.WireFatalError {
	background: #a30000; 
	color: #fff; 
	padding: 1em; 
	position: relative;
	z-index: 9999;
}

#pro-cache {
	display: none; 
}
	body.pro-cache #pro-cache {
		display: block;
	}

#editpage {
	position: absolute;
	top: 4.75em;
	right: 0.5em; 
	z-index: 100; 
}

/************************************************************************
 * 9. Media queries for non-mobile
 *
 */

@media only screen and (min-width: 450px) {
	#bodycopy .inlinead {
		float: right; 
		margin: 0 0 1em 1em;
	}

}

@media only screen and (min-width: 768px) {
	#logo {
		/* make logo left aligned when above 768px */
		margin: 1em 0 0 0; 
	}
	#masthead {
		border: none; 
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top: 0;
	}

	.social-icons {
		font-size: 1.0em;
	}

	#editpage {
		top: -1em;
		left: 0.5em;
		right: auto; 
	}

	#copyright {
		text-align: left; 
	}

	.processwire {
		text-align: right; 
	}

}

@media only screen and (min-width: 1024px) {
	aside .ad300 {
		/* display as normal panel when width is big enough */
		border: 1px solid #d9d9d9;
		padding: 1.25em;
		background: #f2f2f2;
	}
	aside .ad300 img {
		border: none; 
	}
}

@media only screen and (min-width: 960px) {
	#bodycopy p,
	#bodycopy li {
		/* slightly larger font size */
		font-size: 1.1em;
	}
	#sidebar p,
	#sidebar li,
	#bodycopy .sidebar p,
	#bodycopy .sidebar li {
		/* but keep same size for sidebar */ 
		font-size: 1.0em;
	}

	#ad1 {
		text-align: right; 
	}

	.social-icons {
		font-size: 1.4em;	
	}
	.posts img.ds {
		/* ds=downsized to 200 */
		min-width: 208px;
		/*
		border: 1px solid #ddd; 
		padding: 3px; 
		*/
	}

}

#optin { margin: 0 auto 2em; overflow: hidden; text-align: center }
	#optin input {
		background: #fff url(images/input.png) repeat-x bottom;
		border: 1px solid #ccc;
		float: left;
		font-size: 14px;
		margin: 0 10px 10px 0;
		padding: 8px 10px;
		width: 280px;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		box-shadow: 0 2px 2px #ddd;
		-moz-box-shadow: 0 2px 2px #ddd;
		-webkit-box-shadow: 0 2px 2px #ddd
	}
		#optin input.name { background: #fff url(images/name.png) no-repeat 10px center; padding-left: 35px }
		#optin input.email { background: #fff url(images/email.png) no-repeat 10px center; padding-left: 35px }
		#optin input[type="submit"] {
			background: #217b30 url(images/green.png) repeat-x top;
			border: 1px solid #137725;
			color: #fff;
			cursor: pointer;
			float: left;
			font-size: 14px;
			font-weight: bold;
			padding: 3px 5px;
			text-shadow: -1px -1px #1c5d28;
			text-transform: uppercase;
			width: auto
		}
			#optin input[type="submit"]:hover { color: #c6ffd1 }
		#optin span { background: url(images/lock.png) no-repeat center left; float: left; margin-left: 15px; padding-left: 20px }
	
	
.inline-caption {
    border-left: 1px dotted #CCCCCC;
    color: #999999;
    font-size: 0.9em;
    padding-left: 1em;
	font-size: 0.8em !important;
}