/*
Theme Name: indie navi default theme 2
Theme URI: /
Author: indie navi design staff
Author URI: /
Description: indie navi's default theme, mark II
Version: 0.2
License: This is indie navi's theme, so don't go using it. Not that anybody would want to, but hey.
Tags: indie navi
Text Domain: indienavi2
*/

/* Site-wide */
body, img, div, span, a {
	margin: 0;
	border: 0;
	padding: 0;
}

body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
}

div {
	display: block;
}

.centered {
	margin: 0 auto;
	text-align: center;
}

img.scaling-image {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9 /* ie8 */
}

/* the below works with WP's automatically added class tags */
img.size-full {
	display: block;
	max-width: 100%;
	height: auto;
	width: auto\9 /* ie8 */
}

img.half-size-scaling-image-left {
	display: block;
	width: 48%;
	margin: 2% 1% 2% 0;
	
	float: left;
}

img.half-size-scaling-image-right {
	display: block;
	width: 48%;
	margin: 2% 0 2% 1%;
	
	float: right;
}

.fixed { /* needed for the navbar that stops scrolling at the top */
	top: 0;
}

/* flexible embedded videos */
/* code from the below from: http://demosthenes.info/blog/649/Responsive-Design-Create-Fluid-YouTube-and-Vimeo-Content */
div.responsive-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

div.responsive-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

p {
	clear: both;
	margin: 10px 0;
	font-size: 15px;
	line-height: 30px;
}

a {
	text-decoration: none;
	font-weight: bold;
}

a:link {
	color: #284198;
}
a:visited {
	color: #284198;
}
a:hover {
	color: #54baea;
}
a:active {
	color: #54baea;
}

span.title {
	font-style: italic;
}

/* formatting for wp_pagenavi */
div.wp-pagenavi {
	clear: both;
	margin: 0 0 15px 0;
}

span.current {
	display: inline-block;
	margin: 10px 10px 10px 0;
	padding: 5px 10px;
	background-color: #C0C0C0;
	color: #ffffff;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	
	font-weight: bold;
}

div.wp-pagenavi a {
	display: inline-block;
	margin: 10px 10px 10px 0;
	padding: 5px 10px;
	background-color: #284198;
	color: #ffffff;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
}

div.wp-pagenavi a:hover {
	background-color: #54baea;
}

/* page formatting */

#page-wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 80px 0 0 0;
	text-align: center;
}

/* masthead and navigation bar */

#masthead {
	display: block;
	width: 100%;
	height: auto;
	width: auto\9 /* hack for ie8 */
}

#offset-div {
	height: 0;
}

#relative-div {
	width: 100%;
	position: relative;
}

#navigation-bar {
	width: 100%;
	background: linear-gradient(to bottom, rgba(85,185,234,1), rgba(85,185,234,0.85));
	position: absolute;
}

#navigation-bar-links-p {
	margin: 0;
	border: 0;
	padding: 0;
	
	width: 100%;
	line-height: 50px;
	text-align: center;
	vertical-align: middle;
	
	overflow: hidden;
}

#navigation-bar-links-p a {
	margin: 0 2%;	
	text-decoration: none;
	font-family: Tahoma, Geneva, sans-serif;
	color: #ffffff;
	font-size: 25px;
	font-weight: normal;
}

#navigation-bar-links-p a:hover {
	text-shadow: 0px 1px 1px #4d4d4d;
	color: #222;
}

#navigation-bar-links-p a:active {
	color: #294197;
}

#navigation-bar-arrow-p {
	margin: 0;
	border: 0;
	padding: 0;
	
	width: 100%;
	text-align: center;
	
	display: none;
}

#toggle-arrow {
	margin: 0; /* override general a formatting */
	opacity: 0.8;
}

#toggle-arrow:hover {
	opacity: 1.0;
}


/* front page formatting */

#wrapper {
	margin: 100px auto 0 auto;
	width: 1080px;
}

#content-wrapper {
	float: left;
	width: 750px;
}

p.post-info {
	margin: 15px 0;
	font-size: 12px;
}

p.between-posts {
	display: block;
	width: 100%;
	height: 25px;
}

a.heading {
	margin:  0 0 10px 0;
	display: block;
	font-size: 40px;
	color: #333333;
	font-weight: normal;
}
a.heading:hover {
	color: #333333;
	text-decoration: underline;
}

a.news-heading {
	margin:  0 0 10px 0;
	display: block;
	font-size: 30px;
	color: #333333;
	font-weight: normal;
}
a.news-heading:hover {
	color: #333333;
	text-decoration: underline;
}

/* right side bar formatting */

#right-column-wrapper {
	margin: 0 0 0 30px;
	float: right;
	width: 300px;
}

p.orange-heading {
	margin: 0;
	width: 100%;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	text-align: center;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	color: #ffffff;
	
	background-color: #f8a047;
}

a.right-column-heading {
	margin:  10px 0 30px 0;
	display: block;
	font-size: 20px;
	color: #333333;
	font-weight: normal;
}

a.right-column-heading:link {
	color: #333333;
}
a.right-column-heading:visited {
	color: #333333;
}
a.right-column-heading:hover {
	color: #333333;
	text-decoration: underline;
}
a.right-column-heading:active {
	color: #333333;
	text-decoration: underline;
}

/* footer formatting */

#footer {
	clear: both;
	width: 100%;
	height: 300px;
	background-image: url('./images/background.png');
}

/* article / archive formatting */

#article-wrapper {
	margin: 0 auto;
	padding: 75px 0 0 0;
	width: 1080px;
}

p.heading-p {
	font-size: 40px;
	line-height: normal;
}

a.image-gallery-link {
	clear: both;
	display: block;
	width: 96%;
	margin: 15px 0;
	padding: 2%;
	background-color: #55b9ea;
	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	line-height: 30px;
	color: #ffffff;
	
	text-align: center;
}

a.image-gallery-link:hover {
	text-decoration: underline;
}

/* image gallery formatting */

img.image-gallery-img {
	padding: 1%;
	float: left;
	width: 31%;
	background-color: #ffffff;
}

img.image-gallery-img:hover {
	background-color: #f8a047;
}

a.image-gallery-headline {
	margin:  0 0 10px 10px;
	display: block;
	clear: both;
	
	font-size: 20px;
	color: #333333;
	font-weight: normal;
}
a.image-gallery-headline:hover {
	color: #333333;
	text-decoration: underline;
}
a.image-gallery-headline:active {
	color: #333333;
	text-decoration: underline;
}

#image-gallery-navigation {
	display: block;
	clear: both;
	margin: 15px auto;
	font-family: Tahoma, Geneva, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	
	font-size: 0;
}

#image-gallery-navigation a {
	display: inline-block;
	background-color: #55b9ea;
	padding: 10px 20px;
	margin: 0 10px;
	color: #FFFFFF;
	
	font-size: 25px;
}

#image-gallery-navigation a:hover {
	background-color: #294197;
}

/* image modal css */

#overlay {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 4;
}

#modal {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	z-index: 4; /* gallery's left and right buttons are 2, navigation bar is 3, overlay is also 4 */
}

/* Screen size specific styling */

@media screen and (max-width: 1080px) {

	#navigation-bar-links-p {
		line-height: 35px; /* must be defined to vertically center links */
	}

	#navigation-bar-links-p a {
		font-size: 18px;
	}
	
	#wrapper {
		margin: 75px auto;
		width: 750px;
	}

	#content-wrapper {
		width: 100%;
	}

	#right-column-wrapper {
		margin: 15px 0;
		width: 100%;
	}
	
	a.heading {
		font-size: 30px;
	}
	
	p.heading-p {
		font-size: 30px;
	}

	p.post-info {
		font-size: 12px;
	}
	
	a.right-column-heading {
		font-size: 30px;
	}
	
	#article-wrapper {
		margin: 0 auto;
		padding: 65px 0 0 0;
		width: 750px;
	}
}

@media screen and (max-width: 750px) {

	#navigation-bar-links-p {
		line-height: 30px; /* must be defined to vertically center links */
	}

	#navigation-bar-links-p a {
		font-size: 18px;
	}
	
	#wrapper {
		margin: 55px 0;
		width: 100%;
	}

	#content-wrapper {
		width: 100%;
	}

	#right-column-wrapper {
		margin: 15px 0;
		width: 100%;
	}
	
	p {
		font-size: 12px;
		line-height: 25px;
	}
	
	a.heading {
		font-size: 25px;
	}
	
	a.news-heading {
		font-size: 25px;
	}
	
	p.heading-p {
		font-size: 25px;
	}

	p.post-info {
		font-size: 10px;
	}
	
	a.right-column-heading {
		font-size: 25px;
	}
	
	#article-wrapper {
		margin: 0 auto;
		padding: 55px 0 0 0;
		width: 100%;
	}
}