/* ==========================================================================
   Events
   ========================================================================== */
   
   .events-full {width: 100%;}

/* INTRO */

.watermark { background-position:right 125px; }

/* SECTION */

section img { max-width:100%; height:auto; }
section h1, section h2, section h3, section h4 { font-weight:normal; margin:0; padding:0; }


/* FILTER  */

aside, div.aside { background:url(/assets/images/textures/farmer.jpg);  }
aside .intro, div.aside .intro { text-align:center; display:none; margin:0 0 1em 0; font:300 1.188em/1.1em 'Crimson Text', georgia, 'serif'; }
aside input[type='text'], div.aside input[type='text']{ width:90%; margin:0; padding:5px; border:solid 1px #9b8578; border-radius:3px; font:300 .814em 'Montserrat', verdana, sans-serif; }
aside input[type='checkbox'], div.aside aside input[type='checkbox'] { margin-right:.7em; }
aside .btn, div.aside .btn { display:block; margin:.9em auto 0 auto; float:left; }
.showTo p, .showFrom p { color: #2c9bb1; margin:0; padding:0 0 4px 0; font-size: .875em; font-family: 'Roboto Slab', Helvetica, Arial, sans-serif; }
.showFrom { width:45%; float:left; display:block; }
.showTo { width:45%; float:left; margin-left:5%; display:block; }
.keywords { margin:1em 0 0 0!important; }
.filterHeadline { text-align:center; display:block; margin:0.7em 0 .4em 0; cursor: pointer; }
.filterHeadline span { display:block; }
.selectRegions, .selectCategories { font-family:'Montserrat', verdana, sans-serif; font-weight:300; background-color:rgba(255,255,255,0.80); border:solid 1px #9b8578; padding:1.2em 1em 1em 1em; }
.selectRegions { border-bottom: none; }
.selectRegions p, .selectCategories p { color: #2c9bb1;  padding-bottom:0.5em; font-size:.814em; font-family: 'Roboto Slab', Helvetica, Arial, sans-serif; }
.selectRegions li, .selectCategories li { margin-bottom:.2em; font-size:.75em; line-height:1em; }


/* EVENTS */ 


.singleEvent a.details { font:700 .938em 'Roboto Slab', Helvetica, Arial, sans-serif; text-decoration:none; display:block; margin-top:.5em; }
.singleEvent a.details:hover { text-decoration:underline; }
.singleEvent { border-bottom:dashed 1px #4f3b30; padding:1em 0; color:#4f3b30; }
.singleEvent.evenRow { background-color:rgba(255, 245, 226, .50); }
.eventInfo { width:87%; float:right; padding:0 0 0 2%; border-left:dashed 1px #4f3b30; display:block; }
.eventInfo p { margin-bottom: 10px; font:300 .875em/1.4em 'Roboto Slab', Helvetica, Arial, sans-serif; font: 400 1.064em/1.3em 'Crimson Text',georgia,'serif'; }
.singleEvent h2 { font:700 1.064em/1.313em 'Roboto Slab', Helvetica, Arial, sans-serif; margin-bottom: 0.3em; }
a.eventName {color: #2c9bb1; text-decoration: none;}
a.eventName:hover {color: #b26528; text-decoration: underline;}
.eventDate { width:10%; margin-right:2%; text-align:center; }
.eventDate p { display:block; font:700 2em/1em 'Roboto Slab', Helvetica, Arial, sans-serif; margin:0 0 0.3em; }
.eventDate span { display:block; font:700 .4375em/1em 'Roboto Slab', Helvetica, Arial, sans-serif; margin-bottom:0.2em; }
.eventDate em { display:block; border-top:solid 1px #9b8578; border-bottom:solid 1px #9b8578; font-size:.4375em; line-height:1.5em; font-style:normal; }
.eventLocation { display: block; margin: .5em 0; font-weight: 400; font-style: italic;}

.moreDetailsLink { font:400 .938em 'Roboto Slab', Helvetica, Arial, sans-serif; text-decoration:none; display:inline-block; margin:0 2em .5em 0; }
.add2PlannerLink { font:400 .875em 'Roboto Slab', Helvetica, Arial, sans-serif; text-decoration:none; display:inline-block; }
.moreEventsLink { text-align:center; font:400 0.875em/1.25em 'Roboto Slab', Helvetica, Arial, sans-serif; display:block; padding:1em; text-decoration:none; }
.moreDetailsLink:hover, .add2PlannerLink:hover, .moreEventsLink:hover {text-decoration: underline;}

/* ADD EVENT BUTTON */

.addEvent { text-align:center; }
.addEvent .btn { display:inline-block; position:relative; margin:1.5em auto; }


/* ----------------------- MEDIA QUERIES ------------------------ */


@media only screen and (max-width:480px){
	#resources { margin-top:0; }
	aside, div.aside { padding:.5em 2% 1em; }
	.withCanvasMargins { padding-bottom:0; }
	.filterHeadline { display:block; text-decoration:underline; font:400 .9em/1em 'roboto slab', arial, san-serif; color:rgb(178, 101, 40); margin: 1.2em 0.8em 0; text-align: right; }
	.filterHeadline span { display:inline-block; text-decoration:underline; color:rgb(178, 101, 40); }
	.selectCategories { margin-bottom:.75em; }
	.events { clear:both; }
	.eventInfo { width:80%; }
	.eventDate { width:15%; }
	.selectRegions { margin-top:1em; }
	.showHideFilters { display:none; margin-top:.8em; }
	}

@media only screen and (min-width:481px) {
	aside, div.aside { padding:.5em 2% 1em; }
	.filterHeadline { display:block; text-decoration:underline; font:400 .9em/1em 'roboto slab', arial, san-serif; color:rgb(178, 101, 40); margin: 1.2em 0.8em 0; text-align: right; }
	.filterHeadline span { display:inline-block; text-decoration:underline; color:rgb(178, 101, 40); }
	.showHideFilters { display:none; margin-top:.8em; }
	}

@media screen and (min-width: 520px) {
	.page-width { width: 95%; }
	}

@media screen and (min-width: 670px) {
	aside, div.aside { width:28%; float:left; padding: 1.3em 2% 1.5em; }
	aside .btn, div.aside .btn { float:none; }
	aside .intro, div.aside .intro { display:block; }
	.filterHeadline { text-align:center; display:block; margin:0.7em 0 .4em 0; font:300 2em/1em lobster, cursive; color:rgb(0, 125, 155); text-decoration:none; }
	.filterHeadline span { display:block; text-transform:uppercase; font:700 .35em/.7em 'Roboto Slab', Helvetica, Arial, sans-serif; color:rgb(178, 101, 40); background: url('/assets/images/ui/event-headline-rules.png') no-repeat center center; text-decoration:none; }
	.showHideFilters { display:block; margin-top:0; }
	.events { width:66%; margin-left:2%; float:right; }
	}

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

@media screen and (min-width: 860px) {
	.filterHeadline  { font-size:2.65em; }
	}

@media screen and (min-width: 875px) {
	.eventInfo .info { width:60%; float:left; }	
	}

@media screen and (min-width: 930px) {
	.eventDate { width:8%; }
	.eventInfo { width:87%; }
	}