/*
Theme Name: Nice and Ripe
Theme URI: http://niceandripe.com/
Description: Custom Wordpress theme
Author: Sean Johnson (Nice and Ripe Ltd)
Version: 0.9
*/

/* 	RESET
-------------------- */
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, address, b, cite, code,
	del, dfn, em, i, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video
	{ margin: 0; padding: 0; border: 0; outline: 0; font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; vertical-align: baseline; }

	article, aside, dialog,
	figure, footer, header,
	hgroup, nav, section { display: block; }

	ol, ul { list-style: none; }

	table { border-collapse: separate; border-spacing: 0; }

	blockquote, q { quotes: none; }
	

/* 	DEFAULT STYLES
---------------------------------------- */

/*	@font-face -------------------- */


/*	Document -------------------- */
	html {  background: url(images/brown_paper.jpg) center;  }
	body { font-family: proxima-nova-1, proxima-nove-2, sans-serif; font-size: 14px; line-height: 22px; color: #333; vertical-align: baseline;}

/*	Text Elements -------------------- */
	p { margin-bottom: 22px; }
	p:empty { display: none; }
	blockquote { margin-bottom: 22px; padding: 0 22px; font-style: italic; }
	blockquote p { margin: 0; } 
	cite { font-style: normal; text-transform: uppercase; }
	pre { position: relative; margin: 22px 0 ; overflow: auto; }
	pre, code { padding: 0 20px; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 22px; color: #666; }
	code { display: block; }
	small { font-size: 12px; }
	abbr { border-bottom: 1px dotted #999; cursor: help; }
	del { text-decoration: line-through; }
	ins { background: #ff0; text-decoration: none; }
	mark { background: #ff0; text-decoration: none; font-style: italic; }
	sup, sub { position: relative; height: 0; line-height: 11px; font-size: 12px; }
	sup { bottom: 1ex; }
	sub { top: 0.5ex; }
	hr { margin: 0.5em auto; height: 0; border-bottom: 1px solid #ccc;  }
	strong, b { font-weight: bold; }
	em, i { font-style: italic; }

/*	Headings -------------------- */
	h1 { clear: both; margin-bottom: 11px; font-family: proxima-nova-extra-condensed-1, proxima-nova-extra-condensed-2, sans-serif; font-size: 30px; line-height: 33px; color: #000; }
	h2 { clear: both; margin-bottom: 11px; font-family: proxima-nova-extra-condensed-1, proxima-nova-extra-condensed-2, sans-serif; font-size: 26px; line-height: 33px; color: #000; }
	h3 { font-family: proxima-nova-1, proxima-nova-2, sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; color: #000; }
	h4, h5, h6 { font-size: 14px; line-height: 22px; font-weight: bold; color: #333; }

	h1 a, h2 a, h3 a { text-decoration: none; color: inherit; }

/*	Links -------------------- */
	a { text-decoration: underline; color: #333; }
	a:hover,
	a:focus { text-decoration: none; }
	a:focus {  outline: #000 dotted thin; }
	a span { cursor: pointer; }

/*	Lists -------------------- */
	ul, ol, dl { margin-bottom: 22px; }
	li ul, li ol { margin-bottom: 0; }

	ul { margin-left: 24px; list-style: disc outside; }
	li ul { list-style: circle outside; }

	ol { margin-left: 24px; list-style: decimal outside; }
	dt { font-weight: bold; }
	dd { margin-bottom: 22px; padding-left: 20px; }

/*	Forms -------------------- */
	form { margin-bottom: 22px; width: 300px; }
	fieldset { margin-bottom: 22px; }
	legend { font-weight : bold; }
	form div { overflow: hidden; }
	label { font-weight : bold; }
	input, select, textarea { font-family: inherit; font-size: inherit; }
	input[type="text"], input[type="password"], input[type="file"],
	input[type="email"], input[type="url"] { display: block; width: 100%; vertical-align: middle; }
	input[type="image"], input[type="submit"], input[type="reset"] { width: auto; cursor: pointer; }
	textarea { display: block; margin: 0; width: 100%; height: 122px; }
	input#s { display: inline; float: left; margin-right: 5px; }

	.gform_wrapper ul { margin: 0; list-style: none; }
	.gform_wrapper ul li { margin-bottom: 22px; }
	.gform_heading { margin-bottom: 22px; }
	.validation_error { margin-bottom: 22px; color: #f00; font-weight: bold; }
	.validation_message { color: #f00; }
	.ginput_left { float: left; width: 45%; }
	.ginput_right { float: right; width: 45%; }
form span { display: block;}
form label span { display: inline }

/*	Tables -------------------- */
	table { margin-bottom: 22px; width: 100%; border-collapse: collapse; border: 1px solid #ccc; }
	caption, th, td { padding: 5px 10px; text-align: left; border: 1px solid #ccc; }
	caption { background: #eee; border: 1px solid #ccc; color: #000; }
	th { font-weight: bold; }

/*	Images -------------------- */
	img { max-width: 100%; height: auto; }
	img.left,
	.imgleft,
	img.alignleft,
	img[align="left"] { float: left; margin-right: 20px; }
	img.right,
	.imgright,
	img.alignright,
	img[align="right"] { float: right; margin-left: 20px; }

/*	Useful -------------------- */
  	.clear { clear: both; }
	.left { float: left; }
	.right { float: right; }
	.alignleft { text-align: left; }
	.alignright { text-align: right; }
	.aligncenter { text-align: center; }
	.justify { text-align: justify; }
	.hide { display: none; }
	.collapse { margin: 0; padding: 0; }
	.clearbar { clear:  both; }


/* 	LAYOUT
-------------------- */

/*  Default styles for up to 479px viewport widths (320px) */

/*	Document -------------------- */
	body {  }
	.row { margin: 0 auto; width: 300px; overflow: hidden; word-wrap: break-word; }
	.container:first-of-type { margin-bottom: 22px; background: #170000; overflow: hidden; }
	.container.footer { background: #170000;  overflow:  hidden; }

/*	Header -------------------- */
	header[role=banner] { padding-top: 22px;  }
	header[role=banner] img { width: 300px; }
	header[role=banner] h1 { display: none; }
	header[role=banner] h2 { display: none; }

/*	Nav -------------------- */
	nav.primary ul { margin: 0 auto 22px auto; width: 300px; list-style: none; font-family: proxima-nova-1, proxima-nova-2, sans-serif; font-weight: bold; font-size: 14px; line-height: 33px; text-transform: uppercase; text-align: center; overflow: hidden; }
	nav.primary ul li { float: left; padding: 5px; width: 140px; }
  nav.primary ul li a { text-decoration: none; color: #03a5c3; }
  nav.primary ul li a:hover { color: #fff }
  nav.primary ul li.current-menu-item a { color: #ca0d26; }

	nav.pagenav .left, nav.pagenav .right { width: auto; }
	#content nav.pagenav { clear: both; margin: 22px 0; overflow: hidden; }

/*	Content -------------------- */
	#content { min-height: 400px; }
	#sidebar {  }
	
	.bar { clear:  both; margin-bottom: 8px; width: 100%; height: 3px; background: url(images/footer.png) bottom repeat-x; }
	.bar.alt { margin-bottom: 22px; background: url(images/footer.png) top repeat-x; }
	
	h2.intro { clear: both; font-size: 28px; font-weight: bold; text-transform: none; text-align: center }
	h2.intro a { color: #ca0d26; }
	a.massive { font-size:  36px; }

	article { margin-bottom: 22px; overflow: hidden; }
	article { border-bottom: 1px solid #ccc; }
	article:last-of-type,
	article.portfolio,
	article.gallery { border: 0; }	
	article footer { margin: -11px 0 22px 0; font-size: 12px; color: #999; }
	article hgroup { margin-bottom: 22px; }
	
/* Columns -------------------- */
	.columns { float: left; margin: 0 20px 22px 0; width: 300px; overflow: hidden; }
	.columns.one-right { float: right; margin: 0; }
	.columns.merge { float: left; width: 620px; }
	.columns.two:nth-of-type(2n+2) { margin-right: 0; }
	.columns.three:nth-of-type(3n+3) { margin-right: 0; }

/* Comments -------------------- */	
	#comments { clear: both; }
	#comments ol { margin: 0; list-style: none; }
	#comments ul { margin-left: 80px; list-style: none; }
	li.comment { margin-bottom: 22px; }
	.comment p { margin-bottom: 0; }
	.comment-author, .comment-reply-link { font-size: 12px; }
	.comment-author img { float: left; margin-right: 10px; }
	.comment-author cite { display: block; }
	#reply-title small { line-height: 0; }
	p.form-allowed-tags, p.form-allowed-tags code { font-size: 12px }

	aside h2 { margin-bottom: 0; }

/*	Gallery -------------------- */		
	article.gallery, .gallery-item { margin: 0 auto 22px auto; width: 220px; }
	.gallery h3, .gallery p, .gallery a { margin: 0; white-space: nowrap; overflow: hidden; }
	.gallery a { text-decoration: none; }

/*	Events -------------------- */		


/*  Fonts -------------------- */
	article.fonts { margin-bottom: 0; }
	
/*	Portfolio -------------------- */
	article.portfolio { margin: 0 auto 22px auto; width: 220px; }
	article.portfolio .info {  }
	article.portfolio h3, article.portfolio p, article.portfolio a { margin: 0; white-space: nowrap; overflow: hidden; }
	article.portfolio a { text-decoration: none; }


/*	Footer -------------------- */
	footer[role=contentinfo] { padding: 22px 0 44px 0; font-size: 12px; text-align: center; color: #DFD1B6; }
	footer[role=contentinfo] p { margin-bottom: 0; }
	footer[role=contentinfo] a { text-decoration: none; color: #DFD1B6; }

/*	Slideshow -------------------- */
	#slideshow { position: relative; margin-bottom: 22px; width: 300px; height: 117px; }
	#slideshow img { position: absolute; top: 0; left: 0; z-index: 28; opacity: 0.0; }
	#slideshow img.active { z-index: 30; opacity: 1.0; }
	#slideshow img.last-active { z-index: 29; }

	
	
/*	Media Queries -------------------- */

@media only screen and (min-width: 768px) and (max-width: 979px) {
	/*	Document -------------------- */
		body { }
		.row { margin: 0 auto 22px auto; width: 728px; }
    .container:first-of-type { margin-bottom: 22px; height: 160px; background: transparent url(images/header.png) bottom repeat-x;  }
    .container.footer { background: transparent url(images/footer.png) top repeat-x; overflow:  hidden; }

	/*	Header -------------------- */
  	header[role=banner] { margin-bottom: 0; }
	
	/*	Nav -------------------- */
		nav.primary ul { margin: 0 auto 22px auto; width: 728px; height: 44px; list-style: none; text-align: center; }
		nav.primary ul li { display: inline; padding: 10px 20px 10px 0; width: auto; height: 22px; }
		
	/*	Content -------------------- */
		#content { float: left; margin-right: 0; width: 476px; }
		#content.fullwidth { float: none; width: 728px; }
		#sidebar { float: right; margin-right: 0; width: 226px; }
		#intro {  }

		.row aside { float: left; margin-right: 24px; width: 226px; }
		.row aside:nth-of-type(3n+3) { float: right; margin-right: 0; }

		article .twocol { width: 220px; overflow: hidden; }		

	/*	Gallery -------------------- */		
		article.gallery, .gallery-item { float: left; margin: 0 16px 11px 0; width: 170px; }
		article.gallery:nth-of-type(4n+4), .gallery-item:nth-of-type(4n+4) { margin-right: 0; }
	
  /* Columns -------------------- */
  	.columns { float: left; margin: 0 20px 22px 0; width: 226px; overflow: hidden; }
  	.columns.one-right { float: right; margin: 0; }
  	.columns.merge { float: left; width: 476px; }
  	.columns.two:nth-of-type(2n+2) { margin-right: 0; }
  	.columns.three:nth-of-type(3n+3) { margin-right: 0; }	
		
	/*	Portfolio -------------------- */
		article.portfolio { float: left; margin-right: 14px; width: 170px; }
		article.portfolio:nth-of-type(4n+4) { margin-right: 0; } 

	/*	Slideshow -------------------- */
		#slideshow { position: relative; margin-bottom: 22px; width: 728px; height: 284px; }
		#slideshow img { position: absolute; top: 0; left: 0; z-index: 28; opacity: 0.0; }
		#slideshow img.active { z-index: 30; opacity: 1.0; }
		#slideshow img.last-active { z-index: 29; }
}


@media only screen and (min-width: 980px) {
	/*	Document -------------------- */
		body { margin: 0;}
		.container { width: 100%; }
		.container:first-of-type { margin-bottom: 22px; height: 160px; background: transparent url(images/header.png) bottom repeat-x;  }
		.container.footer { background: transparent url(images/footer.png) top repeat-x; overflow:  hidden; }

		.row { width: 940px; }
		form { width: 460px; }
		

	/*	Header -------------------- */
		header[role=banner] { margin-bottom: 0; }

	/*	Nav -------------------- */
		nav.primary ul { margin: 0 auto 22px auto; width: 940px; height: 44px; list-style: none; }
		nav.primary ul li { float: left; padding: 10px 30px 10px 0; width: auto; height: 22px; }	

	/*	Content -------------------- */
		#content { float: left; margin-right: 0; width: 620px; }
		#content.fullwidth { float: none; width: 940px; }
		#intro { float: left; width: 300px; }
		#sidebar { float: right; margin-right: 0; width: 220px; }
		#sidebar h3 { margin-bottom: 0; }
		#sidebar h3:first-of-type { margin-top: 10px; }
		.row aside { float: left; margin-right: 20px; width: 300px; }
		.row aside:nth-of-type(3n+3) { float: right; margin-right: 0; }

	/*	Gallery -------------------- */		
		article.gallery, .gallery-item { float: left; margin: 0 20px 22px 0; }
		article.gallery:nth-of-type(4n+4), .gallery-item:nth-of-type(4n+4) { margin-right: 0; }
	
	/*	Events -------------------- */		
	
	
	/*	Directory -------------------- */
	
		
	/*	Portfolio -------------------- */
		article.portfolio { float: left; margin-right: 20px; }
		article.portfolio:nth-of-type(4n+4) { margin-right: 0; } 

	/*	Footer -------------------- */
		footer[role=contentinfo] { width: 940px;  }
		footer[role=contentinfo] a { text-decoration: none; }
		
	/*	Slideshow -------------------- */
		#slideshow { position: relative; float: right; width: 620px; height: 242px; }
		#slideshow img { position: absolute; top: 0; left: 0; z-index: 28; opacity: 0.0; }
		#slideshow img.active { z-index: 30; opacity: 1.0; }
		#slideshow img.last-active { z-index: 29; }
}